@aurodesignsystem-dev/auro-formkit 0.0.0-pr1052.0 → 0.0.0-pr1052.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/combobox/README.md +2 -0
- package/components/combobox/demo/api.md +96 -57
- package/components/combobox/demo/api.min.js +353 -144
- package/components/combobox/demo/index.md +2 -0
- package/components/combobox/demo/index.min.js +332 -133
- package/components/combobox/demo/readme.md +2 -0
- package/components/combobox/dist/auro-combobox.d.ts +81 -33
- package/components/combobox/dist/index.js +294 -118
- package/components/combobox/dist/registered.js +294 -118
- package/components/counter/demo/api.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/api.min.js +54 -14
- package/components/datepicker/demo/index.min.js +54 -14
- package/components/datepicker/dist/index.js +54 -14
- package/components/datepicker/dist/registered.js +54 -14
- package/components/dropdown/demo/api.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/input/demo/api.md +48 -46
- package/components/input/demo/api.min.js +52 -12
- package/components/input/demo/index.md +6 -1
- package/components/input/demo/index.min.js +52 -12
- package/components/input/dist/auro-input.d.ts +4 -0
- package/components/input/dist/base-input.d.ts +9 -1
- package/components/input/dist/index.js +52 -12
- package/components/input/dist/registered.js +52 -12
- package/components/layoutElement/dist/index.js +1 -1
- package/components/layoutElement/dist/registered.js +1 -1
- package/components/menu/demo/api.md +4 -3
- package/components/menu/demo/api.min.js +39 -16
- package/components/menu/demo/index.min.js +39 -16
- package/components/menu/dist/auro-menu.d.ts +3 -3
- package/components/menu/dist/index.js +39 -16
- package/components/menu/dist/registered.js +39 -16
- package/components/select/demo/api.min.js +40 -17
- package/components/select/demo/index.min.js +40 -17
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/package.json +1 -1
|
@@ -21,6 +21,8 @@ The following sections are editable by making changes to the following files:
|
|
|
21
21
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
|
|
22
22
|
<!-- The below content is automatically added from ./docs/partials/description.md -->
|
|
23
23
|
`<auro-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
|
|
24
|
+
|
|
25
|
+
Combobox behaves as a filter of menu options. Typing into the input field will execute the filter but will not set the `value` of the combobox. The combobox value is set by selecting a menu option. Clicking the `X` clear button in the input will remove the current value of the HTML5 input causing the menu filter to reset as well as remove the current value of the combobox.
|
|
24
26
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
25
27
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
|
|
26
28
|
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
|
|
@@ -5,54 +5,64 @@
|
|
|
5
5
|
|
|
6
6
|
## Properties
|
|
7
7
|
|
|
8
|
-
| Property | Attribute | Type
|
|
9
|
-
|
|
10
|
-
| [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean`
|
|
11
|
-
| [autocomplete](#autocomplete) | `autocomplete` | `string`
|
|
12
|
-
| [checkmark](#checkmark) | `checkmark` | `boolean`
|
|
13
|
-
| [disabled](#disabled) | `disabled` | `boolean`
|
|
14
|
-
| [
|
|
15
|
-
| [
|
|
16
|
-
| [
|
|
17
|
-
| [
|
|
18
|
-
| [
|
|
19
|
-
| [
|
|
20
|
-
| [
|
|
21
|
-
| [
|
|
22
|
-
| [
|
|
23
|
-
| [
|
|
24
|
-
| [
|
|
25
|
-
| [
|
|
26
|
-
| [
|
|
27
|
-
| [
|
|
28
|
-
| [
|
|
29
|
-
| [
|
|
30
|
-
| [
|
|
31
|
-
| [
|
|
32
|
-
| [
|
|
33
|
-
| [
|
|
34
|
-
| [
|
|
35
|
-
| [
|
|
36
|
-
| [
|
|
8
|
+
| Property | Attribute | Modifiers | Type | Default | Description |
|
|
9
|
+
|---------------------------------|---------------------------------|-----------|-----------------------|----------------------------|--------------------------------------------------|
|
|
10
|
+
| [autoPlacement](#autoPlacement) | `autoPlacement` | | `boolean` | false | If declared, bib's position will be automatically calculated where to appear. |
|
|
11
|
+
| [autocomplete](#autocomplete) | `autocomplete` | | `string` | "false" | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
|
|
12
|
+
| [checkmark](#checkmark) | `checkmark` | | `boolean` | false | When attribute is present auro-menu will apply check marks to selected options. |
|
|
13
|
+
| [disabled](#disabled) | `disabled` | | `boolean` | false | If set, disables the combobox. |
|
|
14
|
+
| [dvInputOnly](#dvInputOnly) | `dvInputOnly` | | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. |
|
|
15
|
+
| [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
|
|
16
|
+
| [format](#format) | `format` | | `string` | | Specifies the input mask format. |
|
|
17
|
+
| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
|
|
18
|
+
| [inputValue](#inputValue) | | readonly | `string \| undefined` | | Returns the current value of the input element within the combobox. |
|
|
19
|
+
| [inputmode](#inputmode) | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
|
|
20
|
+
| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
|
|
21
|
+
| [layout](#layout) | | | `string` | "classic" | |
|
|
22
|
+
| [matchWidth](#matchWidth) | `matchWidth` | | `boolean` | true | If declared, the popover and trigger will be set to the same width. |
|
|
23
|
+
| [msgSelectionMissing](#msgSelectionMissing) | | | `string` | "Please select an option." | |
|
|
24
|
+
| [noFilter](#noFilter) | `noFilter` | | `boolean` | false | If set, combobox will not filter menuoptions based in input. |
|
|
25
|
+
| [noFlip](#noFlip) | `noFlip` | | `boolean` | "false" | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
|
|
26
|
+
| [noValidate](#noValidate) | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
|
|
27
|
+
| [offset](#offset) | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
|
|
28
|
+
| [onDark](#onDark) | `onDark` | | `boolean` | | If declared, onDark styles will be applied to the trigger. |
|
|
29
|
+
| [optionSelected](#optionSelected) | `optionSelected` | | `HTMLElement` | | Specifies the current selected option. |
|
|
30
|
+
| [persistInput](#persistInput) | `persistInput` | | `Boolean` | false | If declared, selecting a menu option will not change the input value. By doing so,<br />the current menu filter will be preserved and the user can continue from their last<br />filter state. It is recommended to use this in combination with the `displayValue` slot. |
|
|
31
|
+
| [placeholder](#placeholder) | `placeholder` | | `string` | | Define custom placeholder text, only supported by date input formats. |
|
|
32
|
+
| [placement](#placement) | `placement` | | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
|
|
33
|
+
| [required](#required) | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
|
|
34
|
+
| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
|
|
35
|
+
| [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`. |
|
|
36
|
+
| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
37
|
+
| [shape](#shape) | | | `string` | "classic" | |
|
|
38
|
+
| [size](#size) | | | `string` | "xl" | |
|
|
39
|
+
| [triggerIcon](#triggerIcon) | `triggerIcon` | | `boolean` | false | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
|
|
40
|
+
| [type](#type) | `type` | | `string` | | Applies the defined value as the type attribute on auro-input. |
|
|
41
|
+
| [typedValue](#typedValue) | `typedValue` | | `string` | "undefined" | Specifies the value of the input element within the combobox. |
|
|
42
|
+
| [validity](#validity) | `validity` | | `string` | | Specifies the `validityState` this element is in. |
|
|
43
|
+
| [value](#value) | `value` | | `string` | "undefined" | Value selected for the dropdown menu. |
|
|
37
44
|
|
|
38
45
|
## Methods
|
|
39
46
|
|
|
40
|
-
| Method
|
|
41
|
-
|
|
42
|
-
| [clear](#clear)
|
|
43
|
-
| [focus](#focus)
|
|
44
|
-
| [hideBib](#hideBib)
|
|
45
|
-
| [isValid](#isValid)
|
|
46
|
-
| [reset](#reset)
|
|
47
|
-
| [showBib](#showBib)
|
|
48
|
-
| [
|
|
47
|
+
| Method | Type | Description |
|
|
48
|
+
|----------------------|----------------------------------------|--------------------------------------------------|
|
|
49
|
+
| [clear](#clear) | `(): void` | Clears the current value of the combobox. |
|
|
50
|
+
| [focus](#focus) | `(): void` | Focuses the combobox trigger input. |
|
|
51
|
+
| [hideBib](#hideBib) | `(): void` | Hides the dropdown bib if its open. |
|
|
52
|
+
| [isValid](#isValid) | `(): boolean` | Checks if the element is valid. |
|
|
53
|
+
| [reset](#reset) | `(): void` | Resets component to initial state. |
|
|
54
|
+
| [showBib](#showBib) | `(): void` | Shows the dropdown bib if there are options to show. |
|
|
55
|
+
| [updateActiveOption](#updateActiveOption) | `(index: number): void` | Updates the active option in the menu.<br /><br />**index**: Index of the option to make active. |
|
|
56
|
+
| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
|
|
49
57
|
|
|
50
58
|
## Events
|
|
51
59
|
|
|
52
|
-
| Event | Type
|
|
53
|
-
|
|
54
|
-
| `auroCombobox-valueSet` | `CustomEvent<any>`
|
|
55
|
-
| `auroFormElement-validated` |
|
|
60
|
+
| Event | Type | Description |
|
|
61
|
+
|-----------------------------|------------------------------------------------|--------------------------------------------------|
|
|
62
|
+
| `auroCombobox-valueSet` | `CustomEvent<any>` | (Deprecated) Notifies that the component has a new value set. |
|
|
63
|
+
| `auroFormElement-validated` | | Notifies that the component value(s) have been validated. |
|
|
64
|
+
| [input](#input) | `CustomEvent<any>` | Notifies that the component has a new value set. |
|
|
65
|
+
| [inputValue](#inputValue) | `CustomEvent<{ value: string \| undefined; }>` | Notifies that the components internal HTML5 input value has changed. |
|
|
56
66
|
|
|
57
67
|
## Slots
|
|
58
68
|
|
|
@@ -153,12 +163,22 @@ This example demonstrates a data driven combobox. The data is used to populate t
|
|
|
153
163
|
|
|
154
164
|
The menu in this example was populated from data from a country/city API. To keep the data set small, the data in the menu is based off an API call that returns all countries and cities that contain the substring "**germ**" (non case-sensitive) in their name.
|
|
155
165
|
|
|
156
|
-
<div class="exampleWrapper">
|
|
166
|
+
<div class="exampleWrapper--ondark">
|
|
157
167
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dynamicMenu.html) -->
|
|
158
168
|
<!-- The below content is automatically added from ./../apiExamples/dynamicMenu.html -->
|
|
159
169
|
<!-- HTML example file -->
|
|
160
170
|
<!-- ----------------- -->
|
|
161
|
-
<auro-combobox
|
|
171
|
+
<auro-combobox
|
|
172
|
+
id="dynamicMenuExample"
|
|
173
|
+
value="GER"
|
|
174
|
+
layout="snowflake"
|
|
175
|
+
shape="snowflake"
|
|
176
|
+
size="lg"
|
|
177
|
+
ondark
|
|
178
|
+
noFilter
|
|
179
|
+
persistInput
|
|
180
|
+
dvInputOnly
|
|
181
|
+
required>
|
|
162
182
|
<span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
|
|
163
183
|
<span slot="label">Name</span>
|
|
164
184
|
<!--
|
|
@@ -177,7 +197,17 @@ The menu in this example was populated from data from a country/city API. To kee
|
|
|
177
197
|
```html
|
|
178
198
|
<!-- HTML example file -->
|
|
179
199
|
<!-- ----------------- -->
|
|
180
|
-
<auro-combobox
|
|
200
|
+
<auro-combobox
|
|
201
|
+
id="dynamicMenuExample"
|
|
202
|
+
value="GER"
|
|
203
|
+
layout="snowflake"
|
|
204
|
+
shape="snowflake"
|
|
205
|
+
size="lg"
|
|
206
|
+
ondark
|
|
207
|
+
noFilter
|
|
208
|
+
persistInput
|
|
209
|
+
dvInputOnly
|
|
210
|
+
required>
|
|
181
211
|
<span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
|
|
182
212
|
<span slot="label">Name</span>
|
|
183
213
|
<!--
|
|
@@ -196,7 +226,7 @@ The menu in this example was populated from data from a country/city API. To kee
|
|
|
196
226
|
// -----------------------
|
|
197
227
|
import { DynamicData } from './dynamicMenuDataApi';
|
|
198
228
|
|
|
199
|
-
export function dynamicMenuExample() {
|
|
229
|
+
export async function dynamicMenuExample() {
|
|
200
230
|
// Resets the root menu
|
|
201
231
|
function resetMenu(root) {
|
|
202
232
|
while (root.firstChild) {
|
|
@@ -211,15 +241,15 @@ export function dynamicMenuExample() {
|
|
|
211
241
|
resetMenu(initialMenu);
|
|
212
242
|
|
|
213
243
|
for (let index = 0; index < data.length; index++) {
|
|
214
|
-
|
|
215
|
-
|
|
244
|
+
const country = data[index]['country'];
|
|
245
|
+
const cities = data[index]['cities'];
|
|
216
246
|
|
|
217
|
-
generateMenuOptionHtml(initialMenu, country, country);
|
|
247
|
+
generateMenuOptionHtml(initialMenu, country, country.substring(0, 3).toUpperCase());
|
|
218
248
|
|
|
219
249
|
for (let indexB = 0; indexB < cities.length; indexB++) {
|
|
220
|
-
|
|
250
|
+
const subMenu = document.createElement('auro-menu');
|
|
221
251
|
|
|
222
|
-
generateMenuOptionHtml(subMenu, cities[indexB], cities[indexB]);
|
|
252
|
+
generateMenuOptionHtml(subMenu, cities[indexB], cities[indexB].substring(0, 3).toUpperCase());
|
|
223
253
|
|
|
224
254
|
initialMenu.appendChild(subMenu);
|
|
225
255
|
}
|
|
@@ -228,26 +258,35 @@ export function dynamicMenuExample() {
|
|
|
228
258
|
|
|
229
259
|
// Helper function that generates HTML for menuoptions
|
|
230
260
|
function generateMenuOptionHtml(menu, label, value) {
|
|
231
|
-
|
|
261
|
+
const option = document.createElement('auro-menuoption');
|
|
262
|
+
const displayValue = document.createElement('div');
|
|
263
|
+
displayValue.setAttribute("slot", "displayValue");
|
|
264
|
+
displayValue.innerHTML = value;
|
|
232
265
|
|
|
233
266
|
option.value = value;
|
|
234
267
|
option.innerHTML = label;
|
|
235
|
-
|
|
236
268
|
menu.appendChild(option);
|
|
269
|
+
option.appendChild(displayValue);
|
|
237
270
|
}
|
|
238
271
|
|
|
239
272
|
// Main javascript that runs all JS to create example
|
|
240
273
|
const dynamicData = new DynamicData();
|
|
241
|
-
const
|
|
242
|
-
const dropdownEl =
|
|
243
|
-
const inputEl = dropdownEl.querySelector(
|
|
274
|
+
const dynamicMenuExampleEl = document.querySelector('#dynamicMenuExample');
|
|
275
|
+
const dropdownEl = dynamicMenuExampleEl.shadowRoot.querySelector(dynamicMenuExampleEl.dropdownTag._$litStatic$);
|
|
276
|
+
const inputEl = dropdownEl.querySelector(dynamicMenuExampleEl.inputTag._$litStatic$);
|
|
244
277
|
|
|
245
278
|
inputEl.addEventListener('input', () => {
|
|
246
279
|
let data = dynamicData.getData();
|
|
247
280
|
data = dynamicData.filterData(data, inputEl.value);
|
|
248
281
|
|
|
249
282
|
generateHtml(data);
|
|
250
|
-
});
|
|
283
|
+
});
|
|
284
|
+
|
|
285
|
+
if (dynamicMenuExampleEl.value && dynamicMenuExampleEl.value.length > 0 && dynamicMenuExampleEl.input.value && (!dynamicMenuExampleEl.menu.availableOptions || dynamicMenuExampleEl.menu.availableOptions.length === 0)) {
|
|
286
|
+
let data = dynamicData.getData();
|
|
287
|
+
data = dynamicData.filterData(data, inputEl.value);
|
|
288
|
+
generateHtml(data);
|
|
289
|
+
}
|
|
251
290
|
}
|
|
252
291
|
```
|
|
253
292
|
<!-- AURO-GENERATED-CONTENT:END -->
|