@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.9 → 0.0.0-pr624.90

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 (149) 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 +1241 -94
  6. package/components/bibtemplate/dist/registered.js +1241 -94
  7. package/components/checkbox/README.md +1 -1
  8. package/components/checkbox/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +49 -15
  10. package/components/checkbox/demo/api.min.js +74 -46
  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 +74 -46
  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 +3 -3
  18. package/components/checkbox/dist/index.js +73 -45
  19. package/components/checkbox/dist/registered.js +73 -45
  20. package/components/combobox/demo/api.html +16 -10
  21. package/components/combobox/demo/api.md +115 -8
  22. package/components/combobox/demo/api.min.js +3305 -1002
  23. package/components/combobox/demo/index.html +16 -10
  24. package/components/combobox/demo/index.md +8 -34
  25. package/components/combobox/demo/index.min.js +3305 -1002
  26. package/components/combobox/demo/readme.html +16 -9
  27. package/components/combobox/dist/auro-combobox.d.ts +57 -14
  28. package/components/combobox/dist/index.js +2992 -836
  29. package/components/combobox/dist/registered.js +2992 -836
  30. package/components/counter/demo/api.html +17 -10
  31. package/components/counter/demo/api.md +158 -21
  32. package/components/counter/demo/api.min.js +3417 -765
  33. package/components/counter/demo/index.html +17 -10
  34. package/components/counter/demo/index.md +185 -34
  35. package/components/counter/demo/index.min.js +3417 -765
  36. package/components/counter/demo/readme.html +16 -9
  37. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  38. package/components/counter/dist/auro-counter-group.d.ts +161 -11
  39. package/components/counter/dist/auro-counter.d.ts +16 -0
  40. package/components/counter/dist/helptextVersion.d.ts +2 -0
  41. package/components/counter/dist/iconVersion.d.ts +1 -1
  42. package/components/counter/dist/index.js +3420 -768
  43. package/components/counter/dist/registered.js +3420 -768
  44. package/components/datepicker/README.md +1 -1
  45. package/components/datepicker/demo/api.html +16 -10
  46. package/components/datepicker/demo/api.md +59 -28
  47. package/components/datepicker/demo/api.min.js +11956 -8070
  48. package/components/datepicker/demo/index.html +16 -10
  49. package/components/datepicker/demo/index.md +75 -8
  50. package/components/datepicker/demo/index.min.js +11956 -8070
  51. package/components/datepicker/demo/readme.html +16 -9
  52. package/components/datepicker/demo/readme.md +1 -1
  53. package/components/datepicker/dist/auro-datepicker.d.ts +151 -12
  54. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  55. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  56. package/components/datepicker/dist/index.js +13802 -9916
  57. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  58. package/components/datepicker/dist/registered.js +13802 -9916
  59. package/components/dropdown/demo/api.html +16 -10
  60. package/components/dropdown/demo/api.md +82 -275
  61. package/components/dropdown/demo/api.min.js +450 -261
  62. package/components/dropdown/demo/index.html +16 -10
  63. package/components/dropdown/demo/index.md +92 -362
  64. package/components/dropdown/demo/index.min.js +450 -261
  65. package/components/dropdown/demo/readme.html +16 -9
  66. package/components/dropdown/dist/auro-dropdown.d.ts +43 -83
  67. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  68. package/components/dropdown/dist/index.js +449 -260
  69. package/components/dropdown/dist/registered.js +449 -260
  70. package/components/form/demo/api.html +16 -9
  71. package/components/form/demo/api.md +1 -1
  72. package/components/form/demo/api.min.js +3 -3
  73. package/components/form/demo/autocomplete.html +19 -3
  74. package/components/form/demo/index.html +16 -9
  75. package/components/form/demo/index.min.js +3 -3
  76. package/components/form/demo/readme.html +16 -9
  77. package/components/form/demo/working.html +19 -13
  78. package/components/form/dist/auro-form.d.ts +1 -1
  79. package/components/form/dist/index.js +2 -2
  80. package/components/form/dist/registered.js +2 -2
  81. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  82. package/components/helptext/dist/index.js +3 -5
  83. package/components/helptext/dist/registered.js +3 -5
  84. package/components/input/README.md +5 -2
  85. package/components/input/demo/api.html +16 -10
  86. package/components/input/demo/api.md +226 -132
  87. package/components/input/demo/api.min.js +1034 -297
  88. package/components/input/demo/index.html +16 -10
  89. package/components/input/demo/index.md +48 -32
  90. package/components/input/demo/index.min.js +1048 -311
  91. package/components/input/demo/readme.html +16 -9
  92. package/components/input/demo/readme.md +5 -2
  93. package/components/input/dist/auro-input.d.ts +24 -0
  94. package/components/input/dist/base-input.d.ts +45 -11
  95. package/components/input/dist/buttonVersion.d.ts +1 -1
  96. package/components/input/dist/iconVersion.d.ts +1 -1
  97. package/components/input/dist/index.js +1047 -310
  98. package/components/input/dist/registered.js +1047 -310
  99. package/components/layoutElement/dist/index.js +11 -8
  100. package/components/layoutElement/dist/registered.js +97 -0
  101. package/components/menu/demo/api.html +17 -10
  102. package/components/menu/demo/api.md +65 -8
  103. package/components/menu/demo/api.min.js +305 -63
  104. package/components/menu/demo/index.html +16 -10
  105. package/components/menu/demo/index.min.js +305 -63
  106. package/components/menu/demo/readme.html +16 -9
  107. package/components/menu/dist/auro-menu.d.ts +53 -7
  108. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  109. package/components/menu/dist/iconVersion.d.ts +1 -1
  110. package/components/menu/dist/index.js +290 -48
  111. package/components/menu/dist/registered.js +290 -48
  112. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  113. package/components/menu/dist/styles/shapeSize-css.d.ts +2 -0
  114. package/components/radio/demo/api.html +16 -10
  115. package/components/radio/demo/api.md +39 -9
  116. package/components/radio/demo/api.min.js +92 -96
  117. package/components/radio/demo/index.html +16 -10
  118. package/components/radio/demo/index.min.js +92 -96
  119. package/components/radio/demo/readme.html +16 -9
  120. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  121. package/components/radio/dist/auro-radio.d.ts +9 -12
  122. package/components/radio/dist/index.js +91 -95
  123. package/components/radio/dist/registered.js +91 -95
  124. package/components/select/demo/api.html +16 -10
  125. package/components/select/demo/api.js +0 -2
  126. package/components/select/demo/api.md +149 -122
  127. package/components/select/demo/api.min.js +2283 -736
  128. package/components/select/demo/index.html +17 -11
  129. package/components/select/demo/index.md +1066 -259
  130. package/components/select/demo/index.min.js +2284 -725
  131. package/components/select/demo/readme.html +16 -9
  132. package/components/select/dist/auro-select.d.ts +74 -25
  133. package/components/select/dist/index.js +2165 -753
  134. package/components/select/dist/registered.js +2165 -753
  135. package/package.json +31 -28
  136. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  137. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/classic}/color-css.d.ts +0 -0
  138. /package/components/datepicker/dist/styles/{emphasized → classic}/style-css.d.ts +0 -0
  139. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  140. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  141. /package/components/dropdown/dist/styles/{default/bibStyles-css.d.ts → classic/bibColors-css.d.ts} +0 -0
  142. /package/components/{input/dist/styles/default/input-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  143. /package/components/{input/dist/styles/default/label-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  144. /package/components/{input/dist/styles/input-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  145. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  146. /package/components/menu/dist/styles/{color-menuoption-css.d.ts → default/color-menu-css.d.ts} +0 -0
  147. /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
  148. /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/style-menu-css.d.ts} +0 -0
  149. /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menuoption-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
  */
@@ -246,8 +250,6 @@ export class AuroSelect extends AuroElement {
246
250
  */
247
251
  static register(name?: string): void;
248
252
  matchWidth: boolean;
249
- shape: string;
250
- size: string;
251
253
  placement: string;
252
254
  offset: number;
253
255
  noFlip: boolean;
@@ -301,12 +303,33 @@ export class AuroSelect extends AuroElement {
301
303
  fullscreenBreakpoint: string;
302
304
  onDark: boolean;
303
305
  isPopoverVisible: any;
306
+ shape: string;
307
+ size: string;
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
- * Returns classmap configuration for wrapper elements in each layout.
322
+ * Returns the label font class based on layout and selection state.
306
323
  * @private
307
- * @return {object} - Returns classmap.
324
+ * @returns {string} - The font class for the label.
308
325
  */
309
- private get commonWrapperClasses();
326
+ private get labelFontClass();
327
+ /**
328
+ * Whether or not the component has a value.
329
+ * @returns {boolean} - Returns true if the component has a value or placeholder.
330
+ * @private
331
+ */
332
+ private get hasValue();
310
333
  /**
311
334
  * Binds all behavior needed to the dropdown after rendering.
312
335
  * @private
@@ -321,6 +344,11 @@ export class AuroSelect extends AuroElement {
321
344
  * @returns {void}
322
345
  */
323
346
  private updateDisplayedValue;
347
+ /**
348
+ * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
349
+ * @private
350
+ */
351
+ private updateMenuShapeSize;
324
352
  /**
325
353
  * Binds all behavior needed to the menu after rendering.
326
354
  * @private
@@ -358,6 +386,16 @@ export class AuroSelect extends AuroElement {
358
386
  * @returns {void}
359
387
  */
360
388
  private handleMenuLoadingChange;
389
+ /**
390
+ * Hides the dropdown bib if its open.
391
+ * @returns {void}
392
+ */
393
+ hideBib(): void;
394
+ /**
395
+ * Shows the dropdown bib if there are options to show.
396
+ * @returns {void}
397
+ */
398
+ showBib(): void;
361
399
  /**
362
400
  * Function to support @focusin event.
363
401
  * @private
@@ -384,17 +422,19 @@ export class AuroSelect extends AuroElement {
384
422
  */
385
423
  private clearSelection;
386
424
  firstUpdated(): void;
425
+ /**
426
+ * Update the menu value. With checks for menu existence. Awaits value update.
427
+ * @param {string} value - The value to set in the menu.
428
+ * @returns {void}
429
+ * @private
430
+ */
431
+ private updateMenuValue;
387
432
  updated(changedProperties: any): Promise<void>;
388
433
  /**
389
434
  * Resets component to initial state.
390
435
  * @returns {void}
391
436
  */
392
437
  reset(): void;
393
- /**
394
- * Hide dropdownbib.
395
- * @private
396
- */
397
- private hideBib;
398
438
  /**
399
439
  * Validates value.
400
440
  * @param {boolean} [force=false] - Whether to force validation.
@@ -413,8 +453,18 @@ export class AuroSelect extends AuroElement {
413
453
  * @private
414
454
  */
415
455
  private _updateNativeSelect;
416
- renderAriaHtml(): import("lit-html").TemplateResult;
417
- renderNativeSelect(): import("lit-html").TemplateResult;
456
+ /**
457
+ * Returns HTML for the hidden a11y screen reader content.
458
+ * @private
459
+ * @returns {html} - Returns HTML for the hidden a11y screen reader content.
460
+ */
461
+ private renderAriaHtml;
462
+ /**
463
+ * Returns HTML for the hidden HTML5 select.
464
+ * @private
465
+ * @returns {html} - Returns HTML for the hidden HTML5 select.
466
+ */
467
+ private renderNativeSelect;
418
468
  /**
419
469
  * Returns HTML for the help text and error message.
420
470
  * @private
@@ -446,6 +496,5 @@ export class AuroSelect extends AuroElement {
446
496
  * @returns {void}
447
497
  */
448
498
  private renderLayout;
449
- renderBACKUP(): import("lit-html").TemplateResult;
450
499
  }
451
500
  import { AuroElement } from '../../layoutElement/src/auroElement.js';