@aurodesignsystem-dev/auro-formkit 0.0.0-pr844.3 → 0.0.0-pr849.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/combobox/demo/api.min.js +31 -17
- package/components/combobox/demo/index.min.js +31 -17
- package/components/combobox/dist/index.js +31 -17
- package/components/combobox/dist/registered.js +31 -17
- package/components/datepicker/demo/api.min.js +21 -10
- package/components/datepicker/demo/index.min.js +21 -10
- package/components/datepicker/dist/index.js +21 -10
- package/components/datepicker/dist/registered.js +21 -10
- package/components/input/demo/api.md +0 -2
- package/components/input/demo/api.min.js +20 -9
- package/components/input/demo/index.min.js +20 -9
- package/components/input/dist/auro-input.d.ts +12 -2
- package/components/input/dist/index.js +20 -9
- package/components/input/dist/registered.js +20 -9
- package/package.json +1 -1
|
@@ -5477,11 +5477,11 @@ var styleCss$4$2 = i$5`.util_displayInline{display:inline}.util_displayInlineBlo
|
|
|
5477
5477
|
|
|
5478
5478
|
var styleDefaultCss = i$5`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
|
|
5479
5479
|
|
|
5480
|
-
var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-
|
|
5480
|
+
var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([ondark])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
5481
5481
|
|
|
5482
|
-
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-
|
|
5482
|
+
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
|
|
5483
5483
|
|
|
5484
|
-
var classicStyleCss = i$5`:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}:host([layout*=classic]) .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}:host([layout*=classic]) .mainContent label{overflow:hidden;cursor:text;padding-block:var(--ds-size-50, 0.25rem);text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host([layout*=classic]) .mainContent input{height:auto;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0}:host([layout*=classic]) .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.left{padding-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.right{padding-left:var(--ds-size-100, 0.5rem);margin-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]).withValue{justify-content:flex-start}:host([layout*=classic]):focus-within{justify-content:flex-start}`;
|
|
5484
|
+
var classicStyleCss = i$5`:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;background-color:var(--ds-auro-input-container-color);box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}:host([layout*=classic]) .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}:host([layout*=classic]) .mainContent label{overflow:hidden;cursor:text;padding-block:var(--ds-size-50, 0.25rem);text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host([layout*=classic]) .mainContent input{height:auto;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0}:host([layout*=classic]) .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.left{padding-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.right{padding-left:var(--ds-size-100, 0.5rem);margin-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]).withValue{justify-content:flex-start}:host([layout*=classic]):focus-within{justify-content:flex-start}`;
|
|
5485
5485
|
|
|
5486
5486
|
var classicColorCss = i$5`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host(:not([ondark])) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}`;
|
|
5487
5487
|
|
|
@@ -13293,14 +13293,27 @@ class AuroInput extends BaseInput {
|
|
|
13293
13293
|
}
|
|
13294
13294
|
|
|
13295
13295
|
/**
|
|
13296
|
-
*
|
|
13297
|
-
*
|
|
13296
|
+
* Determines if the HTML input element should be visually hidden.
|
|
13297
|
+
* Returns true when display value content exists without focus and has a value,
|
|
13298
|
+
* or when the input has no value, is not focused, and has no placeholder text.
|
|
13299
|
+
* @returns {boolean} - True if the input should be visually hidden, false otherwise.
|
|
13298
13300
|
* @private
|
|
13299
13301
|
*/
|
|
13300
13302
|
get inputHidden() {
|
|
13301
13303
|
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === ''));
|
|
13302
13304
|
}
|
|
13303
13305
|
|
|
13306
|
+
/**
|
|
13307
|
+
* Determines if the input should display in a state with no focus or value indication.
|
|
13308
|
+
* Returns true when the input has display content without focus and has a value,
|
|
13309
|
+
* or when the input has no value and is not focused.
|
|
13310
|
+
* @returns {boolean} - True if the input should show no focus or value state, false otherwise.
|
|
13311
|
+
* @private
|
|
13312
|
+
*/
|
|
13313
|
+
get noFocusOrValue() {
|
|
13314
|
+
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus);
|
|
13315
|
+
}
|
|
13316
|
+
|
|
13304
13317
|
/**
|
|
13305
13318
|
* Whether the label is being hidden currently based on state.
|
|
13306
13319
|
* @returns {boolean} - Returns true if the label is hidden.
|
|
@@ -13319,7 +13332,7 @@ class AuroInput extends BaseInput {
|
|
|
13319
13332
|
const isHidden = this.inputHidden;
|
|
13320
13333
|
|
|
13321
13334
|
if (this.layout.startsWith('emphasized')) {
|
|
13322
|
-
return
|
|
13335
|
+
return this.noFocusOrValue ? 'accent-xl' : 'body-sm';
|
|
13323
13336
|
}
|
|
13324
13337
|
|
|
13325
13338
|
if (this.layout === 'snowflake') {
|
|
@@ -13336,10 +13349,8 @@ class AuroInput extends BaseInput {
|
|
|
13336
13349
|
* @returns {string} - The font class for the input.
|
|
13337
13350
|
*/
|
|
13338
13351
|
get inputFontClass() {
|
|
13339
|
-
const isHidden = this.inputHidden;
|
|
13340
|
-
|
|
13341
13352
|
if (this.layout.startsWith('emphasized')) {
|
|
13342
|
-
return
|
|
13353
|
+
return this.noFocusOrValue ? 'body-sm' : 'accent-xl';
|
|
13343
13354
|
}
|
|
13344
13355
|
|
|
13345
13356
|
if (this.layout === 'snowflake') {
|
|
@@ -15755,7 +15766,7 @@ class AuroBibtemplate extends i$2 {
|
|
|
15755
15766
|
|
|
15756
15767
|
var bibTemplateVersion = '1.0.0';
|
|
15757
15768
|
|
|
15758
|
-
var styleCss$4 = 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}:host{display:block}:host [auro-input]{--ds-auro-input-
|
|
15769
|
+
var styleCss$4 = 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}:host{display:block}:host [auro-input]{--ds-auro-input-container-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
15759
15770
|
|
|
15760
15771
|
var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
|
|
15761
15772
|
|
|
@@ -16507,14 +16518,17 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16507
16518
|
* @returns {void}
|
|
16508
16519
|
*/
|
|
16509
16520
|
async syncValuesAndStates() {
|
|
16510
|
-
|
|
16511
|
-
// Sync values
|
|
16512
16521
|
this.menu.value = this.value;
|
|
16513
|
-
this.menu.matchWord = this.value;
|
|
16514
|
-
this.input.value = this.value;
|
|
16522
|
+
this.menu.matchWord = this.input.value;
|
|
16515
16523
|
|
|
16516
16524
|
// Wait a lifecycle for child components to update
|
|
16517
16525
|
await Promise.all([this.menu.updateComplete]);
|
|
16526
|
+
|
|
16527
|
+
if (this.menu.optionSelected && this.menu.optionSelected.textContent.length > 0) {
|
|
16528
|
+
this.input.value = this.menu.optionSelected.textContent;
|
|
16529
|
+
} else {
|
|
16530
|
+
this.input.value = this.value;
|
|
16531
|
+
}
|
|
16518
16532
|
}
|
|
16519
16533
|
|
|
16520
16534
|
/**
|
|
@@ -17001,9 +17015,6 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
17001
17015
|
// After the component is ready, send direct value changes to auro-menu.
|
|
17002
17016
|
if (changedProperties.has('value') && this.value !== changedProperties.get('value')) {
|
|
17003
17017
|
|
|
17004
|
-
// Sync the input, menu, and optionSelected states
|
|
17005
|
-
await this.syncValuesAndStates();
|
|
17006
|
-
|
|
17007
17018
|
if (this.value) {
|
|
17008
17019
|
// If the value got set programmatically make sure we hide the bib
|
|
17009
17020
|
// when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
|
|
@@ -17013,6 +17024,9 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
17013
17024
|
} else {
|
|
17014
17025
|
this.clear();
|
|
17015
17026
|
}
|
|
17027
|
+
|
|
17028
|
+
// Sync the input, menu, and optionSelected states
|
|
17029
|
+
await this.syncValuesAndStates();
|
|
17016
17030
|
}
|
|
17017
17031
|
|
|
17018
17032
|
if (changedProperties.has('error')) {
|
|
@@ -5335,11 +5335,11 @@ var styleCss$4$2 = i$5`.util_displayInline{display:inline}.util_displayInlineBlo
|
|
|
5335
5335
|
|
|
5336
5336
|
var styleDefaultCss = i$5`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
|
|
5337
5337
|
|
|
5338
|
-
var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-
|
|
5338
|
+
var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([ondark])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
5339
5339
|
|
|
5340
|
-
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-
|
|
5340
|
+
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
|
|
5341
5341
|
|
|
5342
|
-
var classicStyleCss = i$5`:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}:host([layout*=classic]) .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}:host([layout*=classic]) .mainContent label{overflow:hidden;cursor:text;padding-block:var(--ds-size-50, 0.25rem);text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host([layout*=classic]) .mainContent input{height:auto;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0}:host([layout*=classic]) .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.left{padding-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.right{padding-left:var(--ds-size-100, 0.5rem);margin-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]).withValue{justify-content:flex-start}:host([layout*=classic]):focus-within{justify-content:flex-start}`;
|
|
5342
|
+
var classicStyleCss = i$5`:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;background-color:var(--ds-auro-input-container-color);box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}:host([layout*=classic]) .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}:host([layout*=classic]) .mainContent label{overflow:hidden;cursor:text;padding-block:var(--ds-size-50, 0.25rem);text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host([layout*=classic]) .mainContent input{height:auto;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0}:host([layout*=classic]) .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.left{padding-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.right{padding-left:var(--ds-size-100, 0.5rem);margin-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]).withValue{justify-content:flex-start}:host([layout*=classic]):focus-within{justify-content:flex-start}`;
|
|
5343
5343
|
|
|
5344
5344
|
var classicColorCss = i$5`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host(:not([ondark])) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}`;
|
|
5345
5345
|
|
|
@@ -13151,14 +13151,27 @@ class AuroInput extends BaseInput {
|
|
|
13151
13151
|
}
|
|
13152
13152
|
|
|
13153
13153
|
/**
|
|
13154
|
-
*
|
|
13155
|
-
*
|
|
13154
|
+
* Determines if the HTML input element should be visually hidden.
|
|
13155
|
+
* Returns true when display value content exists without focus and has a value,
|
|
13156
|
+
* or when the input has no value, is not focused, and has no placeholder text.
|
|
13157
|
+
* @returns {boolean} - True if the input should be visually hidden, false otherwise.
|
|
13156
13158
|
* @private
|
|
13157
13159
|
*/
|
|
13158
13160
|
get inputHidden() {
|
|
13159
13161
|
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === ''));
|
|
13160
13162
|
}
|
|
13161
13163
|
|
|
13164
|
+
/**
|
|
13165
|
+
* Determines if the input should display in a state with no focus or value indication.
|
|
13166
|
+
* Returns true when the input has display content without focus and has a value,
|
|
13167
|
+
* or when the input has no value and is not focused.
|
|
13168
|
+
* @returns {boolean} - True if the input should show no focus or value state, false otherwise.
|
|
13169
|
+
* @private
|
|
13170
|
+
*/
|
|
13171
|
+
get noFocusOrValue() {
|
|
13172
|
+
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus);
|
|
13173
|
+
}
|
|
13174
|
+
|
|
13162
13175
|
/**
|
|
13163
13176
|
* Whether the label is being hidden currently based on state.
|
|
13164
13177
|
* @returns {boolean} - Returns true if the label is hidden.
|
|
@@ -13177,7 +13190,7 @@ class AuroInput extends BaseInput {
|
|
|
13177
13190
|
const isHidden = this.inputHidden;
|
|
13178
13191
|
|
|
13179
13192
|
if (this.layout.startsWith('emphasized')) {
|
|
13180
|
-
return
|
|
13193
|
+
return this.noFocusOrValue ? 'accent-xl' : 'body-sm';
|
|
13181
13194
|
}
|
|
13182
13195
|
|
|
13183
13196
|
if (this.layout === 'snowflake') {
|
|
@@ -13194,10 +13207,8 @@ class AuroInput extends BaseInput {
|
|
|
13194
13207
|
* @returns {string} - The font class for the input.
|
|
13195
13208
|
*/
|
|
13196
13209
|
get inputFontClass() {
|
|
13197
|
-
const isHidden = this.inputHidden;
|
|
13198
|
-
|
|
13199
13210
|
if (this.layout.startsWith('emphasized')) {
|
|
13200
|
-
return
|
|
13211
|
+
return this.noFocusOrValue ? 'body-sm' : 'accent-xl';
|
|
13201
13212
|
}
|
|
13202
13213
|
|
|
13203
13214
|
if (this.layout === 'snowflake') {
|
|
@@ -15613,7 +15624,7 @@ class AuroBibtemplate extends i$2 {
|
|
|
15613
15624
|
|
|
15614
15625
|
var bibTemplateVersion = '1.0.0';
|
|
15615
15626
|
|
|
15616
|
-
var styleCss$4 = 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}:host{display:block}:host [auro-input]{--ds-auro-input-
|
|
15627
|
+
var styleCss$4 = 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}:host{display:block}:host [auro-input]{--ds-auro-input-container-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
15617
15628
|
|
|
15618
15629
|
var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
|
|
15619
15630
|
|
|
@@ -16365,14 +16376,17 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16365
16376
|
* @returns {void}
|
|
16366
16377
|
*/
|
|
16367
16378
|
async syncValuesAndStates() {
|
|
16368
|
-
|
|
16369
|
-
// Sync values
|
|
16370
16379
|
this.menu.value = this.value;
|
|
16371
|
-
this.menu.matchWord = this.value;
|
|
16372
|
-
this.input.value = this.value;
|
|
16380
|
+
this.menu.matchWord = this.input.value;
|
|
16373
16381
|
|
|
16374
16382
|
// Wait a lifecycle for child components to update
|
|
16375
16383
|
await Promise.all([this.menu.updateComplete]);
|
|
16384
|
+
|
|
16385
|
+
if (this.menu.optionSelected && this.menu.optionSelected.textContent.length > 0) {
|
|
16386
|
+
this.input.value = this.menu.optionSelected.textContent;
|
|
16387
|
+
} else {
|
|
16388
|
+
this.input.value = this.value;
|
|
16389
|
+
}
|
|
16376
16390
|
}
|
|
16377
16391
|
|
|
16378
16392
|
/**
|
|
@@ -16859,9 +16873,6 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16859
16873
|
// After the component is ready, send direct value changes to auro-menu.
|
|
16860
16874
|
if (changedProperties.has('value') && this.value !== changedProperties.get('value')) {
|
|
16861
16875
|
|
|
16862
|
-
// Sync the input, menu, and optionSelected states
|
|
16863
|
-
await this.syncValuesAndStates();
|
|
16864
|
-
|
|
16865
16876
|
if (this.value) {
|
|
16866
16877
|
// If the value got set programmatically make sure we hide the bib
|
|
16867
16878
|
// when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
|
|
@@ -16871,6 +16882,9 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16871
16882
|
} else {
|
|
16872
16883
|
this.clear();
|
|
16873
16884
|
}
|
|
16885
|
+
|
|
16886
|
+
// Sync the input, menu, and optionSelected states
|
|
16887
|
+
await this.syncValuesAndStates();
|
|
16874
16888
|
}
|
|
16875
16889
|
|
|
16876
16890
|
if (changedProperties.has('error')) {
|
|
@@ -5253,11 +5253,11 @@ var styleCss$4$1 = css`.util_displayInline{display:inline}.util_displayInlineBlo
|
|
|
5253
5253
|
|
|
5254
5254
|
var styleDefaultCss = css`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
|
|
5255
5255
|
|
|
5256
|
-
var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-
|
|
5256
|
+
var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([ondark])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
5257
5257
|
|
|
5258
|
-
var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-
|
|
5258
|
+
var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
|
|
5259
5259
|
|
|
5260
|
-
var classicStyleCss = css`:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}:host([layout*=classic]) .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}:host([layout*=classic]) .mainContent label{overflow:hidden;cursor:text;padding-block:var(--ds-size-50, 0.25rem);text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host([layout*=classic]) .mainContent input{height:auto;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0}:host([layout*=classic]) .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.left{padding-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.right{padding-left:var(--ds-size-100, 0.5rem);margin-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]).withValue{justify-content:flex-start}:host([layout*=classic]):focus-within{justify-content:flex-start}`;
|
|
5260
|
+
var classicStyleCss = css`:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;background-color:var(--ds-auro-input-container-color);box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}:host([layout*=classic]) .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}:host([layout*=classic]) .mainContent label{overflow:hidden;cursor:text;padding-block:var(--ds-size-50, 0.25rem);text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host([layout*=classic]) .mainContent input{height:auto;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0}:host([layout*=classic]) .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.left{padding-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.right{padding-left:var(--ds-size-100, 0.5rem);margin-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]).withValue{justify-content:flex-start}:host([layout*=classic]):focus-within{justify-content:flex-start}`;
|
|
5261
5261
|
|
|
5262
5262
|
var classicColorCss = css`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host(:not([ondark])) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}`;
|
|
5263
5263
|
|
|
@@ -13069,14 +13069,27 @@ class AuroInput extends BaseInput {
|
|
|
13069
13069
|
}
|
|
13070
13070
|
|
|
13071
13071
|
/**
|
|
13072
|
-
*
|
|
13073
|
-
*
|
|
13072
|
+
* Determines if the HTML input element should be visually hidden.
|
|
13073
|
+
* Returns true when display value content exists without focus and has a value,
|
|
13074
|
+
* or when the input has no value, is not focused, and has no placeholder text.
|
|
13075
|
+
* @returns {boolean} - True if the input should be visually hidden, false otherwise.
|
|
13074
13076
|
* @private
|
|
13075
13077
|
*/
|
|
13076
13078
|
get inputHidden() {
|
|
13077
13079
|
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === ''));
|
|
13078
13080
|
}
|
|
13079
13081
|
|
|
13082
|
+
/**
|
|
13083
|
+
* Determines if the input should display in a state with no focus or value indication.
|
|
13084
|
+
* Returns true when the input has display content without focus and has a value,
|
|
13085
|
+
* or when the input has no value and is not focused.
|
|
13086
|
+
* @returns {boolean} - True if the input should show no focus or value state, false otherwise.
|
|
13087
|
+
* @private
|
|
13088
|
+
*/
|
|
13089
|
+
get noFocusOrValue() {
|
|
13090
|
+
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus);
|
|
13091
|
+
}
|
|
13092
|
+
|
|
13080
13093
|
/**
|
|
13081
13094
|
* Whether the label is being hidden currently based on state.
|
|
13082
13095
|
* @returns {boolean} - Returns true if the label is hidden.
|
|
@@ -13095,7 +13108,7 @@ class AuroInput extends BaseInput {
|
|
|
13095
13108
|
const isHidden = this.inputHidden;
|
|
13096
13109
|
|
|
13097
13110
|
if (this.layout.startsWith('emphasized')) {
|
|
13098
|
-
return
|
|
13111
|
+
return this.noFocusOrValue ? 'accent-xl' : 'body-sm';
|
|
13099
13112
|
}
|
|
13100
13113
|
|
|
13101
13114
|
if (this.layout === 'snowflake') {
|
|
@@ -13112,10 +13125,8 @@ class AuroInput extends BaseInput {
|
|
|
13112
13125
|
* @returns {string} - The font class for the input.
|
|
13113
13126
|
*/
|
|
13114
13127
|
get inputFontClass() {
|
|
13115
|
-
const isHidden = this.inputHidden;
|
|
13116
|
-
|
|
13117
13128
|
if (this.layout.startsWith('emphasized')) {
|
|
13118
|
-
return
|
|
13129
|
+
return this.noFocusOrValue ? 'body-sm' : 'accent-xl';
|
|
13119
13130
|
}
|
|
13120
13131
|
|
|
13121
13132
|
if (this.layout === 'snowflake') {
|
|
@@ -15531,7 +15542,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
15531
15542
|
|
|
15532
15543
|
var bibTemplateVersion = '1.0.0';
|
|
15533
15544
|
|
|
15534
|
-
var styleCss$1 = 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}:host{display:block}:host [auro-input]{--ds-auro-input-
|
|
15545
|
+
var styleCss$1 = 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}:host{display:block}:host [auro-input]{--ds-auro-input-container-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
15535
15546
|
|
|
15536
15547
|
var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
|
|
15537
15548
|
|
|
@@ -16283,14 +16294,17 @@ class AuroCombobox extends AuroElement {
|
|
|
16283
16294
|
* @returns {void}
|
|
16284
16295
|
*/
|
|
16285
16296
|
async syncValuesAndStates() {
|
|
16286
|
-
|
|
16287
|
-
// Sync values
|
|
16288
16297
|
this.menu.value = this.value;
|
|
16289
|
-
this.menu.matchWord = this.value;
|
|
16290
|
-
this.input.value = this.value;
|
|
16298
|
+
this.menu.matchWord = this.input.value;
|
|
16291
16299
|
|
|
16292
16300
|
// Wait a lifecycle for child components to update
|
|
16293
16301
|
await Promise.all([this.menu.updateComplete]);
|
|
16302
|
+
|
|
16303
|
+
if (this.menu.optionSelected && this.menu.optionSelected.textContent.length > 0) {
|
|
16304
|
+
this.input.value = this.menu.optionSelected.textContent;
|
|
16305
|
+
} else {
|
|
16306
|
+
this.input.value = this.value;
|
|
16307
|
+
}
|
|
16294
16308
|
}
|
|
16295
16309
|
|
|
16296
16310
|
/**
|
|
@@ -16777,9 +16791,6 @@ class AuroCombobox extends AuroElement {
|
|
|
16777
16791
|
// After the component is ready, send direct value changes to auro-menu.
|
|
16778
16792
|
if (changedProperties.has('value') && this.value !== changedProperties.get('value')) {
|
|
16779
16793
|
|
|
16780
|
-
// Sync the input, menu, and optionSelected states
|
|
16781
|
-
await this.syncValuesAndStates();
|
|
16782
|
-
|
|
16783
16794
|
if (this.value) {
|
|
16784
16795
|
// If the value got set programmatically make sure we hide the bib
|
|
16785
16796
|
// when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
|
|
@@ -16789,6 +16800,9 @@ class AuroCombobox extends AuroElement {
|
|
|
16789
16800
|
} else {
|
|
16790
16801
|
this.clear();
|
|
16791
16802
|
}
|
|
16803
|
+
|
|
16804
|
+
// Sync the input, menu, and optionSelected states
|
|
16805
|
+
await this.syncValuesAndStates();
|
|
16792
16806
|
}
|
|
16793
16807
|
|
|
16794
16808
|
if (changedProperties.has('error')) {
|
|
@@ -5253,11 +5253,11 @@ var styleCss$4$1 = css`.util_displayInline{display:inline}.util_displayInlineBlo
|
|
|
5253
5253
|
|
|
5254
5254
|
var styleDefaultCss = css`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
|
|
5255
5255
|
|
|
5256
|
-
var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-
|
|
5256
|
+
var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([ondark])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
5257
5257
|
|
|
5258
|
-
var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-
|
|
5258
|
+
var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
|
|
5259
5259
|
|
|
5260
|
-
var classicStyleCss = css`:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}:host([layout*=classic]) .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}:host([layout*=classic]) .mainContent label{overflow:hidden;cursor:text;padding-block:var(--ds-size-50, 0.25rem);text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host([layout*=classic]) .mainContent input{height:auto;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0}:host([layout*=classic]) .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.left{padding-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.right{padding-left:var(--ds-size-100, 0.5rem);margin-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]).withValue{justify-content:flex-start}:host([layout*=classic]):focus-within{justify-content:flex-start}`;
|
|
5260
|
+
var classicStyleCss = css`:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;background-color:var(--ds-auro-input-container-color);box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}:host([layout*=classic]) .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}:host([layout*=classic]) .mainContent label{overflow:hidden;cursor:text;padding-block:var(--ds-size-50, 0.25rem);text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host([layout*=classic]) .mainContent input{height:auto;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0}:host([layout*=classic]) .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.left{padding-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.right{padding-left:var(--ds-size-100, 0.5rem);margin-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]).withValue{justify-content:flex-start}:host([layout*=classic]):focus-within{justify-content:flex-start}`;
|
|
5261
5261
|
|
|
5262
5262
|
var classicColorCss = css`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host(:not([ondark])) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}`;
|
|
5263
5263
|
|
|
@@ -13069,14 +13069,27 @@ class AuroInput extends BaseInput {
|
|
|
13069
13069
|
}
|
|
13070
13070
|
|
|
13071
13071
|
/**
|
|
13072
|
-
*
|
|
13073
|
-
*
|
|
13072
|
+
* Determines if the HTML input element should be visually hidden.
|
|
13073
|
+
* Returns true when display value content exists without focus and has a value,
|
|
13074
|
+
* or when the input has no value, is not focused, and has no placeholder text.
|
|
13075
|
+
* @returns {boolean} - True if the input should be visually hidden, false otherwise.
|
|
13074
13076
|
* @private
|
|
13075
13077
|
*/
|
|
13076
13078
|
get inputHidden() {
|
|
13077
13079
|
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === ''));
|
|
13078
13080
|
}
|
|
13079
13081
|
|
|
13082
|
+
/**
|
|
13083
|
+
* Determines if the input should display in a state with no focus or value indication.
|
|
13084
|
+
* Returns true when the input has display content without focus and has a value,
|
|
13085
|
+
* or when the input has no value and is not focused.
|
|
13086
|
+
* @returns {boolean} - True if the input should show no focus or value state, false otherwise.
|
|
13087
|
+
* @private
|
|
13088
|
+
*/
|
|
13089
|
+
get noFocusOrValue() {
|
|
13090
|
+
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus);
|
|
13091
|
+
}
|
|
13092
|
+
|
|
13080
13093
|
/**
|
|
13081
13094
|
* Whether the label is being hidden currently based on state.
|
|
13082
13095
|
* @returns {boolean} - Returns true if the label is hidden.
|
|
@@ -13095,7 +13108,7 @@ class AuroInput extends BaseInput {
|
|
|
13095
13108
|
const isHidden = this.inputHidden;
|
|
13096
13109
|
|
|
13097
13110
|
if (this.layout.startsWith('emphasized')) {
|
|
13098
|
-
return
|
|
13111
|
+
return this.noFocusOrValue ? 'accent-xl' : 'body-sm';
|
|
13099
13112
|
}
|
|
13100
13113
|
|
|
13101
13114
|
if (this.layout === 'snowflake') {
|
|
@@ -13112,10 +13125,8 @@ class AuroInput extends BaseInput {
|
|
|
13112
13125
|
* @returns {string} - The font class for the input.
|
|
13113
13126
|
*/
|
|
13114
13127
|
get inputFontClass() {
|
|
13115
|
-
const isHidden = this.inputHidden;
|
|
13116
|
-
|
|
13117
13128
|
if (this.layout.startsWith('emphasized')) {
|
|
13118
|
-
return
|
|
13129
|
+
return this.noFocusOrValue ? 'body-sm' : 'accent-xl';
|
|
13119
13130
|
}
|
|
13120
13131
|
|
|
13121
13132
|
if (this.layout === 'snowflake') {
|
|
@@ -15531,7 +15542,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
15531
15542
|
|
|
15532
15543
|
var bibTemplateVersion = '1.0.0';
|
|
15533
15544
|
|
|
15534
|
-
var styleCss$1 = 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}:host{display:block}:host [auro-input]{--ds-auro-input-
|
|
15545
|
+
var styleCss$1 = 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}:host{display:block}:host [auro-input]{--ds-auro-input-container-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
15535
15546
|
|
|
15536
15547
|
var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
|
|
15537
15548
|
|
|
@@ -16283,14 +16294,17 @@ class AuroCombobox extends AuroElement {
|
|
|
16283
16294
|
* @returns {void}
|
|
16284
16295
|
*/
|
|
16285
16296
|
async syncValuesAndStates() {
|
|
16286
|
-
|
|
16287
|
-
// Sync values
|
|
16288
16297
|
this.menu.value = this.value;
|
|
16289
|
-
this.menu.matchWord = this.value;
|
|
16290
|
-
this.input.value = this.value;
|
|
16298
|
+
this.menu.matchWord = this.input.value;
|
|
16291
16299
|
|
|
16292
16300
|
// Wait a lifecycle for child components to update
|
|
16293
16301
|
await Promise.all([this.menu.updateComplete]);
|
|
16302
|
+
|
|
16303
|
+
if (this.menu.optionSelected && this.menu.optionSelected.textContent.length > 0) {
|
|
16304
|
+
this.input.value = this.menu.optionSelected.textContent;
|
|
16305
|
+
} else {
|
|
16306
|
+
this.input.value = this.value;
|
|
16307
|
+
}
|
|
16294
16308
|
}
|
|
16295
16309
|
|
|
16296
16310
|
/**
|
|
@@ -16777,9 +16791,6 @@ class AuroCombobox extends AuroElement {
|
|
|
16777
16791
|
// After the component is ready, send direct value changes to auro-menu.
|
|
16778
16792
|
if (changedProperties.has('value') && this.value !== changedProperties.get('value')) {
|
|
16779
16793
|
|
|
16780
|
-
// Sync the input, menu, and optionSelected states
|
|
16781
|
-
await this.syncValuesAndStates();
|
|
16782
|
-
|
|
16783
16794
|
if (this.value) {
|
|
16784
16795
|
// If the value got set programmatically make sure we hide the bib
|
|
16785
16796
|
// when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
|
|
@@ -16789,6 +16800,9 @@ class AuroCombobox extends AuroElement {
|
|
|
16789
16800
|
} else {
|
|
16790
16801
|
this.clear();
|
|
16791
16802
|
}
|
|
16803
|
+
|
|
16804
|
+
// Sync the input, menu, and optionSelected states
|
|
16805
|
+
await this.syncValuesAndStates();
|
|
16792
16806
|
}
|
|
16793
16807
|
|
|
16794
16808
|
if (changedProperties.has('error')) {
|