@aurodesignsystem-dev/auro-formkit 0.0.0-pr622.1 → 0.0.0-pr624.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/iconVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +2 -2
- package/components/bibtemplate/dist/registered.js +2 -2
- package/components/checkbox/README.md +1 -1
- package/components/checkbox/demo/api.min.js +14 -3
- package/components/checkbox/demo/index.min.js +14 -3
- package/components/checkbox/demo/readme.md +1 -1
- package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
- package/components/checkbox/dist/auro-checkbox.d.ts +5 -1
- package/components/checkbox/dist/index.js +14 -3
- package/components/checkbox/dist/registered.js +14 -3
- package/components/combobox/README.md +1 -1
- package/components/combobox/demo/api.md +3 -0
- package/components/combobox/demo/api.min.js +1479 -395
- package/components/combobox/demo/index.html +2 -0
- package/components/combobox/demo/index.md +75 -0
- package/components/combobox/demo/index.min.js +1479 -395
- package/components/combobox/demo/readme.md +1 -1
- package/components/combobox/dist/auro-combobox.d.ts +19 -9
- package/components/combobox/dist/index.js +1471 -387
- package/components/combobox/dist/registered.js +1471 -387
- package/components/counter/README.md +1 -1
- package/components/counter/demo/api.min.js +433 -104
- package/components/counter/demo/index.min.js +433 -104
- package/components/counter/demo/readme.md +1 -1
- package/components/counter/dist/iconVersion.d.ts +1 -1
- package/components/counter/dist/index.js +433 -104
- package/components/counter/dist/registered.js +433 -104
- package/components/datepicker/README.md +1 -1
- package/components/datepicker/demo/api.min.js +1157 -376
- package/components/datepicker/demo/index.min.js +1157 -376
- package/components/datepicker/demo/readme.md +1 -1
- package/components/datepicker/dist/index.js +1156 -375
- package/components/datepicker/dist/registered.js +1156 -375
- package/components/dropdown/README.md +1 -1
- package/components/dropdown/demo/api.md +59 -35
- package/components/dropdown/demo/api.min.js +361 -88
- package/components/dropdown/demo/index.md +52 -0
- package/components/dropdown/demo/index.min.js +361 -88
- package/components/dropdown/demo/readme.md +1 -1
- package/components/dropdown/dist/auro-dropdown.d.ts +70 -21
- package/components/dropdown/dist/index.js +331 -58
- package/components/dropdown/dist/registered.js +331 -58
- package/components/dropdown/dist/styles/default/style-css.d.ts +2 -0
- package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
- package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
- package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
- package/components/form/README.md +1 -1
- package/components/form/demo/readme.md +1 -1
- package/components/input/README.md +2 -2
- package/components/input/demo/api.md +76 -64
- package/components/input/demo/api.min.js +747 -295
- package/components/input/demo/index.html +1 -1
- package/components/input/demo/index.md +49 -4
- package/components/input/demo/index.min.js +747 -295
- package/components/input/demo/readme.md +2 -2
- package/components/input/dist/auro-input.d.ts +97 -3
- package/components/input/dist/base-input.d.ts +36 -18
- package/components/input/dist/index.js +681 -229
- package/components/input/dist/registered.js +681 -229
- package/components/input/dist/styles/classic/color-css.d.ts +2 -0
- package/components/input/dist/styles/classic/style-css.d.ts +2 -0
- package/components/input/dist/styles/default/borders-css.d.ts +2 -0
- package/components/input/dist/styles/default/color-css.d.ts +2 -0
- package/components/input/dist/styles/default/input-css.d.ts +2 -0
- package/components/input/dist/styles/default/label-css.d.ts +2 -0
- package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
- package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
- package/components/input/dist/styles/default/style-css.d.ts +2 -0
- package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
- package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
- package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
- package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
- package/components/layoutElement/dist/auroElement.d.ts +34 -0
- package/components/layoutElement/dist/index.d.ts +1 -0
- package/components/layoutElement/dist/index.js +1 -0
- package/components/layoutElement/dist/registered.js +1 -0
- package/components/menu/README.md +1 -1
- package/components/menu/demo/api.min.js +2 -2
- package/components/menu/demo/index.min.js +2 -2
- package/components/menu/demo/readme.md +1 -1
- package/components/menu/dist/iconVersion.d.ts +1 -1
- package/components/menu/dist/index.js +2 -2
- package/components/menu/dist/registered.js +2 -2
- package/components/radio/README.md +1 -1
- package/components/radio/demo/api.md +8 -0
- package/components/radio/demo/api.min.js +13 -5
- package/components/radio/demo/index.min.js +13 -5
- package/components/radio/demo/readme.md +1 -1
- package/components/radio/dist/auro-radio.d.ts +4 -0
- package/components/radio/dist/index.js +13 -5
- package/components/radio/dist/registered.js +13 -5
- package/components/select/README.md +1 -1
- package/components/select/demo/api.html +15 -0
- package/components/select/demo/api.md +178 -0
- package/components/select/demo/api.min.js +403 -62
- package/components/select/demo/index.html +15 -0
- package/components/select/demo/index.md +177 -0
- package/components/select/demo/index.min.js +403 -62
- package/components/select/demo/readme.md +1 -1
- package/components/select/dist/auro-select.d.ts +27 -0
- package/components/select/dist/index.js +400 -58
- package/components/select/dist/registered.js +400 -58
- package/package.json +2 -2
- /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
- /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
- /package/components/{input/dist/styles/borders-css.d.ts → dropdown/dist/styles/default/bibColors-css.d.ts} +0 -0
- /package/components/{input/dist/styles/label-css.d.ts → dropdown/dist/styles/default/bibStyles-css.d.ts} +0 -0
- /package/components/{input/dist/styles/notificationIcons-css.d.ts → dropdown/dist/styles/default/color-css.d.ts} +0 -0
|
@@ -1616,16 +1616,21 @@ const flip$1 = function (options) {
|
|
|
1616
1616
|
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
1617
1617
|
const nextPlacement = placements[nextIndex];
|
|
1618
1618
|
if (nextPlacement) {
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1619
|
+
var _overflowsData$;
|
|
1620
|
+
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
1621
|
+
const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
|
|
1622
|
+
if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
|
|
1623
|
+
// Try next placement and re-run the lifecycle.
|
|
1624
|
+
return {
|
|
1625
|
+
data: {
|
|
1626
|
+
index: nextIndex,
|
|
1627
|
+
overflows: overflowsData
|
|
1628
|
+
},
|
|
1629
|
+
reset: {
|
|
1630
|
+
placement: nextPlacement
|
|
1631
|
+
}
|
|
1632
|
+
};
|
|
1633
|
+
}
|
|
1629
1634
|
}
|
|
1630
1635
|
|
|
1631
1636
|
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
@@ -2277,6 +2282,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
2277
2282
|
scrollTop: 0
|
|
2278
2283
|
};
|
|
2279
2284
|
const offsets = createCoords(0);
|
|
2285
|
+
|
|
2286
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
2287
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
2288
|
+
function setLeftRTLScrollbarOffset() {
|
|
2289
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
2290
|
+
}
|
|
2280
2291
|
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
2281
2292
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
2282
2293
|
scroll = getNodeScroll(offsetParent);
|
|
@@ -2286,11 +2297,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
2286
2297
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
2287
2298
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
2288
2299
|
} else if (documentElement) {
|
|
2289
|
-
|
|
2290
|
-
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
2291
|
-
offsets.x = getWindowScrollBarX(documentElement);
|
|
2300
|
+
setLeftRTLScrollbarOffset();
|
|
2292
2301
|
}
|
|
2293
2302
|
}
|
|
2303
|
+
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
2304
|
+
setLeftRTLScrollbarOffset();
|
|
2305
|
+
}
|
|
2294
2306
|
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
2295
2307
|
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
2296
2308
|
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
@@ -2467,7 +2479,7 @@ function observeMove(element, onMove) {
|
|
|
2467
2479
|
// Handle <iframe>s
|
|
2468
2480
|
root: root.ownerDocument
|
|
2469
2481
|
});
|
|
2470
|
-
} catch (
|
|
2482
|
+
} catch (_e) {
|
|
2471
2483
|
io = new IntersectionObserver(handleObserve, options);
|
|
2472
2484
|
}
|
|
2473
2485
|
io.observe(element);
|
|
@@ -3280,7 +3292,7 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
3280
3292
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
3281
3293
|
*/
|
|
3282
3294
|
|
|
3283
|
-
let AuroElement$
|
|
3295
|
+
let AuroElement$1$1 = class AuroElement extends i$2 {
|
|
3284
3296
|
|
|
3285
3297
|
// function to define props used within the scope of this component
|
|
3286
3298
|
static get properties() {
|
|
@@ -3348,7 +3360,7 @@ var styleCss$3$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}
|
|
|
3348
3360
|
*/
|
|
3349
3361
|
|
|
3350
3362
|
// build the component class
|
|
3351
|
-
let BaseIcon$2 = class BaseIcon extends AuroElement$
|
|
3363
|
+
let BaseIcon$2 = class BaseIcon extends AuroElement$1$1 {
|
|
3352
3364
|
constructor() {
|
|
3353
3365
|
super();
|
|
3354
3366
|
this.onDark = false;
|
|
@@ -3422,7 +3434,7 @@ let BaseIcon$2 = class BaseIcon extends AuroElement$2 {
|
|
|
3422
3434
|
|
|
3423
3435
|
var tokensCss$2$1 = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
3424
3436
|
|
|
3425
|
-
var colorCss$3$1 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=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)}`;
|
|
3437
|
+
var colorCss$3$1 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=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)}`;
|
|
3426
3438
|
|
|
3427
3439
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3428
3440
|
// See LICENSE in the project root for license information.
|
|
@@ -3597,7 +3609,7 @@ var styleCss$2$2 = i$5`:host{position:absolute;z-index:var(--depth-tooltip, 400)
|
|
|
3597
3609
|
|
|
3598
3610
|
var colorCss$2$1 = i$5`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
3599
3611
|
|
|
3600
|
-
var tokensCss$1$1 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
3612
|
+
var tokensCss$1$1 = i$5`:host(:not([ondark])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
|
|
3601
3613
|
|
|
3602
3614
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3603
3615
|
// See LICENSE in the project root for license information.
|
|
@@ -3720,9 +3732,15 @@ class AuroDropdownBib extends i$2 {
|
|
|
3720
3732
|
|
|
3721
3733
|
var dropdownVersion$1 = '3.0.0';
|
|
3722
3734
|
|
|
3723
|
-
var
|
|
3735
|
+
var shapeSizeCss = i$5`.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:0;min-height:60px;max-height:60px;background-color:unset}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px}.shape-pill-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px 0 0 34px}.shape-pill-left-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 34px 34px 0}.shape-pill-right-xl.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-md{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px}.shape-pill-md.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-left-md{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:34px 0 0 34px}.shape-pill-left-md.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}.shape-pill-right-md{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 34px 34px 0}.shape-pill-right-md.simple{border-width:0;min-height:72px;max-height:72px;background-color:unset}`;
|
|
3736
|
+
|
|
3737
|
+
var styleCss$1$2 = i$5`:host([layout*=classic]){position:relative;display:inline-block;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .trigger{position:relative;display:flex;align-items:center}:host([layout*=classic]) .trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){:host([layout*=classic]) .trigger:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([layout*=classic][fluid]){display:block}:host([layout*=classic][matchwidth]) #bibSizer{width:100%}:host([layout*=classic][disabled]){pointer-events:none}:host([layout*=classic][inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([layout*=classic][common]) .trigger,:host([layout*=classic][inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([layout*=classic][inset][bordered][labeled]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([layout*=classic][common]) .trigger,:host([layout*=classic][rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
|
|
3724
3738
|
|
|
3725
|
-
var colorCss$1$2 = i$5
|
|
3739
|
+
var colorCss$1$2 = i$5`:host .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus,:host(:not([ondark])) .wrapper:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus,:host([ondark]) .wrapper:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([error]:not([ondark])){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([error][ondark]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helpText{color:var(--ds-auro-dropdown-helptext-text-color)}`;
|
|
3740
|
+
|
|
3741
|
+
var styleEmphasizedCss = i$5`:host{display:block}.wrapper{display:flex;flex-direction:column}.trigger{flex:1;display:flex;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.triggerContent{overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;width:100%}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:24px;width:calc(100% - 24px)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:24px;width:calc(100% - 48px)}`;
|
|
3742
|
+
|
|
3743
|
+
var styleSnowflakeCss = i$5`:host{display:block}.wrapper{display:flex;flex-direction:column}.trigger{flex:1;display:flex;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.triggerContent{overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap;width:100%}:host([layout*=snowflake]) .leftIndent{margin-left:24px;width:calc(100% - 48px)}:host([layout*=snowflake]) .rightIndent{margin-right:24px;width:calc(100% - 48px)}`;
|
|
3726
3744
|
|
|
3727
3745
|
var colorCss$4 = i$5`: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)}`;
|
|
3728
3746
|
|
|
@@ -3932,6 +3950,98 @@ class AuroHelpText extends i$2 {
|
|
|
3932
3950
|
|
|
3933
3951
|
var helpTextVersion = '1.0.0';
|
|
3934
3952
|
|
|
3953
|
+
let AuroElement$2 = class AuroElement extends i$2 {
|
|
3954
|
+
static get properties() {
|
|
3955
|
+
return {
|
|
3956
|
+
|
|
3957
|
+
/**
|
|
3958
|
+
* Defines the language of an element.
|
|
3959
|
+
* @default {'default'}
|
|
3960
|
+
*/
|
|
3961
|
+
layout: {
|
|
3962
|
+
type: String,
|
|
3963
|
+
attribute: "layout",
|
|
3964
|
+
reflect: true
|
|
3965
|
+
},
|
|
3966
|
+
|
|
3967
|
+
shape: {
|
|
3968
|
+
type: String,
|
|
3969
|
+
attribute: "shape",
|
|
3970
|
+
reflect: true
|
|
3971
|
+
},
|
|
3972
|
+
|
|
3973
|
+
size: {
|
|
3974
|
+
type: String,
|
|
3975
|
+
attribute: "size",
|
|
3976
|
+
reflect: true
|
|
3977
|
+
},
|
|
3978
|
+
|
|
3979
|
+
onDark: {
|
|
3980
|
+
type: Boolean,
|
|
3981
|
+
attribute: "ondark",
|
|
3982
|
+
reflect: true
|
|
3983
|
+
}
|
|
3984
|
+
};
|
|
3985
|
+
}
|
|
3986
|
+
|
|
3987
|
+
resetShapeClasses() {
|
|
3988
|
+
if (this.shape && this.size) {
|
|
3989
|
+
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
3990
|
+
|
|
3991
|
+
if (wrapper) {
|
|
3992
|
+
wrapper.classList.forEach((className) => {
|
|
3993
|
+
if (className.startsWith('shape-')) {
|
|
3994
|
+
wrapper.classList.remove(className);
|
|
3995
|
+
}
|
|
3996
|
+
});
|
|
3997
|
+
|
|
3998
|
+
wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
3999
|
+
}
|
|
4000
|
+
}
|
|
4001
|
+
}
|
|
4002
|
+
|
|
4003
|
+
resetLayoutClasses() {
|
|
4004
|
+
if (this.layout) {
|
|
4005
|
+
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
4006
|
+
|
|
4007
|
+
if (wrapper) {
|
|
4008
|
+
wrapper.classList.forEach((className) => {
|
|
4009
|
+
if (className.startsWith('layout-')) {
|
|
4010
|
+
wrapper.classList.remove(className);
|
|
4011
|
+
}
|
|
4012
|
+
});
|
|
4013
|
+
|
|
4014
|
+
wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
4015
|
+
}
|
|
4016
|
+
}
|
|
4017
|
+
}
|
|
4018
|
+
|
|
4019
|
+
updateComponentArchitecture() {
|
|
4020
|
+
this.resetLayoutClasses();
|
|
4021
|
+
this.resetShapeClasses();
|
|
4022
|
+
}
|
|
4023
|
+
|
|
4024
|
+
updated(changedProperties) {
|
|
4025
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
4026
|
+
this.updateComponentArchitecture();
|
|
4027
|
+
}
|
|
4028
|
+
}
|
|
4029
|
+
|
|
4030
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
4031
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
4032
|
+
render() {
|
|
4033
|
+
try {
|
|
4034
|
+
return this.renderLayout();
|
|
4035
|
+
} catch (error) {
|
|
4036
|
+
// failed to get the defined layout
|
|
4037
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
4038
|
+
|
|
4039
|
+
// fallback to the default layout
|
|
4040
|
+
return this.getLayout('default');
|
|
4041
|
+
}
|
|
4042
|
+
}
|
|
4043
|
+
};
|
|
4044
|
+
|
|
3935
4045
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3936
4046
|
// See LICENSE in the project root for license information.
|
|
3937
4047
|
|
|
@@ -3949,7 +4059,7 @@ var helpTextVersion = '1.0.0';
|
|
|
3949
4059
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
3950
4060
|
* @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
|
|
3951
4061
|
*/
|
|
3952
|
-
class AuroDropdown extends
|
|
4062
|
+
class AuroDropdown extends AuroElement$2 {
|
|
3953
4063
|
constructor() {
|
|
3954
4064
|
super();
|
|
3955
4065
|
|
|
@@ -3958,26 +4068,29 @@ class AuroDropdown extends i$2 {
|
|
|
3958
4068
|
this.matchWidth = false;
|
|
3959
4069
|
this.noHideOnThisFocusLoss = false;
|
|
3960
4070
|
|
|
4071
|
+
this.errorMessage = ''; // TODO!
|
|
4072
|
+
|
|
4073
|
+
// Layout Config
|
|
4074
|
+
this.layout = 'default';
|
|
4075
|
+
this.shape = 'rounded';
|
|
4076
|
+
this.size = 'xl';
|
|
4077
|
+
|
|
3961
4078
|
this.privateDefaults();
|
|
4079
|
+
}
|
|
3962
4080
|
|
|
3963
|
-
|
|
3964
|
-
|
|
3965
|
-
|
|
3966
|
-
*/
|
|
3967
|
-
this.constructor.shadowRootOptions = {
|
|
3968
|
-
...i$2.shadowRootOptions,
|
|
3969
|
-
delegatesFocus: true,
|
|
4081
|
+
get commonLabelClasses() {
|
|
4082
|
+
return {
|
|
4083
|
+
// 'withValue': this.value && this.value.length > 0
|
|
3970
4084
|
};
|
|
4085
|
+
}
|
|
3971
4086
|
|
|
3972
|
-
|
|
3973
|
-
|
|
3974
|
-
|
|
3975
|
-
|
|
3976
|
-
|
|
3977
|
-
|
|
3978
|
-
|
|
3979
|
-
*/
|
|
3980
|
-
this.showTriggerBorders = true;
|
|
4087
|
+
get commonWrapperClasses() {
|
|
4088
|
+
return {
|
|
4089
|
+
'trigger': true,
|
|
4090
|
+
'wrapper': true,
|
|
4091
|
+
'hasFocus': this.hasFocus,
|
|
4092
|
+
'simple': this.simple
|
|
4093
|
+
};
|
|
3981
4094
|
}
|
|
3982
4095
|
|
|
3983
4096
|
/**
|
|
@@ -3985,7 +4098,6 @@ class AuroDropdown extends i$2 {
|
|
|
3985
4098
|
* @returns {void} Internal defaults.
|
|
3986
4099
|
*/
|
|
3987
4100
|
privateDefaults() {
|
|
3988
|
-
this.bordered = false;
|
|
3989
4101
|
this.chevron = false;
|
|
3990
4102
|
this.disabled = false;
|
|
3991
4103
|
this.error = false;
|
|
@@ -3995,8 +4107,11 @@ class AuroDropdown extends i$2 {
|
|
|
3995
4107
|
this.noToggle = false;
|
|
3996
4108
|
this.a11yAutocomplete = 'none';
|
|
3997
4109
|
this.labeled = true;
|
|
3998
|
-
this.a11yRole = '
|
|
4110
|
+
this.a11yRole = 'button';
|
|
3999
4111
|
this.onDark = false;
|
|
4112
|
+
this.showTriggerBorders = true;
|
|
4113
|
+
this.triggerContentFocusable = false;
|
|
4114
|
+
this.simple = false;
|
|
4000
4115
|
|
|
4001
4116
|
// floaterConfig
|
|
4002
4117
|
this.placement = 'bottom-start';
|
|
@@ -4004,6 +4119,15 @@ class AuroDropdown extends i$2 {
|
|
|
4004
4119
|
this.noFlip = false;
|
|
4005
4120
|
this.autoPlacement = false;
|
|
4006
4121
|
|
|
4122
|
+
/**
|
|
4123
|
+
* @private
|
|
4124
|
+
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
4125
|
+
*/
|
|
4126
|
+
this.constructor.shadowRootOptions = {
|
|
4127
|
+
...i$2.shadowRootOptions,
|
|
4128
|
+
delegatesFocus: true,
|
|
4129
|
+
};
|
|
4130
|
+
|
|
4007
4131
|
/**
|
|
4008
4132
|
* @private
|
|
4009
4133
|
*/
|
|
@@ -4094,7 +4218,7 @@ class AuroDropdown extends i$2 {
|
|
|
4094
4218
|
/**
|
|
4095
4219
|
* If declared, applies a border around the trigger slot.
|
|
4096
4220
|
*/
|
|
4097
|
-
|
|
4221
|
+
simple: {
|
|
4098
4222
|
type: Boolean,
|
|
4099
4223
|
reflect: true
|
|
4100
4224
|
},
|
|
@@ -4142,13 +4266,20 @@ class AuroDropdown extends i$2 {
|
|
|
4142
4266
|
},
|
|
4143
4267
|
|
|
4144
4268
|
/**
|
|
4145
|
-
* If declared in combination with `
|
|
4269
|
+
* If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both.
|
|
4146
4270
|
*/
|
|
4147
4271
|
error: {
|
|
4148
4272
|
type: Boolean,
|
|
4149
4273
|
reflect: true
|
|
4150
4274
|
},
|
|
4151
4275
|
|
|
4276
|
+
/**
|
|
4277
|
+
* Contains the help text message for the current validity error.
|
|
4278
|
+
*/
|
|
4279
|
+
errorMessage: {
|
|
4280
|
+
type: String
|
|
4281
|
+
},
|
|
4282
|
+
|
|
4152
4283
|
/**
|
|
4153
4284
|
* If declared, the bib will display when focus is applied to the trigger.
|
|
4154
4285
|
*/
|
|
@@ -4283,11 +4414,6 @@ class AuroDropdown extends i$2 {
|
|
|
4283
4414
|
|
|
4284
4415
|
/**
|
|
4285
4416
|
* Position where the bib should appear relative to the trigger.
|
|
4286
|
-
* Accepted values:
|
|
4287
|
-
* "top" | "right" | "bottom" | "left" |
|
|
4288
|
-
* "bottom-start" | "top-start" | "top-end" |
|
|
4289
|
-
* "right-start" | "right-end" | "bottom-end" |
|
|
4290
|
-
* "left-start" | "left-end"
|
|
4291
4417
|
* @default bottom-start
|
|
4292
4418
|
*/
|
|
4293
4419
|
placement: {
|
|
@@ -4333,7 +4459,10 @@ class AuroDropdown extends i$2 {
|
|
|
4333
4459
|
return [
|
|
4334
4460
|
colorCss$1$2,
|
|
4335
4461
|
styleCss$1$2,
|
|
4336
|
-
tokensCss$1$1
|
|
4462
|
+
tokensCss$1$1,
|
|
4463
|
+
styleEmphasizedCss,
|
|
4464
|
+
styleSnowflakeCss,
|
|
4465
|
+
shapeSizeCss
|
|
4337
4466
|
];
|
|
4338
4467
|
}
|
|
4339
4468
|
|
|
@@ -4369,6 +4498,7 @@ class AuroDropdown extends i$2 {
|
|
|
4369
4498
|
}
|
|
4370
4499
|
|
|
4371
4500
|
updated(changedProperties) {
|
|
4501
|
+
super.updated(changedProperties);
|
|
4372
4502
|
this.floater.handleUpdate(changedProperties);
|
|
4373
4503
|
|
|
4374
4504
|
// Note: `disabled` is not a breakpoint (it is not a screen size),
|
|
@@ -4378,7 +4508,7 @@ class AuroDropdown extends i$2 {
|
|
|
4378
4508
|
}
|
|
4379
4509
|
|
|
4380
4510
|
// when trigger's content is changed without any attribute or node change,
|
|
4381
|
-
// `requestUpdate` needs to be called to update
|
|
4511
|
+
// `requestUpdate` needs to be called to update hasTriggerContent
|
|
4382
4512
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
4383
4513
|
this.handleTriggerContentSlotChange();
|
|
4384
4514
|
}
|
|
@@ -4439,6 +4569,24 @@ class AuroDropdown extends i$2 {
|
|
|
4439
4569
|
return inCustomSlot;
|
|
4440
4570
|
}
|
|
4441
4571
|
|
|
4572
|
+
/**
|
|
4573
|
+
* Function to support @focusin event.
|
|
4574
|
+
* @private
|
|
4575
|
+
* @return {void}
|
|
4576
|
+
*/
|
|
4577
|
+
handleFocusin() {
|
|
4578
|
+
this.hasFocus = true;
|
|
4579
|
+
}
|
|
4580
|
+
|
|
4581
|
+
/**
|
|
4582
|
+
* Function to support @focusout event.
|
|
4583
|
+
* @private
|
|
4584
|
+
* @return {void}
|
|
4585
|
+
*/
|
|
4586
|
+
handleFocusout() {
|
|
4587
|
+
this.hasFocus = false;
|
|
4588
|
+
}
|
|
4589
|
+
|
|
4442
4590
|
/**
|
|
4443
4591
|
* Determines if the element or any children are focusable.
|
|
4444
4592
|
* @private
|
|
@@ -4498,8 +4646,8 @@ class AuroDropdown extends i$2 {
|
|
|
4498
4646
|
}
|
|
4499
4647
|
|
|
4500
4648
|
/**
|
|
4501
|
-
* @private
|
|
4502
4649
|
* Creates and dispatches a duplicate focus event on the trigger element.
|
|
4650
|
+
* @private
|
|
4503
4651
|
* @param {Event} event - The original focus event.
|
|
4504
4652
|
*/
|
|
4505
4653
|
bindFocusEventToTrigger(event) {
|
|
@@ -4512,9 +4660,9 @@ class AuroDropdown extends i$2 {
|
|
|
4512
4660
|
}
|
|
4513
4661
|
|
|
4514
4662
|
/**
|
|
4515
|
-
* @private
|
|
4516
4663
|
* Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
|
|
4517
4664
|
* This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
|
|
4665
|
+
* @private
|
|
4518
4666
|
*/
|
|
4519
4667
|
setupTriggerFocusEventBinding() {
|
|
4520
4668
|
if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
|
|
@@ -4608,7 +4756,7 @@ class AuroDropdown extends i$2 {
|
|
|
4608
4756
|
// If there are children
|
|
4609
4757
|
if (triggerContentNodes) {
|
|
4610
4758
|
|
|
4611
|
-
// See if any of them are focusable
|
|
4759
|
+
// See if any of them are focusable elements
|
|
4612
4760
|
this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
|
|
4613
4761
|
|
|
4614
4762
|
// If any of them are focusable elements
|
|
@@ -4694,8 +4842,75 @@ class AuroDropdown extends i$2 {
|
|
|
4694
4842
|
this.labeled = nodesArr.length > 0;
|
|
4695
4843
|
}
|
|
4696
4844
|
|
|
4697
|
-
|
|
4698
|
-
|
|
4845
|
+
/**
|
|
4846
|
+
* Returns HTML for the common portion of the layouts.
|
|
4847
|
+
* @private
|
|
4848
|
+
* @param {Object} helpTextClasses - Classes to apply to the help text container.
|
|
4849
|
+
* @returns {html} - Returns HTML.
|
|
4850
|
+
*/
|
|
4851
|
+
renderBasicHtml(helpTextClasses) {
|
|
4852
|
+
return u`
|
|
4853
|
+
<div>
|
|
4854
|
+
<div
|
|
4855
|
+
id="trigger"
|
|
4856
|
+
class="${e(this.commonWrapperClasses)}" part="wrapper"
|
|
4857
|
+
tabindex="${this.tabIndex}"
|
|
4858
|
+
?showBorder="${this.showTriggerBorders}"
|
|
4859
|
+
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
4860
|
+
aria-expanded="${o(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
4861
|
+
aria-controls="${o(this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
4862
|
+
aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
4863
|
+
@focusin="${this.handleFocusin}"
|
|
4864
|
+
@blur="${this.handleFocusOut}">
|
|
4865
|
+
<div class="triggerContentWrapper">
|
|
4866
|
+
<label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
|
|
4867
|
+
<slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
|
|
4868
|
+
</label>
|
|
4869
|
+
<div class="triggerContent">
|
|
4870
|
+
<slot
|
|
4871
|
+
name="trigger"
|
|
4872
|
+
@slotchange="${this.handleTriggerContentSlotChange}"></slot>
|
|
4873
|
+
</div>
|
|
4874
|
+
</div>
|
|
4875
|
+
${this.chevron || this.common ? u`
|
|
4876
|
+
<div
|
|
4877
|
+
id="showStateIcon"
|
|
4878
|
+
part="chevron">
|
|
4879
|
+
<${this.iconTag}
|
|
4880
|
+
category="interface"
|
|
4881
|
+
name="chevron-down"
|
|
4882
|
+
?onDark="${this.onDark}"
|
|
4883
|
+
variant="${this.disabled ? 'disabled' : 'muted'}">
|
|
4884
|
+
>
|
|
4885
|
+
</${this.iconTag}>
|
|
4886
|
+
</div>
|
|
4887
|
+
` : undefined }
|
|
4888
|
+
</div>
|
|
4889
|
+
<div class="${e(helpTextClasses)}">
|
|
4890
|
+
<slot name="helpText"></slot>
|
|
4891
|
+
</div>
|
|
4892
|
+
<div class="slotContent">
|
|
4893
|
+
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
4894
|
+
</div>
|
|
4895
|
+
<div id="bibSizer" part="size"></div>
|
|
4896
|
+
<${this.dropdownBibTag}
|
|
4897
|
+
id="bib"
|
|
4898
|
+
?data-show="${this.isPopoverVisible}"
|
|
4899
|
+
?isfullscreen="${this.isBibFullscreen}"
|
|
4900
|
+
?common="${this.common}"
|
|
4901
|
+
?rounded="${this.common || this.rounded}"
|
|
4902
|
+
?inset="${this.common || this.inset}">
|
|
4903
|
+
</${this.dropdownBibTag}>
|
|
4904
|
+
</div>
|
|
4905
|
+
`;
|
|
4906
|
+
}
|
|
4907
|
+
|
|
4908
|
+
/**
|
|
4909
|
+
* Returns HTML for the classic layout. Does not support type="*".
|
|
4910
|
+
* @private
|
|
4911
|
+
* @returns {html} - Returns HTML for the classic layout.
|
|
4912
|
+
*/
|
|
4913
|
+
renderLayoutClassic() {
|
|
4699
4914
|
return u`
|
|
4700
4915
|
<div>
|
|
4701
4916
|
<div
|
|
@@ -4733,9 +4948,6 @@ class AuroDropdown extends i$2 {
|
|
|
4733
4948
|
</div>
|
|
4734
4949
|
` : undefined }
|
|
4735
4950
|
</div>
|
|
4736
|
-
<${this.helpTextTag} part="helpText" ?onDark=${this.onDark} ?error="${this.error}">
|
|
4737
|
-
<slot name="helpText"></slot>
|
|
4738
|
-
</${this.helpTextTag}>
|
|
4739
4951
|
<div class="slotContent">
|
|
4740
4952
|
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
4741
4953
|
</div>
|
|
@@ -4752,6 +4964,67 @@ class AuroDropdown extends i$2 {
|
|
|
4752
4964
|
</div>
|
|
4753
4965
|
`;
|
|
4754
4966
|
}
|
|
4967
|
+
|
|
4968
|
+
/**
|
|
4969
|
+
* Returns HTML for the snowflake layout. Does not support type="*".
|
|
4970
|
+
* @private
|
|
4971
|
+
* @returns {html} - Returns HTML for the snowflake layout.
|
|
4972
|
+
*/
|
|
4973
|
+
renderLayoutSnowflake() {
|
|
4974
|
+
const helpTextClasses = {
|
|
4975
|
+
'helpText': true,
|
|
4976
|
+
'leftIndent': true,
|
|
4977
|
+
'rightIndent': true
|
|
4978
|
+
};
|
|
4979
|
+
|
|
4980
|
+
return u`
|
|
4981
|
+
${this.renderBasicHtml(helpTextClasses)}
|
|
4982
|
+
`;
|
|
4983
|
+
}
|
|
4984
|
+
|
|
4985
|
+
/**
|
|
4986
|
+
* Returns HTML for the emphasized layout. Does not support type="*".
|
|
4987
|
+
* @private
|
|
4988
|
+
* @returns {html} - Returns HTML for the emphasized layout.
|
|
4989
|
+
*/
|
|
4990
|
+
renderLayoutEmphasized() {
|
|
4991
|
+
const helpTextClasses = {
|
|
4992
|
+
'helpText': true,
|
|
4993
|
+
'leftIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('right'),
|
|
4994
|
+
'rightIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('left')
|
|
4995
|
+
};
|
|
4996
|
+
|
|
4997
|
+
return u`
|
|
4998
|
+
${this.renderBasicHtml(helpTextClasses)}
|
|
4999
|
+
`;
|
|
5000
|
+
}
|
|
5001
|
+
|
|
5002
|
+
/**
|
|
5003
|
+
* Logic to determine the layout of the component.
|
|
5004
|
+
* @private
|
|
5005
|
+
* @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
|
|
5006
|
+
* @returns {HTMLCollection} - Returns the HTML for the layout.
|
|
5007
|
+
*/
|
|
5008
|
+
renderLayout(ForcedLayout) {
|
|
5009
|
+
const layout = ForcedLayout || this.layout;
|
|
5010
|
+
|
|
5011
|
+
switch (layout) {
|
|
5012
|
+
case 'emphasized':
|
|
5013
|
+
return this.renderLayoutEmphasized();
|
|
5014
|
+
case 'emphasized-left':
|
|
5015
|
+
return this.renderLayoutEmphasized();
|
|
5016
|
+
case 'emphasized-right':
|
|
5017
|
+
return this.renderLayoutEmphasized();
|
|
5018
|
+
case 'snowflake':
|
|
5019
|
+
return this.renderLayoutSnowflake();
|
|
5020
|
+
case 'snowflake-left':
|
|
5021
|
+
return this.renderLayoutSnowflake();
|
|
5022
|
+
case 'snowflake-right':
|
|
5023
|
+
return this.renderLayoutSnowflake();
|
|
5024
|
+
default:
|
|
5025
|
+
return this.renderLayoutClassic();
|
|
5026
|
+
}
|
|
5027
|
+
}
|
|
4755
5028
|
}
|
|
4756
5029
|
|
|
4757
5030
|
var dropdownVersion = '3.0.0';
|
|
@@ -5024,7 +5297,7 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
|
5024
5297
|
|
|
5025
5298
|
var tokensCss$2 = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
5026
5299
|
|
|
5027
|
-
var colorCss$3 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
|
|
5300
|
+
var colorCss$3 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
5028
5301
|
|
|
5029
5302
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
5030
5303
|
// See LICENSE in the project root for license information.
|
|
@@ -5193,7 +5466,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
5193
5466
|
}
|
|
5194
5467
|
};
|
|
5195
5468
|
|
|
5196
|
-
var iconVersion$1 = '8.0.
|
|
5469
|
+
var iconVersion$1 = '8.0.3';
|
|
5197
5470
|
|
|
5198
5471
|
var styleCss$4 = i$5`.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)}`;
|
|
5199
5472
|
|
|
@@ -5575,9 +5848,9 @@ i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline
|
|
|
5575
5848
|
|
|
5576
5849
|
i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
5577
5850
|
|
|
5578
|
-
i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
|
|
5851
|
+
i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
5579
5852
|
|
|
5580
|
-
var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{padding:0;pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}:host([multiselect]) [slot=trigger]{display:flex}:host([multiselect]) auro-menuoption:not(:first-child){margin-left:var(--ds-size-100)}#slotHolder{display:none}`;
|
|
5853
|
+
var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host .nativeSelectWrapper{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0, 0, 0, 0);opacity:.01}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{padding:0;pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}:host([multiselect]) [slot=trigger]{display:flex}:host([multiselect]) auro-menuoption:not(:first-child){margin-left:var(--ds-size-100)}#slotHolder{display:none}`;
|
|
5581
5854
|
|
|
5582
5855
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
5583
5856
|
// See LICENSE in the project root for license information.
|
|
@@ -5672,6 +5945,14 @@ class AuroSelect extends i$2 {
|
|
|
5672
5945
|
static get properties() {
|
|
5673
5946
|
return {
|
|
5674
5947
|
|
|
5948
|
+
/**
|
|
5949
|
+
* If declared, sets the autocomplete attribute for the select element.
|
|
5950
|
+
*/
|
|
5951
|
+
autocomplete: {
|
|
5952
|
+
type: String,
|
|
5953
|
+
reflect: true
|
|
5954
|
+
},
|
|
5955
|
+
|
|
5675
5956
|
/**
|
|
5676
5957
|
* If declared, bib's position will be automatically calculated where to appear.
|
|
5677
5958
|
* @default false
|
|
@@ -5689,6 +5970,14 @@ class AuroSelect extends i$2 {
|
|
|
5689
5970
|
reflect: true
|
|
5690
5971
|
},
|
|
5691
5972
|
|
|
5973
|
+
/**
|
|
5974
|
+
* The name for the select element.
|
|
5975
|
+
*/
|
|
5976
|
+
name: {
|
|
5977
|
+
type: String,
|
|
5978
|
+
reflect: true
|
|
5979
|
+
},
|
|
5980
|
+
|
|
5692
5981
|
/**
|
|
5693
5982
|
* If set, makes dropdown width match the size of the content, rather than the width of the trigger.
|
|
5694
5983
|
*/
|
|
@@ -6232,6 +6521,7 @@ class AuroSelect extends i$2 {
|
|
|
6232
6521
|
this.menu.value = undefined;
|
|
6233
6522
|
}
|
|
6234
6523
|
|
|
6524
|
+
this._updateNativeSelect();
|
|
6235
6525
|
this.validation.validate(this);
|
|
6236
6526
|
|
|
6237
6527
|
// LEGACY EVENT
|
|
@@ -6283,6 +6573,34 @@ class AuroSelect extends i$2 {
|
|
|
6283
6573
|
this.validation.validate(this, force);
|
|
6284
6574
|
}
|
|
6285
6575
|
|
|
6576
|
+
/**
|
|
6577
|
+
* Syncs the value from the native select element to the component's value.
|
|
6578
|
+
* @param {Event} event // The change event from the native select element.
|
|
6579
|
+
* @returns {void}
|
|
6580
|
+
* @private
|
|
6581
|
+
*/
|
|
6582
|
+
_handleNativeSelectChange(event) {
|
|
6583
|
+
const selectedOption = event.target.options[event.target.selectedIndex];
|
|
6584
|
+
const selectedValue = selectedOption.value;
|
|
6585
|
+
const [currentValue] = this.value || [];
|
|
6586
|
+
this.value = !currentValue || currentValue !== selectedValue ? [selectedValue] : this.value;
|
|
6587
|
+
}
|
|
6588
|
+
|
|
6589
|
+
/**
|
|
6590
|
+
* Updates the native select element's value based on the component's value.
|
|
6591
|
+
* @returns {void}
|
|
6592
|
+
* @private
|
|
6593
|
+
*/
|
|
6594
|
+
_updateNativeSelect() {
|
|
6595
|
+
const nativeSelect = this.shadowRoot.querySelector('select');
|
|
6596
|
+
if (!nativeSelect) {
|
|
6597
|
+
return;
|
|
6598
|
+
}
|
|
6599
|
+
const [value] = this.value || [];
|
|
6600
|
+
nativeSelect.value = value || '';
|
|
6601
|
+
}
|
|
6602
|
+
|
|
6603
|
+
|
|
6286
6604
|
// When using auroElement, use the following attribute and function when hiding content from screen readers.
|
|
6287
6605
|
// aria-hidden="${this.hideAudible(this.hiddenAudible)}"
|
|
6288
6606
|
|
|
@@ -6349,6 +6667,29 @@ class AuroSelect extends i$2 {
|
|
|
6349
6667
|
}
|
|
6350
6668
|
</p>
|
|
6351
6669
|
</${this.dropdownTag}>
|
|
6670
|
+
<div class="nativeSelectWrapper">
|
|
6671
|
+
<select
|
|
6672
|
+
tabindex="-1"
|
|
6673
|
+
id="${`native-select-${this.id || this.uniqueId}`}"
|
|
6674
|
+
name="${this.name || ''}"
|
|
6675
|
+
?disabled="${this.disabled}"
|
|
6676
|
+
?required="${this.required}"
|
|
6677
|
+
aria-hidden="true"
|
|
6678
|
+
autocomplete="${o(this.autocomplete)}"
|
|
6679
|
+
@change="${this._handleNativeSelectChange}">
|
|
6680
|
+
<option value="" ?selected="${!this.value}"></option>
|
|
6681
|
+
${this.options.map((option) => {
|
|
6682
|
+
const optionValue = option.value || option.textContent;
|
|
6683
|
+
return u`
|
|
6684
|
+
<option
|
|
6685
|
+
value="${optionValue}"
|
|
6686
|
+
?selected="${this.value === optionValue}">
|
|
6687
|
+
${option.textContent}
|
|
6688
|
+
</option>
|
|
6689
|
+
`;
|
|
6690
|
+
})}
|
|
6691
|
+
</select>
|
|
6692
|
+
</div>
|
|
6352
6693
|
<!-- Help text and error message template -->
|
|
6353
6694
|
</div>
|
|
6354
6695
|
`;
|
|
@@ -7361,7 +7702,7 @@ class BaseIcon extends AuroElement {
|
|
|
7361
7702
|
|
|
7362
7703
|
var tokensCss = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
7363
7704
|
|
|
7364
|
-
var colorCss = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
|
|
7705
|
+
var colorCss = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
7365
7706
|
|
|
7366
7707
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7367
7708
|
// See LICENSE in the project root for license information.
|
|
@@ -7530,7 +7871,7 @@ class AuroIcon extends BaseIcon {
|
|
|
7530
7871
|
}
|
|
7531
7872
|
}
|
|
7532
7873
|
|
|
7533
|
-
var iconVersion = '8.0.
|
|
7874
|
+
var iconVersion = '8.0.3';
|
|
7534
7875
|
|
|
7535
7876
|
var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
|
|
7536
7877
|
|