@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
|
@@ -1524,16 +1524,21 @@ const flip$1 = function (options) {
|
|
|
1524
1524
|
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
1525
1525
|
const nextPlacement = placements[nextIndex];
|
|
1526
1526
|
if (nextPlacement) {
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1527
|
+
var _overflowsData$;
|
|
1528
|
+
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
1529
|
+
const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
|
|
1530
|
+
if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
|
|
1531
|
+
// Try next placement and re-run the lifecycle.
|
|
1532
|
+
return {
|
|
1533
|
+
data: {
|
|
1534
|
+
index: nextIndex,
|
|
1535
|
+
overflows: overflowsData
|
|
1536
|
+
},
|
|
1537
|
+
reset: {
|
|
1538
|
+
placement: nextPlacement
|
|
1539
|
+
}
|
|
1540
|
+
};
|
|
1541
|
+
}
|
|
1537
1542
|
}
|
|
1538
1543
|
|
|
1539
1544
|
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
@@ -2185,6 +2190,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
2185
2190
|
scrollTop: 0
|
|
2186
2191
|
};
|
|
2187
2192
|
const offsets = createCoords(0);
|
|
2193
|
+
|
|
2194
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
2195
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
2196
|
+
function setLeftRTLScrollbarOffset() {
|
|
2197
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
2198
|
+
}
|
|
2188
2199
|
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
2189
2200
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
2190
2201
|
scroll = getNodeScroll(offsetParent);
|
|
@@ -2194,11 +2205,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
2194
2205
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
2195
2206
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
2196
2207
|
} else if (documentElement) {
|
|
2197
|
-
|
|
2198
|
-
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
2199
|
-
offsets.x = getWindowScrollBarX(documentElement);
|
|
2208
|
+
setLeftRTLScrollbarOffset();
|
|
2200
2209
|
}
|
|
2201
2210
|
}
|
|
2211
|
+
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
2212
|
+
setLeftRTLScrollbarOffset();
|
|
2213
|
+
}
|
|
2202
2214
|
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
2203
2215
|
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
2204
2216
|
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
@@ -2375,7 +2387,7 @@ function observeMove(element, onMove) {
|
|
|
2375
2387
|
// Handle <iframe>s
|
|
2376
2388
|
root: root.ownerDocument
|
|
2377
2389
|
});
|
|
2378
|
-
} catch (
|
|
2390
|
+
} catch (_e) {
|
|
2379
2391
|
io = new IntersectionObserver(handleObserve, options);
|
|
2380
2392
|
}
|
|
2381
2393
|
io.observe(element);
|
|
@@ -3188,7 +3200,7 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
|
|
|
3188
3200
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
3189
3201
|
*/
|
|
3190
3202
|
|
|
3191
|
-
let AuroElement$
|
|
3203
|
+
let AuroElement$1$1 = class AuroElement extends i$2 {
|
|
3192
3204
|
|
|
3193
3205
|
// function to define props used within the scope of this component
|
|
3194
3206
|
static get properties() {
|
|
@@ -3256,7 +3268,7 @@ var styleCss$3$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}
|
|
|
3256
3268
|
*/
|
|
3257
3269
|
|
|
3258
3270
|
// build the component class
|
|
3259
|
-
let BaseIcon$2 = class BaseIcon extends AuroElement$
|
|
3271
|
+
let BaseIcon$2 = class BaseIcon extends AuroElement$1$1 {
|
|
3260
3272
|
constructor() {
|
|
3261
3273
|
super();
|
|
3262
3274
|
this.onDark = false;
|
|
@@ -3330,7 +3342,7 @@ let BaseIcon$2 = class BaseIcon extends AuroElement$2 {
|
|
|
3330
3342
|
|
|
3331
3343
|
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)}`;
|
|
3332
3344
|
|
|
3333
|
-
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)}`;
|
|
3345
|
+
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)}`;
|
|
3334
3346
|
|
|
3335
3347
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3336
3348
|
// See LICENSE in the project root for license information.
|
|
@@ -3505,7 +3517,7 @@ var styleCss$2$2 = i$5`:host{position:absolute;z-index:var(--depth-tooltip, 400)
|
|
|
3505
3517
|
|
|
3506
3518
|
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)}`;
|
|
3507
3519
|
|
|
3508
|
-
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)}`;
|
|
3520
|
+
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)}`;
|
|
3509
3521
|
|
|
3510
3522
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3511
3523
|
// See LICENSE in the project root for license information.
|
|
@@ -3628,9 +3640,15 @@ class AuroDropdownBib extends i$2 {
|
|
|
3628
3640
|
|
|
3629
3641
|
var dropdownVersion$1 = '3.0.0';
|
|
3630
3642
|
|
|
3631
|
-
var
|
|
3643
|
+
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}`;
|
|
3644
|
+
|
|
3645
|
+
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)}`;
|
|
3632
3646
|
|
|
3633
|
-
var colorCss$1$2 = i$5
|
|
3647
|
+
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)}`;
|
|
3648
|
+
|
|
3649
|
+
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)}`;
|
|
3650
|
+
|
|
3651
|
+
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)}`;
|
|
3634
3652
|
|
|
3635
3653
|
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)}`;
|
|
3636
3654
|
|
|
@@ -3840,6 +3858,98 @@ class AuroHelpText extends i$2 {
|
|
|
3840
3858
|
|
|
3841
3859
|
var helpTextVersion = '1.0.0';
|
|
3842
3860
|
|
|
3861
|
+
let AuroElement$2 = class AuroElement extends i$2 {
|
|
3862
|
+
static get properties() {
|
|
3863
|
+
return {
|
|
3864
|
+
|
|
3865
|
+
/**
|
|
3866
|
+
* Defines the language of an element.
|
|
3867
|
+
* @default {'default'}
|
|
3868
|
+
*/
|
|
3869
|
+
layout: {
|
|
3870
|
+
type: String,
|
|
3871
|
+
attribute: "layout",
|
|
3872
|
+
reflect: true
|
|
3873
|
+
},
|
|
3874
|
+
|
|
3875
|
+
shape: {
|
|
3876
|
+
type: String,
|
|
3877
|
+
attribute: "shape",
|
|
3878
|
+
reflect: true
|
|
3879
|
+
},
|
|
3880
|
+
|
|
3881
|
+
size: {
|
|
3882
|
+
type: String,
|
|
3883
|
+
attribute: "size",
|
|
3884
|
+
reflect: true
|
|
3885
|
+
},
|
|
3886
|
+
|
|
3887
|
+
onDark: {
|
|
3888
|
+
type: Boolean,
|
|
3889
|
+
attribute: "ondark",
|
|
3890
|
+
reflect: true
|
|
3891
|
+
}
|
|
3892
|
+
};
|
|
3893
|
+
}
|
|
3894
|
+
|
|
3895
|
+
resetShapeClasses() {
|
|
3896
|
+
if (this.shape && this.size) {
|
|
3897
|
+
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
3898
|
+
|
|
3899
|
+
if (wrapper) {
|
|
3900
|
+
wrapper.classList.forEach((className) => {
|
|
3901
|
+
if (className.startsWith('shape-')) {
|
|
3902
|
+
wrapper.classList.remove(className);
|
|
3903
|
+
}
|
|
3904
|
+
});
|
|
3905
|
+
|
|
3906
|
+
wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
3907
|
+
}
|
|
3908
|
+
}
|
|
3909
|
+
}
|
|
3910
|
+
|
|
3911
|
+
resetLayoutClasses() {
|
|
3912
|
+
if (this.layout) {
|
|
3913
|
+
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
3914
|
+
|
|
3915
|
+
if (wrapper) {
|
|
3916
|
+
wrapper.classList.forEach((className) => {
|
|
3917
|
+
if (className.startsWith('layout-')) {
|
|
3918
|
+
wrapper.classList.remove(className);
|
|
3919
|
+
}
|
|
3920
|
+
});
|
|
3921
|
+
|
|
3922
|
+
wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
3923
|
+
}
|
|
3924
|
+
}
|
|
3925
|
+
}
|
|
3926
|
+
|
|
3927
|
+
updateComponentArchitecture() {
|
|
3928
|
+
this.resetLayoutClasses();
|
|
3929
|
+
this.resetShapeClasses();
|
|
3930
|
+
}
|
|
3931
|
+
|
|
3932
|
+
updated(changedProperties) {
|
|
3933
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
3934
|
+
this.updateComponentArchitecture();
|
|
3935
|
+
}
|
|
3936
|
+
}
|
|
3937
|
+
|
|
3938
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
3939
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
3940
|
+
render() {
|
|
3941
|
+
try {
|
|
3942
|
+
return this.renderLayout();
|
|
3943
|
+
} catch (error) {
|
|
3944
|
+
// failed to get the defined layout
|
|
3945
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
3946
|
+
|
|
3947
|
+
// fallback to the default layout
|
|
3948
|
+
return this.getLayout('default');
|
|
3949
|
+
}
|
|
3950
|
+
}
|
|
3951
|
+
};
|
|
3952
|
+
|
|
3843
3953
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3844
3954
|
// See LICENSE in the project root for license information.
|
|
3845
3955
|
|
|
@@ -3857,7 +3967,7 @@ var helpTextVersion = '1.0.0';
|
|
|
3857
3967
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
3858
3968
|
* @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
|
|
3859
3969
|
*/
|
|
3860
|
-
class AuroDropdown extends
|
|
3970
|
+
class AuroDropdown extends AuroElement$2 {
|
|
3861
3971
|
constructor() {
|
|
3862
3972
|
super();
|
|
3863
3973
|
|
|
@@ -3866,26 +3976,29 @@ class AuroDropdown extends i$2 {
|
|
|
3866
3976
|
this.matchWidth = false;
|
|
3867
3977
|
this.noHideOnThisFocusLoss = false;
|
|
3868
3978
|
|
|
3979
|
+
this.errorMessage = ''; // TODO!
|
|
3980
|
+
|
|
3981
|
+
// Layout Config
|
|
3982
|
+
this.layout = 'default';
|
|
3983
|
+
this.shape = 'rounded';
|
|
3984
|
+
this.size = 'xl';
|
|
3985
|
+
|
|
3869
3986
|
this.privateDefaults();
|
|
3987
|
+
}
|
|
3870
3988
|
|
|
3871
|
-
|
|
3872
|
-
|
|
3873
|
-
|
|
3874
|
-
*/
|
|
3875
|
-
this.constructor.shadowRootOptions = {
|
|
3876
|
-
...i$2.shadowRootOptions,
|
|
3877
|
-
delegatesFocus: true,
|
|
3989
|
+
get commonLabelClasses() {
|
|
3990
|
+
return {
|
|
3991
|
+
// 'withValue': this.value && this.value.length > 0
|
|
3878
3992
|
};
|
|
3993
|
+
}
|
|
3879
3994
|
|
|
3880
|
-
|
|
3881
|
-
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
*/
|
|
3888
|
-
this.showTriggerBorders = true;
|
|
3995
|
+
get commonWrapperClasses() {
|
|
3996
|
+
return {
|
|
3997
|
+
'trigger': true,
|
|
3998
|
+
'wrapper': true,
|
|
3999
|
+
'hasFocus': this.hasFocus,
|
|
4000
|
+
'simple': this.simple
|
|
4001
|
+
};
|
|
3889
4002
|
}
|
|
3890
4003
|
|
|
3891
4004
|
/**
|
|
@@ -3893,7 +4006,6 @@ class AuroDropdown extends i$2 {
|
|
|
3893
4006
|
* @returns {void} Internal defaults.
|
|
3894
4007
|
*/
|
|
3895
4008
|
privateDefaults() {
|
|
3896
|
-
this.bordered = false;
|
|
3897
4009
|
this.chevron = false;
|
|
3898
4010
|
this.disabled = false;
|
|
3899
4011
|
this.error = false;
|
|
@@ -3903,8 +4015,11 @@ class AuroDropdown extends i$2 {
|
|
|
3903
4015
|
this.noToggle = false;
|
|
3904
4016
|
this.a11yAutocomplete = 'none';
|
|
3905
4017
|
this.labeled = true;
|
|
3906
|
-
this.a11yRole = '
|
|
4018
|
+
this.a11yRole = 'button';
|
|
3907
4019
|
this.onDark = false;
|
|
4020
|
+
this.showTriggerBorders = true;
|
|
4021
|
+
this.triggerContentFocusable = false;
|
|
4022
|
+
this.simple = false;
|
|
3908
4023
|
|
|
3909
4024
|
// floaterConfig
|
|
3910
4025
|
this.placement = 'bottom-start';
|
|
@@ -3912,6 +4027,15 @@ class AuroDropdown extends i$2 {
|
|
|
3912
4027
|
this.noFlip = false;
|
|
3913
4028
|
this.autoPlacement = false;
|
|
3914
4029
|
|
|
4030
|
+
/**
|
|
4031
|
+
* @private
|
|
4032
|
+
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
4033
|
+
*/
|
|
4034
|
+
this.constructor.shadowRootOptions = {
|
|
4035
|
+
...i$2.shadowRootOptions,
|
|
4036
|
+
delegatesFocus: true,
|
|
4037
|
+
};
|
|
4038
|
+
|
|
3915
4039
|
/**
|
|
3916
4040
|
* @private
|
|
3917
4041
|
*/
|
|
@@ -4002,7 +4126,7 @@ class AuroDropdown extends i$2 {
|
|
|
4002
4126
|
/**
|
|
4003
4127
|
* If declared, applies a border around the trigger slot.
|
|
4004
4128
|
*/
|
|
4005
|
-
|
|
4129
|
+
simple: {
|
|
4006
4130
|
type: Boolean,
|
|
4007
4131
|
reflect: true
|
|
4008
4132
|
},
|
|
@@ -4050,13 +4174,20 @@ class AuroDropdown extends i$2 {
|
|
|
4050
4174
|
},
|
|
4051
4175
|
|
|
4052
4176
|
/**
|
|
4053
|
-
* If declared in combination with `
|
|
4177
|
+
* If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both.
|
|
4054
4178
|
*/
|
|
4055
4179
|
error: {
|
|
4056
4180
|
type: Boolean,
|
|
4057
4181
|
reflect: true
|
|
4058
4182
|
},
|
|
4059
4183
|
|
|
4184
|
+
/**
|
|
4185
|
+
* Contains the help text message for the current validity error.
|
|
4186
|
+
*/
|
|
4187
|
+
errorMessage: {
|
|
4188
|
+
type: String
|
|
4189
|
+
},
|
|
4190
|
+
|
|
4060
4191
|
/**
|
|
4061
4192
|
* If declared, the bib will display when focus is applied to the trigger.
|
|
4062
4193
|
*/
|
|
@@ -4191,11 +4322,6 @@ class AuroDropdown extends i$2 {
|
|
|
4191
4322
|
|
|
4192
4323
|
/**
|
|
4193
4324
|
* Position where the bib should appear relative to the trigger.
|
|
4194
|
-
* Accepted values:
|
|
4195
|
-
* "top" | "right" | "bottom" | "left" |
|
|
4196
|
-
* "bottom-start" | "top-start" | "top-end" |
|
|
4197
|
-
* "right-start" | "right-end" | "bottom-end" |
|
|
4198
|
-
* "left-start" | "left-end"
|
|
4199
4325
|
* @default bottom-start
|
|
4200
4326
|
*/
|
|
4201
4327
|
placement: {
|
|
@@ -4241,7 +4367,10 @@ class AuroDropdown extends i$2 {
|
|
|
4241
4367
|
return [
|
|
4242
4368
|
colorCss$1$2,
|
|
4243
4369
|
styleCss$1$2,
|
|
4244
|
-
tokensCss$1$1
|
|
4370
|
+
tokensCss$1$1,
|
|
4371
|
+
styleEmphasizedCss,
|
|
4372
|
+
styleSnowflakeCss,
|
|
4373
|
+
shapeSizeCss
|
|
4245
4374
|
];
|
|
4246
4375
|
}
|
|
4247
4376
|
|
|
@@ -4277,6 +4406,7 @@ class AuroDropdown extends i$2 {
|
|
|
4277
4406
|
}
|
|
4278
4407
|
|
|
4279
4408
|
updated(changedProperties) {
|
|
4409
|
+
super.updated(changedProperties);
|
|
4280
4410
|
this.floater.handleUpdate(changedProperties);
|
|
4281
4411
|
|
|
4282
4412
|
// Note: `disabled` is not a breakpoint (it is not a screen size),
|
|
@@ -4286,7 +4416,7 @@ class AuroDropdown extends i$2 {
|
|
|
4286
4416
|
}
|
|
4287
4417
|
|
|
4288
4418
|
// when trigger's content is changed without any attribute or node change,
|
|
4289
|
-
// `requestUpdate` needs to be called to update
|
|
4419
|
+
// `requestUpdate` needs to be called to update hasTriggerContent
|
|
4290
4420
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
4291
4421
|
this.handleTriggerContentSlotChange();
|
|
4292
4422
|
}
|
|
@@ -4347,6 +4477,24 @@ class AuroDropdown extends i$2 {
|
|
|
4347
4477
|
return inCustomSlot;
|
|
4348
4478
|
}
|
|
4349
4479
|
|
|
4480
|
+
/**
|
|
4481
|
+
* Function to support @focusin event.
|
|
4482
|
+
* @private
|
|
4483
|
+
* @return {void}
|
|
4484
|
+
*/
|
|
4485
|
+
handleFocusin() {
|
|
4486
|
+
this.hasFocus = true;
|
|
4487
|
+
}
|
|
4488
|
+
|
|
4489
|
+
/**
|
|
4490
|
+
* Function to support @focusout event.
|
|
4491
|
+
* @private
|
|
4492
|
+
* @return {void}
|
|
4493
|
+
*/
|
|
4494
|
+
handleFocusout() {
|
|
4495
|
+
this.hasFocus = false;
|
|
4496
|
+
}
|
|
4497
|
+
|
|
4350
4498
|
/**
|
|
4351
4499
|
* Determines if the element or any children are focusable.
|
|
4352
4500
|
* @private
|
|
@@ -4406,8 +4554,8 @@ class AuroDropdown extends i$2 {
|
|
|
4406
4554
|
}
|
|
4407
4555
|
|
|
4408
4556
|
/**
|
|
4409
|
-
* @private
|
|
4410
4557
|
* Creates and dispatches a duplicate focus event on the trigger element.
|
|
4558
|
+
* @private
|
|
4411
4559
|
* @param {Event} event - The original focus event.
|
|
4412
4560
|
*/
|
|
4413
4561
|
bindFocusEventToTrigger(event) {
|
|
@@ -4420,9 +4568,9 @@ class AuroDropdown extends i$2 {
|
|
|
4420
4568
|
}
|
|
4421
4569
|
|
|
4422
4570
|
/**
|
|
4423
|
-
* @private
|
|
4424
4571
|
* Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
|
|
4425
4572
|
* This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
|
|
4573
|
+
* @private
|
|
4426
4574
|
*/
|
|
4427
4575
|
setupTriggerFocusEventBinding() {
|
|
4428
4576
|
if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
|
|
@@ -4516,7 +4664,7 @@ class AuroDropdown extends i$2 {
|
|
|
4516
4664
|
// If there are children
|
|
4517
4665
|
if (triggerContentNodes) {
|
|
4518
4666
|
|
|
4519
|
-
// See if any of them are focusable
|
|
4667
|
+
// See if any of them are focusable elements
|
|
4520
4668
|
this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
|
|
4521
4669
|
|
|
4522
4670
|
// If any of them are focusable elements
|
|
@@ -4602,8 +4750,75 @@ class AuroDropdown extends i$2 {
|
|
|
4602
4750
|
this.labeled = nodesArr.length > 0;
|
|
4603
4751
|
}
|
|
4604
4752
|
|
|
4605
|
-
|
|
4606
|
-
|
|
4753
|
+
/**
|
|
4754
|
+
* Returns HTML for the common portion of the layouts.
|
|
4755
|
+
* @private
|
|
4756
|
+
* @param {Object} helpTextClasses - Classes to apply to the help text container.
|
|
4757
|
+
* @returns {html} - Returns HTML.
|
|
4758
|
+
*/
|
|
4759
|
+
renderBasicHtml(helpTextClasses) {
|
|
4760
|
+
return u`
|
|
4761
|
+
<div>
|
|
4762
|
+
<div
|
|
4763
|
+
id="trigger"
|
|
4764
|
+
class="${e(this.commonWrapperClasses)}" part="wrapper"
|
|
4765
|
+
tabindex="${this.tabIndex}"
|
|
4766
|
+
?showBorder="${this.showTriggerBorders}"
|
|
4767
|
+
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
4768
|
+
aria-expanded="${o(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
4769
|
+
aria-controls="${o(this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
4770
|
+
aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
4771
|
+
@focusin="${this.handleFocusin}"
|
|
4772
|
+
@blur="${this.handleFocusOut}">
|
|
4773
|
+
<div class="triggerContentWrapper">
|
|
4774
|
+
<label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
|
|
4775
|
+
<slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
|
|
4776
|
+
</label>
|
|
4777
|
+
<div class="triggerContent">
|
|
4778
|
+
<slot
|
|
4779
|
+
name="trigger"
|
|
4780
|
+
@slotchange="${this.handleTriggerContentSlotChange}"></slot>
|
|
4781
|
+
</div>
|
|
4782
|
+
</div>
|
|
4783
|
+
${this.chevron || this.common ? u`
|
|
4784
|
+
<div
|
|
4785
|
+
id="showStateIcon"
|
|
4786
|
+
part="chevron">
|
|
4787
|
+
<${this.iconTag}
|
|
4788
|
+
category="interface"
|
|
4789
|
+
name="chevron-down"
|
|
4790
|
+
?onDark="${this.onDark}"
|
|
4791
|
+
variant="${this.disabled ? 'disabled' : 'muted'}">
|
|
4792
|
+
>
|
|
4793
|
+
</${this.iconTag}>
|
|
4794
|
+
</div>
|
|
4795
|
+
` : undefined }
|
|
4796
|
+
</div>
|
|
4797
|
+
<div class="${e(helpTextClasses)}">
|
|
4798
|
+
<slot name="helpText"></slot>
|
|
4799
|
+
</div>
|
|
4800
|
+
<div class="slotContent">
|
|
4801
|
+
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
4802
|
+
</div>
|
|
4803
|
+
<div id="bibSizer" part="size"></div>
|
|
4804
|
+
<${this.dropdownBibTag}
|
|
4805
|
+
id="bib"
|
|
4806
|
+
?data-show="${this.isPopoverVisible}"
|
|
4807
|
+
?isfullscreen="${this.isBibFullscreen}"
|
|
4808
|
+
?common="${this.common}"
|
|
4809
|
+
?rounded="${this.common || this.rounded}"
|
|
4810
|
+
?inset="${this.common || this.inset}">
|
|
4811
|
+
</${this.dropdownBibTag}>
|
|
4812
|
+
</div>
|
|
4813
|
+
`;
|
|
4814
|
+
}
|
|
4815
|
+
|
|
4816
|
+
/**
|
|
4817
|
+
* Returns HTML for the classic layout. Does not support type="*".
|
|
4818
|
+
* @private
|
|
4819
|
+
* @returns {html} - Returns HTML for the classic layout.
|
|
4820
|
+
*/
|
|
4821
|
+
renderLayoutClassic() {
|
|
4607
4822
|
return u`
|
|
4608
4823
|
<div>
|
|
4609
4824
|
<div
|
|
@@ -4641,9 +4856,6 @@ class AuroDropdown extends i$2 {
|
|
|
4641
4856
|
</div>
|
|
4642
4857
|
` : undefined }
|
|
4643
4858
|
</div>
|
|
4644
|
-
<${this.helpTextTag} part="helpText" ?onDark=${this.onDark} ?error="${this.error}">
|
|
4645
|
-
<slot name="helpText"></slot>
|
|
4646
|
-
</${this.helpTextTag}>
|
|
4647
4859
|
<div class="slotContent">
|
|
4648
4860
|
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
4649
4861
|
</div>
|
|
@@ -4660,6 +4872,67 @@ class AuroDropdown extends i$2 {
|
|
|
4660
4872
|
</div>
|
|
4661
4873
|
`;
|
|
4662
4874
|
}
|
|
4875
|
+
|
|
4876
|
+
/**
|
|
4877
|
+
* Returns HTML for the snowflake layout. Does not support type="*".
|
|
4878
|
+
* @private
|
|
4879
|
+
* @returns {html} - Returns HTML for the snowflake layout.
|
|
4880
|
+
*/
|
|
4881
|
+
renderLayoutSnowflake() {
|
|
4882
|
+
const helpTextClasses = {
|
|
4883
|
+
'helpText': true,
|
|
4884
|
+
'leftIndent': true,
|
|
4885
|
+
'rightIndent': true
|
|
4886
|
+
};
|
|
4887
|
+
|
|
4888
|
+
return u`
|
|
4889
|
+
${this.renderBasicHtml(helpTextClasses)}
|
|
4890
|
+
`;
|
|
4891
|
+
}
|
|
4892
|
+
|
|
4893
|
+
/**
|
|
4894
|
+
* Returns HTML for the emphasized layout. Does not support type="*".
|
|
4895
|
+
* @private
|
|
4896
|
+
* @returns {html} - Returns HTML for the emphasized layout.
|
|
4897
|
+
*/
|
|
4898
|
+
renderLayoutEmphasized() {
|
|
4899
|
+
const helpTextClasses = {
|
|
4900
|
+
'helpText': true,
|
|
4901
|
+
'leftIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('right'),
|
|
4902
|
+
'rightIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('left')
|
|
4903
|
+
};
|
|
4904
|
+
|
|
4905
|
+
return u`
|
|
4906
|
+
${this.renderBasicHtml(helpTextClasses)}
|
|
4907
|
+
`;
|
|
4908
|
+
}
|
|
4909
|
+
|
|
4910
|
+
/**
|
|
4911
|
+
* Logic to determine the layout of the component.
|
|
4912
|
+
* @private
|
|
4913
|
+
* @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
|
|
4914
|
+
* @returns {HTMLCollection} - Returns the HTML for the layout.
|
|
4915
|
+
*/
|
|
4916
|
+
renderLayout(ForcedLayout) {
|
|
4917
|
+
const layout = ForcedLayout || this.layout;
|
|
4918
|
+
|
|
4919
|
+
switch (layout) {
|
|
4920
|
+
case 'emphasized':
|
|
4921
|
+
return this.renderLayoutEmphasized();
|
|
4922
|
+
case 'emphasized-left':
|
|
4923
|
+
return this.renderLayoutEmphasized();
|
|
4924
|
+
case 'emphasized-right':
|
|
4925
|
+
return this.renderLayoutEmphasized();
|
|
4926
|
+
case 'snowflake':
|
|
4927
|
+
return this.renderLayoutSnowflake();
|
|
4928
|
+
case 'snowflake-left':
|
|
4929
|
+
return this.renderLayoutSnowflake();
|
|
4930
|
+
case 'snowflake-right':
|
|
4931
|
+
return this.renderLayoutSnowflake();
|
|
4932
|
+
default:
|
|
4933
|
+
return this.renderLayoutClassic();
|
|
4934
|
+
}
|
|
4935
|
+
}
|
|
4663
4936
|
}
|
|
4664
4937
|
|
|
4665
4938
|
var dropdownVersion = '3.0.0';
|
|
@@ -4932,7 +5205,7 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
|
|
|
4932
5205
|
|
|
4933
5206
|
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)}`;
|
|
4934
5207
|
|
|
4935
|
-
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)}`;
|
|
5208
|
+
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)}`;
|
|
4936
5209
|
|
|
4937
5210
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4938
5211
|
// See LICENSE in the project root for license information.
|
|
@@ -5101,7 +5374,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
5101
5374
|
}
|
|
5102
5375
|
};
|
|
5103
5376
|
|
|
5104
|
-
var iconVersion$1 = '8.0.
|
|
5377
|
+
var iconVersion$1 = '8.0.3';
|
|
5105
5378
|
|
|
5106
5379
|
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)}`;
|
|
5107
5380
|
|
|
@@ -5483,9 +5756,9 @@ i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline
|
|
|
5483
5756
|
|
|
5484
5757
|
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)}`;
|
|
5485
5758
|
|
|
5486
|
-
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)}`;
|
|
5759
|
+
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)}`;
|
|
5487
5760
|
|
|
5488
|
-
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}`;
|
|
5761
|
+
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}`;
|
|
5489
5762
|
|
|
5490
5763
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
5491
5764
|
// See LICENSE in the project root for license information.
|
|
@@ -5580,6 +5853,14 @@ class AuroSelect extends i$2 {
|
|
|
5580
5853
|
static get properties() {
|
|
5581
5854
|
return {
|
|
5582
5855
|
|
|
5856
|
+
/**
|
|
5857
|
+
* If declared, sets the autocomplete attribute for the select element.
|
|
5858
|
+
*/
|
|
5859
|
+
autocomplete: {
|
|
5860
|
+
type: String,
|
|
5861
|
+
reflect: true
|
|
5862
|
+
},
|
|
5863
|
+
|
|
5583
5864
|
/**
|
|
5584
5865
|
* If declared, bib's position will be automatically calculated where to appear.
|
|
5585
5866
|
* @default false
|
|
@@ -5597,6 +5878,14 @@ class AuroSelect extends i$2 {
|
|
|
5597
5878
|
reflect: true
|
|
5598
5879
|
},
|
|
5599
5880
|
|
|
5881
|
+
/**
|
|
5882
|
+
* The name for the select element.
|
|
5883
|
+
*/
|
|
5884
|
+
name: {
|
|
5885
|
+
type: String,
|
|
5886
|
+
reflect: true
|
|
5887
|
+
},
|
|
5888
|
+
|
|
5600
5889
|
/**
|
|
5601
5890
|
* If set, makes dropdown width match the size of the content, rather than the width of the trigger.
|
|
5602
5891
|
*/
|
|
@@ -6140,6 +6429,7 @@ class AuroSelect extends i$2 {
|
|
|
6140
6429
|
this.menu.value = undefined;
|
|
6141
6430
|
}
|
|
6142
6431
|
|
|
6432
|
+
this._updateNativeSelect();
|
|
6143
6433
|
this.validation.validate(this);
|
|
6144
6434
|
|
|
6145
6435
|
// LEGACY EVENT
|
|
@@ -6191,6 +6481,34 @@ class AuroSelect extends i$2 {
|
|
|
6191
6481
|
this.validation.validate(this, force);
|
|
6192
6482
|
}
|
|
6193
6483
|
|
|
6484
|
+
/**
|
|
6485
|
+
* Syncs the value from the native select element to the component's value.
|
|
6486
|
+
* @param {Event} event // The change event from the native select element.
|
|
6487
|
+
* @returns {void}
|
|
6488
|
+
* @private
|
|
6489
|
+
*/
|
|
6490
|
+
_handleNativeSelectChange(event) {
|
|
6491
|
+
const selectedOption = event.target.options[event.target.selectedIndex];
|
|
6492
|
+
const selectedValue = selectedOption.value;
|
|
6493
|
+
const [currentValue] = this.value || [];
|
|
6494
|
+
this.value = !currentValue || currentValue !== selectedValue ? [selectedValue] : this.value;
|
|
6495
|
+
}
|
|
6496
|
+
|
|
6497
|
+
/**
|
|
6498
|
+
* Updates the native select element's value based on the component's value.
|
|
6499
|
+
* @returns {void}
|
|
6500
|
+
* @private
|
|
6501
|
+
*/
|
|
6502
|
+
_updateNativeSelect() {
|
|
6503
|
+
const nativeSelect = this.shadowRoot.querySelector('select');
|
|
6504
|
+
if (!nativeSelect) {
|
|
6505
|
+
return;
|
|
6506
|
+
}
|
|
6507
|
+
const [value] = this.value || [];
|
|
6508
|
+
nativeSelect.value = value || '';
|
|
6509
|
+
}
|
|
6510
|
+
|
|
6511
|
+
|
|
6194
6512
|
// When using auroElement, use the following attribute and function when hiding content from screen readers.
|
|
6195
6513
|
// aria-hidden="${this.hideAudible(this.hiddenAudible)}"
|
|
6196
6514
|
|
|
@@ -6257,6 +6575,29 @@ class AuroSelect extends i$2 {
|
|
|
6257
6575
|
}
|
|
6258
6576
|
</p>
|
|
6259
6577
|
</${this.dropdownTag}>
|
|
6578
|
+
<div class="nativeSelectWrapper">
|
|
6579
|
+
<select
|
|
6580
|
+
tabindex="-1"
|
|
6581
|
+
id="${`native-select-${this.id || this.uniqueId}`}"
|
|
6582
|
+
name="${this.name || ''}"
|
|
6583
|
+
?disabled="${this.disabled}"
|
|
6584
|
+
?required="${this.required}"
|
|
6585
|
+
aria-hidden="true"
|
|
6586
|
+
autocomplete="${o(this.autocomplete)}"
|
|
6587
|
+
@change="${this._handleNativeSelectChange}">
|
|
6588
|
+
<option value="" ?selected="${!this.value}"></option>
|
|
6589
|
+
${this.options.map((option) => {
|
|
6590
|
+
const optionValue = option.value || option.textContent;
|
|
6591
|
+
return u`
|
|
6592
|
+
<option
|
|
6593
|
+
value="${optionValue}"
|
|
6594
|
+
?selected="${this.value === optionValue}">
|
|
6595
|
+
${option.textContent}
|
|
6596
|
+
</option>
|
|
6597
|
+
`;
|
|
6598
|
+
})}
|
|
6599
|
+
</select>
|
|
6600
|
+
</div>
|
|
6260
6601
|
<!-- Help text and error message template -->
|
|
6261
6602
|
</div>
|
|
6262
6603
|
`;
|
|
@@ -7269,7 +7610,7 @@ class BaseIcon extends AuroElement {
|
|
|
7269
7610
|
|
|
7270
7611
|
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)}`;
|
|
7271
7612
|
|
|
7272
|
-
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)}`;
|
|
7613
|
+
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)}`;
|
|
7273
7614
|
|
|
7274
7615
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7275
7616
|
// See LICENSE in the project root for license information.
|
|
@@ -7438,7 +7779,7 @@ class AuroIcon extends BaseIcon {
|
|
|
7438
7779
|
}
|
|
7439
7780
|
}
|
|
7440
7781
|
|
|
7441
|
-
var iconVersion = '8.0.
|
|
7782
|
+
var iconVersion = '8.0.3';
|
|
7442
7783
|
|
|
7443
7784
|
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>"};
|
|
7444
7785
|
|