@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.7 → 0.0.0-pr624.70

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 (138) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  2. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  3. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/index.js +1262 -81
  5. package/components/bibtemplate/dist/registered.js +1262 -81
  6. package/components/checkbox/README.md +1 -1
  7. package/components/checkbox/demo/api.html +16 -10
  8. package/components/checkbox/demo/api.md +47 -14
  9. package/components/checkbox/demo/api.min.js +65 -42
  10. package/components/checkbox/demo/index.html +16 -10
  11. package/components/checkbox/demo/index.md +2 -2
  12. package/components/checkbox/demo/index.min.js +65 -42
  13. package/components/checkbox/demo/readme.html +16 -9
  14. package/components/checkbox/demo/readme.md +1 -1
  15. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  16. package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
  17. package/components/checkbox/dist/index.js +65 -42
  18. package/components/checkbox/dist/registered.js +65 -42
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +113 -8
  21. package/components/combobox/demo/api.min.js +3096 -870
  22. package/components/combobox/demo/index.html +16 -10
  23. package/components/combobox/demo/index.md +6 -30
  24. package/components/combobox/demo/index.min.js +3096 -870
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/dist/auro-combobox.d.ts +42 -8
  27. package/components/combobox/dist/index.js +2878 -748
  28. package/components/combobox/dist/registered.js +2878 -748
  29. package/components/counter/demo/api.html +17 -10
  30. package/components/counter/demo/api.md +156 -21
  31. package/components/counter/demo/api.min.js +3363 -652
  32. package/components/counter/demo/index.html +17 -10
  33. package/components/counter/demo/index.md +185 -34
  34. package/components/counter/demo/index.min.js +3363 -652
  35. package/components/counter/demo/readme.html +16 -9
  36. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  37. package/components/counter/dist/auro-counter-group.d.ts +151 -11
  38. package/components/counter/dist/auro-counter.d.ts +16 -0
  39. package/components/counter/dist/helptextVersion.d.ts +2 -0
  40. package/components/counter/dist/iconVersion.d.ts +1 -1
  41. package/components/counter/dist/index.js +3364 -653
  42. package/components/counter/dist/registered.js +3364 -653
  43. package/components/datepicker/demo/api.html +16 -10
  44. package/components/datepicker/demo/api.md +25 -16
  45. package/components/datepicker/demo/api.min.js +11857 -8105
  46. package/components/datepicker/demo/index.html +16 -10
  47. package/components/datepicker/demo/index.md +71 -4
  48. package/components/datepicker/demo/index.min.js +11857 -8105
  49. package/components/datepicker/demo/readme.html +16 -9
  50. package/components/datepicker/dist/auro-datepicker.d.ts +89 -11
  51. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  52. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  53. package/components/datepicker/dist/index.js +8691 -4939
  54. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  55. package/components/datepicker/dist/registered.js +8691 -4939
  56. package/components/dropdown/demo/api.html +16 -10
  57. package/components/dropdown/demo/api.md +81 -274
  58. package/components/dropdown/demo/api.min.js +429 -195
  59. package/components/dropdown/demo/index.html +16 -10
  60. package/components/dropdown/demo/index.md +92 -362
  61. package/components/dropdown/demo/index.min.js +429 -195
  62. package/components/dropdown/demo/readme.html +16 -9
  63. package/components/dropdown/dist/auro-dropdown.d.ts +41 -76
  64. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  65. package/components/dropdown/dist/index.js +429 -195
  66. package/components/dropdown/dist/registered.js +429 -195
  67. package/components/form/demo/api.html +16 -9
  68. package/components/form/demo/api.min.js +1 -1
  69. package/components/form/demo/autocomplete.html +19 -3
  70. package/components/form/demo/index.html +16 -9
  71. package/components/form/demo/index.min.js +1 -1
  72. package/components/form/demo/readme.html +16 -9
  73. package/components/form/demo/working.html +19 -13
  74. package/components/form/dist/index.js +1 -1
  75. package/components/form/dist/registered.js +1 -1
  76. package/components/helptext/dist/index.js +2 -2
  77. package/components/helptext/dist/registered.js +2 -2
  78. package/components/input/README.md +5 -2
  79. package/components/input/demo/api.html +16 -10
  80. package/components/input/demo/api.md +228 -130
  81. package/components/input/demo/api.min.js +908 -246
  82. package/components/input/demo/index.html +16 -10
  83. package/components/input/demo/index.md +48 -32
  84. package/components/input/demo/index.min.js +908 -246
  85. package/components/input/demo/readme.html +16 -9
  86. package/components/input/demo/readme.md +5 -2
  87. package/components/input/dist/auro-input.d.ts +3 -3
  88. package/components/input/dist/base-input.d.ts +38 -10
  89. package/components/input/dist/buttonVersion.d.ts +1 -1
  90. package/components/input/dist/iconVersion.d.ts +1 -1
  91. package/components/input/dist/index.js +908 -246
  92. package/components/input/dist/registered.js +908 -246
  93. package/components/layoutElement/dist/index.js +13 -10
  94. package/components/menu/demo/api.html +32 -10
  95. package/components/menu/demo/api.md +69 -8
  96. package/components/menu/demo/api.min.js +238 -47
  97. package/components/menu/demo/index.html +16 -10
  98. package/components/menu/demo/index.min.js +238 -47
  99. package/components/menu/demo/readme.html +16 -9
  100. package/components/menu/dist/auro-menu.d.ts +41 -7
  101. package/components/menu/dist/auro-menuoption.d.ts +15 -3
  102. package/components/menu/dist/iconVersion.d.ts +1 -1
  103. package/components/menu/dist/index.js +238 -47
  104. package/components/menu/dist/registered.js +238 -47
  105. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  106. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  107. package/components/radio/demo/api.html +16 -10
  108. package/components/radio/demo/api.md +7 -8
  109. package/components/radio/demo/api.min.js +88 -90
  110. package/components/radio/demo/index.html +16 -10
  111. package/components/radio/demo/index.min.js +88 -90
  112. package/components/radio/demo/readme.html +16 -9
  113. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  114. package/components/radio/dist/auro-radio.d.ts +9 -12
  115. package/components/radio/dist/index.js +88 -90
  116. package/components/radio/dist/registered.js +88 -90
  117. package/components/select/demo/api.html +16 -10
  118. package/components/select/demo/api.js +0 -2
  119. package/components/select/demo/api.md +104 -57
  120. package/components/select/demo/api.min.js +2148 -635
  121. package/components/select/demo/index.html +17 -11
  122. package/components/select/demo/index.md +45 -158
  123. package/components/select/demo/index.min.js +2148 -623
  124. package/components/select/demo/readme.html +16 -9
  125. package/components/select/dist/auro-select.d.ts +49 -16
  126. package/components/select/dist/index.js +2078 -649
  127. package/components/select/dist/registered.js +2078 -649
  128. package/package.json +30 -27
  129. /package/components/{datepicker/dist/styles/emphasized/style-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  130. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/color-css.d.ts +0 -0
  131. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  132. /package/components/dropdown/dist/styles/{default → classic}/bibColors-css.d.ts +0 -0
  133. /package/components/dropdown/dist/styles/{default → classic}/bibStyles-css.d.ts +0 -0
  134. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  135. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  136. /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menu-css.d.ts} +0 -0
  137. /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
  138. /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menu-css.d.ts} +0 -0
package/components/counter/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-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
 
package/components/counter/dist/auro-counter-button.d.ts CHANGED
@@ -9,4 +9,6 @@ export class AuroCounterButton {
9
9
  *
10
10
  */
11
11
  static register(name?: string): void;
12
+ size: string;
13
+ shape: string;
12
14
  }
package/components/counter/dist/auro-counter-group.d.ts CHANGED
@@ -12,6 +12,7 @@
12
12
  * @slot label - Dropdown label content. Only used when `isDropdown` is true.
13
13
  * @slot valueText - Dropdown value text display. Only used when `isDropdown` is true.
14
14
  * @slot helpText - Dropdown help text content. Only used when `isDropdown` is true.
15
+ * @property {'classic'|'snowflake'} layout - Determines the layout style of the counter group when it is a dropdown. Options are 'classic' or 'snowflake'. Default is 'classic'.
15
16
  */
16
17
  export class AuroCounterGroup extends LitElement {
17
18
  static get styles(): import("lit").CSSResult[];
@@ -24,6 +25,23 @@ export class AuroCounterGroup extends LitElement {
24
25
  type: BooleanConstructor;
25
26
  reflect: boolean;
26
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
+ };
27
45
  /**
28
46
  * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
29
47
  * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
@@ -42,6 +60,14 @@ export class AuroCounterGroup extends LitElement {
42
60
  isDropdown: {
43
61
  type: BooleanConstructor;
44
62
  };
63
+ /**
64
+ * If declared, the dropdown will expand to the width of its parent container.
65
+ * Otherwise, the dropdown width will be determined by its content.
66
+ */
67
+ matchWidth: {
68
+ type: BooleanConstructor;
69
+ reflect: boolean;
70
+ };
45
71
  /**
46
72
  * The maximum value allowed for the whole group of counters.
47
73
  */
@@ -94,7 +120,7 @@ export class AuroCounterGroup extends LitElement {
94
120
  * "top" | "right" | "bottom" | "left" |
95
121
  * "bottom-start" | "top-start" | "top-end" |
96
122
  * "right-start" | "right-end" | "bottom-end" |
97
- * "left-start" | "left-end"
123
+ * "left-start" | "left-end".
98
124
  * @default bottom-start
99
125
  */
100
126
  placement: {
@@ -120,6 +146,15 @@ export class AuroCounterGroup extends LitElement {
120
146
  value: {
121
147
  type: ObjectConstructor;
122
148
  };
149
+ /**
150
+ * The current text in the valueText slot.
151
+ * @private
152
+ */
153
+ valueText: {
154
+ type: StringConstructor;
155
+ reflect: boolean;
156
+ attribute: boolean;
157
+ };
123
158
  };
124
159
  /**
125
160
  * Registers the custom element with the browser.
@@ -134,11 +169,13 @@ export class AuroCounterGroup extends LitElement {
134
169
  total: number;
135
170
  validity: any;
136
171
  value: {};
172
+ matchWidth: boolean;
137
173
  isDropdown: boolean;
138
174
  fullscreenBreakpoint: string;
139
175
  largeFullscreenHeadline: boolean;
140
176
  autoPlacement: boolean;
141
177
  noFlip: boolean;
178
+ placement: string;
142
179
  /**
143
180
  * @private
144
181
  */
@@ -155,6 +192,21 @@ export class AuroCounterGroup extends LitElement {
155
192
  * @private
156
193
  */
157
194
  private validation;
195
+ /**
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.
206
+ * @returns {void}
207
+ * @private
208
+ */
209
+ private updateValidity;
158
210
  /**
159
211
  * Dynamically generated dropdown tag.
160
212
  * @private
@@ -168,12 +220,15 @@ export class AuroCounterGroup extends LitElement {
168
220
  */
169
221
  private bibtemplateTag;
170
222
  /**
171
- * Traps keyboard tab interactions within dropdown when open.
223
+ * Dynamically generated helpText tag.
224
+ * @private
225
+ * @type {string}
226
+ */
227
+ private helpTextTag;
228
+ /**
172
229
  * @private
173
- * @param {KeyboardEvent} event - The keyboard event.
174
- * @param {NodeList} counters - The list of counter elements.
175
230
  */
176
- private trapKeyboard;
231
+ private iconTag;
177
232
  /**
178
233
  * Dynamically disables increment/decrement buttons on a counter based on group value.
179
234
  * This method checks the total aggregated value against the group's min and max properties.
@@ -190,6 +245,28 @@ export class AuroCounterGroup extends LitElement {
190
245
  * @private
191
246
  */
192
247
  private configureCounters;
248
+ /**
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.
252
+ * @private
253
+ */
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;
193
270
  /**
194
271
  * Configures the dropdown counters by selecting all `auro-counter` elements,
195
272
  * appending them to the `auro-counter-wrapper` element within the shadow DOM,
@@ -197,7 +274,6 @@ export class AuroCounterGroup extends LitElement {
197
274
  * @private
198
275
  */
199
276
  private configureDropdownCounters;
200
- keydownHandler: (keydownEvent: any) => void;
201
277
  /**
202
278
  * This sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
203
279
  * @private
@@ -218,18 +294,82 @@ export class AuroCounterGroup extends LitElement {
218
294
  */
219
295
  private safeNumberConversion;
220
296
  /**
221
- * Updates the aggregate value based on the values of contained auro-counter components.
222
- * This method queries for all `auro-counter` elements, sums their values, and updates the component's `value` property.
223
- * Additionally, it iterates through each counter and calls `manageDisabled()` on it.
297
+ * Updates the value text in the dropdown trigger based on the counters in the counter group.
224
298
  * @private
225
299
  */
226
- private updateValue;
300
+ private updateValueText;
301
+ valueText: any;
227
302
  /**
228
303
  * Validates value.
229
304
  * @param {boolean} [force=false] - Whether to force validation.
230
305
  */
231
306
  validate(force?: boolean): void;
232
307
  updated(changedProperties: any): void;
233
- render(): import("lit-html").TemplateResult;
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;
321
+ /**
322
+ * Render the dropdown structure for the counter group.
323
+ * @returns {TemplateResult} The dropdown template.
324
+ * @private
325
+ */
326
+ private renderCounterDropdown;
327
+ /**
328
+ * Render the dropdown trigger for the dropdown.
329
+ * @returns {TemplateResult} The dropdown trigger template.
330
+ * @private
331
+ */
332
+ private renderDropdownTrigger;
333
+ /**
334
+ * Render the dropdown bib template for the dropdown.
335
+ * @returns {TemplateResult} The bib template.
336
+ * @private
337
+ */
338
+ private renderBibTemplate;
339
+ /**
340
+ * Render the fullscreen bib slots for the dropdown.
341
+ * @returns {TemplateResult} The fullscreen slots template.
342
+ * @private
343
+ */
344
+ private renderFullscreenSlots;
345
+ /**
346
+ * Render the counter group container.
347
+ * @param {boolean} isInDropdown - Whether the counter group is inside a dropdown.
348
+ * @returns {TemplateResult} The counter group template.
349
+ * @private
350
+ */
351
+ private renderCounterGroup;
352
+ /**
353
+ * Render the classic layout.
354
+ * @returns {TemplateResult} The classic layout template.
355
+ * @private
356
+ */
357
+ private renderLayoutClassic;
358
+ shape: any;
359
+ layout: any;
360
+ size: any;
361
+ /**
362
+ * Render the snowflake layout.
363
+ * @returns {TemplateResult} The snowflake layout template.
364
+ * @private
365
+ */
366
+ private renderLayoutSnowflake;
367
+ /**
368
+ * Renders the component by layout type.
369
+ * @param {string} [ForcedLayout] - Optionally force a specific layout for rendering.
370
+ * @returns {TemplateResult} The layout template.
371
+ * @private
372
+ */
373
+ private renderLayout;
234
374
  }
235
375
  import { LitElement } from "lit";
package/components/counter/dist/auro-counter.d.ts CHANGED
@@ -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
@@ -83,6 +87,12 @@ export class AuroCounter extends LitElement {
83
87
  */
84
88
  private handleKeyDown;
85
89
  firstUpdated(): void;
90
+ /**
91
+ * Sets an attribute that matches the default tag name if the tag name is not the default.
92
+ * @param {string} tagName - The tag name to set as an attribute.
93
+ * @private
94
+ */
95
+ private setTagAttribute;
86
96
  /**
87
97
  * Handles the change event for the default slot.
88
98
  * Updates the defaultSlot property with the trimmed text content of the first assigned node.
@@ -92,6 +102,12 @@ export class AuroCounter extends LitElement {
92
102
  */
93
103
  private onDefaultSlotChange;
94
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;
95
111
  render(): import("lit-html").TemplateResult;
96
112
  }
97
113
  import { LitElement } from "lit";
package/components/counter/dist/helptextVersion.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: "1.0.0";
2
+ export default _default;
package/components/counter/dist/iconVersion.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: "8.0.3";
1
+ declare const _default: "8.0.4";
2
2
  export default _default;