@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.8 → 0.0.0-pr624.80

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 (143) 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 +49 -15
  9. package/components/checkbox/demo/api.min.js +73 -43
  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 +73 -43
  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 +72 -42
  18. package/components/checkbox/dist/registered.js +72 -42
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +115 -8
  21. package/components/combobox/demo/api.min.js +3102 -921
  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 +3102 -921
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/dist/auro-combobox.d.ts +44 -12
  27. package/components/combobox/dist/index.js +3080 -995
  28. package/components/combobox/dist/registered.js +3080 -995
  29. package/components/counter/demo/api.html +17 -10
  30. package/components/counter/demo/api.md +158 -21
  31. package/components/counter/demo/api.min.js +3416 -728
  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 +3416 -728
  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 +161 -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 +3416 -728
  42. package/components/counter/dist/registered.js +3416 -728
  43. package/components/datepicker/README.md +1 -1
  44. package/components/datepicker/demo/api.html +16 -10
  45. package/components/datepicker/demo/api.md +59 -28
  46. package/components/datepicker/demo/api.min.js +8486 -4644
  47. package/components/datepicker/demo/index.html +16 -10
  48. package/components/datepicker/demo/index.md +75 -8
  49. package/components/datepicker/demo/index.min.js +8486 -4644
  50. package/components/datepicker/demo/readme.html +16 -9
  51. package/components/datepicker/demo/readme.md +1 -1
  52. package/components/datepicker/dist/auro-datepicker.d.ts +151 -12
  53. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  54. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  55. package/components/datepicker/dist/index.js +7033 -3191
  56. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  57. package/components/datepicker/dist/registered.js +7033 -3191
  58. package/components/dropdown/demo/api.html +16 -10
  59. package/components/dropdown/demo/api.md +82 -275
  60. package/components/dropdown/demo/api.min.js +451 -260
  61. package/components/dropdown/demo/index.html +16 -10
  62. package/components/dropdown/demo/index.md +92 -362
  63. package/components/dropdown/demo/index.min.js +451 -260
  64. package/components/dropdown/demo/readme.html +16 -9
  65. package/components/dropdown/dist/auro-dropdown.d.ts +43 -83
  66. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  67. package/components/dropdown/dist/index.js +450 -259
  68. package/components/dropdown/dist/registered.js +450 -259
  69. package/components/form/demo/api.html +16 -9
  70. package/components/form/demo/api.min.js +2 -2
  71. package/components/form/demo/autocomplete.html +19 -3
  72. package/components/form/demo/index.html +16 -9
  73. package/components/form/demo/index.min.js +2 -2
  74. package/components/form/demo/readme.html +16 -9
  75. package/components/form/demo/working.html +19 -13
  76. package/components/form/dist/index.js +1 -1
  77. package/components/form/dist/registered.js +1 -1
  78. package/components/helptext/dist/index.js +2 -2
  79. package/components/helptext/dist/registered.js +2 -2
  80. package/components/input/README.md +5 -2
  81. package/components/input/demo/api.html +16 -10
  82. package/components/input/demo/api.md +228 -130
  83. package/components/input/demo/api.min.js +909 -247
  84. package/components/input/demo/index.html +16 -10
  85. package/components/input/demo/index.md +48 -32
  86. package/components/input/demo/index.min.js +909 -247
  87. package/components/input/demo/readme.html +16 -9
  88. package/components/input/demo/readme.md +5 -2
  89. package/components/input/dist/auro-input.d.ts +3 -3
  90. package/components/input/dist/base-input.d.ts +38 -10
  91. package/components/input/dist/buttonVersion.d.ts +1 -1
  92. package/components/input/dist/iconVersion.d.ts +1 -1
  93. package/components/input/dist/index.js +908 -246
  94. package/components/input/dist/registered.js +908 -246
  95. package/components/layoutElement/dist/index.js +13 -10
  96. package/components/menu/demo/api.html +32 -10
  97. package/components/menu/demo/api.md +69 -8
  98. package/components/menu/demo/api.min.js +239 -48
  99. package/components/menu/demo/index.html +16 -10
  100. package/components/menu/demo/index.min.js +239 -48
  101. package/components/menu/demo/readme.html +16 -9
  102. package/components/menu/dist/auro-menu.d.ts +41 -7
  103. package/components/menu/dist/auro-menuoption.d.ts +15 -3
  104. package/components/menu/dist/iconVersion.d.ts +1 -1
  105. package/components/menu/dist/index.js +238 -47
  106. package/components/menu/dist/registered.js +238 -47
  107. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  108. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  109. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  110. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  111. package/components/radio/demo/api.html +16 -10
  112. package/components/radio/demo/api.md +39 -9
  113. package/components/radio/demo/api.min.js +91 -93
  114. package/components/radio/demo/index.html +16 -10
  115. package/components/radio/demo/index.min.js +91 -93
  116. package/components/radio/demo/readme.html +16 -9
  117. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  118. package/components/radio/dist/auro-radio.d.ts +9 -12
  119. package/components/radio/dist/index.js +90 -92
  120. package/components/radio/dist/registered.js +90 -92
  121. package/components/select/demo/api.html +16 -10
  122. package/components/select/demo/api.js +0 -2
  123. package/components/select/demo/api.md +150 -121
  124. package/components/select/demo/api.min.js +2184 -704
  125. package/components/select/demo/index.html +17 -11
  126. package/components/select/demo/index.md +1066 -259
  127. package/components/select/demo/index.min.js +2186 -694
  128. package/components/select/demo/readme.html +16 -9
  129. package/components/select/dist/auro-select.d.ts +59 -21
  130. package/components/select/dist/index.js +2107 -711
  131. package/components/select/dist/registered.js +2107 -711
  132. package/package.json +31 -28
  133. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  134. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/classic}/color-css.d.ts +0 -0
  135. /package/components/datepicker/dist/styles/{emphasized → classic}/style-css.d.ts +0 -0
  136. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  137. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  138. /package/components/dropdown/dist/styles/{default/bibStyles-css.d.ts → classic/bibColors-css.d.ts} +0 -0
  139. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  140. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  141. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  142. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  143. /package/components/menu/dist/styles/{tokens-css.d.ts → default/color-menu-css.d.ts} +0 -0
package/components/select/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-select 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-select</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-select'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/select/dist/auro-select.d.ts CHANGED
@@ -4,9 +4,10 @@
4
4
  * @slot - Default slot for the menu content.
5
5
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
6
6
  * @slot label - Defines the content of the label.
7
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
7
8
  * @slot helpText - Defines the content of the helpText.
8
- * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
9
9
  * @slot valueText - Dropdown value text display.
10
+ * @slot displayValue - Allows custom HTML content to display the selected value when select is not focused.
10
11
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
11
12
  * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
12
13
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
@@ -64,13 +65,6 @@ export class AuroSelect extends AuroElement {
64
65
  type: StringConstructor;
65
66
  reflect: boolean;
66
67
  };
67
- /**
68
- * If set, makes dropdown width match the size of the content, rather than the width of the trigger.
69
- */
70
- flexMenuWidth: {
71
- type: BooleanConstructor;
72
- reflect: boolean;
73
- };
74
68
  /**
75
69
  * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
76
70
  * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
@@ -152,13 +146,20 @@ export class AuroSelect extends AuroElement {
152
146
  * "top" | "right" | "bottom" | "left" |
153
147
  * "bottom-start" | "top-start" | "top-end" |
154
148
  * "right-start" | "right-end" | "bottom-end" |
155
- * "left-start" | "left-end"
149
+ * "left-start" | "left-end".
156
150
  * @default bottom-start
157
151
  */
158
152
  placement: {
159
153
  type: StringConstructor;
160
154
  reflect: boolean;
161
155
  };
156
+ /**
157
+ * Define custom placeholder text.
158
+ */
159
+ placeholder: {
160
+ type: StringConstructor;
161
+ reflect: boolean;
162
+ };
162
163
  /**
163
164
  * Populates the `required` attribute on the element. Used for client-side validation.
164
165
  */
@@ -199,10 +200,13 @@ export class AuroSelect extends AuroElement {
199
200
  reflect: boolean;
200
201
  };
201
202
  /**
202
- * Value selected for the component. Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
203
- * @type {String|Array<String>}
203
+ * Value selected for the component.
204
204
  */
205
- value: string | Array<string>;
205
+ value: {
206
+ type: StringConstructor;
207
+ reflect: boolean;
208
+ attribute: string;
209
+ };
206
210
  /**
207
211
  * Sets multi-select mode, allowing multiple options to be selected at once.
208
212
  */
@@ -301,10 +305,23 @@ export class AuroSelect extends AuroElement {
301
305
  fullscreenBreakpoint: string;
302
306
  onDark: boolean;
303
307
  isPopoverVisible: any;
308
+ /**
309
+ * Formatted value based on `multiSelect` state.
310
+ * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
311
+ * @private
312
+ * @returns {String|Array<String>}
313
+ */
314
+ private get formattedValue();
315
+ /**
316
+ * Returns classmap configuration for html5 input labels in all layouts.
317
+ * @private
318
+ * @returns {void}
319
+ */
320
+ private get commonLabelClasses();
304
321
  /**
305
322
  * Returns classmap configuration for wrapper elements in each layout.
306
323
  * @private
307
- * @return {object} - Returns classmap.
324
+ * @returns {object} - Returns classmap.
308
325
  */
309
326
  private get commonWrapperClasses();
310
327
  /**
@@ -358,6 +375,16 @@ export class AuroSelect extends AuroElement {
358
375
  * @returns {void}
359
376
  */
360
377
  private handleMenuLoadingChange;
378
+ /**
379
+ * Hides the dropdown bib if its open.
380
+ * @returns {void}
381
+ */
382
+ hideBib(): void;
383
+ /**
384
+ * Shows the dropdown bib if there are options to show.
385
+ * @returns {void}
386
+ */
387
+ showBib(): void;
361
388
  /**
362
389
  * Function to support @focusin event.
363
390
  * @private
@@ -384,17 +411,19 @@ export class AuroSelect extends AuroElement {
384
411
  */
385
412
  private clearSelection;
386
413
  firstUpdated(): void;
414
+ /**
415
+ * Update the menu value. With checks for menu existence. Awaits value update.
416
+ * @param {string} value - The value to set in the menu.
417
+ * @returns {void}
418
+ * @private
419
+ */
420
+ private updateMenuValue;
387
421
  updated(changedProperties: any): Promise<void>;
388
422
  /**
389
423
  * Resets component to initial state.
390
424
  * @returns {void}
391
425
  */
392
426
  reset(): void;
393
- /**
394
- * Hide dropdownbib.
395
- * @private
396
- */
397
- private hideBib;
398
427
  /**
399
428
  * Validates value.
400
429
  * @param {boolean} [force=false] - Whether to force validation.
@@ -413,8 +442,18 @@ export class AuroSelect extends AuroElement {
413
442
  * @private
414
443
  */
415
444
  private _updateNativeSelect;
416
- renderAriaHtml(): import("lit-html").TemplateResult;
417
- renderNativeSelect(): import("lit-html").TemplateResult;
445
+ /**
446
+ * Returns HTML for the hidden a11y screen reader content.
447
+ * @private
448
+ * @returns {html} - Returns HTML for the hidden a11y screen reader content.
449
+ */
450
+ private renderAriaHtml;
451
+ /**
452
+ * Returns HTML for the hidden HTML5 select.
453
+ * @private
454
+ * @returns {html} - Returns HTML for the hidden HTML5 select.
455
+ */
456
+ private renderNativeSelect;
418
457
  /**
419
458
  * Returns HTML for the help text and error message.
420
459
  * @private
@@ -446,6 +485,5 @@ export class AuroSelect extends AuroElement {
446
485
  * @returns {void}
447
486
  */
448
487
  private renderLayout;
449
- renderBACKUP(): import("lit-html").TemplateResult;
450
488
  }
451
489
  import { AuroElement } from '../../layoutElement/src/auroElement.js';