@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.11 → 0.0.0-pr624.111

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 (148) 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/headerVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  5. package/components/bibtemplate/dist/index.js +1244 -95
  6. package/components/bibtemplate/dist/registered.js +1244 -95
  7. package/components/checkbox/README.md +1 -1
  8. package/components/checkbox/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +54 -19
  10. package/components/checkbox/demo/api.min.js +70 -45
  11. package/components/checkbox/demo/index.html +16 -10
  12. package/components/checkbox/demo/index.md +2 -2
  13. package/components/checkbox/demo/index.min.js +70 -45
  14. package/components/checkbox/demo/readme.html +16 -9
  15. package/components/checkbox/demo/readme.md +1 -1
  16. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  17. package/components/checkbox/dist/auro-checkbox.d.ts +6 -3
  18. package/components/checkbox/dist/index.js +69 -44
  19. package/components/checkbox/dist/registered.js +69 -44
  20. package/components/combobox/README.md +2 -0
  21. package/components/combobox/demo/api.html +16 -10
  22. package/components/combobox/demo/api.md +121 -8
  23. package/components/combobox/demo/api.min.js +3283 -963
  24. package/components/combobox/demo/index.html +16 -10
  25. package/components/combobox/demo/index.md +20 -34
  26. package/components/combobox/demo/index.min.js +3283 -963
  27. package/components/combobox/demo/readme.html +16 -9
  28. package/components/combobox/demo/readme.md +2 -0
  29. package/components/combobox/dist/auro-combobox.d.ts +59 -14
  30. package/components/combobox/dist/index.js +3024 -848
  31. package/components/combobox/dist/registered.js +3024 -848
  32. package/components/counter/demo/api.html +17 -10
  33. package/components/counter/demo/api.md +167 -21
  34. package/components/counter/demo/api.min.js +3428 -777
  35. package/components/counter/demo/index.html +17 -10
  36. package/components/counter/demo/index.md +191 -34
  37. package/components/counter/demo/index.min.js +3428 -777
  38. package/components/counter/demo/readme.html +16 -9
  39. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  40. package/components/counter/dist/auro-counter-group.d.ts +162 -11
  41. package/components/counter/dist/auro-counter.d.ts +16 -0
  42. package/components/counter/dist/helptextVersion.d.ts +2 -0
  43. package/components/counter/dist/iconVersion.d.ts +1 -1
  44. package/components/counter/dist/index.js +3427 -776
  45. package/components/counter/dist/registered.js +3427 -776
  46. package/components/datepicker/README.md +2 -1
  47. package/components/datepicker/demo/api.html +16 -10
  48. package/components/datepicker/demo/api.md +70 -28
  49. package/components/datepicker/demo/api.min.js +7082 -3165
  50. package/components/datepicker/demo/index.html +16 -10
  51. package/components/datepicker/demo/index.md +87 -8
  52. package/components/datepicker/demo/index.min.js +7082 -3165
  53. package/components/datepicker/demo/readme.html +16 -9
  54. package/components/datepicker/demo/readme.md +2 -1
  55. package/components/datepicker/dist/auro-datepicker.d.ts +152 -12
  56. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  57. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  58. package/components/datepicker/dist/index.js +14635 -10718
  59. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  60. package/components/datepicker/dist/registered.js +14635 -10718
  61. package/components/dropdown/demo/api.html +16 -10
  62. package/components/dropdown/demo/api.md +89 -281
  63. package/components/dropdown/demo/api.min.js +452 -271
  64. package/components/dropdown/demo/index.html +16 -10
  65. package/components/dropdown/demo/index.md +92 -362
  66. package/components/dropdown/demo/index.min.js +452 -271
  67. package/components/dropdown/demo/readme.html +16 -9
  68. package/components/dropdown/dist/auro-dropdown.d.ts +43 -82
  69. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  70. package/components/dropdown/dist/index.js +451 -270
  71. package/components/dropdown/dist/registered.js +451 -270
  72. package/components/form/demo/api.html +16 -9
  73. package/components/form/demo/api.md +1 -1
  74. package/components/form/demo/api.min.js +3 -3
  75. package/components/form/demo/autocomplete.html +19 -3
  76. package/components/form/demo/index.html +16 -9
  77. package/components/form/demo/index.min.js +3 -3
  78. package/components/form/demo/readme.html +16 -9
  79. package/components/form/demo/working.html +19 -13
  80. package/components/form/dist/auro-form.d.ts +1 -1
  81. package/components/form/dist/index.js +2 -2
  82. package/components/form/dist/registered.js +2 -2
  83. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  84. package/components/helptext/dist/index.js +2 -4
  85. package/components/helptext/dist/registered.js +2 -4
  86. package/components/input/README.md +6 -2
  87. package/components/input/demo/api.html +16 -10
  88. package/components/input/demo/api.md +234 -136
  89. package/components/input/demo/api.min.js +1057 -299
  90. package/components/input/demo/index.html +16 -10
  91. package/components/input/demo/index.md +55 -32
  92. package/components/input/demo/index.min.js +1071 -313
  93. package/components/input/demo/readme.html +16 -9
  94. package/components/input/demo/readme.md +6 -2
  95. package/components/input/dist/auro-input.d.ts +36 -2
  96. package/components/input/dist/base-input.d.ts +47 -11
  97. package/components/input/dist/buttonVersion.d.ts +1 -1
  98. package/components/input/dist/iconVersion.d.ts +1 -1
  99. package/components/input/dist/index.js +1070 -312
  100. package/components/input/dist/registered.js +1070 -312
  101. package/components/layoutElement/dist/index.js +11 -8
  102. package/components/layoutElement/dist/registered.js +97 -0
  103. package/components/menu/demo/api.html +17 -10
  104. package/components/menu/demo/api.md +65 -8
  105. package/components/menu/demo/api.min.js +303 -64
  106. package/components/menu/demo/index.html +16 -10
  107. package/components/menu/demo/index.min.js +303 -64
  108. package/components/menu/demo/readme.html +16 -9
  109. package/components/menu/dist/auro-menu.d.ts +53 -7
  110. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  111. package/components/menu/dist/iconVersion.d.ts +1 -1
  112. package/components/menu/dist/index.js +288 -49
  113. package/components/menu/dist/registered.js +288 -49
  114. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  115. package/components/radio/demo/api.html +16 -10
  116. package/components/radio/demo/api.md +41 -9
  117. package/components/radio/demo/api.min.js +93 -95
  118. package/components/radio/demo/index.html +16 -10
  119. package/components/radio/demo/index.min.js +93 -95
  120. package/components/radio/demo/readme.html +16 -9
  121. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  122. package/components/radio/dist/auro-radio.d.ts +11 -12
  123. package/components/radio/dist/index.js +92 -94
  124. package/components/radio/dist/registered.js +92 -94
  125. package/components/select/README.md +1 -0
  126. package/components/select/demo/api.html +16 -10
  127. package/components/select/demo/api.js +0 -2
  128. package/components/select/demo/api.md +159 -125
  129. package/components/select/demo/api.min.js +2284 -729
  130. package/components/select/demo/index.html +17 -11
  131. package/components/select/demo/index.md +1074 -259
  132. package/components/select/demo/index.min.js +2286 -719
  133. package/components/select/demo/readme.html +16 -9
  134. package/components/select/demo/readme.md +1 -0
  135. package/components/select/dist/auro-select.d.ts +86 -25
  136. package/components/select/dist/index.js +2178 -755
  137. package/components/select/dist/registered.js +2178 -755
  138. package/package.json +31 -28
  139. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  140. /package/components/datepicker/dist/styles/{emphasized/style-css.d.ts → classic/color-css.d.ts} +0 -0
  141. /package/components/{input/dist/styles/default/input-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  142. /package/components/{input/dist/styles/default/label-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  143. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  144. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  145. /package/components/menu/dist/styles/{color-menuoption-css.d.ts → default/color-menu-css.d.ts} +0 -0
  146. /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
  147. /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/style-menu-css.d.ts} +0 -0
  148. /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menuoption-css.d.ts} +0 -0
@@ -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
 
@@ -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>
@@ -1,8 +1,12 @@
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
  */
@@ -62,6 +66,13 @@ export class AuroCombobox extends AuroElement {
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;
@@ -186,9 +197,10 @@ export class AuroCombobox extends AuroElement {
186
197
  };
187
198
  /**
188
199
  * Value selected for the dropdown menu.
189
- * @type {string}
190
200
  */
191
- value: string;
201
+ value: {
202
+ type: StringConstructor;
203
+ };
192
204
  /**
193
205
  * If declared, make bib.fullscreen.headline in HeadingDisplay.
194
206
  * Otherwise, Heading 600
@@ -256,8 +268,14 @@ export class AuroCombobox extends AuroElement {
256
268
  runtimeUtils: any;
257
269
  isHiddenWhileLoading: boolean;
258
270
  errorMessage: any;
259
- shape: string;
260
- size: string;
271
+ /**
272
+ * @private
273
+ */
274
+ private shape;
275
+ /**
276
+ * @private
277
+ */
278
+ private size;
261
279
  placement: string;
262
280
  offset: number;
263
281
  noFlip: boolean;
@@ -266,14 +284,34 @@ export class AuroCombobox extends AuroElement {
266
284
  bibtemplateTag: any;
267
285
  inputTag: any;
268
286
  helpTextTag: any;
287
+ /**
288
+ * Checks if the element is valid.
289
+ * @returns {boolean} - Returns true if the element is valid, false otherwise.
290
+ */
269
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;
270
309
  /**
271
310
  * Processes hidden state of all menu options and determines if there are any available options not hidden.
272
311
  * @private
273
312
  * @returns {void}
274
313
  */
275
314
  private handleMenuOptions;
276
- noMatchOption: any;
277
315
  /**
278
316
  * Determines the element error state based on the `required` attribute and input value.
279
317
  * @private
@@ -283,16 +321,14 @@ export class AuroCombobox extends AuroElement {
283
321
  options: any[] | NodeListOf<Element>;
284
322
  /**
285
323
  * Hides the dropdown bib if its open.
286
- * @private
287
324
  * @returns {void}
288
325
  */
289
- private hideBib;
326
+ hideBib(): void;
290
327
  /**
291
328
  * Shows the dropdown bib if there are options to show.
292
- * @private
293
329
  * @returns {void}
294
330
  */
295
- private showBib;
331
+ showBib(): void;
296
332
  /**
297
333
  * Binds all behavior needed to the dropdown after rendering.
298
334
  * @private
@@ -300,13 +336,16 @@ export class AuroCombobox extends AuroElement {
300
336
  */
301
337
  private configureDropdown;
302
338
  bibtemplate: any;
339
+ inputInBib: any;
303
340
  /**
304
- * When the dropdown is visible in fullscreen mode, the input is moved to the subheader slot of bibtemplate.
305
- * Otherwise, it's moved back to the trigger slot.
306
341
  * @private
307
- * @returns {void}
308
342
  */
309
- private transportInput;
343
+ private setInputFocus;
344
+ /**
345
+ * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
346
+ * @private
347
+ */
348
+ private updateMenuShapeSize;
310
349
  /**
311
350
  * Binds all behavior needed to the menu after rendering.
312
351
  * @private
@@ -338,6 +377,7 @@ export class AuroCombobox extends AuroElement {
338
377
  /**
339
378
  * Handle changes to the input value and trigger changes that should result.
340
379
  * @private
380
+ * @param {Event} event - The input event triggered by the input element.
341
381
  * @returns {void}
342
382
  */
343
383
  private handleInputValueChange;
@@ -361,12 +401,17 @@ export class AuroCombobox extends AuroElement {
361
401
  * @returns {void}
362
402
  */
363
403
  reset(): void;
404
+ /**
405
+ * Clears the current value of the combobox.
406
+ * @returns {void}
407
+ */
408
+ clear(): void;
364
409
  /**
365
410
  * Validates value.
366
411
  * @param {boolean} [force=false] - Whether to force validation.
367
412
  */
368
413
  validate(force?: boolean): void;
369
- updated(changedProperties: any): void;
414
+ updated(changedProperties: any): Promise<void>;
370
415
  /**
371
416
  * Applies slotted nodes to a target element with a new slot name.
372
417
  * @private