@aurodesignsystem-dev/auro-formkit 0.0.0-pr1448.0 → 0.0.0-pr1451.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/components/checkbox/demo/api.md +201 -221
- package/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.md +21 -23
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/demo/keyboard-behavior.md +39 -0
- package/components/checkbox/demo/readme.md +23 -35
- package/components/checkbox/dist/auro-checkbox-group.d.ts +6 -6
- package/components/checkbox/dist/auro-checkbox.d.ts +8 -8
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/README.md +13 -3
- package/components/combobox/demo/accessibility.html +57 -0
- package/components/combobox/demo/accessibility.md +77 -0
- package/components/combobox/demo/api.html +24 -0
- package/components/combobox/demo/api.md +1613 -1685
- package/components/combobox/demo/api.min.js +15 -21
- package/components/combobox/demo/design.html +83 -0
- package/components/combobox/demo/design.md +283 -0
- package/components/combobox/demo/index.html +49 -16
- package/components/combobox/demo/index.js +3 -2
- package/components/combobox/demo/index.md +861 -185
- package/components/combobox/demo/index.min.js +41 -22
- package/components/combobox/demo/install.html +84 -0
- package/components/combobox/demo/install.js +24 -0
- package/components/combobox/demo/install.md +100 -0
- package/components/combobox/demo/install.min.js +17991 -0
- package/components/combobox/demo/{keyboardBehavior.html → keyboard-behavior.html} +2 -1
- package/components/combobox/demo/keyboard-behavior.md +276 -0
- package/components/combobox/demo/layout.md +112 -0
- package/components/combobox/demo/readme.html +25 -1
- package/components/combobox/demo/readme.md +50 -52
- package/components/combobox/demo/styles.css +141 -0
- package/components/combobox/demo/voiceover.html +66 -0
- package/components/combobox/demo/voiceover.md +118 -0
- package/components/combobox/dist/auro-combobox.d.ts +36 -36
- package/components/combobox/dist/index.js +12 -17
- package/components/combobox/dist/registered.js +12 -17
- package/components/counter/demo/api.md +751 -819
- package/components/counter/demo/api.min.js +2 -2
- package/components/counter/demo/index.md +35 -39
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/demo/keyboard-behavior.md +127 -0
- package/components/counter/demo/readme.md +39 -51
- package/components/counter/dist/auro-counter-group.d.ts +2 -2
- package/components/counter/dist/auro-counter.d.ts +10 -10
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/api.md +827 -931
- package/components/datepicker/demo/api.min.js +4 -4
- package/components/datepicker/demo/index.md +79 -87
- package/components/datepicker/demo/index.min.js +4 -4
- package/components/datepicker/demo/keyboard-behavior.md +19 -0
- package/components/datepicker/demo/readme.md +19 -31
- package/components/datepicker/dist/index.js +4 -4
- package/components/datepicker/dist/registered.js +4 -4
- package/components/datepicker/dist/{auro-calendar-cell.d.ts → src/auro-calendar-cell.d.ts} +2 -2
- package/components/datepicker/dist/{auro-datepicker.d.ts → src/auro-datepicker.d.ts} +13 -13
- package/components/datepicker/dist/{utilities.d.ts → src/utilities.d.ts} +4 -4
- package/components/datepicker/dist/{utilitiesCalendar.d.ts → src/utilitiesCalendar.d.ts} +3 -3
- package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +2 -2
- package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker.d.ts +1 -1
- package/components/dropdown/demo/api.md +795 -851
- package/components/dropdown/demo/api.min.js +1 -1
- package/components/dropdown/demo/index.md +145 -155
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/demo/keyboard-behavior.md +72 -0
- package/components/dropdown/demo/readme.md +39 -51
- package/components/dropdown/dist/auro-dropdown.d.ts +22 -22
- package/components/dropdown/dist/auro-dropdownBib.d.ts +3 -3
- package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/api.md +173 -179
- package/components/form/demo/api.min.js +27 -33
- package/components/form/demo/index.md +27 -33
- package/components/form/demo/index.min.js +27 -33
- package/components/form/demo/keyboard-behavior.md +38 -0
- package/components/form/demo/readme.md +14 -28
- package/components/input/demo/api.md +572 -664
- package/components/input/demo/api.min.js +2 -2
- package/components/input/demo/index.md +93 -99
- package/components/input/demo/index.min.js +2 -2
- package/components/input/demo/keyboard-behavior.md +25 -0
- package/components/input/demo/readme.md +17 -29
- package/components/input/dist/auro-input.d.ts +1 -1
- package/components/input/dist/base-input.d.ts +29 -29
- package/components/input/dist/index.js +2 -2
- package/components/input/dist/registered.js +2 -2
- package/components/menu/demo/api.md +745 -789
- package/components/menu/demo/api.min.js +3 -4
- package/components/menu/demo/index.md +35 -37
- package/components/menu/demo/index.min.js +3 -4
- package/components/menu/demo/keyboard-behavior.md +18 -0
- package/components/menu/demo/readme.md +23 -35
- package/components/menu/dist/auro-menu-utils.d.ts +1 -1
- package/components/menu/dist/auro-menu.context.d.ts +3 -3
- package/components/menu/dist/auro-menu.d.ts +5 -5
- package/components/menu/dist/auro-menuoption.d.ts +6 -6
- package/components/menu/dist/index.js +3 -4
- package/components/menu/dist/registered.js +3 -4
- package/components/radio/demo/api.md +318 -350
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.md +25 -29
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/demo/keyboard-behavior.md +72 -0
- package/components/radio/demo/readme.md +21 -33
- package/components/radio/dist/auro-radio-group.d.ts +9 -9
- package/components/radio/dist/auro-radio.d.ts +8 -8
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/README.md +12 -1
- package/components/select/demo/accessibility.html +65 -0
- package/components/select/demo/accessibility.md +76 -0
- package/components/select/demo/api.md +1713 -1793
- package/components/select/demo/api.min.js +5 -6
- package/components/select/demo/index.html +247 -37
- package/components/select/demo/index.md +225 -345
- package/components/select/demo/index.min.js +5 -6
- package/components/select/demo/keyboard-behavior.md +39 -0
- package/components/select/demo/layout.html +59 -0
- package/components/select/demo/layout.md +299 -0
- package/components/select/demo/readme.md +45 -46
- package/components/select/demo/voiceover.html +65 -0
- package/components/select/demo/voiceover.md +183 -0
- package/components/select/dist/auro-select.d.ts +11 -11
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +13 -11
- package/package.json +26 -26
- package/components/checkbox/demo/keyboardBehavior.md +0 -0
- package/components/combobox/demo/keyboardBehavior.md +0 -281
- package/components/counter/demo/keyboardBehavior.md +0 -127
- package/components/datepicker/demo/keyboardBehavior.md +0 -19
- package/components/dropdown/demo/keyboardBehavior.md +0 -77
- package/components/form/demo/keyboardBehavior.md +0 -0
- package/components/input/demo/keyboardBehavior.md +0 -0
- package/components/menu/demo/keyboardBehavior.md +0 -0
- package/components/radio/demo/keyboardBehavior.md +0 -0
- package/components/select/demo/keyboardBehavior.md +0 -245
- /package/components/datepicker/dist/{auro-calendar-month.d.ts → src/auro-calendar-month.d.ts} +0 -0
- /package/components/datepicker/dist/{auro-calendar.d.ts → src/auro-calendar.d.ts} +0 -0
- /package/components/datepicker/dist/{buttonVersion.d.ts → src/buttonVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{datepickerKeyboardStrategy.d.ts → src/datepickerKeyboardStrategy.d.ts} +0 -0
- /package/components/datepicker/dist/{iconVersion.d.ts → src/iconVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{index.d.ts → src/index.d.ts} +0 -0
- /package/components/datepicker/dist/{popoverVersion.d.ts → src/popoverVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/classic/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/classic/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/color-calendar-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/color-cell-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/color-month-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/shapeSize-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/snowflake/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/snowflake/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-cell-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-month-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/tokens-css.d.ts +0 -0
- /package/components/datepicker/dist/{utilitiesCalendarRender.d.ts → src/utilitiesCalendarRender.d.ts} +0 -0
- /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/day.d.ts +0 -0
- /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
|
@@ -84,45 +84,43 @@ The `auro-combobox` element provides users with a way to select an option from a
|
|
|
84
84
|
## Basic
|
|
85
85
|
|
|
86
86
|
<div class="exampleWrapper">
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
87
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
88
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
89
|
+
<auro-combobox>
|
|
90
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
91
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
92
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
93
|
+
<span slot="label">Name</span>
|
|
94
|
+
<auro-menu>
|
|
95
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
96
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
97
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
98
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
99
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
100
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
101
|
+
</auro-menu>
|
|
102
|
+
</auro-combobox>
|
|
103
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
104
104
|
</div>
|
|
105
105
|
<auro-accordion alignRight>
|
|
106
|
-
|
|
106
|
+
<span slot="trigger">See code</span>
|
|
107
107
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
108
108
|
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
109
109
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
</auro-combobox>
|
|
125
|
-
```
|
|
110
|
+
<pre class="language-html"><code class="language-html"><auro-combobox>
|
|
111
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
112
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
113
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
114
|
+
<span slot="label">Name</span>
|
|
115
|
+
<auro-menu>
|
|
116
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
117
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
118
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
119
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
120
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
121
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
122
|
+
</auro-menu>
|
|
123
|
+
</auro-combobox></code></pre>
|
|
126
124
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
127
125
|
</auro-accordion>
|
|
128
126
|
|
|
@@ -133,41 +131,39 @@ The `auro-combobox` element provides users with a way to select an option from a
|
|
|
133
131
|
Use the `appearance="inverse"` attribute to apply styling appropriate for dark backgrounds.
|
|
134
132
|
|
|
135
133
|
<div class="exampleWrapper--ondark">
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
134
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
|
|
135
|
+
<!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
|
|
136
|
+
<auro-combobox appearance="inverse">
|
|
137
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
138
|
+
<span slot="label">Name</span>
|
|
139
|
+
<auro-menu>
|
|
140
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
141
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
142
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
143
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
144
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
145
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
146
|
+
</auro-menu>
|
|
147
|
+
</auro-combobox>
|
|
148
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
151
149
|
</div>
|
|
152
150
|
<auro-accordion alignRight>
|
|
153
|
-
|
|
151
|
+
<span slot="trigger">See code</span>
|
|
154
152
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
|
|
155
153
|
<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
|
|
156
154
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
</auro-combobox>
|
|
170
|
-
```
|
|
155
|
+
<pre class="language-html"><code class="language-html"><auro-combobox appearance="inverse">
|
|
156
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
157
|
+
<span slot="label">Name</span>
|
|
158
|
+
<auro-menu>
|
|
159
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
160
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
161
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
162
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
163
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
164
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
165
|
+
</auro-menu>
|
|
166
|
+
</auro-combobox></code></pre>
|
|
171
167
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
172
168
|
</auro-accordion>
|
|
173
169
|
|
|
@@ -181,45 +177,43 @@ The default behavior is `suggestion`.
|
|
|
181
177
|
With `behavior="suggestion"`, the menu options are displayed to the user as suggestions, but the user may enter whatever value they like into the input.
|
|
182
178
|
|
|
183
179
|
<div class="exampleWrapper">
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
180
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/suggestion.html) -->
|
|
181
|
+
<!-- The below content is automatically added from ./../apiExamples/suggestion.html -->
|
|
182
|
+
<auro-combobox behavior="suggestion">
|
|
183
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
184
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
185
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
186
|
+
<span slot="label">Name</span>
|
|
187
|
+
<auro-menu>
|
|
188
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
189
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
190
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
191
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
192
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
193
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
194
|
+
</auro-menu>
|
|
195
|
+
</auro-combobox>
|
|
196
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
201
197
|
</div>
|
|
202
198
|
<auro-accordion alignRight>
|
|
203
|
-
|
|
199
|
+
<span slot="trigger">See code</span>
|
|
204
200
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/suggestion.html) -->
|
|
205
201
|
<!-- The below code snippet is automatically added from ./../apiExamples/suggestion.html -->
|
|
206
202
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
</auro-combobox>
|
|
222
|
-
```
|
|
203
|
+
<pre class="language-html"><code class="language-html"><auro-combobox behavior="suggestion">
|
|
204
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
205
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
206
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
207
|
+
<span slot="label">Name</span>
|
|
208
|
+
<auro-menu>
|
|
209
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
210
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
211
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
212
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
213
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
214
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
215
|
+
</auro-menu>
|
|
216
|
+
</auro-combobox></code></pre>
|
|
223
217
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
224
218
|
</auro-accordion>
|
|
225
219
|
|
|
@@ -230,45 +224,43 @@ With `behavior="filter"`, the menu options are displayed to the user, and the us
|
|
|
230
224
|
The `setCustomValidityValueMissingFilter` attribute is also available to display a custom message to the user when this validation check fails.
|
|
231
225
|
|
|
232
226
|
<div class="exampleWrapper">
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
227
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/filter.html) -->
|
|
228
|
+
<!-- The below content is automatically added from ./../apiExamples/filter.html -->
|
|
229
|
+
<auro-combobox behavior="filter" setCustomValidityValueMissingFilter="Please select an option from the list">
|
|
230
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
231
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
232
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
233
|
+
<span slot="label">Name</span>
|
|
234
|
+
<auro-menu>
|
|
235
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
236
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
237
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
238
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
239
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
240
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
241
|
+
</auro-menu>
|
|
242
|
+
</auro-combobox>
|
|
243
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
250
244
|
</div>
|
|
251
245
|
<auro-accordion alignRight>
|
|
252
|
-
|
|
246
|
+
<span slot="trigger">See code</span>
|
|
253
247
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/filter.html) -->
|
|
254
248
|
<!-- The below code snippet is automatically added from ./../apiExamples/filter.html -->
|
|
255
249
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
</auro-combobox>
|
|
271
|
-
```
|
|
250
|
+
<pre class="language-html"><code class="language-html"><auro-combobox behavior="filter" setCustomValidityValueMissingFilter="Please select an option from the list">
|
|
251
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
252
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
253
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
254
|
+
<span slot="label">Name</span>
|
|
255
|
+
<auro-menu>
|
|
256
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
257
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
258
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
259
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
260
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
261
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
262
|
+
</auro-menu>
|
|
263
|
+
</auro-combobox></code></pre>
|
|
272
264
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
273
265
|
</auro-accordion>
|
|
274
266
|
|
|
@@ -277,41 +269,39 @@ The `setCustomValidityValueMissingFilter` attribute is also available to display
|
|
|
277
269
|
Use the `checkmark` attribute to display a checkmark next to the selected option in the dropdown menu.
|
|
278
270
|
|
|
279
271
|
<div class="exampleWrapper">
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
272
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/checkmark.html) -->
|
|
273
|
+
<!-- The below content is automatically added from ./../apiExamples/checkmark.html -->
|
|
274
|
+
<auro-combobox checkmark>
|
|
275
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
276
|
+
<span slot="label">Name</span>
|
|
277
|
+
<auro-menu>
|
|
278
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
279
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
280
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
281
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
282
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
283
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
284
|
+
</auro-menu>
|
|
285
|
+
</auro-combobox>
|
|
286
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
295
287
|
</div>
|
|
296
288
|
<auro-accordion alignRight>
|
|
297
|
-
|
|
289
|
+
<span slot="trigger">See code</span>
|
|
298
290
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/checkmark.html) -->
|
|
299
291
|
<!-- The below code snippet is automatically added from ./../apiExamples/checkmark.html -->
|
|
300
292
|
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
</auro-combobox>
|
|
314
|
-
```
|
|
293
|
+
<pre class="language-html"><code class="language-html"><auro-combobox checkmark>
|
|
294
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
295
|
+
<span slot="label">Name</span>
|
|
296
|
+
<auro-menu>
|
|
297
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
298
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
299
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
300
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
301
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
302
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
303
|
+
</auro-menu>
|
|
304
|
+
</auro-combobox></code></pre>
|
|
315
305
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
316
306
|
</auro-accordion>
|
|
317
307
|
|
|
@@ -326,125 +316,123 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
|
|
|
326
316
|
- `shift` when enabled, adjusts the bib position when it would overflow the viewport boundaries, ensuring it remains visible.
|
|
327
317
|
|
|
328
318
|
<div class="exampleWrapper">
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
319
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/floater-config.html) -->
|
|
320
|
+
<!-- The below content is automatically added from ./../apiExamples/floater-config.html -->
|
|
321
|
+
<div style="width: 350px">
|
|
322
|
+
<auro-combobox offset="20" noFlip placement="bottom-end">
|
|
323
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
324
|
+
<span slot="label">Label</span>
|
|
325
|
+
<span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
|
|
326
|
+
<auro-menu>
|
|
327
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
328
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
329
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
330
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
331
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
332
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
333
|
+
</auro-menu>
|
|
334
|
+
</auro-combobox>
|
|
335
|
+
<auro-combobox offset="20" placement="bottom-end">
|
|
336
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
337
|
+
<span slot="label">Label</span>
|
|
338
|
+
<span slot="helpText">bottom-end bib with 20px offset and flip</span>
|
|
339
|
+
<auro-menu>
|
|
340
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
341
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
342
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
343
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
344
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
345
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
346
|
+
</auro-menu>
|
|
347
|
+
</auro-combobox>
|
|
348
|
+
<auro-combobox offset="20" noFlip placement="right" autoPlacement>
|
|
349
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
350
|
+
<span slot="label">Label</span>
|
|
351
|
+
<span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
|
|
352
|
+
<auro-menu>
|
|
353
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
354
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
355
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
356
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
357
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
358
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
359
|
+
</auro-menu>
|
|
360
|
+
</auro-combobox>
|
|
361
|
+
<auro-combobox width="350px" offset="20" noFlip placement="bottom-start" shift>
|
|
362
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
363
|
+
<span slot="label">Label</span>
|
|
364
|
+
<span slot="helpText">bottom-start bib with 20px offset, noFlip and shift</span>
|
|
365
|
+
<auro-menu>
|
|
366
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
367
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
368
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
369
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
370
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
371
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
372
|
+
</auro-menu>
|
|
373
|
+
</auro-combobox>
|
|
374
|
+
</div>
|
|
375
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
386
376
|
</div>
|
|
387
377
|
<auro-accordion alignRight>
|
|
388
|
-
|
|
378
|
+
<span slot="trigger">See code</span>
|
|
389
379
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/floater-config.html) -->
|
|
390
380
|
<!-- The below code snippet is automatically added from ./../apiExamples/floater-config.html -->
|
|
391
381
|
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
</div>
|
|
447
|
-
```
|
|
382
|
+
<pre class="language-html"><code class="language-html"><div style="width: 350px">
|
|
383
|
+
<auro-combobox offset="20" noFlip placement="bottom-end">
|
|
384
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
385
|
+
<span slot="label">Label</span>
|
|
386
|
+
<span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
|
|
387
|
+
<auro-menu>
|
|
388
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
389
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
390
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
391
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
392
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
393
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
394
|
+
</auro-menu>
|
|
395
|
+
</auro-combobox>
|
|
396
|
+
<auro-combobox offset="20" placement="bottom-end">
|
|
397
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
398
|
+
<span slot="label">Label</span>
|
|
399
|
+
<span slot="helpText">bottom-end bib with 20px offset and flip</span>
|
|
400
|
+
<auro-menu>
|
|
401
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
402
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
403
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
404
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
405
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
406
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
407
|
+
</auro-menu>
|
|
408
|
+
</auro-combobox>
|
|
409
|
+
<auro-combobox offset="20" noFlip placement="right" autoPlacement>
|
|
410
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
411
|
+
<span slot="label">Label</span>
|
|
412
|
+
<span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
|
|
413
|
+
<auro-menu>
|
|
414
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
415
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
416
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
417
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
418
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
419
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
420
|
+
</auro-menu>
|
|
421
|
+
</auro-combobox>
|
|
422
|
+
<auro-combobox width="350px" offset="20" noFlip placement="bottom-start" shift>
|
|
423
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
424
|
+
<span slot="label">Label</span>
|
|
425
|
+
<span slot="helpText">bottom-start bib with 20px offset, noFlip and shift</span>
|
|
426
|
+
<auro-menu>
|
|
427
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
428
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
429
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
430
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
431
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
432
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
433
|
+
</auro-menu>
|
|
434
|
+
</auro-combobox>
|
|
435
|
+
</div></code></pre>
|
|
448
436
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
449
437
|
</auro-accordion>
|
|
450
438
|
|
|
@@ -453,80 +441,74 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
|
|
|
453
441
|
Use the `disabled` attribute to disable the combobox.
|
|
454
442
|
|
|
455
443
|
<div class="exampleWrapper">
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
444
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
|
|
445
|
+
<!-- The below content is automatically added from ./../apiExamples/disabled.html -->
|
|
446
|
+
<auro-combobox disabled>
|
|
447
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
448
|
+
<span slot="label">Name</span>
|
|
449
|
+
<auro-menu>
|
|
450
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
451
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
452
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
453
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
454
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
455
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
456
|
+
</auro-menu>
|
|
457
|
+
</auro-combobox>
|
|
458
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
472
459
|
</div>
|
|
473
460
|
<div class="exampleWrapper--ondark" aria-hidden>
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
461
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
|
|
462
|
+
<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
|
|
463
|
+
<auro-combobox appearance="inverse" disabled>
|
|
464
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
465
|
+
<span slot="label">Name</span>
|
|
466
|
+
<auro-menu>
|
|
467
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
468
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
469
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
470
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
471
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
472
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
473
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
474
|
+
</auro-menu>
|
|
475
|
+
</auro-combobox>
|
|
476
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
490
477
|
</div>
|
|
491
478
|
<auro-accordion alignRight>
|
|
492
|
-
|
|
479
|
+
<span slot="trigger">See code</span>
|
|
493
480
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
|
|
494
481
|
<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
|
|
495
482
|
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
</auro-menu>
|
|
509
|
-
</auro-combobox>
|
|
510
|
-
```
|
|
483
|
+
<pre class="language-html"><code class="language-html"><auro-combobox disabled>
|
|
484
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
485
|
+
<span slot="label">Name</span>
|
|
486
|
+
<auro-menu>
|
|
487
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
488
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
489
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
490
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
491
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
492
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
493
|
+
</auro-menu>
|
|
494
|
+
</auro-combobox></code></pre>
|
|
511
495
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
512
496
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-disabled.html) -->
|
|
513
497
|
<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
|
|
514
498
|
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
</auro-combobox>
|
|
529
|
-
```
|
|
499
|
+
<pre class="language-html"><code class="language-html"><auro-combobox appearance="inverse" disabled>
|
|
500
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
501
|
+
<span slot="label">Name</span>
|
|
502
|
+
<auro-menu>
|
|
503
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
504
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
505
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
506
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
507
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
508
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
509
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
510
|
+
</auro-menu>
|
|
511
|
+
</auro-combobox></code></pre>
|
|
530
512
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
531
513
|
</auro-accordion>
|
|
532
514
|
|
|
@@ -535,80 +517,76 @@ Use the `disabled` attribute to disable the combobox.
|
|
|
535
517
|
Using the `error` attribute with a given message sets a persistent error state (e.g. an error state returned from the server).
|
|
536
518
|
|
|
537
519
|
<div class="exampleWrapper">
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
520
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
|
|
521
|
+
<!-- The below content is automatically added from ./../apiExamples/error.html -->
|
|
522
|
+
<auro-combobox error="Custom error message">
|
|
523
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
524
|
+
<span slot="label">Name</span>
|
|
525
|
+
<auro-menu>
|
|
526
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
527
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
528
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
529
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
530
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
531
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
532
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
533
|
+
</auro-menu>
|
|
534
|
+
</auro-combobox>
|
|
535
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
554
536
|
</div>
|
|
555
537
|
<div class="exampleWrapper--ondark" aria-hidden>
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
538
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
|
|
539
|
+
<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
|
|
540
|
+
<auro-combobox appearance="inverse" error="Custom error message">
|
|
541
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
542
|
+
<span slot="label">Name</span>
|
|
543
|
+
<auro-menu>
|
|
544
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
545
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
546
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
547
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
548
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
549
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
550
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
551
|
+
</auro-menu>
|
|
552
|
+
</auro-combobox>
|
|
553
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
572
554
|
</div>
|
|
573
555
|
<auro-accordion alignRight>
|
|
574
|
-
|
|
556
|
+
<span slot="trigger">See code</span>
|
|
575
557
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
|
|
576
558
|
<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
|
|
577
559
|
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
</auro-combobox>
|
|
592
|
-
```
|
|
560
|
+
<pre class="language-html"><code class="language-html"><auro-combobox error="Custom error message">
|
|
561
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
562
|
+
<span slot="label">Name</span>
|
|
563
|
+
<auro-menu>
|
|
564
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
565
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
566
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
567
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
568
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
569
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
570
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
571
|
+
</auro-menu>
|
|
572
|
+
</auro-combobox></code></pre>
|
|
593
573
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
594
574
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-error.html) -->
|
|
595
575
|
<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-error.html -->
|
|
596
576
|
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
</auro-combobox>
|
|
611
|
-
```
|
|
577
|
+
<pre class="language-html"><code class="language-html"><auro-combobox appearance="inverse" error="Custom error message">
|
|
578
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
579
|
+
<span slot="label">Name</span>
|
|
580
|
+
<auro-menu>
|
|
581
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
582
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
583
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
584
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
585
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
586
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
587
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
588
|
+
</auro-menu>
|
|
589
|
+
</auro-combobox></code></pre>
|
|
612
590
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
613
591
|
</auro-accordion>
|
|
614
592
|
|
|
@@ -623,41 +601,39 @@ Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/
|
|
|
623
601
|
To support fullcreen bib, setting `bib.fullscreen.headline` is **STRONGLY RECOMMENDED**.
|
|
624
602
|
|
|
625
603
|
<div class="exampleWrapper">
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
604
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen-breakpoint.html) -->
|
|
605
|
+
<!-- The below content is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
|
|
606
|
+
<auro-combobox fullscreenBreakpoint="lg">
|
|
607
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
608
|
+
<span slot="label">Name</span>
|
|
609
|
+
<auro-menu>
|
|
610
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
611
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
612
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
613
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
614
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
615
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
616
|
+
</auro-menu>
|
|
617
|
+
</auro-combobox>
|
|
618
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
641
619
|
</div>
|
|
642
620
|
<auro-accordion alignRight>
|
|
643
|
-
|
|
621
|
+
<span slot="trigger">See code</span>
|
|
644
622
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreen-breakpoint.html) -->
|
|
645
623
|
<!-- The below code snippet is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
|
|
646
624
|
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
</auro-combobox>
|
|
660
|
-
```
|
|
625
|
+
<pre class="language-html"><code class="language-html"><auro-combobox fullscreenBreakpoint="lg">
|
|
626
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
627
|
+
<span slot="label">Name</span>
|
|
628
|
+
<auro-menu>
|
|
629
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
630
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
631
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
632
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
633
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
634
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
635
|
+
</auro-menu>
|
|
636
|
+
</auro-combobox></code></pre>
|
|
661
637
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
662
638
|
</auro-accordion>
|
|
663
639
|
|
|
@@ -666,41 +642,39 @@ To support fullcreen bib, setting `bib.fullscreen.headline` is **STRONGLY RECOMM
|
|
|
666
642
|
You can manually set the `inputmode` for the input.
|
|
667
643
|
|
|
668
644
|
<div class="exampleWrapper">
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
645
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inputmode.html) -->
|
|
646
|
+
<!-- The below content is automatically added from ./../apiExamples/inputmode.html -->
|
|
647
|
+
<auro-combobox inputmode="numeric">
|
|
648
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
649
|
+
<span slot="label">Name</span>
|
|
650
|
+
<auro-menu>
|
|
651
|
+
<auro-menuoption value="1" id="option-0">1</auro-menuoption>
|
|
652
|
+
<auro-menuoption value="2" id="option-1">2</auro-menuoption>
|
|
653
|
+
<auro-menuoption value="3" id="option-2">3</auro-menuoption>
|
|
654
|
+
<auro-menuoption value="4" id="option-3">4</auro-menuoption>
|
|
655
|
+
<auro-menuoption value="5" id="option-4">5</auro-menuoption>
|
|
656
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
657
|
+
</auro-menu>
|
|
658
|
+
</auro-combobox>
|
|
659
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
684
660
|
</div>
|
|
685
661
|
<auro-accordion alignRight>
|
|
686
|
-
|
|
662
|
+
<span slot="trigger">See code</span>
|
|
687
663
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inputmode.html) -->
|
|
688
664
|
<!-- The below code snippet is automatically added from ./../apiExamples/inputmode.html -->
|
|
689
665
|
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
</auro-combobox>
|
|
703
|
-
```
|
|
666
|
+
<pre class="language-html"><code class="language-html"><auro-combobox inputmode="numeric">
|
|
667
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
668
|
+
<span slot="label">Name</span>
|
|
669
|
+
<auro-menu>
|
|
670
|
+
<auro-menuoption value="1" id="option-0">1</auro-menuoption>
|
|
671
|
+
<auro-menuoption value="2" id="option-1">2</auro-menuoption>
|
|
672
|
+
<auro-menuoption value="3" id="option-2">3</auro-menuoption>
|
|
673
|
+
<auro-menuoption value="4" id="option-3">4</auro-menuoption>
|
|
674
|
+
<auro-menuoption value="5" id="option-4">5</auro-menuoption>
|
|
675
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
676
|
+
</auro-menu>
|
|
677
|
+
</auro-combobox></code></pre>
|
|
704
678
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
705
679
|
</auro-accordion>
|
|
706
680
|
|
|
@@ -711,63 +685,61 @@ You can manually set the `inputmode` for the input.
|
|
|
711
685
|
Use `layout="emphasized"` to apply the emphasized style to the combobox. This layout is designed for use on light backgrounds.
|
|
712
686
|
|
|
713
687
|
<div class="exampleWrapper">
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
688
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
|
|
689
|
+
<!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
|
|
690
|
+
<auro-combobox layout="emphasized" value="Oranges" shape="pill" size="xl" placeholder="Placeholder content" required style="width: 249px;">
|
|
691
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
692
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
693
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
694
|
+
<span slot="label">Name</span>
|
|
695
|
+
<auro-menu>
|
|
696
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
697
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
698
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
699
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
700
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
701
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
702
|
+
</auro-menu>
|
|
703
|
+
<span slot="helpText">
|
|
704
|
+
Help text - Lorem ipsum solar lorem ipsum solar
|
|
705
|
+
</span>
|
|
706
|
+
<span slot="displayValue">
|
|
707
|
+
<div>
|
|
708
|
+
<div class="mainText">Apples</div>
|
|
709
|
+
<div class="subText">Fruit</div>
|
|
710
|
+
</div>
|
|
711
|
+
</span>
|
|
712
|
+
</auro-combobox>
|
|
713
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
740
714
|
</div>
|
|
741
715
|
<auro-accordion alignRight>
|
|
742
|
-
|
|
716
|
+
<span slot="trigger">See code</span>
|
|
743
717
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic.html) -->
|
|
744
718
|
<!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic.html -->
|
|
745
719
|
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
<span slot="helpText">
|
|
720
|
+
<pre class="language-html"><code class="language-html"><auro-combobox layout="emphasized" value="Oranges" shape="pill" size="xl" placeholder="Placeholder content" required style="width: 249px;">
|
|
721
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
722
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
723
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
724
|
+
<span slot="label">Name</span>
|
|
725
|
+
<auro-menu>
|
|
726
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
727
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
728
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
729
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
730
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
731
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
732
|
+
</auro-menu>
|
|
733
|
+
<span slot="helpText">
|
|
761
734
|
Help text - Lorem ipsum solar lorem ipsum solar
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
```
|
|
735
|
+
</span>
|
|
736
|
+
<span slot="displayValue">
|
|
737
|
+
<div>
|
|
738
|
+
<div class="mainText">Apples</div>
|
|
739
|
+
<div class="subText">Fruit</div>
|
|
740
|
+
</div>
|
|
741
|
+
</span>
|
|
742
|
+
</auro-combobox></code></pre>
|
|
771
743
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
772
744
|
</auro-accordion>
|
|
773
745
|
|
|
@@ -776,51 +748,49 @@ Use `layout="emphasized"` to apply the emphasized style to the combobox. This la
|
|
|
776
748
|
Use `layout="snowflake"`, with `shape="snowflake"` and `appearance="inverse"` to apply the snowflake style to the combobox. This layout is designed for use on dark backgrounds.
|
|
777
749
|
|
|
778
750
|
<div class="exampleWrapper--ondark">
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
751
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
|
|
752
|
+
<!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
|
|
753
|
+
<auro-combobox layout="snowflake" shape="snowflake" size="lg" placeholder="Placeholder content" required appearance="inverse" style="width: 249px;">
|
|
754
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
755
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
756
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
757
|
+
<span slot="label">Name</span>
|
|
758
|
+
<auro-menu>
|
|
759
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
760
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
761
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
762
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
763
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
764
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
765
|
+
</auro-menu>
|
|
766
|
+
<span slot="helpText">
|
|
767
|
+
Help text - Lorem ipsum solar lorem ipsum solar
|
|
768
|
+
</span>
|
|
769
|
+
</auro-combobox>
|
|
770
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
799
771
|
</div>
|
|
800
772
|
<auro-accordion alignRight>
|
|
801
|
-
|
|
773
|
+
<span slot="trigger">See code</span>
|
|
802
774
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
|
|
803
775
|
<!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
|
|
804
776
|
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
<span slot="helpText">
|
|
777
|
+
<pre class="language-html"><code class="language-html"><auro-combobox layout="snowflake" shape="snowflake" size="lg" placeholder="Placeholder content" required appearance="inverse" style="width: 249px;">
|
|
778
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
779
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
780
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
781
|
+
<span slot="label">Name</span>
|
|
782
|
+
<auro-menu>
|
|
783
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
784
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
785
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
786
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
787
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
788
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
789
|
+
</auro-menu>
|
|
790
|
+
<span slot="helpText">
|
|
820
791
|
Help text - Lorem ipsum solar lorem ipsum solar
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
```
|
|
792
|
+
</span>
|
|
793
|
+
</auro-combobox></code></pre>
|
|
824
794
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
825
795
|
</auro-accordion>
|
|
826
796
|
|
|
@@ -829,41 +799,39 @@ Use `layout="snowflake"`, with `shape="snowflake"` and `appearance="inverse"` to
|
|
|
829
799
|
If set, combobox will not do suggestion filtering of the menuoptions. This option is useful when the `<auro-menuoption>` elements are being pre-filtered externally to combobox (e.g. using the citysearch API).
|
|
830
800
|
|
|
831
801
|
<div class="exampleWrapper">
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
802
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-filter.html) -->
|
|
803
|
+
<!-- The below content is automatically added from ./../apiExamples/no-filter.html -->
|
|
804
|
+
<auro-combobox noFilter>
|
|
805
|
+
<span slot="bib.fullscreen.headline">noFilter Combobox Header</span>
|
|
806
|
+
<span slot="label">Name</span>
|
|
807
|
+
<auro-menu>
|
|
808
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
809
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
810
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
811
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
812
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
813
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
814
|
+
</auro-menu>
|
|
815
|
+
</auro-combobox>
|
|
816
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
847
817
|
</div>
|
|
848
818
|
<auro-accordion alignRight>
|
|
849
|
-
|
|
819
|
+
<span slot="trigger">See code</span>
|
|
850
820
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-filter.html) -->
|
|
851
821
|
<!-- The below code snippet is automatically added from ./../apiExamples/no-filter.html -->
|
|
852
822
|
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
</auro-combobox>
|
|
866
|
-
```
|
|
823
|
+
<pre class="language-html"><code class="language-html"><auro-combobox noFilter>
|
|
824
|
+
<span slot="bib.fullscreen.headline">noFilter Combobox Header</span>
|
|
825
|
+
<span slot="label">Name</span>
|
|
826
|
+
<auro-menu>
|
|
827
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
828
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
829
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
830
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
831
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
832
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
833
|
+
</auro-menu>
|
|
834
|
+
</auro-combobox></code></pre>
|
|
867
835
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
868
836
|
</auro-accordion>
|
|
869
837
|
|
|
@@ -874,43 +842,41 @@ Set the `noValidate` attribute to disable auto-validation on blur. This is inten
|
|
|
874
842
|
By using these two attributes in combination, the validation for required fields is still computed for forms but no validation messaging will be generated in the UI.
|
|
875
843
|
|
|
876
844
|
<div class="exampleWrapper">
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
845
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-validate.html) -->
|
|
846
|
+
<!-- The below content is automatically added from ./../apiExamples/no-validate.html -->
|
|
847
|
+
<auro-combobox required noValidate>
|
|
848
|
+
<span slot="bib.fullscreen.headline">noValidate Combobox Header</span>
|
|
849
|
+
<span slot="label">Name</span>
|
|
850
|
+
<auro-menu>
|
|
851
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
852
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
853
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
854
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
855
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
856
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
857
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
858
|
+
</auro-menu>
|
|
859
|
+
</auro-combobox>
|
|
860
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
893
861
|
</div>
|
|
894
862
|
<auro-accordion alignRight>
|
|
895
|
-
|
|
863
|
+
<span slot="trigger">See code</span>
|
|
896
864
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-validate.html) -->
|
|
897
865
|
<!-- The below code snippet is automatically added from ./../apiExamples/no-validate.html -->
|
|
898
866
|
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
</auro-combobox>
|
|
913
|
-
```
|
|
867
|
+
<pre class="language-html"><code class="language-html"><auro-combobox required noValidate>
|
|
868
|
+
<span slot="bib.fullscreen.headline">noValidate Combobox Header</span>
|
|
869
|
+
<span slot="label">Name</span>
|
|
870
|
+
<auro-menu>
|
|
871
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
872
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
873
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
874
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
875
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
876
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
877
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
878
|
+
</auro-menu>
|
|
879
|
+
</auro-combobox></code></pre>
|
|
914
880
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
915
881
|
</auro-accordion>
|
|
916
882
|
|
|
@@ -925,77 +891,75 @@ This is helpful for things like dynamic menus where you want the user to be able
|
|
|
925
891
|
**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.
|
|
926
892
|
|
|
927
893
|
<div class="exampleWrapper">
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
894
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/persist-input.html) -->
|
|
895
|
+
<!-- The below content is automatically added from ./../apiExamples/persist-input.html -->
|
|
896
|
+
<auro-combobox
|
|
897
|
+
required
|
|
898
|
+
persistInput
|
|
899
|
+
setCustomValidityValueMissing="Please select an option from the list."
|
|
900
|
+
>
|
|
901
|
+
<span slot="bib.fullscreen.headline">Persistant Input</span>
|
|
902
|
+
<span slot="label">Persistant Input</span>
|
|
903
|
+
<auro-menu>
|
|
904
|
+
<auro-menuoption value="Apples" id="option-0">
|
|
905
|
+
Apples
|
|
906
|
+
<div slot="displayValue">Apples</div>
|
|
907
|
+
</auro-menuoption>
|
|
908
|
+
<auro-menuoption value="Oranges" id="option-1">
|
|
909
|
+
Oranges
|
|
910
|
+
<div slot="displayValue">Oranges</div>
|
|
911
|
+
</auro-menuoption>
|
|
912
|
+
<auro-menuoption value="Peaches" id="option-2">
|
|
913
|
+
Peaches
|
|
914
|
+
<div slot="displayValue">Peaches</div>
|
|
915
|
+
</auro-menuoption>
|
|
916
|
+
<auro-menuoption value="Grapes" id="option-3">
|
|
917
|
+
Grapes
|
|
918
|
+
<div slot="displayValue">Grapes</div>
|
|
919
|
+
</auro-menuoption>
|
|
920
|
+
<auro-menuoption value="Cherries" id="option-4">
|
|
921
|
+
Cherries
|
|
922
|
+
<div slot="displayValue">Cherries</div>
|
|
923
|
+
</auro-menuoption>
|
|
924
|
+
</auro-menu>
|
|
925
|
+
</auro-combobox>
|
|
926
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
961
927
|
</div>
|
|
962
928
|
<auro-accordion alignRight>
|
|
963
|
-
|
|
929
|
+
<span slot="trigger">See code</span>
|
|
964
930
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/persist-input.html) -->
|
|
965
931
|
<!-- The below code snippet is automatically added from ./../apiExamples/persist-input.html -->
|
|
966
932
|
|
|
967
|
-
|
|
968
|
-
<auro-combobox
|
|
933
|
+
<pre class="language-html"><code class="language-html"><auro-combobox
|
|
969
934
|
required
|
|
970
935
|
persistInput
|
|
971
936
|
setCustomValidityValueMissing="Please select an option from the list."
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
937
|
+
>
|
|
938
|
+
<span slot="bib.fullscreen.headline">Persistant Input</span>
|
|
939
|
+
<span slot="label">Persistant Input</span>
|
|
940
|
+
<auro-menu>
|
|
941
|
+
<auro-menuoption value="Apples" id="option-0">
|
|
977
942
|
Apples
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
943
|
+
<div slot="displayValue">Apples</div>
|
|
944
|
+
</auro-menuoption>
|
|
945
|
+
<auro-menuoption value="Oranges" id="option-1">
|
|
981
946
|
Oranges
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
947
|
+
<div slot="displayValue">Oranges</div>
|
|
948
|
+
</auro-menuoption>
|
|
949
|
+
<auro-menuoption value="Peaches" id="option-2">
|
|
985
950
|
Peaches
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
951
|
+
<div slot="displayValue">Peaches</div>
|
|
952
|
+
</auro-menuoption>
|
|
953
|
+
<auro-menuoption value="Grapes" id="option-3">
|
|
989
954
|
Grapes
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
955
|
+
<div slot="displayValue">Grapes</div>
|
|
956
|
+
</auro-menuoption>
|
|
957
|
+
<auro-menuoption value="Cherries" id="option-4">
|
|
993
958
|
Cherries
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
```
|
|
959
|
+
<div slot="displayValue">Cherries</div>
|
|
960
|
+
</auro-menuoption>
|
|
961
|
+
</auro-menu>
|
|
962
|
+
</auro-combobox></code></pre>
|
|
999
963
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1000
964
|
</auro-accordion>
|
|
1001
965
|
|
|
@@ -1004,43 +968,41 @@ This is helpful for things like dynamic menus where you want the user to be able
|
|
|
1004
968
|
Populates the `required` attribute on the input. Used for client-side validation.
|
|
1005
969
|
|
|
1006
970
|
<div class="exampleWrapper">
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
971
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
|
|
972
|
+
<!-- The below content is automatically added from ./../apiExamples/required.html -->
|
|
973
|
+
<auro-combobox required>
|
|
974
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
975
|
+
<span slot="label">Name</span>
|
|
976
|
+
<auro-menu>
|
|
977
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
978
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
979
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
980
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
981
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
982
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
983
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
984
|
+
</auro-menu>
|
|
985
|
+
</auro-combobox>
|
|
986
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1023
987
|
</div>
|
|
1024
988
|
<auro-accordion alignRight>
|
|
1025
|
-
|
|
989
|
+
<span slot="trigger">See code</span>
|
|
1026
990
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
|
|
1027
991
|
<!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
|
|
1028
992
|
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
</auro-combobox>
|
|
1043
|
-
```
|
|
993
|
+
<pre class="language-html"><code class="language-html"><auro-combobox required>
|
|
994
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
995
|
+
<span slot="label">Name</span>
|
|
996
|
+
<auro-menu>
|
|
997
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
998
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
999
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1000
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1001
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1002
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
1003
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1004
|
+
</auro-menu>
|
|
1005
|
+
</auro-combobox></code></pre>
|
|
1044
1006
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1045
1007
|
</auro-accordion>
|
|
1046
1008
|
|
|
@@ -1051,112 +1013,108 @@ When defined, the `auro-input` in the combobox trigger will use the defined `typ
|
|
|
1051
1013
|
#### Credit Card
|
|
1052
1014
|
|
|
1053
1015
|
<div class="exampleWrapper">
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1016
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/type_credit-card.html) -->
|
|
1017
|
+
<!-- The below content is automatically added from ./../apiExamples/type_credit-card.html -->
|
|
1018
|
+
<auro-combobox type="credit-card" triggerIcon>
|
|
1019
|
+
<span slot="bib.fullscreen.headline">Credit Card</span>
|
|
1020
|
+
<span slot="label">Credit Card Number</span>
|
|
1021
|
+
<auro-menu>
|
|
1022
|
+
<auro-menuoption value="4500000000000000" id="option-cc-0">
|
|
1023
|
+
<auro-icon category="payment" customcolor name="cc-visa"></auro-icon>
|
|
1024
|
+
4000 0000 0000 0000
|
|
1025
|
+
</auro-menuoption>
|
|
1026
|
+
<auro-menuoption value="340000000000000" id="option-cc-1">
|
|
1027
|
+
<auro-icon category="payment" customcolor name="cc-amex"></auro-icon>
|
|
1028
|
+
3400 000000 00000
|
|
1029
|
+
</auro-menuoption>
|
|
1030
|
+
<auro-menuoption value="30000000000000" id="option-cc-2">
|
|
1031
|
+
<auro-icon category="payment" customcolor name="credit-card"></auro-icon>
|
|
1032
|
+
3000 000000 0000
|
|
1033
|
+
</auro-menuoption>
|
|
1034
|
+
<auro-menuoption value="5100000000000000" id="option-cc-4">
|
|
1035
|
+
<auro-icon category="payment" customcolor name="cc-mastercard"></auro-icon>
|
|
1036
|
+
5000 0000 0000 0000
|
|
1037
|
+
</auro-menuoption>
|
|
1038
|
+
<auro-menuoption value="6011000000000000" id="option-cc-5">
|
|
1039
|
+
<auro-icon category="payment" customcolor name="cc-discover"></auro-icon>
|
|
1040
|
+
6000 0000 0000 0000
|
|
1041
|
+
</auro-menuoption>
|
|
1042
|
+
<auro-menuoption static nomatch>No matching credit card saved</auro-menuoption>
|
|
1043
|
+
</auro-menu>
|
|
1044
|
+
</auro-combobox>
|
|
1045
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1084
1046
|
</div>
|
|
1085
1047
|
<auro-accordion alignRight>
|
|
1086
|
-
|
|
1048
|
+
<span slot="trigger">See code</span>
|
|
1087
1049
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/type_credit-card.html) -->
|
|
1088
1050
|
<!-- The below code snippet is automatically added from ./../apiExamples/type_credit-card.html -->
|
|
1089
1051
|
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
<auro-icon category="payment" customcolor name="cc-visa"></auro-icon>
|
|
1052
|
+
<pre class="language-html"><code class="language-html"><auro-combobox type="credit-card" triggerIcon>
|
|
1053
|
+
<span slot="bib.fullscreen.headline">Credit Card</span>
|
|
1054
|
+
<span slot="label">Credit Card Number</span>
|
|
1055
|
+
<auro-menu>
|
|
1056
|
+
<auro-menuoption value="4500000000000000" id="option-cc-0">
|
|
1057
|
+
<auro-icon category="payment" customcolor name="cc-visa"></auro-icon>
|
|
1097
1058
|
4000 0000 0000 0000
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1059
|
+
</auro-menuoption>
|
|
1060
|
+
<auro-menuoption value="340000000000000" id="option-cc-1">
|
|
1061
|
+
<auro-icon category="payment" customcolor name="cc-amex"></auro-icon>
|
|
1101
1062
|
3400 000000 00000
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1063
|
+
</auro-menuoption>
|
|
1064
|
+
<auro-menuoption value="30000000000000" id="option-cc-2">
|
|
1065
|
+
<auro-icon category="payment" customcolor name="credit-card"></auro-icon>
|
|
1105
1066
|
3000 000000 0000
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1067
|
+
</auro-menuoption>
|
|
1068
|
+
<auro-menuoption value="5100000000000000" id="option-cc-4">
|
|
1069
|
+
<auro-icon category="payment" customcolor name="cc-mastercard"></auro-icon>
|
|
1109
1070
|
5000 0000 0000 0000
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1071
|
+
</auro-menuoption>
|
|
1072
|
+
<auro-menuoption value="6011000000000000" id="option-cc-5">
|
|
1073
|
+
<auro-icon category="payment" customcolor name="cc-discover"></auro-icon>
|
|
1113
1074
|
6000 0000 0000 0000
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
```
|
|
1075
|
+
</auro-menuoption>
|
|
1076
|
+
<auro-menuoption static nomatch>No matching credit card saved</auro-menuoption>
|
|
1077
|
+
</auro-menu>
|
|
1078
|
+
</auro-combobox></code></pre>
|
|
1119
1079
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1120
1080
|
</auro-accordion>
|
|
1121
1081
|
|
|
1122
1082
|
#### Month-Day-Year
|
|
1123
1083
|
|
|
1124
1084
|
<div class="exampleWrapper">
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1085
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/type_month-day-year.html) -->
|
|
1086
|
+
<!-- The below content is automatically added from ./../apiExamples/type_month-day-year.html -->
|
|
1087
|
+
<auro-combobox type="date" triggerIcon>
|
|
1088
|
+
<span slot="bib.fullscreen.headline">Date Combobox Header</span>
|
|
1089
|
+
<span slot="label">Date</span>
|
|
1090
|
+
<auro-menu>
|
|
1091
|
+
<auro-menuoption value="01/02/2020" id="option-date-0">
|
|
1092
|
+
01/02/2020
|
|
1093
|
+
</auro-menuoption>
|
|
1094
|
+
<auro-menuoption value="05/16/2022" id="option-date-1">
|
|
1095
|
+
05/16/2022
|
|
1096
|
+
</auro-menuoption>
|
|
1097
|
+
</auro-menu>
|
|
1098
|
+
</auro-combobox>
|
|
1099
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1140
1100
|
</div>
|
|
1141
1101
|
<auro-accordion alignRight>
|
|
1142
|
-
|
|
1102
|
+
<span slot="trigger">See code</span>
|
|
1143
1103
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/type_month-day-year.html) -->
|
|
1144
1104
|
<!-- The below code snippet is automatically added from ./../apiExamples/type_month-day-year.html -->
|
|
1145
1105
|
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
<auro-menuoption value="01/02/2020" id="option-date-0">
|
|
1106
|
+
<pre class="language-html"><code class="language-html"><auro-combobox type="date" triggerIcon>
|
|
1107
|
+
<span slot="bib.fullscreen.headline">Date Combobox Header</span>
|
|
1108
|
+
<span slot="label">Date</span>
|
|
1109
|
+
<auro-menu>
|
|
1110
|
+
<auro-menuoption value="01/02/2020" id="option-date-0">
|
|
1152
1111
|
01/02/2020
|
|
1153
|
-
|
|
1154
|
-
|
|
1112
|
+
</auro-menuoption>
|
|
1113
|
+
<auro-menuoption value="05/16/2022" id="option-date-1">
|
|
1155
1114
|
05/16/2022
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
```
|
|
1115
|
+
</auro-menuoption>
|
|
1116
|
+
</auro-menu>
|
|
1117
|
+
</auro-combobox></code></pre>
|
|
1160
1118
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1161
1119
|
</auro-accordion>
|
|
1162
1120
|
|
|
@@ -1165,43 +1123,41 @@ When defined, the `auro-input` in the combobox trigger will use the defined `typ
|
|
|
1165
1123
|
Use the `value` attribute to programmatically set the value of the combobox.
|
|
1166
1124
|
|
|
1167
1125
|
<div class="exampleWrapper">
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1126
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/programmatic-value.html) -->
|
|
1127
|
+
<!-- The below content is automatically added from ./../apiExamples/programmatic-value.html -->
|
|
1128
|
+
<auro-combobox>
|
|
1129
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1130
|
+
<span slot="label">Name</span>
|
|
1131
|
+
<auro-menu>
|
|
1132
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1133
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1134
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1135
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1136
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1137
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
1138
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1139
|
+
</auro-menu>
|
|
1140
|
+
</auro-combobox>
|
|
1141
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1184
1142
|
</div>
|
|
1185
1143
|
<auro-accordion alignRight>
|
|
1186
|
-
|
|
1144
|
+
<span slot="trigger">See code</span>
|
|
1187
1145
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/programmatic-value.html) -->
|
|
1188
1146
|
<!-- The below code snippet is automatically added from ./../apiExamples/programmatic-value.html -->
|
|
1189
1147
|
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
</auro-combobox>
|
|
1204
|
-
```
|
|
1148
|
+
<pre class="language-html"><code class="language-html"><auro-combobox>
|
|
1149
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1150
|
+
<span slot="label">Name</span>
|
|
1151
|
+
<auro-menu>
|
|
1152
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1153
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1154
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1155
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1156
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1157
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
1158
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1159
|
+
</auro-menu>
|
|
1160
|
+
</auro-combobox></code></pre>
|
|
1205
1161
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1206
1162
|
</auro-accordion>
|
|
1207
1163
|
|
|
@@ -1212,59 +1168,55 @@ Use the `value` attribute to programmatically set the value of the combobox.
|
|
|
1212
1168
|
The `focus()` method will apply focus state to the combobox input field.
|
|
1213
1169
|
|
|
1214
1170
|
<div class="exampleWrapper">
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1171
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/focus.html) -->
|
|
1172
|
+
<!-- The below content is automatically added from ./../apiExamples/focus.html -->
|
|
1173
|
+
<auro-button id="focusExampleBtn">Apply focus to combobox</auro-button>
|
|
1174
|
+
<br /><br />
|
|
1175
|
+
<auro-combobox id="focusExample">
|
|
1176
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1177
|
+
<span slot="label">Name</span>
|
|
1178
|
+
<auro-menu>
|
|
1179
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1180
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1181
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1182
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1183
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1184
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1185
|
+
</auro-menu>
|
|
1186
|
+
</auro-combobox>
|
|
1187
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1232
1188
|
</div>
|
|
1233
1189
|
<auro-accordion alignRight>
|
|
1234
|
-
|
|
1190
|
+
<span slot="trigger">See code</span>
|
|
1235
1191
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/focus.html) -->
|
|
1236
1192
|
<!-- The below code snippet is automatically added from ./../apiExamples/focus.html -->
|
|
1237
1193
|
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
</auro-combobox>
|
|
1253
|
-
```
|
|
1194
|
+
<pre class="language-html"><code class="language-html"><auro-button id="focusExampleBtn">Apply focus to combobox</auro-button>
|
|
1195
|
+
<br /><br />
|
|
1196
|
+
<auro-combobox id="focusExample">
|
|
1197
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1198
|
+
<span slot="label">Name</span>
|
|
1199
|
+
<auro-menu>
|
|
1200
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1201
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1202
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1203
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1204
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1205
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1206
|
+
</auro-menu>
|
|
1207
|
+
</auro-combobox></code></pre>
|
|
1254
1208
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1255
1209
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/focus.js) -->
|
|
1256
1210
|
<!-- The below code snippet is automatically added from ./../apiExamples/focus.js -->
|
|
1257
1211
|
|
|
1258
|
-
|
|
1259
|
-
export function focusExample() {
|
|
1212
|
+
<pre class="language-js"><code class="language-js">export function focusExample() {
|
|
1260
1213
|
const focusExample = document.querySelector('#focusExample');
|
|
1261
1214
|
const focusExampleBtnElem = document.querySelector('#focusExampleBtn');
|
|
1262
|
-
|
|
1263
|
-
focusExampleBtnElem.addEventListener('click', ()
|
|
1215
|
+
|
|
1216
|
+
focusExampleBtnElem.addEventListener('click', () => {
|
|
1264
1217
|
focusExample.focus();
|
|
1265
1218
|
});
|
|
1266
|
-
}
|
|
1267
|
-
```
|
|
1219
|
+
}</code></pre>
|
|
1268
1220
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1269
1221
|
</auro-accordion>
|
|
1270
1222
|
|
|
@@ -1273,58 +1225,54 @@ export function focusExample() {
|
|
|
1273
1225
|
Use the `reset()` method to reset the `<auro-combobox>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
|
|
1274
1226
|
|
|
1275
1227
|
<div class="exampleWrapper">
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1228
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
|
|
1229
|
+
<!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
|
|
1230
|
+
<auro-button id="resetStateBtn">Reset</auro-button>
|
|
1231
|
+
<br /><br />
|
|
1232
|
+
<auro-combobox id="resetStateExample" required>
|
|
1233
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1234
|
+
<span slot="label">Name</span>
|
|
1235
|
+
<auro-menu>
|
|
1236
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1237
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1238
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1239
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1240
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1241
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1242
|
+
</auro-menu>
|
|
1243
|
+
</auro-combobox>
|
|
1244
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1293
1245
|
</div>
|
|
1294
1246
|
<auro-accordion alignRight>
|
|
1295
|
-
|
|
1247
|
+
<span slot="trigger">See code</span>
|
|
1296
1248
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.html) -->
|
|
1297
1249
|
<!-- The below code snippet is automatically added from ./../apiExamples/reset-state.html -->
|
|
1298
1250
|
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
</auro-combobox>
|
|
1314
|
-
```
|
|
1251
|
+
<pre class="language-html"><code class="language-html"><auro-button id="resetStateBtn">Reset</auro-button>
|
|
1252
|
+
<br /><br />
|
|
1253
|
+
<auro-combobox id="resetStateExample" required>
|
|
1254
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1255
|
+
<span slot="label">Name</span>
|
|
1256
|
+
<auro-menu>
|
|
1257
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1258
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1259
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1260
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1261
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1262
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1263
|
+
</auro-menu>
|
|
1264
|
+
</auro-combobox></code></pre>
|
|
1315
1265
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1316
1266
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.js) -->
|
|
1317
1267
|
<!-- The below code snippet is automatically added from ./../apiExamples/reset-state.js -->
|
|
1318
1268
|
|
|
1319
|
-
|
|
1320
|
-
export function resetStateExample() {
|
|
1269
|
+
<pre class="language-js"><code class="language-js">export function resetStateExample() {
|
|
1321
1270
|
const elem = document.querySelector('#resetStateExample');
|
|
1322
|
-
|
|
1323
|
-
document.querySelector('#resetStateBtn').addEventListener('click', ()
|
|
1271
|
+
|
|
1272
|
+
document.querySelector('#resetStateBtn').addEventListener('click', () => {
|
|
1324
1273
|
elem.reset();
|
|
1325
1274
|
});
|
|
1326
|
-
}
|
|
1327
|
-
```
|
|
1275
|
+
}</code></pre>
|
|
1328
1276
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1329
1277
|
</auro-accordion>
|
|
1330
1278
|
|
|
@@ -1335,76 +1283,72 @@ The `updateActiveOption` method allows you to programmatically set which menu op
|
|
|
1335
1283
|
The method accepts an index parameter representing the position of the option to make active in the menu.
|
|
1336
1284
|
|
|
1337
1285
|
<div class="exampleWrapper--ondark">
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1286
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-selection.html) -->
|
|
1287
|
+
<!-- The below content is automatically added from ./../apiExamples/external-selection.html -->
|
|
1288
|
+
<p style="color: white;">
|
|
1289
|
+
Type an IATA code (sea, lax, jfk, ord, sfo) to highlight the matching airport.
|
|
1290
|
+
</p>
|
|
1291
|
+
<auro-combobox appearance="inverse" id="externalSelectionExample" noFilter>
|
|
1292
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
1293
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
1294
|
+
<span slot="bib.fullscreen.headline">Select an Airport</span>
|
|
1295
|
+
<span slot="label">Airport</span>
|
|
1296
|
+
<auro-menu>
|
|
1297
|
+
<auro-menuoption value="SEA">SEA - Seattle-Tacoma International</auro-menuoption>
|
|
1298
|
+
<auro-menuoption value="LAX">LAX - Los Angeles International</auro-menuoption>
|
|
1299
|
+
<auro-menuoption value="JFK">JFK - John F. Kennedy International</auro-menuoption>
|
|
1300
|
+
<auro-menuoption value="ORD">ORD - O'Hare International</auro-menuoption>
|
|
1301
|
+
<auro-menuoption value="SFO">SFO - San Francisco International</auro-menuoption>
|
|
1302
|
+
<auro-menuoption static nomatch>No matching airport</auro-menuoption>
|
|
1303
|
+
</auro-menu>
|
|
1304
|
+
<span slot="helpText">
|
|
1305
|
+
Start typing an airport code to see it highlighted
|
|
1306
|
+
</span>
|
|
1307
|
+
</auro-combobox>
|
|
1308
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1361
1309
|
</div>
|
|
1362
1310
|
<auro-accordion alignRight>
|
|
1363
|
-
|
|
1311
|
+
<span slot="trigger">See code</span>
|
|
1364
1312
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-selection.html) -->
|
|
1365
1313
|
<!-- The below code snippet is automatically added from ./../apiExamples/external-selection.html -->
|
|
1366
1314
|
|
|
1367
|
-
|
|
1368
|
-
<p style="color: white;">
|
|
1315
|
+
<pre class="language-html"><code class="language-html"><p style="color: white;">
|
|
1369
1316
|
Type an IATA code (sea, lax, jfk, ord, sfo) to highlight the matching airport.
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1317
|
+
</p>
|
|
1318
|
+
<auro-combobox appearance="inverse" id="externalSelectionExample" noFilter>
|
|
1319
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
1320
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
1321
|
+
<span slot="bib.fullscreen.headline">Select an Airport</span>
|
|
1322
|
+
<span slot="label">Airport</span>
|
|
1323
|
+
<auro-menu>
|
|
1324
|
+
<auro-menuoption value="SEA">SEA - Seattle-Tacoma International</auro-menuoption>
|
|
1325
|
+
<auro-menuoption value="LAX">LAX - Los Angeles International</auro-menuoption>
|
|
1326
|
+
<auro-menuoption value="JFK">JFK - John F. Kennedy International</auro-menuoption>
|
|
1327
|
+
<auro-menuoption value="ORD">ORD - O'Hare International</auro-menuoption>
|
|
1328
|
+
<auro-menuoption value="SFO">SFO - San Francisco International</auro-menuoption>
|
|
1329
|
+
<auro-menuoption static nomatch>No matching airport</auro-menuoption>
|
|
1330
|
+
</auro-menu>
|
|
1331
|
+
<span slot="helpText">
|
|
1385
1332
|
Start typing an airport code to see it highlighted
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
```
|
|
1333
|
+
</span>
|
|
1334
|
+
</auro-combobox></code></pre>
|
|
1389
1335
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1390
1336
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-selection.js) -->
|
|
1391
1337
|
<!-- The below code snippet is automatically added from ./../apiExamples/external-selection.js -->
|
|
1392
1338
|
|
|
1393
|
-
|
|
1394
|
-
export function setupExternalSelectionExample() {
|
|
1339
|
+
<pre class="language-js"><code class="language-js">export function setupExternalSelectionExample() {
|
|
1395
1340
|
const combobox = document.getElementById('externalSelectionExample');
|
|
1396
1341
|
const iataCodes = ['sea', 'lax', 'jfk', 'ord', 'sfo'];
|
|
1397
|
-
|
|
1398
|
-
combobox.addEventListener('input', ()
|
|
1342
|
+
|
|
1343
|
+
combobox.addEventListener('input', () => {
|
|
1399
1344
|
const input = combobox.inputValue?.toLowerCase();
|
|
1400
1345
|
const matchIndex = iataCodes.indexOf(input);
|
|
1401
|
-
|
|
1346
|
+
|
|
1402
1347
|
if (matchIndex !== -1) {
|
|
1403
1348
|
combobox.updateActiveOption(matchIndex);
|
|
1404
1349
|
}
|
|
1405
1350
|
});
|
|
1406
|
-
}
|
|
1407
|
-
```
|
|
1351
|
+
}</code></pre>
|
|
1408
1352
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1409
1353
|
</auro-accordion>
|
|
1410
1354
|
|
|
@@ -1415,49 +1359,69 @@ export function setupExternalSelectionExample() {
|
|
|
1415
1359
|
You can fully customize how selected values appear by using the `displayValue` slot. This slot allows you to pass in any HTML content. Only the `snowflake` and `emphasized` layouts are supported.
|
|
1416
1360
|
|
|
1417
1361
|
<div class="exampleWrapper--ondark">
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1362
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/display-value.html) -->
|
|
1363
|
+
<!-- The below content is automatically added from ./../apiExamples/display-value.html -->
|
|
1364
|
+
<auro-combobox layout="snowflake" shape="snowflake" size="xl" appearance="inverse" value="Apples">
|
|
1365
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1366
|
+
<span slot="label">Name</span>
|
|
1367
|
+
<auro-menu>
|
|
1368
|
+
<auro-menuoption value="Apples" id="option-0">
|
|
1369
|
+
Apples
|
|
1370
|
+
<span slot="displayValue">🍎</span>
|
|
1371
|
+
</auro-menuoption>
|
|
1372
|
+
<auro-menuoption value="Oranges" id="option-1">
|
|
1373
|
+
Oranges
|
|
1374
|
+
<span slot="displayValue">🍊</span>
|
|
1375
|
+
</auro-menuoption>
|
|
1376
|
+
<auro-menuoption value="Peaches" id="option-2">
|
|
1377
|
+
Peaches
|
|
1378
|
+
<span slot="displayValue">🍑</span>
|
|
1379
|
+
</auro-menuoption>
|
|
1380
|
+
<auro-menuoption value="Grapes" id="option-3">
|
|
1381
|
+
Grapes
|
|
1382
|
+
<span slot="displayValue">🍇</span>
|
|
1383
|
+
</auro-menuoption>
|
|
1384
|
+
<auro-menuoption value="Cherries" id="option-4">
|
|
1385
|
+
Cherries
|
|
1386
|
+
<span slot="displayValue">🍒</span>
|
|
1387
|
+
</auro-menuoption>
|
|
1388
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1389
|
+
</auro-menu>
|
|
1390
|
+
</auro-combobox>
|
|
1391
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1437
1392
|
</div>
|
|
1438
1393
|
<auro-accordion alignRight>
|
|
1439
|
-
|
|
1394
|
+
<span slot="trigger">See code</span>
|
|
1440
1395
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/display-value.html) -->
|
|
1441
1396
|
<!-- The below code snippet is automatically added from ./../apiExamples/display-value.html -->
|
|
1442
1397
|
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1398
|
+
<pre class="language-html"><code class="language-html"><auro-combobox layout="snowflake" shape="snowflake" size="xl" appearance="inverse" value="Apples">
|
|
1399
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1400
|
+
<span slot="label">Name</span>
|
|
1401
|
+
<auro-menu>
|
|
1402
|
+
<auro-menuoption value="Apples" id="option-0">
|
|
1403
|
+
Apples
|
|
1404
|
+
<span slot="displayValue">🍎</span>
|
|
1405
|
+
</auro-menuoption>
|
|
1406
|
+
<auro-menuoption value="Oranges" id="option-1">
|
|
1407
|
+
Oranges
|
|
1408
|
+
<span slot="displayValue">🍊</span>
|
|
1409
|
+
</auro-menuoption>
|
|
1410
|
+
<auro-menuoption value="Peaches" id="option-2">
|
|
1411
|
+
Peaches
|
|
1412
|
+
<span slot="displayValue">🍑</span>
|
|
1413
|
+
</auro-menuoption>
|
|
1414
|
+
<auro-menuoption value="Grapes" id="option-3">
|
|
1415
|
+
Grapes
|
|
1416
|
+
<span slot="displayValue">🍇</span>
|
|
1417
|
+
</auro-menuoption>
|
|
1418
|
+
<auro-menuoption value="Cherries" id="option-4">
|
|
1419
|
+
Cherries
|
|
1420
|
+
<span slot="displayValue">🍒</span>
|
|
1421
|
+
</auro-menuoption>
|
|
1422
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1423
|
+
</auro-menu>
|
|
1424
|
+
</auro-combobox></code></pre>
|
|
1461
1425
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1462
1426
|
</auro-accordion>
|
|
1463
1427
|
|
|
@@ -1466,43 +1430,41 @@ You can fully customize how selected values appear by using the `displayValue` s
|
|
|
1466
1430
|
The `<auro-combobox>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
|
|
1467
1431
|
|
|
1468
1432
|
<div class="exampleWrapper">
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1433
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optional-label.html) -->
|
|
1434
|
+
<!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
|
|
1435
|
+
<auro-combobox>
|
|
1436
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1437
|
+
<span slot="label">Name</span>
|
|
1438
|
+
<span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
|
|
1439
|
+
<auro-menu>
|
|
1440
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1441
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1442
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1443
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1444
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1445
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1446
|
+
</auro-menu>
|
|
1447
|
+
</auro-combobox>
|
|
1448
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1485
1449
|
</div>
|
|
1486
1450
|
<auro-accordion alignRight>
|
|
1487
|
-
|
|
1451
|
+
<span slot="trigger">See code</span>
|
|
1488
1452
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optional-label.html) -->
|
|
1489
1453
|
<!-- The below code snippet is automatically added from ./../apiExamples/optional-label.html -->
|
|
1490
1454
|
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
</auro-combobox>
|
|
1505
|
-
```
|
|
1455
|
+
<pre class="language-html"><code class="language-html"><auro-combobox>
|
|
1456
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1457
|
+
<span slot="label">Name</span>
|
|
1458
|
+
<span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
|
|
1459
|
+
<auro-menu>
|
|
1460
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1461
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1462
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1463
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1464
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1465
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1466
|
+
</auro-menu>
|
|
1467
|
+
</auro-combobox></code></pre>
|
|
1506
1468
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1507
1469
|
</auro-accordion>
|
|
1508
1470
|
|
|
@@ -1511,45 +1473,43 @@ The `<auro-combobox>` supports an `optionalLabel` slot, where users can can over
|
|
|
1511
1473
|
Sets the help text displayed below the trigger. The `helpText` slot can be used to provide additional context for the combobox. When using the `error` property, the `helpText` slot can be used to describe the error.
|
|
1512
1474
|
|
|
1513
1475
|
<div class="exampleWrapper">
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1476
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/help-text.html) -->
|
|
1477
|
+
<!-- The below content is automatically added from ./../apiExamples/help-text.html -->
|
|
1478
|
+
<auro-combobox>
|
|
1479
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1480
|
+
<span slot="label">Name</span>
|
|
1481
|
+
<span slot="helpText">Custom help text</span>
|
|
1482
|
+
<auro-menu>
|
|
1483
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1484
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1485
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1486
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1487
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1488
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
1489
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1490
|
+
</auro-menu>
|
|
1491
|
+
</auro-combobox>
|
|
1492
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1531
1493
|
</div>
|
|
1532
1494
|
<auro-accordion alignRight>
|
|
1533
|
-
|
|
1495
|
+
<span slot="trigger">See code</span>
|
|
1534
1496
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/help-text.html) -->
|
|
1535
1497
|
<!-- The below code snippet is automatically added from ./../apiExamples/help-text.html -->
|
|
1536
1498
|
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
</auro-combobox>
|
|
1552
|
-
```
|
|
1499
|
+
<pre class="language-html"><code class="language-html"><auro-combobox>
|
|
1500
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1501
|
+
<span slot="label">Name</span>
|
|
1502
|
+
<span slot="helpText">Custom help text</span>
|
|
1503
|
+
<auro-menu>
|
|
1504
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1505
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1506
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1507
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1508
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1509
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
1510
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1511
|
+
</auro-menu>
|
|
1512
|
+
</auro-combobox></code></pre>
|
|
1553
1513
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1554
1514
|
</auro-accordion>
|
|
1555
1515
|
|
|
@@ -1560,45 +1520,43 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used
|
|
|
1560
1520
|
This example demonstrates a combobox populated with a static menu option that appears when there is not an option that matches the user's input. Use the `<auro-menuoptions>`'s `static` and `nomatch` attributes to achieve this behavior.
|
|
1561
1521
|
|
|
1562
1522
|
<div class="exampleWrapper">
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1523
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-match.html) -->
|
|
1524
|
+
<!-- The below content is automatically added from ./../apiExamples/no-match.html -->
|
|
1525
|
+
<auro-combobox>
|
|
1526
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
1527
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
1528
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1529
|
+
<span slot="label">Name</span>
|
|
1530
|
+
<auro-menu>
|
|
1531
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1532
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1533
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1534
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1535
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1536
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1537
|
+
</auro-menu>
|
|
1538
|
+
</auro-combobox>
|
|
1539
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1580
1540
|
</div>
|
|
1581
1541
|
<auro-accordion alignRight>
|
|
1582
|
-
|
|
1542
|
+
<span slot="trigger">See code</span>
|
|
1583
1543
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-match.html) -->
|
|
1584
1544
|
<!-- The below code snippet is automatically added from ./../apiExamples/no-match.html -->
|
|
1585
1545
|
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
</auro-combobox>
|
|
1601
|
-
```
|
|
1546
|
+
<pre class="language-html"><code class="language-html"><auro-combobox>
|
|
1547
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
1548
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
1549
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1550
|
+
<span slot="label">Name</span>
|
|
1551
|
+
<auro-menu>
|
|
1552
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1553
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1554
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1555
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1556
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1557
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1558
|
+
</auro-menu>
|
|
1559
|
+
</auro-combobox></code></pre>
|
|
1602
1560
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1603
1561
|
</auro-accordion>
|
|
1604
1562
|
</auro-accordion>
|
|
@@ -1608,57 +1566,55 @@ This example demonstrates a combobox populated with a static menu option that ap
|
|
|
1608
1566
|
This example shows how to set a custom height for the bib from `<auro-menu>`. Custom height dimensions are set by applying a `max-height` rule and value on the `<auro-menu>`.
|
|
1609
1567
|
|
|
1610
1568
|
<div class="exampleWrapper">
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1569
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/max-height.html) -->
|
|
1570
|
+
<!-- The below content is automatically added from ./../apiExamples/max-height.html -->
|
|
1571
|
+
<auro-combobox>
|
|
1572
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
1573
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
1574
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1575
|
+
<span slot="label">Name</span>
|
|
1576
|
+
<auro-menu style="max-height: 200px">
|
|
1577
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1578
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1579
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1580
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1581
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1582
|
+
<auro-menuoption value="Strawberries" id="option-5">Strawberries</auro-menuoption>
|
|
1583
|
+
<auro-menuoption value="Blueberries" id="option-6">Blueberries</auro-menuoption>
|
|
1584
|
+
<auro-menuoption value="Raspberries" id="option-7">Raspberries</auro-menuoption>
|
|
1585
|
+
<auro-menuoption value="Blackberries" id="option-8">Blackberries</auro-menuoption>
|
|
1586
|
+
<auro-menuoption value="Cranberries" id="option-9">Cranberries</auro-menuoption>
|
|
1587
|
+
<auro-menuoption value="Bananas" id="option-10">Bananas</auro-menuoption>
|
|
1588
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1589
|
+
</auro-menu>
|
|
1590
|
+
</auro-combobox>
|
|
1591
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1634
1592
|
</div>
|
|
1635
1593
|
<auro-accordion alignRight>
|
|
1636
|
-
|
|
1594
|
+
<span slot="trigger">See code</span>
|
|
1637
1595
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/max-height.html) -->
|
|
1638
1596
|
<!-- The below code snippet is automatically added from ./../apiExamples/max-height.html -->
|
|
1639
1597
|
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
</auro-combobox>
|
|
1661
|
-
```
|
|
1598
|
+
<pre class="language-html"><code class="language-html"><auro-combobox>
|
|
1599
|
+
<span slot="ariaLabel.bib.close">Close combobox</span>
|
|
1600
|
+
<span slot="ariaLabel.input.clear">Clear All</span>
|
|
1601
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1602
|
+
<span slot="label">Name</span>
|
|
1603
|
+
<auro-menu style="max-height: 200px">
|
|
1604
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1605
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1606
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1607
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1608
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1609
|
+
<auro-menuoption value="Strawberries" id="option-5">Strawberries</auro-menuoption>
|
|
1610
|
+
<auro-menuoption value="Blueberries" id="option-6">Blueberries</auro-menuoption>
|
|
1611
|
+
<auro-menuoption value="Raspberries" id="option-7">Raspberries</auro-menuoption>
|
|
1612
|
+
<auro-menuoption value="Blackberries" id="option-8">Blackberries</auro-menuoption>
|
|
1613
|
+
<auro-menuoption value="Cranberries" id="option-9">Cranberries</auro-menuoption>
|
|
1614
|
+
<auro-menuoption value="Bananas" id="option-10">Bananas</auro-menuoption>
|
|
1615
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1616
|
+
</auro-menu>
|
|
1617
|
+
</auro-combobox></code></pre>
|
|
1662
1618
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1663
1619
|
</auro-accordion>
|
|
1664
1620
|
|
|
@@ -1667,281 +1623,279 @@ This example shows how to set a custom height for the bib from `<auro-menu>`. Cu
|
|
|
1667
1623
|
Combobox populated with airport options.
|
|
1668
1624
|
|
|
1669
1625
|
<div class="exampleWrapper">
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1626
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/airports.html) -->
|
|
1627
|
+
<!-- The below content is automatically added from ./../apiExamples/airports.html -->
|
|
1628
|
+
<auro-combobox>
|
|
1629
|
+
<span slot="bib.fullscreen.headline">Airports</span>
|
|
1630
|
+
<span slot="label">Name</span>
|
|
1631
|
+
<auro-menu>
|
|
1632
|
+
<auro-menuoption value="fca" id="airport-fca" suggest="fca montana kalispell">glacier park international</auro-menuoption>
|
|
1633
|
+
<auro-menuoption value="sfo" id="airport-sfo" suggest="sfo california san francisco">san francisco international</auro-menuoption>
|
|
1634
|
+
<auro-menuoption value="boi" id="airport-boi" suggest="boi idaho boise">gowen field</auro-menuoption>
|
|
1635
|
+
<auro-menuoption value="stl" id="airport-stl" suggest="stl missouri st louis">lambert st louis international</auro-menuoption>
|
|
1636
|
+
<auro-menuoption value="ylw" id="airport-ylw" suggest="ylw british columbia kelowna">kelowna international</auro-menuoption>
|
|
1637
|
+
<auro-menuoption value="ykm" id="airport-ykm" suggest="ykm washington yakima">yakima air terminal</auro-menuoption>
|
|
1638
|
+
<auro-menuoption value="puw" id="airport-puw" suggest="puw washington pullman">pullman moscow regional</auro-menuoption>
|
|
1639
|
+
<auro-menuoption value="yeg" id="airport-yeg" suggest="yeg alberta edmonton">edmonton international</auro-menuoption>
|
|
1640
|
+
<auro-menuoption value="tpa" id="airport-tpa" suggest="tpa florida tampa">tampa international</auro-menuoption>
|
|
1641
|
+
<auro-menuoption value="msp" id="airport-msp" suggest="msp minnesota minneapolis">minneapolis st paul international</auro-menuoption>
|
|
1642
|
+
<auro-menuoption value="ida" id="airport-ida" suggest="ida idaho idaho falls">idaho falls regional airport</auro-menuoption>
|
|
1643
|
+
<auro-menuoption value="mfr" id="airport-mfr" suggest="mfr oregon medford">rogue valley international</auro-menuoption>
|
|
1644
|
+
<auro-menuoption value="psp" id="airport-psp" suggest="psp california palm springs">palm springs international</auro-menuoption>
|
|
1645
|
+
<auro-menuoption value="lir" id="airport-lir" suggest="lir guanacaste liberia">guanacaste airport</auro-menuoption>
|
|
1646
|
+
<auro-menuoption value="oak" id="airport-oak" suggest="oak california oakland">oakland international</auro-menuoption>
|
|
1647
|
+
<auro-menuoption value="bos" id="airport-bos" suggest="bos massachusetts boston">logan international</auro-menuoption>
|
|
1648
|
+
<auro-menuoption value="bwi" id="airport-bwi" suggest="bwi maryland baltimore">thurgood marshall international</auro-menuoption>
|
|
1649
|
+
<auro-menuoption value="dal" id="airport-dal" suggest="dal texas dallas">dallas love field</auro-menuoption>
|
|
1650
|
+
<auro-menuoption value="sba" id="airport-sba" suggest="sba california santa barbara">santa barbara municipal</auro-menuoption>
|
|
1651
|
+
<auro-menuoption value="mci" id="airport-mci" suggest="mci missouri kansas city">kansas city international</auro-menuoption>
|
|
1652
|
+
<auro-menuoption value="koa" id="airport-koa" suggest="koa hawaii kona">kona international</auro-menuoption>
|
|
1653
|
+
<auro-menuoption value="pvr" id="airport-pvr" suggest="pvr jalisco puerto vallarta">licenciado gustavo diaz ordaz international</auro-menuoption>
|
|
1654
|
+
<auro-menuoption value="wrg" id="airport-wrg" suggest="wrg alaska wrangell">wrangell</auro-menuoption>
|
|
1655
|
+
<auro-menuoption value="scc" id="airport-scc" suggest="scc alaska prudhoe bay">deadhorse</auro-menuoption>
|
|
1656
|
+
<auro-menuoption value="lto" id="airport-lto" suggest="lto baja california loreto">loreto international</auro-menuoption>
|
|
1657
|
+
<auro-menuoption value="ome" id="airport-ome" suggest="ome alaska nome">nome</auro-menuoption>
|
|
1658
|
+
<auro-menuoption value="ict" id="airport-ict" suggest="ict kansas wichita">dwight d eisenhower national</auro-menuoption>
|
|
1659
|
+
<auro-menuoption value="phl" id="airport-phl" suggest="phl pennsylvania philadelphia">philadelphia international</auro-menuoption>
|
|
1660
|
+
<auro-menuoption value="dfw" id="airport-dfw" suggest="dfw texas dallas">dallas fort worth international</auro-menuoption>
|
|
1661
|
+
<auro-menuoption value="ind" id="airport-ind" suggest="ind indiana indianapolis">indianapolis international</auro-menuoption>
|
|
1662
|
+
<auro-menuoption value="smf" id="airport-smf" suggest="smf california sacramento">sacramento international</auro-menuoption>
|
|
1663
|
+
<auro-menuoption value="sit" id="airport-sit" suggest="sit alaska sitka">rocky gutierrez</auro-menuoption>
|
|
1664
|
+
<auro-menuoption value="dut" id="airport-dut" suggest="dut alaska dutch harbor">unalaska</auro-menuoption>
|
|
1665
|
+
<auro-menuoption value="cdv" id="airport-cdv" suggest="cdv alaska cordova">merle mudhole smith</auro-menuoption>
|
|
1666
|
+
<auro-menuoption value="psg" id="airport-psg" suggest="psg alaska petersburg">james a johnson</auro-menuoption>
|
|
1667
|
+
<auro-menuoption value="bna" id="airport-bna" suggest="bna tennessee nashville">nashville international</auro-menuoption>
|
|
1668
|
+
<auro-menuoption value="geg" id="airport-geg" suggest="geg washington spokane">spokane international</auro-menuoption>
|
|
1669
|
+
<auro-menuoption value="ktn" id="airport-ktn" suggest="ktn alaska ketchikan">ketchikan international</auro-menuoption>
|
|
1670
|
+
<auro-menuoption value="pit" id="airport-pit" suggest="pit pennsylvania pittsburgh">pittsburgh international</auro-menuoption>
|
|
1671
|
+
<auro-menuoption value="sbp" id="airport-sbp" suggest="sbp california san luis obispo">san luis obispo regional</auro-menuoption>
|
|
1672
|
+
<auro-menuoption value="bur" id="airport-bur" suggest="bur california burbank">hollywood burbank</auro-menuoption>
|
|
1673
|
+
<auro-menuoption value="msy" id="airport-msy" suggest="msy louisiana new orleans">louis armstrong international</auro-menuoption>
|
|
1674
|
+
<auro-menuoption value="pae" id="airport-pae" suggest="pae washington everett">paine field</auro-menuoption>
|
|
1675
|
+
<auro-menuoption value="cvg" id="airport-cvg" suggest="cvg ohio cincinnati">cincinnati northern kentucky international</auro-menuoption>
|
|
1676
|
+
<auro-menuoption value="yak" id="airport-yak" suggest="yak alaska yakutat">yakutat</auro-menuoption>
|
|
1677
|
+
<auro-menuoption value="pdx" id="airport-pdx" suggest="pdx oregon portland">portland international</auro-menuoption>
|
|
1678
|
+
<auro-menuoption value="anc" id="airport-anc" suggest="anc alaska anchorage">ted stevens</auro-menuoption>
|
|
1679
|
+
<auro-menuoption value="sea" id="airport-sea" suggest="sea washington seattle">seattle tacoma international</auro-menuoption>
|
|
1680
|
+
<auro-menuoption value="san" id="airport-san" suggest="san california san diego">san diego international</auro-menuoption>
|
|
1681
|
+
<auro-menuoption value="sat" id="airport-sat" suggest="sat texas san antonio">san antonio international</auro-menuoption>
|
|
1682
|
+
<auro-menuoption value="fat" id="airport-fat" suggest="fat california fresno">fresno yosemite international</auro-menuoption>
|
|
1683
|
+
<auro-menuoption value="aus" id="airport-aus" suggest="aus texas austin">austin bergstrom international</auro-menuoption>
|
|
1684
|
+
<auro-menuoption value="ord" id="airport-ord" suggest="ord illinois chicago">ohare international</auro-menuoption>
|
|
1685
|
+
<auro-menuoption value="gdl" id="airport-gdl" suggest="gdl jalisco guadalajara">guadalajara international</auro-menuoption>
|
|
1686
|
+
<auro-menuoption value="sjc" id="airport-sjc" suggest="sjc california san jose">san jose international</auro-menuoption>
|
|
1687
|
+
<auro-menuoption value="jnu" id="airport-jnu" suggest="jnu alaska juneau">juneau international</auro-menuoption>
|
|
1688
|
+
<auro-menuoption value="rdm" id="airport-rdm" suggest="rdm oregon redmond">roberts field</auro-menuoption>
|
|
1689
|
+
<auro-menuoption value="sts" id="airport-sts" suggest="sts california sonoma">charles m schulz</auro-menuoption>
|
|
1690
|
+
<auro-menuoption value="fai" id="airport-fai" suggest="fai alaska fairbanks">fairbanks international</auro-menuoption>
|
|
1691
|
+
<auro-menuoption value="rdu" id="airport-rdu" suggest="rdu north carolina raleigh">raleigh durham international</auro-menuoption>
|
|
1692
|
+
<auro-menuoption value="oma" id="airport-oma" suggest="oma nebraska omaha">eppley airfield</auro-menuoption>
|
|
1693
|
+
<auro-menuoption value="bzn" id="airport-bzn" suggest="bzn montana bozeman">bozeman yellowstone international</auro-menuoption>
|
|
1694
|
+
<auro-menuoption value="ont" id="airport-ont" suggest="ont california ontario">ontario international</auro-menuoption>
|
|
1695
|
+
<auro-menuoption value="ogg" id="airport-ogg" suggest="ogg hawaii maui">kahului international</auro-menuoption>
|
|
1696
|
+
<auro-menuoption value="sun" id="airport-sun" suggest="sun idaho sun valley">friedman memorial</auro-menuoption>
|
|
1697
|
+
<auro-menuoption value="mzt" id="airport-mzt" suggest="mzt sinaloa mazatlan">general rafael buelna international</auro-menuoption>
|
|
1698
|
+
<auro-menuoption value="dlg" id="airport-dlg" suggest="dlg alaska dillingham">dillingham</auro-menuoption>
|
|
1699
|
+
<auro-menuoption value="adq" id="airport-adq" suggest="adq alaska kodiak">kodiak</auro-menuoption>
|
|
1700
|
+
<auro-menuoption value="den" id="airport-den" suggest="den colorado denver">denver international</auro-menuoption>
|
|
1701
|
+
<auro-menuoption value="zlo" id="airport-zlo" suggest="zlo colima manzanillo">manzanillo international</auro-menuoption>
|
|
1702
|
+
<auro-menuoption value="sjd" id="airport-sjd" suggest="sjd baja california los cabos">los cabos international</auro-menuoption>
|
|
1703
|
+
<auro-menuoption value="elp" id="airport-elp" suggest="elp texas el paso">el paso international airport</auro-menuoption>
|
|
1704
|
+
<auro-menuoption value="atl" id="airport-atl" suggest="atl georgia atlanta">hartsfield jackson international</auro-menuoption>
|
|
1705
|
+
<auro-menuoption value="lax" id="airport-lax" suggest="lax california los angeles">los angeles international</auro-menuoption>
|
|
1706
|
+
<auro-menuoption value="rsw" id="airport-rsw" suggest="rsw florida fort myers">southwest florida international</auro-menuoption>
|
|
1707
|
+
<auro-menuoption value="cle" id="airport-cle" suggest="cle ohio cleveland">cleveland hopkins international airport</auro-menuoption>
|
|
1708
|
+
<auro-menuoption value="otz" id="airport-otz" suggest="otz alaska kotzebue">ralph wien memorial</auro-menuoption>
|
|
1709
|
+
<auro-menuoption value="bze" id="airport-bze" suggest="bze belize belize city">philip sw goldson international airport</auro-menuoption>
|
|
1710
|
+
<auro-menuoption value="eat" id="airport-eat" suggest="eat washington wenatchee">pangborn memorial</auro-menuoption>
|
|
1711
|
+
<auro-menuoption value="dtw" id="airport-dtw" suggest="dtw michigan detroit">detroit metropolitan</auro-menuoption>
|
|
1712
|
+
<auro-menuoption value="bet" id="airport-bet" suggest="bet alaska bethel">bethel</auro-menuoption>
|
|
1713
|
+
<auro-menuoption value="dca" id="airport-dca" suggest="dca district of columbia washington">ronald reagan national</auro-menuoption>
|
|
1714
|
+
<auro-menuoption value="rno" id="airport-rno" suggest="rno nevada reno">reno tahoe international</auro-menuoption>
|
|
1715
|
+
<auro-menuoption value="brw" id="airport-brw" suggest="brw alaska barrow">wiley post will rogers</auro-menuoption>
|
|
1716
|
+
<auro-menuoption value="mry" id="airport-mry" suggest="mry california monterey">monterey regional</auro-menuoption>
|
|
1717
|
+
<auro-menuoption value="hnl" id="airport-hnl" suggest="hnl hawaii oahu">honolulu international</auro-menuoption>
|
|
1718
|
+
<auro-menuoption value="okc" id="airport-okc" suggest="okc oklahoma oklahoma city">will rogers world</auro-menuoption>
|
|
1719
|
+
<auro-menuoption value="iad" id="airport-iad" suggest="iad virginia dulles">washington dulles international</auro-menuoption>
|
|
1720
|
+
<auro-menuoption value="mia" id="airport-mia" suggest="mia florida miami">miami international</auro-menuoption>
|
|
1721
|
+
<auro-menuoption value="bli" id="airport-bli" suggest="bli washington bellingham">bellingham international</auro-menuoption>
|
|
1722
|
+
<auro-menuoption value="hln" id="airport-hln" suggest="hln montana helena">helena regional</auro-menuoption>
|
|
1723
|
+
<auro-menuoption value="gtf" id="airport-gtf" suggest="gtf montana great falls">great falls international</auro-menuoption>
|
|
1724
|
+
<auro-menuoption value="zih" id="airport-zih" suggest="zih guerrero zihuatanejo">ixtapa zihuatanejo international</auro-menuoption>
|
|
1725
|
+
<auro-menuoption value="yyc" id="airport-yyc" suggest="yyc alberta calgary">calgary international</auro-menuoption>
|
|
1726
|
+
<auro-menuoption value="sna" id="airport-sna" suggest="sna california santa ana">john wayne</auro-menuoption>
|
|
1727
|
+
<auro-menuoption value="fll" id="airport-fll" suggest="fll florida fort lauderdale">fort lauderdale hollywood international</auro-menuoption>
|
|
1728
|
+
<auro-menuoption value="ewr" id="airport-ewr" suggest="ewr new jersey newark">newark liberty international</auro-menuoption>
|
|
1729
|
+
<auro-menuoption value="hdn" id="airport-hdn" suggest="hdn colorado steamboat springs">yampa valley regional</auro-menuoption>
|
|
1730
|
+
<auro-menuoption value="psc" id="airport-psc" suggest="psc washington pasco">tri cities</auro-menuoption>
|
|
1731
|
+
<auro-menuoption value="tus" id="airport-tus" suggest="tus arizona tucson">tucson international</auro-menuoption>
|
|
1732
|
+
<auro-menuoption value="abq" id="airport-abq" suggest="abq new mexico albuquerque">albuquerque international sunport</auro-menuoption>
|
|
1733
|
+
<auro-menuoption value="jfk" id="airport-jfk" suggest="jfk new york new york">john f kennedy international</auro-menuoption>
|
|
1734
|
+
<auro-menuoption value="yvr" id="airport-yvr" suggest="yvr british columbia vancouver">vancouver international</auro-menuoption>
|
|
1735
|
+
<auro-menuoption value="sjo" id="airport-sjo" suggest="sjo san jose alajuela province">juan santamaria international</auro-menuoption>
|
|
1736
|
+
<auro-menuoption value="las" id="airport-las" suggest="las nevada las vegas">harry reid international airport</auro-menuoption>
|
|
1737
|
+
<auro-menuoption value="lih" id="airport-lih" suggest="lih hawaii kauai">lihue international</auro-menuoption>
|
|
1738
|
+
<auro-menuoption value="mso" id="airport-mso" suggest="mso montana missoula">missoula international</auro-menuoption>
|
|
1739
|
+
<auro-menuoption value="alw" id="airport-alw" suggest="alw washington walla walla">walla walla regional</auro-menuoption>
|
|
1740
|
+
<auro-menuoption value="mke" id="airport-mke" suggest="mke wisconsin milwaukee">milwaukee mitchell international</auro-menuoption>
|
|
1741
|
+
<auro-menuoption value="eug" id="airport-eug" suggest="eug oregon eugene">mahlon sweet field</auro-menuoption>
|
|
1742
|
+
<auro-menuoption value="akn" id="airport-akn" suggest="akn alaska king salmon">king salmon</auro-menuoption>
|
|
1743
|
+
<auro-menuoption value="cun" id="airport-cun" suggest="cun quintana roo cancun">cancun international</auro-menuoption>
|
|
1744
|
+
<auro-menuoption value="rdd" id="airport-rdd" suggest="rdd california redding">redding municipal airport</auro-menuoption>
|
|
1745
|
+
<auro-menuoption value="mco" id="airport-mco" suggest="mco florida orlando">orlando international</auro-menuoption>
|
|
1746
|
+
<auro-menuoption value="slc" id="airport-slc" suggest="slc utah salt lake city">salt lake city international</auro-menuoption>
|
|
1747
|
+
<auro-menuoption value="phx" id="airport-phx" suggest="phx arizona phoenix">sky harbor international</auro-menuoption>
|
|
1748
|
+
<auro-menuoption value="bil" id="airport-bil" suggest="bil montana billings">billings logan international</auro-menuoption>
|
|
1749
|
+
<auro-menuoption value="gst" id="airport-gst" suggest="gst alaska gustavus">gustavus</auro-menuoption>
|
|
1750
|
+
<auro-menuoption value="adk" id="airport-adk" suggest="adk alaska adak">adak</auro-menuoption>
|
|
1751
|
+
<auro-menuoption value="cvg" id="airport-cvg" suggest="cvg kentucky hebron">cincinnati northern kentucky international</auro-menuoption>
|
|
1752
|
+
<auro-menuoption value="jac" id="airport-jac" suggest="jac wyoming jackson">jackson hole airport</auro-menuoption>
|
|
1753
|
+
<auro-menuoption value="cmh" id="airport-cmh" suggest="cmh ohio columbus">john glenn columbus international</auro-menuoption>
|
|
1754
|
+
<auro-menuoption value="yyj" id="airport-yyj" suggest="yyj british columbia victoria">victoria international</auro-menuoption>
|
|
1755
|
+
<auro-menuoption value="chs" id="airport-chs" suggest="chs south carolina charleston">charleston international</auro-menuoption>
|
|
1756
|
+
<auro-menuoption value="iah" id="airport-iah" suggest="iah texas houston">george bush intercontinental</auro-menuoption>
|
|
1757
|
+
<auro-menuoption static nomatch>Unknown airport... </auro-menuoption>
|
|
1758
|
+
</auro-menu>
|
|
1759
|
+
</auro-combobox>
|
|
1760
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1805
1761
|
</div>
|
|
1806
1762
|
<auro-accordion alignRight>
|
|
1807
|
-
|
|
1763
|
+
<span slot="trigger">See code</span>
|
|
1808
1764
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/airports.html) -->
|
|
1809
1765
|
<!-- The below code snippet is automatically added from ./../apiExamples/airports.html -->
|
|
1810
1766
|
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1943
|
-
</auro-combobox>
|
|
1944
|
-
```
|
|
1767
|
+
<pre class="language-html"><code class="language-html"><auro-combobox>
|
|
1768
|
+
<span slot="bib.fullscreen.headline">Airports</span>
|
|
1769
|
+
<span slot="label">Name</span>
|
|
1770
|
+
<auro-menu>
|
|
1771
|
+
<auro-menuoption value="fca" id="airport-fca" suggest="fca montana kalispell">glacier park international</auro-menuoption>
|
|
1772
|
+
<auro-menuoption value="sfo" id="airport-sfo" suggest="sfo california san francisco">san francisco international</auro-menuoption>
|
|
1773
|
+
<auro-menuoption value="boi" id="airport-boi" suggest="boi idaho boise">gowen field</auro-menuoption>
|
|
1774
|
+
<auro-menuoption value="stl" id="airport-stl" suggest="stl missouri st louis">lambert st louis international</auro-menuoption>
|
|
1775
|
+
<auro-menuoption value="ylw" id="airport-ylw" suggest="ylw british columbia kelowna">kelowna international</auro-menuoption>
|
|
1776
|
+
<auro-menuoption value="ykm" id="airport-ykm" suggest="ykm washington yakima">yakima air terminal</auro-menuoption>
|
|
1777
|
+
<auro-menuoption value="puw" id="airport-puw" suggest="puw washington pullman">pullman moscow regional</auro-menuoption>
|
|
1778
|
+
<auro-menuoption value="yeg" id="airport-yeg" suggest="yeg alberta edmonton">edmonton international</auro-menuoption>
|
|
1779
|
+
<auro-menuoption value="tpa" id="airport-tpa" suggest="tpa florida tampa">tampa international</auro-menuoption>
|
|
1780
|
+
<auro-menuoption value="msp" id="airport-msp" suggest="msp minnesota minneapolis">minneapolis st paul international</auro-menuoption>
|
|
1781
|
+
<auro-menuoption value="ida" id="airport-ida" suggest="ida idaho idaho falls">idaho falls regional airport</auro-menuoption>
|
|
1782
|
+
<auro-menuoption value="mfr" id="airport-mfr" suggest="mfr oregon medford">rogue valley international</auro-menuoption>
|
|
1783
|
+
<auro-menuoption value="psp" id="airport-psp" suggest="psp california palm springs">palm springs international</auro-menuoption>
|
|
1784
|
+
<auro-menuoption value="lir" id="airport-lir" suggest="lir guanacaste liberia">guanacaste airport</auro-menuoption>
|
|
1785
|
+
<auro-menuoption value="oak" id="airport-oak" suggest="oak california oakland">oakland international</auro-menuoption>
|
|
1786
|
+
<auro-menuoption value="bos" id="airport-bos" suggest="bos massachusetts boston">logan international</auro-menuoption>
|
|
1787
|
+
<auro-menuoption value="bwi" id="airport-bwi" suggest="bwi maryland baltimore">thurgood marshall international</auro-menuoption>
|
|
1788
|
+
<auro-menuoption value="dal" id="airport-dal" suggest="dal texas dallas">dallas love field</auro-menuoption>
|
|
1789
|
+
<auro-menuoption value="sba" id="airport-sba" suggest="sba california santa barbara">santa barbara municipal</auro-menuoption>
|
|
1790
|
+
<auro-menuoption value="mci" id="airport-mci" suggest="mci missouri kansas city">kansas city international</auro-menuoption>
|
|
1791
|
+
<auro-menuoption value="koa" id="airport-koa" suggest="koa hawaii kona">kona international</auro-menuoption>
|
|
1792
|
+
<auro-menuoption value="pvr" id="airport-pvr" suggest="pvr jalisco puerto vallarta">licenciado gustavo diaz ordaz international</auro-menuoption>
|
|
1793
|
+
<auro-menuoption value="wrg" id="airport-wrg" suggest="wrg alaska wrangell">wrangell</auro-menuoption>
|
|
1794
|
+
<auro-menuoption value="scc" id="airport-scc" suggest="scc alaska prudhoe bay">deadhorse</auro-menuoption>
|
|
1795
|
+
<auro-menuoption value="lto" id="airport-lto" suggest="lto baja california loreto">loreto international</auro-menuoption>
|
|
1796
|
+
<auro-menuoption value="ome" id="airport-ome" suggest="ome alaska nome">nome</auro-menuoption>
|
|
1797
|
+
<auro-menuoption value="ict" id="airport-ict" suggest="ict kansas wichita">dwight d eisenhower national</auro-menuoption>
|
|
1798
|
+
<auro-menuoption value="phl" id="airport-phl" suggest="phl pennsylvania philadelphia">philadelphia international</auro-menuoption>
|
|
1799
|
+
<auro-menuoption value="dfw" id="airport-dfw" suggest="dfw texas dallas">dallas fort worth international</auro-menuoption>
|
|
1800
|
+
<auro-menuoption value="ind" id="airport-ind" suggest="ind indiana indianapolis">indianapolis international</auro-menuoption>
|
|
1801
|
+
<auro-menuoption value="smf" id="airport-smf" suggest="smf california sacramento">sacramento international</auro-menuoption>
|
|
1802
|
+
<auro-menuoption value="sit" id="airport-sit" suggest="sit alaska sitka">rocky gutierrez</auro-menuoption>
|
|
1803
|
+
<auro-menuoption value="dut" id="airport-dut" suggest="dut alaska dutch harbor">unalaska</auro-menuoption>
|
|
1804
|
+
<auro-menuoption value="cdv" id="airport-cdv" suggest="cdv alaska cordova">merle mudhole smith</auro-menuoption>
|
|
1805
|
+
<auro-menuoption value="psg" id="airport-psg" suggest="psg alaska petersburg">james a johnson</auro-menuoption>
|
|
1806
|
+
<auro-menuoption value="bna" id="airport-bna" suggest="bna tennessee nashville">nashville international</auro-menuoption>
|
|
1807
|
+
<auro-menuoption value="geg" id="airport-geg" suggest="geg washington spokane">spokane international</auro-menuoption>
|
|
1808
|
+
<auro-menuoption value="ktn" id="airport-ktn" suggest="ktn alaska ketchikan">ketchikan international</auro-menuoption>
|
|
1809
|
+
<auro-menuoption value="pit" id="airport-pit" suggest="pit pennsylvania pittsburgh">pittsburgh international</auro-menuoption>
|
|
1810
|
+
<auro-menuoption value="sbp" id="airport-sbp" suggest="sbp california san luis obispo">san luis obispo regional</auro-menuoption>
|
|
1811
|
+
<auro-menuoption value="bur" id="airport-bur" suggest="bur california burbank">hollywood burbank</auro-menuoption>
|
|
1812
|
+
<auro-menuoption value="msy" id="airport-msy" suggest="msy louisiana new orleans">louis armstrong international</auro-menuoption>
|
|
1813
|
+
<auro-menuoption value="pae" id="airport-pae" suggest="pae washington everett">paine field</auro-menuoption>
|
|
1814
|
+
<auro-menuoption value="cvg" id="airport-cvg" suggest="cvg ohio cincinnati">cincinnati northern kentucky international</auro-menuoption>
|
|
1815
|
+
<auro-menuoption value="yak" id="airport-yak" suggest="yak alaska yakutat">yakutat</auro-menuoption>
|
|
1816
|
+
<auro-menuoption value="pdx" id="airport-pdx" suggest="pdx oregon portland">portland international</auro-menuoption>
|
|
1817
|
+
<auro-menuoption value="anc" id="airport-anc" suggest="anc alaska anchorage">ted stevens</auro-menuoption>
|
|
1818
|
+
<auro-menuoption value="sea" id="airport-sea" suggest="sea washington seattle">seattle tacoma international</auro-menuoption>
|
|
1819
|
+
<auro-menuoption value="san" id="airport-san" suggest="san california san diego">san diego international</auro-menuoption>
|
|
1820
|
+
<auro-menuoption value="sat" id="airport-sat" suggest="sat texas san antonio">san antonio international</auro-menuoption>
|
|
1821
|
+
<auro-menuoption value="fat" id="airport-fat" suggest="fat california fresno">fresno yosemite international</auro-menuoption>
|
|
1822
|
+
<auro-menuoption value="aus" id="airport-aus" suggest="aus texas austin">austin bergstrom international</auro-menuoption>
|
|
1823
|
+
<auro-menuoption value="ord" id="airport-ord" suggest="ord illinois chicago">ohare international</auro-menuoption>
|
|
1824
|
+
<auro-menuoption value="gdl" id="airport-gdl" suggest="gdl jalisco guadalajara">guadalajara international</auro-menuoption>
|
|
1825
|
+
<auro-menuoption value="sjc" id="airport-sjc" suggest="sjc california san jose">san jose international</auro-menuoption>
|
|
1826
|
+
<auro-menuoption value="jnu" id="airport-jnu" suggest="jnu alaska juneau">juneau international</auro-menuoption>
|
|
1827
|
+
<auro-menuoption value="rdm" id="airport-rdm" suggest="rdm oregon redmond">roberts field</auro-menuoption>
|
|
1828
|
+
<auro-menuoption value="sts" id="airport-sts" suggest="sts california sonoma">charles m schulz</auro-menuoption>
|
|
1829
|
+
<auro-menuoption value="fai" id="airport-fai" suggest="fai alaska fairbanks">fairbanks international</auro-menuoption>
|
|
1830
|
+
<auro-menuoption value="rdu" id="airport-rdu" suggest="rdu north carolina raleigh">raleigh durham international</auro-menuoption>
|
|
1831
|
+
<auro-menuoption value="oma" id="airport-oma" suggest="oma nebraska omaha">eppley airfield</auro-menuoption>
|
|
1832
|
+
<auro-menuoption value="bzn" id="airport-bzn" suggest="bzn montana bozeman">bozeman yellowstone international</auro-menuoption>
|
|
1833
|
+
<auro-menuoption value="ont" id="airport-ont" suggest="ont california ontario">ontario international</auro-menuoption>
|
|
1834
|
+
<auro-menuoption value="ogg" id="airport-ogg" suggest="ogg hawaii maui">kahului international</auro-menuoption>
|
|
1835
|
+
<auro-menuoption value="sun" id="airport-sun" suggest="sun idaho sun valley">friedman memorial</auro-menuoption>
|
|
1836
|
+
<auro-menuoption value="mzt" id="airport-mzt" suggest="mzt sinaloa mazatlan">general rafael buelna international</auro-menuoption>
|
|
1837
|
+
<auro-menuoption value="dlg" id="airport-dlg" suggest="dlg alaska dillingham">dillingham</auro-menuoption>
|
|
1838
|
+
<auro-menuoption value="adq" id="airport-adq" suggest="adq alaska kodiak">kodiak</auro-menuoption>
|
|
1839
|
+
<auro-menuoption value="den" id="airport-den" suggest="den colorado denver">denver international</auro-menuoption>
|
|
1840
|
+
<auro-menuoption value="zlo" id="airport-zlo" suggest="zlo colima manzanillo">manzanillo international</auro-menuoption>
|
|
1841
|
+
<auro-menuoption value="sjd" id="airport-sjd" suggest="sjd baja california los cabos">los cabos international</auro-menuoption>
|
|
1842
|
+
<auro-menuoption value="elp" id="airport-elp" suggest="elp texas el paso">el paso international airport</auro-menuoption>
|
|
1843
|
+
<auro-menuoption value="atl" id="airport-atl" suggest="atl georgia atlanta">hartsfield jackson international</auro-menuoption>
|
|
1844
|
+
<auro-menuoption value="lax" id="airport-lax" suggest="lax california los angeles">los angeles international</auro-menuoption>
|
|
1845
|
+
<auro-menuoption value="rsw" id="airport-rsw" suggest="rsw florida fort myers">southwest florida international</auro-menuoption>
|
|
1846
|
+
<auro-menuoption value="cle" id="airport-cle" suggest="cle ohio cleveland">cleveland hopkins international airport</auro-menuoption>
|
|
1847
|
+
<auro-menuoption value="otz" id="airport-otz" suggest="otz alaska kotzebue">ralph wien memorial</auro-menuoption>
|
|
1848
|
+
<auro-menuoption value="bze" id="airport-bze" suggest="bze belize belize city">philip sw goldson international airport</auro-menuoption>
|
|
1849
|
+
<auro-menuoption value="eat" id="airport-eat" suggest="eat washington wenatchee">pangborn memorial</auro-menuoption>
|
|
1850
|
+
<auro-menuoption value="dtw" id="airport-dtw" suggest="dtw michigan detroit">detroit metropolitan</auro-menuoption>
|
|
1851
|
+
<auro-menuoption value="bet" id="airport-bet" suggest="bet alaska bethel">bethel</auro-menuoption>
|
|
1852
|
+
<auro-menuoption value="dca" id="airport-dca" suggest="dca district of columbia washington">ronald reagan national</auro-menuoption>
|
|
1853
|
+
<auro-menuoption value="rno" id="airport-rno" suggest="rno nevada reno">reno tahoe international</auro-menuoption>
|
|
1854
|
+
<auro-menuoption value="brw" id="airport-brw" suggest="brw alaska barrow">wiley post will rogers</auro-menuoption>
|
|
1855
|
+
<auro-menuoption value="mry" id="airport-mry" suggest="mry california monterey">monterey regional</auro-menuoption>
|
|
1856
|
+
<auro-menuoption value="hnl" id="airport-hnl" suggest="hnl hawaii oahu">honolulu international</auro-menuoption>
|
|
1857
|
+
<auro-menuoption value="okc" id="airport-okc" suggest="okc oklahoma oklahoma city">will rogers world</auro-menuoption>
|
|
1858
|
+
<auro-menuoption value="iad" id="airport-iad" suggest="iad virginia dulles">washington dulles international</auro-menuoption>
|
|
1859
|
+
<auro-menuoption value="mia" id="airport-mia" suggest="mia florida miami">miami international</auro-menuoption>
|
|
1860
|
+
<auro-menuoption value="bli" id="airport-bli" suggest="bli washington bellingham">bellingham international</auro-menuoption>
|
|
1861
|
+
<auro-menuoption value="hln" id="airport-hln" suggest="hln montana helena">helena regional</auro-menuoption>
|
|
1862
|
+
<auro-menuoption value="gtf" id="airport-gtf" suggest="gtf montana great falls">great falls international</auro-menuoption>
|
|
1863
|
+
<auro-menuoption value="zih" id="airport-zih" suggest="zih guerrero zihuatanejo">ixtapa zihuatanejo international</auro-menuoption>
|
|
1864
|
+
<auro-menuoption value="yyc" id="airport-yyc" suggest="yyc alberta calgary">calgary international</auro-menuoption>
|
|
1865
|
+
<auro-menuoption value="sna" id="airport-sna" suggest="sna california santa ana">john wayne</auro-menuoption>
|
|
1866
|
+
<auro-menuoption value="fll" id="airport-fll" suggest="fll florida fort lauderdale">fort lauderdale hollywood international</auro-menuoption>
|
|
1867
|
+
<auro-menuoption value="ewr" id="airport-ewr" suggest="ewr new jersey newark">newark liberty international</auro-menuoption>
|
|
1868
|
+
<auro-menuoption value="hdn" id="airport-hdn" suggest="hdn colorado steamboat springs">yampa valley regional</auro-menuoption>
|
|
1869
|
+
<auro-menuoption value="psc" id="airport-psc" suggest="psc washington pasco">tri cities</auro-menuoption>
|
|
1870
|
+
<auro-menuoption value="tus" id="airport-tus" suggest="tus arizona tucson">tucson international</auro-menuoption>
|
|
1871
|
+
<auro-menuoption value="abq" id="airport-abq" suggest="abq new mexico albuquerque">albuquerque international sunport</auro-menuoption>
|
|
1872
|
+
<auro-menuoption value="jfk" id="airport-jfk" suggest="jfk new york new york">john f kennedy international</auro-menuoption>
|
|
1873
|
+
<auro-menuoption value="yvr" id="airport-yvr" suggest="yvr british columbia vancouver">vancouver international</auro-menuoption>
|
|
1874
|
+
<auro-menuoption value="sjo" id="airport-sjo" suggest="sjo san jose alajuela province">juan santamaria international</auro-menuoption>
|
|
1875
|
+
<auro-menuoption value="las" id="airport-las" suggest="las nevada las vegas">harry reid international airport</auro-menuoption>
|
|
1876
|
+
<auro-menuoption value="lih" id="airport-lih" suggest="lih hawaii kauai">lihue international</auro-menuoption>
|
|
1877
|
+
<auro-menuoption value="mso" id="airport-mso" suggest="mso montana missoula">missoula international</auro-menuoption>
|
|
1878
|
+
<auro-menuoption value="alw" id="airport-alw" suggest="alw washington walla walla">walla walla regional</auro-menuoption>
|
|
1879
|
+
<auro-menuoption value="mke" id="airport-mke" suggest="mke wisconsin milwaukee">milwaukee mitchell international</auro-menuoption>
|
|
1880
|
+
<auro-menuoption value="eug" id="airport-eug" suggest="eug oregon eugene">mahlon sweet field</auro-menuoption>
|
|
1881
|
+
<auro-menuoption value="akn" id="airport-akn" suggest="akn alaska king salmon">king salmon</auro-menuoption>
|
|
1882
|
+
<auro-menuoption value="cun" id="airport-cun" suggest="cun quintana roo cancun">cancun international</auro-menuoption>
|
|
1883
|
+
<auro-menuoption value="rdd" id="airport-rdd" suggest="rdd california redding">redding municipal airport</auro-menuoption>
|
|
1884
|
+
<auro-menuoption value="mco" id="airport-mco" suggest="mco florida orlando">orlando international</auro-menuoption>
|
|
1885
|
+
<auro-menuoption value="slc" id="airport-slc" suggest="slc utah salt lake city">salt lake city international</auro-menuoption>
|
|
1886
|
+
<auro-menuoption value="phx" id="airport-phx" suggest="phx arizona phoenix">sky harbor international</auro-menuoption>
|
|
1887
|
+
<auro-menuoption value="bil" id="airport-bil" suggest="bil montana billings">billings logan international</auro-menuoption>
|
|
1888
|
+
<auro-menuoption value="gst" id="airport-gst" suggest="gst alaska gustavus">gustavus</auro-menuoption>
|
|
1889
|
+
<auro-menuoption value="adk" id="airport-adk" suggest="adk alaska adak">adak</auro-menuoption>
|
|
1890
|
+
<auro-menuoption value="cvg" id="airport-cvg" suggest="cvg kentucky hebron">cincinnati northern kentucky international</auro-menuoption>
|
|
1891
|
+
<auro-menuoption value="jac" id="airport-jac" suggest="jac wyoming jackson">jackson hole airport</auro-menuoption>
|
|
1892
|
+
<auro-menuoption value="cmh" id="airport-cmh" suggest="cmh ohio columbus">john glenn columbus international</auro-menuoption>
|
|
1893
|
+
<auro-menuoption value="yyj" id="airport-yyj" suggest="yyj british columbia victoria">victoria international</auro-menuoption>
|
|
1894
|
+
<auro-menuoption value="chs" id="airport-chs" suggest="chs south carolina charleston">charleston international</auro-menuoption>
|
|
1895
|
+
<auro-menuoption value="iah" id="airport-iah" suggest="iah texas houston">george bush intercontinental</auro-menuoption>
|
|
1896
|
+
<auro-menuoption static nomatch>Unknown airport... </auro-menuoption>
|
|
1897
|
+
</auro-menu>
|
|
1898
|
+
</auro-combobox></code></pre>
|
|
1945
1899
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1946
1900
|
</auro-accordion>
|
|
1947
1901
|
|
|
@@ -1957,72 +1911,68 @@ Can be used in the following ways:
|
|
|
1957
1911
|
Note: using a value that does not match a menu option will reset the combobox value to undefined.
|
|
1958
1912
|
|
|
1959
1913
|
<div class="exampleWrapper">
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
<auro-button id="valueValidExampleBtn">Set to an existing option</auro-button>
|
|
1963
|
-
<auro-button id="valueInvalidExampleBtn">Set to custom value</auro-button>
|
|
1964
|
-
<auro-button id="valueUndefinedExampleBtn">Reset</auro-button>
|
|
1965
|
-
<br/><br/>
|
|
1966
|
-
<auro-combobox id="valueExample">
|
|
1967
|
-
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1968
|
-
<span slot="label">Name</span>
|
|
1969
|
-
<auro-menu>
|
|
1970
|
-
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1971
|
-
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1972
|
-
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1973
|
-
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1974
|
-
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1975
|
-
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
1976
|
-
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1977
|
-
</auro-menu>
|
|
1978
|
-
</auro-combobox>
|
|
1979
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1980
|
-
</div>
|
|
1981
|
-
<auro-accordion alignRight>
|
|
1982
|
-
<span slot="trigger">See code</span>
|
|
1983
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/value.html) -->
|
|
1984
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/value.html -->
|
|
1985
|
-
|
|
1986
|
-
```html
|
|
1914
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/value.html) -->
|
|
1915
|
+
<!-- The below content is automatically added from ./../apiExamples/value.html -->
|
|
1987
1916
|
<auro-button id="valueValidExampleBtn">Set to an existing option</auro-button>
|
|
1988
1917
|
<auro-button id="valueInvalidExampleBtn">Set to custom value</auro-button>
|
|
1989
1918
|
<auro-button id="valueUndefinedExampleBtn">Reset</auro-button>
|
|
1990
1919
|
<br/><br/>
|
|
1991
1920
|
<auro-combobox id="valueExample">
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
</auro-combobox>
|
|
2004
|
-
|
|
1921
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1922
|
+
<span slot="label">Name</span>
|
|
1923
|
+
<auro-menu>
|
|
1924
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1925
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1926
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1927
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1928
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1929
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
1930
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1931
|
+
</auro-menu>
|
|
1932
|
+
</auro-combobox>
|
|
1933
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1934
|
+
</div>
|
|
1935
|
+
<auro-accordion alignRight>
|
|
1936
|
+
<span slot="trigger">See code</span>
|
|
1937
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/value.html) -->
|
|
1938
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/value.html -->
|
|
1939
|
+
|
|
1940
|
+
<pre class="language-html"><code class="language-html"><auro-button id="valueValidExampleBtn">Set to an existing option</auro-button>
|
|
1941
|
+
<auro-button id="valueInvalidExampleBtn">Set to custom value</auro-button>
|
|
1942
|
+
<auro-button id="valueUndefinedExampleBtn">Reset</auro-button>
|
|
1943
|
+
<br/><br/>
|
|
1944
|
+
<auro-combobox id="valueExample">
|
|
1945
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1946
|
+
<span slot="label">Name</span>
|
|
1947
|
+
<auro-menu>
|
|
1948
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1949
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1950
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1951
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1952
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
1953
|
+
<auro-menuoption value="Prefer Alaska" id="option-5">Prefer Alaska</auro-menuoption>
|
|
1954
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
1955
|
+
</auro-menu>
|
|
1956
|
+
</auro-combobox></code></pre>
|
|
2005
1957
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2006
1958
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/value.js) -->
|
|
2007
1959
|
<!-- The below code snippet is automatically added from ./../apiExamples/value.js -->
|
|
2008
1960
|
|
|
2009
|
-
|
|
2010
|
-
export function valueExample() {
|
|
1961
|
+
<pre class="language-js"><code class="language-js">export function valueExample() {
|
|
2011
1962
|
const valueExample = document.querySelector('#valueExample');
|
|
2012
|
-
|
|
2013
|
-
document.querySelector('#valueValidExampleBtn').addEventListener('click', ()
|
|
1963
|
+
|
|
1964
|
+
document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
|
|
2014
1965
|
valueExample.value = 'Oranges';
|
|
2015
1966
|
});
|
|
2016
|
-
|
|
2017
|
-
document.querySelector('#valueInvalidExampleBtn').addEventListener('click', ()
|
|
1967
|
+
|
|
1968
|
+
document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
|
|
2018
1969
|
valueExample.value = 'Dragon Fruit';
|
|
2019
1970
|
});
|
|
2020
|
-
|
|
2021
|
-
document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', ()
|
|
1971
|
+
|
|
1972
|
+
document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {
|
|
2022
1973
|
valueExample.value = undefined;
|
|
2023
1974
|
});
|
|
2024
|
-
}
|
|
2025
|
-
```
|
|
1975
|
+
}</code></pre>
|
|
2026
1976
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2027
1977
|
</auro-accordion>
|
|
2028
1978
|
|
|
@@ -2031,69 +1981,65 @@ export function valueExample() {
|
|
|
2031
1981
|
Example use of component within an `auro-dialog`.
|
|
2032
1982
|
|
|
2033
1983
|
<div class="exampleWrapper">
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
1984
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-dialog.html) -->
|
|
1985
|
+
<!-- The below content is automatically added from ./../apiExamples/in-dialog.html -->
|
|
1986
|
+
<div>
|
|
1987
|
+
<auro-button id="combobox-dialog-opener">Combobox in Dialog</auro-button>
|
|
1988
|
+
<auro-dialog id="combobox-dialog">
|
|
1989
|
+
<span slot="header">Combobox in Dialog</span>
|
|
1990
|
+
<div slot="content">
|
|
1991
|
+
<auro-combobox id="focusExample">
|
|
1992
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
1993
|
+
<span slot="label">Name</span>
|
|
1994
|
+
<auro-menu>
|
|
1995
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
1996
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
1997
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
1998
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
1999
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
2000
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
2001
|
+
</auro-menu>
|
|
2002
|
+
</auro-combobox>
|
|
2003
|
+
</div>
|
|
2004
|
+
</auro-dialog>
|
|
2005
|
+
</div>
|
|
2006
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2057
2007
|
</div>
|
|
2058
2008
|
<auro-accordion alignRight>
|
|
2059
|
-
|
|
2009
|
+
<span slot="trigger">See code</span>
|
|
2060
2010
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.html) -->
|
|
2061
2011
|
<!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.html -->
|
|
2062
2012
|
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
</div>
|
|
2084
|
-
```
|
|
2013
|
+
<pre class="language-html"><code class="language-html"><div>
|
|
2014
|
+
<auro-button id="combobox-dialog-opener">Combobox in Dialog</auro-button>
|
|
2015
|
+
<auro-dialog id="combobox-dialog">
|
|
2016
|
+
<span slot="header">Combobox in Dialog</span>
|
|
2017
|
+
<div slot="content">
|
|
2018
|
+
<auro-combobox id="focusExample">
|
|
2019
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
2020
|
+
<span slot="label">Name</span>
|
|
2021
|
+
<auro-menu>
|
|
2022
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
2023
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
2024
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
2025
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
2026
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
2027
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
2028
|
+
</auro-menu>
|
|
2029
|
+
</auro-combobox>
|
|
2030
|
+
</div>
|
|
2031
|
+
</auro-dialog>
|
|
2032
|
+
</div></code></pre>
|
|
2085
2033
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2086
2034
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.js) -->
|
|
2087
2035
|
<!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.js -->
|
|
2088
2036
|
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
document.querySelector("#combobox-dialog-opener").addEventListener("click", () => {
|
|
2037
|
+
<pre class="language-js"><code class="language-js">export function inDialogExample() {
|
|
2038
|
+
document.querySelector("#combobox-dialog-opener").addEventListener("click", () => {
|
|
2092
2039
|
const dialog = document.querySelector("#combobox-dialog");
|
|
2093
2040
|
dialog.open = true;
|
|
2094
2041
|
});
|
|
2095
|
-
}
|
|
2096
|
-
```
|
|
2042
|
+
};</code></pre>
|
|
2097
2043
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2098
2044
|
</auro-accordion>
|
|
2099
2045
|
|
|
@@ -2102,64 +2048,61 @@ export function inDialogExample() {
|
|
|
2102
2048
|
Example use of component within an `auro-drawer`.
|
|
2103
2049
|
|
|
2104
2050
|
<div class="exampleWrapper">
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2051
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-drawer.html) -->
|
|
2052
|
+
<!-- The below content is automatically added from ./../apiExamples/in-drawer.html -->
|
|
2053
|
+
<div>
|
|
2054
|
+
<auro-button id="combobox-drawer-opener">Combobox in Drawer</auro-button>
|
|
2055
|
+
<auro-drawer id="combobox-drawer">
|
|
2056
|
+
<span slot="header">Combobox in Drawer</span>
|
|
2057
|
+
<div slot="content">
|
|
2058
|
+
<auro-combobox>
|
|
2059
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
2060
|
+
<span slot="label">Name</span>
|
|
2061
|
+
<auro-menu>
|
|
2062
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
2063
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
2064
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
2065
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
2066
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
2067
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
2068
|
+
</auro-menu>
|
|
2069
|
+
</auro-combobox>
|
|
2070
|
+
</div>
|
|
2071
|
+
</auro-drawer>
|
|
2072
|
+
</div>
|
|
2073
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2128
2074
|
</div>
|
|
2129
2075
|
<auro-accordion alignRight>
|
|
2130
|
-
|
|
2076
|
+
<span slot="trigger">See code</span>
|
|
2131
2077
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.html) -->
|
|
2132
2078
|
<!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.html -->
|
|
2133
2079
|
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
</div>
|
|
2155
|
-
```
|
|
2080
|
+
<pre class="language-html"><code class="language-html"><div>
|
|
2081
|
+
<auro-button id="combobox-drawer-opener">Combobox in Drawer</auro-button>
|
|
2082
|
+
<auro-drawer id="combobox-drawer">
|
|
2083
|
+
<span slot="header">Combobox in Drawer</span>
|
|
2084
|
+
<div slot="content">
|
|
2085
|
+
<auro-combobox>
|
|
2086
|
+
<span slot="bib.fullscreen.headline">Bib Header</span>
|
|
2087
|
+
<span slot="label">Name</span>
|
|
2088
|
+
<auro-menu>
|
|
2089
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
2090
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
2091
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
2092
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
2093
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
2094
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
2095
|
+
</auro-menu>
|
|
2096
|
+
</auro-combobox>
|
|
2097
|
+
</div>
|
|
2098
|
+
</auro-drawer>
|
|
2099
|
+
</div></code></pre>
|
|
2156
2100
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2157
2101
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.js) -->
|
|
2158
2102
|
<!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.js -->
|
|
2159
2103
|
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
document.querySelector("#combobox-drawer-opener").addEventListener("click", () => {
|
|
2104
|
+
<pre class="language-js"><code class="language-js">export function inDrawerExample() {
|
|
2105
|
+
document.querySelector("#combobox-drawer-opener").addEventListener("click", () => {
|
|
2163
2106
|
const drawer = document.querySelector("#combobox-drawer");
|
|
2164
2107
|
if (drawer.hasAttribute('open')) {
|
|
2165
2108
|
drawer.removeAttribute('open');
|
|
@@ -2167,8 +2110,7 @@ export function inDrawerExample() {
|
|
|
2167
2110
|
drawer.setAttribute('open', true);
|
|
2168
2111
|
}
|
|
2169
2112
|
});
|
|
2170
|
-
}
|
|
2171
|
-
```
|
|
2113
|
+
};</code></pre>
|
|
2172
2114
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2173
2115
|
</auro-accordion>
|
|
2174
2116
|
|
|
@@ -2177,49 +2119,45 @@ export function inDrawerExample() {
|
|
|
2177
2119
|
This example demonstrates a static menu option that will always appears regardless of the suggestion filtering performed. In this example "Add new address" will always be a displayed menu option.
|
|
2178
2120
|
|
|
2179
2121
|
<div class="exampleWrapper">
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
|
|
2122
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/persistent.html) -->
|
|
2123
|
+
<!-- The below content is automatically added from ./../apiExamples/persistent.html -->
|
|
2124
|
+
<auro-combobox id="persistent">
|
|
2125
|
+
<span slot="bib.fullscreen.headline">Address Combobox</span>
|
|
2126
|
+
<span slot="label">Address</span>
|
|
2127
|
+
<auro-menu id="customEvent">
|
|
2128
|
+
<auro-menuoption value="555 Address Way Seattle, WA 99999">555 Address Way Seattle, WA 99999</auro-menuoption>
|
|
2129
|
+
<auro-menuoption value="333 Some Street Seattle, WA 99999">333 Some Street Seattle, WA 99999</auro-menuoption>
|
|
2130
|
+
<auro-menuoption event="addNewAddress" persistent>Add new address</auro-menuoption>
|
|
2131
|
+
</auro-menu>
|
|
2132
|
+
</auro-combobox>
|
|
2133
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2192
2134
|
</div>
|
|
2193
2135
|
<auro-accordion alignRight>
|
|
2194
|
-
|
|
2136
|
+
<span slot="trigger">See code</span>
|
|
2195
2137
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/persistent.html) -->
|
|
2196
2138
|
<!-- The below code snippet is automatically added from ./../apiExamples/persistent.html -->
|
|
2197
2139
|
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
</auro-combobox>
|
|
2208
|
-
```
|
|
2140
|
+
<pre class="language-html"><code class="language-html"><auro-combobox id="persistent">
|
|
2141
|
+
<span slot="bib.fullscreen.headline">Address Combobox</span>
|
|
2142
|
+
<span slot="label">Address</span>
|
|
2143
|
+
<auro-menu id="customEvent">
|
|
2144
|
+
<auro-menuoption value="555 Address Way Seattle, WA 99999">555 Address Way Seattle, WA 99999</auro-menuoption>
|
|
2145
|
+
<auro-menuoption value="333 Some Street Seattle, WA 99999">333 Some Street Seattle, WA 99999</auro-menuoption>
|
|
2146
|
+
<auro-menuoption event="addNewAddress" persistent>Add new address</auro-menuoption>
|
|
2147
|
+
</auro-menu>
|
|
2148
|
+
</auro-combobox></code></pre>
|
|
2209
2149
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2210
2150
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/persistent.js) -->
|
|
2211
2151
|
<!-- The below code snippet is automatically added from ./../apiExamples/persistent.js -->
|
|
2212
2152
|
|
|
2213
|
-
|
|
2214
|
-
export function persistentExample() {
|
|
2153
|
+
<pre class="language-js"><code class="language-js">export function persistentExample() {
|
|
2215
2154
|
const persistentExample = document.querySelector('#persistent');
|
|
2216
|
-
|
|
2217
|
-
persistentExample.addEventListener('addNewAddress', ()
|
|
2155
|
+
|
|
2156
|
+
persistentExample.addEventListener('addNewAddress', () => {
|
|
2218
2157
|
console.warn('addNewAddress event fired');
|
|
2219
2158
|
alert(`addNewAddress event fired`);
|
|
2220
2159
|
});
|
|
2221
|
-
}
|
|
2222
|
-
```
|
|
2160
|
+
}</code></pre>
|
|
2223
2161
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2224
2162
|
</auro-accordion>
|
|
2225
2163
|
|
|
@@ -2228,135 +2166,125 @@ export function persistentExample() {
|
|
|
2228
2166
|
This example illustrates using a JavaScript function attached to an auro-button component click event to swap the values of two `auro-combobox` elements. An example of this use case would be swapping the departure and arrival airports in a flight search form.
|
|
2229
2167
|
|
|
2230
2168
|
<div class="exampleWrapper">
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
}
|
|
2282
|
-
</style>
|
|
2283
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2169
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/swap-value.html) -->
|
|
2170
|
+
<!-- The below content is automatically added from ./../apiExamples/swap-value.html -->
|
|
2171
|
+
<div id="swapExample">
|
|
2172
|
+
<auro-combobox id="swapExampleLeft">
|
|
2173
|
+
<span slot="bib.fullscreen.headline">Left Combobox Header</span>
|
|
2174
|
+
<span slot="label">Name</span>
|
|
2175
|
+
<auro-menu>
|
|
2176
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
2177
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
2178
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
2179
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
2180
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
2181
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
2182
|
+
</auro-menu>
|
|
2183
|
+
</auro-combobox>
|
|
2184
|
+
<auro-button id="swapExampleBtn" iconOnly>
|
|
2185
|
+
<auro-icon
|
|
2186
|
+
customColor
|
|
2187
|
+
category="terminal"
|
|
2188
|
+
name="round-trip-arrows">
|
|
2189
|
+
</auro-icon>
|
|
2190
|
+
</auro-button>
|
|
2191
|
+
<auro-combobox id="swapExampleRight">
|
|
2192
|
+
<span slot="bib.fullscreen.headline">Right Combobox Header</span>
|
|
2193
|
+
<span slot="label">Name</span>
|
|
2194
|
+
<auro-menu>
|
|
2195
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
2196
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
2197
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
2198
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
2199
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
2200
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
2201
|
+
</auro-menu>
|
|
2202
|
+
</auro-combobox>
|
|
2203
|
+
</div>
|
|
2204
|
+
<style>
|
|
2205
|
+
#swapExample {
|
|
2206
|
+
display: flex;
|
|
2207
|
+
flex-direction: row;
|
|
2208
|
+
align-items: center;
|
|
2209
|
+
}
|
|
2210
|
+
#swapExampleLeft,
|
|
2211
|
+
#swapExampleRight {
|
|
2212
|
+
flex: 1;
|
|
2213
|
+
}
|
|
2214
|
+
#swapExampleBtn {
|
|
2215
|
+
margin: 0 5px;
|
|
2216
|
+
}
|
|
2217
|
+
</style>
|
|
2218
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2284
2219
|
</div>
|
|
2285
2220
|
<auro-accordion alignRight>
|
|
2286
|
-
|
|
2221
|
+
<span slot="trigger">See code</span>
|
|
2287
2222
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/swap-value.html) -->
|
|
2288
2223
|
<!-- The below code snippet is automatically added from ./../apiExamples/swap-value.html -->
|
|
2289
2224
|
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
<auro-icon
|
|
2225
|
+
<pre class="language-html"><code class="language-html"><div id="swapExample">
|
|
2226
|
+
<auro-combobox id="swapExampleLeft">
|
|
2227
|
+
<span slot="bib.fullscreen.headline">Left Combobox Header</span>
|
|
2228
|
+
<span slot="label">Name</span>
|
|
2229
|
+
<auro-menu>
|
|
2230
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
2231
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
2232
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
2233
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
2234
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
2235
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
2236
|
+
</auro-menu>
|
|
2237
|
+
</auro-combobox>
|
|
2238
|
+
<auro-button id="swapExampleBtn" iconOnly>
|
|
2239
|
+
<auro-icon
|
|
2306
2240
|
customColor
|
|
2307
2241
|
category="terminal"
|
|
2308
|
-
name="round-trip-arrows"
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2242
|
+
name="round-trip-arrows">
|
|
2243
|
+
</auro-icon>
|
|
2244
|
+
</auro-button>
|
|
2245
|
+
<auro-combobox id="swapExampleRight">
|
|
2246
|
+
<span slot="bib.fullscreen.headline">Right Combobox Header</span>
|
|
2247
|
+
<span slot="label">Name</span>
|
|
2248
|
+
<auro-menu>
|
|
2249
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
2250
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
2251
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
2252
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
2253
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
2254
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
2255
|
+
</auro-menu>
|
|
2256
|
+
</auro-combobox>
|
|
2257
|
+
</div>
|
|
2258
|
+
<style>
|
|
2325
2259
|
#swapExample {
|
|
2326
2260
|
display: flex;
|
|
2327
2261
|
flex-direction: row;
|
|
2328
|
-
|
|
2329
2262
|
align-items: center;
|
|
2330
2263
|
}
|
|
2331
|
-
|
|
2332
2264
|
#swapExampleLeft,
|
|
2333
2265
|
#swapExampleRight {
|
|
2334
2266
|
flex: 1;
|
|
2335
2267
|
}
|
|
2336
|
-
|
|
2337
2268
|
#swapExampleBtn {
|
|
2338
2269
|
margin: 0 5px;
|
|
2339
2270
|
}
|
|
2340
|
-
|
|
2341
|
-
```
|
|
2271
|
+
</style></code></pre>
|
|
2342
2272
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2343
2273
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/swap-value.js) -->
|
|
2344
2274
|
<!-- The below code snippet is automatically added from ./../apiExamples/swap-value.js -->
|
|
2345
2275
|
|
|
2346
|
-
|
|
2347
|
-
export function swapValueExample() {
|
|
2276
|
+
<pre class="language-js"><code class="language-js">export function swapValueExample() {
|
|
2348
2277
|
const btn = document.querySelector('#swapExampleBtn');
|
|
2349
2278
|
const comboboxOne = document.querySelector('#swapExampleLeft');
|
|
2350
2279
|
const comboboxTwo = document.querySelector('#swapExampleRight');
|
|
2351
|
-
|
|
2352
|
-
btn.addEventListener('click', ()
|
|
2280
|
+
|
|
2281
|
+
btn.addEventListener('click', () => {
|
|
2353
2282
|
const valueOne = comboboxOne.value;
|
|
2354
2283
|
const valueTwo = comboboxTwo.value;
|
|
2355
|
-
|
|
2284
|
+
|
|
2356
2285
|
comboboxOne.value = valueTwo;
|
|
2357
2286
|
comboboxTwo.value = valueOne;
|
|
2358
2287
|
});
|
|
2359
|
-
}
|
|
2360
|
-
```
|
|
2288
|
+
}</code></pre>
|
|
2361
2289
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2362
2290
|
</auro-accordion>
|