@aurodesignsystem-dev/auro-formkit 0.0.0-pr788.2 → 0.0.0-pr788.3
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.min.js +112 -17
- package/components/combobox/demo/index.md +2 -4
- package/components/combobox/demo/index.min.js +112 -17
- package/components/combobox/dist/auro-combobox.d.ts +8 -2
- package/components/combobox/dist/index.js +103 -15
- package/components/combobox/dist/registered.js +103 -15
- package/components/counter/demo/api.min.js +11 -9
- package/components/counter/demo/index.min.js +11 -9
- package/components/counter/dist/index.js +11 -9
- package/components/counter/dist/registered.js +11 -9
- package/components/datepicker/demo/api.min.js +126 -42
- package/components/datepicker/demo/index.min.js +126 -42
- package/components/datepicker/dist/index.js +126 -42
- package/components/datepicker/dist/registered.js +126 -42
- package/components/dropdown/demo/api.min.js +2 -2
- package/components/dropdown/demo/index.min.js +2 -2
- package/components/dropdown/dist/index.js +2 -2
- package/components/dropdown/dist/registered.js +2 -2
- package/components/input/demo/api.md +2 -5
- package/components/input/demo/api.min.js +89 -12
- package/components/input/demo/index.md +2 -2
- package/components/input/demo/index.min.js +89 -12
- package/components/input/dist/auro-input.d.ts +24 -0
- package/components/input/dist/base-input.d.ts +8 -2
- package/components/input/dist/index.js +89 -12
- package/components/input/dist/registered.js +89 -12
- package/components/menu/demo/api.min.js +9 -2
- package/components/menu/demo/index.min.js +9 -2
- package/components/menu/dist/index.js +9 -2
- package/components/menu/dist/registered.js +9 -2
- package/components/select/demo/api.md +1 -3
- package/components/select/demo/api.min.js +73 -34
- package/components/select/demo/index.min.js +73 -34
- package/components/select/dist/auro-select.d.ts +11 -5
- package/components/select/dist/index.js +64 -32
- package/components/select/dist/registered.js +64 -32
- package/package.json +1 -1
- package/components/input/dist/styles/default/input-css.d.ts +0 -2
- package/components/input/dist/styles/default/label-css.d.ts +0 -2
- package/components/input/dist/styles/input-css.d.ts +0 -2
|
@@ -4194,11 +4194,11 @@ var shapeSizeCss$1 = i$5`.wrapper{overflow:hidden}.shape-classic-xl,.shape-class
|
|
|
4194
4194
|
|
|
4195
4195
|
var colorCss$1$2 = i$5`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
4196
4196
|
|
|
4197
|
-
var styleCss$1$2 = i$5`:host{display:block
|
|
4197
|
+
var styleCss$1$2 = i$5`:host{position:relative;display:block}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;box-sizing:border-box;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
|
|
4198
4198
|
|
|
4199
4199
|
var classicColorCss = i$5``;
|
|
4200
4200
|
|
|
4201
|
-
var classicLayoutCss = i$5`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic])
|
|
4201
|
+
var classicLayoutCss = i$5`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) label{transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .wrapper{display:flex;box-sizing:border-box;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}`;
|
|
4202
4202
|
|
|
4203
4203
|
var styleEmphasizedCss = i$5`.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
|
|
4204
4204
|
|
|
@@ -7541,7 +7541,7 @@ class AuroHelpText extends i$2 {
|
|
|
7541
7541
|
|
|
7542
7542
|
var helpTextVersion = '1.0.0';
|
|
7543
7543
|
|
|
7544
|
-
var styleCss$3 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color)}:host{display:inline-block}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) label.withValue{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
7544
|
+
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*=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;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}: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}`;
|
|
7545
7545
|
|
|
7546
7546
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7547
7547
|
// See LICENSE in the project root for license information.
|
|
@@ -7578,11 +7578,6 @@ class AuroSelect extends AuroElement$4 {
|
|
|
7578
7578
|
|
|
7579
7579
|
this.matchWidth = false;
|
|
7580
7580
|
|
|
7581
|
-
// Layout Config
|
|
7582
|
-
this.layout = 'snowflake';
|
|
7583
|
-
this.shape = 'snowflake';
|
|
7584
|
-
this.size = 'xl';
|
|
7585
|
-
|
|
7586
7581
|
// floaterConfig
|
|
7587
7582
|
this.placement = 'bottom-start';
|
|
7588
7583
|
this.offset = 0;
|
|
@@ -7591,10 +7586,6 @@ class AuroSelect extends AuroElement$4 {
|
|
|
7591
7586
|
|
|
7592
7587
|
this.forceDisplayValue = false;
|
|
7593
7588
|
|
|
7594
|
-
this.layout = 'classic';
|
|
7595
|
-
this.shape = 'classic';
|
|
7596
|
-
this.size = 'xl';
|
|
7597
|
-
|
|
7598
7589
|
/**
|
|
7599
7590
|
* @private
|
|
7600
7591
|
*/
|
|
@@ -7660,6 +7651,11 @@ class AuroSelect extends AuroElement$4 {
|
|
|
7660
7651
|
this.fullscreenBreakpoint = 'sm';
|
|
7661
7652
|
this.onDark = false;
|
|
7662
7653
|
this.isPopoverVisible = false;
|
|
7654
|
+
|
|
7655
|
+
// Layout Config
|
|
7656
|
+
this.layout = 'classic';
|
|
7657
|
+
this.shape = 'classic';
|
|
7658
|
+
this.size = 'lg';
|
|
7663
7659
|
}
|
|
7664
7660
|
|
|
7665
7661
|
// This function is to define props used within the scope of this component
|
|
@@ -7962,22 +7958,52 @@ class AuroSelect extends AuroElement$4 {
|
|
|
7962
7958
|
* @returns {void}
|
|
7963
7959
|
*/
|
|
7964
7960
|
get commonLabelClasses() {
|
|
7965
|
-
|
|
7961
|
+
const obj = {
|
|
7966
7962
|
'is-disabled': this.disabled,
|
|
7967
|
-
'withValue':
|
|
7968
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7963
|
+
'withValue': false,
|
|
7964
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0,
|
|
7965
|
+
[this.labelFontClass]: true
|
|
7969
7966
|
};
|
|
7967
|
+
|
|
7968
|
+
if (this.placeholder) {
|
|
7969
|
+
obj.withValue = true;
|
|
7970
|
+
} else if (this.optionSelected) {
|
|
7971
|
+
if (Array.isArray(this.optionSelected)) {
|
|
7972
|
+
obj.withValue = this.optionSelected.length > 0;
|
|
7973
|
+
} else {
|
|
7974
|
+
obj.withValue = true;
|
|
7975
|
+
}
|
|
7976
|
+
}
|
|
7977
|
+
return obj;
|
|
7970
7978
|
}
|
|
7971
7979
|
|
|
7972
7980
|
/**
|
|
7973
|
-
* Returns
|
|
7981
|
+
* Returns the label font class based on layout and selection state.
|
|
7974
7982
|
* @private
|
|
7975
|
-
* @returns {
|
|
7983
|
+
* @returns {string} - The font class for the label.
|
|
7976
7984
|
*/
|
|
7977
|
-
get
|
|
7978
|
-
|
|
7979
|
-
|
|
7980
|
-
|
|
7985
|
+
get labelFontClass() {
|
|
7986
|
+
const isSelected = this.hasValue;
|
|
7987
|
+
|
|
7988
|
+
if (this.layout.startsWith('emphasized')) {
|
|
7989
|
+
return isSelected ? 'body-sm' : 'accent-xl';
|
|
7990
|
+
}
|
|
7991
|
+
|
|
7992
|
+
if (this.layout === 'snowflake') {
|
|
7993
|
+
return isSelected ? 'body-xs' : 'body-lg';
|
|
7994
|
+
}
|
|
7995
|
+
|
|
7996
|
+
// classic layout (default)
|
|
7997
|
+
return isSelected ? 'body-xs' : 'body-default';
|
|
7998
|
+
}
|
|
7999
|
+
|
|
8000
|
+
/**
|
|
8001
|
+
* Whether or not the component has a value.
|
|
8002
|
+
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
8003
|
+
* @private
|
|
8004
|
+
*/
|
|
8005
|
+
get hasValue() {
|
|
8006
|
+
return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
|
|
7981
8007
|
}
|
|
7982
8008
|
|
|
7983
8009
|
/**
|
|
@@ -8133,7 +8159,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8133
8159
|
|
|
8134
8160
|
this.menu.addEventListener('auroMenu-selectValueReset', () => {
|
|
8135
8161
|
this.optionSelected = this.menu.optionSelected;
|
|
8136
|
-
this.
|
|
8162
|
+
this.validate(this);
|
|
8137
8163
|
});
|
|
8138
8164
|
|
|
8139
8165
|
this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
|
|
@@ -8217,7 +8243,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8217
8243
|
this.addEventListener('focusin', this.handleFocusin);
|
|
8218
8244
|
|
|
8219
8245
|
this.addEventListener('blur', () => {
|
|
8220
|
-
this.
|
|
8246
|
+
this.validate();
|
|
8221
8247
|
this.hasFocus = false;
|
|
8222
8248
|
});
|
|
8223
8249
|
}
|
|
@@ -8406,7 +8432,11 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8406
8432
|
if (!this.menu) return;
|
|
8407
8433
|
|
|
8408
8434
|
this.menu.setAttribute('value', value);
|
|
8409
|
-
|
|
8435
|
+
if (value) {
|
|
8436
|
+
this.menu.value = value;
|
|
8437
|
+
} else {
|
|
8438
|
+
this.menu.reset();
|
|
8439
|
+
}
|
|
8410
8440
|
await this.menu.updateComplete;
|
|
8411
8441
|
}
|
|
8412
8442
|
|
|
@@ -8427,7 +8457,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8427
8457
|
}
|
|
8428
8458
|
|
|
8429
8459
|
this._updateNativeSelect();
|
|
8430
|
-
this.
|
|
8460
|
+
this.validate();
|
|
8431
8461
|
|
|
8432
8462
|
// LEGACY EVENT
|
|
8433
8463
|
this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
|
|
@@ -8624,7 +8654,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8624
8654
|
'displayValue': true,
|
|
8625
8655
|
'hasContent': this.hasDisplayValueContent,
|
|
8626
8656
|
'hasFocus': this.isPopoverVisible,
|
|
8627
|
-
'withValue': this.
|
|
8657
|
+
'withValue': this.commonLabelClasses.widthValue,
|
|
8628
8658
|
'force': this.forceDisplayValue,
|
|
8629
8659
|
};
|
|
8630
8660
|
|
|
@@ -8635,7 +8665,6 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8635
8665
|
|
|
8636
8666
|
return u`
|
|
8637
8667
|
<div
|
|
8638
|
-
class="${e(this.commonWrapperClasses)}"
|
|
8639
8668
|
part="wrapper">
|
|
8640
8669
|
<div id="slotHolder" aria-hidden="true">
|
|
8641
8670
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
@@ -8704,7 +8733,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8704
8733
|
'displayValue': true,
|
|
8705
8734
|
'hasContent': this.hasDisplayValueContent,
|
|
8706
8735
|
'hasFocus': this.isPopoverVisible,
|
|
8707
|
-
'withValue': this.
|
|
8736
|
+
'withValue': this.commonLabelClasses.widthValue,
|
|
8708
8737
|
'force': this.forceDisplayValue,
|
|
8709
8738
|
};
|
|
8710
8739
|
|
|
@@ -8715,7 +8744,6 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8715
8744
|
|
|
8716
8745
|
return u`
|
|
8717
8746
|
<div
|
|
8718
|
-
class="${e(this.commonWrapperClasses)}"
|
|
8719
8747
|
part="wrapper">
|
|
8720
8748
|
<div id="slotHolder" aria-hidden="true">
|
|
8721
8749
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
@@ -8784,7 +8812,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8784
8812
|
'displayValue': true,
|
|
8785
8813
|
'hasContent': this.hasDisplayValueContent,
|
|
8786
8814
|
'hasFocus': this.isPopoverVisible,
|
|
8787
|
-
'withValue': this.
|
|
8815
|
+
'withValue': this.commonLabelClasses.widthValue,
|
|
8788
8816
|
'force': this.forceDisplayValue,
|
|
8789
8817
|
};
|
|
8790
8818
|
|
|
@@ -8793,9 +8821,13 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8793
8821
|
'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
|
|
8794
8822
|
};
|
|
8795
8823
|
|
|
8824
|
+
const valueClasses = {
|
|
8825
|
+
'value': true,
|
|
8826
|
+
'body-default': true
|
|
8827
|
+
};
|
|
8828
|
+
|
|
8796
8829
|
return u`
|
|
8797
8830
|
<div
|
|
8798
|
-
class="${e(this.commonWrapperClasses)}"
|
|
8799
8831
|
part="wrapper">
|
|
8800
8832
|
<div id="slotHolder" aria-hidden="true">
|
|
8801
8833
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
@@ -8825,7 +8857,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8825
8857
|
<slot name="label"></slot>
|
|
8826
8858
|
${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
|
|
8827
8859
|
</label>
|
|
8828
|
-
<div class="
|
|
8860
|
+
<div class="${e(valueClasses)}" id="value"></div>
|
|
8829
8861
|
<div id="placeholder" class="${e(placeholderClass)}">
|
|
8830
8862
|
${this.placeholder}
|
|
8831
8863
|
</div>
|
|
@@ -10169,12 +10201,12 @@ class AuroMenuOption extends AuroElement$4 {
|
|
|
10169
10201
|
/**
|
|
10170
10202
|
* @private
|
|
10171
10203
|
*/
|
|
10172
|
-
this.shape =
|
|
10204
|
+
this.shape = undefined;
|
|
10173
10205
|
|
|
10174
10206
|
/**
|
|
10175
10207
|
* @private
|
|
10176
10208
|
*/
|
|
10177
|
-
this.size =
|
|
10209
|
+
this.size = undefined;
|
|
10178
10210
|
|
|
10179
10211
|
/**
|
|
10180
10212
|
* Generate unique names for dependency components.
|
|
@@ -10247,6 +10279,13 @@ class AuroMenuOption extends AuroElement$4 {
|
|
|
10247
10279
|
// Add the tag name as an attribute if it is different than the component name
|
|
10248
10280
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
|
|
10249
10281
|
|
|
10282
|
+
if (!this.hasAttribute('size')) {
|
|
10283
|
+
this.size = this.parentElement.getAttribute('size') || 'sm';
|
|
10284
|
+
}
|
|
10285
|
+
if (!this.hasAttribute('shape')) {
|
|
10286
|
+
this.shape = this.parentElement.getAttribute('shape') || 'box';
|
|
10287
|
+
}
|
|
10288
|
+
|
|
10250
10289
|
this.setAttribute('role', 'option');
|
|
10251
10290
|
this.setAttribute('aria-selected', 'false');
|
|
10252
10291
|
|
|
@@ -251,8 +251,6 @@ export class AuroSelect extends AuroElement {
|
|
|
251
251
|
*/
|
|
252
252
|
static register(name?: string): void;
|
|
253
253
|
matchWidth: boolean;
|
|
254
|
-
shape: string;
|
|
255
|
-
size: string;
|
|
256
254
|
placement: string;
|
|
257
255
|
offset: number;
|
|
258
256
|
noFlip: boolean;
|
|
@@ -306,6 +304,8 @@ export class AuroSelect extends AuroElement {
|
|
|
306
304
|
fullscreenBreakpoint: string;
|
|
307
305
|
onDark: boolean;
|
|
308
306
|
isPopoverVisible: any;
|
|
307
|
+
shape: string;
|
|
308
|
+
size: string;
|
|
309
309
|
/**
|
|
310
310
|
* Formatted value based on `multiSelect` state.
|
|
311
311
|
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
@@ -320,11 +320,17 @@ export class AuroSelect extends AuroElement {
|
|
|
320
320
|
*/
|
|
321
321
|
private get commonLabelClasses();
|
|
322
322
|
/**
|
|
323
|
-
* Returns
|
|
323
|
+
* Returns the label font class based on layout and selection state.
|
|
324
|
+
* @private
|
|
325
|
+
* @returns {string} - The font class for the label.
|
|
326
|
+
*/
|
|
327
|
+
private get labelFontClass();
|
|
328
|
+
/**
|
|
329
|
+
* Whether or not the component has a value.
|
|
330
|
+
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
324
331
|
* @private
|
|
325
|
-
* @returns {object} - Returns classmap.
|
|
326
332
|
*/
|
|
327
|
-
private get
|
|
333
|
+
private get hasValue();
|
|
328
334
|
/**
|
|
329
335
|
* Binds all behavior needed to the dropdown after rendering.
|
|
330
336
|
* @private
|
|
@@ -4148,11 +4148,11 @@ var shapeSizeCss = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic
|
|
|
4148
4148
|
|
|
4149
4149
|
var colorCss$1$1 = css`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
4150
4150
|
|
|
4151
|
-
var styleCss$1$2 = css`:host{display:block
|
|
4151
|
+
var styleCss$1$2 = css`:host{position:relative;display:block}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;box-sizing:border-box;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
|
|
4152
4152
|
|
|
4153
4153
|
var classicColorCss = css``;
|
|
4154
4154
|
|
|
4155
|
-
var classicLayoutCss = css`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic])
|
|
4155
|
+
var classicLayoutCss = css`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) label{transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .wrapper{display:flex;box-sizing:border-box;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}`;
|
|
4156
4156
|
|
|
4157
4157
|
var styleEmphasizedCss = css`.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
|
|
4158
4158
|
|
|
@@ -7495,7 +7495,7 @@ class AuroHelpText extends LitElement {
|
|
|
7495
7495
|
|
|
7496
7496
|
var helpTextVersion = '1.0.0';
|
|
7497
7497
|
|
|
7498
|
-
var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color)}:host{display:inline-block}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) label.withValue{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
7498
|
+
var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color)}:host{display:inline-block}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=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;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}: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}`;
|
|
7499
7499
|
|
|
7500
7500
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7501
7501
|
// See LICENSE in the project root for license information.
|
|
@@ -7532,11 +7532,6 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7532
7532
|
|
|
7533
7533
|
this.matchWidth = false;
|
|
7534
7534
|
|
|
7535
|
-
// Layout Config
|
|
7536
|
-
this.layout = 'snowflake';
|
|
7537
|
-
this.shape = 'snowflake';
|
|
7538
|
-
this.size = 'xl';
|
|
7539
|
-
|
|
7540
7535
|
// floaterConfig
|
|
7541
7536
|
this.placement = 'bottom-start';
|
|
7542
7537
|
this.offset = 0;
|
|
@@ -7545,10 +7540,6 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7545
7540
|
|
|
7546
7541
|
this.forceDisplayValue = false;
|
|
7547
7542
|
|
|
7548
|
-
this.layout = 'classic';
|
|
7549
|
-
this.shape = 'classic';
|
|
7550
|
-
this.size = 'xl';
|
|
7551
|
-
|
|
7552
7543
|
/**
|
|
7553
7544
|
* @private
|
|
7554
7545
|
*/
|
|
@@ -7614,6 +7605,11 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7614
7605
|
this.fullscreenBreakpoint = 'sm';
|
|
7615
7606
|
this.onDark = false;
|
|
7616
7607
|
this.isPopoverVisible = false;
|
|
7608
|
+
|
|
7609
|
+
// Layout Config
|
|
7610
|
+
this.layout = 'classic';
|
|
7611
|
+
this.shape = 'classic';
|
|
7612
|
+
this.size = 'lg';
|
|
7617
7613
|
}
|
|
7618
7614
|
|
|
7619
7615
|
// This function is to define props used within the scope of this component
|
|
@@ -7916,22 +7912,52 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7916
7912
|
* @returns {void}
|
|
7917
7913
|
*/
|
|
7918
7914
|
get commonLabelClasses() {
|
|
7919
|
-
|
|
7915
|
+
const obj = {
|
|
7920
7916
|
'is-disabled': this.disabled,
|
|
7921
|
-
'withValue':
|
|
7922
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7917
|
+
'withValue': false,
|
|
7918
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0,
|
|
7919
|
+
[this.labelFontClass]: true
|
|
7923
7920
|
};
|
|
7921
|
+
|
|
7922
|
+
if (this.placeholder) {
|
|
7923
|
+
obj.withValue = true;
|
|
7924
|
+
} else if (this.optionSelected) {
|
|
7925
|
+
if (Array.isArray(this.optionSelected)) {
|
|
7926
|
+
obj.withValue = this.optionSelected.length > 0;
|
|
7927
|
+
} else {
|
|
7928
|
+
obj.withValue = true;
|
|
7929
|
+
}
|
|
7930
|
+
}
|
|
7931
|
+
return obj;
|
|
7924
7932
|
}
|
|
7925
7933
|
|
|
7926
7934
|
/**
|
|
7927
|
-
* Returns
|
|
7935
|
+
* Returns the label font class based on layout and selection state.
|
|
7928
7936
|
* @private
|
|
7929
|
-
* @returns {
|
|
7937
|
+
* @returns {string} - The font class for the label.
|
|
7930
7938
|
*/
|
|
7931
|
-
get
|
|
7932
|
-
|
|
7933
|
-
|
|
7934
|
-
|
|
7939
|
+
get labelFontClass() {
|
|
7940
|
+
const isSelected = this.hasValue;
|
|
7941
|
+
|
|
7942
|
+
if (this.layout.startsWith('emphasized')) {
|
|
7943
|
+
return isSelected ? 'body-sm' : 'accent-xl';
|
|
7944
|
+
}
|
|
7945
|
+
|
|
7946
|
+
if (this.layout === 'snowflake') {
|
|
7947
|
+
return isSelected ? 'body-xs' : 'body-lg';
|
|
7948
|
+
}
|
|
7949
|
+
|
|
7950
|
+
// classic layout (default)
|
|
7951
|
+
return isSelected ? 'body-xs' : 'body-default';
|
|
7952
|
+
}
|
|
7953
|
+
|
|
7954
|
+
/**
|
|
7955
|
+
* Whether or not the component has a value.
|
|
7956
|
+
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
7957
|
+
* @private
|
|
7958
|
+
*/
|
|
7959
|
+
get hasValue() {
|
|
7960
|
+
return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
|
|
7935
7961
|
}
|
|
7936
7962
|
|
|
7937
7963
|
/**
|
|
@@ -8087,7 +8113,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8087
8113
|
|
|
8088
8114
|
this.menu.addEventListener('auroMenu-selectValueReset', () => {
|
|
8089
8115
|
this.optionSelected = this.menu.optionSelected;
|
|
8090
|
-
this.
|
|
8116
|
+
this.validate(this);
|
|
8091
8117
|
});
|
|
8092
8118
|
|
|
8093
8119
|
this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
|
|
@@ -8171,7 +8197,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8171
8197
|
this.addEventListener('focusin', this.handleFocusin);
|
|
8172
8198
|
|
|
8173
8199
|
this.addEventListener('blur', () => {
|
|
8174
|
-
this.
|
|
8200
|
+
this.validate();
|
|
8175
8201
|
this.hasFocus = false;
|
|
8176
8202
|
});
|
|
8177
8203
|
}
|
|
@@ -8360,7 +8386,11 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8360
8386
|
if (!this.menu) return;
|
|
8361
8387
|
|
|
8362
8388
|
this.menu.setAttribute('value', value);
|
|
8363
|
-
|
|
8389
|
+
if (value) {
|
|
8390
|
+
this.menu.value = value;
|
|
8391
|
+
} else {
|
|
8392
|
+
this.menu.reset();
|
|
8393
|
+
}
|
|
8364
8394
|
await this.menu.updateComplete;
|
|
8365
8395
|
}
|
|
8366
8396
|
|
|
@@ -8381,7 +8411,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8381
8411
|
}
|
|
8382
8412
|
|
|
8383
8413
|
this._updateNativeSelect();
|
|
8384
|
-
this.
|
|
8414
|
+
this.validate();
|
|
8385
8415
|
|
|
8386
8416
|
// LEGACY EVENT
|
|
8387
8417
|
this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
|
|
@@ -8578,7 +8608,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8578
8608
|
'displayValue': true,
|
|
8579
8609
|
'hasContent': this.hasDisplayValueContent,
|
|
8580
8610
|
'hasFocus': this.isPopoverVisible,
|
|
8581
|
-
'withValue': this.
|
|
8611
|
+
'withValue': this.commonLabelClasses.widthValue,
|
|
8582
8612
|
'force': this.forceDisplayValue,
|
|
8583
8613
|
};
|
|
8584
8614
|
|
|
@@ -8589,7 +8619,6 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8589
8619
|
|
|
8590
8620
|
return html`
|
|
8591
8621
|
<div
|
|
8592
|
-
class="${classMap(this.commonWrapperClasses)}"
|
|
8593
8622
|
part="wrapper">
|
|
8594
8623
|
<div id="slotHolder" aria-hidden="true">
|
|
8595
8624
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
@@ -8658,7 +8687,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8658
8687
|
'displayValue': true,
|
|
8659
8688
|
'hasContent': this.hasDisplayValueContent,
|
|
8660
8689
|
'hasFocus': this.isPopoverVisible,
|
|
8661
|
-
'withValue': this.
|
|
8690
|
+
'withValue': this.commonLabelClasses.widthValue,
|
|
8662
8691
|
'force': this.forceDisplayValue,
|
|
8663
8692
|
};
|
|
8664
8693
|
|
|
@@ -8669,7 +8698,6 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8669
8698
|
|
|
8670
8699
|
return html`
|
|
8671
8700
|
<div
|
|
8672
|
-
class="${classMap(this.commonWrapperClasses)}"
|
|
8673
8701
|
part="wrapper">
|
|
8674
8702
|
<div id="slotHolder" aria-hidden="true">
|
|
8675
8703
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
@@ -8738,7 +8766,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8738
8766
|
'displayValue': true,
|
|
8739
8767
|
'hasContent': this.hasDisplayValueContent,
|
|
8740
8768
|
'hasFocus': this.isPopoverVisible,
|
|
8741
|
-
'withValue': this.
|
|
8769
|
+
'withValue': this.commonLabelClasses.widthValue,
|
|
8742
8770
|
'force': this.forceDisplayValue,
|
|
8743
8771
|
};
|
|
8744
8772
|
|
|
@@ -8747,9 +8775,13 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8747
8775
|
'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
|
|
8748
8776
|
};
|
|
8749
8777
|
|
|
8778
|
+
const valueClasses = {
|
|
8779
|
+
'value': true,
|
|
8780
|
+
'body-default': true
|
|
8781
|
+
};
|
|
8782
|
+
|
|
8750
8783
|
return html`
|
|
8751
8784
|
<div
|
|
8752
|
-
class="${classMap(this.commonWrapperClasses)}"
|
|
8753
8785
|
part="wrapper">
|
|
8754
8786
|
<div id="slotHolder" aria-hidden="true">
|
|
8755
8787
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
@@ -8779,7 +8811,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8779
8811
|
<slot name="label"></slot>
|
|
8780
8812
|
${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
|
|
8781
8813
|
</label>
|
|
8782
|
-
<div class="
|
|
8814
|
+
<div class="${classMap(valueClasses)}" id="value"></div>
|
|
8783
8815
|
<div id="placeholder" class="${classMap(placeholderClass)}">
|
|
8784
8816
|
${this.placeholder}
|
|
8785
8817
|
</div>
|