@aurodesignsystem/auro-formkit 5.7.0 → 5.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/CHANGELOG.md +15 -26
  2. package/components/checkbox/demo/api.min.js +68 -4
  3. package/components/checkbox/demo/index.min.js +68 -4
  4. package/components/checkbox/dist/index.js +68 -4
  5. package/components/checkbox/dist/registered.js +68 -4
  6. package/components/combobox/demo/api.md +230 -38
  7. package/components/combobox/demo/api.min.js +207 -52
  8. package/components/combobox/demo/index.md +150 -1
  9. package/components/combobox/demo/index.min.js +207 -52
  10. package/components/combobox/dist/auro-combobox.d.ts +18 -1
  11. package/components/combobox/dist/index.js +201 -51
  12. package/components/combobox/dist/registered.js +201 -51
  13. package/components/counter/demo/api.min.js +80 -22
  14. package/components/counter/demo/index.min.js +80 -22
  15. package/components/counter/dist/buttonVersion.d.ts +2 -0
  16. package/components/counter/dist/index.js +80 -22
  17. package/components/counter/dist/registered.js +80 -22
  18. package/components/datepicker/demo/api.md +40 -0
  19. package/components/datepicker/demo/api.min.js +218 -55
  20. package/components/datepicker/demo/index.min.js +218 -55
  21. package/components/datepicker/dist/auro-calendar-cell.d.ts +6 -0
  22. package/components/datepicker/dist/auro-datepicker.d.ts +8 -0
  23. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  24. package/components/datepicker/dist/iconVersion.d.ts +1 -1
  25. package/components/datepicker/dist/index.js +218 -55
  26. package/components/datepicker/dist/registered.js +218 -55
  27. package/components/dropdown/demo/api.min.js +6 -8
  28. package/components/dropdown/demo/index.min.js +6 -8
  29. package/components/dropdown/dist/iconVersion.d.ts +1 -1
  30. package/components/dropdown/dist/index.js +6 -8
  31. package/components/dropdown/dist/registered.js +6 -8
  32. package/components/input/demo/api.min.js +99 -27
  33. package/components/input/demo/index.min.js +99 -27
  34. package/components/input/dist/base-input.d.ts +19 -2
  35. package/components/input/dist/buttonVersion.d.ts +1 -1
  36. package/components/input/dist/index.js +99 -27
  37. package/components/input/dist/registered.js +99 -27
  38. package/components/menu/demo/api.min.js +6 -1
  39. package/components/menu/demo/index.min.js +6 -1
  40. package/components/menu/dist/index.js +6 -1
  41. package/components/menu/dist/registered.js +6 -1
  42. package/components/radio/demo/api.min.js +100 -8
  43. package/components/radio/demo/index.min.js +100 -8
  44. package/components/radio/dist/auro-radio-group.d.ts +14 -0
  45. package/components/radio/dist/index.js +100 -8
  46. package/components/radio/dist/registered.js +100 -8
  47. package/components/select/demo/api.min.js +84 -20
  48. package/components/select/demo/index.min.js +84 -20
  49. package/components/select/dist/index.js +78 -19
  50. package/components/select/dist/registered.js +78 -19
  51. package/package.json +5 -2
  52. package/components/checkbox/dist/helptextVersion.d.ts +0 -2
  53. package/components/combobox/dist/bibtemplateVersion.d.ts +0 -2
  54. package/components/combobox/dist/dropdownVersion.d.ts +0 -2
  55. package/components/combobox/dist/inputVersion.d.ts +0 -2
  56. package/components/counter/dist/bibtemplateVersion.d.ts +0 -2
  57. package/components/counter/dist/dropdownVersion.d.ts +0 -2
  58. package/components/counter/dist/helptextVersion.d.ts +0 -2
  59. package/components/datepicker/dist/bibtemplateVersion.d.ts +0 -2
  60. package/components/datepicker/dist/dropdownVersion.d.ts +0 -2
  61. package/components/datepicker/dist/inputVersion.d.ts +0 -2
  62. package/components/dropdown/dist/dropdownVersion.d.ts +0 -2
  63. package/components/dropdown/dist/helptextVersion.d.ts +0 -2
  64. package/components/input/dist/helptextVersion.d.ts +0 -2
  65. package/components/menu/dist/dropdownVersion.d.ts +0 -2
  66. package/components/radio/dist/helptextVersion.d.ts +0 -2
  67. package/components/select/dist/bibtemplateVersion.d.ts +0 -2
  68. package/components/select/dist/dropdownVersion.d.ts +0 -2
  69. package/components/select/dist/helptextVersion.d.ts +0 -2
package/components/combobox/demo/index.md CHANGED
@@ -24,7 +24,52 @@ The `<auro-combobox>` element should be used in situations where users may:
24
24
 
25
25
  ## Example(s)
26
26
 
27
- ## Classic Layout
27
+ ## Default
28
+
29
+ <div class="exampleWrapper">
30
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
31
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
32
+ <auro-combobox>
33
+ <span slot="ariaLabel.bib.close">Close combobox</span>
34
+ <span slot="ariaLabel.input.clear">Clear All</span>
35
+ <span slot="bib.fullscreen.headline">Bib Header</span>
36
+ <span slot="label">Name</span>
37
+ <auro-menu>
38
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
39
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
40
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
41
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
42
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
43
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
44
+ </auro-menu>
45
+ </auro-combobox>
46
+ <!-- AURO-GENERATED-CONTENT:END -->
47
+ </div>
48
+ <auro-accordion alignRight>
49
+ <span slot="trigger">See code</span>
50
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
51
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
52
+
53
+ ```html
54
+ <auro-combobox>
55
+ <span slot="ariaLabel.bib.close">Close combobox</span>
56
+ <span slot="ariaLabel.input.clear">Clear All</span>
57
+ <span slot="bib.fullscreen.headline">Bib Header</span>
58
+ <span slot="label">Name</span>
59
+ <auro-menu>
60
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
61
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
62
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
63
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
64
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
65
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
66
+ </auro-menu>
67
+ </auro-combobox>
68
+ ```
69
+ <!-- AURO-GENERATED-CONTENT:END -->
70
+ </auro-accordion>
71
+
72
+ ## Layouts
28
73
 
29
74
  <div class="exampleWrapper">
30
75
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic.html) -->
@@ -126,6 +171,9 @@ The `<auro-combobox>` element should be used in situations where users may:
126
171
  </auro-combobox>
127
172
  <!-- AURO-GENERATED-CONTENT:END -->
128
173
  </div>
174
+
175
+ ### Classic
176
+
129
177
  <div class="exampleWrapper">
130
178
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
131
179
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
@@ -201,6 +249,107 @@ The `<auro-combobox>` element should be used in situations where users may:
201
249
  <!-- AURO-GENERATED-CONTENT:END -->
202
250
  </auro-accordion>
203
251
 
252
+ ### Behavior
253
+
254
+ There are two behaviors available for the combo box: suggestion and filter.
255
+ The default behavior is "suggestion".
256
+
257
+ #### Suggestion
258
+
259
+ With the suggestion behavior, the menu options are displayed to the user as suggestions, but the user may enter whatever value they like into the input
260
+
261
+ <div class="exampleWrapper">
262
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/suggestion.html) -->
263
+ <!-- The below content is automatically added from ./../apiExamples/suggestion.html -->
264
+ <auro-combobox behavior="suggestion">
265
+ <span slot="ariaLabel.bib.close">Close combobox</span>
266
+ <span slot="ariaLabel.input.clear">Clear All</span>
267
+ <span slot="bib.fullscreen.headline">Bib Header</span>
268
+ <span slot="label">Name</span>
269
+ <auro-menu>
270
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
271
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
272
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
273
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
274
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
275
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
276
+ </auro-menu>
277
+ </auro-combobox>
278
+ <!-- AURO-GENERATED-CONTENT:END -->
279
+ </div>
280
+ <auro-accordion alignRight>
281
+ <span slot="trigger">See code</span>
282
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/suggestion.html) -->
283
+ <!-- The below code snippet is automatically added from ./../apiExamples/suggestion.html -->
284
+
285
+ ```html
286
+ <auro-combobox behavior="suggestion">
287
+ <span slot="ariaLabel.bib.close">Close combobox</span>
288
+ <span slot="ariaLabel.input.clear">Clear All</span>
289
+ <span slot="bib.fullscreen.headline">Bib Header</span>
290
+ <span slot="label">Name</span>
291
+ <auro-menu>
292
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
293
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
294
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
295
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
296
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
297
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
298
+ </auro-menu>
299
+ </auro-combobox>
300
+ ```
301
+ <!-- AURO-GENERATED-CONTENT:END -->
302
+ </auro-accordion>
303
+
304
+ #### Filter
305
+
306
+ With the filter behavior, the menu options are displayed to the user, and the user is required to choose one of the menu options in order for the input to be considered valid.
307
+
308
+ The `setCustomValidityValueMissingFilter` attribute is also available to display a custom message to the user when this validation check fails.
309
+
310
+ <div class="exampleWrapper">
311
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/filter.html) -->
312
+ <!-- The below content is automatically added from ./../apiExamples/filter.html -->
313
+ <auro-combobox behavior="filter" setCustomValidityValueMissingFilter="Please select an option from the list">
314
+ <span slot="ariaLabel.bib.close">Close combobox</span>
315
+ <span slot="ariaLabel.input.clear">Clear All</span>
316
+ <span slot="bib.fullscreen.headline">Bib Header</span>
317
+ <span slot="label">Name</span>
318
+ <auro-menu>
319
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
320
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
321
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
322
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
323
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
324
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
325
+ </auro-menu>
326
+ </auro-combobox>
327
+ <!-- AURO-GENERATED-CONTENT:END -->
328
+ </div>
329
+ <auro-accordion alignRight>
330
+ <span slot="trigger">See code</span>
331
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/filter.html) -->
332
+ <!-- The below code snippet is automatically added from ./../apiExamples/filter.html -->
333
+
334
+ ```html
335
+ <auro-combobox behavior="filter" setCustomValidityValueMissingFilter="Please select an option from the list">
336
+ <span slot="ariaLabel.bib.close">Close combobox</span>
337
+ <span slot="ariaLabel.input.clear">Clear All</span>
338
+ <span slot="bib.fullscreen.headline">Bib Header</span>
339
+ <span slot="label">Name</span>
340
+ <auro-menu>
341
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
342
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
343
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
344
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
345
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
346
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
347
+ </auro-menu>
348
+ </auro-combobox>
349
+ ```
350
+ <!-- AURO-GENERATED-CONTENT:END -->
351
+ </auro-accordion>
352
+
204
353
  ### Airports example
205
354
 
206
355
  <div class="exampleWrapper">