@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.6 → 0.0.0-pr624.61

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 +1214 -83
  5. package/components/bibtemplate/dist/registered.js +1214 -83
  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 +3052 -926
  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 +3052 -926
  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 +2773 -743
  28. package/components/combobox/dist/registered.js +2773 -743
  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 +6728 -4118
  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 +6728 -4118
  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 +6728 -4118
  42. package/components/counter/dist/registered.js +6728 -4118
  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 +11540 -7985
  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 +11540 -7985
  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 +11603 -8048
  54. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  55. package/components/datepicker/dist/registered.js +11603 -8048
  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 +853 -241
  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 +853 -241
  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 +853 -241
  92. package/components/input/dist/registered.js +853 -241
  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 +2123 -644
  121. package/components/select/demo/index.html +16 -11
  122. package/components/select/demo/index.md +45 -158
  123. package/components/select/demo/index.min.js +2123 -632
  124. package/components/select/demo/readme.html +16 -9
  125. package/components/select/dist/auro-select.d.ts +57 -16
  126. package/components/select/dist/index.js +2047 -652
  127. package/components/select/dist/registered.js +2047 -652
  128. package/package.json +29 -26
  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/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.
@@ -43,6 +44,13 @@ export class AuroSelect extends AuroElement {
43
44
  type: BooleanConstructor;
44
45
  reflect: boolean;
45
46
  };
47
+ /**
48
+ * @private
49
+ */
50
+ isPopoverVisible: {
51
+ type: BooleanConstructor;
52
+ reflect: boolean;
53
+ };
46
54
  /**
47
55
  * If declared, the popover and trigger will be set to the same width.
48
56
  */
@@ -57,13 +65,6 @@ export class AuroSelect extends AuroElement {
57
65
  type: StringConstructor;
58
66
  reflect: boolean;
59
67
  };
60
- /**
61
- * If set, makes dropdown width match the size of the content, rather than the width of the trigger.
62
- */
63
- flexMenuWidth: {
64
- type: BooleanConstructor;
65
- reflect: boolean;
66
- };
67
68
  /**
68
69
  * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
69
70
  * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
@@ -145,13 +146,20 @@ export class AuroSelect extends AuroElement {
145
146
  * "top" | "right" | "bottom" | "left" |
146
147
  * "bottom-start" | "top-start" | "top-end" |
147
148
  * "right-start" | "right-end" | "bottom-end" |
148
- * "left-start" | "left-end"
149
+ * "left-start" | "left-end".
149
150
  * @default bottom-start
150
151
  */
151
152
  placement: {
152
153
  type: StringConstructor;
153
154
  reflect: boolean;
154
155
  };
156
+ /**
157
+ * Define custom placeholder text.
158
+ */
159
+ placeholder: {
160
+ type: StringConstructor;
161
+ reflect: boolean;
162
+ };
155
163
  /**
156
164
  * Populates the `required` attribute on the element. Used for client-side validation.
157
165
  */
@@ -192,10 +200,13 @@ export class AuroSelect extends AuroElement {
192
200
  reflect: boolean;
193
201
  };
194
202
  /**
195
- * Value selected for the component. Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
196
- * @type {String|Array<String>}
203
+ * Value selected for the component.
197
204
  */
198
- value: string | Array<string>;
205
+ value: {
206
+ type: StringConstructor;
207
+ reflect: boolean;
208
+ attribute: string;
209
+ };
199
210
  /**
200
211
  * Sets multi-select mode, allowing multiple options to be selected at once.
201
212
  */
@@ -293,10 +304,24 @@ export class AuroSelect extends AuroElement {
293
304
  value: any;
294
305
  fullscreenBreakpoint: string;
295
306
  onDark: boolean;
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();
296
321
  /**
297
322
  * Returns classmap configuration for wrapper elements in each layout.
298
323
  * @private
299
- * @return {object} - Returns classmap.
324
+ * @returns {object} - Returns classmap.
300
325
  */
301
326
  private get commonWrapperClasses();
302
327
  /**
@@ -376,6 +401,13 @@ export class AuroSelect extends AuroElement {
376
401
  */
377
402
  private clearSelection;
378
403
  firstUpdated(): void;
404
+ /**
405
+ * Update the menu value. With checks for menu existence. Awaits value update.
406
+ * @param {string} value - The value to set in the menu.
407
+ * @returns {void}
408
+ * @private
409
+ */
410
+ private updateMenuValue;
379
411
  updated(changedProperties: any): Promise<void>;
380
412
  /**
381
413
  * Resets component to initial state.
@@ -405,8 +437,18 @@ export class AuroSelect extends AuroElement {
405
437
  * @private
406
438
  */
407
439
  private _updateNativeSelect;
408
- renderAriaHtml(): import("lit-html").TemplateResult;
409
- renderNativeSelect(): import("lit-html").TemplateResult;
440
+ /**
441
+ * Returns HTML for the hidden a11y screen reader content.
442
+ * @private
443
+ * @returns {html} - Returns HTML for the hidden a11y screen reader content.
444
+ */
445
+ private renderAriaHtml;
446
+ /**
447
+ * Returns HTML for the hidden HTML5 select.
448
+ * @private
449
+ * @returns {html} - Returns HTML for the hidden HTML5 select.
450
+ */
451
+ private renderNativeSelect;
410
452
  /**
411
453
  * Returns HTML for the help text and error message.
412
454
  * @private
@@ -438,6 +480,5 @@ export class AuroSelect extends AuroElement {
438
480
  * @returns {void}
439
481
  */
440
482
  private renderLayout;
441
- renderBACKUP(): import("lit-html").TemplateResult;
442
483
  }
443
484
  import { AuroElement } from '../../layoutElement/src/auroElement.js';