@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.32 → 0.0.0-pr624.34
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 +14 -27
- package/components/combobox/demo/index.min.js +14 -27
- package/components/combobox/dist/index.js +14 -27
- package/components/combobox/dist/registered.js +14 -27
- package/components/datepicker/demo/api.min.js +9 -26
- package/components/datepicker/demo/index.min.js +9 -26
- package/components/datepicker/dist/index.js +9 -26
- package/components/datepicker/dist/registered.js +9 -26
- package/components/input/demo/api.md +0 -1
- package/components/input/demo/api.min.js +9 -26
- package/components/input/demo/index.min.js +9 -26
- package/components/input/dist/auro-input.d.ts +0 -174
- package/components/input/dist/index.js +9 -26
- package/components/input/dist/registered.js +9 -26
- package/package.json +1 -1
|
@@ -5240,7 +5240,7 @@ var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
5240
5240
|
|
|
5241
5241
|
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--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-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--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}`;
|
|
5242
5242
|
|
|
5243
|
-
var classicStyleCss = i$5`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{
|
|
5243
|
+
var classicStyleCss = i$5`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents [auro-icon],.layout-classic .accents auro-icon{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
5244
5244
|
|
|
5245
5245
|
var classicColorCss = i$5`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}: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-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}: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-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
5246
5246
|
|
|
@@ -12957,20 +12957,6 @@ class AuroInput extends BaseInput {
|
|
|
12957
12957
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$2, AuroIcon$2);
|
|
12958
12958
|
}
|
|
12959
12959
|
|
|
12960
|
-
static get properties() {
|
|
12961
|
-
return {
|
|
12962
|
-
...super.properties,
|
|
12963
|
-
|
|
12964
|
-
/**
|
|
12965
|
-
* @type {boolean}
|
|
12966
|
-
*/
|
|
12967
|
-
hideInputVisually: {
|
|
12968
|
-
type: Boolean,
|
|
12969
|
-
reflect: true,
|
|
12970
|
-
}
|
|
12971
|
-
};
|
|
12972
|
-
}
|
|
12973
|
-
|
|
12974
12960
|
static get styles() {
|
|
12975
12961
|
return [
|
|
12976
12962
|
i$5`${classicStyleCss}`,
|
|
@@ -13006,11 +12992,7 @@ class AuroInput extends BaseInput {
|
|
|
13006
12992
|
*/
|
|
13007
12993
|
get commonInputClasses() {
|
|
13008
12994
|
return {
|
|
13009
|
-
'util_displayHiddenVisually': this.
|
|
13010
|
-
? this.hideInputVisually
|
|
13011
|
-
// eslint-disable-next-line no-warning-comments
|
|
13012
|
-
// TODO: refactor this to use a less brittle/forced solution.
|
|
13013
|
-
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
12995
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
13014
12996
|
};
|
|
13015
12997
|
}
|
|
13016
12998
|
|
|
@@ -13021,11 +13003,7 @@ class AuroInput extends BaseInput {
|
|
|
13021
13003
|
*/
|
|
13022
13004
|
get legacyInputClasses() {
|
|
13023
13005
|
return {
|
|
13024
|
-
...this.commonInputClasses
|
|
13025
|
-
'util_displayHiddenVisually':
|
|
13026
|
-
this.hideInputVisually !== undefined
|
|
13027
|
-
? this.hideInputVisually
|
|
13028
|
-
: !this.hasFocus && !this.value
|
|
13006
|
+
...this.commonInputClasses
|
|
13029
13007
|
};
|
|
13030
13008
|
}
|
|
13031
13009
|
|
|
@@ -13098,7 +13076,12 @@ class AuroInput extends BaseInput {
|
|
|
13098
13076
|
* @returns {void}
|
|
13099
13077
|
*/
|
|
13100
13078
|
checkDisplayValueSlotChange() {
|
|
13101
|
-
|
|
13079
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
13080
|
+
|
|
13081
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
13082
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
13083
|
+
nodes = nodes[0].assignedNodes();
|
|
13084
|
+
}
|
|
13102
13085
|
|
|
13103
13086
|
let hasContent = false;
|
|
13104
13087
|
|
|
@@ -16215,7 +16198,11 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16215
16198
|
this.dropdownOpen = ev.detail.expanded;
|
|
16216
16199
|
|
|
16217
16200
|
// wait a frame in case the bib gets hide immediately after showing because there is no value
|
|
16218
|
-
setTimeout(
|
|
16201
|
+
setTimeout(() => {
|
|
16202
|
+
if (document.activeElement === this) {
|
|
16203
|
+
this.setInputFocus();
|
|
16204
|
+
}
|
|
16205
|
+
}, 0);
|
|
16219
16206
|
});
|
|
16220
16207
|
|
|
16221
16208
|
this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
|
|
@@ -5098,7 +5098,7 @@ var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
5098
5098
|
|
|
5099
5099
|
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--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-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--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}`;
|
|
5100
5100
|
|
|
5101
|
-
var classicStyleCss = i$5`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{
|
|
5101
|
+
var classicStyleCss = i$5`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents [auro-icon],.layout-classic .accents auro-icon{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
5102
5102
|
|
|
5103
5103
|
var classicColorCss = i$5`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}: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-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}: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-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
5104
5104
|
|
|
@@ -12815,20 +12815,6 @@ class AuroInput extends BaseInput {
|
|
|
12815
12815
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$2, AuroIcon$2);
|
|
12816
12816
|
}
|
|
12817
12817
|
|
|
12818
|
-
static get properties() {
|
|
12819
|
-
return {
|
|
12820
|
-
...super.properties,
|
|
12821
|
-
|
|
12822
|
-
/**
|
|
12823
|
-
* @type {boolean}
|
|
12824
|
-
*/
|
|
12825
|
-
hideInputVisually: {
|
|
12826
|
-
type: Boolean,
|
|
12827
|
-
reflect: true,
|
|
12828
|
-
}
|
|
12829
|
-
};
|
|
12830
|
-
}
|
|
12831
|
-
|
|
12832
12818
|
static get styles() {
|
|
12833
12819
|
return [
|
|
12834
12820
|
i$5`${classicStyleCss}`,
|
|
@@ -12864,11 +12850,7 @@ class AuroInput extends BaseInput {
|
|
|
12864
12850
|
*/
|
|
12865
12851
|
get commonInputClasses() {
|
|
12866
12852
|
return {
|
|
12867
|
-
'util_displayHiddenVisually': this.
|
|
12868
|
-
? this.hideInputVisually
|
|
12869
|
-
// eslint-disable-next-line no-warning-comments
|
|
12870
|
-
// TODO: refactor this to use a less brittle/forced solution.
|
|
12871
|
-
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
12853
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
12872
12854
|
};
|
|
12873
12855
|
}
|
|
12874
12856
|
|
|
@@ -12879,11 +12861,7 @@ class AuroInput extends BaseInput {
|
|
|
12879
12861
|
*/
|
|
12880
12862
|
get legacyInputClasses() {
|
|
12881
12863
|
return {
|
|
12882
|
-
...this.commonInputClasses
|
|
12883
|
-
'util_displayHiddenVisually':
|
|
12884
|
-
this.hideInputVisually !== undefined
|
|
12885
|
-
? this.hideInputVisually
|
|
12886
|
-
: !this.hasFocus && !this.value
|
|
12864
|
+
...this.commonInputClasses
|
|
12887
12865
|
};
|
|
12888
12866
|
}
|
|
12889
12867
|
|
|
@@ -12956,7 +12934,12 @@ class AuroInput extends BaseInput {
|
|
|
12956
12934
|
* @returns {void}
|
|
12957
12935
|
*/
|
|
12958
12936
|
checkDisplayValueSlotChange() {
|
|
12959
|
-
|
|
12937
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
12938
|
+
|
|
12939
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
12940
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
12941
|
+
nodes = nodes[0].assignedNodes();
|
|
12942
|
+
}
|
|
12960
12943
|
|
|
12961
12944
|
let hasContent = false;
|
|
12962
12945
|
|
|
@@ -16073,7 +16056,11 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16073
16056
|
this.dropdownOpen = ev.detail.expanded;
|
|
16074
16057
|
|
|
16075
16058
|
// wait a frame in case the bib gets hide immediately after showing because there is no value
|
|
16076
|
-
setTimeout(
|
|
16059
|
+
setTimeout(() => {
|
|
16060
|
+
if (document.activeElement === this) {
|
|
16061
|
+
this.setInputFocus();
|
|
16062
|
+
}
|
|
16063
|
+
}, 0);
|
|
16077
16064
|
});
|
|
16078
16065
|
|
|
16079
16066
|
this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
|
|
@@ -5016,7 +5016,7 @@ var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
5016
5016
|
|
|
5017
5017
|
var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--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-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--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}`;
|
|
5018
5018
|
|
|
5019
|
-
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{
|
|
5019
|
+
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents [auro-icon],.layout-classic .accents auro-icon{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
5020
5020
|
|
|
5021
5021
|
var classicColorCss = css`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}: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-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}: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-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
5022
5022
|
|
|
@@ -12733,20 +12733,6 @@ class AuroInput extends BaseInput {
|
|
|
12733
12733
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$1, AuroIcon$1);
|
|
12734
12734
|
}
|
|
12735
12735
|
|
|
12736
|
-
static get properties() {
|
|
12737
|
-
return {
|
|
12738
|
-
...super.properties,
|
|
12739
|
-
|
|
12740
|
-
/**
|
|
12741
|
-
* @type {boolean}
|
|
12742
|
-
*/
|
|
12743
|
-
hideInputVisually: {
|
|
12744
|
-
type: Boolean,
|
|
12745
|
-
reflect: true,
|
|
12746
|
-
}
|
|
12747
|
-
};
|
|
12748
|
-
}
|
|
12749
|
-
|
|
12750
12736
|
static get styles() {
|
|
12751
12737
|
return [
|
|
12752
12738
|
css`${classicStyleCss}`,
|
|
@@ -12782,11 +12768,7 @@ class AuroInput extends BaseInput {
|
|
|
12782
12768
|
*/
|
|
12783
12769
|
get commonInputClasses() {
|
|
12784
12770
|
return {
|
|
12785
|
-
'util_displayHiddenVisually': this.
|
|
12786
|
-
? this.hideInputVisually
|
|
12787
|
-
// eslint-disable-next-line no-warning-comments
|
|
12788
|
-
// TODO: refactor this to use a less brittle/forced solution.
|
|
12789
|
-
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
12771
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
12790
12772
|
};
|
|
12791
12773
|
}
|
|
12792
12774
|
|
|
@@ -12797,11 +12779,7 @@ class AuroInput extends BaseInput {
|
|
|
12797
12779
|
*/
|
|
12798
12780
|
get legacyInputClasses() {
|
|
12799
12781
|
return {
|
|
12800
|
-
...this.commonInputClasses
|
|
12801
|
-
'util_displayHiddenVisually':
|
|
12802
|
-
this.hideInputVisually !== undefined
|
|
12803
|
-
? this.hideInputVisually
|
|
12804
|
-
: !this.hasFocus && !this.value
|
|
12782
|
+
...this.commonInputClasses
|
|
12805
12783
|
};
|
|
12806
12784
|
}
|
|
12807
12785
|
|
|
@@ -12874,7 +12852,12 @@ class AuroInput extends BaseInput {
|
|
|
12874
12852
|
* @returns {void}
|
|
12875
12853
|
*/
|
|
12876
12854
|
checkDisplayValueSlotChange() {
|
|
12877
|
-
|
|
12855
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
12856
|
+
|
|
12857
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
12858
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
12859
|
+
nodes = nodes[0].assignedNodes();
|
|
12860
|
+
}
|
|
12878
12861
|
|
|
12879
12862
|
let hasContent = false;
|
|
12880
12863
|
|
|
@@ -15991,7 +15974,11 @@ class AuroCombobox extends AuroElement {
|
|
|
15991
15974
|
this.dropdownOpen = ev.detail.expanded;
|
|
15992
15975
|
|
|
15993
15976
|
// wait a frame in case the bib gets hide immediately after showing because there is no value
|
|
15994
|
-
setTimeout(
|
|
15977
|
+
setTimeout(() => {
|
|
15978
|
+
if (document.activeElement === this) {
|
|
15979
|
+
this.setInputFocus();
|
|
15980
|
+
}
|
|
15981
|
+
}, 0);
|
|
15995
15982
|
});
|
|
15996
15983
|
|
|
15997
15984
|
this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
|
|
@@ -5016,7 +5016,7 @@ var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
5016
5016
|
|
|
5017
5017
|
var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--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-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--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}`;
|
|
5018
5018
|
|
|
5019
|
-
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{
|
|
5019
|
+
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents [auro-icon],.layout-classic .accents auro-icon{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
5020
5020
|
|
|
5021
5021
|
var classicColorCss = css`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}: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-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}: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-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
5022
5022
|
|
|
@@ -12733,20 +12733,6 @@ class AuroInput extends BaseInput {
|
|
|
12733
12733
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$1, AuroIcon$1);
|
|
12734
12734
|
}
|
|
12735
12735
|
|
|
12736
|
-
static get properties() {
|
|
12737
|
-
return {
|
|
12738
|
-
...super.properties,
|
|
12739
|
-
|
|
12740
|
-
/**
|
|
12741
|
-
* @type {boolean}
|
|
12742
|
-
*/
|
|
12743
|
-
hideInputVisually: {
|
|
12744
|
-
type: Boolean,
|
|
12745
|
-
reflect: true,
|
|
12746
|
-
}
|
|
12747
|
-
};
|
|
12748
|
-
}
|
|
12749
|
-
|
|
12750
12736
|
static get styles() {
|
|
12751
12737
|
return [
|
|
12752
12738
|
css`${classicStyleCss}`,
|
|
@@ -12782,11 +12768,7 @@ class AuroInput extends BaseInput {
|
|
|
12782
12768
|
*/
|
|
12783
12769
|
get commonInputClasses() {
|
|
12784
12770
|
return {
|
|
12785
|
-
'util_displayHiddenVisually': this.
|
|
12786
|
-
? this.hideInputVisually
|
|
12787
|
-
// eslint-disable-next-line no-warning-comments
|
|
12788
|
-
// TODO: refactor this to use a less brittle/forced solution.
|
|
12789
|
-
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
12771
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
12790
12772
|
};
|
|
12791
12773
|
}
|
|
12792
12774
|
|
|
@@ -12797,11 +12779,7 @@ class AuroInput extends BaseInput {
|
|
|
12797
12779
|
*/
|
|
12798
12780
|
get legacyInputClasses() {
|
|
12799
12781
|
return {
|
|
12800
|
-
...this.commonInputClasses
|
|
12801
|
-
'util_displayHiddenVisually':
|
|
12802
|
-
this.hideInputVisually !== undefined
|
|
12803
|
-
? this.hideInputVisually
|
|
12804
|
-
: !this.hasFocus && !this.value
|
|
12782
|
+
...this.commonInputClasses
|
|
12805
12783
|
};
|
|
12806
12784
|
}
|
|
12807
12785
|
|
|
@@ -12874,7 +12852,12 @@ class AuroInput extends BaseInput {
|
|
|
12874
12852
|
* @returns {void}
|
|
12875
12853
|
*/
|
|
12876
12854
|
checkDisplayValueSlotChange() {
|
|
12877
|
-
|
|
12855
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
12856
|
+
|
|
12857
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
12858
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
12859
|
+
nodes = nodes[0].assignedNodes();
|
|
12860
|
+
}
|
|
12878
12861
|
|
|
12879
12862
|
let hasContent = false;
|
|
12880
12863
|
|
|
@@ -15991,7 +15974,11 @@ class AuroCombobox extends AuroElement {
|
|
|
15991
15974
|
this.dropdownOpen = ev.detail.expanded;
|
|
15992
15975
|
|
|
15993
15976
|
// wait a frame in case the bib gets hide immediately after showing because there is no value
|
|
15994
|
-
setTimeout(
|
|
15977
|
+
setTimeout(() => {
|
|
15978
|
+
if (document.activeElement === this) {
|
|
15979
|
+
this.setInputFocus();
|
|
15980
|
+
}
|
|
15981
|
+
}, 0);
|
|
15995
15982
|
});
|
|
15996
15983
|
|
|
15997
15984
|
this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
|
|
@@ -18557,7 +18557,7 @@ var colorBaseCss = i$2`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
18557
18557
|
|
|
18558
18558
|
var tokensCss$4 = i$2`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--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-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--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}`;
|
|
18559
18559
|
|
|
18560
|
-
var classicStyleCss = i$2`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{
|
|
18560
|
+
var classicStyleCss = i$2`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents [auro-icon],.layout-classic .accents auro-icon{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
18561
18561
|
|
|
18562
18562
|
var classicColorCss = i$2`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}: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-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}: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-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
18563
18563
|
|
|
@@ -26274,20 +26274,6 @@ class AuroInput extends BaseInput {
|
|
|
26274
26274
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$1, AuroIcon$1);
|
|
26275
26275
|
}
|
|
26276
26276
|
|
|
26277
|
-
static get properties() {
|
|
26278
|
-
return {
|
|
26279
|
-
...super.properties,
|
|
26280
|
-
|
|
26281
|
-
/**
|
|
26282
|
-
* @type {boolean}
|
|
26283
|
-
*/
|
|
26284
|
-
hideInputVisually: {
|
|
26285
|
-
type: Boolean,
|
|
26286
|
-
reflect: true,
|
|
26287
|
-
}
|
|
26288
|
-
};
|
|
26289
|
-
}
|
|
26290
|
-
|
|
26291
26277
|
static get styles() {
|
|
26292
26278
|
return [
|
|
26293
26279
|
i$2`${classicStyleCss}`,
|
|
@@ -26323,11 +26309,7 @@ class AuroInput extends BaseInput {
|
|
|
26323
26309
|
*/
|
|
26324
26310
|
get commonInputClasses() {
|
|
26325
26311
|
return {
|
|
26326
|
-
'util_displayHiddenVisually': this.
|
|
26327
|
-
? this.hideInputVisually
|
|
26328
|
-
// eslint-disable-next-line no-warning-comments
|
|
26329
|
-
// TODO: refactor this to use a less brittle/forced solution.
|
|
26330
|
-
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
26312
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
26331
26313
|
};
|
|
26332
26314
|
}
|
|
26333
26315
|
|
|
@@ -26338,11 +26320,7 @@ class AuroInput extends BaseInput {
|
|
|
26338
26320
|
*/
|
|
26339
26321
|
get legacyInputClasses() {
|
|
26340
26322
|
return {
|
|
26341
|
-
...this.commonInputClasses
|
|
26342
|
-
'util_displayHiddenVisually':
|
|
26343
|
-
this.hideInputVisually !== undefined
|
|
26344
|
-
? this.hideInputVisually
|
|
26345
|
-
: !this.hasFocus && !this.value
|
|
26323
|
+
...this.commonInputClasses
|
|
26346
26324
|
};
|
|
26347
26325
|
}
|
|
26348
26326
|
|
|
@@ -26415,7 +26393,12 @@ class AuroInput extends BaseInput {
|
|
|
26415
26393
|
* @returns {void}
|
|
26416
26394
|
*/
|
|
26417
26395
|
checkDisplayValueSlotChange() {
|
|
26418
|
-
|
|
26396
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
26397
|
+
|
|
26398
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
26399
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
26400
|
+
nodes = nodes[0].assignedNodes();
|
|
26401
|
+
}
|
|
26419
26402
|
|
|
26420
26403
|
let hasContent = false;
|
|
26421
26404
|
|
|
@@ -18298,7 +18298,7 @@ var colorBaseCss = i$2`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
18298
18298
|
|
|
18299
18299
|
var tokensCss$4 = i$2`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--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-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--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}`;
|
|
18300
18300
|
|
|
18301
|
-
var classicStyleCss = i$2`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{
|
|
18301
|
+
var classicStyleCss = i$2`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents [auro-icon],.layout-classic .accents auro-icon{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
18302
18302
|
|
|
18303
18303
|
var classicColorCss = i$2`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}: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-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}: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-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
18304
18304
|
|
|
@@ -26015,20 +26015,6 @@ class AuroInput extends BaseInput {
|
|
|
26015
26015
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$1, AuroIcon$1);
|
|
26016
26016
|
}
|
|
26017
26017
|
|
|
26018
|
-
static get properties() {
|
|
26019
|
-
return {
|
|
26020
|
-
...super.properties,
|
|
26021
|
-
|
|
26022
|
-
/**
|
|
26023
|
-
* @type {boolean}
|
|
26024
|
-
*/
|
|
26025
|
-
hideInputVisually: {
|
|
26026
|
-
type: Boolean,
|
|
26027
|
-
reflect: true,
|
|
26028
|
-
}
|
|
26029
|
-
};
|
|
26030
|
-
}
|
|
26031
|
-
|
|
26032
26018
|
static get styles() {
|
|
26033
26019
|
return [
|
|
26034
26020
|
i$2`${classicStyleCss}`,
|
|
@@ -26064,11 +26050,7 @@ class AuroInput extends BaseInput {
|
|
|
26064
26050
|
*/
|
|
26065
26051
|
get commonInputClasses() {
|
|
26066
26052
|
return {
|
|
26067
|
-
'util_displayHiddenVisually': this.
|
|
26068
|
-
? this.hideInputVisually
|
|
26069
|
-
// eslint-disable-next-line no-warning-comments
|
|
26070
|
-
// TODO: refactor this to use a less brittle/forced solution.
|
|
26071
|
-
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
26053
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
26072
26054
|
};
|
|
26073
26055
|
}
|
|
26074
26056
|
|
|
@@ -26079,11 +26061,7 @@ class AuroInput extends BaseInput {
|
|
|
26079
26061
|
*/
|
|
26080
26062
|
get legacyInputClasses() {
|
|
26081
26063
|
return {
|
|
26082
|
-
...this.commonInputClasses
|
|
26083
|
-
'util_displayHiddenVisually':
|
|
26084
|
-
this.hideInputVisually !== undefined
|
|
26085
|
-
? this.hideInputVisually
|
|
26086
|
-
: !this.hasFocus && !this.value
|
|
26064
|
+
...this.commonInputClasses
|
|
26087
26065
|
};
|
|
26088
26066
|
}
|
|
26089
26067
|
|
|
@@ -26156,7 +26134,12 @@ class AuroInput extends BaseInput {
|
|
|
26156
26134
|
* @returns {void}
|
|
26157
26135
|
*/
|
|
26158
26136
|
checkDisplayValueSlotChange() {
|
|
26159
|
-
|
|
26137
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
26138
|
+
|
|
26139
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
26140
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
26141
|
+
nodes = nodes[0].assignedNodes();
|
|
26142
|
+
}
|
|
26160
26143
|
|
|
26161
26144
|
let hasContent = false;
|
|
26162
26145
|
|
|
@@ -18234,7 +18234,7 @@ var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
18234
18234
|
|
|
18235
18235
|
var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--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-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--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}`;
|
|
18236
18236
|
|
|
18237
|
-
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{
|
|
18237
|
+
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents [auro-icon],.layout-classic .accents auro-icon{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
18238
18238
|
|
|
18239
18239
|
var classicColorCss = css`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}: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-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}: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-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
18240
18240
|
|
|
@@ -25951,20 +25951,6 @@ class AuroInput extends BaseInput {
|
|
|
25951
25951
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$1, AuroIcon$1);
|
|
25952
25952
|
}
|
|
25953
25953
|
|
|
25954
|
-
static get properties() {
|
|
25955
|
-
return {
|
|
25956
|
-
...super.properties,
|
|
25957
|
-
|
|
25958
|
-
/**
|
|
25959
|
-
* @type {boolean}
|
|
25960
|
-
*/
|
|
25961
|
-
hideInputVisually: {
|
|
25962
|
-
type: Boolean,
|
|
25963
|
-
reflect: true,
|
|
25964
|
-
}
|
|
25965
|
-
};
|
|
25966
|
-
}
|
|
25967
|
-
|
|
25968
25954
|
static get styles() {
|
|
25969
25955
|
return [
|
|
25970
25956
|
css`${classicStyleCss}`,
|
|
@@ -26000,11 +25986,7 @@ class AuroInput extends BaseInput {
|
|
|
26000
25986
|
*/
|
|
26001
25987
|
get commonInputClasses() {
|
|
26002
25988
|
return {
|
|
26003
|
-
'util_displayHiddenVisually': this.
|
|
26004
|
-
? this.hideInputVisually
|
|
26005
|
-
// eslint-disable-next-line no-warning-comments
|
|
26006
|
-
// TODO: refactor this to use a less brittle/forced solution.
|
|
26007
|
-
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
25989
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
26008
25990
|
};
|
|
26009
25991
|
}
|
|
26010
25992
|
|
|
@@ -26015,11 +25997,7 @@ class AuroInput extends BaseInput {
|
|
|
26015
25997
|
*/
|
|
26016
25998
|
get legacyInputClasses() {
|
|
26017
25999
|
return {
|
|
26018
|
-
...this.commonInputClasses
|
|
26019
|
-
'util_displayHiddenVisually':
|
|
26020
|
-
this.hideInputVisually !== undefined
|
|
26021
|
-
? this.hideInputVisually
|
|
26022
|
-
: !this.hasFocus && !this.value
|
|
26000
|
+
...this.commonInputClasses
|
|
26023
26001
|
};
|
|
26024
26002
|
}
|
|
26025
26003
|
|
|
@@ -26092,7 +26070,12 @@ class AuroInput extends BaseInput {
|
|
|
26092
26070
|
* @returns {void}
|
|
26093
26071
|
*/
|
|
26094
26072
|
checkDisplayValueSlotChange() {
|
|
26095
|
-
|
|
26073
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
26074
|
+
|
|
26075
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
26076
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
26077
|
+
nodes = nodes[0].assignedNodes();
|
|
26078
|
+
}
|
|
26096
26079
|
|
|
26097
26080
|
let hasContent = false;
|
|
26098
26081
|
|
|
@@ -18234,7 +18234,7 @@ var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
18234
18234
|
|
|
18235
18235
|
var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--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-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--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}`;
|
|
18236
18236
|
|
|
18237
|
-
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{
|
|
18237
|
+
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents [auro-icon],.layout-classic .accents auro-icon{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
18238
18238
|
|
|
18239
18239
|
var classicColorCss = css`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}: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-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}: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-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
18240
18240
|
|
|
@@ -25951,20 +25951,6 @@ class AuroInput extends BaseInput {
|
|
|
25951
25951
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$1, AuroIcon$1);
|
|
25952
25952
|
}
|
|
25953
25953
|
|
|
25954
|
-
static get properties() {
|
|
25955
|
-
return {
|
|
25956
|
-
...super.properties,
|
|
25957
|
-
|
|
25958
|
-
/**
|
|
25959
|
-
* @type {boolean}
|
|
25960
|
-
*/
|
|
25961
|
-
hideInputVisually: {
|
|
25962
|
-
type: Boolean,
|
|
25963
|
-
reflect: true,
|
|
25964
|
-
}
|
|
25965
|
-
};
|
|
25966
|
-
}
|
|
25967
|
-
|
|
25968
25954
|
static get styles() {
|
|
25969
25955
|
return [
|
|
25970
25956
|
css`${classicStyleCss}`,
|
|
@@ -26000,11 +25986,7 @@ class AuroInput extends BaseInput {
|
|
|
26000
25986
|
*/
|
|
26001
25987
|
get commonInputClasses() {
|
|
26002
25988
|
return {
|
|
26003
|
-
'util_displayHiddenVisually': this.
|
|
26004
|
-
? this.hideInputVisually
|
|
26005
|
-
// eslint-disable-next-line no-warning-comments
|
|
26006
|
-
// TODO: refactor this to use a less brittle/forced solution.
|
|
26007
|
-
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
25989
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
26008
25990
|
};
|
|
26009
25991
|
}
|
|
26010
25992
|
|
|
@@ -26015,11 +25997,7 @@ class AuroInput extends BaseInput {
|
|
|
26015
25997
|
*/
|
|
26016
25998
|
get legacyInputClasses() {
|
|
26017
25999
|
return {
|
|
26018
|
-
...this.commonInputClasses
|
|
26019
|
-
'util_displayHiddenVisually':
|
|
26020
|
-
this.hideInputVisually !== undefined
|
|
26021
|
-
? this.hideInputVisually
|
|
26022
|
-
: !this.hasFocus && !this.value
|
|
26000
|
+
...this.commonInputClasses
|
|
26023
26001
|
};
|
|
26024
26002
|
}
|
|
26025
26003
|
|
|
@@ -26092,7 +26070,12 @@ class AuroInput extends BaseInput {
|
|
|
26092
26070
|
* @returns {void}
|
|
26093
26071
|
*/
|
|
26094
26072
|
checkDisplayValueSlotChange() {
|
|
26095
|
-
|
|
26073
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
26074
|
+
|
|
26075
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
26076
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
26077
|
+
nodes = nodes[0].assignedNodes();
|
|
26078
|
+
}
|
|
26096
26079
|
|
|
26097
26080
|
let hasContent = false;
|
|
26098
26081
|
|
|
@@ -21,7 +21,6 @@ Generate unique names for dependency components.
|
|
|
21
21
|
| [error](#error) | `error` | `string` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
|
|
22
22
|
| [errorMessage](#errorMessage) | `errorMessage` | `string` | | Contains the help text message for the current validity error. |
|
|
23
23
|
| [format](#format) | `format` | `string` | | Specifies the input mask format. |
|
|
24
|
-
| [hideInputVisually](#hideInputVisually) | `hideInputVisually` | `boolean` | | |
|
|
25
24
|
| [icon](#icon) | `icon` | `boolean` | false | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
|
|
26
25
|
| [id](#id) | `id` | `string` | | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
|
|
27
26
|
| [inputmode](#inputmode) | `inputmode` | `string` | | Exposes inputmode attribute for input. |
|
|
@@ -126,7 +126,7 @@ var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
126
126
|
|
|
127
127
|
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--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-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--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}`;
|
|
128
128
|
|
|
129
|
-
var classicStyleCss = i$5`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{
|
|
129
|
+
var classicStyleCss = i$5`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents [auro-icon],.layout-classic .accents auro-icon{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
130
130
|
|
|
131
131
|
var classicColorCss = i$5`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}: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-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}: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-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
132
132
|
|
|
@@ -7882,20 +7882,6 @@ class AuroInput extends BaseInput {
|
|
|
7882
7882
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion, AuroIcon);
|
|
7883
7883
|
}
|
|
7884
7884
|
|
|
7885
|
-
static get properties() {
|
|
7886
|
-
return {
|
|
7887
|
-
...super.properties,
|
|
7888
|
-
|
|
7889
|
-
/**
|
|
7890
|
-
* @type {boolean}
|
|
7891
|
-
*/
|
|
7892
|
-
hideInputVisually: {
|
|
7893
|
-
type: Boolean,
|
|
7894
|
-
reflect: true,
|
|
7895
|
-
}
|
|
7896
|
-
};
|
|
7897
|
-
}
|
|
7898
|
-
|
|
7899
7885
|
static get styles() {
|
|
7900
7886
|
return [
|
|
7901
7887
|
i$5`${classicStyleCss}`,
|
|
@@ -7931,11 +7917,7 @@ class AuroInput extends BaseInput {
|
|
|
7931
7917
|
*/
|
|
7932
7918
|
get commonInputClasses() {
|
|
7933
7919
|
return {
|
|
7934
|
-
'util_displayHiddenVisually': this.
|
|
7935
|
-
? this.hideInputVisually
|
|
7936
|
-
// eslint-disable-next-line no-warning-comments
|
|
7937
|
-
// TODO: refactor this to use a less brittle/forced solution.
|
|
7938
|
-
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7920
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7939
7921
|
};
|
|
7940
7922
|
}
|
|
7941
7923
|
|
|
@@ -7946,11 +7928,7 @@ class AuroInput extends BaseInput {
|
|
|
7946
7928
|
*/
|
|
7947
7929
|
get legacyInputClasses() {
|
|
7948
7930
|
return {
|
|
7949
|
-
...this.commonInputClasses
|
|
7950
|
-
'util_displayHiddenVisually':
|
|
7951
|
-
this.hideInputVisually !== undefined
|
|
7952
|
-
? this.hideInputVisually
|
|
7953
|
-
: !this.hasFocus && !this.value
|
|
7931
|
+
...this.commonInputClasses
|
|
7954
7932
|
};
|
|
7955
7933
|
}
|
|
7956
7934
|
|
|
@@ -8023,7 +8001,12 @@ class AuroInput extends BaseInput {
|
|
|
8023
8001
|
* @returns {void}
|
|
8024
8002
|
*/
|
|
8025
8003
|
checkDisplayValueSlotChange() {
|
|
8026
|
-
|
|
8004
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
8005
|
+
|
|
8006
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
8007
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
8008
|
+
nodes = nodes[0].assignedNodes();
|
|
8009
|
+
}
|
|
8027
8010
|
|
|
8028
8011
|
let hasContent = false;
|
|
8029
8012
|
|
|
@@ -51,7 +51,7 @@ var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
51
51
|
|
|
52
52
|
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--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-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--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}`;
|
|
53
53
|
|
|
54
|
-
var classicStyleCss = i$5`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{
|
|
54
|
+
var classicStyleCss = i$5`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents [auro-icon],.layout-classic .accents auro-icon{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
55
55
|
|
|
56
56
|
var classicColorCss = i$5`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}: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-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}: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-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
57
57
|
|
|
@@ -7807,20 +7807,6 @@ class AuroInput extends BaseInput {
|
|
|
7807
7807
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion, AuroIcon);
|
|
7808
7808
|
}
|
|
7809
7809
|
|
|
7810
|
-
static get properties() {
|
|
7811
|
-
return {
|
|
7812
|
-
...super.properties,
|
|
7813
|
-
|
|
7814
|
-
/**
|
|
7815
|
-
* @type {boolean}
|
|
7816
|
-
*/
|
|
7817
|
-
hideInputVisually: {
|
|
7818
|
-
type: Boolean,
|
|
7819
|
-
reflect: true,
|
|
7820
|
-
}
|
|
7821
|
-
};
|
|
7822
|
-
}
|
|
7823
|
-
|
|
7824
7810
|
static get styles() {
|
|
7825
7811
|
return [
|
|
7826
7812
|
i$5`${classicStyleCss}`,
|
|
@@ -7856,11 +7842,7 @@ class AuroInput extends BaseInput {
|
|
|
7856
7842
|
*/
|
|
7857
7843
|
get commonInputClasses() {
|
|
7858
7844
|
return {
|
|
7859
|
-
'util_displayHiddenVisually': this.
|
|
7860
|
-
? this.hideInputVisually
|
|
7861
|
-
// eslint-disable-next-line no-warning-comments
|
|
7862
|
-
// TODO: refactor this to use a less brittle/forced solution.
|
|
7863
|
-
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7845
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7864
7846
|
};
|
|
7865
7847
|
}
|
|
7866
7848
|
|
|
@@ -7871,11 +7853,7 @@ class AuroInput extends BaseInput {
|
|
|
7871
7853
|
*/
|
|
7872
7854
|
get legacyInputClasses() {
|
|
7873
7855
|
return {
|
|
7874
|
-
...this.commonInputClasses
|
|
7875
|
-
'util_displayHiddenVisually':
|
|
7876
|
-
this.hideInputVisually !== undefined
|
|
7877
|
-
? this.hideInputVisually
|
|
7878
|
-
: !this.hasFocus && !this.value
|
|
7856
|
+
...this.commonInputClasses
|
|
7879
7857
|
};
|
|
7880
7858
|
}
|
|
7881
7859
|
|
|
@@ -7948,7 +7926,12 @@ class AuroInput extends BaseInput {
|
|
|
7948
7926
|
* @returns {void}
|
|
7949
7927
|
*/
|
|
7950
7928
|
checkDisplayValueSlotChange() {
|
|
7951
|
-
|
|
7929
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
7930
|
+
|
|
7931
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
7932
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
7933
|
+
nodes = nodes[0].assignedNodes();
|
|
7934
|
+
}
|
|
7952
7935
|
|
|
7953
7936
|
let hasContent = false;
|
|
7954
7937
|
|
|
@@ -1,178 +1,4 @@
|
|
|
1
1
|
export class AuroInput extends BaseInput {
|
|
2
|
-
static get properties(): {
|
|
3
|
-
/**
|
|
4
|
-
* @type {boolean}
|
|
5
|
-
*/
|
|
6
|
-
hideInputVisually: boolean;
|
|
7
|
-
a11yRole: {
|
|
8
|
-
type: StringConstructor;
|
|
9
|
-
reflect: boolean;
|
|
10
|
-
};
|
|
11
|
-
a11yExpanded: {
|
|
12
|
-
type: BooleanConstructor;
|
|
13
|
-
reflect: boolean;
|
|
14
|
-
};
|
|
15
|
-
a11yControls: {
|
|
16
|
-
type: StringConstructor;
|
|
17
|
-
reflect: boolean;
|
|
18
|
-
};
|
|
19
|
-
activeLabel: {
|
|
20
|
-
type: BooleanConstructor;
|
|
21
|
-
reflect: boolean;
|
|
22
|
-
};
|
|
23
|
-
autocapitalize: {
|
|
24
|
-
type: StringConstructor;
|
|
25
|
-
reflect: boolean;
|
|
26
|
-
};
|
|
27
|
-
autocomplete: {
|
|
28
|
-
type: StringConstructor;
|
|
29
|
-
reflect: boolean;
|
|
30
|
-
};
|
|
31
|
-
autocorrect: {
|
|
32
|
-
type: StringConstructor;
|
|
33
|
-
reflect: boolean;
|
|
34
|
-
};
|
|
35
|
-
disabled: {
|
|
36
|
-
type: BooleanConstructor;
|
|
37
|
-
reflect: boolean;
|
|
38
|
-
};
|
|
39
|
-
error: {
|
|
40
|
-
type: StringConstructor;
|
|
41
|
-
reflect: boolean;
|
|
42
|
-
};
|
|
43
|
-
errorMessage: {
|
|
44
|
-
type: StringConstructor;
|
|
45
|
-
};
|
|
46
|
-
format: {
|
|
47
|
-
type: StringConstructor;
|
|
48
|
-
reflect: boolean;
|
|
49
|
-
};
|
|
50
|
-
icon: {
|
|
51
|
-
type: BooleanConstructor;
|
|
52
|
-
reflect: boolean;
|
|
53
|
-
};
|
|
54
|
-
inputmode: {
|
|
55
|
-
type: StringConstructor;
|
|
56
|
-
reflect: boolean;
|
|
57
|
-
};
|
|
58
|
-
lang: {
|
|
59
|
-
type: StringConstructor;
|
|
60
|
-
reflect: boolean;
|
|
61
|
-
};
|
|
62
|
-
max: {
|
|
63
|
-
type: StringConstructor;
|
|
64
|
-
};
|
|
65
|
-
maxLength: {
|
|
66
|
-
type: NumberConstructor;
|
|
67
|
-
reflect: boolean;
|
|
68
|
-
};
|
|
69
|
-
min: {
|
|
70
|
-
type: StringConstructor;
|
|
71
|
-
};
|
|
72
|
-
minLength: {
|
|
73
|
-
type: NumberConstructor;
|
|
74
|
-
reflect: boolean;
|
|
75
|
-
};
|
|
76
|
-
name: {
|
|
77
|
-
type: StringConstructor;
|
|
78
|
-
reflect: boolean;
|
|
79
|
-
};
|
|
80
|
-
nested: {
|
|
81
|
-
type: BooleanConstructor;
|
|
82
|
-
reflect: boolean;
|
|
83
|
-
};
|
|
84
|
-
noValidate: {
|
|
85
|
-
type: BooleanConstructor;
|
|
86
|
-
reflect: boolean;
|
|
87
|
-
};
|
|
88
|
-
onDark: {
|
|
89
|
-
type: BooleanConstructor;
|
|
90
|
-
reflect: boolean;
|
|
91
|
-
};
|
|
92
|
-
pattern: {
|
|
93
|
-
type: StringConstructor;
|
|
94
|
-
reflect: boolean;
|
|
95
|
-
};
|
|
96
|
-
placeholder: {
|
|
97
|
-
type: StringConstructor;
|
|
98
|
-
reflect: boolean;
|
|
99
|
-
};
|
|
100
|
-
readonly: {
|
|
101
|
-
type: BooleanConstructor;
|
|
102
|
-
reflect: boolean;
|
|
103
|
-
};
|
|
104
|
-
required: {
|
|
105
|
-
type: BooleanConstructor;
|
|
106
|
-
reflect: boolean;
|
|
107
|
-
};
|
|
108
|
-
showPassword: {
|
|
109
|
-
state: boolean;
|
|
110
|
-
};
|
|
111
|
-
setCustomValidity: {
|
|
112
|
-
type: StringConstructor;
|
|
113
|
-
};
|
|
114
|
-
setCustomValidityBadInput: {
|
|
115
|
-
type: StringConstructor;
|
|
116
|
-
};
|
|
117
|
-
setCustomValidityCustomError: {
|
|
118
|
-
type: StringConstructor;
|
|
119
|
-
};
|
|
120
|
-
setCustomValidityForType: {
|
|
121
|
-
type: StringConstructor;
|
|
122
|
-
};
|
|
123
|
-
setCustomValidityRangeOverflow: {
|
|
124
|
-
type: StringConstructor;
|
|
125
|
-
};
|
|
126
|
-
setCustomValidityRangeUnderflow: {
|
|
127
|
-
type: StringConstructor;
|
|
128
|
-
};
|
|
129
|
-
setCustomValidityTooLong: {
|
|
130
|
-
type: StringConstructor;
|
|
131
|
-
};
|
|
132
|
-
setCustomValidityTooShort: {
|
|
133
|
-
type: StringConstructor;
|
|
134
|
-
};
|
|
135
|
-
setCustomValidityValueMissing: {
|
|
136
|
-
type: StringConstructor;
|
|
137
|
-
};
|
|
138
|
-
simple: {
|
|
139
|
-
type: BooleanConstructor;
|
|
140
|
-
reflect: boolean;
|
|
141
|
-
};
|
|
142
|
-
customValidityTypeEmail: {
|
|
143
|
-
type: StringConstructor;
|
|
144
|
-
};
|
|
145
|
-
spellcheck: {
|
|
146
|
-
type: StringConstructor;
|
|
147
|
-
reflect: boolean;
|
|
148
|
-
};
|
|
149
|
-
type: {
|
|
150
|
-
type: StringConstructor;
|
|
151
|
-
reflect: boolean;
|
|
152
|
-
};
|
|
153
|
-
value: {
|
|
154
|
-
type: StringConstructor;
|
|
155
|
-
reflect: boolean;
|
|
156
|
-
};
|
|
157
|
-
validateOnInput: {
|
|
158
|
-
type: BooleanConstructor;
|
|
159
|
-
};
|
|
160
|
-
validity: {
|
|
161
|
-
type: StringConstructor;
|
|
162
|
-
reflect: boolean;
|
|
163
|
-
};
|
|
164
|
-
touched: boolean;
|
|
165
|
-
inputId: {
|
|
166
|
-
type: StringConstructor;
|
|
167
|
-
reflect: boolean;
|
|
168
|
-
attribute: boolean;
|
|
169
|
-
};
|
|
170
|
-
layout: {
|
|
171
|
-
type: StringConstructor;
|
|
172
|
-
attribute: string;
|
|
173
|
-
reflect: boolean;
|
|
174
|
-
};
|
|
175
|
-
};
|
|
176
2
|
static get styles(): import("lit").CSSResult[];
|
|
177
3
|
/**
|
|
178
4
|
* This will register this element with the browser.
|
|
@@ -14,7 +14,7 @@ var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
14
14
|
|
|
15
15
|
var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--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-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--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}`;
|
|
16
16
|
|
|
17
|
-
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{
|
|
17
|
+
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents [auro-icon],.layout-classic .accents auro-icon{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
18
18
|
|
|
19
19
|
var classicColorCss = css`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}: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-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}: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-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
20
20
|
|
|
@@ -7731,20 +7731,6 @@ class AuroInput extends BaseInput {
|
|
|
7731
7731
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion, AuroIcon);
|
|
7732
7732
|
}
|
|
7733
7733
|
|
|
7734
|
-
static get properties() {
|
|
7735
|
-
return {
|
|
7736
|
-
...super.properties,
|
|
7737
|
-
|
|
7738
|
-
/**
|
|
7739
|
-
* @type {boolean}
|
|
7740
|
-
*/
|
|
7741
|
-
hideInputVisually: {
|
|
7742
|
-
type: Boolean,
|
|
7743
|
-
reflect: true,
|
|
7744
|
-
}
|
|
7745
|
-
};
|
|
7746
|
-
}
|
|
7747
|
-
|
|
7748
7734
|
static get styles() {
|
|
7749
7735
|
return [
|
|
7750
7736
|
css`${classicStyleCss}`,
|
|
@@ -7780,11 +7766,7 @@ class AuroInput extends BaseInput {
|
|
|
7780
7766
|
*/
|
|
7781
7767
|
get commonInputClasses() {
|
|
7782
7768
|
return {
|
|
7783
|
-
'util_displayHiddenVisually': this.
|
|
7784
|
-
? this.hideInputVisually
|
|
7785
|
-
// eslint-disable-next-line no-warning-comments
|
|
7786
|
-
// TODO: refactor this to use a less brittle/forced solution.
|
|
7787
|
-
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7769
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7788
7770
|
};
|
|
7789
7771
|
}
|
|
7790
7772
|
|
|
@@ -7795,11 +7777,7 @@ class AuroInput extends BaseInput {
|
|
|
7795
7777
|
*/
|
|
7796
7778
|
get legacyInputClasses() {
|
|
7797
7779
|
return {
|
|
7798
|
-
...this.commonInputClasses
|
|
7799
|
-
'util_displayHiddenVisually':
|
|
7800
|
-
this.hideInputVisually !== undefined
|
|
7801
|
-
? this.hideInputVisually
|
|
7802
|
-
: !this.hasFocus && !this.value
|
|
7780
|
+
...this.commonInputClasses
|
|
7803
7781
|
};
|
|
7804
7782
|
}
|
|
7805
7783
|
|
|
@@ -7872,7 +7850,12 @@ class AuroInput extends BaseInput {
|
|
|
7872
7850
|
* @returns {void}
|
|
7873
7851
|
*/
|
|
7874
7852
|
checkDisplayValueSlotChange() {
|
|
7875
|
-
|
|
7853
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
7854
|
+
|
|
7855
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
7856
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
7857
|
+
nodes = nodes[0].assignedNodes();
|
|
7858
|
+
}
|
|
7876
7859
|
|
|
7877
7860
|
let hasContent = false;
|
|
7878
7861
|
|
|
@@ -14,7 +14,7 @@ var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);b
|
|
|
14
14
|
|
|
15
15
|
var tokensCss$4 = css`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--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-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--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, #ffffff);--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}`;
|
|
16
16
|
|
|
17
|
-
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{
|
|
17
|
+
var classicStyleCss = css`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents.left{padding-left:8px}.layout-classic .accents.right{padding-right:8px}.layout-classic .accents [auro-icon],.layout-classic .accents auro-icon{margin-right:8px}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
18
18
|
|
|
19
19
|
var classicColorCss = css`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}: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-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}: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-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
20
20
|
|
|
@@ -7731,20 +7731,6 @@ class AuroInput extends BaseInput {
|
|
|
7731
7731
|
this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion, AuroIcon);
|
|
7732
7732
|
}
|
|
7733
7733
|
|
|
7734
|
-
static get properties() {
|
|
7735
|
-
return {
|
|
7736
|
-
...super.properties,
|
|
7737
|
-
|
|
7738
|
-
/**
|
|
7739
|
-
* @type {boolean}
|
|
7740
|
-
*/
|
|
7741
|
-
hideInputVisually: {
|
|
7742
|
-
type: Boolean,
|
|
7743
|
-
reflect: true,
|
|
7744
|
-
}
|
|
7745
|
-
};
|
|
7746
|
-
}
|
|
7747
|
-
|
|
7748
7734
|
static get styles() {
|
|
7749
7735
|
return [
|
|
7750
7736
|
css`${classicStyleCss}`,
|
|
@@ -7780,11 +7766,7 @@ class AuroInput extends BaseInput {
|
|
|
7780
7766
|
*/
|
|
7781
7767
|
get commonInputClasses() {
|
|
7782
7768
|
return {
|
|
7783
|
-
'util_displayHiddenVisually': this.
|
|
7784
|
-
? this.hideInputVisually
|
|
7785
|
-
// eslint-disable-next-line no-warning-comments
|
|
7786
|
-
// TODO: refactor this to use a less brittle/forced solution.
|
|
7787
|
-
: this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7769
|
+
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
7788
7770
|
};
|
|
7789
7771
|
}
|
|
7790
7772
|
|
|
@@ -7795,11 +7777,7 @@ class AuroInput extends BaseInput {
|
|
|
7795
7777
|
*/
|
|
7796
7778
|
get legacyInputClasses() {
|
|
7797
7779
|
return {
|
|
7798
|
-
...this.commonInputClasses
|
|
7799
|
-
'util_displayHiddenVisually':
|
|
7800
|
-
this.hideInputVisually !== undefined
|
|
7801
|
-
? this.hideInputVisually
|
|
7802
|
-
: !this.hasFocus && !this.value
|
|
7780
|
+
...this.commonInputClasses
|
|
7803
7781
|
};
|
|
7804
7782
|
}
|
|
7805
7783
|
|
|
@@ -7872,7 +7850,12 @@ class AuroInput extends BaseInput {
|
|
|
7872
7850
|
* @returns {void}
|
|
7873
7851
|
*/
|
|
7874
7852
|
checkDisplayValueSlotChange() {
|
|
7875
|
-
|
|
7853
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
7854
|
+
|
|
7855
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
7856
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
7857
|
+
nodes = nodes[0].assignedNodes();
|
|
7858
|
+
}
|
|
7876
7859
|
|
|
7877
7860
|
let hasContent = false;
|
|
7878
7861
|
|
package/package.json
CHANGED