@aurodesignsystem/auro-formkit 5.7.0 → 5.8.1
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/CHANGELOG.md +15 -26
- package/components/checkbox/demo/api.min.js +68 -4
- package/components/checkbox/demo/index.min.js +68 -4
- package/components/checkbox/dist/index.js +68 -4
- package/components/checkbox/dist/registered.js +68 -4
- package/components/combobox/demo/api.md +230 -38
- package/components/combobox/demo/api.min.js +207 -52
- package/components/combobox/demo/index.md +150 -1
- package/components/combobox/demo/index.min.js +207 -52
- package/components/combobox/dist/auro-combobox.d.ts +18 -1
- package/components/combobox/dist/index.js +201 -51
- package/components/combobox/dist/registered.js +201 -51
- package/components/counter/demo/api.min.js +80 -22
- package/components/counter/demo/index.min.js +80 -22
- package/components/counter/dist/buttonVersion.d.ts +2 -0
- package/components/counter/dist/index.js +80 -22
- package/components/counter/dist/registered.js +80 -22
- package/components/datepicker/demo/api.md +40 -0
- package/components/datepicker/demo/api.min.js +218 -55
- package/components/datepicker/demo/index.min.js +218 -55
- package/components/datepicker/dist/auro-calendar-cell.d.ts +6 -0
- package/components/datepicker/dist/auro-datepicker.d.ts +8 -0
- package/components/datepicker/dist/buttonVersion.d.ts +1 -1
- package/components/datepicker/dist/iconVersion.d.ts +1 -1
- package/components/datepicker/dist/index.js +218 -55
- package/components/datepicker/dist/registered.js +218 -55
- package/components/dropdown/demo/api.min.js +6 -8
- package/components/dropdown/demo/index.min.js +6 -8
- package/components/dropdown/dist/iconVersion.d.ts +1 -1
- package/components/dropdown/dist/index.js +6 -8
- package/components/dropdown/dist/registered.js +6 -8
- package/components/input/demo/api.min.js +99 -27
- package/components/input/demo/index.min.js +99 -27
- package/components/input/dist/base-input.d.ts +19 -2
- package/components/input/dist/buttonVersion.d.ts +1 -1
- package/components/input/dist/index.js +99 -27
- package/components/input/dist/registered.js +99 -27
- package/components/menu/demo/api.min.js +6 -1
- package/components/menu/demo/index.min.js +6 -1
- package/components/menu/dist/index.js +6 -1
- package/components/menu/dist/registered.js +6 -1
- package/components/radio/demo/api.min.js +100 -8
- package/components/radio/demo/index.min.js +100 -8
- package/components/radio/dist/auro-radio-group.d.ts +14 -0
- package/components/radio/dist/index.js +100 -8
- package/components/radio/dist/registered.js +100 -8
- package/components/select/demo/api.min.js +84 -20
- package/components/select/demo/index.min.js +84 -20
- package/components/select/dist/index.js +78 -19
- package/components/select/dist/registered.js +78 -19
- package/package.json +5 -2
- package/components/checkbox/dist/helptextVersion.d.ts +0 -2
- package/components/combobox/dist/bibtemplateVersion.d.ts +0 -2
- package/components/combobox/dist/dropdownVersion.d.ts +0 -2
- package/components/combobox/dist/inputVersion.d.ts +0 -2
- package/components/counter/dist/bibtemplateVersion.d.ts +0 -2
- package/components/counter/dist/dropdownVersion.d.ts +0 -2
- package/components/counter/dist/helptextVersion.d.ts +0 -2
- package/components/datepicker/dist/bibtemplateVersion.d.ts +0 -2
- package/components/datepicker/dist/dropdownVersion.d.ts +0 -2
- package/components/datepicker/dist/inputVersion.d.ts +0 -2
- package/components/dropdown/dist/dropdownVersion.d.ts +0 -2
- package/components/dropdown/dist/helptextVersion.d.ts +0 -2
- package/components/input/dist/helptextVersion.d.ts +0 -2
- package/components/menu/dist/dropdownVersion.d.ts +0 -2
- package/components/radio/dist/helptextVersion.d.ts +0 -2
- package/components/select/dist/bibtemplateVersion.d.ts +0 -2
- package/components/select/dist/dropdownVersion.d.ts +0 -2
- package/components/select/dist/helptextVersion.d.ts +0 -2
|
@@ -5,44 +5,46 @@
|
|
|
5
5
|
|
|
6
6
|
## Properties
|
|
7
7
|
|
|
8
|
-
| Property
|
|
9
|
-
|
|
10
|
-
| [appearance](#appearance)
|
|
11
|
-
| [autoPlacement](#autoPlacement)
|
|
12
|
-
| [autocomplete](#autocomplete)
|
|
13
|
-
| [
|
|
14
|
-
| [
|
|
15
|
-
| [
|
|
16
|
-
| [
|
|
17
|
-
| [
|
|
18
|
-
| [
|
|
19
|
-
| [
|
|
20
|
-
| [
|
|
21
|
-
| [
|
|
22
|
-
| [
|
|
23
|
-
| [
|
|
24
|
-
| [
|
|
25
|
-
| [
|
|
26
|
-
| [
|
|
27
|
-
| [
|
|
28
|
-
| [
|
|
29
|
-
| [
|
|
30
|
-
| [
|
|
31
|
-
| [
|
|
32
|
-
| [
|
|
33
|
-
| [
|
|
34
|
-
| [
|
|
35
|
-
| [
|
|
36
|
-
| [
|
|
37
|
-
| [
|
|
38
|
-
| [
|
|
39
|
-
| [
|
|
40
|
-
| [
|
|
41
|
-
| [
|
|
42
|
-
| [
|
|
43
|
-
| [
|
|
44
|
-
| [
|
|
45
|
-
| [
|
|
8
|
+
| Property | Attribute | Modifiers | Type | Default | Description |
|
|
9
|
+
|---------------------------------------|---------------------------------------|-----------|-----------------------|----------------------------|--------------------------------------------------|
|
|
10
|
+
| [appearance](#appearance) | `appearance` | | `string` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
|
|
11
|
+
| [autoPlacement](#autoPlacement) | `autoPlacement` | | `boolean` | false | If declared, bib's position will be automatically calculated where to appear. |
|
|
12
|
+
| [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. |
|
|
13
|
+
| [behavior](#behavior) | `behavior` | | `string` | "suggestion" | Sets the behavior of the combobox, "filter" or "suggestion".<br />"filter" requires the user to select an option from the menu.<br />"suggestion" allows the user to enter a value not present in the menu options. |
|
|
14
|
+
| [checkmark](#checkmark) | `checkmark` | | `boolean` | false | When attribute is present auro-menu will apply check marks to selected options. |
|
|
15
|
+
| [disabled](#disabled) | `disabled` | | `boolean` | false | If set, disables the combobox. |
|
|
16
|
+
| [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. |
|
|
17
|
+
| [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
|
|
18
|
+
| [format](#format) | `format` | | `string` | | Specifies the input mask format. |
|
|
19
|
+
| [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. |
|
|
20
|
+
| [inputValue](#inputValue) | | readonly | `string \| undefined` | | Returns the current value of the input element within the combobox. |
|
|
21
|
+
| [inputmode](#inputmode) | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
|
|
22
|
+
| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
|
|
23
|
+
| [layout](#layout) | | | `string` | "classic" | |
|
|
24
|
+
| [matchWidth](#matchWidth) | `matchWidth` | | `boolean` | true | If declared, the popover and trigger will be set to the same width. |
|
|
25
|
+
| [msgSelectionMissing](#msgSelectionMissing) | | | `string` | "Please select an option." | |
|
|
26
|
+
| [noFilter](#noFilter) | `noFilter` | | `boolean` | false | If set, combobox will not filter menuoptions based on input. |
|
|
27
|
+
| [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`. |
|
|
28
|
+
| [noValidate](#noValidate) | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
|
|
29
|
+
| [offset](#offset) | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
|
|
30
|
+
| [onDark](#onDark) | `onDark` | | `boolean` | | DEPRECATED - use `appearance` instead. |
|
|
31
|
+
| [optionSelected](#optionSelected) | `optionSelected` | | `HTMLElement` | | Specifies the current selected option. |
|
|
32
|
+
| [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. |
|
|
33
|
+
| [placeholder](#placeholder) | `placeholder` | | `string` | | Define custom placeholder text, only supported by date input formats. |
|
|
34
|
+
| [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" |
|
|
35
|
+
| [required](#required) | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
|
|
36
|
+
| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
|
|
37
|
+
| [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`. |
|
|
38
|
+
| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
39
|
+
| [setCustomValidityValueMissingFilter](#setCustomValidityValueMissingFilter) | `setCustomValidityValueMissingFilter` | | `string` | | Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter". |
|
|
40
|
+
| [shape](#shape) | | | `string` | "classic" | |
|
|
41
|
+
| [shift](#shift) | `shift` | | `boolean` | "false" | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
|
|
42
|
+
| [size](#size) | | | `string` | "xl" | |
|
|
43
|
+
| [triggerIcon](#triggerIcon) | `triggerIcon` | | `boolean` | false | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
|
|
44
|
+
| [type](#type) | `type` | | `string` | | Applies the defined value as the type attribute on auro-input. |
|
|
45
|
+
| [typedValue](#typedValue) | `typedValue` | | `string` | "undefined" | Specifies the value of the input element within the combobox. |
|
|
46
|
+
| [validity](#validity) | `validity` | | `string` | | Specifies the `validityState` this element is in. |
|
|
47
|
+
| [value](#value) | `value` | | `string` | "undefined" | Value selected for the dropdown menu. |
|
|
46
48
|
|
|
47
49
|
## Methods
|
|
48
50
|
|
|
@@ -159,6 +161,107 @@
|
|
|
159
161
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
160
162
|
</auro-accordion>
|
|
161
163
|
|
|
164
|
+
### Behavior
|
|
165
|
+
|
|
166
|
+
There are two behaviors available for the combo box: suggestion and filter.
|
|
167
|
+
The default behavior is "suggestion".
|
|
168
|
+
|
|
169
|
+
#### Suggestion
|
|
170
|
+
|
|
171
|
+
With the suggestion behavior, the menu options are displayed to the user as suggestions, but the user may enter whatever value they like into the input
|
|
172
|
+
|
|
173
|
+
<div class="exampleWrapper">
|
|
174
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/suggestion.html) -->
|
|
175
|
+
<!-- The below content is automatically added from ./../apiExamples/suggestion.html -->
|
|
176
|
+
<auro-combobox behavior="suggestion">
|
|
177
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
178
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
179
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
180
|
+
<span slot="label">Name</span>
|
|
181
|
+
<auro-menu>
|
|
182
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
183
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
184
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
185
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
186
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
187
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
188
|
+
</auro-menu>
|
|
189
|
+
</auro-combobox>
|
|
190
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
191
|
+
</div>
|
|
192
|
+
<auro-accordion alignRight>
|
|
193
|
+
<span slot="trigger">See code</span>
|
|
194
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/suggestion.html) -->
|
|
195
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/suggestion.html -->
|
|
196
|
+
|
|
197
|
+
```html
|
|
198
|
+
<auro-combobox behavior="suggestion">
|
|
199
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
200
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
201
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
202
|
+
<span slot="label">Name</span>
|
|
203
|
+
<auro-menu>
|
|
204
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
205
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
206
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
207
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
208
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
209
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
210
|
+
</auro-menu>
|
|
211
|
+
</auro-combobox>
|
|
212
|
+
```
|
|
213
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
214
|
+
</auro-accordion>
|
|
215
|
+
|
|
216
|
+
#### Filter
|
|
217
|
+
|
|
218
|
+
With the filter behavior, the menu options are displayed to the user, and the user is required to choose one of the menu options in order for the input to be considered valid.
|
|
219
|
+
|
|
220
|
+
The `setCustomValidityValueMissingFilter` attribute is also available to display a custom message to the user when this validation check fails.
|
|
221
|
+
|
|
222
|
+
<div class="exampleWrapper">
|
|
223
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/filter.html) -->
|
|
224
|
+
<!-- The below content is automatically added from ./../apiExamples/filter.html -->
|
|
225
|
+
<auro-combobox behavior="filter" setCustomValidityValueMissingFilter="Please select an option from the list">
|
|
226
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
227
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
228
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
229
|
+
<span slot="label">Name</span>
|
|
230
|
+
<auro-menu>
|
|
231
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
232
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
233
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
234
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
235
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
236
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
237
|
+
</auro-menu>
|
|
238
|
+
</auro-combobox>
|
|
239
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
240
|
+
</div>
|
|
241
|
+
<auro-accordion alignRight>
|
|
242
|
+
<span slot="trigger">See code</span>
|
|
243
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/filter.html) -->
|
|
244
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/filter.html -->
|
|
245
|
+
|
|
246
|
+
```html
|
|
247
|
+
<auro-combobox behavior="filter" setCustomValidityValueMissingFilter="Please select an option from the list">
|
|
248
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
249
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
250
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
251
|
+
<span slot="label">Name</span>
|
|
252
|
+
<auro-menu>
|
|
253
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
254
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
255
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
256
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
257
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
258
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
259
|
+
</auro-menu>
|
|
260
|
+
</auro-combobox>
|
|
261
|
+
```
|
|
262
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
263
|
+
</auro-accordion>
|
|
264
|
+
|
|
162
265
|
### Dynamic Menu
|
|
163
266
|
|
|
164
267
|
This example demonstrates a data driven combobox. The data is used to populate the `auro-menu`. In this example, each time the input's value changes, the data is updated and the menu is recreated.
|
|
@@ -180,6 +283,7 @@ The menu in this example was populated from data from a country/city API. To kee
|
|
|
180
283
|
noFilter
|
|
181
284
|
persistInput
|
|
182
285
|
dvInputOnly
|
|
286
|
+
setCustomValidityValueMissing="Please select an option from the list."
|
|
183
287
|
required>
|
|
184
288
|
<span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
|
|
185
289
|
<span slot="label">First</span>
|
|
@@ -200,6 +304,7 @@ The menu in this example was populated from data from a country/city API. To kee
|
|
|
200
304
|
noFilter
|
|
201
305
|
persistInput
|
|
202
306
|
dvInputOnly
|
|
307
|
+
setCustomValidityValueMissing="Please select an option from the list."
|
|
203
308
|
required>
|
|
204
309
|
<span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
|
|
205
310
|
<span slot="label">Second</span>
|
|
@@ -236,6 +341,7 @@ The menu in this example was populated from data from a country/city API. To kee
|
|
|
236
341
|
noFilter
|
|
237
342
|
persistInput
|
|
238
343
|
dvInputOnly
|
|
344
|
+
setCustomValidityValueMissing="Please select an option from the list."
|
|
239
345
|
required>
|
|
240
346
|
<span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
|
|
241
347
|
<span slot="label">First</span>
|
|
@@ -256,6 +362,7 @@ The menu in this example was populated from data from a country/city API. To kee
|
|
|
256
362
|
noFilter
|
|
257
363
|
persistInput
|
|
258
364
|
dvInputOnly
|
|
365
|
+
setCustomValidityValueMissing="Please select an option from the list."
|
|
259
366
|
required>
|
|
260
367
|
<span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
|
|
261
368
|
<span slot="label">Second</span>
|
|
@@ -401,6 +508,91 @@ export async function dynamicMenuExample() {
|
|
|
401
508
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
402
509
|
</auro-accordion>
|
|
403
510
|
|
|
511
|
+
### Persistent Input
|
|
512
|
+
|
|
513
|
+
The `persistInput` attribute allows you to set the combo box to persist the value of the input regardless of the current value set for the combo box.
|
|
514
|
+
|
|
515
|
+
A persistent input is typically used in conjunction with display values to show the actual value of the selected option to the user when the input is not focused.
|
|
516
|
+
|
|
517
|
+
This is helpful for things like dynamic menus where you want the user to be able to continue their search where they left off but display a full selected value when the input is not focused.
|
|
518
|
+
|
|
519
|
+
_*Note:*_ When using `persistInput` with the `required` attribute, you must also pass an error message for when there isn't a valid value but the user has typed something in the input to the `setCustomValidityValueMissing` attribute.
|
|
520
|
+
|
|
521
|
+
<div class="exampleWrapper">
|
|
522
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/persistInput.html) -->
|
|
523
|
+
<!-- The below content is automatically added from ./../apiExamples/persistInput.html -->
|
|
524
|
+
<auro-combobox
|
|
525
|
+
required
|
|
526
|
+
persistInput
|
|
527
|
+
setCustomValidityValueMissing="Please select an option from the list."
|
|
528
|
+
>
|
|
529
|
+
<span slot="bib.fullscreen.headline">Persistant Input</span>
|
|
530
|
+
<span slot="label">Persistant Input</span>
|
|
531
|
+
<auro-menu>
|
|
532
|
+
<auro-menuoption value="Apples" id="option-0">
|
|
533
|
+
Apples
|
|
534
|
+
<div slot="displayValue">Apples</div>
|
|
535
|
+
</auro-menuoption>
|
|
536
|
+
<auro-menuoption value="Oranges" id="option-1">
|
|
537
|
+
Oranges
|
|
538
|
+
<div slot="displayValue">Oranges</div>
|
|
539
|
+
</auro-menuoption>
|
|
540
|
+
<auro-menuoption value="Peaches" id="option-2">
|
|
541
|
+
Peaches
|
|
542
|
+
<div slot="displayValue">Peaches</div>
|
|
543
|
+
</auro-menuoption>
|
|
544
|
+
<auro-menuoption value="Grapes" id="option-3">
|
|
545
|
+
Grapes
|
|
546
|
+
<div slot="displayValue">Grapes</div>
|
|
547
|
+
</auro-menuoption>
|
|
548
|
+
<auro-menuoption value="Cherries" id="option-4">
|
|
549
|
+
Cherries
|
|
550
|
+
<div slot="displayValue">Cherries</div>
|
|
551
|
+
</auro-menuoption>
|
|
552
|
+
</auro-menu>
|
|
553
|
+
</auro-combobox>
|
|
554
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
555
|
+
</div>
|
|
556
|
+
<auro-accordion alignRight>
|
|
557
|
+
<span slot="trigger">See code</span>
|
|
558
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/persistInput.html) -->
|
|
559
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/persistInput.html -->
|
|
560
|
+
|
|
561
|
+
```html
|
|
562
|
+
<auro-combobox
|
|
563
|
+
required
|
|
564
|
+
persistInput
|
|
565
|
+
setCustomValidityValueMissing="Please select an option from the list."
|
|
566
|
+
>
|
|
567
|
+
<span slot="bib.fullscreen.headline">Persistant Input</span>
|
|
568
|
+
<span slot="label">Persistant Input</span>
|
|
569
|
+
<auro-menu>
|
|
570
|
+
<auro-menuoption value="Apples" id="option-0">
|
|
571
|
+
Apples
|
|
572
|
+
<div slot="displayValue">Apples</div>
|
|
573
|
+
</auro-menuoption>
|
|
574
|
+
<auro-menuoption value="Oranges" id="option-1">
|
|
575
|
+
Oranges
|
|
576
|
+
<div slot="displayValue">Oranges</div>
|
|
577
|
+
</auro-menuoption>
|
|
578
|
+
<auro-menuoption value="Peaches" id="option-2">
|
|
579
|
+
Peaches
|
|
580
|
+
<div slot="displayValue">Peaches</div>
|
|
581
|
+
</auro-menuoption>
|
|
582
|
+
<auro-menuoption value="Grapes" id="option-3">
|
|
583
|
+
Grapes
|
|
584
|
+
<div slot="displayValue">Grapes</div>
|
|
585
|
+
</auro-menuoption>
|
|
586
|
+
<auro-menuoption value="Cherries" id="option-4">
|
|
587
|
+
Cherries
|
|
588
|
+
<div slot="displayValue">Cherries</div>
|
|
589
|
+
</auro-menuoption>
|
|
590
|
+
</auro-menu>
|
|
591
|
+
</auro-combobox>
|
|
592
|
+
```
|
|
593
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
594
|
+
</auro-accordion>
|
|
595
|
+
|
|
404
596
|
### Updating Externally
|
|
405
597
|
|
|
406
598
|
This example demonstrates using the <code>updateActiveOption</code> method to set a specific menu option as "active."
|