@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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
|
|
2
|
-
import { LitElement, css, html } from 'lit';
|
|
3
2
|
import { classMap } from 'lit/directives/class-map.js';
|
|
3
|
+
import { LitElement, css, html } from 'lit';
|
|
4
4
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
5
|
|
|
6
6
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
@@ -593,16 +593,21 @@ const flip$1 = function (options) {
|
|
|
593
593
|
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
594
594
|
const nextPlacement = placements[nextIndex];
|
|
595
595
|
if (nextPlacement) {
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
596
|
+
var _overflowsData$;
|
|
597
|
+
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
598
|
+
const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
|
|
599
|
+
if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
|
|
600
|
+
// Try next placement and re-run the lifecycle.
|
|
601
|
+
return {
|
|
602
|
+
data: {
|
|
603
|
+
index: nextIndex,
|
|
604
|
+
overflows: overflowsData
|
|
605
|
+
},
|
|
606
|
+
reset: {
|
|
607
|
+
placement: nextPlacement
|
|
608
|
+
}
|
|
609
|
+
};
|
|
610
|
+
}
|
|
606
611
|
}
|
|
607
612
|
|
|
608
613
|
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
@@ -1254,6 +1259,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
1254
1259
|
scrollTop: 0
|
|
1255
1260
|
};
|
|
1256
1261
|
const offsets = createCoords(0);
|
|
1262
|
+
|
|
1263
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
1264
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
1265
|
+
function setLeftRTLScrollbarOffset() {
|
|
1266
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
1267
|
+
}
|
|
1257
1268
|
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
1258
1269
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
1259
1270
|
scroll = getNodeScroll(offsetParent);
|
|
@@ -1263,11 +1274,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
1263
1274
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
1264
1275
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
1265
1276
|
} else if (documentElement) {
|
|
1266
|
-
|
|
1267
|
-
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
1268
|
-
offsets.x = getWindowScrollBarX(documentElement);
|
|
1277
|
+
setLeftRTLScrollbarOffset();
|
|
1269
1278
|
}
|
|
1270
1279
|
}
|
|
1280
|
+
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
1281
|
+
setLeftRTLScrollbarOffset();
|
|
1282
|
+
}
|
|
1271
1283
|
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
1272
1284
|
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
1273
1285
|
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
@@ -1444,7 +1456,7 @@ function observeMove(element, onMove) {
|
|
|
1444
1456
|
// Handle <iframe>s
|
|
1445
1457
|
root: root.ownerDocument
|
|
1446
1458
|
});
|
|
1447
|
-
} catch (
|
|
1459
|
+
} catch (_e) {
|
|
1448
1460
|
io = new IntersectionObserver(handleObserve, options);
|
|
1449
1461
|
}
|
|
1450
1462
|
io.observe(element);
|
|
@@ -2257,7 +2269,7 @@ class AuroDependencyVersioning {
|
|
|
2257
2269
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
2258
2270
|
*/
|
|
2259
2271
|
|
|
2260
|
-
class AuroElement extends LitElement {
|
|
2272
|
+
let AuroElement$1 = class AuroElement extends LitElement {
|
|
2261
2273
|
|
|
2262
2274
|
// function to define props used within the scope of this component
|
|
2263
2275
|
static get properties() {
|
|
@@ -2281,7 +2293,7 @@ class AuroElement extends LitElement {
|
|
|
2281
2293
|
|
|
2282
2294
|
return 'false'
|
|
2283
2295
|
}
|
|
2284
|
-
}
|
|
2296
|
+
};
|
|
2285
2297
|
|
|
2286
2298
|
var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
|
|
2287
2299
|
|
|
@@ -2325,7 +2337,7 @@ var styleCss$3 = css`:focus:not(:focus-visible){outline:3px solid transparent}.u
|
|
|
2325
2337
|
*/
|
|
2326
2338
|
|
|
2327
2339
|
// build the component class
|
|
2328
|
-
class BaseIcon extends AuroElement {
|
|
2340
|
+
class BaseIcon extends AuroElement$1 {
|
|
2329
2341
|
constructor() {
|
|
2330
2342
|
super();
|
|
2331
2343
|
this.onDark = false;
|
|
@@ -2399,7 +2411,7 @@ class BaseIcon extends AuroElement {
|
|
|
2399
2411
|
|
|
2400
2412
|
var tokensCss$2 = css`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
|
|
2401
2413
|
|
|
2402
|
-
var colorCss$3 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
|
|
2414
|
+
var colorCss$3 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
2403
2415
|
|
|
2404
2416
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2405
2417
|
// See LICENSE in the project root for license information.
|
|
@@ -2574,7 +2586,7 @@ var styleCss$2 = css`:host{position:absolute;z-index:var(--depth-tooltip, 400);d
|
|
|
2574
2586
|
|
|
2575
2587
|
var colorCss$2 = css`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
2576
2588
|
|
|
2577
|
-
var tokensCss$1 = css`: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)}`;
|
|
2589
|
+
var tokensCss$1 = css`: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)}`;
|
|
2578
2590
|
|
|
2579
2591
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2580
2592
|
// See LICENSE in the project root for license information.
|
|
@@ -2697,9 +2709,15 @@ class AuroDropdownBib extends LitElement {
|
|
|
2697
2709
|
|
|
2698
2710
|
var dropdownVersion = '3.0.0';
|
|
2699
2711
|
|
|
2700
|
-
var
|
|
2712
|
+
var shapeSizeCss = css`.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}`;
|
|
2713
|
+
|
|
2714
|
+
var styleCss$1 = css`: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)}`;
|
|
2715
|
+
|
|
2716
|
+
var colorCss$1 = css`: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)}`;
|
|
2717
|
+
|
|
2718
|
+
var styleEmphasizedCss = css`: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)}`;
|
|
2701
2719
|
|
|
2702
|
-
var
|
|
2720
|
+
var styleSnowflakeCss = css`: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)}`;
|
|
2703
2721
|
|
|
2704
2722
|
var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
2705
2723
|
|
|
@@ -2909,6 +2927,98 @@ class AuroHelpText extends LitElement {
|
|
|
2909
2927
|
|
|
2910
2928
|
var helpTextVersion = '1.0.0';
|
|
2911
2929
|
|
|
2930
|
+
class AuroElement extends LitElement {
|
|
2931
|
+
static get properties() {
|
|
2932
|
+
return {
|
|
2933
|
+
|
|
2934
|
+
/**
|
|
2935
|
+
* Defines the language of an element.
|
|
2936
|
+
* @default {'default'}
|
|
2937
|
+
*/
|
|
2938
|
+
layout: {
|
|
2939
|
+
type: String,
|
|
2940
|
+
attribute: "layout",
|
|
2941
|
+
reflect: true
|
|
2942
|
+
},
|
|
2943
|
+
|
|
2944
|
+
shape: {
|
|
2945
|
+
type: String,
|
|
2946
|
+
attribute: "shape",
|
|
2947
|
+
reflect: true
|
|
2948
|
+
},
|
|
2949
|
+
|
|
2950
|
+
size: {
|
|
2951
|
+
type: String,
|
|
2952
|
+
attribute: "size",
|
|
2953
|
+
reflect: true
|
|
2954
|
+
},
|
|
2955
|
+
|
|
2956
|
+
onDark: {
|
|
2957
|
+
type: Boolean,
|
|
2958
|
+
attribute: "ondark",
|
|
2959
|
+
reflect: true
|
|
2960
|
+
}
|
|
2961
|
+
};
|
|
2962
|
+
}
|
|
2963
|
+
|
|
2964
|
+
resetShapeClasses() {
|
|
2965
|
+
if (this.shape && this.size) {
|
|
2966
|
+
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
2967
|
+
|
|
2968
|
+
if (wrapper) {
|
|
2969
|
+
wrapper.classList.forEach((className) => {
|
|
2970
|
+
if (className.startsWith('shape-')) {
|
|
2971
|
+
wrapper.classList.remove(className);
|
|
2972
|
+
}
|
|
2973
|
+
});
|
|
2974
|
+
|
|
2975
|
+
wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
2976
|
+
}
|
|
2977
|
+
}
|
|
2978
|
+
}
|
|
2979
|
+
|
|
2980
|
+
resetLayoutClasses() {
|
|
2981
|
+
if (this.layout) {
|
|
2982
|
+
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
2983
|
+
|
|
2984
|
+
if (wrapper) {
|
|
2985
|
+
wrapper.classList.forEach((className) => {
|
|
2986
|
+
if (className.startsWith('layout-')) {
|
|
2987
|
+
wrapper.classList.remove(className);
|
|
2988
|
+
}
|
|
2989
|
+
});
|
|
2990
|
+
|
|
2991
|
+
wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
2992
|
+
}
|
|
2993
|
+
}
|
|
2994
|
+
}
|
|
2995
|
+
|
|
2996
|
+
updateComponentArchitecture() {
|
|
2997
|
+
this.resetLayoutClasses();
|
|
2998
|
+
this.resetShapeClasses();
|
|
2999
|
+
}
|
|
3000
|
+
|
|
3001
|
+
updated(changedProperties) {
|
|
3002
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
3003
|
+
this.updateComponentArchitecture();
|
|
3004
|
+
}
|
|
3005
|
+
}
|
|
3006
|
+
|
|
3007
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
3008
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
3009
|
+
render() {
|
|
3010
|
+
try {
|
|
3011
|
+
return this.renderLayout();
|
|
3012
|
+
} catch (error) {
|
|
3013
|
+
// failed to get the defined layout
|
|
3014
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
3015
|
+
|
|
3016
|
+
// fallback to the default layout
|
|
3017
|
+
return this.getLayout('default');
|
|
3018
|
+
}
|
|
3019
|
+
}
|
|
3020
|
+
}
|
|
3021
|
+
|
|
2912
3022
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2913
3023
|
// See LICENSE in the project root for license information.
|
|
2914
3024
|
|
|
@@ -2926,7 +3036,7 @@ var helpTextVersion = '1.0.0';
|
|
|
2926
3036
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
2927
3037
|
* @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
|
|
2928
3038
|
*/
|
|
2929
|
-
class AuroDropdown extends
|
|
3039
|
+
class AuroDropdown extends AuroElement {
|
|
2930
3040
|
constructor() {
|
|
2931
3041
|
super();
|
|
2932
3042
|
|
|
@@ -2935,26 +3045,29 @@ class AuroDropdown extends LitElement {
|
|
|
2935
3045
|
this.matchWidth = false;
|
|
2936
3046
|
this.noHideOnThisFocusLoss = false;
|
|
2937
3047
|
|
|
3048
|
+
this.errorMessage = ''; // TODO!
|
|
3049
|
+
|
|
3050
|
+
// Layout Config
|
|
3051
|
+
this.layout = 'default';
|
|
3052
|
+
this.shape = 'rounded';
|
|
3053
|
+
this.size = 'xl';
|
|
3054
|
+
|
|
2938
3055
|
this.privateDefaults();
|
|
3056
|
+
}
|
|
2939
3057
|
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
*/
|
|
2944
|
-
this.constructor.shadowRootOptions = {
|
|
2945
|
-
...LitElement.shadowRootOptions,
|
|
2946
|
-
delegatesFocus: true,
|
|
3058
|
+
get commonLabelClasses() {
|
|
3059
|
+
return {
|
|
3060
|
+
// 'withValue': this.value && this.value.length > 0
|
|
2947
3061
|
};
|
|
3062
|
+
}
|
|
2948
3063
|
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
*/
|
|
2957
|
-
this.showTriggerBorders = true;
|
|
3064
|
+
get commonWrapperClasses() {
|
|
3065
|
+
return {
|
|
3066
|
+
'trigger': true,
|
|
3067
|
+
'wrapper': true,
|
|
3068
|
+
'hasFocus': this.hasFocus,
|
|
3069
|
+
'simple': this.simple
|
|
3070
|
+
};
|
|
2958
3071
|
}
|
|
2959
3072
|
|
|
2960
3073
|
/**
|
|
@@ -2962,7 +3075,6 @@ class AuroDropdown extends LitElement {
|
|
|
2962
3075
|
* @returns {void} Internal defaults.
|
|
2963
3076
|
*/
|
|
2964
3077
|
privateDefaults() {
|
|
2965
|
-
this.bordered = false;
|
|
2966
3078
|
this.chevron = false;
|
|
2967
3079
|
this.disabled = false;
|
|
2968
3080
|
this.error = false;
|
|
@@ -2972,8 +3084,11 @@ class AuroDropdown extends LitElement {
|
|
|
2972
3084
|
this.noToggle = false;
|
|
2973
3085
|
this.a11yAutocomplete = 'none';
|
|
2974
3086
|
this.labeled = true;
|
|
2975
|
-
this.a11yRole = '
|
|
3087
|
+
this.a11yRole = 'button';
|
|
2976
3088
|
this.onDark = false;
|
|
3089
|
+
this.showTriggerBorders = true;
|
|
3090
|
+
this.triggerContentFocusable = false;
|
|
3091
|
+
this.simple = false;
|
|
2977
3092
|
|
|
2978
3093
|
// floaterConfig
|
|
2979
3094
|
this.placement = 'bottom-start';
|
|
@@ -2981,6 +3096,15 @@ class AuroDropdown extends LitElement {
|
|
|
2981
3096
|
this.noFlip = false;
|
|
2982
3097
|
this.autoPlacement = false;
|
|
2983
3098
|
|
|
3099
|
+
/**
|
|
3100
|
+
* @private
|
|
3101
|
+
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
3102
|
+
*/
|
|
3103
|
+
this.constructor.shadowRootOptions = {
|
|
3104
|
+
...LitElement.shadowRootOptions,
|
|
3105
|
+
delegatesFocus: true,
|
|
3106
|
+
};
|
|
3107
|
+
|
|
2984
3108
|
/**
|
|
2985
3109
|
* @private
|
|
2986
3110
|
*/
|
|
@@ -3071,7 +3195,7 @@ class AuroDropdown extends LitElement {
|
|
|
3071
3195
|
/**
|
|
3072
3196
|
* If declared, applies a border around the trigger slot.
|
|
3073
3197
|
*/
|
|
3074
|
-
|
|
3198
|
+
simple: {
|
|
3075
3199
|
type: Boolean,
|
|
3076
3200
|
reflect: true
|
|
3077
3201
|
},
|
|
@@ -3119,13 +3243,20 @@ class AuroDropdown extends LitElement {
|
|
|
3119
3243
|
},
|
|
3120
3244
|
|
|
3121
3245
|
/**
|
|
3122
|
-
* If declared in combination with `
|
|
3246
|
+
* If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both.
|
|
3123
3247
|
*/
|
|
3124
3248
|
error: {
|
|
3125
3249
|
type: Boolean,
|
|
3126
3250
|
reflect: true
|
|
3127
3251
|
},
|
|
3128
3252
|
|
|
3253
|
+
/**
|
|
3254
|
+
* Contains the help text message for the current validity error.
|
|
3255
|
+
*/
|
|
3256
|
+
errorMessage: {
|
|
3257
|
+
type: String
|
|
3258
|
+
},
|
|
3259
|
+
|
|
3129
3260
|
/**
|
|
3130
3261
|
* If declared, the bib will display when focus is applied to the trigger.
|
|
3131
3262
|
*/
|
|
@@ -3260,11 +3391,6 @@ class AuroDropdown extends LitElement {
|
|
|
3260
3391
|
|
|
3261
3392
|
/**
|
|
3262
3393
|
* Position where the bib should appear relative to the trigger.
|
|
3263
|
-
* Accepted values:
|
|
3264
|
-
* "top" | "right" | "bottom" | "left" |
|
|
3265
|
-
* "bottom-start" | "top-start" | "top-end" |
|
|
3266
|
-
* "right-start" | "right-end" | "bottom-end" |
|
|
3267
|
-
* "left-start" | "left-end"
|
|
3268
3394
|
* @default bottom-start
|
|
3269
3395
|
*/
|
|
3270
3396
|
placement: {
|
|
@@ -3310,7 +3436,10 @@ class AuroDropdown extends LitElement {
|
|
|
3310
3436
|
return [
|
|
3311
3437
|
colorCss$1,
|
|
3312
3438
|
styleCss$1,
|
|
3313
|
-
tokensCss$1
|
|
3439
|
+
tokensCss$1,
|
|
3440
|
+
styleEmphasizedCss,
|
|
3441
|
+
styleSnowflakeCss,
|
|
3442
|
+
shapeSizeCss
|
|
3314
3443
|
];
|
|
3315
3444
|
}
|
|
3316
3445
|
|
|
@@ -3346,6 +3475,7 @@ class AuroDropdown extends LitElement {
|
|
|
3346
3475
|
}
|
|
3347
3476
|
|
|
3348
3477
|
updated(changedProperties) {
|
|
3478
|
+
super.updated(changedProperties);
|
|
3349
3479
|
this.floater.handleUpdate(changedProperties);
|
|
3350
3480
|
|
|
3351
3481
|
// Note: `disabled` is not a breakpoint (it is not a screen size),
|
|
@@ -3355,7 +3485,7 @@ class AuroDropdown extends LitElement {
|
|
|
3355
3485
|
}
|
|
3356
3486
|
|
|
3357
3487
|
// when trigger's content is changed without any attribute or node change,
|
|
3358
|
-
// `requestUpdate` needs to be called to update
|
|
3488
|
+
// `requestUpdate` needs to be called to update hasTriggerContent
|
|
3359
3489
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
3360
3490
|
this.handleTriggerContentSlotChange();
|
|
3361
3491
|
}
|
|
@@ -3416,6 +3546,24 @@ class AuroDropdown extends LitElement {
|
|
|
3416
3546
|
return inCustomSlot;
|
|
3417
3547
|
}
|
|
3418
3548
|
|
|
3549
|
+
/**
|
|
3550
|
+
* Function to support @focusin event.
|
|
3551
|
+
* @private
|
|
3552
|
+
* @return {void}
|
|
3553
|
+
*/
|
|
3554
|
+
handleFocusin() {
|
|
3555
|
+
this.hasFocus = true;
|
|
3556
|
+
}
|
|
3557
|
+
|
|
3558
|
+
/**
|
|
3559
|
+
* Function to support @focusout event.
|
|
3560
|
+
* @private
|
|
3561
|
+
* @return {void}
|
|
3562
|
+
*/
|
|
3563
|
+
handleFocusout() {
|
|
3564
|
+
this.hasFocus = false;
|
|
3565
|
+
}
|
|
3566
|
+
|
|
3419
3567
|
/**
|
|
3420
3568
|
* Determines if the element or any children are focusable.
|
|
3421
3569
|
* @private
|
|
@@ -3475,8 +3623,8 @@ class AuroDropdown extends LitElement {
|
|
|
3475
3623
|
}
|
|
3476
3624
|
|
|
3477
3625
|
/**
|
|
3478
|
-
* @private
|
|
3479
3626
|
* Creates and dispatches a duplicate focus event on the trigger element.
|
|
3627
|
+
* @private
|
|
3480
3628
|
* @param {Event} event - The original focus event.
|
|
3481
3629
|
*/
|
|
3482
3630
|
bindFocusEventToTrigger(event) {
|
|
@@ -3489,9 +3637,9 @@ class AuroDropdown extends LitElement {
|
|
|
3489
3637
|
}
|
|
3490
3638
|
|
|
3491
3639
|
/**
|
|
3492
|
-
* @private
|
|
3493
3640
|
* Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
|
|
3494
3641
|
* This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
|
|
3642
|
+
* @private
|
|
3495
3643
|
*/
|
|
3496
3644
|
setupTriggerFocusEventBinding() {
|
|
3497
3645
|
if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
|
|
@@ -3585,7 +3733,7 @@ class AuroDropdown extends LitElement {
|
|
|
3585
3733
|
// If there are children
|
|
3586
3734
|
if (triggerContentNodes) {
|
|
3587
3735
|
|
|
3588
|
-
// See if any of them are focusable
|
|
3736
|
+
// See if any of them are focusable elements
|
|
3589
3737
|
this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
|
|
3590
3738
|
|
|
3591
3739
|
// If any of them are focusable elements
|
|
@@ -3671,8 +3819,75 @@ class AuroDropdown extends LitElement {
|
|
|
3671
3819
|
this.labeled = nodesArr.length > 0;
|
|
3672
3820
|
}
|
|
3673
3821
|
|
|
3674
|
-
|
|
3675
|
-
|
|
3822
|
+
/**
|
|
3823
|
+
* Returns HTML for the common portion of the layouts.
|
|
3824
|
+
* @private
|
|
3825
|
+
* @param {Object} helpTextClasses - Classes to apply to the help text container.
|
|
3826
|
+
* @returns {html} - Returns HTML.
|
|
3827
|
+
*/
|
|
3828
|
+
renderBasicHtml(helpTextClasses) {
|
|
3829
|
+
return html$1`
|
|
3830
|
+
<div>
|
|
3831
|
+
<div
|
|
3832
|
+
id="trigger"
|
|
3833
|
+
class="${classMap(this.commonWrapperClasses)}" part="wrapper"
|
|
3834
|
+
tabindex="${this.tabIndex}"
|
|
3835
|
+
?showBorder="${this.showTriggerBorders}"
|
|
3836
|
+
role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
3837
|
+
aria-expanded="${ifDefined(this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
3838
|
+
aria-controls="${ifDefined(this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
3839
|
+
aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
3840
|
+
@focusin="${this.handleFocusin}"
|
|
3841
|
+
@blur="${this.handleFocusOut}">
|
|
3842
|
+
<div class="triggerContentWrapper">
|
|
3843
|
+
<label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
|
|
3844
|
+
<slot name="label" @slotchange="${this.handleLabelSlotChange}"></slot>
|
|
3845
|
+
</label>
|
|
3846
|
+
<div class="triggerContent">
|
|
3847
|
+
<slot
|
|
3848
|
+
name="trigger"
|
|
3849
|
+
@slotchange="${this.handleTriggerContentSlotChange}"></slot>
|
|
3850
|
+
</div>
|
|
3851
|
+
</div>
|
|
3852
|
+
${this.chevron || this.common ? html$1`
|
|
3853
|
+
<div
|
|
3854
|
+
id="showStateIcon"
|
|
3855
|
+
part="chevron">
|
|
3856
|
+
<${this.iconTag}
|
|
3857
|
+
category="interface"
|
|
3858
|
+
name="chevron-down"
|
|
3859
|
+
?onDark="${this.onDark}"
|
|
3860
|
+
variant="${this.disabled ? 'disabled' : 'muted'}">
|
|
3861
|
+
>
|
|
3862
|
+
</${this.iconTag}>
|
|
3863
|
+
</div>
|
|
3864
|
+
` : undefined }
|
|
3865
|
+
</div>
|
|
3866
|
+
<div class="${classMap(helpTextClasses)}">
|
|
3867
|
+
<slot name="helpText"></slot>
|
|
3868
|
+
</div>
|
|
3869
|
+
<div class="slotContent">
|
|
3870
|
+
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
3871
|
+
</div>
|
|
3872
|
+
<div id="bibSizer" part="size"></div>
|
|
3873
|
+
<${this.dropdownBibTag}
|
|
3874
|
+
id="bib"
|
|
3875
|
+
?data-show="${this.isPopoverVisible}"
|
|
3876
|
+
?isfullscreen="${this.isBibFullscreen}"
|
|
3877
|
+
?common="${this.common}"
|
|
3878
|
+
?rounded="${this.common || this.rounded}"
|
|
3879
|
+
?inset="${this.common || this.inset}">
|
|
3880
|
+
</${this.dropdownBibTag}>
|
|
3881
|
+
</div>
|
|
3882
|
+
`;
|
|
3883
|
+
}
|
|
3884
|
+
|
|
3885
|
+
/**
|
|
3886
|
+
* Returns HTML for the classic layout. Does not support type="*".
|
|
3887
|
+
* @private
|
|
3888
|
+
* @returns {html} - Returns HTML for the classic layout.
|
|
3889
|
+
*/
|
|
3890
|
+
renderLayoutClassic() {
|
|
3676
3891
|
return html$1`
|
|
3677
3892
|
<div>
|
|
3678
3893
|
<div
|
|
@@ -3710,9 +3925,6 @@ class AuroDropdown extends LitElement {
|
|
|
3710
3925
|
</div>
|
|
3711
3926
|
` : undefined }
|
|
3712
3927
|
</div>
|
|
3713
|
-
<${this.helpTextTag} part="helpText" ?onDark=${this.onDark} ?error="${this.error}">
|
|
3714
|
-
<slot name="helpText"></slot>
|
|
3715
|
-
</${this.helpTextTag}>
|
|
3716
3928
|
<div class="slotContent">
|
|
3717
3929
|
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
3718
3930
|
</div>
|
|
@@ -3729,6 +3941,67 @@ class AuroDropdown extends LitElement {
|
|
|
3729
3941
|
</div>
|
|
3730
3942
|
`;
|
|
3731
3943
|
}
|
|
3944
|
+
|
|
3945
|
+
/**
|
|
3946
|
+
* Returns HTML for the snowflake layout. Does not support type="*".
|
|
3947
|
+
* @private
|
|
3948
|
+
* @returns {html} - Returns HTML for the snowflake layout.
|
|
3949
|
+
*/
|
|
3950
|
+
renderLayoutSnowflake() {
|
|
3951
|
+
const helpTextClasses = {
|
|
3952
|
+
'helpText': true,
|
|
3953
|
+
'leftIndent': true,
|
|
3954
|
+
'rightIndent': true
|
|
3955
|
+
};
|
|
3956
|
+
|
|
3957
|
+
return html$1`
|
|
3958
|
+
${this.renderBasicHtml(helpTextClasses)}
|
|
3959
|
+
`;
|
|
3960
|
+
}
|
|
3961
|
+
|
|
3962
|
+
/**
|
|
3963
|
+
* Returns HTML for the emphasized layout. Does not support type="*".
|
|
3964
|
+
* @private
|
|
3965
|
+
* @returns {html} - Returns HTML for the emphasized layout.
|
|
3966
|
+
*/
|
|
3967
|
+
renderLayoutEmphasized() {
|
|
3968
|
+
const helpTextClasses = {
|
|
3969
|
+
'helpText': true,
|
|
3970
|
+
'leftIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('right'),
|
|
3971
|
+
'rightIndent': this.shape.toLowerCase().includes('pill') && !this.shape.toLowerCase().includes('left')
|
|
3972
|
+
};
|
|
3973
|
+
|
|
3974
|
+
return html$1`
|
|
3975
|
+
${this.renderBasicHtml(helpTextClasses)}
|
|
3976
|
+
`;
|
|
3977
|
+
}
|
|
3978
|
+
|
|
3979
|
+
/**
|
|
3980
|
+
* Logic to determine the layout of the component.
|
|
3981
|
+
* @private
|
|
3982
|
+
* @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
|
|
3983
|
+
* @returns {HTMLCollection} - Returns the HTML for the layout.
|
|
3984
|
+
*/
|
|
3985
|
+
renderLayout(ForcedLayout) {
|
|
3986
|
+
const layout = ForcedLayout || this.layout;
|
|
3987
|
+
|
|
3988
|
+
switch (layout) {
|
|
3989
|
+
case 'emphasized':
|
|
3990
|
+
return this.renderLayoutEmphasized();
|
|
3991
|
+
case 'emphasized-left':
|
|
3992
|
+
return this.renderLayoutEmphasized();
|
|
3993
|
+
case 'emphasized-right':
|
|
3994
|
+
return this.renderLayoutEmphasized();
|
|
3995
|
+
case 'snowflake':
|
|
3996
|
+
return this.renderLayoutSnowflake();
|
|
3997
|
+
case 'snowflake-left':
|
|
3998
|
+
return this.renderLayoutSnowflake();
|
|
3999
|
+
case 'snowflake-right':
|
|
4000
|
+
return this.renderLayoutSnowflake();
|
|
4001
|
+
default:
|
|
4002
|
+
return this.renderLayoutClassic();
|
|
4003
|
+
}
|
|
4004
|
+
}
|
|
3732
4005
|
}
|
|
3733
4006
|
|
|
3734
4007
|
AuroDropdown.register();
|