@aurodesignsystem-dev/auro-formkit 0.0.0-pr801.2 → 0.0.0-pr805.0
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/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/api.min.js +13 -131
- package/components/combobox/demo/index.min.js +13 -131
- package/components/combobox/dist/index.js +12 -130
- package/components/combobox/dist/registered.js +12 -130
- package/components/counter/demo/api.min.js +3 -60
- package/components/counter/demo/index.min.js +3 -60
- package/components/counter/dist/index.js +3 -60
- package/components/counter/dist/registered.js +3 -60
- package/components/datepicker/demo/api.min.js +80 -163
- package/components/datepicker/demo/index.min.js +80 -163
- package/components/datepicker/dist/auro-datepicker.d.ts +14 -1
- package/components/datepicker/dist/index.js +80 -163
- package/components/datepicker/dist/registered.js +80 -163
- package/components/dropdown/demo/api.min.js +3 -60
- package/components/dropdown/demo/index.min.js +3 -60
- package/components/dropdown/dist/auro-dropdown.d.ts +0 -7
- package/components/dropdown/dist/index.js +3 -60
- package/components/dropdown/dist/registered.js +3 -60
- package/components/input/demo/api.min.js +9 -70
- package/components/input/demo/index.min.js +9 -70
- package/components/input/dist/auro-input.d.ts +0 -24
- package/components/input/dist/index.js +9 -70
- package/components/input/dist/registered.js +9 -70
- package/components/menu/demo/api.min.js +1 -1
- package/components/menu/demo/index.min.js +1 -1
- package/components/menu/dist/index.js +1 -1
- package/components/menu/dist/registered.js +1 -1
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/api.min.js +8 -90
- package/components/select/demo/index.min.js +8 -90
- package/components/select/dist/auro-select.d.ts +0 -12
- package/components/select/dist/index.js +7 -89
- package/components/select/dist/registered.js +7 -89
- package/package.json +2 -2
|
@@ -4599,6 +4599,7 @@ let AuroElement$3 = class AuroElement extends i$2 {
|
|
|
4599
4599
|
// See LICENSE in the project root for license information.
|
|
4600
4600
|
|
|
4601
4601
|
|
|
4602
|
+
|
|
4602
4603
|
/*
|
|
4603
4604
|
* @slot - Default slot for the popover content.
|
|
4604
4605
|
* @slot helpText - Defines the content of the helpText.
|
|
@@ -5181,64 +5182,6 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
5181
5182
|
this.hasFocus = false;
|
|
5182
5183
|
}
|
|
5183
5184
|
|
|
5184
|
-
/**
|
|
5185
|
-
* Determines if the element or any children are focusable.
|
|
5186
|
-
* @private
|
|
5187
|
-
* @param {HTMLElement} element - Element to check.
|
|
5188
|
-
* @returns {Boolean} - True if the element or any children are focusable.
|
|
5189
|
-
*/
|
|
5190
|
-
containsFocusableElement(element) {
|
|
5191
|
-
this.showTriggerBorders = true;
|
|
5192
|
-
|
|
5193
|
-
const nodes = [
|
|
5194
|
-
element,
|
|
5195
|
-
...element.children
|
|
5196
|
-
];
|
|
5197
|
-
|
|
5198
|
-
const focusableElements = [
|
|
5199
|
-
'a',
|
|
5200
|
-
'auro-hyperlink',
|
|
5201
|
-
'button',
|
|
5202
|
-
'auro-button',
|
|
5203
|
-
'input',
|
|
5204
|
-
'auro-input',
|
|
5205
|
-
];
|
|
5206
|
-
|
|
5207
|
-
const focusableElementsThatNeedBorders = ['auro-input'];
|
|
5208
|
-
|
|
5209
|
-
const result = nodes.some((node) => {
|
|
5210
|
-
const tagName = node.tagName.toLowerCase();
|
|
5211
|
-
|
|
5212
|
-
if (node.tabIndex > -1) {
|
|
5213
|
-
return true;
|
|
5214
|
-
}
|
|
5215
|
-
|
|
5216
|
-
if (focusableElements.includes(tagName)) {
|
|
5217
|
-
if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
|
|
5218
|
-
return true;
|
|
5219
|
-
}
|
|
5220
|
-
if (!node.hasAttribute('disabled')) {
|
|
5221
|
-
return true;
|
|
5222
|
-
}
|
|
5223
|
-
}
|
|
5224
|
-
|
|
5225
|
-
if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
|
|
5226
|
-
return true;
|
|
5227
|
-
}
|
|
5228
|
-
|
|
5229
|
-
return false;
|
|
5230
|
-
});
|
|
5231
|
-
|
|
5232
|
-
if (result) {
|
|
5233
|
-
this.showTriggerBorders = !nodes.some((node) => {
|
|
5234
|
-
const tagName = node.tagName.toLowerCase();
|
|
5235
|
-
return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
|
|
5236
|
-
});
|
|
5237
|
-
}
|
|
5238
|
-
|
|
5239
|
-
return result;
|
|
5240
|
-
}
|
|
5241
|
-
|
|
5242
5185
|
/**
|
|
5243
5186
|
* Creates and dispatches a duplicate focus event on the trigger element.
|
|
5244
5187
|
* @private
|
|
@@ -5350,7 +5293,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
5350
5293
|
if (triggerContentNodes) {
|
|
5351
5294
|
|
|
5352
5295
|
// See if any of them are focusable elements
|
|
5353
|
-
this.triggerContentFocusable = triggerContentNodes.some((node) =>
|
|
5296
|
+
this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
|
|
5354
5297
|
|
|
5355
5298
|
// If any of them are focusable elements
|
|
5356
5299
|
if (this.triggerContentFocusable) {
|
|
@@ -5422,7 +5365,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
5422
5365
|
<div
|
|
5423
5366
|
id="trigger"
|
|
5424
5367
|
class="${e(this.commonWrapperClasses)}" part="wrapper"
|
|
5425
|
-
tabindex="${this.tabIndex}"
|
|
5368
|
+
tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
|
|
5426
5369
|
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
5427
5370
|
aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
5428
5371
|
aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
@@ -7722,7 +7665,7 @@ class AuroHelpText extends i$2 {
|
|
|
7722
7665
|
|
|
7723
7666
|
var helpTextVersion = '1.0.0';
|
|
7724
7667
|
|
|
7725
|
-
var styleCss$3 = i$5`.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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color)}:host{display:inline-block}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) [auro-dropdown] label.withValue{line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{line-height:20px}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;font-weight:450;letter-spacing:0;line-height:24px;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) label.withValue{font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
7668
|
+
var styleCss$3 = i$5`.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}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color)}:host{display:inline-block}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) label.withValue{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
7726
7669
|
|
|
7727
7670
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7728
7671
|
// See LICENSE in the project root for license information.
|
|
@@ -8144,31 +8087,11 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8144
8087
|
get commonLabelClasses() {
|
|
8145
8088
|
return {
|
|
8146
8089
|
'is-disabled': this.disabled,
|
|
8147
|
-
'withValue': this.
|
|
8148
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
8149
|
-
[this.labelFontClass]: true
|
|
8090
|
+
'withValue': this.placeholder || (this.value && this.value.length > 0), // eslint-disable-line no-extra-parens
|
|
8091
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
8150
8092
|
};
|
|
8151
8093
|
}
|
|
8152
8094
|
|
|
8153
|
-
/**
|
|
8154
|
-
* Returns the font class for the label based on state.
|
|
8155
|
-
* @returns {string} - Returns the font class for the label.
|
|
8156
|
-
* @private
|
|
8157
|
-
*/
|
|
8158
|
-
get labelFontClass() {
|
|
8159
|
-
if (this.hasValue) return 'body-xs';
|
|
8160
|
-
return 'body-default';
|
|
8161
|
-
}
|
|
8162
|
-
|
|
8163
|
-
/**
|
|
8164
|
-
* Whether or not the component has a value.
|
|
8165
|
-
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
8166
|
-
* @private
|
|
8167
|
-
*/
|
|
8168
|
-
get hasValue() {
|
|
8169
|
-
return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
|
|
8170
|
-
}
|
|
8171
|
-
|
|
8172
8095
|
/**
|
|
8173
8096
|
* Returns classmap configuration for wrapper elements in each layout.
|
|
8174
8097
|
* @private
|
|
@@ -8991,11 +8914,6 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8991
8914
|
'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
|
|
8992
8915
|
};
|
|
8993
8916
|
|
|
8994
|
-
const valueClasses = {
|
|
8995
|
-
'value': true,
|
|
8996
|
-
'body-default': true
|
|
8997
|
-
};
|
|
8998
|
-
|
|
8999
8917
|
return u`
|
|
9000
8918
|
<div
|
|
9001
8919
|
class="${e(this.commonWrapperClasses)}"
|
|
@@ -9028,7 +8946,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
9028
8946
|
<slot name="label"></slot>
|
|
9029
8947
|
${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
|
|
9030
8948
|
</label>
|
|
9031
|
-
<div class="
|
|
8949
|
+
<div class="value" id="value"></div>
|
|
9032
8950
|
<div id="placeholder" class="${e(placeholderClass)}">
|
|
9033
8951
|
${this.placeholder}
|
|
9034
8952
|
</div>
|
|
@@ -10454,7 +10372,7 @@ class AuroMenuOption extends AuroElement$4 {
|
|
|
10454
10372
|
|
|
10455
10373
|
svg.setAttribute('slot', 'svg');
|
|
10456
10374
|
|
|
10457
|
-
return u`<${this.iconTag} customColor customSvg>${svg}</${this.iconTag}>`;
|
|
10375
|
+
return u`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
|
|
10458
10376
|
}
|
|
10459
10377
|
|
|
10460
10378
|
/**
|
|
@@ -4507,6 +4507,7 @@ let AuroElement$3 = class AuroElement extends i$2 {
|
|
|
4507
4507
|
// See LICENSE in the project root for license information.
|
|
4508
4508
|
|
|
4509
4509
|
|
|
4510
|
+
|
|
4510
4511
|
/*
|
|
4511
4512
|
* @slot - Default slot for the popover content.
|
|
4512
4513
|
* @slot helpText - Defines the content of the helpText.
|
|
@@ -5089,64 +5090,6 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
5089
5090
|
this.hasFocus = false;
|
|
5090
5091
|
}
|
|
5091
5092
|
|
|
5092
|
-
/**
|
|
5093
|
-
* Determines if the element or any children are focusable.
|
|
5094
|
-
* @private
|
|
5095
|
-
* @param {HTMLElement} element - Element to check.
|
|
5096
|
-
* @returns {Boolean} - True if the element or any children are focusable.
|
|
5097
|
-
*/
|
|
5098
|
-
containsFocusableElement(element) {
|
|
5099
|
-
this.showTriggerBorders = true;
|
|
5100
|
-
|
|
5101
|
-
const nodes = [
|
|
5102
|
-
element,
|
|
5103
|
-
...element.children
|
|
5104
|
-
];
|
|
5105
|
-
|
|
5106
|
-
const focusableElements = [
|
|
5107
|
-
'a',
|
|
5108
|
-
'auro-hyperlink',
|
|
5109
|
-
'button',
|
|
5110
|
-
'auro-button',
|
|
5111
|
-
'input',
|
|
5112
|
-
'auro-input',
|
|
5113
|
-
];
|
|
5114
|
-
|
|
5115
|
-
const focusableElementsThatNeedBorders = ['auro-input'];
|
|
5116
|
-
|
|
5117
|
-
const result = nodes.some((node) => {
|
|
5118
|
-
const tagName = node.tagName.toLowerCase();
|
|
5119
|
-
|
|
5120
|
-
if (node.tabIndex > -1) {
|
|
5121
|
-
return true;
|
|
5122
|
-
}
|
|
5123
|
-
|
|
5124
|
-
if (focusableElements.includes(tagName)) {
|
|
5125
|
-
if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
|
|
5126
|
-
return true;
|
|
5127
|
-
}
|
|
5128
|
-
if (!node.hasAttribute('disabled')) {
|
|
5129
|
-
return true;
|
|
5130
|
-
}
|
|
5131
|
-
}
|
|
5132
|
-
|
|
5133
|
-
if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
|
|
5134
|
-
return true;
|
|
5135
|
-
}
|
|
5136
|
-
|
|
5137
|
-
return false;
|
|
5138
|
-
});
|
|
5139
|
-
|
|
5140
|
-
if (result) {
|
|
5141
|
-
this.showTriggerBorders = !nodes.some((node) => {
|
|
5142
|
-
const tagName = node.tagName.toLowerCase();
|
|
5143
|
-
return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
|
|
5144
|
-
});
|
|
5145
|
-
}
|
|
5146
|
-
|
|
5147
|
-
return result;
|
|
5148
|
-
}
|
|
5149
|
-
|
|
5150
5093
|
/**
|
|
5151
5094
|
* Creates and dispatches a duplicate focus event on the trigger element.
|
|
5152
5095
|
* @private
|
|
@@ -5258,7 +5201,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
5258
5201
|
if (triggerContentNodes) {
|
|
5259
5202
|
|
|
5260
5203
|
// See if any of them are focusable elements
|
|
5261
|
-
this.triggerContentFocusable = triggerContentNodes.some((node) =>
|
|
5204
|
+
this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
|
|
5262
5205
|
|
|
5263
5206
|
// If any of them are focusable elements
|
|
5264
5207
|
if (this.triggerContentFocusable) {
|
|
@@ -5330,7 +5273,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
5330
5273
|
<div
|
|
5331
5274
|
id="trigger"
|
|
5332
5275
|
class="${e(this.commonWrapperClasses)}" part="wrapper"
|
|
5333
|
-
tabindex="${this.tabIndex}"
|
|
5276
|
+
tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
|
|
5334
5277
|
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
5335
5278
|
aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
5336
5279
|
aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
@@ -7630,7 +7573,7 @@ class AuroHelpText extends i$2 {
|
|
|
7630
7573
|
|
|
7631
7574
|
var helpTextVersion = '1.0.0';
|
|
7632
7575
|
|
|
7633
|
-
var styleCss$3 = i$5`.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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color)}:host{display:inline-block}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) [auro-dropdown] label.withValue{line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{line-height:20px}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;font-weight:450;letter-spacing:0;line-height:24px;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) label.withValue{font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
7576
|
+
var styleCss$3 = i$5`.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}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color)}:host{display:inline-block}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) label.withValue{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
7634
7577
|
|
|
7635
7578
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7636
7579
|
// See LICENSE in the project root for license information.
|
|
@@ -8052,31 +7995,11 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8052
7995
|
get commonLabelClasses() {
|
|
8053
7996
|
return {
|
|
8054
7997
|
'is-disabled': this.disabled,
|
|
8055
|
-
'withValue': this.
|
|
8056
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
8057
|
-
[this.labelFontClass]: true
|
|
7998
|
+
'withValue': this.placeholder || (this.value && this.value.length > 0), // eslint-disable-line no-extra-parens
|
|
7999
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
8058
8000
|
};
|
|
8059
8001
|
}
|
|
8060
8002
|
|
|
8061
|
-
/**
|
|
8062
|
-
* Returns the font class for the label based on state.
|
|
8063
|
-
* @returns {string} - Returns the font class for the label.
|
|
8064
|
-
* @private
|
|
8065
|
-
*/
|
|
8066
|
-
get labelFontClass() {
|
|
8067
|
-
if (this.hasValue) return 'body-xs';
|
|
8068
|
-
return 'body-default';
|
|
8069
|
-
}
|
|
8070
|
-
|
|
8071
|
-
/**
|
|
8072
|
-
* Whether or not the component has a value.
|
|
8073
|
-
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
8074
|
-
* @private
|
|
8075
|
-
*/
|
|
8076
|
-
get hasValue() {
|
|
8077
|
-
return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
|
|
8078
|
-
}
|
|
8079
|
-
|
|
8080
8003
|
/**
|
|
8081
8004
|
* Returns classmap configuration for wrapper elements in each layout.
|
|
8082
8005
|
* @private
|
|
@@ -8899,11 +8822,6 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8899
8822
|
'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
|
|
8900
8823
|
};
|
|
8901
8824
|
|
|
8902
|
-
const valueClasses = {
|
|
8903
|
-
'value': true,
|
|
8904
|
-
'body-default': true
|
|
8905
|
-
};
|
|
8906
|
-
|
|
8907
8825
|
return u`
|
|
8908
8826
|
<div
|
|
8909
8827
|
class="${e(this.commonWrapperClasses)}"
|
|
@@ -8936,7 +8854,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8936
8854
|
<slot name="label"></slot>
|
|
8937
8855
|
${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
|
|
8938
8856
|
</label>
|
|
8939
|
-
<div class="
|
|
8857
|
+
<div class="value" id="value"></div>
|
|
8940
8858
|
<div id="placeholder" class="${e(placeholderClass)}">
|
|
8941
8859
|
${this.placeholder}
|
|
8942
8860
|
</div>
|
|
@@ -10362,7 +10280,7 @@ class AuroMenuOption extends AuroElement$4 {
|
|
|
10362
10280
|
|
|
10363
10281
|
svg.setAttribute('slot', 'svg');
|
|
10364
10282
|
|
|
10365
|
-
return u`<${this.iconTag} customColor customSvg>${svg}</${this.iconTag}>`;
|
|
10283
|
+
return u`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
|
|
10366
10284
|
}
|
|
10367
10285
|
|
|
10368
10286
|
/**
|
|
@@ -318,18 +318,6 @@ export class AuroSelect extends AuroElement {
|
|
|
318
318
|
* @returns {void}
|
|
319
319
|
*/
|
|
320
320
|
private get commonLabelClasses();
|
|
321
|
-
/**
|
|
322
|
-
* Returns the font class for the label based on state.
|
|
323
|
-
* @returns {string} - Returns the font class for the label.
|
|
324
|
-
* @private
|
|
325
|
-
*/
|
|
326
|
-
private get labelFontClass();
|
|
327
|
-
/**
|
|
328
|
-
* Whether or not the component has a value.
|
|
329
|
-
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
330
|
-
* @private
|
|
331
|
-
*/
|
|
332
|
-
private get hasValue();
|
|
333
321
|
/**
|
|
334
322
|
* Returns classmap configuration for wrapper elements in each layout.
|
|
335
323
|
* @private
|
|
@@ -4461,6 +4461,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
|
|
|
4461
4461
|
// See LICENSE in the project root for license information.
|
|
4462
4462
|
|
|
4463
4463
|
|
|
4464
|
+
|
|
4464
4465
|
/*
|
|
4465
4466
|
* @slot - Default slot for the popover content.
|
|
4466
4467
|
* @slot helpText - Defines the content of the helpText.
|
|
@@ -5043,64 +5044,6 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5043
5044
|
this.hasFocus = false;
|
|
5044
5045
|
}
|
|
5045
5046
|
|
|
5046
|
-
/**
|
|
5047
|
-
* Determines if the element or any children are focusable.
|
|
5048
|
-
* @private
|
|
5049
|
-
* @param {HTMLElement} element - Element to check.
|
|
5050
|
-
* @returns {Boolean} - True if the element or any children are focusable.
|
|
5051
|
-
*/
|
|
5052
|
-
containsFocusableElement(element) {
|
|
5053
|
-
this.showTriggerBorders = true;
|
|
5054
|
-
|
|
5055
|
-
const nodes = [
|
|
5056
|
-
element,
|
|
5057
|
-
...element.children
|
|
5058
|
-
];
|
|
5059
|
-
|
|
5060
|
-
const focusableElements = [
|
|
5061
|
-
'a',
|
|
5062
|
-
'auro-hyperlink',
|
|
5063
|
-
'button',
|
|
5064
|
-
'auro-button',
|
|
5065
|
-
'input',
|
|
5066
|
-
'auro-input',
|
|
5067
|
-
];
|
|
5068
|
-
|
|
5069
|
-
const focusableElementsThatNeedBorders = ['auro-input'];
|
|
5070
|
-
|
|
5071
|
-
const result = nodes.some((node) => {
|
|
5072
|
-
const tagName = node.tagName.toLowerCase();
|
|
5073
|
-
|
|
5074
|
-
if (node.tabIndex > -1) {
|
|
5075
|
-
return true;
|
|
5076
|
-
}
|
|
5077
|
-
|
|
5078
|
-
if (focusableElements.includes(tagName)) {
|
|
5079
|
-
if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
|
|
5080
|
-
return true;
|
|
5081
|
-
}
|
|
5082
|
-
if (!node.hasAttribute('disabled')) {
|
|
5083
|
-
return true;
|
|
5084
|
-
}
|
|
5085
|
-
}
|
|
5086
|
-
|
|
5087
|
-
if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
|
|
5088
|
-
return true;
|
|
5089
|
-
}
|
|
5090
|
-
|
|
5091
|
-
return false;
|
|
5092
|
-
});
|
|
5093
|
-
|
|
5094
|
-
if (result) {
|
|
5095
|
-
this.showTriggerBorders = !nodes.some((node) => {
|
|
5096
|
-
const tagName = node.tagName.toLowerCase();
|
|
5097
|
-
return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
|
|
5098
|
-
});
|
|
5099
|
-
}
|
|
5100
|
-
|
|
5101
|
-
return result;
|
|
5102
|
-
}
|
|
5103
|
-
|
|
5104
5047
|
/**
|
|
5105
5048
|
* Creates and dispatches a duplicate focus event on the trigger element.
|
|
5106
5049
|
* @private
|
|
@@ -5212,7 +5155,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5212
5155
|
if (triggerContentNodes) {
|
|
5213
5156
|
|
|
5214
5157
|
// See if any of them are focusable elements
|
|
5215
|
-
this.triggerContentFocusable = triggerContentNodes.some((node) =>
|
|
5158
|
+
this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
|
|
5216
5159
|
|
|
5217
5160
|
// If any of them are focusable elements
|
|
5218
5161
|
if (this.triggerContentFocusable) {
|
|
@@ -5284,7 +5227,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5284
5227
|
<div
|
|
5285
5228
|
id="trigger"
|
|
5286
5229
|
class="${classMap(this.commonWrapperClasses)}" part="wrapper"
|
|
5287
|
-
tabindex="${this.tabIndex}"
|
|
5230
|
+
tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
|
|
5288
5231
|
role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
5289
5232
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
5290
5233
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
@@ -7584,7 +7527,7 @@ class AuroHelpText extends LitElement {
|
|
|
7584
7527
|
|
|
7585
7528
|
var helpTextVersion = '1.0.0';
|
|
7586
7529
|
|
|
7587
|
-
var styleCss = css`.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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color)}:host{display:inline-block}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) [auro-dropdown] label.withValue{line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{line-height:20px}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;font-weight:450;letter-spacing:0;line-height:24px;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) label.withValue{font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
7530
|
+
var styleCss = css`.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}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color)}:host{display:inline-block}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) label.withValue{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
7588
7531
|
|
|
7589
7532
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7590
7533
|
// See LICENSE in the project root for license information.
|
|
@@ -8006,31 +7949,11 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8006
7949
|
get commonLabelClasses() {
|
|
8007
7950
|
return {
|
|
8008
7951
|
'is-disabled': this.disabled,
|
|
8009
|
-
'withValue': this.
|
|
8010
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
8011
|
-
[this.labelFontClass]: true
|
|
7952
|
+
'withValue': this.placeholder || (this.value && this.value.length > 0), // eslint-disable-line no-extra-parens
|
|
7953
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
8012
7954
|
};
|
|
8013
7955
|
}
|
|
8014
7956
|
|
|
8015
|
-
/**
|
|
8016
|
-
* Returns the font class for the label based on state.
|
|
8017
|
-
* @returns {string} - Returns the font class for the label.
|
|
8018
|
-
* @private
|
|
8019
|
-
*/
|
|
8020
|
-
get labelFontClass() {
|
|
8021
|
-
if (this.hasValue) return 'body-xs';
|
|
8022
|
-
return 'body-default';
|
|
8023
|
-
}
|
|
8024
|
-
|
|
8025
|
-
/**
|
|
8026
|
-
* Whether or not the component has a value.
|
|
8027
|
-
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
8028
|
-
* @private
|
|
8029
|
-
*/
|
|
8030
|
-
get hasValue() {
|
|
8031
|
-
return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
|
|
8032
|
-
}
|
|
8033
|
-
|
|
8034
7957
|
/**
|
|
8035
7958
|
* Returns classmap configuration for wrapper elements in each layout.
|
|
8036
7959
|
* @private
|
|
@@ -8853,11 +8776,6 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8853
8776
|
'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
|
|
8854
8777
|
};
|
|
8855
8778
|
|
|
8856
|
-
const valueClasses = {
|
|
8857
|
-
'value': true,
|
|
8858
|
-
'body-default': true
|
|
8859
|
-
};
|
|
8860
|
-
|
|
8861
8779
|
return html`
|
|
8862
8780
|
<div
|
|
8863
8781
|
class="${classMap(this.commonWrapperClasses)}"
|
|
@@ -8890,7 +8808,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8890
8808
|
<slot name="label"></slot>
|
|
8891
8809
|
${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
|
|
8892
8810
|
</label>
|
|
8893
|
-
<div class="
|
|
8811
|
+
<div class="value" id="value"></div>
|
|
8894
8812
|
<div id="placeholder" class="${classMap(placeholderClass)}">
|
|
8895
8813
|
${this.placeholder}
|
|
8896
8814
|
</div>
|