@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.81 → 0.0.0-pr624.82
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 +96 -13
- package/components/combobox/demo/index.md +2 -4
- package/components/combobox/demo/index.min.js +96 -13
- package/components/combobox/dist/auro-combobox.d.ts +8 -2
- package/components/combobox/dist/index.js +96 -13
- package/components/combobox/dist/registered.js +96 -13
- package/components/counter/demo/api.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/api.min.js +84 -12
- package/components/datepicker/demo/index.min.js +84 -12
- package/components/datepicker/dist/index.js +84 -12
- package/components/datepicker/dist/registered.js +84 -12
- 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 +82 -10
- package/components/input/demo/index.md +2 -2
- package/components/input/demo/index.min.js +82 -10
- 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 +82 -10
- package/components/input/dist/registered.js +82 -10
- package/components/select/demo/api.md +1 -3
- package/components/select/demo/api.min.js +44 -27
- package/components/select/demo/index.min.js +44 -27
- package/components/select/dist/auro-select.d.ts +11 -5
- package/components/select/dist/index.js +44 -27
- package/components/select/dist/registered.js +44 -27
- 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;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
|
|
|
@@ -7576,7 +7576,7 @@ class AuroHelpText extends i$2 {
|
|
|
7576
7576
|
|
|
7577
7577
|
var helpTextVersion = '1.0.0';
|
|
7578
7578
|
|
|
7579
|
-
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}`;
|
|
7579
|
+
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}`;
|
|
7580
7580
|
|
|
7581
7581
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7582
7582
|
// See LICENSE in the project root for license information.
|
|
@@ -7612,11 +7612,6 @@ class AuroSelect extends AuroElement$4 {
|
|
|
7612
7612
|
|
|
7613
7613
|
this.matchWidth = false;
|
|
7614
7614
|
|
|
7615
|
-
// Layout Config
|
|
7616
|
-
this.layout = 'snowflake';
|
|
7617
|
-
this.shape = 'snowflake';
|
|
7618
|
-
this.size = 'xl';
|
|
7619
|
-
|
|
7620
7615
|
// floaterConfig
|
|
7621
7616
|
this.placement = 'bottom-start';
|
|
7622
7617
|
this.offset = 0;
|
|
@@ -7625,10 +7620,6 @@ class AuroSelect extends AuroElement$4 {
|
|
|
7625
7620
|
|
|
7626
7621
|
this.forceDisplayValue = false;
|
|
7627
7622
|
|
|
7628
|
-
this.layout = 'classic';
|
|
7629
|
-
this.shape = 'classic';
|
|
7630
|
-
this.size = 'xl';
|
|
7631
|
-
|
|
7632
7623
|
/**
|
|
7633
7624
|
* @private
|
|
7634
7625
|
*/
|
|
@@ -7694,6 +7685,11 @@ class AuroSelect extends AuroElement$4 {
|
|
|
7694
7685
|
this.fullscreenBreakpoint = 'sm';
|
|
7695
7686
|
this.onDark = false;
|
|
7696
7687
|
this.isPopoverVisible = false;
|
|
7688
|
+
|
|
7689
|
+
// Layout Config
|
|
7690
|
+
this.layout = 'classic';
|
|
7691
|
+
this.shape = 'classic';
|
|
7692
|
+
this.size = 'lg';
|
|
7697
7693
|
}
|
|
7698
7694
|
|
|
7699
7695
|
// This function is to define props used within the scope of this component
|
|
@@ -7998,20 +7994,39 @@ class AuroSelect extends AuroElement$4 {
|
|
|
7998
7994
|
get commonLabelClasses() {
|
|
7999
7995
|
return {
|
|
8000
7996
|
'is-disabled': this.disabled,
|
|
8001
|
-
'withValue': this.
|
|
8002
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7997
|
+
'withValue': this.hasValue,
|
|
7998
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0,
|
|
7999
|
+
[this.labelFontClass]: true
|
|
8003
8000
|
};
|
|
8004
8001
|
}
|
|
8005
8002
|
|
|
8006
8003
|
/**
|
|
8007
|
-
* Returns
|
|
8004
|
+
* Returns the label font class based on layout and selection state.
|
|
8008
8005
|
* @private
|
|
8009
|
-
* @returns {
|
|
8006
|
+
* @returns {string} - The font class for the label.
|
|
8010
8007
|
*/
|
|
8011
|
-
get
|
|
8012
|
-
|
|
8013
|
-
|
|
8014
|
-
|
|
8008
|
+
get labelFontClass() {
|
|
8009
|
+
const isSelected = this.hasValue;
|
|
8010
|
+
|
|
8011
|
+
if (this.layout.startsWith('emphasized')) {
|
|
8012
|
+
return isSelected ? 'body-sm' : 'accent-xl';
|
|
8013
|
+
}
|
|
8014
|
+
|
|
8015
|
+
if (this.layout === 'snowflake') {
|
|
8016
|
+
return isSelected ? 'body-xs' : 'body-lg';
|
|
8017
|
+
}
|
|
8018
|
+
|
|
8019
|
+
// classic layout (default)
|
|
8020
|
+
return isSelected ? 'body-xs' : 'body-default';
|
|
8021
|
+
}
|
|
8022
|
+
|
|
8023
|
+
/**
|
|
8024
|
+
* Whether or not the component has a value.
|
|
8025
|
+
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
8026
|
+
* @private
|
|
8027
|
+
*/
|
|
8028
|
+
get hasValue() {
|
|
8029
|
+
return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
|
|
8015
8030
|
}
|
|
8016
8031
|
|
|
8017
8032
|
/**
|
|
@@ -8167,7 +8182,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8167
8182
|
|
|
8168
8183
|
this.menu.addEventListener('auroMenu-selectValueReset', () => {
|
|
8169
8184
|
this.optionSelected = this.menu.optionSelected;
|
|
8170
|
-
this.
|
|
8185
|
+
this.validate(this);
|
|
8171
8186
|
});
|
|
8172
8187
|
|
|
8173
8188
|
this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
|
|
@@ -8251,7 +8266,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8251
8266
|
this.addEventListener('focusin', this.handleFocusin);
|
|
8252
8267
|
|
|
8253
8268
|
this.addEventListener('blur', () => {
|
|
8254
|
-
this.
|
|
8269
|
+
this.validate();
|
|
8255
8270
|
this.hasFocus = false;
|
|
8256
8271
|
});
|
|
8257
8272
|
}
|
|
@@ -8461,7 +8476,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8461
8476
|
}
|
|
8462
8477
|
|
|
8463
8478
|
this._updateNativeSelect();
|
|
8464
|
-
this.
|
|
8479
|
+
this.validate();
|
|
8465
8480
|
|
|
8466
8481
|
// LEGACY EVENT
|
|
8467
8482
|
this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
|
|
@@ -8669,7 +8684,6 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8669
8684
|
|
|
8670
8685
|
return u`
|
|
8671
8686
|
<div
|
|
8672
|
-
class="${e(this.commonWrapperClasses)}"
|
|
8673
8687
|
part="wrapper">
|
|
8674
8688
|
<div id="slotHolder" aria-hidden="true">
|
|
8675
8689
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
@@ -8748,7 +8762,6 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8748
8762
|
|
|
8749
8763
|
return u`
|
|
8750
8764
|
<div
|
|
8751
|
-
class="${e(this.commonWrapperClasses)}"
|
|
8752
8765
|
part="wrapper">
|
|
8753
8766
|
<div id="slotHolder" aria-hidden="true">
|
|
8754
8767
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
@@ -8825,9 +8838,13 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8825
8838
|
'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
|
|
8826
8839
|
};
|
|
8827
8840
|
|
|
8841
|
+
const valueClasses = {
|
|
8842
|
+
'value': true,
|
|
8843
|
+
'body-default': true
|
|
8844
|
+
};
|
|
8845
|
+
|
|
8828
8846
|
return u`
|
|
8829
8847
|
<div
|
|
8830
|
-
class="${e(this.commonWrapperClasses)}"
|
|
8831
8848
|
part="wrapper">
|
|
8832
8849
|
<div id="slotHolder" aria-hidden="true">
|
|
8833
8850
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
@@ -8857,7 +8874,7 @@ class AuroSelect extends AuroElement$4 {
|
|
|
8857
8874
|
<slot name="label"></slot>
|
|
8858
8875
|
${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
|
|
8859
8876
|
</label>
|
|
8860
|
-
<div class="
|
|
8877
|
+
<div class="${e(valueClasses)}" id="value"></div>
|
|
8861
8878
|
<div id="placeholder" class="${e(placeholderClass)}">
|
|
8862
8879
|
${this.placeholder}
|
|
8863
8880
|
</div>
|
|
@@ -250,8 +250,6 @@ export class AuroSelect extends AuroElement {
|
|
|
250
250
|
*/
|
|
251
251
|
static register(name?: string): void;
|
|
252
252
|
matchWidth: boolean;
|
|
253
|
-
shape: string;
|
|
254
|
-
size: string;
|
|
255
253
|
placement: string;
|
|
256
254
|
offset: number;
|
|
257
255
|
noFlip: boolean;
|
|
@@ -305,6 +303,8 @@ export class AuroSelect extends AuroElement {
|
|
|
305
303
|
fullscreenBreakpoint: string;
|
|
306
304
|
onDark: boolean;
|
|
307
305
|
isPopoverVisible: any;
|
|
306
|
+
shape: string;
|
|
307
|
+
size: string;
|
|
308
308
|
/**
|
|
309
309
|
* Formatted value based on `multiSelect` state.
|
|
310
310
|
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
@@ -319,11 +319,17 @@ export class AuroSelect extends AuroElement {
|
|
|
319
319
|
*/
|
|
320
320
|
private get commonLabelClasses();
|
|
321
321
|
/**
|
|
322
|
-
* Returns
|
|
322
|
+
* Returns the label font class based on layout and selection state.
|
|
323
|
+
* @private
|
|
324
|
+
* @returns {string} - The font class for the label.
|
|
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.
|
|
323
330
|
* @private
|
|
324
|
-
* @returns {object} - Returns classmap.
|
|
325
331
|
*/
|
|
326
|
-
private get
|
|
332
|
+
private get hasValue();
|
|
327
333
|
/**
|
|
328
334
|
* Binds all behavior needed to the dropdown after rendering.
|
|
329
335
|
* @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;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
|
|
|
@@ -7530,7 +7530,7 @@ class AuroHelpText extends LitElement {
|
|
|
7530
7530
|
|
|
7531
7531
|
var helpTextVersion = '1.0.0';
|
|
7532
7532
|
|
|
7533
|
-
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}`;
|
|
7533
|
+
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}`;
|
|
7534
7534
|
|
|
7535
7535
|
// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7536
7536
|
// See LICENSE in the project root for license information.
|
|
@@ -7566,11 +7566,6 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7566
7566
|
|
|
7567
7567
|
this.matchWidth = false;
|
|
7568
7568
|
|
|
7569
|
-
// Layout Config
|
|
7570
|
-
this.layout = 'snowflake';
|
|
7571
|
-
this.shape = 'snowflake';
|
|
7572
|
-
this.size = 'xl';
|
|
7573
|
-
|
|
7574
7569
|
// floaterConfig
|
|
7575
7570
|
this.placement = 'bottom-start';
|
|
7576
7571
|
this.offset = 0;
|
|
@@ -7579,10 +7574,6 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7579
7574
|
|
|
7580
7575
|
this.forceDisplayValue = false;
|
|
7581
7576
|
|
|
7582
|
-
this.layout = 'classic';
|
|
7583
|
-
this.shape = 'classic';
|
|
7584
|
-
this.size = 'xl';
|
|
7585
|
-
|
|
7586
7577
|
/**
|
|
7587
7578
|
* @private
|
|
7588
7579
|
*/
|
|
@@ -7648,6 +7639,11 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7648
7639
|
this.fullscreenBreakpoint = 'sm';
|
|
7649
7640
|
this.onDark = false;
|
|
7650
7641
|
this.isPopoverVisible = false;
|
|
7642
|
+
|
|
7643
|
+
// Layout Config
|
|
7644
|
+
this.layout = 'classic';
|
|
7645
|
+
this.shape = 'classic';
|
|
7646
|
+
this.size = 'lg';
|
|
7651
7647
|
}
|
|
7652
7648
|
|
|
7653
7649
|
// This function is to define props used within the scope of this component
|
|
@@ -7952,20 +7948,39 @@ class AuroSelect extends AuroElement$3 {
|
|
|
7952
7948
|
get commonLabelClasses() {
|
|
7953
7949
|
return {
|
|
7954
7950
|
'is-disabled': this.disabled,
|
|
7955
|
-
'withValue': this.
|
|
7956
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7951
|
+
'withValue': this.hasValue,
|
|
7952
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0,
|
|
7953
|
+
[this.labelFontClass]: true
|
|
7957
7954
|
};
|
|
7958
7955
|
}
|
|
7959
7956
|
|
|
7960
7957
|
/**
|
|
7961
|
-
* Returns
|
|
7958
|
+
* Returns the label font class based on layout and selection state.
|
|
7962
7959
|
* @private
|
|
7963
|
-
* @returns {
|
|
7960
|
+
* @returns {string} - The font class for the label.
|
|
7964
7961
|
*/
|
|
7965
|
-
get
|
|
7966
|
-
|
|
7967
|
-
|
|
7968
|
-
|
|
7962
|
+
get labelFontClass() {
|
|
7963
|
+
const isSelected = this.hasValue;
|
|
7964
|
+
|
|
7965
|
+
if (this.layout.startsWith('emphasized')) {
|
|
7966
|
+
return isSelected ? 'body-sm' : 'accent-xl';
|
|
7967
|
+
}
|
|
7968
|
+
|
|
7969
|
+
if (this.layout === 'snowflake') {
|
|
7970
|
+
return isSelected ? 'body-xs' : 'body-lg';
|
|
7971
|
+
}
|
|
7972
|
+
|
|
7973
|
+
// classic layout (default)
|
|
7974
|
+
return isSelected ? 'body-xs' : 'body-default';
|
|
7975
|
+
}
|
|
7976
|
+
|
|
7977
|
+
/**
|
|
7978
|
+
* Whether or not the component has a value.
|
|
7979
|
+
* @returns {boolean} - Returns true if the component has a value or placeholder.
|
|
7980
|
+
* @private
|
|
7981
|
+
*/
|
|
7982
|
+
get hasValue() {
|
|
7983
|
+
return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
|
|
7969
7984
|
}
|
|
7970
7985
|
|
|
7971
7986
|
/**
|
|
@@ -8121,7 +8136,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8121
8136
|
|
|
8122
8137
|
this.menu.addEventListener('auroMenu-selectValueReset', () => {
|
|
8123
8138
|
this.optionSelected = this.menu.optionSelected;
|
|
8124
|
-
this.
|
|
8139
|
+
this.validate(this);
|
|
8125
8140
|
});
|
|
8126
8141
|
|
|
8127
8142
|
this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
|
|
@@ -8205,7 +8220,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8205
8220
|
this.addEventListener('focusin', this.handleFocusin);
|
|
8206
8221
|
|
|
8207
8222
|
this.addEventListener('blur', () => {
|
|
8208
|
-
this.
|
|
8223
|
+
this.validate();
|
|
8209
8224
|
this.hasFocus = false;
|
|
8210
8225
|
});
|
|
8211
8226
|
}
|
|
@@ -8415,7 +8430,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8415
8430
|
}
|
|
8416
8431
|
|
|
8417
8432
|
this._updateNativeSelect();
|
|
8418
|
-
this.
|
|
8433
|
+
this.validate();
|
|
8419
8434
|
|
|
8420
8435
|
// LEGACY EVENT
|
|
8421
8436
|
this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
|
|
@@ -8623,7 +8638,6 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8623
8638
|
|
|
8624
8639
|
return html`
|
|
8625
8640
|
<div
|
|
8626
|
-
class="${classMap(this.commonWrapperClasses)}"
|
|
8627
8641
|
part="wrapper">
|
|
8628
8642
|
<div id="slotHolder" aria-hidden="true">
|
|
8629
8643
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
@@ -8702,7 +8716,6 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8702
8716
|
|
|
8703
8717
|
return html`
|
|
8704
8718
|
<div
|
|
8705
|
-
class="${classMap(this.commonWrapperClasses)}"
|
|
8706
8719
|
part="wrapper">
|
|
8707
8720
|
<div id="slotHolder" aria-hidden="true">
|
|
8708
8721
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
@@ -8779,9 +8792,13 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8779
8792
|
'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
|
|
8780
8793
|
};
|
|
8781
8794
|
|
|
8795
|
+
const valueClasses = {
|
|
8796
|
+
'value': true,
|
|
8797
|
+
'body-default': true
|
|
8798
|
+
};
|
|
8799
|
+
|
|
8782
8800
|
return html`
|
|
8783
8801
|
<div
|
|
8784
|
-
class="${classMap(this.commonWrapperClasses)}"
|
|
8785
8802
|
part="wrapper">
|
|
8786
8803
|
<div id="slotHolder" aria-hidden="true">
|
|
8787
8804
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
@@ -8811,7 +8828,7 @@ class AuroSelect extends AuroElement$3 {
|
|
|
8811
8828
|
<slot name="label"></slot>
|
|
8812
8829
|
${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
|
|
8813
8830
|
</label>
|
|
8814
|
-
<div class="
|
|
8831
|
+
<div class="${classMap(valueClasses)}" id="value"></div>
|
|
8815
8832
|
<div id="placeholder" class="${classMap(placeholderClass)}">
|
|
8816
8833
|
${this.placeholder}
|
|
8817
8834
|
</div>
|