@aurodesignsystem/auro-formkit 4.0.2 → 5.0.0

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 (172) hide show
  1. package/CHANGELOG.md +193 -2
  2. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  3. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  4. package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
  5. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  6. package/components/bibtemplate/dist/index.js +1184 -105
  7. package/components/bibtemplate/dist/registered.js +1184 -105
  8. package/components/checkbox/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +52 -17
  10. package/components/checkbox/demo/api.min.js +66 -33
  11. package/components/checkbox/demo/index.html +16 -10
  12. package/components/checkbox/demo/index.min.js +66 -33
  13. package/components/checkbox/demo/readme.html +16 -9
  14. package/components/checkbox/dist/auro-checkbox-group.d.ts +2 -2
  15. package/components/checkbox/dist/auro-checkbox.d.ts +8 -1
  16. package/components/checkbox/dist/index.js +65 -32
  17. package/components/checkbox/dist/registered.js +65 -32
  18. package/components/combobox/README.md +2 -0
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +124 -7
  21. package/components/combobox/demo/api.min.js +4542 -1330
  22. package/components/combobox/demo/index.html +16 -10
  23. package/components/combobox/demo/index.md +108 -4
  24. package/components/combobox/demo/index.min.js +4542 -1330
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/demo/readme.md +2 -0
  27. package/components/combobox/dist/auro-combobox.d.ts +81 -18
  28. package/components/combobox/dist/index.js +4588 -1520
  29. package/components/combobox/dist/registered.js +4588 -1520
  30. package/components/counter/demo/api.html +17 -10
  31. package/components/counter/demo/api.md +167 -21
  32. package/components/counter/demo/api.min.js +3621 -866
  33. package/components/counter/demo/index.html +17 -10
  34. package/components/counter/demo/index.md +191 -34
  35. package/components/counter/demo/index.min.js +3621 -866
  36. package/components/counter/demo/readme.html +16 -9
  37. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  38. package/components/counter/dist/auro-counter-group.d.ts +162 -11
  39. package/components/counter/dist/auro-counter.d.ts +16 -0
  40. package/components/counter/dist/helptextVersion.d.ts +2 -0
  41. package/components/counter/dist/iconVersion.d.ts +1 -1
  42. package/components/counter/dist/index.js +3619 -864
  43. package/components/counter/dist/registered.js +3619 -864
  44. package/components/datepicker/README.md +2 -1
  45. package/components/datepicker/demo/api.html +16 -10
  46. package/components/datepicker/demo/api.md +80 -30
  47. package/components/datepicker/demo/api.min.js +14795 -10365
  48. package/components/datepicker/demo/index.html +16 -10
  49. package/components/datepicker/demo/index.md +96 -4
  50. package/components/datepicker/demo/index.min.js +14795 -10365
  51. package/components/datepicker/demo/readme.html +16 -9
  52. package/components/datepicker/demo/readme.md +2 -1
  53. package/components/datepicker/dist/auro-datepicker.d.ts +163 -4
  54. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  55. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  56. package/components/datepicker/dist/index.js +14916 -10486
  57. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  58. package/components/datepicker/dist/registered.js +14916 -10486
  59. package/components/dropdown/demo/api.html +16 -10
  60. package/components/dropdown/demo/api.md +94 -262
  61. package/components/dropdown/demo/api.min.js +738 -259
  62. package/components/dropdown/demo/index.html +16 -10
  63. package/components/dropdown/demo/index.md +93 -266
  64. package/components/dropdown/demo/index.min.js +738 -259
  65. package/components/dropdown/demo/readme.html +16 -9
  66. package/components/dropdown/dist/auro-dropdown.d.ts +92 -73
  67. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  68. package/components/dropdown/dist/index.js +710 -231
  69. package/components/dropdown/dist/registered.js +710 -231
  70. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  71. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  72. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  73. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  74. package/components/form/demo/api.html +16 -9
  75. package/components/form/demo/api.md +1 -1
  76. package/components/form/demo/api.min.js +3 -3
  77. package/components/form/demo/autocomplete.html +19 -3
  78. package/components/form/demo/index.html +16 -9
  79. package/components/form/demo/index.min.js +3 -3
  80. package/components/form/demo/readme.html +16 -9
  81. package/components/form/demo/working.html +19 -13
  82. package/components/form/dist/auro-form.d.ts +1 -1
  83. package/components/form/dist/index.js +2 -2
  84. package/components/form/dist/registered.js +2 -2
  85. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  86. package/components/helptext/dist/index.js +2 -4
  87. package/components/helptext/dist/registered.js +2 -4
  88. package/components/input/README.md +6 -2
  89. package/components/input/demo/api.html +16 -10
  90. package/components/input/demo/api.md +258 -144
  91. package/components/input/demo/api.min.js +1550 -497
  92. package/components/input/demo/index.html +17 -11
  93. package/components/input/demo/index.md +95 -27
  94. package/components/input/demo/index.min.js +1549 -496
  95. package/components/input/demo/readme.html +16 -9
  96. package/components/input/demo/readme.md +6 -2
  97. package/components/input/dist/auro-input.d.ts +139 -3
  98. package/components/input/dist/base-input.d.ts +80 -26
  99. package/components/input/dist/buttonVersion.d.ts +1 -1
  100. package/components/input/dist/iconVersion.d.ts +1 -1
  101. package/components/input/dist/index.js +1504 -451
  102. package/components/input/dist/registered.js +1504 -451
  103. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  104. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  105. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  106. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  107. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  108. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  109. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  110. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  111. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  112. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  113. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  114. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  115. package/components/layoutElement/dist/index.d.ts +2 -0
  116. package/components/layoutElement/dist/index.js +98 -0
  117. package/components/layoutElement/dist/registered.js +98 -0
  118. package/components/menu/demo/api.html +17 -10
  119. package/components/menu/demo/api.md +65 -8
  120. package/components/menu/demo/api.min.js +304 -65
  121. package/components/menu/demo/index.html +16 -10
  122. package/components/menu/demo/index.min.js +304 -65
  123. package/components/menu/demo/readme.html +16 -9
  124. package/components/menu/dist/auro-menu.d.ts +53 -7
  125. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  126. package/components/menu/dist/iconVersion.d.ts +1 -1
  127. package/components/menu/dist/index.js +289 -50
  128. package/components/menu/dist/registered.js +289 -50
  129. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  130. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  131. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  132. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  133. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  134. package/components/radio/demo/api.html +16 -10
  135. package/components/radio/demo/api.md +41 -9
  136. package/components/radio/demo/api.min.js +93 -95
  137. package/components/radio/demo/index.html +16 -10
  138. package/components/radio/demo/index.min.js +93 -95
  139. package/components/radio/demo/readme.html +16 -9
  140. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  141. package/components/radio/dist/auro-radio.d.ts +11 -12
  142. package/components/radio/dist/index.js +92 -94
  143. package/components/radio/dist/registered.js +92 -94
  144. package/components/select/README.md +1 -0
  145. package/components/select/demo/api.html +16 -10
  146. package/components/select/demo/api.js +0 -2
  147. package/components/select/demo/api.md +156 -114
  148. package/components/select/demo/api.min.js +3126 -657
  149. package/components/select/demo/index.html +17 -10
  150. package/components/select/demo/index.md +398 -62
  151. package/components/select/demo/index.min.js +3129 -648
  152. package/components/select/demo/readme.html +16 -9
  153. package/components/select/demo/readme.md +1 -0
  154. package/components/select/dist/auro-select.d.ts +173 -18
  155. package/components/select/dist/helptextVersion.d.ts +2 -0
  156. package/components/select/dist/index.js +3128 -791
  157. package/components/select/dist/registered.js +3128 -791
  158. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  159. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  160. package/package.json +33 -32
  161. package/packages/build-tools/src/postinstall.mjs +0 -12
  162. /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
  163. /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
  164. /package/components/{input/dist/styles/borders-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  165. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/classic/color-css.d.ts} +0 -0
  166. /package/components/{input/dist/styles/label-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  167. /package/components/{input/dist/styles/notificationIcons-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  168. /package/components/{menu/dist/styles/color-menu-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  169. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  170. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  171. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  172. /package/components/{menu/dist/styles/tokens-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
package/components/combobox/demo/readme.html CHANGED
@@ -16,17 +16,24 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Generator | auro-combobox custom element</title>
20
- <link
21
- rel="stylesheet"
22
- type="text/css"
23
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
- />
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
19
+ <title>Auro Web Component Demo | auro-combobox</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-combobox's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
27
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
- </head>
36
+ </head>
30
37
  <body class="auro-markdown">
31
38
  <main></main>
32
39
 
package/components/combobox/demo/readme.md CHANGED
@@ -84,6 +84,8 @@ This configuration enables proper module resolution for the component's TypeScri
84
84
 
85
85
  ```html
86
86
  <auro-combobox>
87
+ <span slot="ariaLabel.bib.close">Close combobox</span>
88
+ <span slot="ariaLabel.input.clear">Clear All</span>
87
89
  <span slot="bib.fullscreen.headline">Bib Header</span>
88
90
  <span slot="label">Name</span>
89
91
  <auro-menu>
package/components/combobox/dist/auro-combobox.d.ts CHANGED
@@ -1,12 +1,16 @@
1
1
  /**
2
2
  * @slot - Default slot for the menu content.
3
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
4
+ * @slot ariaLabel.input.clear - Sets aria-label on clear button
5
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
3
6
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
4
7
  * @slot label - Defines the content of the label.
5
8
  * @slot helpText - Defines the content of the helpText.
9
+ * @slot displayValue - Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts.
6
10
  * @event auroCombobox-valueSet - Notifies that the component has a new value set.
7
11
  * @event auroFormElement-validated - Notifies that the component value(s) have been validated.
8
12
  */
9
- export class AuroCombobox extends LitElement {
13
+ export class AuroCombobox extends AuroElement {
10
14
  static get properties(): {
11
15
  /**
12
16
  * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
@@ -38,7 +42,7 @@ export class AuroCombobox extends LitElement {
38
42
  reflect: boolean;
39
43
  };
40
44
  /**
41
- * ID for the dropdown
45
+ * ID for the dropdown.
42
46
  * @private
43
47
  */
44
48
  dropdownId: {
@@ -47,7 +51,7 @@ export class AuroCombobox extends LitElement {
47
51
  attribute: boolean;
48
52
  };
49
53
  /**
50
- * Whether or not the dropdown is open
54
+ * Whether or not the dropdown is open.
51
55
  * @private
52
56
  */
53
57
  dropdownOpen: {
@@ -62,12 +66,26 @@ export class AuroCombobox extends LitElement {
62
66
  type: StringConstructor;
63
67
  reflect: boolean;
64
68
  };
69
+ /**
70
+ * Specifies the input mask format.
71
+ */
72
+ format: {
73
+ type: StringConstructor;
74
+ reflect: boolean;
75
+ };
65
76
  /** Exposes inputmode attribute for input. */
66
77
  inputmode: {
67
78
  type: StringConstructor;
68
79
  attribute: boolean;
69
80
  reflect: boolean;
70
81
  };
82
+ /**
83
+ * If declared, the popover and trigger will be set to the same width.
84
+ */
85
+ matchWidth: {
86
+ type: BooleanConstructor;
87
+ reflect: boolean;
88
+ };
71
89
  /**
72
90
  * If set, combobox will not filter menuoptions based in input.
73
91
  */
@@ -124,6 +142,13 @@ export class AuroCombobox extends LitElement {
124
142
  type: StringConstructor;
125
143
  reflect: boolean;
126
144
  };
145
+ /**
146
+ * Define custom placeholder text, only supported by date input formats.
147
+ */
148
+ placeholder: {
149
+ type: StringConstructor;
150
+ reflect: boolean;
151
+ };
127
152
  /**
128
153
  * Populates the `required` attribute on the input. Used for client-side validation.
129
154
  */
@@ -172,9 +197,10 @@ export class AuroCombobox extends LitElement {
172
197
  };
173
198
  /**
174
199
  * Value selected for the dropdown menu.
175
- * @type {string}
176
200
  */
177
- value: string;
201
+ value: {
202
+ type: StringConstructor;
203
+ };
178
204
  /**
179
205
  * If declared, make bib.fullscreen.headline in HeadingDisplay.
180
206
  * Otherwise, Heading 600
@@ -196,8 +222,8 @@ export class AuroCombobox extends LitElement {
196
222
  reflect: boolean;
197
223
  };
198
224
  /**
225
+ * Specifies the currently active option.
199
226
  * @private
200
- * specifies the currently active option
201
227
  */
202
228
  optionActive: {
203
229
  type: ObjectConstructor;
@@ -215,6 +241,7 @@ export class AuroCombobox extends LitElement {
215
241
  *
216
242
  */
217
243
  static register(name?: string): void;
244
+ matchWidth: boolean;
218
245
  /**
219
246
  * @private
220
247
  * @returns {void} Internal defaults.
@@ -240,6 +267,15 @@ export class AuroCombobox extends LitElement {
240
267
  validation: AuroFormValidation;
241
268
  runtimeUtils: any;
242
269
  isHiddenWhileLoading: boolean;
270
+ errorMessage: any;
271
+ /**
272
+ * @private
273
+ */
274
+ private shape;
275
+ /**
276
+ * @private
277
+ */
278
+ private size;
243
279
  placement: string;
244
280
  offset: number;
245
281
  noFlip: boolean;
@@ -247,13 +283,35 @@ export class AuroCombobox extends LitElement {
247
283
  dropdownTag: any;
248
284
  bibtemplateTag: any;
249
285
  inputTag: any;
286
+ helpTextTag: any;
287
+ /**
288
+ * Checks if the element is valid.
289
+ * @returns {boolean} - Returns true if the element is valid, false otherwise.
290
+ */
291
+ isValid(): boolean;
292
+ /**
293
+ * Updates the filter for the available options based on the input value.
294
+ * @private
295
+ */
296
+ private updateFilter;
297
+ noMatchOption: any;
298
+ /**
299
+ * Syncs the values and states of this component, the input, and the menu, including this.optionSelected and this.menu.optionSelected.
300
+ * @private
301
+ * @returns {void}
302
+ */
303
+ private syncValuesAndStates;
304
+ /**
305
+ * Resets the menu matchWord to true.
306
+ * @private
307
+ */
308
+ private resetMenuMatchword;
250
309
  /**
251
310
  * Processes hidden state of all menu options and determines if there are any available options not hidden.
252
311
  * @private
253
312
  * @returns {void}
254
313
  */
255
314
  private handleMenuOptions;
256
- noMatchOption: any;
257
315
  /**
258
316
  * Determines the element error state based on the `required` attribute and input value.
259
317
  * @private
@@ -263,16 +321,14 @@ export class AuroCombobox extends LitElement {
263
321
  options: any[] | NodeListOf<Element>;
264
322
  /**
265
323
  * Hides the dropdown bib if its open.
266
- * @private
267
324
  * @returns {void}
268
325
  */
269
- private hideBib;
326
+ hideBib(): void;
270
327
  /**
271
328
  * Shows the dropdown bib if there are options to show.
272
- * @private
273
329
  * @returns {void}
274
330
  */
275
- private showBib;
331
+ showBib(): void;
276
332
  /**
277
333
  * Binds all behavior needed to the dropdown after rendering.
278
334
  * @private
@@ -280,14 +336,16 @@ export class AuroCombobox extends LitElement {
280
336
  */
281
337
  private configureDropdown;
282
338
  bibtemplate: any;
339
+ inputInBib: any;
283
340
  /**
284
341
  * @private
285
- * When the dropdown is visible in fullscreen mode, the input is moved to the subheader slot of bibtemplate.
286
- * Otherwise, it's moved back to the trigger slot.
342
+ */
343
+ private setInputFocus;
344
+ /**
345
+ * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
287
346
  * @private
288
- * @returns {void}
289
347
  */
290
- private transportInput;
348
+ private updateMenuShapeSize;
291
349
  /**
292
350
  * Binds all behavior needed to the menu after rendering.
293
351
  * @private
@@ -301,7 +359,6 @@ export class AuroCombobox extends LitElement {
301
359
  * @returns {void}
302
360
  */
303
361
  private configureInput;
304
- errorMessage: any;
305
362
  /**
306
363
  * Manages the visibility of the dropdown based on loading state changes.
307
364
  *
@@ -320,6 +377,7 @@ export class AuroCombobox extends LitElement {
320
377
  /**
321
378
  * Handle changes to the input value and trigger changes that should result.
322
379
  * @private
380
+ * @param {Event} event - The input event triggered by the input element.
323
381
  * @returns {void}
324
382
  */
325
383
  private handleInputValueChange;
@@ -343,12 +401,17 @@ export class AuroCombobox extends LitElement {
343
401
  * @returns {void}
344
402
  */
345
403
  reset(): void;
404
+ /**
405
+ * Clears the current value of the combobox.
406
+ * @returns {void}
407
+ */
408
+ clear(): void;
346
409
  /**
347
410
  * Validates value.
348
411
  * @param {boolean} [force=false] - Whether to force validation.
349
412
  */
350
413
  validate(force?: boolean): void;
351
- updated(changedProperties: any): void;
414
+ updated(changedProperties: any): Promise<void>;
352
415
  /**
353
416
  * Applies slotted nodes to a target element with a new slot name.
354
417
  * @private
@@ -367,5 +430,5 @@ export class AuroCombobox extends LitElement {
367
430
  private handleSlotChange;
368
431
  render(): import("lit-html").TemplateResult;
369
432
  }
370
- import { LitElement } from "lit";
433
+ import { AuroElement } from '../../layoutElement/src/auroElement.js';
371
434
  import AuroFormValidation from '@auro-formkit/form-validation';