@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
|
@@ -101,7 +101,7 @@ let AuroElement$3 = class AuroElement extends LitElement {
|
|
|
101
101
|
|
|
102
102
|
var shapeSizeCss$1 = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
|
|
103
103
|
|
|
104
|
-
var tokensCss$
|
|
104
|
+
var tokensCss$5 = css`:host(:not([ondark])){--ds-auro-select-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-select-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-select-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-select-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-select-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-select-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: transparent}:host([ondark]){--ds-auro-select-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-select-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-select-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-select-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-select-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-select-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: transparent}`;
|
|
105
105
|
|
|
106
106
|
class DateFormatter {
|
|
107
107
|
|
|
@@ -519,7 +519,7 @@ const {
|
|
|
519
519
|
|
|
520
520
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
521
521
|
|
|
522
|
-
let AuroLibraryRuntimeUtils$
|
|
522
|
+
let AuroLibraryRuntimeUtils$6 = class AuroLibraryRuntimeUtils {
|
|
523
523
|
|
|
524
524
|
/* eslint-disable jsdoc/require-param */
|
|
525
525
|
|
|
@@ -589,7 +589,7 @@ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
|
589
589
|
class AuroFormValidation {
|
|
590
590
|
|
|
591
591
|
constructor() {
|
|
592
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
592
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
|
|
593
593
|
}
|
|
594
594
|
|
|
595
595
|
/**
|
|
@@ -3277,7 +3277,7 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
3277
3277
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
3278
3278
|
*/
|
|
3279
3279
|
|
|
3280
|
-
let AuroElement$1 = class AuroElement extends LitElement {
|
|
3280
|
+
let AuroElement$1$1 = class AuroElement extends LitElement {
|
|
3281
3281
|
|
|
3282
3282
|
// function to define props used within the scope of this component
|
|
3283
3283
|
static get properties() {
|
|
@@ -3345,7 +3345,7 @@ var styleCss$2$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}
|
|
|
3345
3345
|
*/
|
|
3346
3346
|
|
|
3347
3347
|
// build the component class
|
|
3348
|
-
let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
3348
|
+
let BaseIcon$1 = class BaseIcon extends AuroElement$1$1 {
|
|
3349
3349
|
constructor() {
|
|
3350
3350
|
super();
|
|
3351
3351
|
this.onDark = false;
|
|
@@ -3417,9 +3417,9 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
|
3417
3417
|
}
|
|
3418
3418
|
};
|
|
3419
3419
|
|
|
3420
|
-
var tokensCss$2 = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
3420
|
+
var tokensCss$2$1 = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
3421
3421
|
|
|
3422
|
-
var colorCss$3 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=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)}`;
|
|
3422
|
+
var colorCss$3$1 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=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)}`;
|
|
3423
3423
|
|
|
3424
3424
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3425
3425
|
// See LICENSE in the project root for license information.
|
|
@@ -3577,9 +3577,9 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
3577
3577
|
static get styles() {
|
|
3578
3578
|
return [
|
|
3579
3579
|
super.styles,
|
|
3580
|
-
css`${tokensCss$2}`,
|
|
3580
|
+
css`${tokensCss$2$1}`,
|
|
3581
3581
|
css`${styleCss$2$1}`,
|
|
3582
|
-
css`${colorCss$3}`
|
|
3582
|
+
css`${colorCss$3$1}`
|
|
3583
3583
|
];
|
|
3584
3584
|
}
|
|
3585
3585
|
|
|
@@ -3613,8 +3613,12 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
3613
3613
|
async firstUpdated() {
|
|
3614
3614
|
await super.firstUpdated();
|
|
3615
3615
|
|
|
3616
|
-
|
|
3617
|
-
|
|
3616
|
+
/**
|
|
3617
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
3618
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
3619
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
3620
|
+
*/
|
|
3621
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
3618
3622
|
const svgDesc = this.svg.querySelector('desc');
|
|
3619
3623
|
|
|
3620
3624
|
if (svgDesc) {
|
|
@@ -3871,11 +3875,11 @@ var styleEmphasizedCss = css`:host{display:block}.layout-emphasized .chevron,.la
|
|
|
3871
3875
|
|
|
3872
3876
|
var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex-direction:row}.trigger{display:flex;flex:1;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([layout*=snowflake]) .leftIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}.layout-snowflake .chevron,.layout-snowflake-left .chevron,.layout-snowflake-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}`;
|
|
3873
3877
|
|
|
3874
|
-
var colorCss$
|
|
3878
|
+
var colorCss$5 = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
3875
3879
|
|
|
3876
|
-
var styleCss$
|
|
3880
|
+
var styleCss$6 = css`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
3877
3881
|
|
|
3878
|
-
var tokensCss$
|
|
3882
|
+
var tokensCss$4 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
3879
3883
|
|
|
3880
3884
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3881
3885
|
// See LICENSE in the project root for license information.
|
|
@@ -3884,7 +3888,7 @@ var tokensCss$3 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texti
|
|
|
3884
3888
|
|
|
3885
3889
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
3886
3890
|
|
|
3887
|
-
let AuroLibraryRuntimeUtils$
|
|
3891
|
+
let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
3888
3892
|
|
|
3889
3893
|
/* eslint-disable jsdoc/require-param */
|
|
3890
3894
|
|
|
@@ -3965,14 +3969,14 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
3965
3969
|
this.onDark = false;
|
|
3966
3970
|
this.hasTextContent = false;
|
|
3967
3971
|
|
|
3968
|
-
AuroLibraryRuntimeUtils$
|
|
3972
|
+
AuroLibraryRuntimeUtils$5.prototype.handleComponentTagRename(this, 'auro-helptext');
|
|
3969
3973
|
}
|
|
3970
3974
|
|
|
3971
3975
|
static get styles() {
|
|
3972
3976
|
return [
|
|
3973
|
-
colorCss$
|
|
3974
|
-
styleCss$
|
|
3975
|
-
tokensCss$
|
|
3977
|
+
colorCss$5,
|
|
3978
|
+
styleCss$6,
|
|
3979
|
+
tokensCss$4
|
|
3976
3980
|
];
|
|
3977
3981
|
}
|
|
3978
3982
|
|
|
@@ -4021,7 +4025,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4021
4025
|
*
|
|
4022
4026
|
*/
|
|
4023
4027
|
static register(name = "auro-helptext") {
|
|
4024
|
-
AuroLibraryRuntimeUtils$
|
|
4028
|
+
AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroHelpText);
|
|
4025
4029
|
}
|
|
4026
4030
|
|
|
4027
4031
|
updated() {
|
|
@@ -5101,9 +5105,9 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5101
5105
|
|
|
5102
5106
|
var dropdownVersion = '3.0.0';
|
|
5103
5107
|
|
|
5104
|
-
var colorCss$
|
|
5108
|
+
var colorCss$3 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
|
|
5105
5109
|
|
|
5106
|
-
var styleCss$
|
|
5110
|
+
var styleCss$4 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){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)}`;
|
|
5107
5111
|
|
|
5108
5112
|
var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
|
|
5109
5113
|
|
|
@@ -5114,7 +5118,7 @@ var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-
|
|
|
5114
5118
|
|
|
5115
5119
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
5116
5120
|
|
|
5117
|
-
let AuroLibraryRuntimeUtils$
|
|
5121
|
+
let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
5118
5122
|
|
|
5119
5123
|
/* eslint-disable jsdoc/require-param */
|
|
5120
5124
|
|
|
@@ -5217,159 +5221,479 @@ class AuroDependencyVersioning {
|
|
|
5217
5221
|
}
|
|
5218
5222
|
}
|
|
5219
5223
|
|
|
5220
|
-
|
|
5221
|
-
|
|
5222
|
-
|
|
5224
|
+
/**
|
|
5225
|
+
* Private module-level WeakMap to hold MutationObservers for each host element.
|
|
5226
|
+
*/
|
|
5227
|
+
const _observers = new WeakMap();
|
|
5223
5228
|
|
|
5224
5229
|
/**
|
|
5225
|
-
*
|
|
5226
|
-
*
|
|
5227
|
-
*
|
|
5230
|
+
* Private module-level WeakMap to hold attribute matchers and targets for each host element.
|
|
5231
|
+
* Structure: {
|
|
5232
|
+
* host: {
|
|
5233
|
+
* matchers: Set<Function>,
|
|
5234
|
+
* targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
|
|
5235
|
+
* }
|
|
5236
|
+
* }
|
|
5228
5237
|
*/
|
|
5238
|
+
const _transportConfig = new WeakMap();
|
|
5229
5239
|
|
|
5230
|
-
|
|
5240
|
+
/**
|
|
5241
|
+
* Transfers all matching attributes from a host element to a target element and observes for future changes.
|
|
5242
|
+
*
|
|
5243
|
+
* @param {Object} params - The parameters for the function.
|
|
5244
|
+
* @param {HTMLElement} params.host - The host element from which attributes will be transported.
|
|
5245
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
5246
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
|
|
5247
|
+
* @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
|
|
5248
|
+
* @returns {Function} A function to detach the observer when no longer needed.
|
|
5249
|
+
* @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
|
|
5250
|
+
*/
|
|
5251
|
+
const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
|
|
5252
|
+
// Guard Clause: Ensure host is valid HTMLElement instance
|
|
5253
|
+
if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
|
|
5254
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
|
|
5255
|
+
}
|
|
5231
5256
|
|
|
5232
|
-
//
|
|
5233
|
-
|
|
5234
|
-
|
|
5235
|
-
hidden: { type: Boolean,
|
|
5236
|
-
reflect: true },
|
|
5237
|
-
hiddenVisually: { type: Boolean,
|
|
5238
|
-
reflect: true },
|
|
5239
|
-
hiddenAudible: { type: Boolean,
|
|
5240
|
-
reflect: true },
|
|
5241
|
-
};
|
|
5257
|
+
// Guard Clause: Ensure target is valid HTMLElement instance
|
|
5258
|
+
if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
|
|
5259
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
|
|
5242
5260
|
}
|
|
5243
5261
|
|
|
5244
|
-
|
|
5245
|
-
|
|
5246
|
-
|
|
5247
|
-
|
|
5248
|
-
if (value) {
|
|
5249
|
-
return 'true'
|
|
5250
|
-
}
|
|
5262
|
+
// Guard Clause: Ensure match is a function
|
|
5263
|
+
if (typeof match !== 'function') {
|
|
5264
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
|
|
5265
|
+
}
|
|
5251
5266
|
|
|
5252
|
-
|
|
5267
|
+
// Guard Clause: Ensure removeOriginal is a boolean
|
|
5268
|
+
if (typeof removeOriginal !== 'boolean') {
|
|
5269
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
|
|
5253
5270
|
}
|
|
5254
|
-
|
|
5271
|
+
|
|
5272
|
+
// Register this transport and get cleanup function
|
|
5273
|
+
return _registerTransport({
|
|
5274
|
+
host,
|
|
5275
|
+
target,
|
|
5276
|
+
matcher: match,
|
|
5277
|
+
removeOriginal
|
|
5278
|
+
});
|
|
5279
|
+
};
|
|
5255
5280
|
|
|
5256
|
-
|
|
5281
|
+
/**
|
|
5282
|
+
* Registers a matcher and target for a host element and attaches an observer if needed.
|
|
5283
|
+
*
|
|
5284
|
+
* @param {Object} params - The parameters object.
|
|
5285
|
+
* @param {HTMLElement} params.host - The host element to observe.
|
|
5286
|
+
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
5287
|
+
* @param {Function} params.matcher - Function that determines which attributes to transport.
|
|
5288
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
5289
|
+
* @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
|
|
5290
|
+
* @returns {Function} Function to detach the specific matcher and target pairing.
|
|
5291
|
+
* @private
|
|
5292
|
+
*/
|
|
5293
|
+
const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
|
|
5294
|
+
// Initialize config for this host if it doesn't exist
|
|
5295
|
+
if (!_transportConfig.has(host)) {
|
|
5296
|
+
_transportConfig.set(host, {
|
|
5297
|
+
matchers: new Set(),
|
|
5298
|
+
targets: new Map()
|
|
5299
|
+
});
|
|
5300
|
+
}
|
|
5257
5301
|
|
|
5258
|
-
|
|
5302
|
+
const config = _transportConfig.get(host);
|
|
5303
|
+
|
|
5304
|
+
// Add the matcher to the set of matchers for this host
|
|
5305
|
+
config.matchers.add(matcher);
|
|
5306
|
+
|
|
5307
|
+
// Initialize target entry if it doesn't exist
|
|
5308
|
+
if (!config.targets.has(target)) {
|
|
5309
|
+
config.targets.set(target, new Map());
|
|
5310
|
+
}
|
|
5311
|
+
|
|
5312
|
+
// Store the matcher with its removeOriginal setting for this target
|
|
5313
|
+
config.targets.get(target).set(matcher, {
|
|
5314
|
+
removeOriginal,
|
|
5315
|
+
currentAttributes: new Map()
|
|
5316
|
+
});
|
|
5317
|
+
|
|
5318
|
+
// Perform initial attribute transport
|
|
5319
|
+
_transportAttributes({ host, target, matcher, removeOriginal });
|
|
5320
|
+
|
|
5321
|
+
// Attach observer
|
|
5322
|
+
_attachObserver(host);
|
|
5323
|
+
|
|
5324
|
+
// Return cleanup function and utility functions
|
|
5325
|
+
return {
|
|
5326
|
+
cleanup: () => _cleanupTransport(host, target, matcher),
|
|
5327
|
+
getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
|
|
5328
|
+
getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
|
|
5329
|
+
}
|
|
5330
|
+
};
|
|
5259
5331
|
|
|
5260
|
-
|
|
5332
|
+
/**
|
|
5333
|
+
* Cleans up resources associated with a specific matcher and target for a host element.
|
|
5334
|
+
*
|
|
5335
|
+
* @param {HTMLElement} host - The host element
|
|
5336
|
+
* @param {HTMLElement} target - The target element
|
|
5337
|
+
* @param {Function} matcher - The matcher function
|
|
5338
|
+
* @private
|
|
5339
|
+
*/
|
|
5340
|
+
const _cleanupTransport = (host, target, matcher) => {
|
|
5341
|
+
const config = _transportConfig.get(host);
|
|
5342
|
+
if (!config) return;
|
|
5343
|
+
|
|
5344
|
+
// Remove this matcher from this target
|
|
5345
|
+
const targetMatchers = config.targets.get(target);
|
|
5346
|
+
if (targetMatchers) {
|
|
5347
|
+
targetMatchers.delete(matcher);
|
|
5348
|
+
|
|
5349
|
+
// If this target has no more matchers, remove it
|
|
5350
|
+
if (targetMatchers.size === 0) {
|
|
5351
|
+
config.targets.delete(target);
|
|
5352
|
+
}
|
|
5353
|
+
}
|
|
5354
|
+
|
|
5355
|
+
// Check if this matcher is still used by any target
|
|
5356
|
+
let matcherStillUsed = false;
|
|
5357
|
+
for (const matcherMap of config.targets.values()) {
|
|
5358
|
+
if (matcherMap.has(matcher)) {
|
|
5359
|
+
matcherStillUsed = true;
|
|
5360
|
+
break;
|
|
5361
|
+
}
|
|
5362
|
+
}
|
|
5363
|
+
|
|
5364
|
+
// If not used anymore, remove from matchers set
|
|
5365
|
+
if (!matcherStillUsed) {
|
|
5366
|
+
config.matchers.delete(matcher);
|
|
5367
|
+
}
|
|
5368
|
+
|
|
5369
|
+
// If no more targets or matchers, detach observer
|
|
5370
|
+
if (config.targets.size === 0 || config.matchers.size === 0) {
|
|
5371
|
+
_detachObserver(host);
|
|
5372
|
+
}
|
|
5373
|
+
};
|
|
5261
5374
|
|
|
5262
5375
|
/**
|
|
5263
|
-
*
|
|
5264
|
-
*
|
|
5265
|
-
* @
|
|
5266
|
-
* @param {
|
|
5267
|
-
* @
|
|
5376
|
+
* Generic function to transport attributes from a host element to a target element.
|
|
5377
|
+
*
|
|
5378
|
+
* @param {Object} params - The parameters object.
|
|
5379
|
+
* @param {HTMLElement} params.host - The host element from which to transport attributes.
|
|
5380
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
5381
|
+
* @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
|
|
5382
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
|
|
5383
|
+
* @returns {void}
|
|
5384
|
+
* @private
|
|
5268
5385
|
*/
|
|
5386
|
+
const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
|
|
5387
|
+
// Get a list of all matching attributes on the host element and their values
|
|
5388
|
+
const matchingAttributes = host.getAttributeNames()
|
|
5389
|
+
.filter(attr => matcher(attr))
|
|
5390
|
+
.reduce((acc, attr) => {
|
|
5391
|
+
acc[attr] = host.getAttribute(attr);
|
|
5392
|
+
return acc;
|
|
5393
|
+
}, {});
|
|
5394
|
+
|
|
5395
|
+
// Move matching attributes to the target element, removing them from the host if removeOriginal is true
|
|
5396
|
+
Object.entries(matchingAttributes).forEach(([key, value]) => {
|
|
5397
|
+
_setObservedAttribute(host, target, matcher, key, value);
|
|
5398
|
+
target.setAttribute(key, value);
|
|
5399
|
+
if (removeOriginal) {
|
|
5400
|
+
host.removeAttribute(key);
|
|
5401
|
+
}
|
|
5402
|
+
});
|
|
5403
|
+
};
|
|
5269
5404
|
|
|
5270
5405
|
/**
|
|
5271
|
-
*
|
|
5272
|
-
*
|
|
5273
|
-
* @param {
|
|
5274
|
-
* @
|
|
5275
|
-
* @
|
|
5276
|
-
* @returns {Promise}
|
|
5406
|
+
* Attaches a MutationObserver to the host element to monitor attribute changes.
|
|
5407
|
+
*
|
|
5408
|
+
* @param {HTMLElement} host - The element to observe for attribute changes.
|
|
5409
|
+
* @returns {MutationObserver} The observer instance.
|
|
5410
|
+
* @private
|
|
5277
5411
|
*/
|
|
5278
|
-
const
|
|
5279
|
-
|
|
5280
|
-
if (
|
|
5281
|
-
|
|
5412
|
+
const _attachObserver = (host) => {
|
|
5413
|
+
// If an observer for this host already exists, return it
|
|
5414
|
+
if (_observers.has(host)) {
|
|
5415
|
+
return _observers.get(host);
|
|
5282
5416
|
}
|
|
5283
|
-
return _fetchMap.get(uri);
|
|
5284
|
-
};
|
|
5285
5417
|
|
|
5286
|
-
|
|
5418
|
+
// Create a new MutationObserver
|
|
5419
|
+
const observer = new MutationObserver((mutations) => {
|
|
5420
|
+
const config = _transportConfig.get(host);
|
|
5421
|
+
if (!config) return;
|
|
5422
|
+
|
|
5423
|
+
// For each mutation affecting attributes
|
|
5424
|
+
mutations
|
|
5425
|
+
.filter(mutation => mutation.type === 'attributes')
|
|
5426
|
+
.forEach(mutation => {
|
|
5427
|
+
const attributeName = mutation.attributeName;
|
|
5428
|
+
|
|
5429
|
+
// Find matchers that care about this attribute
|
|
5430
|
+
for (const matcher of config.matchers) {
|
|
5431
|
+
if (matcher(attributeName)) {
|
|
5432
|
+
// For each target that uses this matcher
|
|
5433
|
+
for (const [target, matcherConfigs] of config.targets.entries()) {
|
|
5434
|
+
if (matcherConfigs.has(matcher)) {
|
|
5435
|
+
const { removeOriginal } = matcherConfigs.get(matcher);
|
|
5436
|
+
_transportAttributes({
|
|
5437
|
+
host,
|
|
5438
|
+
target,
|
|
5439
|
+
matcher,
|
|
5440
|
+
removeOriginal
|
|
5441
|
+
});
|
|
5442
|
+
}
|
|
5443
|
+
}
|
|
5444
|
+
}
|
|
5445
|
+
}
|
|
5446
|
+
});
|
|
5447
|
+
});
|
|
5287
5448
|
|
|
5288
|
-
//
|
|
5289
|
-
|
|
5449
|
+
// Start observing attribute changes
|
|
5450
|
+
observer.observe(host, { attributes: true });
|
|
5451
|
+
|
|
5452
|
+
// Store the observer
|
|
5453
|
+
_observers.set(host, observer);
|
|
5454
|
+
|
|
5455
|
+
return observer;
|
|
5456
|
+
};
|
|
5290
5457
|
|
|
5458
|
+
/**
|
|
5459
|
+
* Detaches and cleans up the MutationObserver for a given host element.
|
|
5460
|
+
*
|
|
5461
|
+
* @param {HTMLElement} host - The element whose observer should be detached.
|
|
5462
|
+
* @private
|
|
5463
|
+
*/
|
|
5464
|
+
const _detachObserver = (host) => {
|
|
5465
|
+
if (_observers.has(host)) {
|
|
5466
|
+
const observer = _observers.get(host);
|
|
5467
|
+
observer.disconnect();
|
|
5468
|
+
_observers.delete(host);
|
|
5469
|
+
}
|
|
5470
|
+
|
|
5471
|
+
// Clean up the transport config as well
|
|
5472
|
+
if (_transportConfig.has(host)) {
|
|
5473
|
+
_transportConfig.delete(host);
|
|
5474
|
+
}
|
|
5475
|
+
};
|
|
5291
5476
|
|
|
5292
|
-
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
5293
5477
|
/**
|
|
5294
|
-
*
|
|
5478
|
+
* Gets the matcher configuration for a specific host, target, and matcher
|
|
5479
|
+
* @param {HTMLElement} host - The host element
|
|
5480
|
+
* @param {HTMLElement} target - The target element
|
|
5481
|
+
* @param {Function} matcher - The matcher function
|
|
5482
|
+
* @returns {Object|undefined} The matcher configuration if found
|
|
5483
|
+
* @private
|
|
5295
5484
|
*/
|
|
5485
|
+
const _getMatcherConfig = (host, target, matcher) => {
|
|
5486
|
+
const config = _transportConfig.get(host);
|
|
5487
|
+
if (!config) return undefined;
|
|
5488
|
+
|
|
5489
|
+
const targetMatchers = config.targets.get(target);
|
|
5490
|
+
if (!targetMatchers) return undefined;
|
|
5491
|
+
|
|
5492
|
+
return targetMatchers.get(matcher);
|
|
5493
|
+
};
|
|
5296
5494
|
|
|
5297
|
-
|
|
5298
|
-
|
|
5299
|
-
|
|
5300
|
-
|
|
5301
|
-
|
|
5495
|
+
/**
|
|
5496
|
+
* Sets an observed attribute value
|
|
5497
|
+
* @param {HTMLElement} host - The host element
|
|
5498
|
+
* @param {HTMLElement} target - The target element
|
|
5499
|
+
* @param {Function} matcher - The matcher function
|
|
5500
|
+
* @param {string} key - The attribute name
|
|
5501
|
+
* @param {string} value - The attribute value
|
|
5502
|
+
* @private
|
|
5503
|
+
*/
|
|
5504
|
+
const _setObservedAttribute = (host, target, matcher, key, value) => {
|
|
5505
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
5506
|
+
if (matcherConfig) {
|
|
5507
|
+
matcherConfig.currentAttributes.set(key, value);
|
|
5302
5508
|
}
|
|
5509
|
+
};
|
|
5510
|
+
|
|
5511
|
+
const _getObservedAttribute = (host, target, matcher, attr) => {
|
|
5512
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
5513
|
+
if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
|
|
5514
|
+
return undefined;
|
|
5515
|
+
};
|
|
5516
|
+
|
|
5517
|
+
const _getObservedAttributes = (host, target, matcher) => {
|
|
5518
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
5519
|
+
if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
|
|
5520
|
+
return [];
|
|
5521
|
+
};
|
|
5522
|
+
|
|
5523
|
+
const _matchers = {
|
|
5524
|
+
'aria-': attr => attr.startsWith('aria-'),
|
|
5525
|
+
'role': attr => attr.match(/^role$/)
|
|
5526
|
+
};
|
|
5527
|
+
|
|
5528
|
+
const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
|
|
5529
|
+
return transportAttributes({
|
|
5530
|
+
host,
|
|
5531
|
+
target,
|
|
5532
|
+
match: attr => {
|
|
5533
|
+
for (const key in _matchers) {
|
|
5534
|
+
if (_matchers[key](attr)) return true;
|
|
5535
|
+
}
|
|
5536
|
+
return false;
|
|
5537
|
+
},
|
|
5538
|
+
removeOriginal
|
|
5539
|
+
});
|
|
5540
|
+
};
|
|
5541
|
+
|
|
5542
|
+
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5543
|
+
|
|
5544
|
+
/**
|
|
5545
|
+
* @type {Object} return object from transportAttributes via a11yUtilities
|
|
5546
|
+
* @property {Function} cleanup - Function to clean up the attribute watcher.
|
|
5547
|
+
* @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
|
|
5548
|
+
* @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
|
|
5549
|
+
* @private
|
|
5550
|
+
*/
|
|
5551
|
+
attributeWatcher;
|
|
5303
5552
|
|
|
5304
|
-
// function to define props used within the scope of this component
|
|
5305
5553
|
static get properties() {
|
|
5306
5554
|
return {
|
|
5307
|
-
...super.properties,
|
|
5308
5555
|
|
|
5309
5556
|
/**
|
|
5310
|
-
*
|
|
5557
|
+
* Defines the layout of an element.
|
|
5558
|
+
* @default {'default'}
|
|
5559
|
+
*/
|
|
5560
|
+
layout: {
|
|
5561
|
+
type: String,
|
|
5562
|
+
attribute: "layout",
|
|
5563
|
+
reflect: true
|
|
5564
|
+
},
|
|
5565
|
+
|
|
5566
|
+
/**
|
|
5567
|
+
* Defines the shape of an element.
|
|
5568
|
+
* @property {'default', 'rounded', 'pill', 'circle'}
|
|
5569
|
+
* @default {'default'}
|
|
5570
|
+
*/
|
|
5571
|
+
shape: {
|
|
5572
|
+
type: String,
|
|
5573
|
+
attribute: "shape",
|
|
5574
|
+
reflect: true
|
|
5575
|
+
},
|
|
5576
|
+
|
|
5577
|
+
/**
|
|
5578
|
+
* Defines the size of an element.
|
|
5579
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'}
|
|
5580
|
+
* @default {'md'}
|
|
5581
|
+
*/
|
|
5582
|
+
size: {
|
|
5583
|
+
type: String,
|
|
5584
|
+
attribute: "size",
|
|
5585
|
+
reflect: true
|
|
5586
|
+
},
|
|
5587
|
+
|
|
5588
|
+
/**
|
|
5589
|
+
* This Boolean attribute lets you specify that the element should be rendered in dark mode.
|
|
5590
|
+
* @default {false}
|
|
5311
5591
|
*/
|
|
5312
5592
|
onDark: {
|
|
5313
5593
|
type: Boolean,
|
|
5594
|
+
attribute: "ondark",
|
|
5314
5595
|
reflect: true
|
|
5315
5596
|
},
|
|
5316
5597
|
|
|
5317
5598
|
/**
|
|
5599
|
+
* A reference to the wrapper element in the shadow DOM.
|
|
5600
|
+
* This is used to apply layout and shape classes dynamically.
|
|
5601
|
+
* @type {HTMLElement|null}
|
|
5602
|
+
* @default {null}
|
|
5318
5603
|
* @private
|
|
5319
5604
|
*/
|
|
5320
|
-
|
|
5605
|
+
wrapper: {
|
|
5606
|
+
type: HTMLElement,
|
|
5321
5607
|
attribute: false,
|
|
5322
|
-
reflect:
|
|
5608
|
+
reflect: false
|
|
5323
5609
|
}
|
|
5324
5610
|
};
|
|
5325
5611
|
}
|
|
5326
5612
|
|
|
5327
|
-
|
|
5328
|
-
|
|
5329
|
-
|
|
5330
|
-
|
|
5613
|
+
|
|
5614
|
+
|
|
5615
|
+
resetShapeClasses() {
|
|
5616
|
+
if (this.shape && this.size) {
|
|
5617
|
+
|
|
5618
|
+
if (this.wrapper) {
|
|
5619
|
+
this.wrapper.classList.forEach((className) => {
|
|
5620
|
+
if (className.startsWith('shape-')) {
|
|
5621
|
+
this.wrapper.classList.remove(className);
|
|
5622
|
+
}
|
|
5623
|
+
});
|
|
5624
|
+
|
|
5625
|
+
this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
5626
|
+
}
|
|
5627
|
+
}
|
|
5331
5628
|
}
|
|
5332
5629
|
|
|
5333
|
-
|
|
5334
|
-
|
|
5335
|
-
|
|
5336
|
-
|
|
5337
|
-
|
|
5338
|
-
|
|
5339
|
-
|
|
5340
|
-
|
|
5341
|
-
let iconHTML = '';
|
|
5630
|
+
resetLayoutClasses() {
|
|
5631
|
+
if (this.layout) {
|
|
5632
|
+
if (this.wrapper) {
|
|
5633
|
+
this.wrapper.classList.forEach((className) => {
|
|
5634
|
+
if (className.startsWith('layout-')) {
|
|
5635
|
+
this.wrapper.classList.remove(className);
|
|
5636
|
+
}
|
|
5637
|
+
});
|
|
5342
5638
|
|
|
5343
|
-
|
|
5344
|
-
|
|
5345
|
-
} else {
|
|
5346
|
-
iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
|
|
5639
|
+
this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
5640
|
+
}
|
|
5347
5641
|
}
|
|
5642
|
+
}
|
|
5348
5643
|
|
|
5349
|
-
|
|
5644
|
+
updateComponentArchitecture() {
|
|
5645
|
+
this.resetLayoutClasses();
|
|
5646
|
+
this.resetShapeClasses();
|
|
5647
|
+
}
|
|
5350
5648
|
|
|
5351
|
-
|
|
5649
|
+
updated(changedProperties) {
|
|
5650
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
5651
|
+
this.updateComponentArchitecture();
|
|
5652
|
+
}
|
|
5352
5653
|
}
|
|
5353
5654
|
|
|
5354
|
-
|
|
5355
|
-
|
|
5356
|
-
if (!this.customSvg) {
|
|
5357
|
-
const svg = await this.fetchIcon(this.category, this.name);
|
|
5655
|
+
firstUpdated() {
|
|
5656
|
+
super.firstUpdated();
|
|
5358
5657
|
|
|
5359
|
-
|
|
5360
|
-
|
|
5361
|
-
} else if (!svg) {
|
|
5362
|
-
const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
|
|
5658
|
+
// Set a reference to the wrapper element in the shadow DOM
|
|
5659
|
+
this.wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
5363
5660
|
|
|
5364
|
-
|
|
5365
|
-
|
|
5661
|
+
// Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
|
|
5662
|
+
this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
|
|
5663
|
+
}
|
|
5664
|
+
|
|
5665
|
+
disconnectedCallback() {
|
|
5666
|
+
super.disconnectedCallback();
|
|
5667
|
+
|
|
5668
|
+
// Cleanup the ARIA observer if it exists
|
|
5669
|
+
if (this.attributeWatcher) {
|
|
5670
|
+
this.attributeWatcher.cleanup();
|
|
5671
|
+
this.attributeWatcher = null;
|
|
5366
5672
|
}
|
|
5367
5673
|
}
|
|
5368
|
-
}
|
|
5369
5674
|
|
|
5370
|
-
|
|
5675
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
5676
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
5677
|
+
render() {
|
|
5678
|
+
try {
|
|
5679
|
+
return this.renderLayout();
|
|
5680
|
+
} catch (error) {
|
|
5681
|
+
// failed to get the defined layout
|
|
5682
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
5683
|
+
|
|
5684
|
+
// fallback to the default layout
|
|
5685
|
+
return this.getLayout('default');
|
|
5686
|
+
}
|
|
5687
|
+
}
|
|
5688
|
+
};
|
|
5689
|
+
|
|
5690
|
+
var styleCss$3 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block}::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}`;
|
|
5691
|
+
|
|
5692
|
+
var colorCss$2 = css`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible{outline-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-hover, #00274a)}.auro-button:not([ondark]):disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text, #01426a)}.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-hover, #00274a)}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text, #01426a)}.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=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)}`;
|
|
5371
5693
|
|
|
5372
|
-
var
|
|
5694
|
+
var tokensCss$2 = css`: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}`;
|
|
5695
|
+
|
|
5696
|
+
var shapeSize = css`.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}`;
|
|
5373
5697
|
|
|
5374
5698
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
5375
5699
|
// See LICENSE in the project root for license information.
|
|
@@ -5378,7 +5702,7 @@ var colorCss$2 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
|
|
|
5378
5702
|
|
|
5379
5703
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
5380
5704
|
|
|
5381
|
-
let AuroLibraryRuntimeUtils$
|
|
5705
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
5382
5706
|
|
|
5383
5707
|
/* eslint-disable jsdoc/require-param */
|
|
5384
5708
|
|
|
@@ -5441,17 +5765,694 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
|
5441
5765
|
}
|
|
5442
5766
|
};
|
|
5443
5767
|
|
|
5444
|
-
|
|
5768
|
+
var styleCss$2 = css`:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
|
|
5769
|
+
|
|
5770
|
+
var colorCss$1 = css`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-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}`;
|
|
5771
|
+
|
|
5772
|
+
var tokensCss$1 = css`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
5773
|
+
|
|
5774
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
5445
5775
|
// See LICENSE in the project root for license information.
|
|
5446
5776
|
|
|
5447
5777
|
|
|
5448
|
-
class
|
|
5778
|
+
class AuroLoader extends LitElement {
|
|
5449
5779
|
constructor() {
|
|
5450
5780
|
super();
|
|
5451
5781
|
|
|
5452
|
-
|
|
5453
|
-
|
|
5454
|
-
|
|
5782
|
+
/**
|
|
5783
|
+
* @private
|
|
5784
|
+
*/
|
|
5785
|
+
this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
5786
|
+
|
|
5787
|
+
/**
|
|
5788
|
+
* @private
|
|
5789
|
+
*/
|
|
5790
|
+
this.mdCount = 3;
|
|
5791
|
+
|
|
5792
|
+
/**
|
|
5793
|
+
* @private
|
|
5794
|
+
*/
|
|
5795
|
+
this.smCount = 2;
|
|
5796
|
+
|
|
5797
|
+
/**
|
|
5798
|
+
* @private
|
|
5799
|
+
*/
|
|
5800
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
5801
|
+
|
|
5802
|
+
this.orbit = false;
|
|
5803
|
+
this.ringworm = false;
|
|
5804
|
+
this.laser = false;
|
|
5805
|
+
this.pulse = false;
|
|
5806
|
+
}
|
|
5807
|
+
|
|
5808
|
+
// function to define props used within the scope of this component
|
|
5809
|
+
static get properties() {
|
|
5810
|
+
return {
|
|
5811
|
+
|
|
5812
|
+
/**
|
|
5813
|
+
* Sets loader to laser type.
|
|
5814
|
+
*/
|
|
5815
|
+
laser: {
|
|
5816
|
+
type: Boolean,
|
|
5817
|
+
reflect: true
|
|
5818
|
+
},
|
|
5819
|
+
|
|
5820
|
+
/**
|
|
5821
|
+
* Sets loader to orbit type.
|
|
5822
|
+
*/
|
|
5823
|
+
orbit: {
|
|
5824
|
+
type: Boolean,
|
|
5825
|
+
reflect: true
|
|
5826
|
+
},
|
|
5827
|
+
|
|
5828
|
+
/**
|
|
5829
|
+
* Sets loader to pulse type.
|
|
5830
|
+
*/
|
|
5831
|
+
pulse: {
|
|
5832
|
+
type: Boolean,
|
|
5833
|
+
reflect: true
|
|
5834
|
+
},
|
|
5835
|
+
|
|
5836
|
+
/**
|
|
5837
|
+
* Sets loader to ringworm type.
|
|
5838
|
+
*/
|
|
5839
|
+
ringworm: {
|
|
5840
|
+
type: Boolean,
|
|
5841
|
+
reflect: true
|
|
5842
|
+
}
|
|
5843
|
+
};
|
|
5844
|
+
}
|
|
5845
|
+
|
|
5846
|
+
static get styles() {
|
|
5847
|
+
return [
|
|
5848
|
+
css`${styleCss$2}`,
|
|
5849
|
+
css`${colorCss$1}`,
|
|
5850
|
+
css`${tokensCss$1}`
|
|
5851
|
+
];
|
|
5852
|
+
}
|
|
5853
|
+
|
|
5854
|
+
/**
|
|
5855
|
+
* This will register this element with the browser.
|
|
5856
|
+
* @param {string} [name="auro-loader"] - The name of element that you want to register to.
|
|
5857
|
+
*
|
|
5858
|
+
* @example
|
|
5859
|
+
* AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
|
|
5860
|
+
*
|
|
5861
|
+
*/
|
|
5862
|
+
static register(name = "auro-loader") {
|
|
5863
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader);
|
|
5864
|
+
}
|
|
5865
|
+
|
|
5866
|
+
firstUpdated() {
|
|
5867
|
+
// Add the tag name as an attribute if it is different than the component name
|
|
5868
|
+
this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
|
|
5869
|
+
}
|
|
5870
|
+
|
|
5871
|
+
connectedCallback() {
|
|
5872
|
+
super.connectedCallback();
|
|
5873
|
+
}
|
|
5874
|
+
|
|
5875
|
+
/**
|
|
5876
|
+
* @private
|
|
5877
|
+
* @returns {Array} Numbered array for template map.
|
|
5878
|
+
*/
|
|
5879
|
+
defineTemplate() {
|
|
5880
|
+
let nodes = Array.from(Array(this.mdCount).keys());
|
|
5881
|
+
|
|
5882
|
+
if (this.orbit || this.laser) {
|
|
5883
|
+
nodes = Array.from(Array(this.smCount).keys());
|
|
5884
|
+
} else if (this.ringworm) {
|
|
5885
|
+
nodes = Array.from(Array(0).keys());
|
|
5886
|
+
}
|
|
5887
|
+
|
|
5888
|
+
return nodes;
|
|
5889
|
+
}
|
|
5890
|
+
|
|
5891
|
+
// When using auroElement, use the following attribute and function when hiding content from screen readers.
|
|
5892
|
+
// aria-hidden="${this.hideAudible(this.hiddenAudible)}"
|
|
5893
|
+
|
|
5894
|
+
// function that renders the HTML and CSS into the scope of the component
|
|
5895
|
+
render() {
|
|
5896
|
+
return html$1`
|
|
5897
|
+
${this.defineTemplate().map((idx) => html$1`
|
|
5898
|
+
<span part="element" class="loader node-${idx}"></span>
|
|
5899
|
+
`)}
|
|
5900
|
+
|
|
5901
|
+
<div class="no-animation">Loading...</div>
|
|
5902
|
+
|
|
5903
|
+
${this.ringworm ? html$1`
|
|
5904
|
+
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
5905
|
+
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
|
5906
|
+
</svg>`
|
|
5907
|
+
: ``
|
|
5908
|
+
}
|
|
5909
|
+
`;
|
|
5910
|
+
}
|
|
5911
|
+
}
|
|
5912
|
+
|
|
5913
|
+
var loaderVersion = '5.0.0';
|
|
5914
|
+
|
|
5915
|
+
/* eslint-disable max-lines, curly */
|
|
5916
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
5917
|
+
// See LICENSE in the project root for license information.
|
|
5918
|
+
|
|
5919
|
+
|
|
5920
|
+
/**
|
|
5921
|
+
* @slot - Default slot for the text of the button.
|
|
5922
|
+
* @slot icon - Slot to provide auro-icon for the button.
|
|
5923
|
+
* @csspart button - Apply CSS to HTML5 button.
|
|
5924
|
+
* @csspart loader - Apply CSS to auro-loader.
|
|
5925
|
+
* @csspart text - Apply CSS to text slot.
|
|
5926
|
+
* @csspart icon - Apply CSS to icon slot.
|
|
5927
|
+
*/
|
|
5928
|
+
|
|
5929
|
+
/* eslint-disable lit/no-invalid-html, lit/binding-positions */
|
|
5930
|
+
|
|
5931
|
+
const ICON_ONLY_SHAPES = ['circle'];
|
|
5932
|
+
|
|
5933
|
+
/**
|
|
5934
|
+
* AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
|
|
5935
|
+
* It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
|
|
5936
|
+
* @property {'default', 'rounded', 'pill', 'circle'} shape - Defines the shape of the button.
|
|
5937
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
|
|
5938
|
+
* @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
|
|
5939
|
+
* @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
|
|
5940
|
+
* @property {boolean} onDark - Indicates if the button is rendered in dark mode.
|
|
5941
|
+
*/
|
|
5942
|
+
class AuroButton extends AuroElement$1 {
|
|
5943
|
+
|
|
5944
|
+
/**
|
|
5945
|
+
* Enables form association for this element.
|
|
5946
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
|
|
5947
|
+
* @returns {boolean} - Returns true to enable form association.
|
|
5948
|
+
*/
|
|
5949
|
+
static get formAssociated() {
|
|
5950
|
+
return true;
|
|
5951
|
+
}
|
|
5952
|
+
|
|
5953
|
+
constructor() {
|
|
5954
|
+
super();
|
|
5955
|
+
this.autofocus = false;
|
|
5956
|
+
this.disabled = false;
|
|
5957
|
+
this.loading = false;
|
|
5958
|
+
this.size = "md";
|
|
5959
|
+
this.shape = "rounded";
|
|
5960
|
+
this.onDark = false;
|
|
5961
|
+
this.fluid = false;
|
|
5962
|
+
this.loadingText = this.loadingText || 'Loading...';
|
|
5963
|
+
|
|
5964
|
+
// Support for HTML5 forms
|
|
5965
|
+
if (typeof this.attachInternals === 'function') {
|
|
5966
|
+
this.internals = this.attachInternals();
|
|
5967
|
+
} else {
|
|
5968
|
+
this.internals = null;
|
|
5969
|
+
|
|
5970
|
+
// eslint-disable-next-line no-console
|
|
5971
|
+
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.');
|
|
5972
|
+
}
|
|
5973
|
+
|
|
5974
|
+
/**
|
|
5975
|
+
* Generate unique names for dependency components.
|
|
5976
|
+
*/
|
|
5977
|
+
const versioning = new AuroDependencyVersioning();
|
|
5978
|
+
|
|
5979
|
+
/**
|
|
5980
|
+
* @private
|
|
5981
|
+
*/
|
|
5982
|
+
this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
|
|
5983
|
+
}
|
|
5984
|
+
|
|
5985
|
+
static get styles() {
|
|
5986
|
+
return [
|
|
5987
|
+
tokensCss$2,
|
|
5988
|
+
styleCss$3,
|
|
5989
|
+
colorCss$2,
|
|
5990
|
+
shapeSize
|
|
5991
|
+
];
|
|
5992
|
+
}
|
|
5993
|
+
|
|
5994
|
+
static get properties() {
|
|
5995
|
+
return {
|
|
5996
|
+
|
|
5997
|
+
...super.properties,
|
|
5998
|
+
|
|
5999
|
+
/**
|
|
6000
|
+
* Override layout since it isn't used in this component.
|
|
6001
|
+
* @private
|
|
6002
|
+
*/
|
|
6003
|
+
layout: {
|
|
6004
|
+
type: Boolean,
|
|
6005
|
+
attribute: false,
|
|
6006
|
+
reflect: false
|
|
6007
|
+
},
|
|
6008
|
+
|
|
6009
|
+
/**
|
|
6010
|
+
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
6011
|
+
*/
|
|
6012
|
+
autofocus: {
|
|
6013
|
+
type: Boolean,
|
|
6014
|
+
reflect: true
|
|
6015
|
+
},
|
|
6016
|
+
|
|
6017
|
+
/**
|
|
6018
|
+
* If set to true, button will become disabled and not allow for interactions.
|
|
6019
|
+
*/
|
|
6020
|
+
disabled: {
|
|
6021
|
+
type: Boolean,
|
|
6022
|
+
reflect: true
|
|
6023
|
+
},
|
|
6024
|
+
|
|
6025
|
+
/**
|
|
6026
|
+
* Alters the shape of the button to be full width of its parent container.
|
|
6027
|
+
*/
|
|
6028
|
+
fluid: {
|
|
6029
|
+
type: Boolean,
|
|
6030
|
+
reflect: true
|
|
6031
|
+
},
|
|
6032
|
+
|
|
6033
|
+
/**
|
|
6034
|
+
* If set to true button text will be replaced with `auro-loader` and become disabled.
|
|
6035
|
+
*/
|
|
6036
|
+
loading: {
|
|
6037
|
+
type: Boolean,
|
|
6038
|
+
reflect: true
|
|
6039
|
+
},
|
|
6040
|
+
|
|
6041
|
+
/**
|
|
6042
|
+
* 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.
|
|
6043
|
+
*/
|
|
6044
|
+
loadingText: {
|
|
6045
|
+
type: String
|
|
6046
|
+
},
|
|
6047
|
+
|
|
6048
|
+
/**
|
|
6049
|
+
* Populates `tabIndex` to define the focusable sequence in keyboard navigation.
|
|
6050
|
+
*/
|
|
6051
|
+
tIndex: {
|
|
6052
|
+
type: String,
|
|
6053
|
+
reflect: true
|
|
6054
|
+
},
|
|
6055
|
+
|
|
6056
|
+
/**
|
|
6057
|
+
* Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
6058
|
+
*/
|
|
6059
|
+
title: {
|
|
6060
|
+
type: String,
|
|
6061
|
+
reflect: true
|
|
6062
|
+
},
|
|
6063
|
+
|
|
6064
|
+
/**
|
|
6065
|
+
* The type of the button. Possible values are: `submit`, `reset`, `button`.
|
|
6066
|
+
*/
|
|
6067
|
+
type: {
|
|
6068
|
+
type: String,
|
|
6069
|
+
reflect: true
|
|
6070
|
+
},
|
|
6071
|
+
|
|
6072
|
+
/**
|
|
6073
|
+
* Defines the value associated with the button which is submitted with the form data.
|
|
6074
|
+
*/
|
|
6075
|
+
value: {
|
|
6076
|
+
type: String,
|
|
6077
|
+
reflect: true
|
|
6078
|
+
},
|
|
6079
|
+
|
|
6080
|
+
/**
|
|
6081
|
+
* Sets button variant option.
|
|
6082
|
+
* @default primary
|
|
6083
|
+
*/
|
|
6084
|
+
variant: {
|
|
6085
|
+
type: String,
|
|
6086
|
+
reflect: true
|
|
6087
|
+
},
|
|
6088
|
+
};
|
|
6089
|
+
}
|
|
6090
|
+
|
|
6091
|
+
/**
|
|
6092
|
+
* This will register this element with the browser.
|
|
6093
|
+
* @param {string} [name="auro-button"] - The name of element that you want to register to.
|
|
6094
|
+
*
|
|
6095
|
+
* @example
|
|
6096
|
+
* AuroButton.register("custom-button") // this will register this element to <custom-button/>
|
|
6097
|
+
*
|
|
6098
|
+
*/
|
|
6099
|
+
static register(name = "auro-button") {
|
|
6100
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
|
|
6101
|
+
}
|
|
6102
|
+
|
|
6103
|
+
/**
|
|
6104
|
+
* Internal method to apply focus to the HTML5 button.
|
|
6105
|
+
* @private
|
|
6106
|
+
* @returns {void}
|
|
6107
|
+
*/
|
|
6108
|
+
focus() {
|
|
6109
|
+
this.renderRoot.querySelector('button').focus();
|
|
6110
|
+
}
|
|
6111
|
+
|
|
6112
|
+
/**
|
|
6113
|
+
* Submits the form that this button is associated with.
|
|
6114
|
+
* @private
|
|
6115
|
+
* @returns {void}
|
|
6116
|
+
*/
|
|
6117
|
+
surfaceSubmitEvent() {
|
|
6118
|
+
if (this.form) {
|
|
6119
|
+
this.form.requestSubmit();
|
|
6120
|
+
}
|
|
6121
|
+
}
|
|
6122
|
+
|
|
6123
|
+
/**
|
|
6124
|
+
* Returns the form element that this button is associated with.
|
|
6125
|
+
* @private
|
|
6126
|
+
* @returns {HTMLFormElement | null}
|
|
6127
|
+
*/
|
|
6128
|
+
get form() {
|
|
6129
|
+
return this.internals ? this.internals.form : null;
|
|
6130
|
+
}
|
|
6131
|
+
|
|
6132
|
+
/**
|
|
6133
|
+
* @private
|
|
6134
|
+
* @returns {Boolean}
|
|
6135
|
+
*/
|
|
6136
|
+
get hideText() {
|
|
6137
|
+
return ICON_ONLY_SHAPES.includes(this.shape);
|
|
6138
|
+
}
|
|
6139
|
+
|
|
6140
|
+
/**
|
|
6141
|
+
* Returns the current value of the projected `aria-label` attribute or undefined if not set.
|
|
6142
|
+
* @returns {string | undefined}
|
|
6143
|
+
* @private
|
|
6144
|
+
*/
|
|
6145
|
+
get currentAriaLabel() {
|
|
6146
|
+
if (!this.attributeWatcher) return undefined;
|
|
6147
|
+
|
|
6148
|
+
const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
|
|
6149
|
+
return ariaLabel || undefined;
|
|
6150
|
+
}
|
|
6151
|
+
|
|
6152
|
+
/**
|
|
6153
|
+
* Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
|
|
6154
|
+
* @returns {string | undefined}
|
|
6155
|
+
* @private
|
|
6156
|
+
*/
|
|
6157
|
+
get currentAriaLabelledBy() {
|
|
6158
|
+
if (!this.attributeWatcher) return undefined;
|
|
6159
|
+
|
|
6160
|
+
const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
|
|
6161
|
+
return ariaLabelledBy || undefined;
|
|
6162
|
+
}
|
|
6163
|
+
|
|
6164
|
+
/**
|
|
6165
|
+
* Renders the default layout for the button.
|
|
6166
|
+
* @returns {TemplateResult}
|
|
6167
|
+
* @private
|
|
6168
|
+
*/
|
|
6169
|
+
renderLayoutDefault() {
|
|
6170
|
+
const classes = {
|
|
6171
|
+
"util_insetLg--squish": true,
|
|
6172
|
+
"auro-button": true,
|
|
6173
|
+
wrapper: true,
|
|
6174
|
+
loading: this.loading,
|
|
6175
|
+
};
|
|
6176
|
+
|
|
6177
|
+
return html`
|
|
6178
|
+
<button
|
|
6179
|
+
part="button"
|
|
6180
|
+
aria-label="${ifDefined(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
|
|
6181
|
+
aria-labelledby="${ifDefined(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
|
|
6182
|
+
tabIndex="${ifDefined(this.tIndex)}"
|
|
6183
|
+
?autofocus="${this.autofocus}"
|
|
6184
|
+
class="${classMap(classes)}"
|
|
6185
|
+
?disabled="${this.disabled || this.loading}"
|
|
6186
|
+
?onDark="${this.onDark}"
|
|
6187
|
+
title="${ifDefined(this.title ? this.title : undefined)}"
|
|
6188
|
+
name="${ifDefined(this.name ? this.name : undefined)}"
|
|
6189
|
+
type="${ifDefined(this.type ? this.type : undefined)}"
|
|
6190
|
+
variant="${ifDefined(this.variant ? this.variant : undefined)}"
|
|
6191
|
+
.value="${ifDefined(this.value ? this.value : undefined)}"
|
|
6192
|
+
@click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
|
|
6193
|
+
>
|
|
6194
|
+
${ifDefined(this.loading ? html`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
6195
|
+
|
|
6196
|
+
<span class="contentWrapper">
|
|
6197
|
+
<span class="textSlot" part="text">
|
|
6198
|
+
${this.hideText ? undefined : html`<slot></slot>`}
|
|
6199
|
+
</span>
|
|
6200
|
+
|
|
6201
|
+
<span part="icon">
|
|
6202
|
+
<slot name="icon"></slot>
|
|
6203
|
+
</span>
|
|
6204
|
+
</span>
|
|
6205
|
+
</button>
|
|
6206
|
+
`;
|
|
6207
|
+
}
|
|
6208
|
+
|
|
6209
|
+
/**
|
|
6210
|
+
* Renders the layout of the button
|
|
6211
|
+
* @returns {TemplateResult}
|
|
6212
|
+
* @private
|
|
6213
|
+
*/
|
|
6214
|
+
renderLayout() {
|
|
6215
|
+
return this.renderLayoutDefault();
|
|
6216
|
+
}
|
|
6217
|
+
}
|
|
6218
|
+
|
|
6219
|
+
var buttonVersion = '10.0.0';
|
|
6220
|
+
|
|
6221
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
6222
|
+
// See LICENSE in the project root for license information.
|
|
6223
|
+
|
|
6224
|
+
|
|
6225
|
+
/**
|
|
6226
|
+
* @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
|
|
6227
|
+
* @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
|
|
6228
|
+
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
6229
|
+
*/
|
|
6230
|
+
|
|
6231
|
+
class AuroElement extends LitElement {
|
|
6232
|
+
|
|
6233
|
+
// function to define props used within the scope of this component
|
|
6234
|
+
static get properties() {
|
|
6235
|
+
return {
|
|
6236
|
+
hidden: { type: Boolean,
|
|
6237
|
+
reflect: true },
|
|
6238
|
+
hiddenVisually: { type: Boolean,
|
|
6239
|
+
reflect: true },
|
|
6240
|
+
hiddenAudible: { type: Boolean,
|
|
6241
|
+
reflect: true },
|
|
6242
|
+
};
|
|
6243
|
+
}
|
|
6244
|
+
|
|
6245
|
+
/**
|
|
6246
|
+
* @private Function that determines state of aria-hidden
|
|
6247
|
+
*/
|
|
6248
|
+
hideAudible(value) {
|
|
6249
|
+
if (value) {
|
|
6250
|
+
return 'true'
|
|
6251
|
+
}
|
|
6252
|
+
|
|
6253
|
+
return 'false'
|
|
6254
|
+
}
|
|
6255
|
+
}
|
|
6256
|
+
|
|
6257
|
+
var error = {"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>"};
|
|
6258
|
+
|
|
6259
|
+
/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
|
|
6260
|
+
|
|
6261
|
+
const _fetchMap = new Map();
|
|
6262
|
+
|
|
6263
|
+
/**
|
|
6264
|
+
* A callback to parse Response body.
|
|
6265
|
+
*
|
|
6266
|
+
* @callback ResponseParser
|
|
6267
|
+
* @param {Fetch.Response} response
|
|
6268
|
+
* @returns {Promise}
|
|
6269
|
+
*/
|
|
6270
|
+
|
|
6271
|
+
/**
|
|
6272
|
+
* A minimal in-memory map to de-duplicate Fetch API media requests.
|
|
6273
|
+
*
|
|
6274
|
+
* @param {String} uri
|
|
6275
|
+
* @param {Object} [options={}]
|
|
6276
|
+
* @param {ResponseParser} [options.responseParser=(response) => response.text()]
|
|
6277
|
+
* @returns {Promise}
|
|
6278
|
+
*/
|
|
6279
|
+
const cacheFetch = (uri, options = {}) => {
|
|
6280
|
+
const responseParser = options.responseParser || ((response) => response.text());
|
|
6281
|
+
if (!_fetchMap.has(uri)) {
|
|
6282
|
+
_fetchMap.set(uri, fetch(uri).then(responseParser));
|
|
6283
|
+
}
|
|
6284
|
+
return _fetchMap.get(uri);
|
|
6285
|
+
};
|
|
6286
|
+
|
|
6287
|
+
var styleCss$1$1 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
|
|
6288
|
+
|
|
6289
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
6290
|
+
// See LICENSE in the project root for license information.
|
|
6291
|
+
|
|
6292
|
+
|
|
6293
|
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
6294
|
+
/**
|
|
6295
|
+
* @slot - Hidden from visibility, used for a11y if icon description is needed
|
|
6296
|
+
*/
|
|
6297
|
+
|
|
6298
|
+
// build the component class
|
|
6299
|
+
class BaseIcon extends AuroElement {
|
|
6300
|
+
constructor() {
|
|
6301
|
+
super();
|
|
6302
|
+
this.onDark = false;
|
|
6303
|
+
}
|
|
6304
|
+
|
|
6305
|
+
// function to define props used within the scope of this component
|
|
6306
|
+
static get properties() {
|
|
6307
|
+
return {
|
|
6308
|
+
...super.properties,
|
|
6309
|
+
|
|
6310
|
+
/**
|
|
6311
|
+
* Set value for on-dark version of auro-icon.
|
|
6312
|
+
*/
|
|
6313
|
+
onDark: {
|
|
6314
|
+
type: Boolean,
|
|
6315
|
+
reflect: true
|
|
6316
|
+
},
|
|
6317
|
+
|
|
6318
|
+
/**
|
|
6319
|
+
* @private
|
|
6320
|
+
*/
|
|
6321
|
+
svg: {
|
|
6322
|
+
attribute: false,
|
|
6323
|
+
reflect: true
|
|
6324
|
+
}
|
|
6325
|
+
};
|
|
6326
|
+
}
|
|
6327
|
+
|
|
6328
|
+
static get styles() {
|
|
6329
|
+
return css`
|
|
6330
|
+
${styleCss$1$1}
|
|
6331
|
+
`;
|
|
6332
|
+
}
|
|
6333
|
+
|
|
6334
|
+
/**
|
|
6335
|
+
* Async function to fetch requested icon from npm CDN.
|
|
6336
|
+
* @private
|
|
6337
|
+
* @param {string} category - Icon category.
|
|
6338
|
+
* @param {string} name - Icon name.
|
|
6339
|
+
* @returns {SVGElement} DOM - Ready HTML to be appended.
|
|
6340
|
+
*/
|
|
6341
|
+
async fetchIcon(category, name) {
|
|
6342
|
+
let iconHTML = '';
|
|
6343
|
+
|
|
6344
|
+
if (category === 'logos') {
|
|
6345
|
+
iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
|
|
6346
|
+
} else {
|
|
6347
|
+
iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
|
|
6348
|
+
}
|
|
6349
|
+
|
|
6350
|
+
const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
|
|
6351
|
+
|
|
6352
|
+
return dom.body.querySelector('svg');
|
|
6353
|
+
}
|
|
6354
|
+
|
|
6355
|
+
// lifecycle function
|
|
6356
|
+
async firstUpdated() {
|
|
6357
|
+
if (!this.customSvg) {
|
|
6358
|
+
const svg = await this.fetchIcon(this.category, this.name);
|
|
6359
|
+
|
|
6360
|
+
if (svg) {
|
|
6361
|
+
this.svg = svg;
|
|
6362
|
+
} else if (!svg) {
|
|
6363
|
+
const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
|
|
6364
|
+
|
|
6365
|
+
this.svg = penDOM.body.firstChild;
|
|
6366
|
+
}
|
|
6367
|
+
}
|
|
6368
|
+
}
|
|
6369
|
+
}
|
|
6370
|
+
|
|
6371
|
+
var tokensCss$3 = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
6372
|
+
|
|
6373
|
+
var colorCss$4 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=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)}`;
|
|
6374
|
+
|
|
6375
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
6376
|
+
// See LICENSE in the project root for license information.
|
|
6377
|
+
|
|
6378
|
+
// ---------------------------------------------------------------------
|
|
6379
|
+
|
|
6380
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
6381
|
+
|
|
6382
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
6383
|
+
|
|
6384
|
+
/* eslint-disable jsdoc/require-param */
|
|
6385
|
+
|
|
6386
|
+
/**
|
|
6387
|
+
* This will register a new custom element with the browser.
|
|
6388
|
+
* @param {String} name - The name of the custom element.
|
|
6389
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
6390
|
+
* @returns {void}
|
|
6391
|
+
*/
|
|
6392
|
+
registerComponent(name, componentClass) {
|
|
6393
|
+
if (!customElements.get(name)) {
|
|
6394
|
+
customElements.define(name, class extends componentClass {});
|
|
6395
|
+
}
|
|
6396
|
+
}
|
|
6397
|
+
|
|
6398
|
+
/**
|
|
6399
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
6400
|
+
* @returns {void}
|
|
6401
|
+
*/
|
|
6402
|
+
closestElement(
|
|
6403
|
+
selector, // selector like in .closest()
|
|
6404
|
+
base = this, // extra functionality to skip a parent
|
|
6405
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
6406
|
+
!el || el === document || el === window
|
|
6407
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
6408
|
+
: found
|
|
6409
|
+
? found // found a selector INside this element
|
|
6410
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
6411
|
+
) {
|
|
6412
|
+
return __Closest(base);
|
|
6413
|
+
}
|
|
6414
|
+
/* eslint-enable jsdoc/require-param */
|
|
6415
|
+
|
|
6416
|
+
/**
|
|
6417
|
+
* 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.
|
|
6418
|
+
* @param {Object} elem - The element to check.
|
|
6419
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
6420
|
+
* @returns {void}
|
|
6421
|
+
*/
|
|
6422
|
+
handleComponentTagRename(elem, tagName) {
|
|
6423
|
+
const tag = tagName.toLowerCase();
|
|
6424
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
6425
|
+
|
|
6426
|
+
if (elemTag !== tag) {
|
|
6427
|
+
elem.setAttribute(tag, true);
|
|
6428
|
+
}
|
|
6429
|
+
}
|
|
6430
|
+
|
|
6431
|
+
/**
|
|
6432
|
+
* Validates if an element is a specific Auro component.
|
|
6433
|
+
* @param {Object} elem - The element to validate.
|
|
6434
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
6435
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
6436
|
+
*/
|
|
6437
|
+
elementMatch(elem, tagName) {
|
|
6438
|
+
const tag = tagName.toLowerCase();
|
|
6439
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
6440
|
+
|
|
6441
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
6442
|
+
}
|
|
6443
|
+
};
|
|
6444
|
+
|
|
6445
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
6446
|
+
// See LICENSE in the project root for license information.
|
|
6447
|
+
|
|
6448
|
+
|
|
6449
|
+
class AuroIcon extends BaseIcon {
|
|
6450
|
+
constructor() {
|
|
6451
|
+
super();
|
|
6452
|
+
|
|
6453
|
+
this.variant = undefined;
|
|
6454
|
+
this.privateDefaults();
|
|
6455
|
+
}
|
|
5455
6456
|
|
|
5456
6457
|
/**
|
|
5457
6458
|
* Internal Defaults.
|
|
@@ -5527,9 +6528,9 @@ class AuroIcon extends BaseIcon {
|
|
|
5527
6528
|
static get styles() {
|
|
5528
6529
|
return [
|
|
5529
6530
|
super.styles,
|
|
5530
|
-
css`${tokensCss$
|
|
6531
|
+
css`${tokensCss$3}`,
|
|
5531
6532
|
css`${styleCss$1$1}`,
|
|
5532
|
-
css`${colorCss$
|
|
6533
|
+
css`${colorCss$4}`
|
|
5533
6534
|
];
|
|
5534
6535
|
}
|
|
5535
6536
|
|
|
@@ -5563,8 +6564,12 @@ class AuroIcon extends BaseIcon {
|
|
|
5563
6564
|
async firstUpdated() {
|
|
5564
6565
|
await super.firstUpdated();
|
|
5565
6566
|
|
|
5566
|
-
|
|
5567
|
-
|
|
6567
|
+
/**
|
|
6568
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
6569
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
6570
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
6571
|
+
*/
|
|
6572
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
5568
6573
|
const svgDesc = this.svg.querySelector('desc');
|
|
5569
6574
|
|
|
5570
6575
|
if (svgDesc) {
|
|
@@ -5608,7 +6613,7 @@ class AuroIcon extends BaseIcon {
|
|
|
5608
6613
|
}
|
|
5609
6614
|
}
|
|
5610
6615
|
|
|
5611
|
-
var iconVersion = '8.0.
|
|
6616
|
+
var iconVersion = '8.0.4';
|
|
5612
6617
|
|
|
5613
6618
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
5614
6619
|
// See LICENSE in the project root for license information.
|
|
@@ -5617,7 +6622,7 @@ var iconVersion = '8.0.3';
|
|
|
5617
6622
|
|
|
5618
6623
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
5619
6624
|
|
|
5620
|
-
let AuroLibraryRuntimeUtils$
|
|
6625
|
+
let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
5621
6626
|
|
|
5622
6627
|
/* eslint-disable jsdoc/require-param */
|
|
5623
6628
|
|
|
@@ -5680,7 +6685,7 @@ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
|
5680
6685
|
}
|
|
5681
6686
|
};
|
|
5682
6687
|
|
|
5683
|
-
var styleCss$
|
|
6688
|
+
var styleCss$5 = css`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
|
|
5684
6689
|
|
|
5685
6690
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
5686
6691
|
// See LICENSE in the project root for license information.
|
|
@@ -5709,7 +6714,7 @@ class AuroHeader extends LitElement {
|
|
|
5709
6714
|
/**
|
|
5710
6715
|
* @private
|
|
5711
6716
|
*/
|
|
5712
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
6717
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
|
|
5713
6718
|
}
|
|
5714
6719
|
|
|
5715
6720
|
// function to define props used within the scope of this component
|
|
@@ -5727,7 +6732,7 @@ class AuroHeader extends LitElement {
|
|
|
5727
6732
|
}
|
|
5728
6733
|
|
|
5729
6734
|
static get styles() {
|
|
5730
|
-
return [styleCss$
|
|
6735
|
+
return [styleCss$5];
|
|
5731
6736
|
}
|
|
5732
6737
|
|
|
5733
6738
|
/**
|
|
@@ -5739,7 +6744,7 @@ class AuroHeader extends LitElement {
|
|
|
5739
6744
|
*
|
|
5740
6745
|
*/
|
|
5741
6746
|
static register(name = "auro-header") {
|
|
5742
|
-
AuroLibraryRuntimeUtils$
|
|
6747
|
+
AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHeader);
|
|
5743
6748
|
}
|
|
5744
6749
|
|
|
5745
6750
|
firstUpdated() {
|
|
@@ -5835,17 +6840,30 @@ class AuroBibtemplate extends LitElement {
|
|
|
5835
6840
|
|
|
5836
6841
|
this.large = false;
|
|
5837
6842
|
|
|
5838
|
-
AuroLibraryRuntimeUtils$
|
|
6843
|
+
AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
|
|
5839
6844
|
|
|
5840
6845
|
const versioning = new AuroDependencyVersioning();
|
|
6846
|
+
|
|
6847
|
+
/**
|
|
6848
|
+
* @private
|
|
6849
|
+
*/
|
|
5841
6850
|
this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion, AuroIcon);
|
|
6851
|
+
|
|
6852
|
+
/**
|
|
6853
|
+
* @private
|
|
6854
|
+
*/
|
|
5842
6855
|
this.headerTag = versioning.generateTag('auro-formkit-bibtemplate-header', headerVersion, AuroHeader);
|
|
6856
|
+
|
|
6857
|
+
/**
|
|
6858
|
+
* @private
|
|
6859
|
+
*/
|
|
6860
|
+
this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
|
|
5843
6861
|
}
|
|
5844
6862
|
|
|
5845
6863
|
static get styles() {
|
|
5846
6864
|
return [
|
|
5847
|
-
colorCss$
|
|
5848
|
-
styleCss$
|
|
6865
|
+
colorCss$3,
|
|
6866
|
+
styleCss$4,
|
|
5849
6867
|
tokenCss
|
|
5850
6868
|
];
|
|
5851
6869
|
}
|
|
@@ -5874,7 +6892,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
5874
6892
|
*
|
|
5875
6893
|
*/
|
|
5876
6894
|
static register(name = "auro-bibtemplate") {
|
|
5877
|
-
AuroLibraryRuntimeUtils$
|
|
6895
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
|
|
5878
6896
|
}
|
|
5879
6897
|
|
|
5880
6898
|
/**
|
|
@@ -5932,9 +6950,9 @@ class AuroBibtemplate extends LitElement {
|
|
|
5932
6950
|
<div id="bibTemplate" part="bibtemplate">
|
|
5933
6951
|
${this.isFullscreen ? html`
|
|
5934
6952
|
<div id="headerContainer">
|
|
5935
|
-
|
|
6953
|
+
<${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
|
|
5936
6954
|
<${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
|
|
5937
|
-
|
|
6955
|
+
</${this.buttonTag}>
|
|
5938
6956
|
<${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
|
|
5939
6957
|
<slot name="header"></slot>
|
|
5940
6958
|
</${this.headerTag}>
|
|
@@ -6294,7 +7312,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
6294
7312
|
/**
|
|
6295
7313
|
* @private
|
|
6296
7314
|
*/
|
|
6297
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
7315
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
|
|
6298
7316
|
|
|
6299
7317
|
/**
|
|
6300
7318
|
* Generate unique names for dependency components.
|
|
@@ -6607,7 +7625,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
6607
7625
|
static get styles() {
|
|
6608
7626
|
return [
|
|
6609
7627
|
css`${shapeSizeCss$1}`,
|
|
6610
|
-
css`${tokensCss$
|
|
7628
|
+
css`${tokensCss$5}`,
|
|
6611
7629
|
css`${styleCss}`,
|
|
6612
7630
|
];
|
|
6613
7631
|
}
|
|
@@ -6668,7 +7686,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
6668
7686
|
*
|
|
6669
7687
|
*/
|
|
6670
7688
|
static register(name = "auro-select") {
|
|
6671
|
-
AuroLibraryRuntimeUtils$
|
|
7689
|
+
AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroSelect);
|
|
6672
7690
|
}
|
|
6673
7691
|
|
|
6674
7692
|
/**
|