@aurodesignsystem-dev/auro-formkit 0.0.0-pr802.0 → 0.0.0-pr806.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/bibtemplate/dist/index.js +1 -1
- package/components/bibtemplate/dist/registered.js +1 -1
- package/components/checkbox/demo/api.md +2 -1
- package/components/checkbox/demo/api.min.js +8 -1
- package/components/checkbox/demo/index.min.js +8 -1
- package/components/checkbox/dist/index.js +8 -1
- package/components/checkbox/dist/registered.js +8 -1
- package/components/combobox/demo/api.md +2 -0
- package/components/combobox/demo/api.min.js +87 -73
- package/components/combobox/demo/index.min.js +87 -73
- package/components/combobox/dist/auro-combobox.d.ts +2 -4
- package/components/combobox/dist/index.js +86 -72
- package/components/combobox/dist/registered.js +86 -72
- package/components/counter/demo/api.md +2 -0
- package/components/counter/demo/api.min.js +31 -61
- package/components/counter/demo/index.min.js +31 -61
- package/components/counter/dist/auro-counter-group.d.ts +10 -0
- package/components/counter/dist/index.js +31 -61
- package/components/counter/dist/registered.js +31 -61
- package/components/datepicker/README.md +1 -1
- package/components/datepicker/demo/api.md +41 -19
- package/components/datepicker/demo/api.min.js +341 -188
- package/components/datepicker/demo/index.md +4 -4
- package/components/datepicker/demo/index.min.js +341 -188
- package/components/datepicker/demo/readme.md +1 -1
- package/components/datepicker/dist/auro-datepicker.d.ts +73 -12
- package/components/datepicker/dist/index.js +341 -188
- package/components/datepicker/dist/registered.js +341 -188
- package/components/datepicker/dist/styles/classic/style-css.d.ts +2 -0
- package/components/dropdown/demo/api.md +1 -1
- package/components/dropdown/demo/api.min.js +10 -60
- package/components/dropdown/demo/index.min.js +10 -60
- package/components/dropdown/dist/auro-dropdown.d.ts +0 -7
- package/components/dropdown/dist/index.js +10 -60
- package/components/dropdown/dist/registered.js +10 -60
- package/components/input/demo/api.min.js +75 -9
- package/components/input/demo/index.min.js +75 -9
- package/components/input/dist/auro-input.d.ts +24 -0
- package/components/input/dist/index.js +75 -9
- package/components/input/dist/registered.js +75 -9
- 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.md +46 -64
- package/components/select/demo/api.min.js +61 -76
- package/components/select/demo/index.md +1057 -137
- package/components/select/demo/index.min.js +61 -76
- package/components/select/dist/auro-select.d.ts +22 -5
- package/components/select/dist/index.js +60 -75
- package/components/select/dist/registered.js +60 -75
- package/package.json +2 -2
- /package/components/datepicker/dist/styles/{default → classic}/color-css.d.ts +0 -0
|
@@ -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.
|
|
@@ -5102,6 +5103,13 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
5102
5103
|
|
|
5103
5104
|
// Add the tag name as an attribute if it is different than the component name
|
|
5104
5105
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
|
|
5106
|
+
|
|
5107
|
+
this.trigger.addEventListener('click', () => {
|
|
5108
|
+
this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
|
|
5109
|
+
bubbles: true,
|
|
5110
|
+
composed: true
|
|
5111
|
+
}));
|
|
5112
|
+
});
|
|
5105
5113
|
}
|
|
5106
5114
|
|
|
5107
5115
|
/**
|
|
@@ -5174,64 +5182,6 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
5174
5182
|
this.hasFocus = false;
|
|
5175
5183
|
}
|
|
5176
5184
|
|
|
5177
|
-
/**
|
|
5178
|
-
* Determines if the element or any children are focusable.
|
|
5179
|
-
* @private
|
|
5180
|
-
* @param {HTMLElement} element - Element to check.
|
|
5181
|
-
* @returns {Boolean} - True if the element or any children are focusable.
|
|
5182
|
-
*/
|
|
5183
|
-
containsFocusableElement(element) {
|
|
5184
|
-
this.showTriggerBorders = true;
|
|
5185
|
-
|
|
5186
|
-
const nodes = [
|
|
5187
|
-
element,
|
|
5188
|
-
...element.children
|
|
5189
|
-
];
|
|
5190
|
-
|
|
5191
|
-
const focusableElements = [
|
|
5192
|
-
'a',
|
|
5193
|
-
'auro-hyperlink',
|
|
5194
|
-
'button',
|
|
5195
|
-
'auro-button',
|
|
5196
|
-
'input',
|
|
5197
|
-
'auro-input',
|
|
5198
|
-
];
|
|
5199
|
-
|
|
5200
|
-
const focusableElementsThatNeedBorders = ['auro-input'];
|
|
5201
|
-
|
|
5202
|
-
const result = nodes.some((node) => {
|
|
5203
|
-
const tagName = node.tagName.toLowerCase();
|
|
5204
|
-
|
|
5205
|
-
if (node.tabIndex > -1) {
|
|
5206
|
-
return true;
|
|
5207
|
-
}
|
|
5208
|
-
|
|
5209
|
-
if (focusableElements.includes(tagName)) {
|
|
5210
|
-
if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
|
|
5211
|
-
return true;
|
|
5212
|
-
}
|
|
5213
|
-
if (!node.hasAttribute('disabled')) {
|
|
5214
|
-
return true;
|
|
5215
|
-
}
|
|
5216
|
-
}
|
|
5217
|
-
|
|
5218
|
-
if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
|
|
5219
|
-
return true;
|
|
5220
|
-
}
|
|
5221
|
-
|
|
5222
|
-
return false;
|
|
5223
|
-
});
|
|
5224
|
-
|
|
5225
|
-
if (result) {
|
|
5226
|
-
this.showTriggerBorders = !nodes.some((node) => {
|
|
5227
|
-
const tagName = node.tagName.toLowerCase();
|
|
5228
|
-
return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
|
|
5229
|
-
});
|
|
5230
|
-
}
|
|
5231
|
-
|
|
5232
|
-
return result;
|
|
5233
|
-
}
|
|
5234
|
-
|
|
5235
5185
|
/**
|
|
5236
5186
|
* Creates and dispatches a duplicate focus event on the trigger element.
|
|
5237
5187
|
* @private
|
|
@@ -5343,7 +5293,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
5343
5293
|
if (triggerContentNodes) {
|
|
5344
5294
|
|
|
5345
5295
|
// See if any of them are focusable elements
|
|
5346
|
-
this.triggerContentFocusable = triggerContentNodes.some((node) =>
|
|
5296
|
+
this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
|
|
5347
5297
|
|
|
5348
5298
|
// If any of them are focusable elements
|
|
5349
5299
|
if (this.triggerContentFocusable) {
|
|
@@ -5415,7 +5365,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
5415
5365
|
<div
|
|
5416
5366
|
id="trigger"
|
|
5417
5367
|
class="${e(this.commonWrapperClasses)}" part="wrapper"
|
|
5418
|
-
tabindex="${this.tabIndex}"
|
|
5368
|
+
tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
|
|
5419
5369
|
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
5420
5370
|
aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
5421
5371
|
aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
@@ -7388,7 +7338,7 @@ class AuroBibtemplate extends i$2 {
|
|
|
7388
7338
|
/**
|
|
7389
7339
|
* @private
|
|
7390
7340
|
*/
|
|
7391
|
-
this.buttonTag = versioning.generateTag('auro-formkit-
|
|
7341
|
+
this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
|
|
7392
7342
|
}
|
|
7393
7343
|
|
|
7394
7344
|
static get styles() {
|
|
@@ -7715,7 +7665,7 @@ class AuroHelpText extends i$2 {
|
|
|
7715
7665
|
|
|
7716
7666
|
var helpTextVersion = '1.0.0';
|
|
7717
7667
|
|
|
7718
|
-
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([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}.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}`;
|
|
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}.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}`;
|
|
7719
7669
|
|
|
7720
7670
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7721
7671
|
// See LICENSE in the project root for license information.
|
|
@@ -8137,11 +8087,31 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8137
8087
|
get commonLabelClasses() {
|
|
8138
8088
|
return {
|
|
8139
8089
|
'is-disabled': this.disabled,
|
|
8140
|
-
'withValue': this.
|
|
8141
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
8090
|
+
'withValue': this.hasValue,
|
|
8091
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0,
|
|
8092
|
+
[this.labelFontClass]: true
|
|
8142
8093
|
};
|
|
8143
8094
|
}
|
|
8144
8095
|
|
|
8096
|
+
/**
|
|
8097
|
+
* Returns the font class for the label based on state.
|
|
8098
|
+
* @returns {string} - Returns the font class for the label.
|
|
8099
|
+
* @private
|
|
8100
|
+
*/
|
|
8101
|
+
get labelFontClass() {
|
|
8102
|
+
if (this.hasValue) return 'body-xs';
|
|
8103
|
+
return 'body-default';
|
|
8104
|
+
}
|
|
8105
|
+
|
|
8106
|
+
/**
|
|
8107
|
+
* Whether or not the component has a value.
|
|
8108
|
+
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
8109
|
+
* @private
|
|
8110
|
+
*/
|
|
8111
|
+
get hasValue() {
|
|
8112
|
+
return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
|
|
8113
|
+
}
|
|
8114
|
+
|
|
8145
8115
|
/**
|
|
8146
8116
|
* Returns classmap configuration for wrapper elements in each layout.
|
|
8147
8117
|
* @private
|
|
@@ -8460,6 +8430,26 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8460
8430
|
}
|
|
8461
8431
|
}
|
|
8462
8432
|
|
|
8433
|
+
/**
|
|
8434
|
+
* Hides the dropdown bib if its open.
|
|
8435
|
+
* @returns {void}
|
|
8436
|
+
*/
|
|
8437
|
+
hideBib() {
|
|
8438
|
+
if (this.dropdown && this.dropdown.isPopoverVisible) {
|
|
8439
|
+
this.dropdown.hide();
|
|
8440
|
+
}
|
|
8441
|
+
}
|
|
8442
|
+
|
|
8443
|
+
/**
|
|
8444
|
+
* Shows the dropdown bib if there are options to show.
|
|
8445
|
+
* @returns {void}
|
|
8446
|
+
*/
|
|
8447
|
+
showBib() {
|
|
8448
|
+
if (this.dropdown && !this.dropdown.isPopoverVisible) {
|
|
8449
|
+
this.dropdown.show();
|
|
8450
|
+
}
|
|
8451
|
+
}
|
|
8452
|
+
|
|
8463
8453
|
/**
|
|
8464
8454
|
* Function to support @focusin event.
|
|
8465
8455
|
* @private
|
|
@@ -8625,16 +8615,6 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8625
8615
|
this.validation.reset(this);
|
|
8626
8616
|
}
|
|
8627
8617
|
|
|
8628
|
-
/**
|
|
8629
|
-
* Hide dropdownbib.
|
|
8630
|
-
* @private
|
|
8631
|
-
*/
|
|
8632
|
-
hideBib() {
|
|
8633
|
-
if (this.dropdown) {
|
|
8634
|
-
this.dropdown.hide();
|
|
8635
|
-
}
|
|
8636
|
-
}
|
|
8637
|
-
|
|
8638
8618
|
/**
|
|
8639
8619
|
* Validates value.
|
|
8640
8620
|
* @param {boolean} [force=false] - Whether to force validation.
|
|
@@ -8954,6 +8934,11 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8954
8934
|
'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
|
|
8955
8935
|
};
|
|
8956
8936
|
|
|
8937
|
+
const valueClasses = {
|
|
8938
|
+
'value': true,
|
|
8939
|
+
'body-default': true
|
|
8940
|
+
};
|
|
8941
|
+
|
|
8957
8942
|
return u`
|
|
8958
8943
|
<div
|
|
8959
8944
|
class="${e(this.commonWrapperClasses)}"
|
|
@@ -8986,7 +8971,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8986
8971
|
<slot name="label"></slot>
|
|
8987
8972
|
${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
|
|
8988
8973
|
</label>
|
|
8989
|
-
<div class="
|
|
8974
|
+
<div class="${e(valueClasses)}" id="value"></div>
|
|
8990
8975
|
<div id="placeholder" class="${e(placeholderClass)}">
|
|
8991
8976
|
${this.placeholder}
|
|
8992
8977
|
</div>
|
|
@@ -10412,7 +10397,7 @@ class AuroMenuOption extends AuroElement$4 {
|
|
|
10412
10397
|
|
|
10413
10398
|
svg.setAttribute('slot', 'svg');
|
|
10414
10399
|
|
|
10415
|
-
return u`<${this.iconTag} customColor customSvg
|
|
10400
|
+
return u`<${this.iconTag} customColor customSvg>${svg}</${this.iconTag}>`;
|
|
10416
10401
|
}
|
|
10417
10402
|
|
|
10418
10403
|
/**
|