@aurodesignsystem-dev/auro-formkit 0.0.0-pr800.0 → 0.0.0-pr801.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/combobox/demo/api.md +0 -2
- package/components/combobox/demo/api.min.js +35 -4
- package/components/combobox/demo/index.min.js +35 -4
- package/components/combobox/dist/auro-combobox.d.ts +4 -2
- package/components/combobox/dist/index.js +35 -4
- package/components/combobox/dist/registered.js +35 -4
- package/components/counter/demo/api.md +0 -2
- package/components/counter/demo/api.min.js +0 -21
- package/components/counter/demo/index.min.js +0 -21
- package/components/counter/dist/auro-counter-group.d.ts +0 -10
- package/components/counter/dist/index.js +0 -21
- package/components/counter/dist/registered.js +0 -21
- package/components/datepicker/demo/api.md +0 -2
- package/components/datepicker/demo/api.min.js +33 -25
- package/components/datepicker/demo/index.min.js +33 -25
- package/components/datepicker/dist/auro-datepicker.d.ts +0 -10
- package/components/datepicker/dist/index.js +33 -25
- package/components/datepicker/dist/registered.js +33 -25
- package/components/dropdown/demo/api.md +6 -7
- package/components/dropdown/demo/api.min.js +0 -1
- package/components/dropdown/demo/index.min.js +0 -1
- package/components/dropdown/dist/index.js +0 -1
- package/components/dropdown/dist/registered.js +0 -1
- package/components/input/demo/api.min.js +33 -3
- package/components/input/demo/index.min.js +33 -3
- package/components/input/dist/auro-input.d.ts +18 -0
- package/components/input/dist/index.js +33 -3
- package/components/input/dist/registered.js +33 -3
- package/components/select/demo/api.md +3 -8
- package/components/select/demo/api.min.js +32 -22
- package/components/select/demo/index.min.js +32 -22
- package/components/select/dist/auro-select.d.ts +15 -12
- package/components/select/dist/index.js +32 -22
- package/components/select/dist/registered.js +32 -22
- package/package.json +1 -1
|
@@ -4513,7 +4513,6 @@ let AuroElement$3 = class AuroElement extends i$2 {
|
|
|
4513
4513
|
* @slot trigger - Defines the content of the trigger.
|
|
4514
4514
|
* @csspart trigger - The trigger content container.
|
|
4515
4515
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
4516
|
-
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
4517
4516
|
* @csspart helpText - The helpText content container.
|
|
4518
4517
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
4519
4518
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -7574,7 +7573,7 @@ class AuroHelpText extends i$2 {
|
|
|
7574
7573
|
|
|
7575
7574
|
var helpTextVersion = '1.0.0';
|
|
7576
7575
|
|
|
7577
|
-
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}`;
|
|
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}.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-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-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-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)}[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{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}`;
|
|
7578
7577
|
|
|
7579
7578
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7580
7579
|
// See LICENSE in the project root for license information.
|
|
@@ -7594,10 +7593,6 @@ var styleCss$3 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock
|
|
|
7594
7593
|
* @event auroSelect-valueSet - Notifies that the component has a new value set.
|
|
7595
7594
|
* @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
|
|
7596
7595
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
|
|
7597
|
-
*
|
|
7598
|
-
* @csspart dropdownTrigger - Apply CSS to the trigger content container.
|
|
7599
|
-
* @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
|
|
7600
|
-
* @csspart dropdownSize - Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
7601
7596
|
* @csspart helpText - Apply CSS to the help text.
|
|
7602
7597
|
*/
|
|
7603
7598
|
|
|
@@ -8000,11 +7995,31 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8000
7995
|
get commonLabelClasses() {
|
|
8001
7996
|
return {
|
|
8002
7997
|
'is-disabled': this.disabled,
|
|
8003
|
-
'withValue': this.
|
|
8004
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7998
|
+
'withValue': this.hasValue,
|
|
7999
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0,
|
|
8000
|
+
[this.labelFontClass]: true
|
|
8005
8001
|
};
|
|
8006
8002
|
}
|
|
8007
8003
|
|
|
8004
|
+
/**
|
|
8005
|
+
* Returns the font class for the label based on state.
|
|
8006
|
+
* @returns {string} - Returns the font class for the label.
|
|
8007
|
+
* @private
|
|
8008
|
+
*/
|
|
8009
|
+
get labelFontClass() {
|
|
8010
|
+
if (this.hasValue) return 'body-xs';
|
|
8011
|
+
return 'body-default';
|
|
8012
|
+
}
|
|
8013
|
+
|
|
8014
|
+
/**
|
|
8015
|
+
* Whether or not the component has a value.
|
|
8016
|
+
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
8017
|
+
* @private
|
|
8018
|
+
*/
|
|
8019
|
+
get hasValue() {
|
|
8020
|
+
return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
|
|
8021
|
+
}
|
|
8022
|
+
|
|
8008
8023
|
/**
|
|
8009
8024
|
* Returns classmap configuration for wrapper elements in each layout.
|
|
8010
8025
|
* @private
|
|
@@ -8489,25 +8504,15 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8489
8504
|
}
|
|
8490
8505
|
|
|
8491
8506
|
/**
|
|
8492
|
-
* Hide dropdownbib
|
|
8493
|
-
* @
|
|
8507
|
+
* Hide dropdownbib.
|
|
8508
|
+
* @private
|
|
8494
8509
|
*/
|
|
8495
8510
|
hideBib() {
|
|
8496
|
-
if (this.dropdown
|
|
8511
|
+
if (this.dropdown) {
|
|
8497
8512
|
this.dropdown.hide();
|
|
8498
8513
|
}
|
|
8499
8514
|
}
|
|
8500
8515
|
|
|
8501
|
-
/**
|
|
8502
|
-
* Shows the dropdown bib if there are options to show.
|
|
8503
|
-
* @returns {void}
|
|
8504
|
-
*/
|
|
8505
|
-
showBib() {
|
|
8506
|
-
if (!this.dropdown.isPopoverVisible && !this.isHiddenWhileLoading) {
|
|
8507
|
-
this.dropdown.show();
|
|
8508
|
-
}
|
|
8509
|
-
}
|
|
8510
|
-
|
|
8511
8516
|
/**
|
|
8512
8517
|
* Validates value.
|
|
8513
8518
|
* @param {boolean} [force=false] - Whether to force validation.
|
|
@@ -8827,6 +8832,11 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8827
8832
|
'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
|
|
8828
8833
|
};
|
|
8829
8834
|
|
|
8835
|
+
const valueClasses = {
|
|
8836
|
+
'value': true,
|
|
8837
|
+
'body-default': true
|
|
8838
|
+
};
|
|
8839
|
+
|
|
8830
8840
|
return u`
|
|
8831
8841
|
<div
|
|
8832
8842
|
class="${e(this.commonWrapperClasses)}"
|
|
@@ -8859,7 +8869,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8859
8869
|
<slot name="label"></slot>
|
|
8860
8870
|
${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
|
|
8861
8871
|
</label>
|
|
8862
|
-
<div class="
|
|
8872
|
+
<div class="${e(valueClasses)}" id="value"></div>
|
|
8863
8873
|
<div id="placeholder" class="${e(placeholderClass)}">
|
|
8864
8874
|
${this.placeholder}
|
|
8865
8875
|
</div>
|
|
@@ -11,10 +11,6 @@
|
|
|
11
11
|
* @event auroSelect-valueSet - Notifies that the component has a new value set.
|
|
12
12
|
* @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
|
|
13
13
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
|
|
14
|
-
*
|
|
15
|
-
* @csspart dropdownTrigger - Apply CSS to the trigger content container.
|
|
16
|
-
* @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
|
|
17
|
-
* @csspart dropdownSize - Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
18
14
|
* @csspart helpText - Apply CSS to the help text.
|
|
19
15
|
*/
|
|
20
16
|
export class AuroSelect extends AuroElement {
|
|
@@ -322,6 +318,18 @@ export class AuroSelect extends AuroElement {
|
|
|
322
318
|
* @returns {void}
|
|
323
319
|
*/
|
|
324
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();
|
|
325
333
|
/**
|
|
326
334
|
* Returns classmap configuration for wrapper elements in each layout.
|
|
327
335
|
* @private
|
|
@@ -419,15 +427,10 @@ export class AuroSelect extends AuroElement {
|
|
|
419
427
|
*/
|
|
420
428
|
reset(): void;
|
|
421
429
|
/**
|
|
422
|
-
* Hide dropdownbib
|
|
423
|
-
* @
|
|
424
|
-
*/
|
|
425
|
-
hideBib(): void;
|
|
426
|
-
/**
|
|
427
|
-
* Shows the dropdown bib if there are options to show.
|
|
428
|
-
* @returns {void}
|
|
430
|
+
* Hide dropdownbib.
|
|
431
|
+
* @private
|
|
429
432
|
*/
|
|
430
|
-
|
|
433
|
+
private hideBib;
|
|
431
434
|
/**
|
|
432
435
|
* Validates value.
|
|
433
436
|
* @param {boolean} [force=false] - Whether to force validation.
|
|
@@ -4467,7 +4467,6 @@ let AuroElement$2 = class AuroElement extends LitElement {
|
|
|
4467
4467
|
* @slot trigger - Defines the content of the trigger.
|
|
4468
4468
|
* @csspart trigger - The trigger content container.
|
|
4469
4469
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
4470
|
-
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
4471
4470
|
* @csspart helpText - The helpText content container.
|
|
4472
4471
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
4473
4472
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -7528,7 +7527,7 @@ class AuroHelpText extends LitElement {
|
|
|
7528
7527
|
|
|
7529
7528
|
var helpTextVersion = '1.0.0';
|
|
7530
7529
|
|
|
7531
|
-
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([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}`;
|
|
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}.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-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-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-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)}[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{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}`;
|
|
7532
7531
|
|
|
7533
7532
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7534
7533
|
// See LICENSE in the project root for license information.
|
|
@@ -7548,10 +7547,6 @@ var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{d
|
|
|
7548
7547
|
* @event auroSelect-valueSet - Notifies that the component has a new value set.
|
|
7549
7548
|
* @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
|
|
7550
7549
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
|
|
7551
|
-
*
|
|
7552
|
-
* @csspart dropdownTrigger - Apply CSS to the trigger content container.
|
|
7553
|
-
* @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
|
|
7554
|
-
* @csspart dropdownSize - Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
7555
7550
|
* @csspart helpText - Apply CSS to the help text.
|
|
7556
7551
|
*/
|
|
7557
7552
|
|
|
@@ -7954,11 +7949,31 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7954
7949
|
get commonLabelClasses() {
|
|
7955
7950
|
return {
|
|
7956
7951
|
'is-disabled': this.disabled,
|
|
7957
|
-
'withValue': this.
|
|
7958
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7952
|
+
'withValue': this.hasValue,
|
|
7953
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0,
|
|
7954
|
+
[this.labelFontClass]: true
|
|
7959
7955
|
};
|
|
7960
7956
|
}
|
|
7961
7957
|
|
|
7958
|
+
/**
|
|
7959
|
+
* Returns the font class for the label based on state.
|
|
7960
|
+
* @returns {string} - Returns the font class for the label.
|
|
7961
|
+
* @private
|
|
7962
|
+
*/
|
|
7963
|
+
get labelFontClass() {
|
|
7964
|
+
if (this.hasValue) return 'body-xs';
|
|
7965
|
+
return 'body-default';
|
|
7966
|
+
}
|
|
7967
|
+
|
|
7968
|
+
/**
|
|
7969
|
+
* Whether or not the component has a value.
|
|
7970
|
+
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
7971
|
+
* @private
|
|
7972
|
+
*/
|
|
7973
|
+
get hasValue() {
|
|
7974
|
+
return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
|
|
7975
|
+
}
|
|
7976
|
+
|
|
7962
7977
|
/**
|
|
7963
7978
|
* Returns classmap configuration for wrapper elements in each layout.
|
|
7964
7979
|
* @private
|
|
@@ -8443,25 +8458,15 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8443
8458
|
}
|
|
8444
8459
|
|
|
8445
8460
|
/**
|
|
8446
|
-
* Hide dropdownbib
|
|
8447
|
-
* @
|
|
8461
|
+
* Hide dropdownbib.
|
|
8462
|
+
* @private
|
|
8448
8463
|
*/
|
|
8449
8464
|
hideBib() {
|
|
8450
|
-
if (this.dropdown
|
|
8465
|
+
if (this.dropdown) {
|
|
8451
8466
|
this.dropdown.hide();
|
|
8452
8467
|
}
|
|
8453
8468
|
}
|
|
8454
8469
|
|
|
8455
|
-
/**
|
|
8456
|
-
* Shows the dropdown bib if there are options to show.
|
|
8457
|
-
* @returns {void}
|
|
8458
|
-
*/
|
|
8459
|
-
showBib() {
|
|
8460
|
-
if (!this.dropdown.isPopoverVisible && !this.isHiddenWhileLoading) {
|
|
8461
|
-
this.dropdown.show();
|
|
8462
|
-
}
|
|
8463
|
-
}
|
|
8464
|
-
|
|
8465
8470
|
/**
|
|
8466
8471
|
* Validates value.
|
|
8467
8472
|
* @param {boolean} [force=false] - Whether to force validation.
|
|
@@ -8781,6 +8786,11 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8781
8786
|
'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
|
|
8782
8787
|
};
|
|
8783
8788
|
|
|
8789
|
+
const valueClasses = {
|
|
8790
|
+
'value': true,
|
|
8791
|
+
'body-default': true
|
|
8792
|
+
};
|
|
8793
|
+
|
|
8784
8794
|
return html`
|
|
8785
8795
|
<div
|
|
8786
8796
|
class="${classMap(this.commonWrapperClasses)}"
|
|
@@ -8813,7 +8823,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8813
8823
|
<slot name="label"></slot>
|
|
8814
8824
|
${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
|
|
8815
8825
|
</label>
|
|
8816
|
-
<div class="
|
|
8826
|
+
<div class="${classMap(valueClasses)}" id="value"></div>
|
|
8817
8827
|
<div id="placeholder" class="${classMap(placeholderClass)}">
|
|
8818
8828
|
${this.placeholder}
|
|
8819
8829
|
</div>
|
|
@@ -4467,7 +4467,6 @@ let AuroElement$2 = class AuroElement extends LitElement {
|
|
|
4467
4467
|
* @slot trigger - Defines the content of the trigger.
|
|
4468
4468
|
* @csspart trigger - The trigger content container.
|
|
4469
4469
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
4470
|
-
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
4471
4470
|
* @csspart helpText - The helpText content container.
|
|
4472
4471
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
4473
4472
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -7528,7 +7527,7 @@ class AuroHelpText extends LitElement {
|
|
|
7528
7527
|
|
|
7529
7528
|
var helpTextVersion = '1.0.0';
|
|
7530
7529
|
|
|
7531
|
-
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([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}`;
|
|
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}.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-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-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-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)}[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{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}`;
|
|
7532
7531
|
|
|
7533
7532
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7534
7533
|
// See LICENSE in the project root for license information.
|
|
@@ -7548,10 +7547,6 @@ var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{d
|
|
|
7548
7547
|
* @event auroSelect-valueSet - Notifies that the component has a new value set.
|
|
7549
7548
|
* @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
|
|
7550
7549
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
|
|
7551
|
-
*
|
|
7552
|
-
* @csspart dropdownTrigger - Apply CSS to the trigger content container.
|
|
7553
|
-
* @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
|
|
7554
|
-
* @csspart dropdownSize - Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
7555
7550
|
* @csspart helpText - Apply CSS to the help text.
|
|
7556
7551
|
*/
|
|
7557
7552
|
|
|
@@ -7954,11 +7949,31 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7954
7949
|
get commonLabelClasses() {
|
|
7955
7950
|
return {
|
|
7956
7951
|
'is-disabled': this.disabled,
|
|
7957
|
-
'withValue': this.
|
|
7958
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7952
|
+
'withValue': this.hasValue,
|
|
7953
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0,
|
|
7954
|
+
[this.labelFontClass]: true
|
|
7959
7955
|
};
|
|
7960
7956
|
}
|
|
7961
7957
|
|
|
7958
|
+
/**
|
|
7959
|
+
* Returns the font class for the label based on state.
|
|
7960
|
+
* @returns {string} - Returns the font class for the label.
|
|
7961
|
+
* @private
|
|
7962
|
+
*/
|
|
7963
|
+
get labelFontClass() {
|
|
7964
|
+
if (this.hasValue) return 'body-xs';
|
|
7965
|
+
return 'body-default';
|
|
7966
|
+
}
|
|
7967
|
+
|
|
7968
|
+
/**
|
|
7969
|
+
* Whether or not the component has a value.
|
|
7970
|
+
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
7971
|
+
* @private
|
|
7972
|
+
*/
|
|
7973
|
+
get hasValue() {
|
|
7974
|
+
return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
|
|
7975
|
+
}
|
|
7976
|
+
|
|
7962
7977
|
/**
|
|
7963
7978
|
* Returns classmap configuration for wrapper elements in each layout.
|
|
7964
7979
|
* @private
|
|
@@ -8443,25 +8458,15 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8443
8458
|
}
|
|
8444
8459
|
|
|
8445
8460
|
/**
|
|
8446
|
-
* Hide dropdownbib
|
|
8447
|
-
* @
|
|
8461
|
+
* Hide dropdownbib.
|
|
8462
|
+
* @private
|
|
8448
8463
|
*/
|
|
8449
8464
|
hideBib() {
|
|
8450
|
-
if (this.dropdown
|
|
8465
|
+
if (this.dropdown) {
|
|
8451
8466
|
this.dropdown.hide();
|
|
8452
8467
|
}
|
|
8453
8468
|
}
|
|
8454
8469
|
|
|
8455
|
-
/**
|
|
8456
|
-
* Shows the dropdown bib if there are options to show.
|
|
8457
|
-
* @returns {void}
|
|
8458
|
-
*/
|
|
8459
|
-
showBib() {
|
|
8460
|
-
if (!this.dropdown.isPopoverVisible && !this.isHiddenWhileLoading) {
|
|
8461
|
-
this.dropdown.show();
|
|
8462
|
-
}
|
|
8463
|
-
}
|
|
8464
|
-
|
|
8465
8470
|
/**
|
|
8466
8471
|
* Validates value.
|
|
8467
8472
|
* @param {boolean} [force=false] - Whether to force validation.
|
|
@@ -8781,6 +8786,11 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8781
8786
|
'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
|
|
8782
8787
|
};
|
|
8783
8788
|
|
|
8789
|
+
const valueClasses = {
|
|
8790
|
+
'value': true,
|
|
8791
|
+
'body-default': true
|
|
8792
|
+
};
|
|
8793
|
+
|
|
8784
8794
|
return html`
|
|
8785
8795
|
<div
|
|
8786
8796
|
class="${classMap(this.commonWrapperClasses)}"
|
|
@@ -8813,7 +8823,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8813
8823
|
<slot name="label"></slot>
|
|
8814
8824
|
${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
|
|
8815
8825
|
</label>
|
|
8816
|
-
<div class="
|
|
8826
|
+
<div class="${classMap(valueClasses)}" id="value"></div>
|
|
8817
8827
|
<div id="placeholder" class="${classMap(placeholderClass)}">
|
|
8818
8828
|
${this.placeholder}
|
|
8819
8829
|
</div>
|
package/package.json
CHANGED