@aurodesignsystem-dev/auro-formkit 0.0.0-pr681.1 → 0.0.0-pr684.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/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
- package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
- package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +1026 -12
- package/components/bibtemplate/dist/registered.js +1026 -12
- package/components/combobox/demo/api.min.js +1830 -478
- package/components/combobox/demo/index.min.js +1830 -478
- package/components/combobox/dist/index.js +1703 -355
- package/components/combobox/dist/registered.js +1703 -355
- package/components/counter/demo/api.min.js +1813 -466
- package/components/counter/demo/index.min.js +1813 -466
- package/components/counter/dist/auro-counter-button.d.ts +2 -0
- package/components/counter/dist/iconVersion.d.ts +1 -1
- package/components/counter/dist/index.js +1813 -466
- package/components/counter/dist/registered.js +1813 -466
- package/components/datepicker/demo/api.min.js +2319 -643
- package/components/datepicker/demo/index.min.js +2319 -643
- package/components/datepicker/dist/index.js +2319 -643
- package/components/datepicker/dist/registered.js +2319 -643
- package/components/dropdown/demo/api.min.js +6 -2
- package/components/dropdown/demo/index.min.js +6 -2
- package/components/dropdown/dist/index.js +6 -2
- package/components/dropdown/dist/registered.js +6 -2
- package/components/input/demo/api.min.js +565 -235
- package/components/input/demo/index.min.js +565 -235
- package/components/input/dist/index.js +565 -235
- package/components/input/dist/registered.js +565 -235
- package/components/menu/demo/api.min.js +7 -3
- package/components/menu/demo/index.min.js +7 -3
- package/components/menu/dist/iconVersion.d.ts +1 -1
- package/components/menu/dist/index.js +7 -3
- package/components/menu/dist/registered.js +7 -3
- package/components/select/demo/api.min.js +1166 -144
- package/components/select/demo/index.min.js +1166 -144
- package/components/select/dist/index.js +1159 -141
- package/components/select/dist/registered.js +1159 -141
- package/package.json +1 -1
|
@@ -44,7 +44,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
44
44
|
*/
|
|
45
45
|
const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
|
|
46
46
|
|
|
47
|
-
let AuroElement$
|
|
47
|
+
let AuroElement$4 = class AuroElement extends i$2 {
|
|
48
48
|
static get properties() {
|
|
49
49
|
return {
|
|
50
50
|
|
|
@@ -559,7 +559,7 @@ const {
|
|
|
559
559
|
|
|
560
560
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
561
561
|
|
|
562
|
-
let AuroLibraryRuntimeUtils$
|
|
562
|
+
let AuroLibraryRuntimeUtils$6 = class AuroLibraryRuntimeUtils {
|
|
563
563
|
|
|
564
564
|
/* eslint-disable jsdoc/require-param */
|
|
565
565
|
|
|
@@ -629,7 +629,7 @@ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
|
629
629
|
class AuroFormValidation {
|
|
630
630
|
|
|
631
631
|
constructor() {
|
|
632
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
632
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
|
|
633
633
|
}
|
|
634
634
|
|
|
635
635
|
/**
|
|
@@ -3463,9 +3463,9 @@ let BaseIcon$2 = class BaseIcon extends AuroElement$1$1 {
|
|
|
3463
3463
|
}
|
|
3464
3464
|
};
|
|
3465
3465
|
|
|
3466
|
-
var tokensCss$2$
|
|
3466
|
+
var tokensCss$2$2 = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
3467
3467
|
|
|
3468
|
-
var colorCss$3$
|
|
3468
|
+
var colorCss$3$2 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-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)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
3469
3469
|
|
|
3470
3470
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3471
3471
|
// See LICENSE in the project root for license information.
|
|
@@ -3623,9 +3623,9 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
|
|
|
3623
3623
|
static get styles() {
|
|
3624
3624
|
return [
|
|
3625
3625
|
super.styles,
|
|
3626
|
-
i$5`${tokensCss$2$
|
|
3626
|
+
i$5`${tokensCss$2$2}`,
|
|
3627
3627
|
i$5`${styleCss$2$2}`,
|
|
3628
|
-
i$5`${colorCss$3$
|
|
3628
|
+
i$5`${colorCss$3$2}`
|
|
3629
3629
|
];
|
|
3630
3630
|
}
|
|
3631
3631
|
|
|
@@ -3659,8 +3659,12 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
|
|
|
3659
3659
|
async firstUpdated() {
|
|
3660
3660
|
await super.firstUpdated();
|
|
3661
3661
|
|
|
3662
|
-
|
|
3663
|
-
|
|
3662
|
+
/**
|
|
3663
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
3664
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
3665
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
3666
|
+
*/
|
|
3667
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
3664
3668
|
const svgDesc = this.svg.querySelector('desc');
|
|
3665
3669
|
|
|
3666
3670
|
if (svgDesc) {
|
|
@@ -3708,9 +3712,9 @@ var iconVersion$2 = '6.1.2';
|
|
|
3708
3712
|
|
|
3709
3713
|
var styleCss$1$2 = i$5`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}`;
|
|
3710
3714
|
|
|
3711
|
-
var colorCss$2$
|
|
3715
|
+
var colorCss$2$2 = i$5`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
3712
3716
|
|
|
3713
|
-
var tokensCss$1$
|
|
3717
|
+
var tokensCss$1$2 = i$5`:host(:not([ondark])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdown-helptext-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-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
|
|
3714
3718
|
|
|
3715
3719
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3716
3720
|
// See LICENSE in the project root for license information.
|
|
@@ -3749,8 +3753,8 @@ class AuroDropdownBib extends i$2 {
|
|
|
3749
3753
|
static get styles() {
|
|
3750
3754
|
return [
|
|
3751
3755
|
styleCss$1$2,
|
|
3752
|
-
colorCss$2$
|
|
3753
|
-
tokensCss$1$
|
|
3756
|
+
colorCss$2$2,
|
|
3757
|
+
tokensCss$1$2
|
|
3754
3758
|
];
|
|
3755
3759
|
}
|
|
3756
3760
|
|
|
@@ -3930,7 +3934,7 @@ var tokensCss$4 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texti
|
|
|
3930
3934
|
|
|
3931
3935
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
3932
3936
|
|
|
3933
|
-
let AuroLibraryRuntimeUtils$
|
|
3937
|
+
let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
3934
3938
|
|
|
3935
3939
|
/* eslint-disable jsdoc/require-param */
|
|
3936
3940
|
|
|
@@ -4011,7 +4015,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
4011
4015
|
this.onDark = false;
|
|
4012
4016
|
this.hasTextContent = false;
|
|
4013
4017
|
|
|
4014
|
-
AuroLibraryRuntimeUtils$
|
|
4018
|
+
AuroLibraryRuntimeUtils$5.prototype.handleComponentTagRename(this, 'auro-helptext');
|
|
4015
4019
|
}
|
|
4016
4020
|
|
|
4017
4021
|
static get styles() {
|
|
@@ -4067,7 +4071,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
4067
4071
|
*
|
|
4068
4072
|
*/
|
|
4069
4073
|
static register(name = "auro-helptext") {
|
|
4070
|
-
AuroLibraryRuntimeUtils$
|
|
4074
|
+
AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroHelpText);
|
|
4071
4075
|
}
|
|
4072
4076
|
|
|
4073
4077
|
updated() {
|
|
@@ -4125,7 +4129,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
4125
4129
|
|
|
4126
4130
|
var helpTextVersion$1 = '1.0.0';
|
|
4127
4131
|
|
|
4128
|
-
let AuroElement$
|
|
4132
|
+
let AuroElement$3 = class AuroElement extends i$2 {
|
|
4129
4133
|
static get properties() {
|
|
4130
4134
|
return {
|
|
4131
4135
|
|
|
@@ -4237,7 +4241,7 @@ let AuroElement$2 = class AuroElement extends i$2 {
|
|
|
4237
4241
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
4238
4242
|
* @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
|
|
4239
4243
|
*/
|
|
4240
|
-
class AuroDropdown extends AuroElement$
|
|
4244
|
+
class AuroDropdown extends AuroElement$3 {
|
|
4241
4245
|
constructor() {
|
|
4242
4246
|
super();
|
|
4243
4247
|
|
|
@@ -4642,7 +4646,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
4642
4646
|
static get styles() {
|
|
4643
4647
|
return [
|
|
4644
4648
|
colorCss$1$2,
|
|
4645
|
-
tokensCss$1$
|
|
4649
|
+
tokensCss$1$2,
|
|
4646
4650
|
|
|
4647
4651
|
// default layout
|
|
4648
4652
|
classicColorCss,
|
|
@@ -5147,9 +5151,9 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5147
5151
|
|
|
5148
5152
|
var dropdownVersion = '3.0.0';
|
|
5149
5153
|
|
|
5150
|
-
var colorCss$
|
|
5154
|
+
var colorCss$3$1 = i$5`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
|
|
5151
5155
|
|
|
5152
|
-
var styleCss$
|
|
5156
|
+
var styleCss$4$1 = i$5`#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]){box-sizing:border-box;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}#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)}`;
|
|
5153
5157
|
|
|
5154
5158
|
var tokenCss = i$5`: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)}`;
|
|
5155
5159
|
|
|
@@ -5160,7 +5164,7 @@ var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-
|
|
|
5160
5164
|
|
|
5161
5165
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
5162
5166
|
|
|
5163
|
-
let AuroLibraryRuntimeUtils$
|
|
5167
|
+
let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
5164
5168
|
|
|
5165
5169
|
/* eslint-disable jsdoc/require-param */
|
|
5166
5170
|
|
|
@@ -5263,159 +5267,479 @@ class AuroDependencyVersioning {
|
|
|
5263
5267
|
}
|
|
5264
5268
|
}
|
|
5265
5269
|
|
|
5266
|
-
|
|
5267
|
-
|
|
5268
|
-
|
|
5270
|
+
/**
|
|
5271
|
+
* Private module-level WeakMap to hold MutationObservers for each host element.
|
|
5272
|
+
*/
|
|
5273
|
+
const _observers = new WeakMap();
|
|
5269
5274
|
|
|
5270
5275
|
/**
|
|
5271
|
-
*
|
|
5272
|
-
*
|
|
5273
|
-
*
|
|
5276
|
+
* Private module-level WeakMap to hold attribute matchers and targets for each host element.
|
|
5277
|
+
* Structure: {
|
|
5278
|
+
* host: {
|
|
5279
|
+
* matchers: Set<Function>,
|
|
5280
|
+
* targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
|
|
5281
|
+
* }
|
|
5282
|
+
* }
|
|
5274
5283
|
*/
|
|
5284
|
+
const _transportConfig = new WeakMap();
|
|
5275
5285
|
|
|
5276
|
-
|
|
5286
|
+
/**
|
|
5287
|
+
* Transfers all matching attributes from a host element to a target element and observes for future changes.
|
|
5288
|
+
*
|
|
5289
|
+
* @param {Object} params - The parameters for the function.
|
|
5290
|
+
* @param {HTMLElement} params.host - The host element from which attributes will be transported.
|
|
5291
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
5292
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
|
|
5293
|
+
* @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
|
|
5294
|
+
* @returns {Function} A function to detach the observer when no longer needed.
|
|
5295
|
+
* @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
|
|
5296
|
+
*/
|
|
5297
|
+
const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
|
|
5298
|
+
// Guard Clause: Ensure host is valid HTMLElement instance
|
|
5299
|
+
if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
|
|
5300
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
|
|
5301
|
+
}
|
|
5277
5302
|
|
|
5278
|
-
//
|
|
5279
|
-
|
|
5280
|
-
|
|
5281
|
-
hidden: { type: Boolean,
|
|
5282
|
-
reflect: true },
|
|
5283
|
-
hiddenVisually: { type: Boolean,
|
|
5284
|
-
reflect: true },
|
|
5285
|
-
hiddenAudible: { type: Boolean,
|
|
5286
|
-
reflect: true },
|
|
5287
|
-
};
|
|
5303
|
+
// Guard Clause: Ensure target is valid HTMLElement instance
|
|
5304
|
+
if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
|
|
5305
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
|
|
5288
5306
|
}
|
|
5289
5307
|
|
|
5290
|
-
|
|
5291
|
-
|
|
5292
|
-
|
|
5293
|
-
|
|
5294
|
-
if (value) {
|
|
5295
|
-
return 'true'
|
|
5296
|
-
}
|
|
5308
|
+
// Guard Clause: Ensure match is a function
|
|
5309
|
+
if (typeof match !== 'function') {
|
|
5310
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
|
|
5311
|
+
}
|
|
5297
5312
|
|
|
5298
|
-
|
|
5313
|
+
// Guard Clause: Ensure removeOriginal is a boolean
|
|
5314
|
+
if (typeof removeOriginal !== 'boolean') {
|
|
5315
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
|
|
5299
5316
|
}
|
|
5317
|
+
|
|
5318
|
+
// Register this transport and get cleanup function
|
|
5319
|
+
return _registerTransport({
|
|
5320
|
+
host,
|
|
5321
|
+
target,
|
|
5322
|
+
matcher: match,
|
|
5323
|
+
removeOriginal
|
|
5324
|
+
});
|
|
5300
5325
|
};
|
|
5301
5326
|
|
|
5302
|
-
|
|
5327
|
+
/**
|
|
5328
|
+
* Registers a matcher and target for a host element and attaches an observer if needed.
|
|
5329
|
+
*
|
|
5330
|
+
* @param {Object} params - The parameters object.
|
|
5331
|
+
* @param {HTMLElement} params.host - The host element to observe.
|
|
5332
|
+
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
5333
|
+
* @param {Function} params.matcher - Function that determines which attributes to transport.
|
|
5334
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
5335
|
+
* @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
|
|
5336
|
+
* @returns {Function} Function to detach the specific matcher and target pairing.
|
|
5337
|
+
* @private
|
|
5338
|
+
*/
|
|
5339
|
+
const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
|
|
5340
|
+
// Initialize config for this host if it doesn't exist
|
|
5341
|
+
if (!_transportConfig.has(host)) {
|
|
5342
|
+
_transportConfig.set(host, {
|
|
5343
|
+
matchers: new Set(),
|
|
5344
|
+
targets: new Map()
|
|
5345
|
+
});
|
|
5346
|
+
}
|
|
5303
5347
|
|
|
5304
|
-
|
|
5348
|
+
const config = _transportConfig.get(host);
|
|
5349
|
+
|
|
5350
|
+
// Add the matcher to the set of matchers for this host
|
|
5351
|
+
config.matchers.add(matcher);
|
|
5352
|
+
|
|
5353
|
+
// Initialize target entry if it doesn't exist
|
|
5354
|
+
if (!config.targets.has(target)) {
|
|
5355
|
+
config.targets.set(target, new Map());
|
|
5356
|
+
}
|
|
5357
|
+
|
|
5358
|
+
// Store the matcher with its removeOriginal setting for this target
|
|
5359
|
+
config.targets.get(target).set(matcher, {
|
|
5360
|
+
removeOriginal,
|
|
5361
|
+
currentAttributes: new Map()
|
|
5362
|
+
});
|
|
5363
|
+
|
|
5364
|
+
// Perform initial attribute transport
|
|
5365
|
+
_transportAttributes({ host, target, matcher, removeOriginal });
|
|
5366
|
+
|
|
5367
|
+
// Attach observer
|
|
5368
|
+
_attachObserver(host);
|
|
5369
|
+
|
|
5370
|
+
// Return cleanup function and utility functions
|
|
5371
|
+
return {
|
|
5372
|
+
cleanup: () => _cleanupTransport(host, target, matcher),
|
|
5373
|
+
getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
|
|
5374
|
+
getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
|
|
5375
|
+
}
|
|
5376
|
+
};
|
|
5305
5377
|
|
|
5306
|
-
|
|
5378
|
+
/**
|
|
5379
|
+
* Cleans up resources associated with a specific matcher and target for a host element.
|
|
5380
|
+
*
|
|
5381
|
+
* @param {HTMLElement} host - The host element
|
|
5382
|
+
* @param {HTMLElement} target - The target element
|
|
5383
|
+
* @param {Function} matcher - The matcher function
|
|
5384
|
+
* @private
|
|
5385
|
+
*/
|
|
5386
|
+
const _cleanupTransport = (host, target, matcher) => {
|
|
5387
|
+
const config = _transportConfig.get(host);
|
|
5388
|
+
if (!config) return;
|
|
5389
|
+
|
|
5390
|
+
// Remove this matcher from this target
|
|
5391
|
+
const targetMatchers = config.targets.get(target);
|
|
5392
|
+
if (targetMatchers) {
|
|
5393
|
+
targetMatchers.delete(matcher);
|
|
5394
|
+
|
|
5395
|
+
// If this target has no more matchers, remove it
|
|
5396
|
+
if (targetMatchers.size === 0) {
|
|
5397
|
+
config.targets.delete(target);
|
|
5398
|
+
}
|
|
5399
|
+
}
|
|
5400
|
+
|
|
5401
|
+
// Check if this matcher is still used by any target
|
|
5402
|
+
let matcherStillUsed = false;
|
|
5403
|
+
for (const matcherMap of config.targets.values()) {
|
|
5404
|
+
if (matcherMap.has(matcher)) {
|
|
5405
|
+
matcherStillUsed = true;
|
|
5406
|
+
break;
|
|
5407
|
+
}
|
|
5408
|
+
}
|
|
5409
|
+
|
|
5410
|
+
// If not used anymore, remove from matchers set
|
|
5411
|
+
if (!matcherStillUsed) {
|
|
5412
|
+
config.matchers.delete(matcher);
|
|
5413
|
+
}
|
|
5414
|
+
|
|
5415
|
+
// If no more targets or matchers, detach observer
|
|
5416
|
+
if (config.targets.size === 0 || config.matchers.size === 0) {
|
|
5417
|
+
_detachObserver(host);
|
|
5418
|
+
}
|
|
5419
|
+
};
|
|
5307
5420
|
|
|
5308
5421
|
/**
|
|
5309
|
-
*
|
|
5310
|
-
*
|
|
5311
|
-
* @
|
|
5312
|
-
* @param {
|
|
5313
|
-
* @
|
|
5422
|
+
* Generic function to transport attributes from a host element to a target element.
|
|
5423
|
+
*
|
|
5424
|
+
* @param {Object} params - The parameters object.
|
|
5425
|
+
* @param {HTMLElement} params.host - The host element from which to transport attributes.
|
|
5426
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
5427
|
+
* @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
|
|
5428
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
|
|
5429
|
+
* @returns {void}
|
|
5430
|
+
* @private
|
|
5314
5431
|
*/
|
|
5432
|
+
const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
|
|
5433
|
+
// Get a list of all matching attributes on the host element and their values
|
|
5434
|
+
const matchingAttributes = host.getAttributeNames()
|
|
5435
|
+
.filter(attr => matcher(attr))
|
|
5436
|
+
.reduce((acc, attr) => {
|
|
5437
|
+
acc[attr] = host.getAttribute(attr);
|
|
5438
|
+
return acc;
|
|
5439
|
+
}, {});
|
|
5440
|
+
|
|
5441
|
+
// Move matching attributes to the target element, removing them from the host if removeOriginal is true
|
|
5442
|
+
Object.entries(matchingAttributes).forEach(([key, value]) => {
|
|
5443
|
+
_setObservedAttribute(host, target, matcher, key, value);
|
|
5444
|
+
target.setAttribute(key, value);
|
|
5445
|
+
if (removeOriginal) {
|
|
5446
|
+
host.removeAttribute(key);
|
|
5447
|
+
}
|
|
5448
|
+
});
|
|
5449
|
+
};
|
|
5315
5450
|
|
|
5316
5451
|
/**
|
|
5317
|
-
*
|
|
5318
|
-
*
|
|
5319
|
-
* @param {
|
|
5320
|
-
* @
|
|
5321
|
-
* @
|
|
5322
|
-
* @returns {Promise}
|
|
5452
|
+
* Attaches a MutationObserver to the host element to monitor attribute changes.
|
|
5453
|
+
*
|
|
5454
|
+
* @param {HTMLElement} host - The element to observe for attribute changes.
|
|
5455
|
+
* @returns {MutationObserver} The observer instance.
|
|
5456
|
+
* @private
|
|
5323
5457
|
*/
|
|
5324
|
-
const
|
|
5325
|
-
|
|
5326
|
-
if (
|
|
5327
|
-
|
|
5458
|
+
const _attachObserver = (host) => {
|
|
5459
|
+
// If an observer for this host already exists, return it
|
|
5460
|
+
if (_observers.has(host)) {
|
|
5461
|
+
return _observers.get(host);
|
|
5328
5462
|
}
|
|
5329
|
-
return _fetchMap$1.get(uri);
|
|
5330
|
-
};
|
|
5331
5463
|
|
|
5332
|
-
|
|
5464
|
+
// Create a new MutationObserver
|
|
5465
|
+
const observer = new MutationObserver((mutations) => {
|
|
5466
|
+
const config = _transportConfig.get(host);
|
|
5467
|
+
if (!config) return;
|
|
5468
|
+
|
|
5469
|
+
// For each mutation affecting attributes
|
|
5470
|
+
mutations
|
|
5471
|
+
.filter(mutation => mutation.type === 'attributes')
|
|
5472
|
+
.forEach(mutation => {
|
|
5473
|
+
const attributeName = mutation.attributeName;
|
|
5474
|
+
|
|
5475
|
+
// Find matchers that care about this attribute
|
|
5476
|
+
for (const matcher of config.matchers) {
|
|
5477
|
+
if (matcher(attributeName)) {
|
|
5478
|
+
// For each target that uses this matcher
|
|
5479
|
+
for (const [target, matcherConfigs] of config.targets.entries()) {
|
|
5480
|
+
if (matcherConfigs.has(matcher)) {
|
|
5481
|
+
const { removeOriginal } = matcherConfigs.get(matcher);
|
|
5482
|
+
_transportAttributes({
|
|
5483
|
+
host,
|
|
5484
|
+
target,
|
|
5485
|
+
matcher,
|
|
5486
|
+
removeOriginal
|
|
5487
|
+
});
|
|
5488
|
+
}
|
|
5489
|
+
}
|
|
5490
|
+
}
|
|
5491
|
+
}
|
|
5492
|
+
});
|
|
5493
|
+
});
|
|
5333
5494
|
|
|
5334
|
-
//
|
|
5335
|
-
|
|
5495
|
+
// Start observing attribute changes
|
|
5496
|
+
observer.observe(host, { attributes: true });
|
|
5497
|
+
|
|
5498
|
+
// Store the observer
|
|
5499
|
+
_observers.set(host, observer);
|
|
5500
|
+
|
|
5501
|
+
return observer;
|
|
5502
|
+
};
|
|
5336
5503
|
|
|
5504
|
+
/**
|
|
5505
|
+
* Detaches and cleans up the MutationObserver for a given host element.
|
|
5506
|
+
*
|
|
5507
|
+
* @param {HTMLElement} host - The element whose observer should be detached.
|
|
5508
|
+
* @private
|
|
5509
|
+
*/
|
|
5510
|
+
const _detachObserver = (host) => {
|
|
5511
|
+
if (_observers.has(host)) {
|
|
5512
|
+
const observer = _observers.get(host);
|
|
5513
|
+
observer.disconnect();
|
|
5514
|
+
_observers.delete(host);
|
|
5515
|
+
}
|
|
5516
|
+
|
|
5517
|
+
// Clean up the transport config as well
|
|
5518
|
+
if (_transportConfig.has(host)) {
|
|
5519
|
+
_transportConfig.delete(host);
|
|
5520
|
+
}
|
|
5521
|
+
};
|
|
5337
5522
|
|
|
5338
|
-
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
5339
5523
|
/**
|
|
5340
|
-
*
|
|
5524
|
+
* Gets the matcher configuration for a specific host, target, and matcher
|
|
5525
|
+
* @param {HTMLElement} host - The host element
|
|
5526
|
+
* @param {HTMLElement} target - The target element
|
|
5527
|
+
* @param {Function} matcher - The matcher function
|
|
5528
|
+
* @returns {Object|undefined} The matcher configuration if found
|
|
5529
|
+
* @private
|
|
5341
5530
|
*/
|
|
5531
|
+
const _getMatcherConfig = (host, target, matcher) => {
|
|
5532
|
+
const config = _transportConfig.get(host);
|
|
5533
|
+
if (!config) return undefined;
|
|
5534
|
+
|
|
5535
|
+
const targetMatchers = config.targets.get(target);
|
|
5536
|
+
if (!targetMatchers) return undefined;
|
|
5537
|
+
|
|
5538
|
+
return targetMatchers.get(matcher);
|
|
5539
|
+
};
|
|
5342
5540
|
|
|
5343
|
-
|
|
5344
|
-
|
|
5345
|
-
|
|
5346
|
-
|
|
5347
|
-
|
|
5541
|
+
/**
|
|
5542
|
+
* Sets an observed attribute value
|
|
5543
|
+
* @param {HTMLElement} host - The host element
|
|
5544
|
+
* @param {HTMLElement} target - The target element
|
|
5545
|
+
* @param {Function} matcher - The matcher function
|
|
5546
|
+
* @param {string} key - The attribute name
|
|
5547
|
+
* @param {string} value - The attribute value
|
|
5548
|
+
* @private
|
|
5549
|
+
*/
|
|
5550
|
+
const _setObservedAttribute = (host, target, matcher, key, value) => {
|
|
5551
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
5552
|
+
if (matcherConfig) {
|
|
5553
|
+
matcherConfig.currentAttributes.set(key, value);
|
|
5348
5554
|
}
|
|
5555
|
+
};
|
|
5556
|
+
|
|
5557
|
+
const _getObservedAttribute = (host, target, matcher, attr) => {
|
|
5558
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
5559
|
+
if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
|
|
5560
|
+
return undefined;
|
|
5561
|
+
};
|
|
5562
|
+
|
|
5563
|
+
const _getObservedAttributes = (host, target, matcher) => {
|
|
5564
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
5565
|
+
if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
|
|
5566
|
+
return [];
|
|
5567
|
+
};
|
|
5568
|
+
|
|
5569
|
+
const _matchers = {
|
|
5570
|
+
'aria-': attr => attr.startsWith('aria-'),
|
|
5571
|
+
'role': attr => attr.match(/^role$/)
|
|
5572
|
+
};
|
|
5573
|
+
|
|
5574
|
+
const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
|
|
5575
|
+
return transportAttributes({
|
|
5576
|
+
host,
|
|
5577
|
+
target,
|
|
5578
|
+
match: attr => {
|
|
5579
|
+
for (const key in _matchers) {
|
|
5580
|
+
if (_matchers[key](attr)) return true;
|
|
5581
|
+
}
|
|
5582
|
+
return false;
|
|
5583
|
+
},
|
|
5584
|
+
removeOriginal
|
|
5585
|
+
});
|
|
5586
|
+
};
|
|
5587
|
+
|
|
5588
|
+
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5589
|
+
|
|
5590
|
+
/**
|
|
5591
|
+
* @type {Object} return object from transportAttributes via a11yUtilities
|
|
5592
|
+
* @property {Function} cleanup - Function to clean up the attribute watcher.
|
|
5593
|
+
* @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
|
|
5594
|
+
* @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
|
|
5595
|
+
* @private
|
|
5596
|
+
*/
|
|
5597
|
+
attributeWatcher;
|
|
5349
5598
|
|
|
5350
|
-
// function to define props used within the scope of this component
|
|
5351
5599
|
static get properties() {
|
|
5352
5600
|
return {
|
|
5353
|
-
...super.properties,
|
|
5354
5601
|
|
|
5355
5602
|
/**
|
|
5356
|
-
*
|
|
5603
|
+
* Defines the layout of an element.
|
|
5604
|
+
* @default {'default'}
|
|
5605
|
+
*/
|
|
5606
|
+
layout: {
|
|
5607
|
+
type: String,
|
|
5608
|
+
attribute: "layout",
|
|
5609
|
+
reflect: true
|
|
5610
|
+
},
|
|
5611
|
+
|
|
5612
|
+
/**
|
|
5613
|
+
* Defines the shape of an element.
|
|
5614
|
+
* @property {'default', 'rounded', 'pill', 'circle'}
|
|
5615
|
+
* @default {'default'}
|
|
5616
|
+
*/
|
|
5617
|
+
shape: {
|
|
5618
|
+
type: String,
|
|
5619
|
+
attribute: "shape",
|
|
5620
|
+
reflect: true
|
|
5621
|
+
},
|
|
5622
|
+
|
|
5623
|
+
/**
|
|
5624
|
+
* Defines the size of an element.
|
|
5625
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'}
|
|
5626
|
+
* @default {'md'}
|
|
5627
|
+
*/
|
|
5628
|
+
size: {
|
|
5629
|
+
type: String,
|
|
5630
|
+
attribute: "size",
|
|
5631
|
+
reflect: true
|
|
5632
|
+
},
|
|
5633
|
+
|
|
5634
|
+
/**
|
|
5635
|
+
* This Boolean attribute lets you specify that the element should be rendered in dark mode.
|
|
5636
|
+
* @default {false}
|
|
5357
5637
|
*/
|
|
5358
5638
|
onDark: {
|
|
5359
5639
|
type: Boolean,
|
|
5640
|
+
attribute: "ondark",
|
|
5360
5641
|
reflect: true
|
|
5361
5642
|
},
|
|
5362
5643
|
|
|
5363
5644
|
/**
|
|
5645
|
+
* A reference to the wrapper element in the shadow DOM.
|
|
5646
|
+
* This is used to apply layout and shape classes dynamically.
|
|
5647
|
+
* @type {HTMLElement|null}
|
|
5648
|
+
* @default {null}
|
|
5364
5649
|
* @private
|
|
5365
5650
|
*/
|
|
5366
|
-
|
|
5651
|
+
wrapper: {
|
|
5652
|
+
type: HTMLElement,
|
|
5367
5653
|
attribute: false,
|
|
5368
|
-
reflect:
|
|
5654
|
+
reflect: false
|
|
5369
5655
|
}
|
|
5370
5656
|
};
|
|
5371
5657
|
}
|
|
5372
5658
|
|
|
5373
|
-
|
|
5374
|
-
|
|
5375
|
-
|
|
5376
|
-
|
|
5659
|
+
|
|
5660
|
+
|
|
5661
|
+
resetShapeClasses() {
|
|
5662
|
+
if (this.shape && this.size) {
|
|
5663
|
+
|
|
5664
|
+
if (this.wrapper) {
|
|
5665
|
+
this.wrapper.classList.forEach((className) => {
|
|
5666
|
+
if (className.startsWith('shape-')) {
|
|
5667
|
+
this.wrapper.classList.remove(className);
|
|
5668
|
+
}
|
|
5669
|
+
});
|
|
5670
|
+
|
|
5671
|
+
this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
5672
|
+
}
|
|
5673
|
+
}
|
|
5377
5674
|
}
|
|
5378
5675
|
|
|
5379
|
-
|
|
5380
|
-
|
|
5381
|
-
|
|
5382
|
-
|
|
5383
|
-
|
|
5384
|
-
|
|
5385
|
-
|
|
5386
|
-
|
|
5387
|
-
let iconHTML = '';
|
|
5676
|
+
resetLayoutClasses() {
|
|
5677
|
+
if (this.layout) {
|
|
5678
|
+
if (this.wrapper) {
|
|
5679
|
+
this.wrapper.classList.forEach((className) => {
|
|
5680
|
+
if (className.startsWith('layout-')) {
|
|
5681
|
+
this.wrapper.classList.remove(className);
|
|
5682
|
+
}
|
|
5683
|
+
});
|
|
5388
5684
|
|
|
5389
|
-
|
|
5390
|
-
|
|
5391
|
-
} else {
|
|
5392
|
-
iconHTML = await cacheFetch$1(`${this.uri}/icons/${category}/${name}.svg`);
|
|
5685
|
+
this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
5686
|
+
}
|
|
5393
5687
|
}
|
|
5688
|
+
}
|
|
5394
5689
|
|
|
5395
|
-
|
|
5690
|
+
updateComponentArchitecture() {
|
|
5691
|
+
this.resetLayoutClasses();
|
|
5692
|
+
this.resetShapeClasses();
|
|
5693
|
+
}
|
|
5396
5694
|
|
|
5397
|
-
|
|
5695
|
+
updated(changedProperties) {
|
|
5696
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
5697
|
+
this.updateComponentArchitecture();
|
|
5698
|
+
}
|
|
5398
5699
|
}
|
|
5399
5700
|
|
|
5400
|
-
|
|
5401
|
-
|
|
5402
|
-
if (!this.customSvg) {
|
|
5403
|
-
const svg = await this.fetchIcon(this.category, this.name);
|
|
5701
|
+
firstUpdated() {
|
|
5702
|
+
super.firstUpdated();
|
|
5404
5703
|
|
|
5405
|
-
|
|
5406
|
-
|
|
5407
|
-
} else if (!svg) {
|
|
5408
|
-
const penDOM = new DOMParser().parseFromString(error$1.svg, 'text/html');
|
|
5704
|
+
// Set a reference to the wrapper element in the shadow DOM
|
|
5705
|
+
this.wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
5409
5706
|
|
|
5410
|
-
|
|
5411
|
-
|
|
5707
|
+
// Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
|
|
5708
|
+
this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
|
|
5709
|
+
}
|
|
5710
|
+
|
|
5711
|
+
disconnectedCallback() {
|
|
5712
|
+
super.disconnectedCallback();
|
|
5713
|
+
|
|
5714
|
+
// Cleanup the ARIA observer if it exists
|
|
5715
|
+
if (this.attributeWatcher) {
|
|
5716
|
+
this.attributeWatcher.cleanup();
|
|
5717
|
+
this.attributeWatcher = null;
|
|
5718
|
+
}
|
|
5719
|
+
}
|
|
5720
|
+
|
|
5721
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
5722
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
5723
|
+
render() {
|
|
5724
|
+
try {
|
|
5725
|
+
return this.renderLayout();
|
|
5726
|
+
} catch (error) {
|
|
5727
|
+
// failed to get the defined layout
|
|
5728
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
5729
|
+
|
|
5730
|
+
// fallback to the default layout
|
|
5731
|
+
return this.getLayout('default');
|
|
5412
5732
|
}
|
|
5413
5733
|
}
|
|
5414
5734
|
};
|
|
5415
5735
|
|
|
5416
|
-
var
|
|
5736
|
+
var styleCss$3$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block}::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);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;transition:padding 300ms ease-out}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible,.auro-button:focus{outline:none;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=secondary]):not([variant=tertiary]),.auro-button:focus: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=ghost]:disabled{cursor:not-allowed;transform: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{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, 1.5rem)}.auro-button--iconOnly:not(.auro-button--rounded):focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]),.auro-button--iconOnly:not(.auro-button--rounded):focus: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, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:padding 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, 1.5rem)}.auro-button--rounded:focus-visible:not([variant=flat]):after,.auro-button--rounded:focus:not([variant=flat]):after{border-radius:100px}:host([size=xs]) .wrapper:focus-visible,:host([size=xs]) .wrapper:focus{outline-width:1px;outline-offset:-2px}: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}`;
|
|
5417
5737
|
|
|
5418
|
-
var colorCss$4 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-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)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
5738
|
+
var colorCss$2$1 = i$5`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible{outline-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-hover, #00274a)}.auro-button:not([ondark]):disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text, #01426a)}.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-hover, #00274a)}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text, #01426a)}.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=ghost]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-ghost-text, #01426a)}.auro-button:not([ondark])[variant=ghost]:active:not(:disabled),.auro-button:not([ondark])[variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=ghost]: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=ghost]: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:not([ondark])[variant=flat]: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[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=ghost]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:active:not(:disabled),.auro-button[ondark][variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05))}.auro-button[ondark][variant=ghost]: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=ghost]: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}.auro-button[ondark][variant=flat]: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)}`;
|
|
5739
|
+
|
|
5740
|
+
var tokensCss$2$1 = i$5`:host(:not([onDark])){--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}:host([onDark]){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--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-inverse, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-tap-color:transparent}`;
|
|
5741
|
+
|
|
5742
|
+
var shapeSize = i$5`.shape-rounded-xl{min-height:68px;max-height:68px;border-style:solid;border-radius:6px;overflow:hidden;font-size:18px}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;border-radius:6px;overflow:hidden;font-size:18px}.shape-rounded-md{min-height:44px;max-height:44px;border-style:solid;border-radius:6px;overflow:hidden;font-size:16px}.shape-rounded-sm{min-height:32px;max-height:32px;border-style:solid;border-radius:6px;overflow:hidden;font-size:14px}.shape-rounded-xs{min-height:20px;max-height:20px;border-style:solid;border-radius:4px;overflow:hidden;font-size:12px;outline-offset:-2px;outline-width:1px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-radius:34px;overflow:hidden;font-size:18px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-radius:34px 0 0 34px;overflow:hidden}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-radius:0 34px 34px 0;overflow:hidden}.shape-pill-lg{min-height:52px;max-height:52px;border-style:solid;border-radius:26px;overflow:hidden;font-size:18px}.shape-pill-left-lg{min-height:52px;max-height:52px;border-style:solid;border-radius:26px 0 0 26px;overflow:hidden}.shape-pill-right-lg{min-height:52px;max-height:52px;border-style:solid;border-radius:0 26px 26px 0;overflow:hidden}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-radius:22px;overflow:hidden}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-radius:22px 0 0 22px;overflow:hidden}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-radius:0 22px 22px 0;overflow:hidden;font-size:16px}.shape-pill-sm{min-height:32px;max-height:32px;border-style:solid;border-radius:16px;overflow:hidden;font-size:14px}.shape-pill-left-sm{min-height:32px;max-height:32px;border-style:solid;border-radius:16px 0 0 16px;overflow:hidden}.shape-pill-right-sm{min-height:32px;max-height:32px;border-style:solid;border-radius:0 16px 16px 0;overflow:hidden}.shape-pill-xs{min-height:20px;max-height:20px;border-style:solid;border-radius:10px;overflow:hidden;font-size:12px;outline-offset:-2px;outline-width:1px}.shape-pill-left-xs{min-height:20px;max-height:20px;border-style:solid;border-radius:10px 0 0 10px;overflow:hidden;outline-offset:-2px;outline-width:1px}.shape-pill-right-xs{min-height:20px;max-height:20px;border-style:solid;border-radius:0 10px 10px 0;overflow:hidden;outline-offset:-2px;outline-width:1px}.shape-circle-xl{min-height:68px;max-height:68px;min-width:68px;max-width:68px;border-style:solid;border-radius:34px;overflow:hidden;padding:0}.shape-circle-lg{min-height:52px;max-height:52px;min-width:52px;max-width:52px;border-style:solid;border-radius:26px;overflow:hidden;padding:0}.shape-circle-md{min-height:44px;max-height:44px;min-width:44px;max-width:44px;border-style:solid;border-radius:22px;overflow:hidden;padding:0}.shape-circle-sm{min-height:32px;max-height:32px;min-width:32px;max-width:32px;border-style:solid;border-radius:16px;overflow:hidden;padding:0}.shape-circle-xs{min-height:20px;max-height:20px;min-width:20px;max-width:20px;border-style:solid;border-radius:10px;overflow:hidden;padding:0;outline-offset:-2px;outline-width:1px}`;
|
|
5419
5743
|
|
|
5420
5744
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
5421
5745
|
// See LICENSE in the project root for license information.
|
|
@@ -5424,7 +5748,7 @@ var colorCss$4 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
|
|
|
5424
5748
|
|
|
5425
5749
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
5426
5750
|
|
|
5427
|
-
let AuroLibraryRuntimeUtils$
|
|
5751
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
5428
5752
|
|
|
5429
5753
|
/* eslint-disable jsdoc/require-param */
|
|
5430
5754
|
|
|
@@ -5487,18 +5811,695 @@ let AuroLibraryRuntimeUtils$1$1 = class AuroLibraryRuntimeUtils {
|
|
|
5487
5811
|
}
|
|
5488
5812
|
};
|
|
5489
5813
|
|
|
5490
|
-
|
|
5814
|
+
var styleCss$2$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
|
|
5815
|
+
|
|
5816
|
+
var colorCss$1$1 = i$5`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
|
|
5817
|
+
|
|
5818
|
+
var tokensCss$1$1 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
5819
|
+
|
|
5820
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
5491
5821
|
// See LICENSE in the project root for license information.
|
|
5492
5822
|
|
|
5493
5823
|
|
|
5494
|
-
|
|
5824
|
+
class AuroLoader extends i$2 {
|
|
5495
5825
|
constructor() {
|
|
5496
5826
|
super();
|
|
5497
5827
|
|
|
5498
|
-
|
|
5499
|
-
|
|
5500
|
-
|
|
5501
|
-
|
|
5828
|
+
/**
|
|
5829
|
+
* @private
|
|
5830
|
+
*/
|
|
5831
|
+
this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
5832
|
+
|
|
5833
|
+
/**
|
|
5834
|
+
* @private
|
|
5835
|
+
*/
|
|
5836
|
+
this.mdCount = 3;
|
|
5837
|
+
|
|
5838
|
+
/**
|
|
5839
|
+
* @private
|
|
5840
|
+
*/
|
|
5841
|
+
this.smCount = 2;
|
|
5842
|
+
|
|
5843
|
+
/**
|
|
5844
|
+
* @private
|
|
5845
|
+
*/
|
|
5846
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
5847
|
+
|
|
5848
|
+
this.orbit = false;
|
|
5849
|
+
this.ringworm = false;
|
|
5850
|
+
this.laser = false;
|
|
5851
|
+
this.pulse = false;
|
|
5852
|
+
}
|
|
5853
|
+
|
|
5854
|
+
// function to define props used within the scope of this component
|
|
5855
|
+
static get properties() {
|
|
5856
|
+
return {
|
|
5857
|
+
|
|
5858
|
+
/**
|
|
5859
|
+
* Sets loader to laser type.
|
|
5860
|
+
*/
|
|
5861
|
+
laser: {
|
|
5862
|
+
type: Boolean,
|
|
5863
|
+
reflect: true
|
|
5864
|
+
},
|
|
5865
|
+
|
|
5866
|
+
/**
|
|
5867
|
+
* Sets loader to orbit type.
|
|
5868
|
+
*/
|
|
5869
|
+
orbit: {
|
|
5870
|
+
type: Boolean,
|
|
5871
|
+
reflect: true
|
|
5872
|
+
},
|
|
5873
|
+
|
|
5874
|
+
/**
|
|
5875
|
+
* Sets loader to pulse type.
|
|
5876
|
+
*/
|
|
5877
|
+
pulse: {
|
|
5878
|
+
type: Boolean,
|
|
5879
|
+
reflect: true
|
|
5880
|
+
},
|
|
5881
|
+
|
|
5882
|
+
/**
|
|
5883
|
+
* Sets loader to ringworm type.
|
|
5884
|
+
*/
|
|
5885
|
+
ringworm: {
|
|
5886
|
+
type: Boolean,
|
|
5887
|
+
reflect: true
|
|
5888
|
+
}
|
|
5889
|
+
};
|
|
5890
|
+
}
|
|
5891
|
+
|
|
5892
|
+
static get styles() {
|
|
5893
|
+
return [
|
|
5894
|
+
i$5`${styleCss$2$1}`,
|
|
5895
|
+
i$5`${colorCss$1$1}`,
|
|
5896
|
+
i$5`${tokensCss$1$1}`
|
|
5897
|
+
];
|
|
5898
|
+
}
|
|
5899
|
+
|
|
5900
|
+
/**
|
|
5901
|
+
* This will register this element with the browser.
|
|
5902
|
+
* @param {string} [name="auro-loader"] - The name of element that you want to register to.
|
|
5903
|
+
*
|
|
5904
|
+
* @example
|
|
5905
|
+
* AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
|
|
5906
|
+
*
|
|
5907
|
+
*/
|
|
5908
|
+
static register(name = "auro-loader") {
|
|
5909
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader);
|
|
5910
|
+
}
|
|
5911
|
+
|
|
5912
|
+
firstUpdated() {
|
|
5913
|
+
// Add the tag name as an attribute if it is different than the component name
|
|
5914
|
+
this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
|
|
5915
|
+
}
|
|
5916
|
+
|
|
5917
|
+
connectedCallback() {
|
|
5918
|
+
super.connectedCallback();
|
|
5919
|
+
}
|
|
5920
|
+
|
|
5921
|
+
/**
|
|
5922
|
+
* @private
|
|
5923
|
+
* @returns {Array} Numbered array for template map.
|
|
5924
|
+
*/
|
|
5925
|
+
defineTemplate() {
|
|
5926
|
+
let nodes = Array.from(Array(this.mdCount).keys());
|
|
5927
|
+
|
|
5928
|
+
if (this.orbit || this.laser) {
|
|
5929
|
+
nodes = Array.from(Array(this.smCount).keys());
|
|
5930
|
+
} else if (this.ringworm) {
|
|
5931
|
+
nodes = Array.from(Array(0).keys());
|
|
5932
|
+
}
|
|
5933
|
+
|
|
5934
|
+
return nodes;
|
|
5935
|
+
}
|
|
5936
|
+
|
|
5937
|
+
// When using auroElement, use the following attribute and function when hiding content from screen readers.
|
|
5938
|
+
// aria-hidden="${this.hideAudible(this.hiddenAudible)}"
|
|
5939
|
+
|
|
5940
|
+
// function that renders the HTML and CSS into the scope of the component
|
|
5941
|
+
render() {
|
|
5942
|
+
return x`
|
|
5943
|
+
${this.defineTemplate().map((idx) => x`
|
|
5944
|
+
<span part="element" class="loader node-${idx}"></span>
|
|
5945
|
+
`)}
|
|
5946
|
+
|
|
5947
|
+
<div class="no-animation">Loading...</div>
|
|
5948
|
+
|
|
5949
|
+
${this.ringworm ? x`
|
|
5950
|
+
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
5951
|
+
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
|
5952
|
+
</svg>`
|
|
5953
|
+
: ``
|
|
5954
|
+
}
|
|
5955
|
+
`;
|
|
5956
|
+
}
|
|
5957
|
+
}
|
|
5958
|
+
|
|
5959
|
+
var loaderVersion = '5.0.0';
|
|
5960
|
+
|
|
5961
|
+
/* eslint-disable max-lines, curly */
|
|
5962
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
5963
|
+
// See LICENSE in the project root for license information.
|
|
5964
|
+
|
|
5965
|
+
|
|
5966
|
+
/**
|
|
5967
|
+
* @slot - Default slot for the text of the button.
|
|
5968
|
+
* @slot icon - Slot to provide auro-icon for the button.
|
|
5969
|
+
* @csspart button - Apply CSS to HTML5 button.
|
|
5970
|
+
* @csspart loader - Apply CSS to auro-loader.
|
|
5971
|
+
* @csspart text - Apply CSS to text slot.
|
|
5972
|
+
* @csspart icon - Apply CSS to icon slot.
|
|
5973
|
+
*/
|
|
5974
|
+
|
|
5975
|
+
/* eslint-disable lit/no-invalid-html, lit/binding-positions */
|
|
5976
|
+
|
|
5977
|
+
const ICON_ONLY_SHAPES = ['circle'];
|
|
5978
|
+
|
|
5979
|
+
/**
|
|
5980
|
+
* AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
|
|
5981
|
+
* It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
|
|
5982
|
+
* @property {'default', 'rounded', 'pill', 'circle'} shape - Defines the shape of the button.
|
|
5983
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
|
|
5984
|
+
* @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
|
|
5985
|
+
* @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
|
|
5986
|
+
* @property {boolean} onDark - Indicates if the button is rendered in dark mode.
|
|
5987
|
+
*/
|
|
5988
|
+
class AuroButton extends AuroElement$1 {
|
|
5989
|
+
|
|
5990
|
+
/**
|
|
5991
|
+
* Enables form association for this element.
|
|
5992
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
|
|
5993
|
+
* @returns {boolean} - Returns true to enable form association.
|
|
5994
|
+
*/
|
|
5995
|
+
static get formAssociated() {
|
|
5996
|
+
return true;
|
|
5997
|
+
}
|
|
5998
|
+
|
|
5999
|
+
constructor() {
|
|
6000
|
+
super();
|
|
6001
|
+
this.autofocus = false;
|
|
6002
|
+
this.disabled = false;
|
|
6003
|
+
this.loading = false;
|
|
6004
|
+
this.size = "md";
|
|
6005
|
+
this.shape = "rounded";
|
|
6006
|
+
this.onDark = false;
|
|
6007
|
+
this.fluid = false;
|
|
6008
|
+
this.loadingText = this.loadingText || 'Loading...';
|
|
6009
|
+
|
|
6010
|
+
// Support for HTML5 forms
|
|
6011
|
+
if (typeof this.attachInternals === 'function') {
|
|
6012
|
+
this.internals = this.attachInternals();
|
|
6013
|
+
} else {
|
|
6014
|
+
this.internals = null;
|
|
6015
|
+
|
|
6016
|
+
// eslint-disable-next-line no-console
|
|
6017
|
+
console.warn('This browser does not support form association features. Some form-related functionality may not work as expected. Consider using a polyfill or handling click events manually.');
|
|
6018
|
+
}
|
|
6019
|
+
|
|
6020
|
+
/**
|
|
6021
|
+
* Generate unique names for dependency components.
|
|
6022
|
+
*/
|
|
6023
|
+
const versioning = new AuroDependencyVersioning();
|
|
6024
|
+
|
|
6025
|
+
/**
|
|
6026
|
+
* @private
|
|
6027
|
+
*/
|
|
6028
|
+
this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
|
|
6029
|
+
}
|
|
6030
|
+
|
|
6031
|
+
static get styles() {
|
|
6032
|
+
return [
|
|
6033
|
+
tokensCss$2$1,
|
|
6034
|
+
styleCss$3$1,
|
|
6035
|
+
colorCss$2$1,
|
|
6036
|
+
shapeSize
|
|
6037
|
+
];
|
|
6038
|
+
}
|
|
6039
|
+
|
|
6040
|
+
static get properties() {
|
|
6041
|
+
return {
|
|
6042
|
+
|
|
6043
|
+
...super.properties,
|
|
6044
|
+
|
|
6045
|
+
/**
|
|
6046
|
+
* Override layout since it isn't used in this component.
|
|
6047
|
+
* @private
|
|
6048
|
+
*/
|
|
6049
|
+
layout: {
|
|
6050
|
+
type: Boolean,
|
|
6051
|
+
attribute: false,
|
|
6052
|
+
reflect: false
|
|
6053
|
+
},
|
|
6054
|
+
|
|
6055
|
+
/**
|
|
6056
|
+
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
6057
|
+
*/
|
|
6058
|
+
autofocus: {
|
|
6059
|
+
type: Boolean,
|
|
6060
|
+
reflect: true
|
|
6061
|
+
},
|
|
6062
|
+
|
|
6063
|
+
/**
|
|
6064
|
+
* If set to true, button will become disabled and not allow for interactions.
|
|
6065
|
+
*/
|
|
6066
|
+
disabled: {
|
|
6067
|
+
type: Boolean,
|
|
6068
|
+
reflect: true
|
|
6069
|
+
},
|
|
6070
|
+
|
|
6071
|
+
/**
|
|
6072
|
+
* Alters the shape of the button to be full width of its parent container.
|
|
6073
|
+
*/
|
|
6074
|
+
fluid: {
|
|
6075
|
+
type: Boolean,
|
|
6076
|
+
reflect: true
|
|
6077
|
+
},
|
|
6078
|
+
|
|
6079
|
+
/**
|
|
6080
|
+
* If set to true button text will be replaced with `auro-loader` and become disabled.
|
|
6081
|
+
*/
|
|
6082
|
+
loading: {
|
|
6083
|
+
type: Boolean,
|
|
6084
|
+
reflect: true
|
|
6085
|
+
},
|
|
6086
|
+
|
|
6087
|
+
/**
|
|
6088
|
+
* 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.
|
|
6089
|
+
*/
|
|
6090
|
+
loadingText: {
|
|
6091
|
+
type: String
|
|
6092
|
+
},
|
|
6093
|
+
|
|
6094
|
+
/**
|
|
6095
|
+
* Populates `tabIndex` to define the focusable sequence in keyboard navigation.
|
|
6096
|
+
*/
|
|
6097
|
+
tIndex: {
|
|
6098
|
+
type: String,
|
|
6099
|
+
reflect: true
|
|
6100
|
+
},
|
|
6101
|
+
|
|
6102
|
+
/**
|
|
6103
|
+
* Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
6104
|
+
*/
|
|
6105
|
+
title: {
|
|
6106
|
+
type: String,
|
|
6107
|
+
reflect: true
|
|
6108
|
+
},
|
|
6109
|
+
|
|
6110
|
+
/**
|
|
6111
|
+
* The type of the button. Possible values are: `submit`, `reset`, `button`.
|
|
6112
|
+
*/
|
|
6113
|
+
type: {
|
|
6114
|
+
type: String,
|
|
6115
|
+
reflect: true
|
|
6116
|
+
},
|
|
6117
|
+
|
|
6118
|
+
/**
|
|
6119
|
+
* Defines the value associated with the button which is submitted with the form data.
|
|
6120
|
+
*/
|
|
6121
|
+
value: {
|
|
6122
|
+
type: String,
|
|
6123
|
+
reflect: true
|
|
6124
|
+
},
|
|
6125
|
+
|
|
6126
|
+
/**
|
|
6127
|
+
* Sets button variant option.
|
|
6128
|
+
* @default primary
|
|
6129
|
+
*/
|
|
6130
|
+
variant: {
|
|
6131
|
+
type: String,
|
|
6132
|
+
reflect: true
|
|
6133
|
+
},
|
|
6134
|
+
};
|
|
6135
|
+
}
|
|
6136
|
+
|
|
6137
|
+
/**
|
|
6138
|
+
* This will register this element with the browser.
|
|
6139
|
+
* @param {string} [name="auro-button"] - The name of element that you want to register to.
|
|
6140
|
+
*
|
|
6141
|
+
* @example
|
|
6142
|
+
* AuroButton.register("custom-button") // this will register this element to <custom-button/>
|
|
6143
|
+
*
|
|
6144
|
+
*/
|
|
6145
|
+
static register(name = "auro-button") {
|
|
6146
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
|
|
6147
|
+
}
|
|
6148
|
+
|
|
6149
|
+
/**
|
|
6150
|
+
* Internal method to apply focus to the HTML5 button.
|
|
6151
|
+
* @private
|
|
6152
|
+
* @returns {void}
|
|
6153
|
+
*/
|
|
6154
|
+
focus() {
|
|
6155
|
+
this.renderRoot.querySelector('button').focus();
|
|
6156
|
+
}
|
|
6157
|
+
|
|
6158
|
+
/**
|
|
6159
|
+
* Submits the form that this button is associated with.
|
|
6160
|
+
* @private
|
|
6161
|
+
* @returns {void}
|
|
6162
|
+
*/
|
|
6163
|
+
surfaceSubmitEvent() {
|
|
6164
|
+
if (this.form) {
|
|
6165
|
+
this.form.requestSubmit();
|
|
6166
|
+
}
|
|
6167
|
+
}
|
|
6168
|
+
|
|
6169
|
+
/**
|
|
6170
|
+
* Returns the form element that this button is associated with.
|
|
6171
|
+
* @private
|
|
6172
|
+
* @returns {HTMLFormElement | null}
|
|
6173
|
+
*/
|
|
6174
|
+
get form() {
|
|
6175
|
+
return this.internals ? this.internals.form : null;
|
|
6176
|
+
}
|
|
6177
|
+
|
|
6178
|
+
/**
|
|
6179
|
+
* @private
|
|
6180
|
+
* @returns {Boolean}
|
|
6181
|
+
*/
|
|
6182
|
+
get hideText() {
|
|
6183
|
+
return ICON_ONLY_SHAPES.includes(this.shape);
|
|
6184
|
+
}
|
|
6185
|
+
|
|
6186
|
+
/**
|
|
6187
|
+
* Returns the current value of the projected `aria-label` attribute or undefined if not set.
|
|
6188
|
+
* @returns {string | undefined}
|
|
6189
|
+
* @private
|
|
6190
|
+
*/
|
|
6191
|
+
get currentAriaLabel() {
|
|
6192
|
+
if (!this.attributeWatcher) return undefined;
|
|
6193
|
+
|
|
6194
|
+
const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
|
|
6195
|
+
return ariaLabel || undefined;
|
|
6196
|
+
}
|
|
6197
|
+
|
|
6198
|
+
/**
|
|
6199
|
+
* Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
|
|
6200
|
+
* @returns {string | undefined}
|
|
6201
|
+
* @private
|
|
6202
|
+
*/
|
|
6203
|
+
get currentAriaLabelledBy() {
|
|
6204
|
+
if (!this.attributeWatcher) return undefined;
|
|
6205
|
+
|
|
6206
|
+
const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
|
|
6207
|
+
return ariaLabelledBy || undefined;
|
|
6208
|
+
}
|
|
6209
|
+
|
|
6210
|
+
/**
|
|
6211
|
+
* Renders the default layout for the button.
|
|
6212
|
+
* @returns {TemplateResult}
|
|
6213
|
+
* @private
|
|
6214
|
+
*/
|
|
6215
|
+
renderLayoutDefault() {
|
|
6216
|
+
const classes = {
|
|
6217
|
+
"util_insetLg--squish": true,
|
|
6218
|
+
"auro-button": true,
|
|
6219
|
+
wrapper: true,
|
|
6220
|
+
loading: this.loading,
|
|
6221
|
+
};
|
|
6222
|
+
|
|
6223
|
+
return u`
|
|
6224
|
+
<button
|
|
6225
|
+
part="button"
|
|
6226
|
+
aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
|
|
6227
|
+
aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
|
|
6228
|
+
tabIndex="${o(this.tIndex)}"
|
|
6229
|
+
?autofocus="${this.autofocus}"
|
|
6230
|
+
class="${e(classes)}"
|
|
6231
|
+
?disabled="${this.disabled || this.loading}"
|
|
6232
|
+
?onDark="${this.onDark}"
|
|
6233
|
+
title="${o(this.title ? this.title : undefined)}"
|
|
6234
|
+
name="${o(this.name ? this.name : undefined)}"
|
|
6235
|
+
type="${o(this.type ? this.type : undefined)}"
|
|
6236
|
+
variant="${o(this.variant ? this.variant : undefined)}"
|
|
6237
|
+
.value="${o(this.value ? this.value : undefined)}"
|
|
6238
|
+
@click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
|
|
6239
|
+
>
|
|
6240
|
+
${o(this.loading ? u`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
6241
|
+
|
|
6242
|
+
<span class="contentWrapper">
|
|
6243
|
+
<span class="textSlot" part="text">
|
|
6244
|
+
${this.hideText ? undefined : u`<slot></slot>`}
|
|
6245
|
+
</span>
|
|
6246
|
+
|
|
6247
|
+
<span part="icon">
|
|
6248
|
+
<slot name="icon"></slot>
|
|
6249
|
+
</span>
|
|
6250
|
+
</span>
|
|
6251
|
+
</button>
|
|
6252
|
+
`;
|
|
6253
|
+
}
|
|
6254
|
+
|
|
6255
|
+
/**
|
|
6256
|
+
* Renders the layout of the button
|
|
6257
|
+
* @returns {TemplateResult}
|
|
6258
|
+
* @private
|
|
6259
|
+
*/
|
|
6260
|
+
renderLayout() {
|
|
6261
|
+
return this.renderLayoutDefault();
|
|
6262
|
+
}
|
|
6263
|
+
}
|
|
6264
|
+
|
|
6265
|
+
var buttonVersion = '10.0.0';
|
|
6266
|
+
|
|
6267
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
6268
|
+
// See LICENSE in the project root for license information.
|
|
6269
|
+
|
|
6270
|
+
|
|
6271
|
+
/**
|
|
6272
|
+
* @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
|
|
6273
|
+
* @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
|
|
6274
|
+
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
6275
|
+
*/
|
|
6276
|
+
|
|
6277
|
+
let AuroElement$2 = class AuroElement extends i$2 {
|
|
6278
|
+
|
|
6279
|
+
// function to define props used within the scope of this component
|
|
6280
|
+
static get properties() {
|
|
6281
|
+
return {
|
|
6282
|
+
hidden: { type: Boolean,
|
|
6283
|
+
reflect: true },
|
|
6284
|
+
hiddenVisually: { type: Boolean,
|
|
6285
|
+
reflect: true },
|
|
6286
|
+
hiddenAudible: { type: Boolean,
|
|
6287
|
+
reflect: true },
|
|
6288
|
+
};
|
|
6289
|
+
}
|
|
6290
|
+
|
|
6291
|
+
/**
|
|
6292
|
+
* @private Function that determines state of aria-hidden
|
|
6293
|
+
*/
|
|
6294
|
+
hideAudible(value) {
|
|
6295
|
+
if (value) {
|
|
6296
|
+
return 'true'
|
|
6297
|
+
}
|
|
6298
|
+
|
|
6299
|
+
return 'false'
|
|
6300
|
+
}
|
|
6301
|
+
};
|
|
6302
|
+
|
|
6303
|
+
var error$1 = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
|
|
6304
|
+
|
|
6305
|
+
/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
|
|
6306
|
+
|
|
6307
|
+
const _fetchMap$1 = new Map();
|
|
6308
|
+
|
|
6309
|
+
/**
|
|
6310
|
+
* A callback to parse Response body.
|
|
6311
|
+
*
|
|
6312
|
+
* @callback ResponseParser
|
|
6313
|
+
* @param {Fetch.Response} response
|
|
6314
|
+
* @returns {Promise}
|
|
6315
|
+
*/
|
|
6316
|
+
|
|
6317
|
+
/**
|
|
6318
|
+
* A minimal in-memory map to de-duplicate Fetch API media requests.
|
|
6319
|
+
*
|
|
6320
|
+
* @param {String} uri
|
|
6321
|
+
* @param {Object} [options={}]
|
|
6322
|
+
* @param {ResponseParser} [options.responseParser=(response) => response.text()]
|
|
6323
|
+
* @returns {Promise}
|
|
6324
|
+
*/
|
|
6325
|
+
const cacheFetch$1 = (uri, options = {}) => {
|
|
6326
|
+
const responseParser = options.responseParser || ((response) => response.text());
|
|
6327
|
+
if (!_fetchMap$1.has(uri)) {
|
|
6328
|
+
_fetchMap$1.set(uri, fetch(uri).then(responseParser));
|
|
6329
|
+
}
|
|
6330
|
+
return _fetchMap$1.get(uri);
|
|
6331
|
+
};
|
|
6332
|
+
|
|
6333
|
+
var styleCss$1$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
|
|
6334
|
+
|
|
6335
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
6336
|
+
// See LICENSE in the project root for license information.
|
|
6337
|
+
|
|
6338
|
+
|
|
6339
|
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
6340
|
+
/**
|
|
6341
|
+
* @slot - Hidden from visibility, used for a11y if icon description is needed
|
|
6342
|
+
*/
|
|
6343
|
+
|
|
6344
|
+
// build the component class
|
|
6345
|
+
let BaseIcon$1 = class BaseIcon extends AuroElement$2 {
|
|
6346
|
+
constructor() {
|
|
6347
|
+
super();
|
|
6348
|
+
this.onDark = false;
|
|
6349
|
+
}
|
|
6350
|
+
|
|
6351
|
+
// function to define props used within the scope of this component
|
|
6352
|
+
static get properties() {
|
|
6353
|
+
return {
|
|
6354
|
+
...super.properties,
|
|
6355
|
+
|
|
6356
|
+
/**
|
|
6357
|
+
* Set value for on-dark version of auro-icon.
|
|
6358
|
+
*/
|
|
6359
|
+
onDark: {
|
|
6360
|
+
type: Boolean,
|
|
6361
|
+
reflect: true
|
|
6362
|
+
},
|
|
6363
|
+
|
|
6364
|
+
/**
|
|
6365
|
+
* @private
|
|
6366
|
+
*/
|
|
6367
|
+
svg: {
|
|
6368
|
+
attribute: false,
|
|
6369
|
+
reflect: true
|
|
6370
|
+
}
|
|
6371
|
+
};
|
|
6372
|
+
}
|
|
6373
|
+
|
|
6374
|
+
static get styles() {
|
|
6375
|
+
return i$5`
|
|
6376
|
+
${styleCss$1$1}
|
|
6377
|
+
`;
|
|
6378
|
+
}
|
|
6379
|
+
|
|
6380
|
+
/**
|
|
6381
|
+
* Async function to fetch requested icon from npm CDN.
|
|
6382
|
+
* @private
|
|
6383
|
+
* @param {string} category - Icon category.
|
|
6384
|
+
* @param {string} name - Icon name.
|
|
6385
|
+
* @returns {SVGElement} DOM - Ready HTML to be appended.
|
|
6386
|
+
*/
|
|
6387
|
+
async fetchIcon(category, name) {
|
|
6388
|
+
let iconHTML = '';
|
|
6389
|
+
|
|
6390
|
+
if (category === 'logos') {
|
|
6391
|
+
iconHTML = await cacheFetch$1(`${this.uri}/${category}/${name}.svg`);
|
|
6392
|
+
} else {
|
|
6393
|
+
iconHTML = await cacheFetch$1(`${this.uri}/icons/${category}/${name}.svg`);
|
|
6394
|
+
}
|
|
6395
|
+
|
|
6396
|
+
const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
|
|
6397
|
+
|
|
6398
|
+
return dom.body.querySelector('svg');
|
|
6399
|
+
}
|
|
6400
|
+
|
|
6401
|
+
// lifecycle function
|
|
6402
|
+
async firstUpdated() {
|
|
6403
|
+
if (!this.customSvg) {
|
|
6404
|
+
const svg = await this.fetchIcon(this.category, this.name);
|
|
6405
|
+
|
|
6406
|
+
if (svg) {
|
|
6407
|
+
this.svg = svg;
|
|
6408
|
+
} else if (!svg) {
|
|
6409
|
+
const penDOM = new DOMParser().parseFromString(error$1.svg, 'text/html');
|
|
6410
|
+
|
|
6411
|
+
this.svg = penDOM.body.firstChild;
|
|
6412
|
+
}
|
|
6413
|
+
}
|
|
6414
|
+
}
|
|
6415
|
+
};
|
|
6416
|
+
|
|
6417
|
+
var tokensCss$3 = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
6418
|
+
|
|
6419
|
+
var colorCss$4 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-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)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
6420
|
+
|
|
6421
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
6422
|
+
// See LICENSE in the project root for license information.
|
|
6423
|
+
|
|
6424
|
+
// ---------------------------------------------------------------------
|
|
6425
|
+
|
|
6426
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
6427
|
+
|
|
6428
|
+
let AuroLibraryRuntimeUtils$1$1 = class AuroLibraryRuntimeUtils {
|
|
6429
|
+
|
|
6430
|
+
/* eslint-disable jsdoc/require-param */
|
|
6431
|
+
|
|
6432
|
+
/**
|
|
6433
|
+
* This will register a new custom element with the browser.
|
|
6434
|
+
* @param {String} name - The name of the custom element.
|
|
6435
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
6436
|
+
* @returns {void}
|
|
6437
|
+
*/
|
|
6438
|
+
registerComponent(name, componentClass) {
|
|
6439
|
+
if (!customElements.get(name)) {
|
|
6440
|
+
customElements.define(name, class extends componentClass {});
|
|
6441
|
+
}
|
|
6442
|
+
}
|
|
6443
|
+
|
|
6444
|
+
/**
|
|
6445
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
6446
|
+
* @returns {void}
|
|
6447
|
+
*/
|
|
6448
|
+
closestElement(
|
|
6449
|
+
selector, // selector like in .closest()
|
|
6450
|
+
base = this, // extra functionality to skip a parent
|
|
6451
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
6452
|
+
!el || el === document || el === window
|
|
6453
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
6454
|
+
: found
|
|
6455
|
+
? found // found a selector INside this element
|
|
6456
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
6457
|
+
) {
|
|
6458
|
+
return __Closest(base);
|
|
6459
|
+
}
|
|
6460
|
+
/* eslint-enable jsdoc/require-param */
|
|
6461
|
+
|
|
6462
|
+
/**
|
|
6463
|
+
* 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.
|
|
6464
|
+
* @param {Object} elem - The element to check.
|
|
6465
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
6466
|
+
* @returns {void}
|
|
6467
|
+
*/
|
|
6468
|
+
handleComponentTagRename(elem, tagName) {
|
|
6469
|
+
const tag = tagName.toLowerCase();
|
|
6470
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
6471
|
+
|
|
6472
|
+
if (elemTag !== tag) {
|
|
6473
|
+
elem.setAttribute(tag, true);
|
|
6474
|
+
}
|
|
6475
|
+
}
|
|
6476
|
+
|
|
6477
|
+
/**
|
|
6478
|
+
* Validates if an element is a specific Auro component.
|
|
6479
|
+
* @param {Object} elem - The element to validate.
|
|
6480
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
6481
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
6482
|
+
*/
|
|
6483
|
+
elementMatch(elem, tagName) {
|
|
6484
|
+
const tag = tagName.toLowerCase();
|
|
6485
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
6486
|
+
|
|
6487
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
6488
|
+
}
|
|
6489
|
+
};
|
|
6490
|
+
|
|
6491
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
6492
|
+
// See LICENSE in the project root for license information.
|
|
6493
|
+
|
|
6494
|
+
|
|
6495
|
+
let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
6496
|
+
constructor() {
|
|
6497
|
+
super();
|
|
6498
|
+
|
|
6499
|
+
this.variant = undefined;
|
|
6500
|
+
this.privateDefaults();
|
|
6501
|
+
}
|
|
6502
|
+
|
|
5502
6503
|
/**
|
|
5503
6504
|
* Internal Defaults.
|
|
5504
6505
|
* @private
|
|
@@ -5609,8 +6610,12 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
5609
6610
|
async firstUpdated() {
|
|
5610
6611
|
await super.firstUpdated();
|
|
5611
6612
|
|
|
5612
|
-
|
|
5613
|
-
|
|
6613
|
+
/**
|
|
6614
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
6615
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
6616
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
6617
|
+
*/
|
|
6618
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
5614
6619
|
const svgDesc = this.svg.querySelector('desc');
|
|
5615
6620
|
|
|
5616
6621
|
if (svgDesc) {
|
|
@@ -5654,7 +6659,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
5654
6659
|
}
|
|
5655
6660
|
};
|
|
5656
6661
|
|
|
5657
|
-
var iconVersion$1 = '8.0.
|
|
6662
|
+
var iconVersion$1 = '8.0.4';
|
|
5658
6663
|
|
|
5659
6664
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
5660
6665
|
// See LICENSE in the project root for license information.
|
|
@@ -5663,7 +6668,7 @@ var iconVersion$1 = '8.0.3';
|
|
|
5663
6668
|
|
|
5664
6669
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
5665
6670
|
|
|
5666
|
-
let AuroLibraryRuntimeUtils$
|
|
6671
|
+
let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
5667
6672
|
|
|
5668
6673
|
/* eslint-disable jsdoc/require-param */
|
|
5669
6674
|
|
|
@@ -5755,7 +6760,7 @@ class AuroHeader extends i$2 {
|
|
|
5755
6760
|
/**
|
|
5756
6761
|
* @private
|
|
5757
6762
|
*/
|
|
5758
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
6763
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
|
|
5759
6764
|
}
|
|
5760
6765
|
|
|
5761
6766
|
// function to define props used within the scope of this component
|
|
@@ -5785,7 +6790,7 @@ class AuroHeader extends i$2 {
|
|
|
5785
6790
|
*
|
|
5786
6791
|
*/
|
|
5787
6792
|
static register(name = "auro-header") {
|
|
5788
|
-
AuroLibraryRuntimeUtils$
|
|
6793
|
+
AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHeader);
|
|
5789
6794
|
}
|
|
5790
6795
|
|
|
5791
6796
|
firstUpdated() {
|
|
@@ -5881,17 +6886,30 @@ class AuroBibtemplate extends i$2 {
|
|
|
5881
6886
|
|
|
5882
6887
|
this.large = false;
|
|
5883
6888
|
|
|
5884
|
-
AuroLibraryRuntimeUtils$
|
|
6889
|
+
AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
|
|
5885
6890
|
|
|
5886
6891
|
const versioning = new AuroDependencyVersioning();
|
|
6892
|
+
|
|
6893
|
+
/**
|
|
6894
|
+
* @private
|
|
6895
|
+
*/
|
|
5887
6896
|
this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion$1, AuroIcon$1);
|
|
6897
|
+
|
|
6898
|
+
/**
|
|
6899
|
+
* @private
|
|
6900
|
+
*/
|
|
5888
6901
|
this.headerTag = versioning.generateTag('auro-formkit-bibtemplate-header', headerVersion, AuroHeader);
|
|
6902
|
+
|
|
6903
|
+
/**
|
|
6904
|
+
* @private
|
|
6905
|
+
*/
|
|
6906
|
+
this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
|
|
5889
6907
|
}
|
|
5890
6908
|
|
|
5891
6909
|
static get styles() {
|
|
5892
6910
|
return [
|
|
5893
|
-
colorCss$
|
|
5894
|
-
styleCss$
|
|
6911
|
+
colorCss$3$1,
|
|
6912
|
+
styleCss$4$1,
|
|
5895
6913
|
tokenCss
|
|
5896
6914
|
];
|
|
5897
6915
|
}
|
|
@@ -5920,7 +6938,7 @@ class AuroBibtemplate extends i$2 {
|
|
|
5920
6938
|
*
|
|
5921
6939
|
*/
|
|
5922
6940
|
static register(name = "auro-bibtemplate") {
|
|
5923
|
-
AuroLibraryRuntimeUtils$
|
|
6941
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
|
|
5924
6942
|
}
|
|
5925
6943
|
|
|
5926
6944
|
/**
|
|
@@ -5978,9 +6996,9 @@ class AuroBibtemplate extends i$2 {
|
|
|
5978
6996
|
<div id="bibTemplate" part="bibtemplate">
|
|
5979
6997
|
${this.isFullscreen ? u`
|
|
5980
6998
|
<div id="headerContainer">
|
|
5981
|
-
|
|
6999
|
+
<${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
|
|
5982
7000
|
<${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
|
|
5983
|
-
|
|
7001
|
+
</${this.buttonTag}>
|
|
5984
7002
|
<${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
|
|
5985
7003
|
<slot name="header"></slot>
|
|
5986
7004
|
</${this.headerTag}>
|
|
@@ -6296,7 +7314,7 @@ var styleCss$3 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock
|
|
|
6296
7314
|
*/
|
|
6297
7315
|
|
|
6298
7316
|
// build the component class
|
|
6299
|
-
class AuroSelect extends AuroElement$
|
|
7317
|
+
class AuroSelect extends AuroElement$4 {
|
|
6300
7318
|
constructor() {
|
|
6301
7319
|
super();
|
|
6302
7320
|
|
|
@@ -6340,7 +7358,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
6340
7358
|
/**
|
|
6341
7359
|
* @private
|
|
6342
7360
|
*/
|
|
6343
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
7361
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
|
|
6344
7362
|
|
|
6345
7363
|
/**
|
|
6346
7364
|
* Generate unique names for dependency components.
|
|
@@ -6714,7 +7732,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
6714
7732
|
*
|
|
6715
7733
|
*/
|
|
6716
7734
|
static register(name = "auro-select") {
|
|
6717
|
-
AuroLibraryRuntimeUtils$
|
|
7735
|
+
AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroSelect);
|
|
6718
7736
|
}
|
|
6719
7737
|
|
|
6720
7738
|
/**
|
|
@@ -7705,7 +8723,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
|
|
|
7705
8723
|
|
|
7706
8724
|
/* eslint-disable no-magic-numbers, max-lines, no-extra-parens, no-inline-comments, line-comment-position */
|
|
7707
8725
|
|
|
7708
|
-
class AuroMenu extends AuroElement$
|
|
8726
|
+
class AuroMenu extends AuroElement$4 {
|
|
7709
8727
|
constructor() {
|
|
7710
8728
|
super();
|
|
7711
8729
|
|
|
@@ -7837,7 +8855,7 @@ class AuroMenu extends AuroElement$3 {
|
|
|
7837
8855
|
*
|
|
7838
8856
|
*/
|
|
7839
8857
|
static register(name = "auro-menu") {
|
|
7840
|
-
AuroLibraryRuntimeUtils$
|
|
8858
|
+
AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroMenu);
|
|
7841
8859
|
}
|
|
7842
8860
|
|
|
7843
8861
|
// Lifecycle Methods
|
|
@@ -7861,7 +8879,7 @@ class AuroMenu extends AuroElement$3 {
|
|
|
7861
8879
|
}
|
|
7862
8880
|
|
|
7863
8881
|
firstUpdated() {
|
|
7864
|
-
AuroLibraryRuntimeUtils$
|
|
8882
|
+
AuroLibraryRuntimeUtils$6.prototype.handleComponentTagRename(this, 'auro-menu');
|
|
7865
8883
|
|
|
7866
8884
|
this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
|
|
7867
8885
|
this.initializeMenu();
|
|
@@ -8788,8 +9806,12 @@ class AuroIcon extends BaseIcon {
|
|
|
8788
9806
|
async firstUpdated() {
|
|
8789
9807
|
await super.firstUpdated();
|
|
8790
9808
|
|
|
8791
|
-
|
|
8792
|
-
|
|
9809
|
+
/**
|
|
9810
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
9811
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
9812
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
9813
|
+
*/
|
|
9814
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
8793
9815
|
const svgDesc = this.svg.querySelector('desc');
|
|
8794
9816
|
|
|
8795
9817
|
if (svgDesc) {
|
|
@@ -8833,7 +9855,7 @@ class AuroIcon extends BaseIcon {
|
|
|
8833
9855
|
}
|
|
8834
9856
|
}
|
|
8835
9857
|
|
|
8836
|
-
var iconVersion = '8.0.
|
|
9858
|
+
var iconVersion = '8.0.4';
|
|
8837
9859
|
|
|
8838
9860
|
var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
|
|
8839
9861
|
|
|
@@ -8851,7 +9873,7 @@ var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlin
|
|
|
8851
9873
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
8852
9874
|
* @slot - Specifies text for an option, but is not the value.
|
|
8853
9875
|
*/
|
|
8854
|
-
class AuroMenuOption extends AuroElement$
|
|
9876
|
+
class AuroMenuOption extends AuroElement$4 {
|
|
8855
9877
|
constructor() {
|
|
8856
9878
|
super();
|
|
8857
9879
|
|
|
@@ -8876,7 +9898,7 @@ class AuroMenuOption extends AuroElement$3 {
|
|
|
8876
9898
|
/**
|
|
8877
9899
|
* @private
|
|
8878
9900
|
*/
|
|
8879
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
9901
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
|
|
8880
9902
|
}
|
|
8881
9903
|
|
|
8882
9904
|
static get properties() {
|
|
@@ -8921,7 +9943,7 @@ class AuroMenuOption extends AuroElement$3 {
|
|
|
8921
9943
|
*
|
|
8922
9944
|
*/
|
|
8923
9945
|
static register(name = "auro-menuoption") {
|
|
8924
|
-
AuroLibraryRuntimeUtils$
|
|
9946
|
+
AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroMenuOption);
|
|
8925
9947
|
}
|
|
8926
9948
|
|
|
8927
9949
|
firstUpdated() {
|