@aurodesignsystem-dev/auro-formkit 0.0.0-pr741.0 → 0.0.0-pr750.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 (92) hide show
  1. package/components/bibtemplate/dist/index.js +1 -1
  2. package/components/bibtemplate/dist/registered.js +1 -1
  3. package/components/checkbox/demo/api.html +16 -10
  4. package/components/checkbox/demo/api.min.js +11 -11
  5. package/components/checkbox/demo/index.html +16 -10
  6. package/components/checkbox/demo/index.min.js +11 -11
  7. package/components/checkbox/demo/readme.html +16 -9
  8. package/components/checkbox/dist/index.js +11 -11
  9. package/components/checkbox/dist/registered.js +11 -11
  10. package/components/combobox/demo/api.html +16 -10
  11. package/components/combobox/demo/api.md +12 -6
  12. package/components/combobox/demo/api.min.js +411 -103
  13. package/components/combobox/demo/index.html +16 -10
  14. package/components/combobox/demo/index.min.js +411 -103
  15. package/components/combobox/demo/readme.html +16 -9
  16. package/components/combobox/dist/index.js +374 -91
  17. package/components/combobox/dist/registered.js +374 -91
  18. package/components/counter/demo/api.html +16 -10
  19. package/components/counter/demo/api.md +140 -7
  20. package/components/counter/demo/api.min.js +1145 -987
  21. package/components/counter/demo/index.html +16 -10
  22. package/components/counter/demo/index.md +82 -0
  23. package/components/counter/demo/index.min.js +1145 -987
  24. package/components/counter/demo/readme.html +16 -9
  25. package/components/counter/dist/auro-counter-group.d.ts +64 -23
  26. package/components/counter/dist/auro-counter.d.ts +10 -0
  27. package/components/counter/dist/index.js +1145 -987
  28. package/components/counter/dist/registered.js +1145 -987
  29. package/components/datepicker/demo/api.html +16 -10
  30. package/components/datepicker/demo/api.min.js +374 -91
  31. package/components/datepicker/demo/index.html +16 -10
  32. package/components/datepicker/demo/index.min.js +374 -91
  33. package/components/datepicker/demo/readme.html +16 -9
  34. package/components/datepicker/dist/auro-datepicker.d.ts +6 -0
  35. package/components/datepicker/dist/index.js +374 -91
  36. package/components/datepicker/dist/registered.js +374 -91
  37. package/components/dropdown/demo/api.html +16 -10
  38. package/components/dropdown/demo/api.md +77 -267
  39. package/components/dropdown/demo/api.min.js +331 -64
  40. package/components/dropdown/demo/index.html +16 -10
  41. package/components/dropdown/demo/index.md +45 -363
  42. package/components/dropdown/demo/index.min.js +331 -64
  43. package/components/dropdown/demo/readme.html +16 -9
  44. package/components/dropdown/dist/auro-dropdown.d.ts +35 -67
  45. package/components/dropdown/dist/index.js +331 -64
  46. package/components/dropdown/dist/registered.js +331 -64
  47. package/components/form/demo/api.html +16 -9
  48. package/components/form/demo/autocomplete.html +19 -3
  49. package/components/form/demo/index.html +16 -9
  50. package/components/form/demo/readme.html +16 -9
  51. package/components/form/demo/working.html +19 -13
  52. package/components/helptext/dist/index.js +1 -1
  53. package/components/helptext/dist/registered.js +1 -1
  54. package/components/input/demo/api.html +16 -10
  55. package/components/input/demo/api.md +1 -1
  56. package/components/input/demo/api.min.js +14 -14
  57. package/components/input/demo/index.html +16 -10
  58. package/components/input/demo/index.min.js +14 -14
  59. package/components/input/demo/readme.html +16 -9
  60. package/components/input/dist/base-input.d.ts +1 -1
  61. package/components/input/dist/index.js +14 -14
  62. package/components/input/dist/registered.js +14 -14
  63. package/components/menu/demo/api.html +16 -32
  64. package/components/menu/demo/api.md +1 -1
  65. package/components/menu/demo/api.min.js +37 -12
  66. package/components/menu/demo/index.html +16 -10
  67. package/components/menu/demo/index.min.js +37 -12
  68. package/components/menu/demo/readme.html +16 -9
  69. package/components/menu/dist/auro-menu.d.ts +13 -2
  70. package/components/menu/dist/index.js +37 -12
  71. package/components/menu/dist/registered.js +37 -12
  72. package/components/radio/demo/api.html +16 -10
  73. package/components/radio/demo/api.md +0 -1
  74. package/components/radio/demo/api.min.js +61 -76
  75. package/components/radio/demo/index.html +16 -10
  76. package/components/radio/demo/index.min.js +61 -76
  77. package/components/radio/demo/readme.html +16 -9
  78. package/components/radio/dist/auro-radio.d.ts +8 -11
  79. package/components/radio/dist/index.js +61 -76
  80. package/components/radio/dist/registered.js +61 -76
  81. package/components/select/demo/api.html +16 -10
  82. package/components/select/demo/api.js +0 -2
  83. package/components/select/demo/api.md +53 -51
  84. package/components/select/demo/api.min.js +491 -326
  85. package/components/select/demo/index.html +16 -11
  86. package/components/select/demo/index.md +6 -158
  87. package/components/select/demo/index.min.js +491 -314
  88. package/components/select/demo/readme.html +16 -9
  89. package/components/select/dist/auro-select.d.ts +33 -8
  90. package/components/select/dist/index.js +454 -302
  91. package/components/select/dist/registered.js +454 -302
  92. package/package.json +26 -25
@@ -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-counter 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-counter</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-counter'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
 
@@ -25,6 +25,23 @@ export class AuroCounterGroup extends LitElement {
25
25
  type: BooleanConstructor;
26
26
  reflect: boolean;
27
27
  };
28
+ /**
29
+ * The current error message to display when the component is invalid.
30
+ */
31
+ error: {
32
+ type: StringConstructor;
33
+ reflect: boolean;
34
+ };
35
+ /**
36
+ * The current error message to display when the component is invalid.
37
+ * This is set by validation and is not available to consumers.
38
+ * @private
39
+ */
40
+ errorMessage: {
41
+ type: StringConstructor;
42
+ reflect: boolean;
43
+ attribute: boolean;
44
+ };
28
45
  /**
29
46
  * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
30
47
  * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
@@ -103,7 +120,7 @@ export class AuroCounterGroup extends LitElement {
103
120
  * "top" | "right" | "bottom" | "left" |
104
121
  * "bottom-start" | "top-start" | "top-end" |
105
122
  * "right-start" | "right-end" | "bottom-end" |
106
- * "left-start" | "left-end"
123
+ * "left-start" | "left-end".
107
124
  * @default bottom-start
108
125
  */
109
126
  placement: {
@@ -176,11 +193,20 @@ export class AuroCounterGroup extends LitElement {
176
193
  */
177
194
  private validation;
178
195
  /**
179
- * Performs state updates that should happen when the dropdown is toggled.
196
+ * Updates the aggregate value based on the values of contained auro-counter components.
197
+ * This method queries for all `auro-counter` elements, sums their values, and updates the component's `value` property.
198
+ * Additionally, it iterates through each counter and calls `manageDisabled()` on it.
199
+ * @private
200
+ */
201
+ private updateValue;
202
+ /**
203
+ * Updates the validity of the counter group based on the validity of its counters.
204
+ * This method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.
205
+ * If any counter is invalid, it generates a combined error message from all invalid counters.
180
206
  * @returns {void}
181
207
  * @private
182
208
  */
183
- private handleDropdownToggle;
209
+ private updateValidity;
184
210
  /**
185
211
  * Dynamically generated dropdown tag.
186
212
  * @private
@@ -199,6 +225,10 @@ export class AuroCounterGroup extends LitElement {
199
225
  * @type {string}
200
226
  */
201
227
  private helpTextTag;
228
+ /**
229
+ * @private
230
+ */
231
+ private iconTag;
202
232
  /**
203
233
  * Dynamically disables increment/decrement buttons on a counter based on group value.
204
234
  * This method checks the total aggregated value against the group's min and max properties.
@@ -216,15 +246,27 @@ export class AuroCounterGroup extends LitElement {
216
246
  */
217
247
  private configureCounters;
218
248
  /**
219
- * Updates the focus trap based on whether the dropdown is open or closed.
220
- * If the dropdown is open, it creates a new focus trap and focuses the first element
221
- * If the dropdown is closed, it disconnects the focus trap if it exists to prevent memory leaks and disable focus trapping.
222
- * @param {boolean} dropdownIsOpen - Indicates whether the dropdown is currently open.
223
- * @returns {void}
249
+ * Renders help text error messages.
250
+ * @param {Array<string>} messages - The error messages to render.
251
+ * @returns {TemplateResult[]} - The rendered error messages rendered in a TemplateResult.
224
252
  * @private
225
253
  */
226
- private updateFocusTrap;
227
- dropdownFocusTrap: any;
254
+ private renderHelpTextErrors;
255
+ /**
256
+ * Gets and returns an array of counters in an invalid state.
257
+ * @returns {Array<HTMLElement>} - Returns an array of invalid counters.
258
+ * @param {NodeList} counters - The NodeList of counter elements to check.
259
+ * @private
260
+ */
261
+ private getInvalidCounters;
262
+ /**
263
+ * Gets all valid error messages from errored counters.
264
+ * @param {NodeList} invalidCounters - The NodeList of counter elements to check.
265
+ * @returns {Array<string>} - Returns an array of error messages from invalid counters.
266
+ * @private
267
+ */
268
+ private getErrorMessages;
269
+ errorMessage: any;
228
270
  /**
229
271
  * Configures the dropdown counters by selecting all `auro-counter` elements,
230
272
  * appending them to the `auro-counter-wrapper` element within the shadow DOM,
@@ -251,13 +293,6 @@ export class AuroCounterGroup extends LitElement {
251
293
  * @returns {number} The converted number or 0 if invalid.
252
294
  */
253
295
  private safeNumberConversion;
254
- /**
255
- * Updates the aggregate value based on the values of contained auro-counter components.
256
- * This method queries for all `auro-counter` elements, sums their values, and updates the component's `value` property.
257
- * Additionally, it iterates through each counter and calls `manageDisabled()` on it.
258
- * @private
259
- */
260
- private updateValue;
261
296
  /**
262
297
  * Updates the value text in the dropdown trigger based on the counters in the counter group.
263
298
  * @private
@@ -271,6 +306,18 @@ export class AuroCounterGroup extends LitElement {
271
306
  validate(force?: boolean): void;
272
307
  updated(changedProperties: any): void;
273
308
  firstUpdated(): void;
309
+ /**
310
+ * Returns HTML for the help text and error message.
311
+ * @private
312
+ * @returns {html} - Returns HTML for the help text and error message.
313
+ */
314
+ private renderHelpText;
315
+ /**
316
+ * Returns HTML for the validation error icon.
317
+ * @private
318
+ * @returns {html} - Returns HTML for the validation error icon.
319
+ */
320
+ private renderValidationErrorIcon;
274
321
  /**
275
322
  * Render the dropdown structure for the counter group.
276
323
  * @returns {TemplateResult} The dropdown template.
@@ -283,12 +330,6 @@ export class AuroCounterGroup extends LitElement {
283
330
  * @private
284
331
  */
285
332
  private renderDropdownTrigger;
286
- /**
287
- * Render the help text for the counter group.
288
- * @returns {TemplateResult} The help text template.
289
- * @private
290
- */
291
- private renderHelpText;
292
333
  /**
293
334
  * Render the dropdown bib template for the dropdown.
294
335
  * @returns {TemplateResult} The bib template.
@@ -42,6 +42,10 @@ export class AuroCounter extends LitElement {
42
42
  * @type {string}
43
43
  */
44
44
  private iconTag;
45
+ /**
46
+ * @private
47
+ */
48
+ private helpTextTag;
45
49
  /**
46
50
  * Increments the counter value by 1. If a value is provided, it increments by that amount.
47
51
  * @method increment
@@ -98,6 +102,12 @@ export class AuroCounter extends LitElement {
98
102
  */
99
103
  private onDefaultSlotChange;
100
104
  updated(changedProperties: any): void;
105
+ /**
106
+ * Returns HTML for the help text and error message.
107
+ * @private
108
+ * @returns {html} - Returns HTML for the help text and error message.
109
+ */
110
+ private renderHelpText;
101
111
  render(): import("lit-html").TemplateResult;
102
112
  }
103
113
  import { LitElement } from "lit";