@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
|
@@ -86,43 +86,41 @@ The `auro-select` element is a wrapper for auro-dropdown and auro-menu to create
|
|
|
86
86
|
## Basic
|
|
87
87
|
|
|
88
88
|
<div class="exampleWrapper">
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
89
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
90
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
91
|
+
<auro-select>
|
|
92
|
+
<span slot="ariaLabel.bib.close">Close Popup</span>
|
|
93
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
94
|
+
<span slot="label">Select Example</span>
|
|
95
|
+
<auro-menu>
|
|
96
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
97
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
98
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
99
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
100
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
101
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
102
|
+
</auro-menu>
|
|
103
|
+
</auro-select>
|
|
104
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
105
105
|
</div>
|
|
106
106
|
<auro-accordion alignRight>
|
|
107
|
-
|
|
107
|
+
<span slot="trigger">See code</span>
|
|
108
108
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
109
109
|
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
110
110
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
</auro-select>
|
|
125
|
-
```
|
|
111
|
+
<pre class="language-html"><code class="language-html"><auro-select>
|
|
112
|
+
<span slot="ariaLabel.bib.close">Close Popup</span>
|
|
113
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
114
|
+
<span slot="label">Select Example</span>
|
|
115
|
+
<auro-menu>
|
|
116
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
117
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
118
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
119
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
120
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
121
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
122
|
+
</auro-menu>
|
|
123
|
+
</auro-select></code></pre>
|
|
126
124
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
127
125
|
</auro-accordion>
|
|
128
126
|
|
|
@@ -133,41 +131,39 @@ The `auro-select` element is a wrapper for auro-dropdown and auro-menu to create
|
|
|
133
131
|
Use the `appearance="inverse"` attribute to render the component for use on 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-select appearance="inverse">
|
|
137
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
138
|
+
<span slot="label">Select Example</span>
|
|
139
|
+
<auro-menu>
|
|
140
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
141
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
142
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
143
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
144
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
145
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
146
|
+
</auro-menu>
|
|
147
|
+
</auro-select>
|
|
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-select>
|
|
170
|
-
```
|
|
155
|
+
<pre class="language-html"><code class="language-html"><auro-select appearance="inverse">
|
|
156
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
157
|
+
<span slot="label">Select Example</span>
|
|
158
|
+
<auro-menu>
|
|
159
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
160
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
161
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
162
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
163
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
164
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
165
|
+
</auro-menu>
|
|
166
|
+
</auro-select></code></pre>
|
|
171
167
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
172
168
|
</auro-accordion>
|
|
173
169
|
|
|
@@ -176,175 +172,173 @@ Use the `appearance="inverse"` attribute to render the component for use on dark
|
|
|
176
172
|
Use the `autocomplete` attribute to let browser's know what information to use to fill out the form.
|
|
177
173
|
|
|
178
174
|
<div class="exampleWrapper">
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
175
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autocomplete.html) -->
|
|
176
|
+
<!-- The below content is automatically added from ./../apiExamples/autocomplete.html -->
|
|
177
|
+
<div class="autofill-example-form">
|
|
178
|
+
<div class="input-row">
|
|
179
|
+
<auro-input autocomplete="given-name">
|
|
180
|
+
<span slot="label">First Name</span>
|
|
181
|
+
<span slot="bib.fullscreen.headline">First Name</span>
|
|
182
|
+
</auro-input>
|
|
183
|
+
<auro-input autocomplete="family-name">
|
|
184
|
+
<span slot="label">Last Name</span>
|
|
185
|
+
<span slot="bib.fullscreen.headline">Last Name</span>
|
|
186
|
+
</auro-input>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="input-row">
|
|
189
|
+
<auro-input autocomplete="address-line1">
|
|
190
|
+
<span slot="label">Street Address</span>
|
|
191
|
+
<span slot="bib.fullscreen.headline">Street Address</span>
|
|
192
|
+
</auro-input>
|
|
193
|
+
<auro-input autocomplete="address-level2">
|
|
194
|
+
<span slot="label">City</span>
|
|
195
|
+
<span slot="bib.fullscreen.headline">City</span>
|
|
196
|
+
</auro-input>
|
|
197
|
+
<auro-select autocomplete="address-level1">
|
|
198
|
+
<span slot="bib.fullscreen.headline">Select Your State</span>
|
|
199
|
+
<span slot="label">Select Your State</span>
|
|
200
|
+
<auro-menu>
|
|
201
|
+
<auro-menuoption value="AL">Alabama</auro-menuoption>
|
|
202
|
+
<auro-menuoption value="AK">Alaska</auro-menuoption>
|
|
203
|
+
<auro-menuoption value="AZ">Arizona</auro-menuoption>
|
|
204
|
+
<auro-menuoption value="AR">Arkansas</auro-menuoption>
|
|
205
|
+
<auro-menuoption value="CA">California</auro-menuoption>
|
|
206
|
+
<auro-menuoption value="CO">Colorado</auro-menuoption>
|
|
207
|
+
<auro-menuoption value="CT">Connecticut</auro-menuoption>
|
|
208
|
+
<auro-menuoption value="DE">Delaware</auro-menuoption>
|
|
209
|
+
<auro-menuoption value="DC">District of Columbia</auro-menuoption>
|
|
210
|
+
<auro-menuoption value="FL">Florida</auro-menuoption>
|
|
211
|
+
<auro-menuoption value="GA">Georgia</auro-menuoption>
|
|
212
|
+
<auro-menuoption value="HI">Hawaii</auro-menuoption>
|
|
213
|
+
<auro-menuoption value="ID">Idaho</auro-menuoption>
|
|
214
|
+
<auro-menuoption value="IL">Illinois</auro-menuoption>
|
|
215
|
+
<auro-menuoption value="IN">Indiana</auro-menuoption>
|
|
216
|
+
<auro-menuoption value="IA">Iowa</auro-menuoption>
|
|
217
|
+
<auro-menuoption value="KS">Kansas</auro-menuoption>
|
|
218
|
+
<auro-menuoption value="KY">Kentucky</auro-menuoption>
|
|
219
|
+
<auro-menuoption value="LA">Louisiana</auro-menuoption>
|
|
220
|
+
<auro-menuoption value="ME">Maine</auro-menuoption>
|
|
221
|
+
<auro-menuoption value="MD">Maryland</auro-menuoption>
|
|
222
|
+
<auro-menuoption value="MA">Massachusetts</auro-menuoption>
|
|
223
|
+
<auro-menuoption value="MI">Michigan</auro-menuoption>
|
|
224
|
+
<auro-menuoption value="MN">Minnesota</auro-menuoption>
|
|
225
|
+
<auro-menuoption value="MS">Mississippi</auro-menuoption>
|
|
226
|
+
<auro-menuoption value="MO">Missouri</auro-menuoption>
|
|
227
|
+
<auro-menuoption value="MT">Montana</auro-menuoption>
|
|
228
|
+
<auro-menuoption value="NE">Nebraska</auro-menuoption>
|
|
229
|
+
<auro-menuoption value="NV">Nevada</auro-menuoption>
|
|
230
|
+
<auro-menuoption value="NH">New Hampshire</auro-menuoption>
|
|
231
|
+
<auro-menuoption value="NJ">New Jersey</auro-menuoption>
|
|
232
|
+
<auro-menuoption value="NM">New Mexico</auro-menuoption>
|
|
233
|
+
<auro-menuoption value="NY">New York</auro-menuoption>
|
|
234
|
+
<auro-menuoption value="NC">North Carolina</auro-menuoption>
|
|
235
|
+
<auro-menuoption value="ND">North Dakota</auro-menuoption>
|
|
236
|
+
<auro-menuoption value="OH">Ohio</auro-menuoption>
|
|
237
|
+
<auro-menuoption value="OK">Oklahoma</auro-menuoption>
|
|
238
|
+
<auro-menuoption value="OR">Oregon</auro-menuoption>
|
|
239
|
+
<auro-menuoption value="PA">Pennsylvania</auro-menuoption>
|
|
240
|
+
<auro-menuoption value="RI">Rhode Island</auro-menuoption>
|
|
241
|
+
<auro-menuoption value="SC">South Carolina</auro-menuoption>
|
|
242
|
+
<auro-menuoption value="SD">South Dakota</auro-menuoption>
|
|
243
|
+
<auro-menuoption value="TN">Tennessee</auro-menuoption>
|
|
244
|
+
<auro-menuoption value="TX">Texas</auro-menuoption>
|
|
245
|
+
<auro-menuoption value="UT">Utah</auro-menuoption>
|
|
246
|
+
<auro-menuoption value="VT">Vermont</auro-menuoption>
|
|
247
|
+
<auro-menuoption value="VA">Virginia</auro-menuoption>
|
|
248
|
+
<auro-menuoption value="WA">Washington</auro-menuoption>
|
|
249
|
+
<auro-menuoption value="WV">West Virginia</auro-menuoption>
|
|
250
|
+
<auro-menuoption value="WI">Wisconsin</auro-menuoption>
|
|
251
|
+
<auro-menuoption value="WY">Wyoming</auro-menuoption>
|
|
252
|
+
</auro-menu>
|
|
253
|
+
</auro-select>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
261
257
|
</div>
|
|
262
258
|
<auro-accordion alignRight>
|
|
263
|
-
|
|
259
|
+
<span slot="trigger">See code</span>
|
|
264
260
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autocomplete.html) -->
|
|
265
261
|
<!-- The below code snippet is automatically added from ./../apiExamples/autocomplete.html -->
|
|
266
262
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
</div>
|
|
347
|
-
```
|
|
263
|
+
<pre class="language-html"><code class="language-html"><div class="autofill-example-form">
|
|
264
|
+
<div class="input-row">
|
|
265
|
+
<auro-input autocomplete="given-name">
|
|
266
|
+
<span slot="label">First Name</span>
|
|
267
|
+
<span slot="bib.fullscreen.headline">First Name</span>
|
|
268
|
+
</auro-input>
|
|
269
|
+
<auro-input autocomplete="family-name">
|
|
270
|
+
<span slot="label">Last Name</span>
|
|
271
|
+
<span slot="bib.fullscreen.headline">Last Name</span>
|
|
272
|
+
</auro-input>
|
|
273
|
+
</div>
|
|
274
|
+
<div class="input-row">
|
|
275
|
+
<auro-input autocomplete="address-line1">
|
|
276
|
+
<span slot="label">Street Address</span>
|
|
277
|
+
<span slot="bib.fullscreen.headline">Street Address</span>
|
|
278
|
+
</auro-input>
|
|
279
|
+
<auro-input autocomplete="address-level2">
|
|
280
|
+
<span slot="label">City</span>
|
|
281
|
+
<span slot="bib.fullscreen.headline">City</span>
|
|
282
|
+
</auro-input>
|
|
283
|
+
<auro-select autocomplete="address-level1">
|
|
284
|
+
<span slot="bib.fullscreen.headline">Select Your State</span>
|
|
285
|
+
<span slot="label">Select Your State</span>
|
|
286
|
+
<auro-menu>
|
|
287
|
+
<auro-menuoption value="AL">Alabama</auro-menuoption>
|
|
288
|
+
<auro-menuoption value="AK">Alaska</auro-menuoption>
|
|
289
|
+
<auro-menuoption value="AZ">Arizona</auro-menuoption>
|
|
290
|
+
<auro-menuoption value="AR">Arkansas</auro-menuoption>
|
|
291
|
+
<auro-menuoption value="CA">California</auro-menuoption>
|
|
292
|
+
<auro-menuoption value="CO">Colorado</auro-menuoption>
|
|
293
|
+
<auro-menuoption value="CT">Connecticut</auro-menuoption>
|
|
294
|
+
<auro-menuoption value="DE">Delaware</auro-menuoption>
|
|
295
|
+
<auro-menuoption value="DC">District of Columbia</auro-menuoption>
|
|
296
|
+
<auro-menuoption value="FL">Florida</auro-menuoption>
|
|
297
|
+
<auro-menuoption value="GA">Georgia</auro-menuoption>
|
|
298
|
+
<auro-menuoption value="HI">Hawaii</auro-menuoption>
|
|
299
|
+
<auro-menuoption value="ID">Idaho</auro-menuoption>
|
|
300
|
+
<auro-menuoption value="IL">Illinois</auro-menuoption>
|
|
301
|
+
<auro-menuoption value="IN">Indiana</auro-menuoption>
|
|
302
|
+
<auro-menuoption value="IA">Iowa</auro-menuoption>
|
|
303
|
+
<auro-menuoption value="KS">Kansas</auro-menuoption>
|
|
304
|
+
<auro-menuoption value="KY">Kentucky</auro-menuoption>
|
|
305
|
+
<auro-menuoption value="LA">Louisiana</auro-menuoption>
|
|
306
|
+
<auro-menuoption value="ME">Maine</auro-menuoption>
|
|
307
|
+
<auro-menuoption value="MD">Maryland</auro-menuoption>
|
|
308
|
+
<auro-menuoption value="MA">Massachusetts</auro-menuoption>
|
|
309
|
+
<auro-menuoption value="MI">Michigan</auro-menuoption>
|
|
310
|
+
<auro-menuoption value="MN">Minnesota</auro-menuoption>
|
|
311
|
+
<auro-menuoption value="MS">Mississippi</auro-menuoption>
|
|
312
|
+
<auro-menuoption value="MO">Missouri</auro-menuoption>
|
|
313
|
+
<auro-menuoption value="MT">Montana</auro-menuoption>
|
|
314
|
+
<auro-menuoption value="NE">Nebraska</auro-menuoption>
|
|
315
|
+
<auro-menuoption value="NV">Nevada</auro-menuoption>
|
|
316
|
+
<auro-menuoption value="NH">New Hampshire</auro-menuoption>
|
|
317
|
+
<auro-menuoption value="NJ">New Jersey</auro-menuoption>
|
|
318
|
+
<auro-menuoption value="NM">New Mexico</auro-menuoption>
|
|
319
|
+
<auro-menuoption value="NY">New York</auro-menuoption>
|
|
320
|
+
<auro-menuoption value="NC">North Carolina</auro-menuoption>
|
|
321
|
+
<auro-menuoption value="ND">North Dakota</auro-menuoption>
|
|
322
|
+
<auro-menuoption value="OH">Ohio</auro-menuoption>
|
|
323
|
+
<auro-menuoption value="OK">Oklahoma</auro-menuoption>
|
|
324
|
+
<auro-menuoption value="OR">Oregon</auro-menuoption>
|
|
325
|
+
<auro-menuoption value="PA">Pennsylvania</auro-menuoption>
|
|
326
|
+
<auro-menuoption value="RI">Rhode Island</auro-menuoption>
|
|
327
|
+
<auro-menuoption value="SC">South Carolina</auro-menuoption>
|
|
328
|
+
<auro-menuoption value="SD">South Dakota</auro-menuoption>
|
|
329
|
+
<auro-menuoption value="TN">Tennessee</auro-menuoption>
|
|
330
|
+
<auro-menuoption value="TX">Texas</auro-menuoption>
|
|
331
|
+
<auro-menuoption value="UT">Utah</auro-menuoption>
|
|
332
|
+
<auro-menuoption value="VT">Vermont</auro-menuoption>
|
|
333
|
+
<auro-menuoption value="VA">Virginia</auro-menuoption>
|
|
334
|
+
<auro-menuoption value="WA">Washington</auro-menuoption>
|
|
335
|
+
<auro-menuoption value="WV">West Virginia</auro-menuoption>
|
|
336
|
+
<auro-menuoption value="WI">Wisconsin</auro-menuoption>
|
|
337
|
+
<auro-menuoption value="WY">Wyoming</auro-menuoption>
|
|
338
|
+
</auro-menu>
|
|
339
|
+
</auro-select>
|
|
340
|
+
</div>
|
|
341
|
+
</div></code></pre>
|
|
348
342
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
349
343
|
</auro-accordion>
|
|
350
344
|
|
|
@@ -353,75 +347,73 @@ Use the `autocomplete` attribute to let browser's know what information to use t
|
|
|
353
347
|
Use the `disabled` attribute to toggle the disabled UI.
|
|
354
348
|
|
|
355
349
|
<div class="exampleWrapper">
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
350
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
|
|
351
|
+
<!-- The below content is automatically added from ./../apiExamples/disabled.html -->
|
|
352
|
+
<auro-select disabled placeholder="Placeholder Text">
|
|
353
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
354
|
+
<span slot="label">Label</span>
|
|
355
|
+
<auro-menu>
|
|
356
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
357
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
358
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
359
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
360
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
361
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
362
|
+
</auro-menu>
|
|
363
|
+
</auro-select>
|
|
364
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
371
365
|
</div>
|
|
372
366
|
<auro-accordion alignRight>
|
|
373
|
-
|
|
367
|
+
<span slot="trigger">See code</span>
|
|
374
368
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
|
|
375
369
|
<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
|
|
376
370
|
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
</auro-select>
|
|
390
|
-
```
|
|
371
|
+
<pre class="language-html"><code class="language-html"><auro-select disabled placeholder="Placeholder Text">
|
|
372
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
373
|
+
<span slot="label">Label</span>
|
|
374
|
+
<auro-menu>
|
|
375
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
376
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
377
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
378
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
379
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
380
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
381
|
+
</auro-menu>
|
|
382
|
+
</auro-select></code></pre>
|
|
391
383
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
392
384
|
</auro-accordion>
|
|
393
385
|
<div class="exampleWrapper--ondark">
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
386
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
|
|
387
|
+
<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
|
|
388
|
+
<auro-select appearance="inverse" disabled placeholder="Placeholder Text">
|
|
389
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
390
|
+
<span slot="label">Label</span>
|
|
391
|
+
<auro-menu>
|
|
392
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
393
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
394
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
395
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
396
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
397
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
398
|
+
</auro-menu>
|
|
399
|
+
</auro-select>
|
|
400
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
409
401
|
</div>
|
|
410
402
|
<auro-accordion alignRight>
|
|
411
|
-
|
|
403
|
+
<span slot="trigger">See code</span>
|
|
412
404
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
|
|
413
405
|
<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
|
|
414
406
|
<auro-select appearance="inverse" disabled placeholder="Placeholder Text">
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
407
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
408
|
+
<span slot="label">Label</span>
|
|
409
|
+
<auro-menu>
|
|
410
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
411
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
412
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
413
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
414
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
415
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
416
|
+
</auro-menu>
|
|
425
417
|
</auro-select>
|
|
426
418
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
427
419
|
</auro-accordion>
|
|
@@ -431,75 +423,73 @@ Use the `disabled` attribute to toggle the disabled UI.
|
|
|
431
423
|
Use the `error` attribute to toggle the error UI.
|
|
432
424
|
|
|
433
425
|
<div class="exampleWrapper">
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
426
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
|
|
427
|
+
<!-- The below content is automatically added from ./../apiExamples/error.html -->
|
|
428
|
+
<auro-select error="Custom error message" placeholder="Placeholder Text">
|
|
429
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
430
|
+
<span slot="label">Label</span>
|
|
431
|
+
<auro-menu>
|
|
432
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
433
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
434
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
435
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
436
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
437
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
438
|
+
</auro-menu>
|
|
439
|
+
</auro-select>
|
|
440
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
449
441
|
</div>
|
|
450
442
|
<auro-accordion alignRight>
|
|
451
|
-
|
|
443
|
+
<span slot="trigger">See code</span>
|
|
452
444
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
|
|
453
445
|
<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
|
|
454
446
|
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
</auro-select>
|
|
468
|
-
```
|
|
447
|
+
<pre class="language-html"><code class="language-html"><auro-select error="Custom error message" placeholder="Placeholder Text">
|
|
448
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
449
|
+
<span slot="label">Label</span>
|
|
450
|
+
<auro-menu>
|
|
451
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
452
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
453
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
454
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
455
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
456
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
457
|
+
</auro-menu>
|
|
458
|
+
</auro-select></code></pre>
|
|
469
459
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
470
460
|
</auro-accordion>
|
|
471
461
|
<div class="exampleWrapper--ondark" aria-hidden>
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
462
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
|
|
463
|
+
<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
|
|
464
|
+
<auro-select appearance="inverse" error="Custom error message" placeholder="Placeholder Text">
|
|
465
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
466
|
+
<span slot="label">Label</span>
|
|
467
|
+
<auro-menu>
|
|
468
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
469
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
470
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
471
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
472
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
473
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
474
|
+
</auro-menu>
|
|
475
|
+
</auro-select>
|
|
476
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
487
477
|
</div>
|
|
488
478
|
<auro-accordion alignRight>
|
|
489
|
-
|
|
479
|
+
<span slot="trigger">See code</span>
|
|
490
480
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
|
|
491
481
|
<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
|
|
492
482
|
<auro-select appearance="inverse" error="Custom error message" placeholder="Placeholder Text">
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
483
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
484
|
+
<span slot="label">Label</span>
|
|
485
|
+
<auro-menu>
|
|
486
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
487
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
488
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
489
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
490
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
491
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
492
|
+
</auro-menu>
|
|
503
493
|
</auro-select>
|
|
504
494
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
505
495
|
</auro-accordion>
|
|
@@ -509,49 +499,47 @@ Use the `error` attribute to toggle the error UI.
|
|
|
509
499
|
Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-select>` element to match the width of the bib content, rather than the width of the trigger.
|
|
510
500
|
|
|
511
501
|
<div class="exampleWrapper">
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
502
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/flex-menu-width.html) -->
|
|
503
|
+
<!-- The below content is automatically added from ../apiExamples/flex-menu-width.html -->
|
|
504
|
+
<auro-select flexMenuWidth id="flexMenuWidthExample" placeholder="Placeholder Text">
|
|
505
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
506
|
+
<span slot="label">Label</span>
|
|
507
|
+
<auro-menu>
|
|
508
|
+
<auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
|
|
509
|
+
<auro-menuoption value="costa rica">Costa Rica has a country code of (+506)</auro-menuoption>
|
|
510
|
+
<auro-menuoption value="mexico">Mexico has a country code of (+52)</auro-menuoption>
|
|
511
|
+
<auro-menuoption value="afghanistan">Afghanistan has a country code of (+93)</auro-menuoption>
|
|
512
|
+
<auro-menuoption value="albania">Albania has a country code of (+355)</auro-menuoption>
|
|
513
|
+
</auro-menu>
|
|
514
|
+
</auro-select>
|
|
515
|
+
<style>
|
|
516
|
+
#flexMenuWidthExample::part(dropdownTrigger) {
|
|
517
|
+
width: 25%;
|
|
518
|
+
}
|
|
519
|
+
</style>
|
|
520
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
531
521
|
</div>
|
|
532
522
|
<auro-accordion alignRight>
|
|
533
|
-
|
|
523
|
+
<span slot="trigger">See code</span>
|
|
534
524
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/flex-menu-width.html) -->
|
|
535
525
|
<!-- The below code snippet is automatically added from ../apiExamples/flex-menu-width.html -->
|
|
536
526
|
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
<style>
|
|
527
|
+
<pre class="language-html"><code class="language-html"><auro-select flexMenuWidth id="flexMenuWidthExample" placeholder="Placeholder Text">
|
|
528
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
529
|
+
<span slot="label">Label</span>
|
|
530
|
+
<auro-menu>
|
|
531
|
+
<auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
|
|
532
|
+
<auro-menuoption value="costa rica">Costa Rica has a country code of (+506)</auro-menuoption>
|
|
533
|
+
<auro-menuoption value="mexico">Mexico has a country code of (+52)</auro-menuoption>
|
|
534
|
+
<auro-menuoption value="afghanistan">Afghanistan has a country code of (+93)</auro-menuoption>
|
|
535
|
+
<auro-menuoption value="albania">Albania has a country code of (+355)</auro-menuoption>
|
|
536
|
+
</auro-menu>
|
|
537
|
+
</auro-select>
|
|
538
|
+
<style>
|
|
550
539
|
#flexMenuWidthExample::part(dropdownTrigger) {
|
|
551
540
|
width: 25%;
|
|
552
541
|
}
|
|
553
|
-
|
|
554
|
-
```
|
|
542
|
+
</style></code></pre>
|
|
555
543
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
556
544
|
</auro-accordion>
|
|
557
545
|
|
|
@@ -566,41 +554,39 @@ Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/
|
|
|
566
554
|
To support fullcreen bib, setting `bib.fullscreen.headline` is **STRONGLY RECOMMENDED**.
|
|
567
555
|
|
|
568
556
|
<div class="exampleWrapper">
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
557
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen-breakpoint.html) -->
|
|
558
|
+
<!-- The below content is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
|
|
559
|
+
<auro-select fullscreenBreakpoint="lg">
|
|
560
|
+
<span slot="label">Select Example</span>
|
|
561
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
562
|
+
<auro-menu>
|
|
563
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
564
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
565
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
566
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
567
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
568
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
569
|
+
</auro-menu>
|
|
570
|
+
</auro-select>
|
|
571
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
584
572
|
</div>
|
|
585
573
|
<auro-accordion alignRight>
|
|
586
|
-
|
|
574
|
+
<span slot="trigger">See code</span>
|
|
587
575
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreen-breakpoint.html) -->
|
|
588
576
|
<!-- The below code snippet is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
|
|
589
577
|
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
</auro-select>
|
|
603
|
-
```
|
|
578
|
+
<pre class="language-html"><code class="language-html"><auro-select fullscreenBreakpoint="lg">
|
|
579
|
+
<span slot="label">Select Example</span>
|
|
580
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
581
|
+
<auro-menu>
|
|
582
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
583
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
584
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
585
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
586
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
587
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
588
|
+
</auro-menu>
|
|
589
|
+
</auro-select></code></pre>
|
|
604
590
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
605
591
|
</auro-accordion>
|
|
606
592
|
|
|
@@ -611,41 +597,39 @@ ensures that the dropdown will never be fullscreen.
|
|
|
611
597
|
Please use `xl` if you want the opposite behavior, where a dropdown is always fullscreen.
|
|
612
598
|
|
|
613
599
|
<div class="exampleWrapper">
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
600
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen-disabled.html) -->
|
|
601
|
+
<!-- The below content is automatically added from ./../apiExamples/fullscreen-disabled.html -->
|
|
602
|
+
<auro-select fullscreenBreakpoint="disabled">
|
|
603
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
604
|
+
<span slot="label">Select Example</span>
|
|
605
|
+
<auro-menu>
|
|
606
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
607
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
608
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
609
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
610
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
611
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
612
|
+
</auro-menu>
|
|
613
|
+
</auro-select>
|
|
614
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
629
615
|
</div>
|
|
630
616
|
<auro-accordion alignRight>
|
|
631
|
-
|
|
617
|
+
<span slot="trigger">See code</span>
|
|
632
618
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreen-disabled.html) -->
|
|
633
619
|
<!-- The below code snippet is automatically added from ./../apiExamples/fullscreen-disabled.html -->
|
|
634
620
|
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
</auro-select>
|
|
648
|
-
```
|
|
621
|
+
<pre class="language-html"><code class="language-html"><auro-select fullscreenBreakpoint="disabled">
|
|
622
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
623
|
+
<span slot="label">Select Example</span>
|
|
624
|
+
<auro-menu>
|
|
625
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
626
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
627
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
628
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
629
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
630
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
631
|
+
</auro-menu>
|
|
632
|
+
</auro-select></code></pre>
|
|
649
633
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
650
634
|
</auro-accordion>
|
|
651
635
|
|
|
@@ -658,43 +642,41 @@ The `auro-select` component supports the `shape`, `size` and `layout` feature se
|
|
|
658
642
|
The `classic` layout is default for `auro-select`. No customization is needed to achieve this look.
|
|
659
643
|
|
|
660
644
|
<div class="exampleWrapper">
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
645
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
646
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
647
|
+
<auro-select>
|
|
648
|
+
<span slot="ariaLabel.bib.close">Close Popup</span>
|
|
649
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
650
|
+
<span slot="label">Select Example</span>
|
|
651
|
+
<auro-menu>
|
|
652
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
653
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
654
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
655
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
656
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
657
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
658
|
+
</auro-menu>
|
|
659
|
+
</auro-select>
|
|
660
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
677
661
|
</div>
|
|
678
662
|
<auro-accordion alignRight>
|
|
679
|
-
|
|
663
|
+
<span slot="trigger">See code</span>
|
|
680
664
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
681
665
|
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
682
666
|
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
</auro-select>
|
|
697
|
-
```
|
|
667
|
+
<pre class="language-html"><code class="language-html"><auro-select>
|
|
668
|
+
<span slot="ariaLabel.bib.close">Close Popup</span>
|
|
669
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
670
|
+
<span slot="label">Select Example</span>
|
|
671
|
+
<auro-menu>
|
|
672
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
673
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
674
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
675
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
676
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
677
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
678
|
+
</auro-menu>
|
|
679
|
+
</auro-select></code></pre>
|
|
698
680
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
699
681
|
</auro-accordion>
|
|
700
682
|
|
|
@@ -711,165 +693,163 @@ The `emphasized` layout supports the following sizes:
|
|
|
711
693
|
- `xl`
|
|
712
694
|
|
|
713
695
|
<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
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
696
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
|
|
697
|
+
<!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
|
|
698
|
+
<div style="display: flex; flex-direction: row; gap: 10px;">
|
|
699
|
+
<auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
|
|
700
|
+
<span slot="ariaLabel.bib.close">Close Popup</span>
|
|
701
|
+
<span slot="label">Select Example</span>
|
|
702
|
+
<auro-menu nocheckmark>
|
|
703
|
+
<auro-menuoption value="flights">
|
|
704
|
+
<auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
|
|
705
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
|
|
706
|
+
</auro-menuoption>
|
|
707
|
+
<auro-menuoption value="cars">
|
|
708
|
+
<auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
|
|
709
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
|
|
710
|
+
</auro-menuoption>
|
|
711
|
+
<auro-menuoption value="hotels">
|
|
712
|
+
<auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
|
|
713
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
|
|
714
|
+
</auro-menuoption>
|
|
715
|
+
<auro-menuoption value="packages">
|
|
716
|
+
<auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
|
|
717
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
|
|
718
|
+
</auro-menuoption>
|
|
719
|
+
<auro-menuoption value="cruises">
|
|
720
|
+
<auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
|
|
721
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
|
|
722
|
+
</auro-menuoption>
|
|
723
|
+
</auro-menu>
|
|
724
|
+
</auro-select>
|
|
725
|
+
<auro-select layout="emphasized" shape="pill" size="xl" value="flights" style="display:inline-block;">
|
|
726
|
+
<span slot="label">Select Example</span>
|
|
727
|
+
<auro-menu nocheckmark>
|
|
728
|
+
<auro-menuoption value="flights">
|
|
729
|
+
<auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
|
|
730
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
|
|
731
|
+
</auro-menuoption>
|
|
732
|
+
<auro-menuoption value="cars">
|
|
733
|
+
<auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
|
|
734
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
|
|
735
|
+
</auro-menuoption>
|
|
736
|
+
<auro-menuoption value="hotels">
|
|
737
|
+
<auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
|
|
738
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
|
|
739
|
+
</auro-menuoption>
|
|
740
|
+
<auro-menuoption value="packages">
|
|
741
|
+
<auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
|
|
742
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
|
|
743
|
+
</auro-menuoption>
|
|
744
|
+
<auro-menuoption value="cruises">
|
|
745
|
+
<auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
|
|
746
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
|
|
747
|
+
</auro-menuoption>
|
|
748
|
+
</auro-menu>
|
|
749
|
+
</auro-select>
|
|
750
|
+
<auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;">
|
|
751
|
+
<span slot="label">Select Example</span>
|
|
752
|
+
<span slot="helpText">no displayValue in menuoptions</span>
|
|
753
|
+
<auro-menu nocheckmark>
|
|
754
|
+
<auro-menuoption value="flights">
|
|
755
|
+
<auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
|
|
756
|
+
</auro-menuoption>
|
|
757
|
+
<auro-menuoption value="cars">
|
|
758
|
+
<auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
|
|
759
|
+
</auro-menuoption>
|
|
760
|
+
<auro-menuoption value="hotels">
|
|
761
|
+
<auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
|
|
762
|
+
</auro-menuoption>
|
|
763
|
+
<auro-menuoption value="packages">
|
|
764
|
+
<auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
|
|
765
|
+
</auro-menuoption>
|
|
766
|
+
<auro-menuoption value="cruises">
|
|
767
|
+
<auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
|
|
768
|
+
</auro-menuoption>
|
|
769
|
+
</auro-menu>
|
|
770
|
+
</auro-select>
|
|
771
|
+
</div>
|
|
772
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
791
773
|
</div>
|
|
792
774
|
<auro-accordion alignRight>
|
|
793
|
-
|
|
775
|
+
<span slot="trigger">See code</span>
|
|
794
776
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic.html) -->
|
|
795
777
|
<!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic.html -->
|
|
796
778
|
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
</div>
|
|
872
|
-
```
|
|
779
|
+
<pre class="language-html"><code class="language-html"><div style="display: flex; flex-direction: row; gap: 10px;">
|
|
780
|
+
<auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
|
|
781
|
+
<span slot="ariaLabel.bib.close">Close Popup</span>
|
|
782
|
+
<span slot="label">Select Example</span>
|
|
783
|
+
<auro-menu nocheckmark>
|
|
784
|
+
<auro-menuoption value="flights">
|
|
785
|
+
<auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
|
|
786
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
|
|
787
|
+
</auro-menuoption>
|
|
788
|
+
<auro-menuoption value="cars">
|
|
789
|
+
<auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
|
|
790
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
|
|
791
|
+
</auro-menuoption>
|
|
792
|
+
<auro-menuoption value="hotels">
|
|
793
|
+
<auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
|
|
794
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
|
|
795
|
+
</auro-menuoption>
|
|
796
|
+
<auro-menuoption value="packages">
|
|
797
|
+
<auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
|
|
798
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
|
|
799
|
+
</auro-menuoption>
|
|
800
|
+
<auro-menuoption value="cruises">
|
|
801
|
+
<auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
|
|
802
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
|
|
803
|
+
</auro-menuoption>
|
|
804
|
+
</auro-menu>
|
|
805
|
+
</auro-select>
|
|
806
|
+
<auro-select layout="emphasized" shape="pill" size="xl" value="flights" style="display:inline-block;">
|
|
807
|
+
<span slot="label">Select Example</span>
|
|
808
|
+
<auro-menu nocheckmark>
|
|
809
|
+
<auro-menuoption value="flights">
|
|
810
|
+
<auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
|
|
811
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
|
|
812
|
+
</auro-menuoption>
|
|
813
|
+
<auro-menuoption value="cars">
|
|
814
|
+
<auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
|
|
815
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
|
|
816
|
+
</auro-menuoption>
|
|
817
|
+
<auro-menuoption value="hotels">
|
|
818
|
+
<auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
|
|
819
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
|
|
820
|
+
</auro-menuoption>
|
|
821
|
+
<auro-menuoption value="packages">
|
|
822
|
+
<auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
|
|
823
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
|
|
824
|
+
</auro-menuoption>
|
|
825
|
+
<auro-menuoption value="cruises">
|
|
826
|
+
<auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
|
|
827
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
|
|
828
|
+
</auro-menuoption>
|
|
829
|
+
</auro-menu>
|
|
830
|
+
</auro-select>
|
|
831
|
+
<auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;">
|
|
832
|
+
<span slot="label">Select Example</span>
|
|
833
|
+
<span slot="helpText">no displayValue in menuoptions</span>
|
|
834
|
+
<auro-menu nocheckmark>
|
|
835
|
+
<auro-menuoption value="flights">
|
|
836
|
+
<auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
|
|
837
|
+
</auro-menuoption>
|
|
838
|
+
<auro-menuoption value="cars">
|
|
839
|
+
<auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
|
|
840
|
+
</auro-menuoption>
|
|
841
|
+
<auro-menuoption value="hotels">
|
|
842
|
+
<auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
|
|
843
|
+
</auro-menuoption>
|
|
844
|
+
<auro-menuoption value="packages">
|
|
845
|
+
<auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
|
|
846
|
+
</auro-menuoption>
|
|
847
|
+
<auro-menuoption value="cruises">
|
|
848
|
+
<auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
|
|
849
|
+
</auro-menuoption>
|
|
850
|
+
</auro-menu>
|
|
851
|
+
</auro-select>
|
|
852
|
+
</div></code></pre>
|
|
873
853
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
874
854
|
</auro-accordion>
|
|
875
855
|
|
|
@@ -880,61 +860,59 @@ The `snowflake` layout is a unique, one off layout that does not follow the norm
|
|
|
880
860
|
The `snowflake` layout is only expected to be used on dark backgrounds, in conjunction with `appearance="inverse"`.
|
|
881
861
|
|
|
882
862
|
<div class="exampleWrapper--ondark">
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
863
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
|
|
864
|
+
<!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
|
|
865
|
+
<auro-select layout="snowflake" shape="snowflake" appearance="inverse" required style="width:300px;">
|
|
866
|
+
<span slot="ariaLabel.bib.close">Close Popup</span>
|
|
867
|
+
<span slot="label">Label</span>
|
|
868
|
+
<span slot="helpText">Help Text</span>
|
|
869
|
+
<auro-menu nocheckmark>
|
|
870
|
+
<auro-menuoption value="flights">
|
|
871
|
+
<auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
|
|
872
|
+
</auro-menuoption>
|
|
873
|
+
<auro-menuoption value="cars">
|
|
874
|
+
<auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
|
|
875
|
+
</auro-menuoption>
|
|
876
|
+
<auro-menuoption value="hotels">
|
|
877
|
+
<auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
|
|
878
|
+
</auro-menuoption>
|
|
879
|
+
<auro-menuoption value="packages">
|
|
880
|
+
<auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
|
|
881
|
+
</auro-menuoption>
|
|
882
|
+
<auro-menuoption value="cruises">
|
|
883
|
+
<auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
|
|
884
|
+
</auro-menuoption>
|
|
885
|
+
</auro-menu>
|
|
886
|
+
</auro-select>
|
|
887
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
908
888
|
</div>
|
|
909
889
|
<auro-accordion alignRight>
|
|
910
|
-
|
|
890
|
+
<span slot="trigger">See code</span>
|
|
911
891
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
|
|
912
892
|
<!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
|
|
913
893
|
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
</auro-select>
|
|
937
|
-
```
|
|
894
|
+
<pre class="language-html"><code class="language-html"><auro-select layout="snowflake" shape="snowflake" appearance="inverse" required style="width:300px;">
|
|
895
|
+
<span slot="ariaLabel.bib.close">Close Popup</span>
|
|
896
|
+
<span slot="label">Label</span>
|
|
897
|
+
<span slot="helpText">Help Text</span>
|
|
898
|
+
<auro-menu nocheckmark>
|
|
899
|
+
<auro-menuoption value="flights">
|
|
900
|
+
<auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
|
|
901
|
+
</auro-menuoption>
|
|
902
|
+
<auro-menuoption value="cars">
|
|
903
|
+
<auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
|
|
904
|
+
</auro-menuoption>
|
|
905
|
+
<auro-menuoption value="hotels">
|
|
906
|
+
<auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
|
|
907
|
+
</auro-menuoption>
|
|
908
|
+
<auro-menuoption value="packages">
|
|
909
|
+
<auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
|
|
910
|
+
</auro-menuoption>
|
|
911
|
+
<auro-menuoption value="cruises">
|
|
912
|
+
<auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
|
|
913
|
+
</auro-menuoption>
|
|
914
|
+
</auro-menu>
|
|
915
|
+
</auro-select></code></pre>
|
|
938
916
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
939
917
|
</auro-accordion>
|
|
940
918
|
|
|
@@ -943,37 +921,35 @@ The `snowflake` layout is only expected to be used on dark backgrounds, in conju
|
|
|
943
921
|
Sets multi-select mode, allowing multiple options to be selected at once.
|
|
944
922
|
|
|
945
923
|
<div class="exampleWrapper">
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
924
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multi-select.html) -->
|
|
925
|
+
<!-- The below content is automatically added from ./../apiExamples/multi-select.html -->
|
|
926
|
+
<auro-select multiselect>
|
|
927
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
928
|
+
<label slot="placeholder">Select one or more options</label>
|
|
929
|
+
<span slot="label">multiselect select example</span>
|
|
930
|
+
<auro-menu>
|
|
931
|
+
<auro-menuoption value="1">Option 1</auro-menuoption>
|
|
932
|
+
<auro-menuoption value="2">Option 2</auro-menuoption>
|
|
933
|
+
<auro-menuoption value="3">Option 3</auro-menuoption>
|
|
934
|
+
</auro-menu>
|
|
935
|
+
</auro-select>
|
|
936
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
959
937
|
</div>
|
|
960
938
|
<auro-accordion alignRight>
|
|
961
|
-
|
|
939
|
+
<span slot="trigger">See code</span>
|
|
962
940
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multi-select.html) -->
|
|
963
941
|
<!-- The below code snippet is automatically added from ./../apiExamples/multi-select.html -->
|
|
964
942
|
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
</auro-select>
|
|
976
|
-
```
|
|
943
|
+
<pre class="language-html"><code class="language-html"><auro-select multiselect>
|
|
944
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
945
|
+
<label slot="placeholder">Select one or more options</label>
|
|
946
|
+
<span slot="label">multiselect select example</span>
|
|
947
|
+
<auro-menu>
|
|
948
|
+
<auro-menuoption value="1">Option 1</auro-menuoption>
|
|
949
|
+
<auro-menuoption value="2">Option 2</auro-menuoption>
|
|
950
|
+
<auro-menuoption value="3">Option 3</auro-menuoption>
|
|
951
|
+
</auro-menu>
|
|
952
|
+
</auro-select></code></pre>
|
|
977
953
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
978
954
|
</auro-accordion>
|
|
979
955
|
|
|
@@ -982,41 +958,39 @@ Sets multi-select mode, allowing multiple options to be selected at once.
|
|
|
982
958
|
Applying the `noCheckmark` attribute will prevent the checkmark icon from being shown on the selected option. The left padding to reserve space for the checkmark will not be shown.
|
|
983
959
|
|
|
984
960
|
<div class="exampleWrapper">
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
961
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-checkmark.html) -->
|
|
962
|
+
<!-- The below content is automatically added from ./../apiExamples/no-checkmark.html -->
|
|
963
|
+
<auro-select nocheckmark placeholder="Placeholder Text">
|
|
964
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
965
|
+
<span slot="label">Label</span>
|
|
966
|
+
<auro-menu>
|
|
967
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
968
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
969
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
970
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
971
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
972
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
973
|
+
</auro-menu>
|
|
974
|
+
</auro-select>
|
|
975
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1000
976
|
</div>
|
|
1001
977
|
<auro-accordion alignRight>
|
|
1002
|
-
|
|
978
|
+
<span slot="trigger">See code</span>
|
|
1003
979
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-checkmark.html) -->
|
|
1004
980
|
<!-- The below code snippet is automatically added from ./../apiExamples/no-checkmark.html -->
|
|
1005
981
|
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
</auro-select>
|
|
1019
|
-
```
|
|
982
|
+
<pre class="language-html"><code class="language-html"><auro-select nocheckmark placeholder="Placeholder Text">
|
|
983
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
984
|
+
<span slot="label">Label</span>
|
|
985
|
+
<auro-menu>
|
|
986
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
987
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
988
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
989
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
990
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
991
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
992
|
+
</auro-menu>
|
|
993
|
+
</auro-select></code></pre>
|
|
1020
994
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1021
995
|
</auro-accordion>
|
|
1022
996
|
|
|
@@ -1031,125 +1005,123 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
|
|
|
1031
1005
|
- `shift` when enabled, adjusts the bib position when it would overflow the viewport boundaries, ensuring it remains visible.
|
|
1032
1006
|
|
|
1033
1007
|
<div class="exampleWrapper">
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
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
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1008
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/floater-config.html) -->
|
|
1009
|
+
<!-- The below content is automatically added from ./../apiExamples/floater-config.html -->
|
|
1010
|
+
<div style="width: 350px">
|
|
1011
|
+
<auro-select offset="20" noFlip placement="bottom-end">
|
|
1012
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1013
|
+
<span slot="label">Label</span>
|
|
1014
|
+
<span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
|
|
1015
|
+
<auro-menu>
|
|
1016
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1017
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1018
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1019
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1020
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1021
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1022
|
+
</auro-menu>
|
|
1023
|
+
</auro-select>
|
|
1024
|
+
<auro-select offset="20" placement="bottom-end">
|
|
1025
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1026
|
+
<span slot="label">Label</span>
|
|
1027
|
+
<span slot="helpText">bottom-end bib with 20px offset and flip</span>
|
|
1028
|
+
<auro-menu>
|
|
1029
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1030
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1031
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1032
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1033
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1034
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1035
|
+
</auro-menu>
|
|
1036
|
+
</auro-select>
|
|
1037
|
+
<auro-select offset="20" noFlip placement="right">
|
|
1038
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1039
|
+
<span slot="label">Label</span>
|
|
1040
|
+
<span slot="helpText">right bib with 20px offset and noFlip</span>
|
|
1041
|
+
<auro-menu>
|
|
1042
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1043
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1044
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1045
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1046
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1047
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1048
|
+
</auro-menu>
|
|
1049
|
+
</auro-select>
|
|
1050
|
+
<auro-select width="350px" offset="20" noFlip placement="bottom-start" shift>
|
|
1051
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1052
|
+
<span slot="label">Label</span>
|
|
1053
|
+
<span slot="helpText">bottom-start bib with 20px offset, noFlip and shift</span>
|
|
1054
|
+
<auro-menu>
|
|
1055
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1056
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1057
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1058
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1059
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1060
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1061
|
+
</auro-menu>
|
|
1062
|
+
</auro-select>
|
|
1063
|
+
</div>
|
|
1064
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1091
1065
|
</div>
|
|
1092
1066
|
<auro-accordion alignRight>
|
|
1093
|
-
|
|
1067
|
+
<span slot="trigger">See code</span>
|
|
1094
1068
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/floater-config.html) -->
|
|
1095
1069
|
<!-- The below code snippet is automatically added from ./../apiExamples/floater-config.html -->
|
|
1096
1070
|
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
</div>
|
|
1152
|
-
```
|
|
1071
|
+
<pre class="language-html"><code class="language-html"><div style="width: 350px">
|
|
1072
|
+
<auro-select offset="20" noFlip placement="bottom-end">
|
|
1073
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1074
|
+
<span slot="label">Label</span>
|
|
1075
|
+
<span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
|
|
1076
|
+
<auro-menu>
|
|
1077
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1078
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1079
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1080
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1081
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1082
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1083
|
+
</auro-menu>
|
|
1084
|
+
</auro-select>
|
|
1085
|
+
<auro-select offset="20" placement="bottom-end">
|
|
1086
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1087
|
+
<span slot="label">Label</span>
|
|
1088
|
+
<span slot="helpText">bottom-end bib with 20px offset and flip</span>
|
|
1089
|
+
<auro-menu>
|
|
1090
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1091
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1092
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1093
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1094
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1095
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1096
|
+
</auro-menu>
|
|
1097
|
+
</auro-select>
|
|
1098
|
+
<auro-select offset="20" noFlip placement="right">
|
|
1099
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1100
|
+
<span slot="label">Label</span>
|
|
1101
|
+
<span slot="helpText">right bib with 20px offset and noFlip</span>
|
|
1102
|
+
<auro-menu>
|
|
1103
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1104
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1105
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1106
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1107
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1108
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1109
|
+
</auro-menu>
|
|
1110
|
+
</auro-select>
|
|
1111
|
+
<auro-select width="350px" offset="20" noFlip placement="bottom-start" shift>
|
|
1112
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1113
|
+
<span slot="label">Label</span>
|
|
1114
|
+
<span slot="helpText">bottom-start bib with 20px offset, noFlip and shift</span>
|
|
1115
|
+
<auro-menu>
|
|
1116
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1117
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1118
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1119
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1120
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1121
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1122
|
+
</auro-menu>
|
|
1123
|
+
</auro-select>
|
|
1124
|
+
</div></code></pre>
|
|
1153
1125
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1154
1126
|
</auro-accordion>
|
|
1155
1127
|
|
|
@@ -1158,41 +1130,39 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
|
|
|
1158
1130
|
Use the `placeholder` attribute to inject a custom placeholder option with the select element.
|
|
1159
1131
|
|
|
1160
1132
|
<div class="exampleWrapper">
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1133
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/placeholder.html) -->
|
|
1134
|
+
<!-- The below content is automatically added from ./../apiExamples/placeholder.html -->
|
|
1135
|
+
<auro-select placeholder="Please select your preferred option">
|
|
1136
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1137
|
+
<span slot="label">Label</span>
|
|
1138
|
+
<auro-menu>
|
|
1139
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1140
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1141
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1142
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1143
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1144
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1145
|
+
</auro-menu>
|
|
1146
|
+
</auro-select>
|
|
1147
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1176
1148
|
</div>
|
|
1177
1149
|
<auro-accordion alignRight>
|
|
1178
|
-
|
|
1150
|
+
<span slot="trigger">See code</span>
|
|
1179
1151
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/placeholder.html) -->
|
|
1180
1152
|
<!-- The below code snippet is automatically added from ./../apiExamples/placeholder.html -->
|
|
1181
1153
|
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
</auro-select>
|
|
1195
|
-
```
|
|
1154
|
+
<pre class="language-html"><code class="language-html"><auro-select placeholder="Please select your preferred option">
|
|
1155
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1156
|
+
<span slot="label">Label</span>
|
|
1157
|
+
<auro-menu>
|
|
1158
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1159
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1160
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1161
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1162
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1163
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1164
|
+
</auro-menu>
|
|
1165
|
+
</auro-select></code></pre>
|
|
1196
1166
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1197
1167
|
</auro-accordion>
|
|
1198
1168
|
|
|
@@ -1203,41 +1173,39 @@ When present, the `required` attribute specifies that a select field must be fil
|
|
|
1203
1173
|
When the validity check fails the validityState, equals `valueMissing`. The error message for the `valueMissing` validityState can be set to a custom string using the `setCustomValidityValueMissing`. There is no default error message defined.
|
|
1204
1174
|
|
|
1205
1175
|
<div class="exampleWrapper">
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1176
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
|
|
1177
|
+
<!-- The below content is automatically added from ./../apiExamples/required.html -->
|
|
1178
|
+
<auro-select required setCustomValidityValueMissing="Custom required validation error message." placeholder="Placeholder Text">
|
|
1179
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1180
|
+
<span slot="label">Label</span>
|
|
1181
|
+
<auro-menu>
|
|
1182
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1183
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1184
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1185
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1186
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1187
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1188
|
+
</auro-menu>
|
|
1189
|
+
</auro-select>
|
|
1190
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1221
1191
|
</div>
|
|
1222
1192
|
<auro-accordion alignRight>
|
|
1223
|
-
|
|
1193
|
+
<span slot="trigger">See code</span>
|
|
1224
1194
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
|
|
1225
1195
|
<!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
|
|
1226
1196
|
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
</auro-select>
|
|
1240
|
-
```
|
|
1197
|
+
<pre class="language-html"><code class="language-html"><auro-select required setCustomValidityValueMissing="Custom required validation error message." placeholder="Placeholder Text">
|
|
1198
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1199
|
+
<span slot="label">Label</span>
|
|
1200
|
+
<auro-menu>
|
|
1201
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1202
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1203
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1204
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1205
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1206
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1207
|
+
</auro-menu>
|
|
1208
|
+
</auro-select></code></pre>
|
|
1241
1209
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1242
1210
|
</auro-accordion>
|
|
1243
1211
|
|
|
@@ -1248,64 +1216,60 @@ Use the `value` property to define a preset value on the `auro-select` element.
|
|
|
1248
1216
|
To pre-set the value of auro-select on load, use the `value` property. The `selected` attribute on auro-menuoption is designed to illustrate state in the DOM.
|
|
1249
1217
|
|
|
1250
1218
|
<div class="exampleWrapper">
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1219
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/value.html) -->
|
|
1220
|
+
<!-- The below content is automatically added from ./../apiExamples/value.html -->
|
|
1221
|
+
<auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
|
|
1222
|
+
<auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
|
|
1223
|
+
<br/><br/>
|
|
1224
|
+
<auro-select id="valueExample" multiselect value='["price", "duration"]'>
|
|
1225
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1226
|
+
<span slot="label">Name</span>
|
|
1227
|
+
<auro-menu>
|
|
1228
|
+
<auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
|
|
1229
|
+
<auro-menuoption id="option-1" value="price">Price</auro-menuoption>
|
|
1230
|
+
<auro-menuoption id="option-2" value="duration">Duration</auro-menuoption>
|
|
1231
|
+
<auro-menuoption id="option-3" value="departure">Departure</auro-menuoption>
|
|
1232
|
+
<auro-menuoption id="option-4" value="arrival">Arrival</auro-menuoption>
|
|
1233
|
+
<auro-menuoption id="option-5" value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1234
|
+
</auro-menu>
|
|
1235
|
+
</auro-select>
|
|
1236
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1269
1237
|
</div>
|
|
1270
1238
|
<auro-accordion alignRight>
|
|
1271
|
-
|
|
1239
|
+
<span slot="trigger">See code</span>
|
|
1272
1240
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/value.html) -->
|
|
1273
1241
|
<!-- The below code snippet is automatically added from ./../apiExamples/value.html -->
|
|
1274
1242
|
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
</auro-select>
|
|
1291
|
-
```
|
|
1243
|
+
<pre class="language-html"><code class="language-html"><auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
|
|
1244
|
+
<auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
|
|
1245
|
+
<br/><br/>
|
|
1246
|
+
<auro-select id="valueExample" multiselect value='["price", "duration"]'>
|
|
1247
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1248
|
+
<span slot="label">Name</span>
|
|
1249
|
+
<auro-menu>
|
|
1250
|
+
<auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
|
|
1251
|
+
<auro-menuoption id="option-1" value="price">Price</auro-menuoption>
|
|
1252
|
+
<auro-menuoption id="option-2" value="duration">Duration</auro-menuoption>
|
|
1253
|
+
<auro-menuoption id="option-3" value="departure">Departure</auro-menuoption>
|
|
1254
|
+
<auro-menuoption id="option-4" value="arrival">Arrival</auro-menuoption>
|
|
1255
|
+
<auro-menuoption id="option-5" value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1256
|
+
</auro-menu>
|
|
1257
|
+
</auro-select></code></pre>
|
|
1292
1258
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1293
1259
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/value.js) -->
|
|
1294
1260
|
<!-- The below code snippet is automatically added from ./../apiExamples/value.js -->
|
|
1295
1261
|
|
|
1296
|
-
|
|
1297
|
-
export function valueExample() {
|
|
1262
|
+
<pre class="language-js"><code class="language-js">export function valueExample() {
|
|
1298
1263
|
const valueExample = document.querySelector('#valueExample');
|
|
1299
|
-
|
|
1300
|
-
document.querySelector('#validValueExampleBtn').addEventListener('click', ()
|
|
1264
|
+
|
|
1265
|
+
document.querySelector('#validValueExampleBtn').addEventListener('click', () => {
|
|
1301
1266
|
valueExample.value = '["arrival", "prefer alaska"]';
|
|
1302
1267
|
});
|
|
1303
|
-
|
|
1304
|
-
document.querySelector('#invalidValueExampleBtn').addEventListener('click', ()
|
|
1268
|
+
|
|
1269
|
+
document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => {
|
|
1305
1270
|
valueExample.value = '["flight course"]';
|
|
1306
1271
|
});
|
|
1307
|
-
}
|
|
1308
|
-
```
|
|
1272
|
+
}</code></pre>
|
|
1309
1273
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1310
1274
|
</auro-accordion>
|
|
1311
1275
|
|
|
@@ -1316,58 +1280,54 @@ export function valueExample() {
|
|
|
1316
1280
|
Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
|
|
1317
1281
|
|
|
1318
1282
|
<div class="exampleWrapper">
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1283
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
|
|
1284
|
+
<!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
|
|
1285
|
+
<auro-button id="resetStateBtn">Reset</auro-button>
|
|
1286
|
+
<br/><br/>
|
|
1287
|
+
<auro-select id="resetStateExample" value="price">
|
|
1288
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1289
|
+
<span slot="label">Label</span>
|
|
1290
|
+
<auro-menu>
|
|
1291
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1292
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1293
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1294
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1295
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1296
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1297
|
+
</auro-menu>
|
|
1298
|
+
</auro-select>
|
|
1299
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1336
1300
|
</div>
|
|
1337
1301
|
<auro-accordion alignRight>
|
|
1338
|
-
|
|
1302
|
+
<span slot="trigger">See code</span>
|
|
1339
1303
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.html) -->
|
|
1340
1304
|
<!-- The below code snippet is automatically added from ./../apiExamples/reset-state.html -->
|
|
1341
1305
|
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
</auro-select>
|
|
1357
|
-
```
|
|
1306
|
+
<pre class="language-html"><code class="language-html"><auro-button id="resetStateBtn">Reset</auro-button>
|
|
1307
|
+
<br/><br/>
|
|
1308
|
+
<auro-select id="resetStateExample" value="price">
|
|
1309
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1310
|
+
<span slot="label">Label</span>
|
|
1311
|
+
<auro-menu>
|
|
1312
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1313
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1314
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1315
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1316
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1317
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1318
|
+
</auro-menu>
|
|
1319
|
+
</auro-select></code></pre>
|
|
1358
1320
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1359
1321
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.js) -->
|
|
1360
1322
|
<!-- The below code snippet is automatically added from ./../apiExamples/reset-state.js -->
|
|
1361
1323
|
|
|
1362
|
-
|
|
1363
|
-
export function resetStateExample() {
|
|
1324
|
+
<pre class="language-js"><code class="language-js">export function resetStateExample() {
|
|
1364
1325
|
const elem = document.querySelector('#resetStateExample');
|
|
1365
|
-
|
|
1366
|
-
document.querySelector('#resetStateBtn').addEventListener('click', ()
|
|
1326
|
+
|
|
1327
|
+
document.querySelector('#resetStateBtn').addEventListener('click', () => {
|
|
1367
1328
|
elem.reset();
|
|
1368
1329
|
});
|
|
1369
|
-
}
|
|
1370
|
-
```
|
|
1330
|
+
}</code></pre>
|
|
1371
1331
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1372
1332
|
</auro-accordion>
|
|
1373
1333
|
|
|
@@ -1376,59 +1336,55 @@ export function resetStateExample() {
|
|
|
1376
1336
|
Use the `updateActiveOption(index)` method to programmatically set the active option in the menu.
|
|
1377
1337
|
|
|
1378
1338
|
<div class="exampleWrapper">
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1339
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/update-active-option.html) -->
|
|
1340
|
+
<!-- The below content is automatically added from ./../apiExamples/update-active-option.html -->
|
|
1341
|
+
<auro-select id="updateActiveOptionExample">
|
|
1342
|
+
<span slot="ariaLabel.bib.close">Close Popup</span>
|
|
1343
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1344
|
+
<span slot="label">Select Example</span>
|
|
1345
|
+
<auro-menu>
|
|
1346
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1347
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1348
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1349
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1350
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1351
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1352
|
+
</auro-menu>
|
|
1353
|
+
</auro-select>
|
|
1354
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1395
1355
|
</div>
|
|
1396
1356
|
<auro-accordion alignRight>
|
|
1397
|
-
|
|
1357
|
+
<span slot="trigger">See code</span>
|
|
1398
1358
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/update-active-option.html) -->
|
|
1399
1359
|
<!-- The below code snippet is automatically added from ./../apiExamples/update-active-option.html -->
|
|
1400
1360
|
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
</auro-select>
|
|
1415
|
-
```
|
|
1361
|
+
<pre class="language-html"><code class="language-html"><auro-select id="updateActiveOptionExample">
|
|
1362
|
+
<span slot="ariaLabel.bib.close">Close Popup</span>
|
|
1363
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1364
|
+
<span slot="label">Select Example</span>
|
|
1365
|
+
<auro-menu>
|
|
1366
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1367
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1368
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1369
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1370
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1371
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1372
|
+
</auro-menu>
|
|
1373
|
+
</auro-select></code></pre>
|
|
1416
1374
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1417
1375
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/update-active-option.js) -->
|
|
1418
1376
|
<!-- The below code snippet is automatically added from ./../apiExamples/update-active-option.js -->
|
|
1419
1377
|
|
|
1420
|
-
|
|
1421
|
-
export function updateActiveOptionExample() {
|
|
1378
|
+
<pre class="language-js"><code class="language-js">export function updateActiveOptionExample() {
|
|
1422
1379
|
const select = document.getElementById('updateActiveOptionExample');
|
|
1423
1380
|
const dropdown = select.dropdown;
|
|
1424
|
-
|
|
1425
|
-
dropdown.addEventListener('auroDropdown-toggled', ()
|
|
1381
|
+
|
|
1382
|
+
dropdown.addEventListener('auroDropdown-toggled', () => {
|
|
1426
1383
|
if (dropdown.isPopoverVisible) {
|
|
1427
1384
|
select.updateActiveOption(2); // Set the active option to the third item (index 2)
|
|
1428
1385
|
}
|
|
1429
1386
|
});
|
|
1430
|
-
}
|
|
1431
|
-
```
|
|
1387
|
+
}</code></pre>
|
|
1432
1388
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1433
1389
|
</auro-accordion>
|
|
1434
1390
|
|
|
@@ -1445,67 +1401,65 @@ The custom display value content is inserted using `slot="displayValue"` on each
|
|
|
1445
1401
|
The following example demonstrates menu options with an icon and text. When selected, the auro-select renders an icon with no text.
|
|
1446
1402
|
|
|
1447
1403
|
<div class="exampleWrapper">
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1404
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/constant-display-value.html) -->
|
|
1405
|
+
<!-- The below content is automatically added from ./../apiExamples/emphasized/constant-display-value.html -->
|
|
1406
|
+
<auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
|
|
1407
|
+
<span slot="label">Select Example</span>
|
|
1408
|
+
<auro-menu nocheckmark>
|
|
1409
|
+
<auro-menuoption value="flights">
|
|
1410
|
+
<auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
|
|
1411
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
|
|
1412
|
+
</auro-menuoption>
|
|
1413
|
+
<auro-menuoption value="cars">
|
|
1414
|
+
<auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
|
|
1415
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
|
|
1416
|
+
</auro-menuoption>
|
|
1417
|
+
<auro-menuoption value="hotels">
|
|
1418
|
+
<auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
|
|
1419
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
|
|
1420
|
+
</auro-menuoption>
|
|
1421
|
+
<auro-menuoption value="packages">
|
|
1422
|
+
<auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
|
|
1423
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
|
|
1424
|
+
</auro-menuoption>
|
|
1425
|
+
<auro-menuoption value="cruises">
|
|
1426
|
+
<auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
|
|
1427
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
|
|
1428
|
+
</auro-menuoption>
|
|
1429
|
+
</auro-menu>
|
|
1430
|
+
</auro-select>
|
|
1431
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1476
1432
|
</div>
|
|
1477
1433
|
<auro-accordion alignRight>
|
|
1478
|
-
|
|
1434
|
+
<span slot="trigger">See code</span>
|
|
1479
1435
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/constant-display-value.html) -->
|
|
1480
1436
|
<!-- The below code snippet is automatically added from ./../apiExamples/emphasized/constant-display-value.html -->
|
|
1481
1437
|
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
</auro-select>
|
|
1508
|
-
```
|
|
1438
|
+
<pre class="language-html"><code class="language-html"><auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
|
|
1439
|
+
<span slot="label">Select Example</span>
|
|
1440
|
+
<auro-menu nocheckmark>
|
|
1441
|
+
<auro-menuoption value="flights">
|
|
1442
|
+
<auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
|
|
1443
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
|
|
1444
|
+
</auro-menuoption>
|
|
1445
|
+
<auro-menuoption value="cars">
|
|
1446
|
+
<auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
|
|
1447
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
|
|
1448
|
+
</auro-menuoption>
|
|
1449
|
+
<auro-menuoption value="hotels">
|
|
1450
|
+
<auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
|
|
1451
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
|
|
1452
|
+
</auro-menuoption>
|
|
1453
|
+
<auro-menuoption value="packages">
|
|
1454
|
+
<auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
|
|
1455
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
|
|
1456
|
+
</auro-menuoption>
|
|
1457
|
+
<auro-menuoption value="cruises">
|
|
1458
|
+
<auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
|
|
1459
|
+
<auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
|
|
1460
|
+
</auro-menuoption>
|
|
1461
|
+
</auro-menu>
|
|
1462
|
+
</auro-select></code></pre>
|
|
1509
1463
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1510
1464
|
</auro-accordion>
|
|
1511
1465
|
|
|
@@ -1514,43 +1468,41 @@ The following example demonstrates menu options with an icon and text. When sele
|
|
|
1514
1468
|
Use the `helpText` slot to provide additional information back to your user about their selection option(s).
|
|
1515
1469
|
|
|
1516
1470
|
<div class="exampleWrapper">
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1471
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/help-text.html) -->
|
|
1472
|
+
<!-- The below content is automatically added from ./../apiExamples/help-text.html -->
|
|
1473
|
+
<auro-select placeholder="Placeholder Text">
|
|
1474
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1475
|
+
<span slot="label">Label</span>
|
|
1476
|
+
<span slot="helpText">Custom help text message.</span>
|
|
1477
|
+
<auro-menu>
|
|
1478
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1479
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1480
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1481
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1482
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1483
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1484
|
+
</auro-menu>
|
|
1485
|
+
</auro-select>
|
|
1486
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1533
1487
|
</div>
|
|
1534
1488
|
<auro-accordion alignRight>
|
|
1535
|
-
|
|
1489
|
+
<span slot="trigger">See code</span>
|
|
1536
1490
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/help-text.html) -->
|
|
1537
1491
|
<!-- The below code snippet is automatically added from ./../apiExamples/help-text.html -->
|
|
1538
1492
|
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
</auro-select>
|
|
1553
|
-
```
|
|
1493
|
+
<pre class="language-html"><code class="language-html"><auro-select placeholder="Placeholder Text">
|
|
1494
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1495
|
+
<span slot="label">Label</span>
|
|
1496
|
+
<span slot="helpText">Custom help text message.</span>
|
|
1497
|
+
<auro-menu>
|
|
1498
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1499
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1500
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1501
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1502
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1503
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1504
|
+
</auro-menu>
|
|
1505
|
+
</auro-select></code></pre>
|
|
1554
1506
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1555
1507
|
</auro-accordion>
|
|
1556
1508
|
|
|
@@ -1559,41 +1511,39 @@ Use the `helpText` slot to provide additional information back to your user abou
|
|
|
1559
1511
|
Use the `label` slot to give your users contextual information about their selection options. This `label` content is also helpful for assistive devices.
|
|
1560
1512
|
|
|
1561
1513
|
<div class="exampleWrapper">
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1514
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/label.html) -->
|
|
1515
|
+
<!-- The below content is automatically added from ./../apiExamples/label.html -->
|
|
1516
|
+
<auro-select>
|
|
1517
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1518
|
+
<span slot="label">Please select a preference</span>
|
|
1519
|
+
<auro-menu>
|
|
1520
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1521
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1522
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1523
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1524
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1525
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1526
|
+
</auro-menu>
|
|
1527
|
+
</auro-select>
|
|
1528
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1577
1529
|
</div>
|
|
1578
1530
|
<auro-accordion alignRight>
|
|
1579
|
-
|
|
1531
|
+
<span slot="trigger">See code</span>
|
|
1580
1532
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/label.html) -->
|
|
1581
1533
|
<!-- The below code snippet is automatically added from ./../apiExamples/label.html -->
|
|
1582
1534
|
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
</auro-select>
|
|
1596
|
-
```
|
|
1535
|
+
<pre class="language-html"><code class="language-html"><auro-select>
|
|
1536
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1537
|
+
<span slot="label">Please select a preference</span>
|
|
1538
|
+
<auro-menu>
|
|
1539
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1540
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1541
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1542
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1543
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1544
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1545
|
+
</auro-menu>
|
|
1546
|
+
</auro-select></code></pre>
|
|
1597
1547
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1598
1548
|
</auro-accordion>
|
|
1599
1549
|
|
|
@@ -1602,43 +1552,41 @@ Use the `label` slot to give your users contextual information about their selec
|
|
|
1602
1552
|
The `<auro-select>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
|
|
1603
1553
|
|
|
1604
1554
|
<div class="exampleWrapper">
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1555
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optional-label.html) -->
|
|
1556
|
+
<!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
|
|
1557
|
+
<auro-select>
|
|
1558
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1559
|
+
<span slot="label">Please select a preference</span>
|
|
1560
|
+
<span slot="optionalLabel" style="color: grey; font-size: small"> - optional</span>
|
|
1561
|
+
<auro-menu>
|
|
1562
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1563
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1564
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1565
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1566
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1567
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1568
|
+
</auro-menu>
|
|
1569
|
+
</auro-select>
|
|
1570
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1621
1571
|
</div>
|
|
1622
1572
|
<auro-accordion alignRight>
|
|
1623
|
-
|
|
1573
|
+
<span slot="trigger">See code</span>
|
|
1624
1574
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optional-label.html) -->
|
|
1625
1575
|
<!-- The below code snippet is automatically added from ./../apiExamples/optional-label.html -->
|
|
1626
1576
|
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
</auro-select>
|
|
1641
|
-
```
|
|
1577
|
+
<pre class="language-html"><code class="language-html"><auro-select>
|
|
1578
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1579
|
+
<span slot="label">Please select a preference</span>
|
|
1580
|
+
<span slot="optionalLabel" style="color: grey; font-size: small"> - optional</span>
|
|
1581
|
+
<auro-menu>
|
|
1582
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1583
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1584
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1585
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1586
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1587
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
1588
|
+
</auro-menu>
|
|
1589
|
+
</auro-select></code></pre>
|
|
1642
1590
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1643
1591
|
</auro-accordion>
|
|
1644
1592
|
|
|
@@ -1651,291 +1599,289 @@ This example shows how to set a custom height for the bib from `<auro-dropdown>`
|
|
|
1651
1599
|
Custom height dimensions are set by using the `dropdownSize` CSS Part and then applying a `max-height` rule and value.
|
|
1652
1600
|
|
|
1653
1601
|
<div class="exampleWrapper">
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
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
|
-
|
|
1602
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom-bib-height.html) -->
|
|
1603
|
+
<!-- The below content is automatically added from ../apiExamples/custom-bib-height.html -->
|
|
1604
|
+
<auro-select id="customBibHeightExample" value="pit">
|
|
1605
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1606
|
+
<span slot="label">Label</span>
|
|
1607
|
+
<auro-menu>
|
|
1608
|
+
<auro-menuoption value="fca" id="airport-fca" suggest="fca montana kalispell">glacier park international</auro-menuoption>
|
|
1609
|
+
<auro-menuoption value="sfo" id="airport-sfo" suggest="sfo california san francisco">san francisco international</auro-menuoption>
|
|
1610
|
+
<auro-menuoption value="boi" id="airport-boi" suggest="boi idaho boise">gowen field</auro-menuoption>
|
|
1611
|
+
<auro-menuoption value="stl" id="airport-stl" suggest="stl missouri st louis">lambert st louis international</auro-menuoption>
|
|
1612
|
+
<auro-menuoption value="ylw" id="airport-ylw" suggest="ylw british columbia kelowna">kelowna international</auro-menuoption>
|
|
1613
|
+
<auro-menuoption value="ykm" id="airport-ykm" suggest="ykm washington yakima">yakima air terminal</auro-menuoption>
|
|
1614
|
+
<auro-menuoption value="puw" id="airport-puw" suggest="puw washington pullman">pullman moscow regional</auro-menuoption>
|
|
1615
|
+
<auro-menuoption value="yeg" id="airport-yeg" suggest="yeg alberta edmonton">edmonton international</auro-menuoption>
|
|
1616
|
+
<auro-menuoption value="tpa" id="airport-tpa" suggest="tpa florida tampa">tampa international</auro-menuoption>
|
|
1617
|
+
<auro-menuoption value="msp" id="airport-msp" suggest="msp minnesota minneapolis">minneapolis st paul international</auro-menuoption>
|
|
1618
|
+
<auro-menuoption value="ida" id="airport-ida" suggest="ida idaho idaho falls">idaho falls regional airport</auro-menuoption>
|
|
1619
|
+
<auro-menuoption value="mfr" id="airport-mfr" suggest="mfr oregon medford">rogue valley international</auro-menuoption>
|
|
1620
|
+
<auro-menuoption value="psp" id="airport-psp" suggest="psp california palm springs">palm springs international</auro-menuoption>
|
|
1621
|
+
<auro-menuoption value="lir" id="airport-lir" suggest="lir guanacaste liberia">guanacaste airport</auro-menuoption>
|
|
1622
|
+
<auro-menuoption value="oak" id="airport-oak" suggest="oak california oakland">oakland international</auro-menuoption>
|
|
1623
|
+
<auro-menuoption value="bos" id="airport-bos" suggest="bos massachusetts boston">logan international</auro-menuoption>
|
|
1624
|
+
<auro-menuoption value="bwi" id="airport-bwi" suggest="bwi maryland baltimore">thurgood marshall international</auro-menuoption>
|
|
1625
|
+
<auro-menuoption value="dal" id="airport-dal" suggest="dal texas dallas">dallas love field</auro-menuoption>
|
|
1626
|
+
<auro-menuoption value="sba" id="airport-sba" suggest="sba california santa barbara">santa barbara municipal</auro-menuoption>
|
|
1627
|
+
<auro-menuoption value="mci" id="airport-mci" suggest="mci missouri kansas city">kansas city international</auro-menuoption>
|
|
1628
|
+
<auro-menuoption value="koa" id="airport-koa" suggest="koa hawaii kona">kona international</auro-menuoption>
|
|
1629
|
+
<auro-menuoption value="pvr" id="airport-pvr" suggest="pvr jalisco puerto vallarta">licenciado gustavo diaz ordaz international</auro-menuoption>
|
|
1630
|
+
<auro-menuoption value="wrg" id="airport-wrg" suggest="wrg alaska wrangell">wrangell</auro-menuoption>
|
|
1631
|
+
<auro-menuoption value="scc" id="airport-scc" suggest="scc alaska prudhoe bay">deadhorse</auro-menuoption>
|
|
1632
|
+
<auro-menuoption value="lto" id="airport-lto" suggest="lto baja california loreto">loreto international</auro-menuoption>
|
|
1633
|
+
<auro-menuoption value="ome" id="airport-ome" suggest="ome alaska nome">nome</auro-menuoption>
|
|
1634
|
+
<auro-menuoption value="ict" id="airport-ict" suggest="ict kansas wichita">dwight d eisenhower national</auro-menuoption>
|
|
1635
|
+
<auro-menuoption value="phl" id="airport-phl" suggest="phl pennsylvania philadelphia">philadelphia international</auro-menuoption>
|
|
1636
|
+
<auro-menuoption value="dfw" id="airport-dfw" suggest="dfw texas dallas">dallas fort worth international</auro-menuoption>
|
|
1637
|
+
<auro-menuoption value="ind" id="airport-ind" suggest="ind indiana indianapolis">indianapolis international</auro-menuoption>
|
|
1638
|
+
<auro-menuoption value="smf" id="airport-smf" suggest="smf california sacramento">sacramento international</auro-menuoption>
|
|
1639
|
+
<auro-menuoption value="sit" id="airport-sit" suggest="sit alaska sitka">rocky gutierrez</auro-menuoption>
|
|
1640
|
+
<auro-menuoption value="dut" id="airport-dut" suggest="dut alaska dutch harbor">unalaska</auro-menuoption>
|
|
1641
|
+
<auro-menuoption value="cdv" id="airport-cdv" suggest="cdv alaska cordova">merle mudhole smith</auro-menuoption>
|
|
1642
|
+
<auro-menuoption value="psg" id="airport-psg" suggest="psg alaska petersburg">james a johnson</auro-menuoption>
|
|
1643
|
+
<auro-menuoption value="bna" id="airport-bna" suggest="bna tennessee nashville">nashville international</auro-menuoption>
|
|
1644
|
+
<auro-menuoption value="geg" id="airport-geg" suggest="geg washington spokane">spokane international</auro-menuoption>
|
|
1645
|
+
<auro-menuoption value="ktn" id="airport-ktn" suggest="ktn alaska ketchikan">ketchikan international</auro-menuoption>
|
|
1646
|
+
<auro-menuoption value="pit" id="airport-pit" suggest="pit pennsylvania pittsburgh">pittsburgh international</auro-menuoption>
|
|
1647
|
+
<auro-menuoption value="sbp" id="airport-sbp" suggest="sbp california san luis obispo">san luis obispo regional</auro-menuoption>
|
|
1648
|
+
<auro-menuoption value="bur" id="airport-bur" suggest="bur california burbank">hollywood burbank</auro-menuoption>
|
|
1649
|
+
<auro-menuoption value="msy" id="airport-msy" suggest="msy louisiana new orleans">louis armstrong international</auro-menuoption>
|
|
1650
|
+
<auro-menuoption value="pae" id="airport-pae" suggest="pae washington everett">paine field</auro-menuoption>
|
|
1651
|
+
<auro-menuoption value="cvg" id="airport-cvg" suggest="cvg ohio cincinnati">cincinnati northern kentucky international</auro-menuoption>
|
|
1652
|
+
<auro-menuoption value="yak" id="airport-yak" suggest="yak alaska yakutat">yakutat</auro-menuoption>
|
|
1653
|
+
<auro-menuoption value="pdx" id="airport-pdx" suggest="pdx oregon portland">portland international</auro-menuoption>
|
|
1654
|
+
<auro-menuoption value="anc" id="airport-anc" suggest="anc alaska anchorage">ted stevens</auro-menuoption>
|
|
1655
|
+
<auro-menuoption value="sea" id="airport-sea" suggest="sea washington seattle">seattle tacoma international</auro-menuoption>
|
|
1656
|
+
<auro-menuoption value="san" id="airport-san" suggest="san california san diego">san diego international</auro-menuoption>
|
|
1657
|
+
<auro-menuoption value="sat" id="airport-sat" suggest="sat texas san antonio">san antonio international</auro-menuoption>
|
|
1658
|
+
<auro-menuoption value="fat" id="airport-fat" suggest="fat california fresno">fresno yosemite international</auro-menuoption>
|
|
1659
|
+
<auro-menuoption value="aus" id="airport-aus" suggest="aus texas austin">austin bergstrom international</auro-menuoption>
|
|
1660
|
+
<auro-menuoption value="ord" id="airport-ord" suggest="ord illinois chicago">ohare international</auro-menuoption>
|
|
1661
|
+
<auro-menuoption value="gdl" id="airport-gdl" suggest="gdl jalisco guadalajara">guadalajara international</auro-menuoption>
|
|
1662
|
+
<auro-menuoption value="sjc" id="airport-sjc" suggest="sjc california san jose">san jose international</auro-menuoption>
|
|
1663
|
+
<auro-menuoption value="jnu" id="airport-jnu" suggest="jnu alaska juneau">juneau international</auro-menuoption>
|
|
1664
|
+
<auro-menuoption value="rdm" id="airport-rdm" suggest="rdm oregon redmond">roberts field</auro-menuoption>
|
|
1665
|
+
<auro-menuoption value="sts" id="airport-sts" suggest="sts california sonoma">charles m schulz</auro-menuoption>
|
|
1666
|
+
<auro-menuoption value="fai" id="airport-fai" suggest="fai alaska fairbanks">fairbanks international</auro-menuoption>
|
|
1667
|
+
<auro-menuoption value="rdu" id="airport-rdu" suggest="rdu north carolina raleigh">raleigh durham international</auro-menuoption>
|
|
1668
|
+
<auro-menuoption value="oma" id="airport-oma" suggest="oma nebraska omaha">eppley airfield</auro-menuoption>
|
|
1669
|
+
<auro-menuoption value="bzn" id="airport-bzn" suggest="bzn montana bozeman">bozeman yellowstone international</auro-menuoption>
|
|
1670
|
+
<auro-menuoption value="ont" id="airport-ont" suggest="ont california ontario">ontario international</auro-menuoption>
|
|
1671
|
+
<auro-menuoption value="ogg" id="airport-ogg" suggest="ogg hawaii maui">kahului international</auro-menuoption>
|
|
1672
|
+
<auro-menuoption value="sun" id="airport-sun" suggest="sun idaho sun valley">friedman memorial</auro-menuoption>
|
|
1673
|
+
<auro-menuoption value="mzt" id="airport-mzt" suggest="mzt sinaloa mazatlan">general rafael buelna international</auro-menuoption>
|
|
1674
|
+
<auro-menuoption value="dlg" id="airport-dlg" suggest="dlg alaska dillingham">dillingham</auro-menuoption>
|
|
1675
|
+
<auro-menuoption value="adq" id="airport-adq" suggest="adq alaska kodiak">kodiak</auro-menuoption>
|
|
1676
|
+
<auro-menuoption value="den" id="airport-den" suggest="den colorado denver">denver international</auro-menuoption>
|
|
1677
|
+
<auro-menuoption value="zlo" id="airport-zlo" suggest="zlo colima manzanillo">manzanillo international</auro-menuoption>
|
|
1678
|
+
<auro-menuoption value="sjd" id="airport-sjd" suggest="sjd baja california los cabos">los cabos international</auro-menuoption>
|
|
1679
|
+
<auro-menuoption value="elp" id="airport-elp" suggest="elp texas el paso">el paso international airport</auro-menuoption>
|
|
1680
|
+
<auro-menuoption value="atl" id="airport-atl" suggest="atl georgia atlanta">hartsfield jackson international</auro-menuoption>
|
|
1681
|
+
<auro-menuoption value="lax" id="airport-lax" suggest="lax california los angeles">los angeles international</auro-menuoption>
|
|
1682
|
+
<auro-menuoption value="rsw" id="airport-rsw" suggest="rsw florida fort myers">southwest florida international</auro-menuoption>
|
|
1683
|
+
<auro-menuoption value="cle" id="airport-cle" suggest="cle ohio cleveland">cleveland hopkins international airport</auro-menuoption>
|
|
1684
|
+
<auro-menuoption value="otz" id="airport-otz" suggest="otz alaska kotzebue">ralph wien memorial</auro-menuoption>
|
|
1685
|
+
<auro-menuoption value="bze" id="airport-bze" suggest="bze belize belize city">philip sw goldson international airport</auro-menuoption>
|
|
1686
|
+
<auro-menuoption value="eat" id="airport-eat" suggest="eat washington wenatchee">pangborn memorial</auro-menuoption>
|
|
1687
|
+
<auro-menuoption value="dtw" id="airport-dtw" suggest="dtw michigan detroit">detroit metropolitan</auro-menuoption>
|
|
1688
|
+
<auro-menuoption value="bet" id="airport-bet" suggest="bet alaska bethel">bethel</auro-menuoption>
|
|
1689
|
+
<auro-menuoption value="dca" id="airport-dca" suggest="dca district of columbia washington">ronald reagan national</auro-menuoption>
|
|
1690
|
+
<auro-menuoption value="rno" id="airport-rno" suggest="rno nevada reno">reno tahoe international</auro-menuoption>
|
|
1691
|
+
<auro-menuoption value="brw" id="airport-brw" suggest="brw alaska barrow">wiley post will rogers</auro-menuoption>
|
|
1692
|
+
<auro-menuoption value="mry" id="airport-mry" suggest="mry california monterey">monterey regional</auro-menuoption>
|
|
1693
|
+
<auro-menuoption value="hnl" id="airport-hnl" suggest="hnl hawaii oahu">honolulu international</auro-menuoption>
|
|
1694
|
+
<auro-menuoption value="okc" id="airport-okc" suggest="okc oklahoma oklahoma city">will rogers world</auro-menuoption>
|
|
1695
|
+
<auro-menuoption value="iad" id="airport-iad" suggest="iad virginia dulles">washington dulles international</auro-menuoption>
|
|
1696
|
+
<auro-menuoption value="mia" id="airport-mia" suggest="mia florida miami">miami international</auro-menuoption>
|
|
1697
|
+
<auro-menuoption value="bli" id="airport-bli" suggest="bli washington bellingham">bellingham international</auro-menuoption>
|
|
1698
|
+
<auro-menuoption value="hln" id="airport-hln" suggest="hln montana helena">helena regional</auro-menuoption>
|
|
1699
|
+
<auro-menuoption value="gtf" id="airport-gtf" suggest="gtf montana great falls">great falls international</auro-menuoption>
|
|
1700
|
+
<auro-menuoption value="zih" id="airport-zih" suggest="zih guerrero zihuatanejo">ixtapa zihuatanejo international</auro-menuoption>
|
|
1701
|
+
<auro-menuoption value="yyc" id="airport-yyc" suggest="yyc alberta calgary">calgary international</auro-menuoption>
|
|
1702
|
+
<auro-menuoption value="sna" id="airport-sna" suggest="sna california santa ana">john wayne</auro-menuoption>
|
|
1703
|
+
<auro-menuoption value="fll" id="airport-fll" suggest="fll florida fort lauderdale">fort lauderdale hollywood international</auro-menuoption>
|
|
1704
|
+
<auro-menuoption value="ewr" id="airport-ewr" suggest="ewr new jersey newark">newark liberty international</auro-menuoption>
|
|
1705
|
+
<auro-menuoption value="hdn" id="airport-hdn" suggest="hdn colorado steamboat springs">yampa valley regional</auro-menuoption>
|
|
1706
|
+
<auro-menuoption value="psc" id="airport-psc" suggest="psc washington pasco">tri cities</auro-menuoption>
|
|
1707
|
+
<auro-menuoption value="tus" id="airport-tus" suggest="tus arizona tucson">tucson international</auro-menuoption>
|
|
1708
|
+
<auro-menuoption value="abq" id="airport-abq" suggest="abq new mexico albuquerque">albuquerque international sunport</auro-menuoption>
|
|
1709
|
+
<auro-menuoption value="jfk" id="airport-jfk" suggest="jfk new york new york">john f kennedy international</auro-menuoption>
|
|
1710
|
+
<auro-menuoption value="yvr" id="airport-yvr" suggest="yvr british columbia vancouver">vancouver international</auro-menuoption>
|
|
1711
|
+
<auro-menuoption value="sjo" id="airport-sjo" suggest="sjo san jose alajuela province">juan santamaria international</auro-menuoption>
|
|
1712
|
+
<auro-menuoption value="las" id="airport-las" suggest="las nevada las vegas">harry reid international airport</auro-menuoption>
|
|
1713
|
+
<auro-menuoption value="lih" id="airport-lih" suggest="lih hawaii kauai">lihue international</auro-menuoption>
|
|
1714
|
+
<auro-menuoption value="mso" id="airport-mso" suggest="mso montana missoula">missoula international</auro-menuoption>
|
|
1715
|
+
<auro-menuoption value="alw" id="airport-alw" suggest="alw washington walla walla">walla walla regional</auro-menuoption>
|
|
1716
|
+
<auro-menuoption value="mke" id="airport-mke" suggest="mke wisconsin milwaukee">milwaukee mitchell international</auro-menuoption>
|
|
1717
|
+
<auro-menuoption value="eug" id="airport-eug" suggest="eug oregon eugene">mahlon sweet field</auro-menuoption>
|
|
1718
|
+
<auro-menuoption value="akn" id="airport-akn" suggest="akn alaska king salmon">king salmon</auro-menuoption>
|
|
1719
|
+
<auro-menuoption value="cun" id="airport-cun" suggest="cun quintana roo cancun">cancun international</auro-menuoption>
|
|
1720
|
+
<auro-menuoption value="rdd" id="airport-rdd" suggest="rdd california redding">redding municipal airport</auro-menuoption>
|
|
1721
|
+
<auro-menuoption value="mco" id="airport-mco" suggest="mco florida orlando">orlando international</auro-menuoption>
|
|
1722
|
+
<auro-menuoption value="slc" id="airport-slc" suggest="slc utah salt lake city">salt lake city international</auro-menuoption>
|
|
1723
|
+
<auro-menuoption value="phx" id="airport-phx" suggest="phx arizona phoenix">sky harbor international</auro-menuoption>
|
|
1724
|
+
<auro-menuoption value="bil" id="airport-bil" suggest="bil montana billings">billings logan international</auro-menuoption>
|
|
1725
|
+
<auro-menuoption value="gst" id="airport-gst" suggest="gst alaska gustavus">gustavus</auro-menuoption>
|
|
1726
|
+
<auro-menuoption value="adk" id="airport-adk" suggest="adk alaska adak">adak</auro-menuoption>
|
|
1727
|
+
<auro-menuoption value="cvg" id="airport-cvg" suggest="cvg kentucky hebron">cincinnati northern kentucky international</auro-menuoption>
|
|
1728
|
+
<auro-menuoption value="jac" id="airport-jac" suggest="jac wyoming jackson">jackson hole airport</auro-menuoption>
|
|
1729
|
+
<auro-menuoption value="cmh" id="airport-cmh" suggest="cmh ohio columbus">john glenn columbus international</auro-menuoption>
|
|
1730
|
+
<auro-menuoption value="yyj" id="airport-yyj" suggest="yyj british columbia victoria">victoria international</auro-menuoption>
|
|
1731
|
+
<auro-menuoption value="chs" id="airport-chs" suggest="chs south carolina charleston">charleston international</auro-menuoption>
|
|
1732
|
+
<auro-menuoption value="iah" id="airport-iah" suggest="iah texas houston">george bush intercontinental</auro-menuoption>
|
|
1733
|
+
<auro-menuoption static nomatch>Unknown airport... </auro-menuoption>
|
|
1734
|
+
</auro-menu>
|
|
1735
|
+
</auro-select>
|
|
1736
|
+
<style>
|
|
1737
|
+
#customBibHeightExample::part(dropdownSize) {
|
|
1738
|
+
max-height: 150px;
|
|
1739
|
+
}
|
|
1740
|
+
</style>
|
|
1741
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1794
1742
|
</div>
|
|
1795
1743
|
<auro-accordion alignRight>
|
|
1796
|
-
|
|
1744
|
+
<span slot="trigger">See code</span>
|
|
1797
1745
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom-bib-height.html) -->
|
|
1798
1746
|
<!-- The below code snippet is automatically added from ../apiExamples/custom-bib-height.html -->
|
|
1799
1747
|
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
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
|
-
<style>
|
|
1748
|
+
<pre class="language-html"><code class="language-html"><auro-select id="customBibHeightExample" value="pit">
|
|
1749
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1750
|
+
<span slot="label">Label</span>
|
|
1751
|
+
<auro-menu>
|
|
1752
|
+
<auro-menuoption value="fca" id="airport-fca" suggest="fca montana kalispell">glacier park international</auro-menuoption>
|
|
1753
|
+
<auro-menuoption value="sfo" id="airport-sfo" suggest="sfo california san francisco">san francisco international</auro-menuoption>
|
|
1754
|
+
<auro-menuoption value="boi" id="airport-boi" suggest="boi idaho boise">gowen field</auro-menuoption>
|
|
1755
|
+
<auro-menuoption value="stl" id="airport-stl" suggest="stl missouri st louis">lambert st louis international</auro-menuoption>
|
|
1756
|
+
<auro-menuoption value="ylw" id="airport-ylw" suggest="ylw british columbia kelowna">kelowna international</auro-menuoption>
|
|
1757
|
+
<auro-menuoption value="ykm" id="airport-ykm" suggest="ykm washington yakima">yakima air terminal</auro-menuoption>
|
|
1758
|
+
<auro-menuoption value="puw" id="airport-puw" suggest="puw washington pullman">pullman moscow regional</auro-menuoption>
|
|
1759
|
+
<auro-menuoption value="yeg" id="airport-yeg" suggest="yeg alberta edmonton">edmonton international</auro-menuoption>
|
|
1760
|
+
<auro-menuoption value="tpa" id="airport-tpa" suggest="tpa florida tampa">tampa international</auro-menuoption>
|
|
1761
|
+
<auro-menuoption value="msp" id="airport-msp" suggest="msp minnesota minneapolis">minneapolis st paul international</auro-menuoption>
|
|
1762
|
+
<auro-menuoption value="ida" id="airport-ida" suggest="ida idaho idaho falls">idaho falls regional airport</auro-menuoption>
|
|
1763
|
+
<auro-menuoption value="mfr" id="airport-mfr" suggest="mfr oregon medford">rogue valley international</auro-menuoption>
|
|
1764
|
+
<auro-menuoption value="psp" id="airport-psp" suggest="psp california palm springs">palm springs international</auro-menuoption>
|
|
1765
|
+
<auro-menuoption value="lir" id="airport-lir" suggest="lir guanacaste liberia">guanacaste airport</auro-menuoption>
|
|
1766
|
+
<auro-menuoption value="oak" id="airport-oak" suggest="oak california oakland">oakland international</auro-menuoption>
|
|
1767
|
+
<auro-menuoption value="bos" id="airport-bos" suggest="bos massachusetts boston">logan international</auro-menuoption>
|
|
1768
|
+
<auro-menuoption value="bwi" id="airport-bwi" suggest="bwi maryland baltimore">thurgood marshall international</auro-menuoption>
|
|
1769
|
+
<auro-menuoption value="dal" id="airport-dal" suggest="dal texas dallas">dallas love field</auro-menuoption>
|
|
1770
|
+
<auro-menuoption value="sba" id="airport-sba" suggest="sba california santa barbara">santa barbara municipal</auro-menuoption>
|
|
1771
|
+
<auro-menuoption value="mci" id="airport-mci" suggest="mci missouri kansas city">kansas city international</auro-menuoption>
|
|
1772
|
+
<auro-menuoption value="koa" id="airport-koa" suggest="koa hawaii kona">kona international</auro-menuoption>
|
|
1773
|
+
<auro-menuoption value="pvr" id="airport-pvr" suggest="pvr jalisco puerto vallarta">licenciado gustavo diaz ordaz international</auro-menuoption>
|
|
1774
|
+
<auro-menuoption value="wrg" id="airport-wrg" suggest="wrg alaska wrangell">wrangell</auro-menuoption>
|
|
1775
|
+
<auro-menuoption value="scc" id="airport-scc" suggest="scc alaska prudhoe bay">deadhorse</auro-menuoption>
|
|
1776
|
+
<auro-menuoption value="lto" id="airport-lto" suggest="lto baja california loreto">loreto international</auro-menuoption>
|
|
1777
|
+
<auro-menuoption value="ome" id="airport-ome" suggest="ome alaska nome">nome</auro-menuoption>
|
|
1778
|
+
<auro-menuoption value="ict" id="airport-ict" suggest="ict kansas wichita">dwight d eisenhower national</auro-menuoption>
|
|
1779
|
+
<auro-menuoption value="phl" id="airport-phl" suggest="phl pennsylvania philadelphia">philadelphia international</auro-menuoption>
|
|
1780
|
+
<auro-menuoption value="dfw" id="airport-dfw" suggest="dfw texas dallas">dallas fort worth international</auro-menuoption>
|
|
1781
|
+
<auro-menuoption value="ind" id="airport-ind" suggest="ind indiana indianapolis">indianapolis international</auro-menuoption>
|
|
1782
|
+
<auro-menuoption value="smf" id="airport-smf" suggest="smf california sacramento">sacramento international</auro-menuoption>
|
|
1783
|
+
<auro-menuoption value="sit" id="airport-sit" suggest="sit alaska sitka">rocky gutierrez</auro-menuoption>
|
|
1784
|
+
<auro-menuoption value="dut" id="airport-dut" suggest="dut alaska dutch harbor">unalaska</auro-menuoption>
|
|
1785
|
+
<auro-menuoption value="cdv" id="airport-cdv" suggest="cdv alaska cordova">merle mudhole smith</auro-menuoption>
|
|
1786
|
+
<auro-menuoption value="psg" id="airport-psg" suggest="psg alaska petersburg">james a johnson</auro-menuoption>
|
|
1787
|
+
<auro-menuoption value="bna" id="airport-bna" suggest="bna tennessee nashville">nashville international</auro-menuoption>
|
|
1788
|
+
<auro-menuoption value="geg" id="airport-geg" suggest="geg washington spokane">spokane international</auro-menuoption>
|
|
1789
|
+
<auro-menuoption value="ktn" id="airport-ktn" suggest="ktn alaska ketchikan">ketchikan international</auro-menuoption>
|
|
1790
|
+
<auro-menuoption value="pit" id="airport-pit" suggest="pit pennsylvania pittsburgh">pittsburgh international</auro-menuoption>
|
|
1791
|
+
<auro-menuoption value="sbp" id="airport-sbp" suggest="sbp california san luis obispo">san luis obispo regional</auro-menuoption>
|
|
1792
|
+
<auro-menuoption value="bur" id="airport-bur" suggest="bur california burbank">hollywood burbank</auro-menuoption>
|
|
1793
|
+
<auro-menuoption value="msy" id="airport-msy" suggest="msy louisiana new orleans">louis armstrong international</auro-menuoption>
|
|
1794
|
+
<auro-menuoption value="pae" id="airport-pae" suggest="pae washington everett">paine field</auro-menuoption>
|
|
1795
|
+
<auro-menuoption value="cvg" id="airport-cvg" suggest="cvg ohio cincinnati">cincinnati northern kentucky international</auro-menuoption>
|
|
1796
|
+
<auro-menuoption value="yak" id="airport-yak" suggest="yak alaska yakutat">yakutat</auro-menuoption>
|
|
1797
|
+
<auro-menuoption value="pdx" id="airport-pdx" suggest="pdx oregon portland">portland international</auro-menuoption>
|
|
1798
|
+
<auro-menuoption value="anc" id="airport-anc" suggest="anc alaska anchorage">ted stevens</auro-menuoption>
|
|
1799
|
+
<auro-menuoption value="sea" id="airport-sea" suggest="sea washington seattle">seattle tacoma international</auro-menuoption>
|
|
1800
|
+
<auro-menuoption value="san" id="airport-san" suggest="san california san diego">san diego international</auro-menuoption>
|
|
1801
|
+
<auro-menuoption value="sat" id="airport-sat" suggest="sat texas san antonio">san antonio international</auro-menuoption>
|
|
1802
|
+
<auro-menuoption value="fat" id="airport-fat" suggest="fat california fresno">fresno yosemite international</auro-menuoption>
|
|
1803
|
+
<auro-menuoption value="aus" id="airport-aus" suggest="aus texas austin">austin bergstrom international</auro-menuoption>
|
|
1804
|
+
<auro-menuoption value="ord" id="airport-ord" suggest="ord illinois chicago">ohare international</auro-menuoption>
|
|
1805
|
+
<auro-menuoption value="gdl" id="airport-gdl" suggest="gdl jalisco guadalajara">guadalajara international</auro-menuoption>
|
|
1806
|
+
<auro-menuoption value="sjc" id="airport-sjc" suggest="sjc california san jose">san jose international</auro-menuoption>
|
|
1807
|
+
<auro-menuoption value="jnu" id="airport-jnu" suggest="jnu alaska juneau">juneau international</auro-menuoption>
|
|
1808
|
+
<auro-menuoption value="rdm" id="airport-rdm" suggest="rdm oregon redmond">roberts field</auro-menuoption>
|
|
1809
|
+
<auro-menuoption value="sts" id="airport-sts" suggest="sts california sonoma">charles m schulz</auro-menuoption>
|
|
1810
|
+
<auro-menuoption value="fai" id="airport-fai" suggest="fai alaska fairbanks">fairbanks international</auro-menuoption>
|
|
1811
|
+
<auro-menuoption value="rdu" id="airport-rdu" suggest="rdu north carolina raleigh">raleigh durham international</auro-menuoption>
|
|
1812
|
+
<auro-menuoption value="oma" id="airport-oma" suggest="oma nebraska omaha">eppley airfield</auro-menuoption>
|
|
1813
|
+
<auro-menuoption value="bzn" id="airport-bzn" suggest="bzn montana bozeman">bozeman yellowstone international</auro-menuoption>
|
|
1814
|
+
<auro-menuoption value="ont" id="airport-ont" suggest="ont california ontario">ontario international</auro-menuoption>
|
|
1815
|
+
<auro-menuoption value="ogg" id="airport-ogg" suggest="ogg hawaii maui">kahului international</auro-menuoption>
|
|
1816
|
+
<auro-menuoption value="sun" id="airport-sun" suggest="sun idaho sun valley">friedman memorial</auro-menuoption>
|
|
1817
|
+
<auro-menuoption value="mzt" id="airport-mzt" suggest="mzt sinaloa mazatlan">general rafael buelna international</auro-menuoption>
|
|
1818
|
+
<auro-menuoption value="dlg" id="airport-dlg" suggest="dlg alaska dillingham">dillingham</auro-menuoption>
|
|
1819
|
+
<auro-menuoption value="adq" id="airport-adq" suggest="adq alaska kodiak">kodiak</auro-menuoption>
|
|
1820
|
+
<auro-menuoption value="den" id="airport-den" suggest="den colorado denver">denver international</auro-menuoption>
|
|
1821
|
+
<auro-menuoption value="zlo" id="airport-zlo" suggest="zlo colima manzanillo">manzanillo international</auro-menuoption>
|
|
1822
|
+
<auro-menuoption value="sjd" id="airport-sjd" suggest="sjd baja california los cabos">los cabos international</auro-menuoption>
|
|
1823
|
+
<auro-menuoption value="elp" id="airport-elp" suggest="elp texas el paso">el paso international airport</auro-menuoption>
|
|
1824
|
+
<auro-menuoption value="atl" id="airport-atl" suggest="atl georgia atlanta">hartsfield jackson international</auro-menuoption>
|
|
1825
|
+
<auro-menuoption value="lax" id="airport-lax" suggest="lax california los angeles">los angeles international</auro-menuoption>
|
|
1826
|
+
<auro-menuoption value="rsw" id="airport-rsw" suggest="rsw florida fort myers">southwest florida international</auro-menuoption>
|
|
1827
|
+
<auro-menuoption value="cle" id="airport-cle" suggest="cle ohio cleveland">cleveland hopkins international airport</auro-menuoption>
|
|
1828
|
+
<auro-menuoption value="otz" id="airport-otz" suggest="otz alaska kotzebue">ralph wien memorial</auro-menuoption>
|
|
1829
|
+
<auro-menuoption value="bze" id="airport-bze" suggest="bze belize belize city">philip sw goldson international airport</auro-menuoption>
|
|
1830
|
+
<auro-menuoption value="eat" id="airport-eat" suggest="eat washington wenatchee">pangborn memorial</auro-menuoption>
|
|
1831
|
+
<auro-menuoption value="dtw" id="airport-dtw" suggest="dtw michigan detroit">detroit metropolitan</auro-menuoption>
|
|
1832
|
+
<auro-menuoption value="bet" id="airport-bet" suggest="bet alaska bethel">bethel</auro-menuoption>
|
|
1833
|
+
<auro-menuoption value="dca" id="airport-dca" suggest="dca district of columbia washington">ronald reagan national</auro-menuoption>
|
|
1834
|
+
<auro-menuoption value="rno" id="airport-rno" suggest="rno nevada reno">reno tahoe international</auro-menuoption>
|
|
1835
|
+
<auro-menuoption value="brw" id="airport-brw" suggest="brw alaska barrow">wiley post will rogers</auro-menuoption>
|
|
1836
|
+
<auro-menuoption value="mry" id="airport-mry" suggest="mry california monterey">monterey regional</auro-menuoption>
|
|
1837
|
+
<auro-menuoption value="hnl" id="airport-hnl" suggest="hnl hawaii oahu">honolulu international</auro-menuoption>
|
|
1838
|
+
<auro-menuoption value="okc" id="airport-okc" suggest="okc oklahoma oklahoma city">will rogers world</auro-menuoption>
|
|
1839
|
+
<auro-menuoption value="iad" id="airport-iad" suggest="iad virginia dulles">washington dulles international</auro-menuoption>
|
|
1840
|
+
<auro-menuoption value="mia" id="airport-mia" suggest="mia florida miami">miami international</auro-menuoption>
|
|
1841
|
+
<auro-menuoption value="bli" id="airport-bli" suggest="bli washington bellingham">bellingham international</auro-menuoption>
|
|
1842
|
+
<auro-menuoption value="hln" id="airport-hln" suggest="hln montana helena">helena regional</auro-menuoption>
|
|
1843
|
+
<auro-menuoption value="gtf" id="airport-gtf" suggest="gtf montana great falls">great falls international</auro-menuoption>
|
|
1844
|
+
<auro-menuoption value="zih" id="airport-zih" suggest="zih guerrero zihuatanejo">ixtapa zihuatanejo international</auro-menuoption>
|
|
1845
|
+
<auro-menuoption value="yyc" id="airport-yyc" suggest="yyc alberta calgary">calgary international</auro-menuoption>
|
|
1846
|
+
<auro-menuoption value="sna" id="airport-sna" suggest="sna california santa ana">john wayne</auro-menuoption>
|
|
1847
|
+
<auro-menuoption value="fll" id="airport-fll" suggest="fll florida fort lauderdale">fort lauderdale hollywood international</auro-menuoption>
|
|
1848
|
+
<auro-menuoption value="ewr" id="airport-ewr" suggest="ewr new jersey newark">newark liberty international</auro-menuoption>
|
|
1849
|
+
<auro-menuoption value="hdn" id="airport-hdn" suggest="hdn colorado steamboat springs">yampa valley regional</auro-menuoption>
|
|
1850
|
+
<auro-menuoption value="psc" id="airport-psc" suggest="psc washington pasco">tri cities</auro-menuoption>
|
|
1851
|
+
<auro-menuoption value="tus" id="airport-tus" suggest="tus arizona tucson">tucson international</auro-menuoption>
|
|
1852
|
+
<auro-menuoption value="abq" id="airport-abq" suggest="abq new mexico albuquerque">albuquerque international sunport</auro-menuoption>
|
|
1853
|
+
<auro-menuoption value="jfk" id="airport-jfk" suggest="jfk new york new york">john f kennedy international</auro-menuoption>
|
|
1854
|
+
<auro-menuoption value="yvr" id="airport-yvr" suggest="yvr british columbia vancouver">vancouver international</auro-menuoption>
|
|
1855
|
+
<auro-menuoption value="sjo" id="airport-sjo" suggest="sjo san jose alajuela province">juan santamaria international</auro-menuoption>
|
|
1856
|
+
<auro-menuoption value="las" id="airport-las" suggest="las nevada las vegas">harry reid international airport</auro-menuoption>
|
|
1857
|
+
<auro-menuoption value="lih" id="airport-lih" suggest="lih hawaii kauai">lihue international</auro-menuoption>
|
|
1858
|
+
<auro-menuoption value="mso" id="airport-mso" suggest="mso montana missoula">missoula international</auro-menuoption>
|
|
1859
|
+
<auro-menuoption value="alw" id="airport-alw" suggest="alw washington walla walla">walla walla regional</auro-menuoption>
|
|
1860
|
+
<auro-menuoption value="mke" id="airport-mke" suggest="mke wisconsin milwaukee">milwaukee mitchell international</auro-menuoption>
|
|
1861
|
+
<auro-menuoption value="eug" id="airport-eug" suggest="eug oregon eugene">mahlon sweet field</auro-menuoption>
|
|
1862
|
+
<auro-menuoption value="akn" id="airport-akn" suggest="akn alaska king salmon">king salmon</auro-menuoption>
|
|
1863
|
+
<auro-menuoption value="cun" id="airport-cun" suggest="cun quintana roo cancun">cancun international</auro-menuoption>
|
|
1864
|
+
<auro-menuoption value="rdd" id="airport-rdd" suggest="rdd california redding">redding municipal airport</auro-menuoption>
|
|
1865
|
+
<auro-menuoption value="mco" id="airport-mco" suggest="mco florida orlando">orlando international</auro-menuoption>
|
|
1866
|
+
<auro-menuoption value="slc" id="airport-slc" suggest="slc utah salt lake city">salt lake city international</auro-menuoption>
|
|
1867
|
+
<auro-menuoption value="phx" id="airport-phx" suggest="phx arizona phoenix">sky harbor international</auro-menuoption>
|
|
1868
|
+
<auro-menuoption value="bil" id="airport-bil" suggest="bil montana billings">billings logan international</auro-menuoption>
|
|
1869
|
+
<auro-menuoption value="gst" id="airport-gst" suggest="gst alaska gustavus">gustavus</auro-menuoption>
|
|
1870
|
+
<auro-menuoption value="adk" id="airport-adk" suggest="adk alaska adak">adak</auro-menuoption>
|
|
1871
|
+
<auro-menuoption value="cvg" id="airport-cvg" suggest="cvg kentucky hebron">cincinnati northern kentucky international</auro-menuoption>
|
|
1872
|
+
<auro-menuoption value="jac" id="airport-jac" suggest="jac wyoming jackson">jackson hole airport</auro-menuoption>
|
|
1873
|
+
<auro-menuoption value="cmh" id="airport-cmh" suggest="cmh ohio columbus">john glenn columbus international</auro-menuoption>
|
|
1874
|
+
<auro-menuoption value="yyj" id="airport-yyj" suggest="yyj british columbia victoria">victoria international</auro-menuoption>
|
|
1875
|
+
<auro-menuoption value="chs" id="airport-chs" suggest="chs south carolina charleston">charleston international</auro-menuoption>
|
|
1876
|
+
<auro-menuoption value="iah" id="airport-iah" suggest="iah texas houston">george bush intercontinental</auro-menuoption>
|
|
1877
|
+
<auro-menuoption static nomatch>Unknown airport... </auro-menuoption>
|
|
1878
|
+
</auro-menu>
|
|
1879
|
+
</auro-select>
|
|
1880
|
+
<style>
|
|
1934
1881
|
#customBibHeightExample::part(dropdownSize) {
|
|
1935
1882
|
max-height: 150px;
|
|
1936
1883
|
}
|
|
1937
|
-
|
|
1938
|
-
```
|
|
1884
|
+
</style></code></pre>
|
|
1939
1885
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1940
1886
|
</auro-accordion>
|
|
1941
1887
|
|
|
@@ -1946,59 +1892,57 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
|
|
|
1946
1892
|
Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
|
|
1947
1893
|
|
|
1948
1894
|
<div class="exampleWrapper">
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1895
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/with-icons.html) -->
|
|
1896
|
+
<!-- The below content is automatically added from ./../apiExamples/with-icons.html -->
|
|
1897
|
+
<auro-select placeholder="Placeholder Text">
|
|
1898
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1899
|
+
<span slot="label">Label</span>
|
|
1900
|
+
<auro-menu>
|
|
1901
|
+
<auro-menuoption value="air">
|
|
1902
|
+
<auro-icon label customColor category="health" name="air">Air</auro-icon>
|
|
1903
|
+
</auro-menuoption>
|
|
1904
|
+
<auro-menuoption value="covidtest">
|
|
1905
|
+
<auro-icon label customColor category="health" name="covid-test">Covid Test</auro-icon>
|
|
1906
|
+
</auro-menuoption>
|
|
1907
|
+
<auro-menuoption value="health">
|
|
1908
|
+
<auro-icon label customColor category="health" name="health">Health</auro-icon>
|
|
1909
|
+
</auro-menuoption>
|
|
1910
|
+
<auro-menuoption value="mask">
|
|
1911
|
+
<auro-icon label customColor category="health" name="mask">Mask</auro-icon>
|
|
1912
|
+
</auro-menuoption>
|
|
1913
|
+
<auro-menuoption value="spraybottle">
|
|
1914
|
+
<auro-icon label customColor category="health" name="spraybottle">Spray Bottle</auro-icon>
|
|
1915
|
+
</auro-menuoption>
|
|
1916
|
+
</auro-menu>
|
|
1917
|
+
</auro-select>
|
|
1918
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1973
1919
|
</div>
|
|
1974
1920
|
<auro-accordion alignRight>
|
|
1975
|
-
|
|
1921
|
+
<span slot="trigger">See code</span>
|
|
1976
1922
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/with-icons.html) -->
|
|
1977
1923
|
<!-- The below code snippet is automatically added from ./../apiExamples/with-icons.html -->
|
|
1978
1924
|
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
</auro-select>
|
|
2001
|
-
```
|
|
1925
|
+
<pre class="language-html"><code class="language-html"><auro-select placeholder="Placeholder Text">
|
|
1926
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1927
|
+
<span slot="label">Label</span>
|
|
1928
|
+
<auro-menu>
|
|
1929
|
+
<auro-menuoption value="air">
|
|
1930
|
+
<auro-icon label customColor category="health" name="air">Air</auro-icon>
|
|
1931
|
+
</auro-menuoption>
|
|
1932
|
+
<auro-menuoption value="covidtest">
|
|
1933
|
+
<auro-icon label customColor category="health" name="covid-test">Covid Test</auro-icon>
|
|
1934
|
+
</auro-menuoption>
|
|
1935
|
+
<auro-menuoption value="health">
|
|
1936
|
+
<auro-icon label customColor category="health" name="health">Health</auro-icon>
|
|
1937
|
+
</auro-menuoption>
|
|
1938
|
+
<auro-menuoption value="mask">
|
|
1939
|
+
<auro-icon label customColor category="health" name="mask">Mask</auro-icon>
|
|
1940
|
+
</auro-menuoption>
|
|
1941
|
+
<auro-menuoption value="spraybottle">
|
|
1942
|
+
<auro-icon label customColor category="health" name="spraybottle">Spray Bottle</auro-icon>
|
|
1943
|
+
</auro-menuoption>
|
|
1944
|
+
</auro-menu>
|
|
1945
|
+
</auro-select></code></pre>
|
|
2002
1946
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2003
1947
|
</auro-accordion>
|
|
2004
1948
|
|
|
@@ -2007,87 +1951,85 @@ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
|
|
|
2007
1951
|
This example shows nesting `<auro-menu>` elements to create submenus.
|
|
2008
1952
|
|
|
2009
1953
|
<div class="exampleWrapper">
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
1954
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/with-submenus.html) -->
|
|
1955
|
+
<!-- The below content is automatically added from ./../apiExamples/with-submenus.html -->
|
|
1956
|
+
<auro-select placeholder="Placeholder Text">
|
|
1957
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
1958
|
+
<span slot="label">Label</span>
|
|
1959
|
+
<auro-menu>
|
|
1960
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
1961
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
1962
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
1963
|
+
<hr>
|
|
1964
|
+
<auro-menu>
|
|
1965
|
+
<auro-menuoption value="apples">Apples</auro-menuoption>
|
|
1966
|
+
<auro-menuoption value="oranges">Oranges</auro-menuoption>
|
|
1967
|
+
<auro-menuoption value="pears">Pears</auro-menuoption>
|
|
1968
|
+
<auro-menuoption value="grapes">Grapes</auro-menuoption>
|
|
1969
|
+
<auro-menuoption value="kiwi">Kiwi</auro-menuoption>
|
|
1970
|
+
<hr>
|
|
1971
|
+
<auro-menu>
|
|
1972
|
+
<auro-menuoption value="person">Person</auro-menuoption>
|
|
1973
|
+
<auro-menuoption value="woman">Woman</auro-menuoption>
|
|
1974
|
+
<auro-menuoption value="man">Man</auro-menuoption>
|
|
1975
|
+
<auro-menuoption value="camera">Camera</auro-menuoption>
|
|
1976
|
+
<auro-menuoption value="tv">TV</auro-menuoption>
|
|
1977
|
+
</auro-menu>
|
|
1978
|
+
</auro-menu>
|
|
1979
|
+
<hr>
|
|
1980
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
1981
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
1982
|
+
<hr>
|
|
1983
|
+
<auro-menu>
|
|
1984
|
+
<auro-menuoption value="cars">Cars</auro-menuoption>
|
|
1985
|
+
<auro-menuoption value="trucks">Trucks</auro-menuoption>
|
|
1986
|
+
<auro-menuoption value="boats">Boats</auro-menuoption>
|
|
1987
|
+
<auro-menuoption value="planes">Planes</auro-menuoption>
|
|
1988
|
+
<auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
|
|
1989
|
+
</auro-menu>
|
|
1990
|
+
</auro-select>
|
|
1991
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2048
1992
|
</div>
|
|
2049
1993
|
<auro-accordion alignRight>
|
|
2050
|
-
|
|
1994
|
+
<span slot="trigger">See code</span>
|
|
2051
1995
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/with-submenus.html) -->
|
|
2052
1996
|
<!-- The below code snippet is automatically added from ./../apiExamples/with-submenus.html -->
|
|
2053
1997
|
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
</auro-select>
|
|
2090
|
-
```
|
|
1998
|
+
<pre class="language-html"><code class="language-html"><auro-select placeholder="Placeholder Text">
|
|
1999
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
2000
|
+
<span slot="label">Label</span>
|
|
2001
|
+
<auro-menu>
|
|
2002
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
2003
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
2004
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
2005
|
+
<hr>
|
|
2006
|
+
<auro-menu>
|
|
2007
|
+
<auro-menuoption value="apples">Apples</auro-menuoption>
|
|
2008
|
+
<auro-menuoption value="oranges">Oranges</auro-menuoption>
|
|
2009
|
+
<auro-menuoption value="pears">Pears</auro-menuoption>
|
|
2010
|
+
<auro-menuoption value="grapes">Grapes</auro-menuoption>
|
|
2011
|
+
<auro-menuoption value="kiwi">Kiwi</auro-menuoption>
|
|
2012
|
+
<hr>
|
|
2013
|
+
<auro-menu>
|
|
2014
|
+
<auro-menuoption value="person">Person</auro-menuoption>
|
|
2015
|
+
<auro-menuoption value="woman">Woman</auro-menuoption>
|
|
2016
|
+
<auro-menuoption value="man">Man</auro-menuoption>
|
|
2017
|
+
<auro-menuoption value="camera">Camera</auro-menuoption>
|
|
2018
|
+
<auro-menuoption value="tv">TV</auro-menuoption>
|
|
2019
|
+
</auro-menu>
|
|
2020
|
+
</auro-menu>
|
|
2021
|
+
<hr>
|
|
2022
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
2023
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
2024
|
+
<hr>
|
|
2025
|
+
<auro-menu>
|
|
2026
|
+
<auro-menuoption value="cars">Cars</auro-menuoption>
|
|
2027
|
+
<auro-menuoption value="trucks">Trucks</auro-menuoption>
|
|
2028
|
+
<auro-menuoption value="boats">Boats</auro-menuoption>
|
|
2029
|
+
<auro-menuoption value="planes">Planes</auro-menuoption>
|
|
2030
|
+
<auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
|
|
2031
|
+
</auro-menu>
|
|
2032
|
+
</auro-select></code></pre>
|
|
2091
2033
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2092
2034
|
</auro-accordion>
|
|
2093
2035
|
|
|
@@ -2096,60 +2038,56 @@ This example shows nesting `<auro-menu>` elements to create submenus.
|
|
|
2096
2038
|
The following example illustrates how a user may query the `element.value` or `element.optionSelected` for the current value or complete option object that is selected.
|
|
2097
2039
|
|
|
2098
2040
|
<div class="exampleWrapper">
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2041
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/value-extraction.html) -->
|
|
2042
|
+
<!-- The below content is automatically added from ./../apiExamples/value-extraction.html -->
|
|
2043
|
+
<auro-select id="valueExtraction" placeholder="Placeholder Text">
|
|
2044
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
2045
|
+
<span slot="label">Label</span>
|
|
2046
|
+
<auro-menu>
|
|
2047
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
2048
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
2049
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
2050
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
2051
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
2052
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
2053
|
+
</auro-menu>
|
|
2054
|
+
</auro-select>
|
|
2055
|
+
<auro-button id="valueExtractionBtn">Get current value</auro-button>
|
|
2056
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2115
2057
|
</div>
|
|
2116
2058
|
<auro-accordion alignRight>
|
|
2117
|
-
|
|
2059
|
+
<span slot="trigger">See code</span>
|
|
2118
2060
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/value-extraction.html) -->
|
|
2119
2061
|
<!-- The below code snippet is automatically added from ./../apiExamples/value-extraction.html -->
|
|
2120
2062
|
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
<auro-button id="valueExtractionBtn">Get current value</auro-button>
|
|
2135
|
-
```
|
|
2063
|
+
<pre class="language-html"><code class="language-html"><auro-select id="valueExtraction" placeholder="Placeholder Text">
|
|
2064
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
2065
|
+
<span slot="label">Label</span>
|
|
2066
|
+
<auro-menu>
|
|
2067
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
2068
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
2069
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
2070
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
2071
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
2072
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
2073
|
+
</auro-menu>
|
|
2074
|
+
</auro-select>
|
|
2075
|
+
<auro-button id="valueExtractionBtn">Get current value</auro-button></code></pre>
|
|
2136
2076
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2137
2077
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/value-extraction.js) -->
|
|
2138
2078
|
<!-- The below code snippet is automatically added from ./../apiExamples/value-extraction.js -->
|
|
2139
2079
|
|
|
2140
|
-
|
|
2141
|
-
export function valueExtractionExample() {
|
|
2080
|
+
<pre class="language-js"><code class="language-js">export function valueExtractionExample() {
|
|
2142
2081
|
const valueExtractionExample = document.querySelector('#valueExtraction');
|
|
2143
2082
|
const valueExtractionBtn = document.querySelector('#valueExtractionBtn');
|
|
2144
|
-
|
|
2145
|
-
valueExtractionBtn.addEventListener('click', ()
|
|
2083
|
+
|
|
2084
|
+
valueExtractionBtn.addEventListener('click', () => {
|
|
2146
2085
|
console.warn('Value selected:', valueExtractionExample.value);
|
|
2147
2086
|
console.warn('Option selected:', valueExtractionExample.optionSelected);
|
|
2148
|
-
|
|
2087
|
+
|
|
2149
2088
|
alert(`Value selected: ${valueExtractionExample.value}`);
|
|
2150
2089
|
})
|
|
2151
|
-
}
|
|
2152
|
-
```
|
|
2090
|
+
}</code></pre>
|
|
2153
2091
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2154
2092
|
</auro-accordion>
|
|
2155
2093
|
|
|
@@ -2158,58 +2096,54 @@ export function valueExtractionExample() {
|
|
|
2158
2096
|
This example programmatically adds the `error` state when a user selects an option that is greater than `2`.
|
|
2159
2097
|
|
|
2160
2098
|
<div class="exampleWrapper">
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2099
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom-error-validity.html) -->
|
|
2100
|
+
<!-- The below content is automatically added from ./../apiExamples/custom-error-validity.html -->
|
|
2101
|
+
<auro-select id="primaryError" placeholder="Placeholder Text">
|
|
2102
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
2103
|
+
<span slot="label">Label</span>
|
|
2104
|
+
<auro-menu>
|
|
2105
|
+
<auro-menuoption value="1">1</auro-menuoption>
|
|
2106
|
+
<auro-menuoption value="2">2</auro-menuoption>
|
|
2107
|
+
<auro-menuoption value="3">3</auro-menuoption>
|
|
2108
|
+
<auro-menuoption value="4">4</auro-menuoption>
|
|
2109
|
+
<auro-menuoption value="5">5</auro-menuoption>
|
|
2110
|
+
<auro-menuoption value="6">6</auro-menuoption>
|
|
2111
|
+
</auro-menu>
|
|
2112
|
+
</auro-select>
|
|
2113
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2176
2114
|
</div>
|
|
2177
2115
|
<auro-accordion alignRight>
|
|
2178
|
-
|
|
2116
|
+
<span slot="trigger">See code</span>
|
|
2179
2117
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom-error-validity.html) -->
|
|
2180
2118
|
<!-- The below code snippet is automatically added from ./../apiExamples/custom-error-validity.html -->
|
|
2181
2119
|
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
</auro-select>
|
|
2195
|
-
```
|
|
2120
|
+
<pre class="language-html"><code class="language-html"><auro-select id="primaryError" placeholder="Placeholder Text">
|
|
2121
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
2122
|
+
<span slot="label">Label</span>
|
|
2123
|
+
<auro-menu>
|
|
2124
|
+
<auro-menuoption value="1">1</auro-menuoption>
|
|
2125
|
+
<auro-menuoption value="2">2</auro-menuoption>
|
|
2126
|
+
<auro-menuoption value="3">3</auro-menuoption>
|
|
2127
|
+
<auro-menuoption value="4">4</auro-menuoption>
|
|
2128
|
+
<auro-menuoption value="5">5</auro-menuoption>
|
|
2129
|
+
<auro-menuoption value="6">6</auro-menuoption>
|
|
2130
|
+
</auro-menu>
|
|
2131
|
+
</auro-select></code></pre>
|
|
2196
2132
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2197
2133
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom-error-validity.js) -->
|
|
2198
2134
|
<!-- The below code snippet is automatically added from ./../apiExamples/custom-error-validity.js -->
|
|
2199
2135
|
|
|
2200
|
-
|
|
2201
|
-
export function customErrorValidityExample(elem) {
|
|
2136
|
+
<pre class="language-js"><code class="language-js">export function customErrorValidityExample(elem) {
|
|
2202
2137
|
const customErrorValidityExample = document.querySelector('#primaryError');
|
|
2203
|
-
|
|
2204
|
-
customErrorValidityExample.addEventListener('auroSelect-valueSet', ()
|
|
2205
|
-
if (+customErrorValidityExample.value
|
|
2138
|
+
|
|
2139
|
+
customErrorValidityExample.addEventListener('auroSelect-valueSet', () => {
|
|
2140
|
+
if (+customErrorValidityExample.value > 2) {
|
|
2206
2141
|
customErrorValidityExample.setAttribute('error', 'Quantity Exceeded');
|
|
2207
2142
|
} else if (customErrorValidityExample.hasAttribute('error')) {
|
|
2208
2143
|
customErrorValidityExample.removeAttribute('error');
|
|
2209
2144
|
}
|
|
2210
2145
|
})
|
|
2211
|
-
}
|
|
2212
|
-
```
|
|
2146
|
+
};</code></pre>
|
|
2213
2147
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2214
2148
|
</auro-accordion>
|
|
2215
2149
|
|
|
@@ -2218,69 +2152,65 @@ export function customErrorValidityExample(elem) {
|
|
|
2218
2152
|
The component can be in a dialog.
|
|
2219
2153
|
|
|
2220
2154
|
<div class="exampleWrapper">
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2155
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-dialog.html) -->
|
|
2156
|
+
<!-- The below content is automatically added from ./../apiExamples/in-dialog.html -->
|
|
2157
|
+
<div>
|
|
2158
|
+
<auro-button id="select-dialog-opener">Select in Dialog</auro-button>
|
|
2159
|
+
<auro-dialog id="select-dialog">
|
|
2160
|
+
<span slot="header">Select in Dialog</span>
|
|
2161
|
+
<div slot="content">
|
|
2162
|
+
<auro-select id="valueExample" value="price">
|
|
2163
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
2164
|
+
<span slot="label">Name</span>
|
|
2165
|
+
<auro-menu>
|
|
2166
|
+
<auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
|
|
2167
|
+
<auro-menuoption id="option-1" value="price">Price</auro-menuoption>
|
|
2168
|
+
<auro-menuoption id="option-2" value="duration">Duration</auro-menuoption>
|
|
2169
|
+
<auro-menuoption id="option-3" value="departure">Departure</auro-menuoption>
|
|
2170
|
+
<auro-menuoption id="option-4" value="arrival">Arrival</auro-menuoption>
|
|
2171
|
+
<auro-menuoption id="option-5" value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
2172
|
+
</auro-menu>
|
|
2173
|
+
</auro-select>
|
|
2174
|
+
</div>
|
|
2175
|
+
</auro-dialog>
|
|
2176
|
+
</div>
|
|
2177
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2244
2178
|
</div>
|
|
2245
2179
|
<auro-accordion alignRight>
|
|
2246
|
-
|
|
2180
|
+
<span slot="trigger">See code</span>
|
|
2247
2181
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.html) -->
|
|
2248
2182
|
<!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.html -->
|
|
2249
2183
|
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
</div>
|
|
2271
|
-
```
|
|
2184
|
+
<pre class="language-html"><code class="language-html"><div>
|
|
2185
|
+
<auro-button id="select-dialog-opener">Select in Dialog</auro-button>
|
|
2186
|
+
<auro-dialog id="select-dialog">
|
|
2187
|
+
<span slot="header">Select in Dialog</span>
|
|
2188
|
+
<div slot="content">
|
|
2189
|
+
<auro-select id="valueExample" value="price">
|
|
2190
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
2191
|
+
<span slot="label">Name</span>
|
|
2192
|
+
<auro-menu>
|
|
2193
|
+
<auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
|
|
2194
|
+
<auro-menuoption id="option-1" value="price">Price</auro-menuoption>
|
|
2195
|
+
<auro-menuoption id="option-2" value="duration">Duration</auro-menuoption>
|
|
2196
|
+
<auro-menuoption id="option-3" value="departure">Departure</auro-menuoption>
|
|
2197
|
+
<auro-menuoption id="option-4" value="arrival">Arrival</auro-menuoption>
|
|
2198
|
+
<auro-menuoption id="option-5" value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
2199
|
+
</auro-menu>
|
|
2200
|
+
</auro-select>
|
|
2201
|
+
</div>
|
|
2202
|
+
</auro-dialog>
|
|
2203
|
+
</div></code></pre>
|
|
2272
2204
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2273
2205
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.js) -->
|
|
2274
2206
|
<!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.js -->
|
|
2275
2207
|
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
document.querySelector("#select-dialog-opener").addEventListener("click", () => {
|
|
2208
|
+
<pre class="language-js"><code class="language-js">export function inDialogExample() {
|
|
2209
|
+
document.querySelector("#select-dialog-opener").addEventListener("click", () => {
|
|
2279
2210
|
const dialog = document.querySelector("#select-dialog");
|
|
2280
2211
|
dialog.open = true;
|
|
2281
2212
|
});
|
|
2282
|
-
}
|
|
2283
|
-
```
|
|
2213
|
+
};</code></pre>
|
|
2284
2214
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2285
2215
|
</auro-accordion>
|
|
2286
2216
|
|
|
@@ -2289,74 +2219,70 @@ export function inDialogExample() {
|
|
|
2289
2219
|
The component can be in a drawer.
|
|
2290
2220
|
|
|
2291
2221
|
<div class="exampleWrapper">
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2222
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-drawer.html) -->
|
|
2223
|
+
<!-- The below content is automatically added from ./../apiExamples/in-drawer.html -->
|
|
2224
|
+
<div>
|
|
2225
|
+
<auro-button id="select-drawer-opener">Select in drawer</auro-button>
|
|
2226
|
+
<auro-drawer id="select-drawer">
|
|
2227
|
+
<span slot="header">Select in drawer</span>
|
|
2228
|
+
<div slot="content">
|
|
2229
|
+
<auro-select id="valueExample" value="price">
|
|
2230
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
2231
|
+
<span slot="label">Name</span>
|
|
2232
|
+
<auro-menu>
|
|
2233
|
+
<auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
|
|
2234
|
+
<auro-menuoption id="option-1" value="price">Price</auro-menuoption>
|
|
2235
|
+
<auro-menuoption id="option-2" value="duration">Duration</auro-menuoption>
|
|
2236
|
+
<auro-menuoption id="option-3" value="departure">Departure</auro-menuoption>
|
|
2237
|
+
<auro-menuoption id="option-4" value="arrival">Arrival</auro-menuoption>
|
|
2238
|
+
<auro-menuoption id="option-5" value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
2239
|
+
</auro-menu>
|
|
2240
|
+
</auro-select>
|
|
2241
|
+
</div>
|
|
2242
|
+
</auro-drawer>
|
|
2243
|
+
</div>
|
|
2244
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2315
2245
|
</div>
|
|
2316
2246
|
<auro-accordion alignRight>
|
|
2317
|
-
|
|
2247
|
+
<span slot="trigger">See code</span>
|
|
2318
2248
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.html) -->
|
|
2319
2249
|
<!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.html -->
|
|
2320
2250
|
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
</div>
|
|
2342
|
-
```
|
|
2251
|
+
<pre class="language-html"><code class="language-html"><div>
|
|
2252
|
+
<auro-button id="select-drawer-opener">Select in drawer</auro-button>
|
|
2253
|
+
<auro-drawer id="select-drawer">
|
|
2254
|
+
<span slot="header">Select in drawer</span>
|
|
2255
|
+
<div slot="content">
|
|
2256
|
+
<auro-select id="valueExample" value="price">
|
|
2257
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
2258
|
+
<span slot="label">Name</span>
|
|
2259
|
+
<auro-menu>
|
|
2260
|
+
<auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
|
|
2261
|
+
<auro-menuoption id="option-1" value="price">Price</auro-menuoption>
|
|
2262
|
+
<auro-menuoption id="option-2" value="duration">Duration</auro-menuoption>
|
|
2263
|
+
<auro-menuoption id="option-3" value="departure">Departure</auro-menuoption>
|
|
2264
|
+
<auro-menuoption id="option-4" value="arrival">Arrival</auro-menuoption>
|
|
2265
|
+
<auro-menuoption id="option-5" value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
2266
|
+
</auro-menu>
|
|
2267
|
+
</auro-select>
|
|
2268
|
+
</div>
|
|
2269
|
+
</auro-drawer>
|
|
2270
|
+
</div></code></pre>
|
|
2343
2271
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2344
2272
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.js) -->
|
|
2345
2273
|
<!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.js -->
|
|
2346
2274
|
|
|
2347
|
-
|
|
2348
|
-
|
|
2349
|
-
document.querySelector("#select-drawer-opener").addEventListener("click", () => {
|
|
2275
|
+
<pre class="language-js"><code class="language-js">export function inDrawerExample() {
|
|
2276
|
+
document.querySelector("#select-drawer-opener").addEventListener("click", () => {
|
|
2350
2277
|
const drawer = document.querySelector("#select-drawer");
|
|
2351
|
-
|
|
2278
|
+
|
|
2352
2279
|
if (drawer.hasAttribute('open')) {
|
|
2353
2280
|
drawer.removeAttribute('open');
|
|
2354
2281
|
} else {
|
|
2355
2282
|
drawer.setAttribute('open', true);
|
|
2356
2283
|
}
|
|
2357
2284
|
});
|
|
2358
|
-
}
|
|
2359
|
-
```
|
|
2285
|
+
};</code></pre>
|
|
2360
2286
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2361
2287
|
</auro-accordion>
|
|
2362
2288
|
|
|
@@ -2365,56 +2291,52 @@ export function inDrawerExample() {
|
|
|
2365
2291
|
The following example listens for the `auroMenu-selectedOption` event. Once triggered, element.value or element.optionSelected may be queried for the new value or complete option object.
|
|
2366
2292
|
|
|
2367
2293
|
<div class="exampleWrapper">
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
|
|
2381
|
-
|
|
2382
|
-
|
|
2294
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/value-alert.html) -->
|
|
2295
|
+
<!-- The below content is automatically added from ./../apiExamples/value-alert.html -->
|
|
2296
|
+
<auro-select id="valueAlert" placeholder="Placeholder Text">
|
|
2297
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
2298
|
+
<span slot="label">Label</span>
|
|
2299
|
+
<auro-menu id="valueAlertMenu">
|
|
2300
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
2301
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
2302
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
2303
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
2304
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
2305
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
2306
|
+
</auro-menu>
|
|
2307
|
+
</auro-select>
|
|
2308
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2383
2309
|
</div>
|
|
2384
2310
|
<auro-accordion alignRight>
|
|
2385
|
-
|
|
2311
|
+
<span slot="trigger">See code</span>
|
|
2386
2312
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/value-alert.html) -->
|
|
2387
2313
|
<!-- The below code snippet is automatically added from ./../apiExamples/value-alert.html -->
|
|
2388
2314
|
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
|
|
2394
|
-
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
</auro-select>
|
|
2402
|
-
```
|
|
2315
|
+
<pre class="language-html"><code class="language-html"><auro-select id="valueAlert" placeholder="Placeholder Text">
|
|
2316
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
2317
|
+
<span slot="label">Label</span>
|
|
2318
|
+
<auro-menu id="valueAlertMenu">
|
|
2319
|
+
<auro-menuoption value="stops">Stops</auro-menuoption>
|
|
2320
|
+
<auro-menuoption value="price">Price</auro-menuoption>
|
|
2321
|
+
<auro-menuoption value="duration">Duration</auro-menuoption>
|
|
2322
|
+
<auro-menuoption value="departure">Departure</auro-menuoption>
|
|
2323
|
+
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
2324
|
+
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
2325
|
+
</auro-menu>
|
|
2326
|
+
</auro-select></code></pre>
|
|
2403
2327
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2404
2328
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/value-alert.js) -->
|
|
2405
2329
|
<!-- The below code snippet is automatically added from ./../apiExamples/value-alert.js -->
|
|
2406
2330
|
|
|
2407
|
-
|
|
2408
|
-
export function valueAlertExample() {
|
|
2331
|
+
<pre class="language-js"><code class="language-js">export function valueAlertExample() {
|
|
2409
2332
|
const select = document.querySelector('#valueAlert');
|
|
2410
2333
|
const menu = document.querySelector('#valueAlertMenu');
|
|
2411
|
-
|
|
2412
|
-
menu.addEventListener('auroMenu-selectedOption', ()
|
|
2334
|
+
|
|
2335
|
+
menu.addEventListener('auroMenu-selectedOption', () => {
|
|
2413
2336
|
console.warn('Select value changed to:', select.value);
|
|
2414
2337
|
console.warn('Select optionSelected changed to:', select.optionSelected);
|
|
2415
2338
|
});
|
|
2416
|
-
}
|
|
2417
|
-
```
|
|
2339
|
+
}</code></pre>
|
|
2418
2340
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
2419
2341
|
</auro-accordion>
|
|
2420
2342
|
|
|
@@ -2426,9 +2348,8 @@ The component may be restyled by changing the values of the following token(s).
|
|
|
2426
2348
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
2427
2349
|
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
2428
2350
|
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
|
|
2351
|
+
<pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
|
|
2352
|
+
|
|
2432
2353
|
:host(:not([ondark])),
|
|
2433
2354
|
:host(:not([appearance='inverse'])) {
|
|
2434
2355
|
--ds-auro-select-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
|
|
@@ -2439,7 +2360,7 @@ The component may be restyled by changing the values of the following token(s).
|
|
|
2439
2360
|
--ds-auro-select-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
|
|
2440
2361
|
--ds-auro-select-outline-color: transparent;
|
|
2441
2362
|
}
|
|
2442
|
-
|
|
2363
|
+
|
|
2443
2364
|
:host([ondark]),
|
|
2444
2365
|
:host([appearance='inverse']) {
|
|
2445
2366
|
--ds-auro-select-border-color: var(--ds-basic-color-border-inverse, #{v.$ds-basic-color-border-inverse});
|
|
@@ -2449,6 +2370,5 @@ The component may be restyled by changing the values of the following token(s).
|
|
|
2449
2370
|
--ds-auro-select-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
|
|
2450
2371
|
--ds-auro-select-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse});
|
|
2451
2372
|
--ds-auro-select-outline-color: transparent;
|
|
2452
|
-
}
|
|
2453
|
-
```
|
|
2373
|
+
}</code></pre>
|
|
2454
2374
|
<!-- AURO-GENERATED-CONTENT:END -->
|