@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
|
@@ -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>
|
package/package.json
CHANGED