@aurodesignsystem-dev/auro-formkit 0.0.0-pr1052.8 → 0.0.0-pr1059.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/combobox/demo/api.md +38 -37
- package/components/combobox/demo/api.min.js +28 -17
- package/components/combobox/demo/index.min.js +26 -15
- package/components/combobox/dist/auro-combobox.d.ts +8 -4
- package/components/combobox/dist/index.js +26 -15
- package/components/combobox/dist/registered.js +26 -15
- package/package.json +1 -1
|
@@ -5,41 +5,42 @@
|
|
|
5
5
|
|
|
6
6
|
## Properties
|
|
7
7
|
|
|
8
|
-
| Property | Attribute | Type | Default | Description |
|
|
9
|
-
|
|
10
|
-
| [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean` | false | If declared, bib's position will be automatically calculated where to appear. |
|
|
11
|
-
| [autocomplete](#autocomplete) | `autocomplete` | `string` | "false" | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
|
|
12
|
-
| [checkmark](#checkmark) | `checkmark` | `boolean` | false | When attribute is present auro-menu will apply check marks to selected options. |
|
|
13
|
-
| [disabled](#disabled) | `disabled` | `boolean` | false | If set, disables the combobox. |
|
|
14
|
-
| [dvInputOnly](#dvInputOnly) | `dvInputOnly` | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. |
|
|
15
|
-
| [error](#error) | `error` | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
|
|
16
|
-
| [format](#format) | `format` | `string` | | Specifies the input mask format. |
|
|
17
|
-
| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
|
|
18
|
-
| [inputValue](#inputValue) | | `string \| undefined` | | Returns the current value of the input element within the combobox. |
|
|
19
|
-
| [inputmode](#inputmode) | `inputmode` | `string` | | Exposes inputmode attribute for input. |
|
|
20
|
-
| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
|
|
21
|
-
| [layout](#layout) | | `string` | "classic" | |
|
|
22
|
-
| [matchWidth](#matchWidth) | `matchWidth` | `boolean` | true | If declared, the popover and trigger will be set to the same width. |
|
|
23
|
-
| [msgSelectionMissing](#msgSelectionMissing) | | `string` | "Please select an option." | |
|
|
24
|
-
| [noFilter](#noFilter) | `noFilter` | `boolean` | false | If set, combobox will not filter menuoptions based in input. |
|
|
25
|
-
| [noFlip](#noFlip) | `noFlip` | `boolean` | "false" | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
|
|
26
|
-
| [noValidate](#noValidate) | `noValidate` | `boolean` | false | If set, disables auto-validation on blur. |
|
|
27
|
-
| [offset](#offset) | `offset` | `number` | "0" | Gap between the trigger element and bib. |
|
|
28
|
-
| [onDark](#onDark) | `onDark` | `boolean` | | If declared, onDark styles will be applied to the trigger. |
|
|
29
|
-
| [optionSelected](#optionSelected) | `optionSelected` | `HTMLElement` | | Specifies the current selected option. |
|
|
30
|
-
| [persistInput](#persistInput) | `persistInput` | `Boolean` | false | If declared, selecting a menu option will not change the input value. By doing so,<br />the current menu filter will be preserved and the user can continue from their last<br />filter state. It is recommended to use this in combination with the `displayValue` slot. |
|
|
31
|
-
| [placeholder](#placeholder) | `placeholder` | `string` | | Define custom placeholder text, only supported by date input formats. |
|
|
32
|
-
| [placement](#placement) | `placement` | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
|
|
33
|
-
| [required](#required) | `required` | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
|
|
34
|
-
| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `string` | | Sets a custom help text message to display for all validityStates. |
|
|
35
|
-
| [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | `string` | | Custom help text message to display when validity = `customError`. |
|
|
36
|
-
| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
37
|
-
| [shape](#shape) | | `string` | "classic" | |
|
|
38
|
-
| [size](#size) | | `string` | "xl" | |
|
|
39
|
-
| [triggerIcon](#triggerIcon) | `triggerIcon` | `boolean` | false | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
|
|
40
|
-
| [type](#type) | `type` | `string` | | Applies the defined value as the type attribute on auro-input. |
|
|
41
|
-
| [
|
|
42
|
-
| [
|
|
8
|
+
| Property | Attribute | Modifiers | Type | Default | Description |
|
|
9
|
+
|---------------------------------|---------------------------------|-----------|-----------------------|----------------------------|--------------------------------------------------|
|
|
10
|
+
| [autoPlacement](#autoPlacement) | `autoPlacement` | | `boolean` | false | If declared, bib's position will be automatically calculated where to appear. |
|
|
11
|
+
| [autocomplete](#autocomplete) | `autocomplete` | | `string` | "false" | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
|
|
12
|
+
| [checkmark](#checkmark) | `checkmark` | | `boolean` | false | When attribute is present auro-menu will apply check marks to selected options. |
|
|
13
|
+
| [disabled](#disabled) | `disabled` | | `boolean` | false | If set, disables the combobox. |
|
|
14
|
+
| [dvInputOnly](#dvInputOnly) | `dvInputOnly` | | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. |
|
|
15
|
+
| [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
|
|
16
|
+
| [format](#format) | `format` | | `string` | | Specifies the input mask format. |
|
|
17
|
+
| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
|
|
18
|
+
| [inputValue](#inputValue) | | readonly | `string \| undefined` | | Returns the current value of the input element within the combobox. |
|
|
19
|
+
| [inputmode](#inputmode) | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
|
|
20
|
+
| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
|
|
21
|
+
| [layout](#layout) | | | `string` | "classic" | |
|
|
22
|
+
| [matchWidth](#matchWidth) | `matchWidth` | | `boolean` | true | If declared, the popover and trigger will be set to the same width. |
|
|
23
|
+
| [msgSelectionMissing](#msgSelectionMissing) | | | `string` | "Please select an option." | |
|
|
24
|
+
| [noFilter](#noFilter) | `noFilter` | | `boolean` | false | If set, combobox will not filter menuoptions based in input. |
|
|
25
|
+
| [noFlip](#noFlip) | `noFlip` | | `boolean` | "false" | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
|
|
26
|
+
| [noValidate](#noValidate) | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
|
|
27
|
+
| [offset](#offset) | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
|
|
28
|
+
| [onDark](#onDark) | `onDark` | | `boolean` | | If declared, onDark styles will be applied to the trigger. |
|
|
29
|
+
| [optionSelected](#optionSelected) | `optionSelected` | | `HTMLElement` | | Specifies the current selected option. |
|
|
30
|
+
| [persistInput](#persistInput) | `persistInput` | | `Boolean` | false | If declared, selecting a menu option will not change the input value. By doing so,<br />the current menu filter will be preserved and the user can continue from their last<br />filter state. It is recommended to use this in combination with the `displayValue` slot. |
|
|
31
|
+
| [placeholder](#placeholder) | `placeholder` | | `string` | | Define custom placeholder text, only supported by date input formats. |
|
|
32
|
+
| [placement](#placement) | `placement` | | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
|
|
33
|
+
| [required](#required) | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
|
|
34
|
+
| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
|
|
35
|
+
| [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`. |
|
|
36
|
+
| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
37
|
+
| [shape](#shape) | | | `string` | "classic" | |
|
|
38
|
+
| [size](#size) | | | `string` | "xl" | |
|
|
39
|
+
| [triggerIcon](#triggerIcon) | `triggerIcon` | | `boolean` | false | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
|
|
40
|
+
| [type](#type) | `type` | | `string` | | Applies the defined value as the type attribute on auro-input. |
|
|
41
|
+
| [typedValue](#typedValue) | `typedValue` | | `string` | "undefined" | Specifies the value of the input element within the combobox. |
|
|
42
|
+
| [validity](#validity) | `validity` | | `string` | | Specifies the `validityState` this element is in. |
|
|
43
|
+
| [value](#value) | `value` | | `string` | "undefined" | Value selected for the dropdown menu. |
|
|
43
44
|
|
|
44
45
|
## Methods
|
|
45
46
|
|
|
@@ -1064,8 +1065,8 @@ export function auroMenuLoadingExample() {
|
|
|
1064
1065
|
|
|
1065
1066
|
}
|
|
1066
1067
|
|
|
1067
|
-
combobox.addEventListener("
|
|
1068
|
-
if (e.target.
|
|
1068
|
+
combobox.addEventListener("inputValue", (e) => {
|
|
1069
|
+
if (e.target.inputValue && e.target.value !== e.target.inputValue) {
|
|
1069
1070
|
load();
|
|
1070
1071
|
}
|
|
1071
1072
|
});
|
|
@@ -166,8 +166,8 @@ function auroMenuLoadingExample() {
|
|
|
166
166
|
|
|
167
167
|
};
|
|
168
168
|
|
|
169
|
-
combobox.addEventListener("
|
|
170
|
-
if (e.target.
|
|
169
|
+
combobox.addEventListener("inputValue", (e) => {
|
|
170
|
+
if (e.target.inputValue && e.target.value !== e.target.inputValue) {
|
|
171
171
|
load();
|
|
172
172
|
}
|
|
173
173
|
});
|
|
@@ -16202,6 +16202,7 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16202
16202
|
this.persistInput = false;
|
|
16203
16203
|
this.required = false;
|
|
16204
16204
|
this.value = undefined;
|
|
16205
|
+
this.typedValue = undefined;
|
|
16205
16206
|
|
|
16206
16207
|
// Defaults that effect the overall layout of the combobox
|
|
16207
16208
|
this.checkmark = false;
|
|
@@ -16500,6 +16501,14 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16500
16501
|
reflect: true
|
|
16501
16502
|
},
|
|
16502
16503
|
|
|
16504
|
+
/**
|
|
16505
|
+
* Specifies the value of the input element within the combobox.
|
|
16506
|
+
*/
|
|
16507
|
+
typedValue: {
|
|
16508
|
+
type: String,
|
|
16509
|
+
reflect: true
|
|
16510
|
+
},
|
|
16511
|
+
|
|
16503
16512
|
/**
|
|
16504
16513
|
* Specifies the `validityState` this element is in.
|
|
16505
16514
|
*/
|
|
@@ -16570,12 +16579,12 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16570
16579
|
return this.input.value;
|
|
16571
16580
|
}
|
|
16572
16581
|
|
|
16573
|
-
/**
|
|
16574
|
-
|
|
16575
|
-
|
|
16576
|
-
set inputValue(value) {
|
|
16577
|
-
|
|
16578
|
-
}
|
|
16582
|
+
// /**
|
|
16583
|
+
// * Sets the value of the input element within the combobox.
|
|
16584
|
+
// */
|
|
16585
|
+
// set inputValue(value) {
|
|
16586
|
+
// this.input.value = value;
|
|
16587
|
+
// }
|
|
16579
16588
|
|
|
16580
16589
|
/**
|
|
16581
16590
|
* Checks if the element is valid.
|
|
@@ -16645,7 +16654,7 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16645
16654
|
if (this.availableOptions.length === 0) {
|
|
16646
16655
|
if (this.noMatchOption) {
|
|
16647
16656
|
this.noMatchOption.removeAttribute('hidden');
|
|
16648
|
-
} else {
|
|
16657
|
+
} else if (!this.menu.loading || this.isHiddenWhileLoading) {
|
|
16649
16658
|
this.hideBib();
|
|
16650
16659
|
}
|
|
16651
16660
|
} else if (this.noMatchOption) {
|
|
@@ -16765,7 +16774,6 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16765
16774
|
this.dropdown.hide();
|
|
16766
16775
|
return;
|
|
16767
16776
|
}
|
|
16768
|
-
|
|
16769
16777
|
if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
|
|
16770
16778
|
if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
|
|
16771
16779
|
if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
|
|
@@ -16978,10 +16986,6 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16978
16986
|
this.validate();
|
|
16979
16987
|
}
|
|
16980
16988
|
});
|
|
16981
|
-
|
|
16982
|
-
this.input.addEventListener('input', () => {
|
|
16983
|
-
this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
|
|
16984
|
-
});
|
|
16985
16989
|
}
|
|
16986
16990
|
|
|
16987
16991
|
/**
|
|
@@ -17041,9 +17045,13 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
17041
17045
|
}
|
|
17042
17046
|
|
|
17043
17047
|
// Force dropdown bib to hide if input value has no matching suggestions
|
|
17044
|
-
if (
|
|
17048
|
+
if (this.menu.loading) {
|
|
17049
|
+
this.showBib();
|
|
17050
|
+
} else if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
|
|
17045
17051
|
this.hideBib();
|
|
17046
17052
|
}
|
|
17053
|
+
|
|
17054
|
+
this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
|
|
17047
17055
|
}
|
|
17048
17056
|
|
|
17049
17057
|
/**
|
|
@@ -17217,7 +17225,7 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
17217
17225
|
if (this.value) {
|
|
17218
17226
|
// If the value got set programmatically make sure we hide the bib
|
|
17219
17227
|
// when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
|
|
17220
|
-
if (!this.
|
|
17228
|
+
if (!this.componentHasFocus) {
|
|
17221
17229
|
this.hideBib();
|
|
17222
17230
|
}
|
|
17223
17231
|
} else {
|
|
@@ -17242,7 +17250,8 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
17242
17250
|
}
|
|
17243
17251
|
|
|
17244
17252
|
if (changedProperties.has('availableOptions')) {
|
|
17245
|
-
|
|
17253
|
+
// eslint-disable-next-line no-extra-parens
|
|
17254
|
+
if ((this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) || this.menu.loading) {
|
|
17246
17255
|
this.showBib();
|
|
17247
17256
|
} else {
|
|
17248
17257
|
this.hideBib();
|
|
@@ -17381,6 +17390,7 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
17381
17390
|
.inputmode="${this.inputmode}"
|
|
17382
17391
|
.placeholder="${this.placeholder}"
|
|
17383
17392
|
.type="${this.type}"
|
|
17393
|
+
.value="${this.typedValue}"
|
|
17384
17394
|
?disabled="${this.disabled}"
|
|
17385
17395
|
?icon="${this.triggerIcon}"
|
|
17386
17396
|
?dvInputOnly="${this.dvInputOnly}"
|
|
@@ -17415,6 +17425,7 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
17415
17425
|
.inputmode="${this.inputmode}"
|
|
17416
17426
|
.placeholder="${this.placeholder}"
|
|
17417
17427
|
.type="${this.type}"
|
|
17428
|
+
.value="${this.typedValue}"
|
|
17418
17429
|
?disabled="${this.disabled}"
|
|
17419
17430
|
?icon="${this.triggerIcon}"
|
|
17420
17431
|
?required="${this.required}"
|
|
@@ -16050,6 +16050,7 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16050
16050
|
this.persistInput = false;
|
|
16051
16051
|
this.required = false;
|
|
16052
16052
|
this.value = undefined;
|
|
16053
|
+
this.typedValue = undefined;
|
|
16053
16054
|
|
|
16054
16055
|
// Defaults that effect the overall layout of the combobox
|
|
16055
16056
|
this.checkmark = false;
|
|
@@ -16348,6 +16349,14 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16348
16349
|
reflect: true
|
|
16349
16350
|
},
|
|
16350
16351
|
|
|
16352
|
+
/**
|
|
16353
|
+
* Specifies the value of the input element within the combobox.
|
|
16354
|
+
*/
|
|
16355
|
+
typedValue: {
|
|
16356
|
+
type: String,
|
|
16357
|
+
reflect: true
|
|
16358
|
+
},
|
|
16359
|
+
|
|
16351
16360
|
/**
|
|
16352
16361
|
* Specifies the `validityState` this element is in.
|
|
16353
16362
|
*/
|
|
@@ -16418,12 +16427,12 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16418
16427
|
return this.input.value;
|
|
16419
16428
|
}
|
|
16420
16429
|
|
|
16421
|
-
/**
|
|
16422
|
-
|
|
16423
|
-
|
|
16424
|
-
set inputValue(value) {
|
|
16425
|
-
|
|
16426
|
-
}
|
|
16430
|
+
// /**
|
|
16431
|
+
// * Sets the value of the input element within the combobox.
|
|
16432
|
+
// */
|
|
16433
|
+
// set inputValue(value) {
|
|
16434
|
+
// this.input.value = value;
|
|
16435
|
+
// }
|
|
16427
16436
|
|
|
16428
16437
|
/**
|
|
16429
16438
|
* Checks if the element is valid.
|
|
@@ -16493,7 +16502,7 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16493
16502
|
if (this.availableOptions.length === 0) {
|
|
16494
16503
|
if (this.noMatchOption) {
|
|
16495
16504
|
this.noMatchOption.removeAttribute('hidden');
|
|
16496
|
-
} else {
|
|
16505
|
+
} else if (!this.menu.loading || this.isHiddenWhileLoading) {
|
|
16497
16506
|
this.hideBib();
|
|
16498
16507
|
}
|
|
16499
16508
|
} else if (this.noMatchOption) {
|
|
@@ -16613,7 +16622,6 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16613
16622
|
this.dropdown.hide();
|
|
16614
16623
|
return;
|
|
16615
16624
|
}
|
|
16616
|
-
|
|
16617
16625
|
if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
|
|
16618
16626
|
if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
|
|
16619
16627
|
if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
|
|
@@ -16826,10 +16834,6 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16826
16834
|
this.validate();
|
|
16827
16835
|
}
|
|
16828
16836
|
});
|
|
16829
|
-
|
|
16830
|
-
this.input.addEventListener('input', () => {
|
|
16831
|
-
this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
|
|
16832
|
-
});
|
|
16833
16837
|
}
|
|
16834
16838
|
|
|
16835
16839
|
/**
|
|
@@ -16889,9 +16893,13 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
16889
16893
|
}
|
|
16890
16894
|
|
|
16891
16895
|
// Force dropdown bib to hide if input value has no matching suggestions
|
|
16892
|
-
if (
|
|
16896
|
+
if (this.menu.loading) {
|
|
16897
|
+
this.showBib();
|
|
16898
|
+
} else if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
|
|
16893
16899
|
this.hideBib();
|
|
16894
16900
|
}
|
|
16901
|
+
|
|
16902
|
+
this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
|
|
16895
16903
|
}
|
|
16896
16904
|
|
|
16897
16905
|
/**
|
|
@@ -17065,7 +17073,7 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
17065
17073
|
if (this.value) {
|
|
17066
17074
|
// If the value got set programmatically make sure we hide the bib
|
|
17067
17075
|
// when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
|
|
17068
|
-
if (!this.
|
|
17076
|
+
if (!this.componentHasFocus) {
|
|
17069
17077
|
this.hideBib();
|
|
17070
17078
|
}
|
|
17071
17079
|
} else {
|
|
@@ -17090,7 +17098,8 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
17090
17098
|
}
|
|
17091
17099
|
|
|
17092
17100
|
if (changedProperties.has('availableOptions')) {
|
|
17093
|
-
|
|
17101
|
+
// eslint-disable-next-line no-extra-parens
|
|
17102
|
+
if ((this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) || this.menu.loading) {
|
|
17094
17103
|
this.showBib();
|
|
17095
17104
|
} else {
|
|
17096
17105
|
this.hideBib();
|
|
@@ -17229,6 +17238,7 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
17229
17238
|
.inputmode="${this.inputmode}"
|
|
17230
17239
|
.placeholder="${this.placeholder}"
|
|
17231
17240
|
.type="${this.type}"
|
|
17241
|
+
.value="${this.typedValue}"
|
|
17232
17242
|
?disabled="${this.disabled}"
|
|
17233
17243
|
?icon="${this.triggerIcon}"
|
|
17234
17244
|
?dvInputOnly="${this.dvInputOnly}"
|
|
@@ -17263,6 +17273,7 @@ class AuroCombobox extends AuroElement$1 {
|
|
|
17263
17273
|
.inputmode="${this.inputmode}"
|
|
17264
17274
|
.placeholder="${this.placeholder}"
|
|
17265
17275
|
.type="${this.type}"
|
|
17276
|
+
.value="${this.typedValue}"
|
|
17266
17277
|
?disabled="${this.disabled}"
|
|
17267
17278
|
?icon="${this.triggerIcon}"
|
|
17268
17279
|
?required="${this.required}"
|
|
@@ -220,6 +220,13 @@ export class AuroCombobox extends AuroElement {
|
|
|
220
220
|
type: StringConstructor;
|
|
221
221
|
reflect: boolean;
|
|
222
222
|
};
|
|
223
|
+
/**
|
|
224
|
+
* Specifies the value of the input element within the combobox.
|
|
225
|
+
*/
|
|
226
|
+
typedValue: {
|
|
227
|
+
type: StringConstructor;
|
|
228
|
+
reflect: boolean;
|
|
229
|
+
};
|
|
223
230
|
/**
|
|
224
231
|
* Specifies the `validityState` this element is in.
|
|
225
232
|
*/
|
|
@@ -281,6 +288,7 @@ export class AuroCombobox extends AuroElement {
|
|
|
281
288
|
persistInput: boolean;
|
|
282
289
|
required: boolean;
|
|
283
290
|
value: any;
|
|
291
|
+
typedValue: any;
|
|
284
292
|
checkmark: boolean;
|
|
285
293
|
dvInputOnly: boolean;
|
|
286
294
|
fullscreenBreakpoint: string;
|
|
@@ -313,10 +321,6 @@ export class AuroCombobox extends AuroElement {
|
|
|
313
321
|
touched: boolean;
|
|
314
322
|
validation: AuroFormValidation;
|
|
315
323
|
validity: any;
|
|
316
|
-
/**
|
|
317
|
-
* Sets the value of the input element within the combobox.
|
|
318
|
-
*/
|
|
319
|
-
set inputValue(value: string | undefined);
|
|
320
324
|
/**
|
|
321
325
|
* Returns the current value of the input element within the combobox.
|
|
322
326
|
* @returns {string|undefined} The value of the input element, or undefined if the input is not present.
|
|
@@ -15968,6 +15968,7 @@ class AuroCombobox extends AuroElement {
|
|
|
15968
15968
|
this.persistInput = false;
|
|
15969
15969
|
this.required = false;
|
|
15970
15970
|
this.value = undefined;
|
|
15971
|
+
this.typedValue = undefined;
|
|
15971
15972
|
|
|
15972
15973
|
// Defaults that effect the overall layout of the combobox
|
|
15973
15974
|
this.checkmark = false;
|
|
@@ -16266,6 +16267,14 @@ class AuroCombobox extends AuroElement {
|
|
|
16266
16267
|
reflect: true
|
|
16267
16268
|
},
|
|
16268
16269
|
|
|
16270
|
+
/**
|
|
16271
|
+
* Specifies the value of the input element within the combobox.
|
|
16272
|
+
*/
|
|
16273
|
+
typedValue: {
|
|
16274
|
+
type: String,
|
|
16275
|
+
reflect: true
|
|
16276
|
+
},
|
|
16277
|
+
|
|
16269
16278
|
/**
|
|
16270
16279
|
* Specifies the `validityState` this element is in.
|
|
16271
16280
|
*/
|
|
@@ -16336,12 +16345,12 @@ class AuroCombobox extends AuroElement {
|
|
|
16336
16345
|
return this.input.value;
|
|
16337
16346
|
}
|
|
16338
16347
|
|
|
16339
|
-
/**
|
|
16340
|
-
|
|
16341
|
-
|
|
16342
|
-
set inputValue(value) {
|
|
16343
|
-
|
|
16344
|
-
}
|
|
16348
|
+
// /**
|
|
16349
|
+
// * Sets the value of the input element within the combobox.
|
|
16350
|
+
// */
|
|
16351
|
+
// set inputValue(value) {
|
|
16352
|
+
// this.input.value = value;
|
|
16353
|
+
// }
|
|
16345
16354
|
|
|
16346
16355
|
/**
|
|
16347
16356
|
* Checks if the element is valid.
|
|
@@ -16411,7 +16420,7 @@ class AuroCombobox extends AuroElement {
|
|
|
16411
16420
|
if (this.availableOptions.length === 0) {
|
|
16412
16421
|
if (this.noMatchOption) {
|
|
16413
16422
|
this.noMatchOption.removeAttribute('hidden');
|
|
16414
|
-
} else {
|
|
16423
|
+
} else if (!this.menu.loading || this.isHiddenWhileLoading) {
|
|
16415
16424
|
this.hideBib();
|
|
16416
16425
|
}
|
|
16417
16426
|
} else if (this.noMatchOption) {
|
|
@@ -16531,7 +16540,6 @@ class AuroCombobox extends AuroElement {
|
|
|
16531
16540
|
this.dropdown.hide();
|
|
16532
16541
|
return;
|
|
16533
16542
|
}
|
|
16534
|
-
|
|
16535
16543
|
if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
|
|
16536
16544
|
if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
|
|
16537
16545
|
if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
|
|
@@ -16744,10 +16752,6 @@ class AuroCombobox extends AuroElement {
|
|
|
16744
16752
|
this.validate();
|
|
16745
16753
|
}
|
|
16746
16754
|
});
|
|
16747
|
-
|
|
16748
|
-
this.input.addEventListener('input', () => {
|
|
16749
|
-
this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
|
|
16750
|
-
});
|
|
16751
16755
|
}
|
|
16752
16756
|
|
|
16753
16757
|
/**
|
|
@@ -16807,9 +16811,13 @@ class AuroCombobox extends AuroElement {
|
|
|
16807
16811
|
}
|
|
16808
16812
|
|
|
16809
16813
|
// Force dropdown bib to hide if input value has no matching suggestions
|
|
16810
|
-
if (
|
|
16814
|
+
if (this.menu.loading) {
|
|
16815
|
+
this.showBib();
|
|
16816
|
+
} else if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
|
|
16811
16817
|
this.hideBib();
|
|
16812
16818
|
}
|
|
16819
|
+
|
|
16820
|
+
this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
|
|
16813
16821
|
}
|
|
16814
16822
|
|
|
16815
16823
|
/**
|
|
@@ -16983,7 +16991,7 @@ class AuroCombobox extends AuroElement {
|
|
|
16983
16991
|
if (this.value) {
|
|
16984
16992
|
// If the value got set programmatically make sure we hide the bib
|
|
16985
16993
|
// when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
|
|
16986
|
-
if (!this.
|
|
16994
|
+
if (!this.componentHasFocus) {
|
|
16987
16995
|
this.hideBib();
|
|
16988
16996
|
}
|
|
16989
16997
|
} else {
|
|
@@ -17008,7 +17016,8 @@ class AuroCombobox extends AuroElement {
|
|
|
17008
17016
|
}
|
|
17009
17017
|
|
|
17010
17018
|
if (changedProperties.has('availableOptions')) {
|
|
17011
|
-
|
|
17019
|
+
// eslint-disable-next-line no-extra-parens
|
|
17020
|
+
if ((this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) || this.menu.loading) {
|
|
17012
17021
|
this.showBib();
|
|
17013
17022
|
} else {
|
|
17014
17023
|
this.hideBib();
|
|
@@ -17147,6 +17156,7 @@ class AuroCombobox extends AuroElement {
|
|
|
17147
17156
|
.inputmode="${this.inputmode}"
|
|
17148
17157
|
.placeholder="${this.placeholder}"
|
|
17149
17158
|
.type="${this.type}"
|
|
17159
|
+
.value="${this.typedValue}"
|
|
17150
17160
|
?disabled="${this.disabled}"
|
|
17151
17161
|
?icon="${this.triggerIcon}"
|
|
17152
17162
|
?dvInputOnly="${this.dvInputOnly}"
|
|
@@ -17181,6 +17191,7 @@ class AuroCombobox extends AuroElement {
|
|
|
17181
17191
|
.inputmode="${this.inputmode}"
|
|
17182
17192
|
.placeholder="${this.placeholder}"
|
|
17183
17193
|
.type="${this.type}"
|
|
17194
|
+
.value="${this.typedValue}"
|
|
17184
17195
|
?disabled="${this.disabled}"
|
|
17185
17196
|
?icon="${this.triggerIcon}"
|
|
17186
17197
|
?required="${this.required}"
|
|
@@ -15968,6 +15968,7 @@ class AuroCombobox extends AuroElement {
|
|
|
15968
15968
|
this.persistInput = false;
|
|
15969
15969
|
this.required = false;
|
|
15970
15970
|
this.value = undefined;
|
|
15971
|
+
this.typedValue = undefined;
|
|
15971
15972
|
|
|
15972
15973
|
// Defaults that effect the overall layout of the combobox
|
|
15973
15974
|
this.checkmark = false;
|
|
@@ -16266,6 +16267,14 @@ class AuroCombobox extends AuroElement {
|
|
|
16266
16267
|
reflect: true
|
|
16267
16268
|
},
|
|
16268
16269
|
|
|
16270
|
+
/**
|
|
16271
|
+
* Specifies the value of the input element within the combobox.
|
|
16272
|
+
*/
|
|
16273
|
+
typedValue: {
|
|
16274
|
+
type: String,
|
|
16275
|
+
reflect: true
|
|
16276
|
+
},
|
|
16277
|
+
|
|
16269
16278
|
/**
|
|
16270
16279
|
* Specifies the `validityState` this element is in.
|
|
16271
16280
|
*/
|
|
@@ -16336,12 +16345,12 @@ class AuroCombobox extends AuroElement {
|
|
|
16336
16345
|
return this.input.value;
|
|
16337
16346
|
}
|
|
16338
16347
|
|
|
16339
|
-
/**
|
|
16340
|
-
|
|
16341
|
-
|
|
16342
|
-
set inputValue(value) {
|
|
16343
|
-
|
|
16344
|
-
}
|
|
16348
|
+
// /**
|
|
16349
|
+
// * Sets the value of the input element within the combobox.
|
|
16350
|
+
// */
|
|
16351
|
+
// set inputValue(value) {
|
|
16352
|
+
// this.input.value = value;
|
|
16353
|
+
// }
|
|
16345
16354
|
|
|
16346
16355
|
/**
|
|
16347
16356
|
* Checks if the element is valid.
|
|
@@ -16411,7 +16420,7 @@ class AuroCombobox extends AuroElement {
|
|
|
16411
16420
|
if (this.availableOptions.length === 0) {
|
|
16412
16421
|
if (this.noMatchOption) {
|
|
16413
16422
|
this.noMatchOption.removeAttribute('hidden');
|
|
16414
|
-
} else {
|
|
16423
|
+
} else if (!this.menu.loading || this.isHiddenWhileLoading) {
|
|
16415
16424
|
this.hideBib();
|
|
16416
16425
|
}
|
|
16417
16426
|
} else if (this.noMatchOption) {
|
|
@@ -16531,7 +16540,6 @@ class AuroCombobox extends AuroElement {
|
|
|
16531
16540
|
this.dropdown.hide();
|
|
16532
16541
|
return;
|
|
16533
16542
|
}
|
|
16534
|
-
|
|
16535
16543
|
if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
|
|
16536
16544
|
if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
|
|
16537
16545
|
if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
|
|
@@ -16744,10 +16752,6 @@ class AuroCombobox extends AuroElement {
|
|
|
16744
16752
|
this.validate();
|
|
16745
16753
|
}
|
|
16746
16754
|
});
|
|
16747
|
-
|
|
16748
|
-
this.input.addEventListener('input', () => {
|
|
16749
|
-
this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
|
|
16750
|
-
});
|
|
16751
16755
|
}
|
|
16752
16756
|
|
|
16753
16757
|
/**
|
|
@@ -16807,9 +16811,13 @@ class AuroCombobox extends AuroElement {
|
|
|
16807
16811
|
}
|
|
16808
16812
|
|
|
16809
16813
|
// Force dropdown bib to hide if input value has no matching suggestions
|
|
16810
|
-
if (
|
|
16814
|
+
if (this.menu.loading) {
|
|
16815
|
+
this.showBib();
|
|
16816
|
+
} else if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
|
|
16811
16817
|
this.hideBib();
|
|
16812
16818
|
}
|
|
16819
|
+
|
|
16820
|
+
this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
|
|
16813
16821
|
}
|
|
16814
16822
|
|
|
16815
16823
|
/**
|
|
@@ -16983,7 +16991,7 @@ class AuroCombobox extends AuroElement {
|
|
|
16983
16991
|
if (this.value) {
|
|
16984
16992
|
// If the value got set programmatically make sure we hide the bib
|
|
16985
16993
|
// when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
|
|
16986
|
-
if (!this.
|
|
16994
|
+
if (!this.componentHasFocus) {
|
|
16987
16995
|
this.hideBib();
|
|
16988
16996
|
}
|
|
16989
16997
|
} else {
|
|
@@ -17008,7 +17016,8 @@ class AuroCombobox extends AuroElement {
|
|
|
17008
17016
|
}
|
|
17009
17017
|
|
|
17010
17018
|
if (changedProperties.has('availableOptions')) {
|
|
17011
|
-
|
|
17019
|
+
// eslint-disable-next-line no-extra-parens
|
|
17020
|
+
if ((this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) || this.menu.loading) {
|
|
17012
17021
|
this.showBib();
|
|
17013
17022
|
} else {
|
|
17014
17023
|
this.hideBib();
|
|
@@ -17147,6 +17156,7 @@ class AuroCombobox extends AuroElement {
|
|
|
17147
17156
|
.inputmode="${this.inputmode}"
|
|
17148
17157
|
.placeholder="${this.placeholder}"
|
|
17149
17158
|
.type="${this.type}"
|
|
17159
|
+
.value="${this.typedValue}"
|
|
17150
17160
|
?disabled="${this.disabled}"
|
|
17151
17161
|
?icon="${this.triggerIcon}"
|
|
17152
17162
|
?dvInputOnly="${this.dvInputOnly}"
|
|
@@ -17181,6 +17191,7 @@ class AuroCombobox extends AuroElement {
|
|
|
17181
17191
|
.inputmode="${this.inputmode}"
|
|
17182
17192
|
.placeholder="${this.placeholder}"
|
|
17183
17193
|
.type="${this.type}"
|
|
17194
|
+
.value="${this.typedValue}"
|
|
17184
17195
|
?disabled="${this.disabled}"
|
|
17185
17196
|
?icon="${this.triggerIcon}"
|
|
17186
17197
|
?required="${this.required}"
|
package/package.json
CHANGED