@aurodesignsystem-dev/auro-formkit 0.0.0-pr741.0 → 0.0.0-pr750.1

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 (92) hide show
  1. package/components/bibtemplate/dist/index.js +1 -1
  2. package/components/bibtemplate/dist/registered.js +1 -1
  3. package/components/checkbox/demo/api.html +16 -10
  4. package/components/checkbox/demo/api.min.js +11 -11
  5. package/components/checkbox/demo/index.html +16 -10
  6. package/components/checkbox/demo/index.min.js +11 -11
  7. package/components/checkbox/demo/readme.html +16 -9
  8. package/components/checkbox/dist/index.js +11 -11
  9. package/components/checkbox/dist/registered.js +11 -11
  10. package/components/combobox/demo/api.html +16 -10
  11. package/components/combobox/demo/api.md +12 -6
  12. package/components/combobox/demo/api.min.js +411 -103
  13. package/components/combobox/demo/index.html +16 -10
  14. package/components/combobox/demo/index.min.js +411 -103
  15. package/components/combobox/demo/readme.html +16 -9
  16. package/components/combobox/dist/index.js +374 -91
  17. package/components/combobox/dist/registered.js +374 -91
  18. package/components/counter/demo/api.html +16 -10
  19. package/components/counter/demo/api.md +140 -7
  20. package/components/counter/demo/api.min.js +1145 -987
  21. package/components/counter/demo/index.html +16 -10
  22. package/components/counter/demo/index.md +82 -0
  23. package/components/counter/demo/index.min.js +1145 -987
  24. package/components/counter/demo/readme.html +16 -9
  25. package/components/counter/dist/auro-counter-group.d.ts +64 -23
  26. package/components/counter/dist/auro-counter.d.ts +10 -0
  27. package/components/counter/dist/index.js +1145 -987
  28. package/components/counter/dist/registered.js +1145 -987
  29. package/components/datepicker/demo/api.html +16 -10
  30. package/components/datepicker/demo/api.min.js +374 -91
  31. package/components/datepicker/demo/index.html +16 -10
  32. package/components/datepicker/demo/index.min.js +374 -91
  33. package/components/datepicker/demo/readme.html +16 -9
  34. package/components/datepicker/dist/auro-datepicker.d.ts +6 -0
  35. package/components/datepicker/dist/index.js +374 -91
  36. package/components/datepicker/dist/registered.js +374 -91
  37. package/components/dropdown/demo/api.html +16 -10
  38. package/components/dropdown/demo/api.md +77 -267
  39. package/components/dropdown/demo/api.min.js +331 -64
  40. package/components/dropdown/demo/index.html +16 -10
  41. package/components/dropdown/demo/index.md +45 -363
  42. package/components/dropdown/demo/index.min.js +331 -64
  43. package/components/dropdown/demo/readme.html +16 -9
  44. package/components/dropdown/dist/auro-dropdown.d.ts +35 -67
  45. package/components/dropdown/dist/index.js +331 -64
  46. package/components/dropdown/dist/registered.js +331 -64
  47. package/components/form/demo/api.html +16 -9
  48. package/components/form/demo/autocomplete.html +19 -3
  49. package/components/form/demo/index.html +16 -9
  50. package/components/form/demo/readme.html +16 -9
  51. package/components/form/demo/working.html +19 -13
  52. package/components/helptext/dist/index.js +1 -1
  53. package/components/helptext/dist/registered.js +1 -1
  54. package/components/input/demo/api.html +16 -10
  55. package/components/input/demo/api.md +1 -1
  56. package/components/input/demo/api.min.js +14 -14
  57. package/components/input/demo/index.html +16 -10
  58. package/components/input/demo/index.min.js +14 -14
  59. package/components/input/demo/readme.html +16 -9
  60. package/components/input/dist/base-input.d.ts +1 -1
  61. package/components/input/dist/index.js +14 -14
  62. package/components/input/dist/registered.js +14 -14
  63. package/components/menu/demo/api.html +16 -32
  64. package/components/menu/demo/api.md +1 -1
  65. package/components/menu/demo/api.min.js +37 -12
  66. package/components/menu/demo/index.html +16 -10
  67. package/components/menu/demo/index.min.js +37 -12
  68. package/components/menu/demo/readme.html +16 -9
  69. package/components/menu/dist/auro-menu.d.ts +13 -2
  70. package/components/menu/dist/index.js +37 -12
  71. package/components/menu/dist/registered.js +37 -12
  72. package/components/radio/demo/api.html +16 -10
  73. package/components/radio/demo/api.md +0 -1
  74. package/components/radio/demo/api.min.js +61 -76
  75. package/components/radio/demo/index.html +16 -10
  76. package/components/radio/demo/index.min.js +61 -76
  77. package/components/radio/demo/readme.html +16 -9
  78. package/components/radio/dist/auro-radio.d.ts +8 -11
  79. package/components/radio/dist/index.js +61 -76
  80. package/components/radio/dist/registered.js +61 -76
  81. package/components/select/demo/api.html +16 -10
  82. package/components/select/demo/api.js +0 -2
  83. package/components/select/demo/api.md +53 -51
  84. package/components/select/demo/api.min.js +491 -326
  85. package/components/select/demo/index.html +16 -11
  86. package/components/select/demo/index.md +6 -158
  87. package/components/select/demo/index.min.js +491 -314
  88. package/components/select/demo/readme.html +16 -9
  89. package/components/select/dist/auro-select.d.ts +33 -8
  90. package/components/select/dist/index.js +454 -302
  91. package/components/select/dist/registered.js +454 -302
  92. package/package.json +26 -25
package/components/select/demo/api.html CHANGED
@@ -16,18 +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
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
- </head>
36
+ </head>
31
37
  <body class="auro-markdown">
32
38
  <main></main>
33
39
 
package/components/select/demo/api.js CHANGED
@@ -5,7 +5,6 @@ import { valueAlertExample } from "../apiExamples/valueAlert.js";
5
5
  import { inDialogExample } from '../apiExamples/inDialog';
6
6
  import { resetStateExample } from "../apiExamples/resetState";
7
7
  import { auroMenuLoadingExample } from "../apiExamples/loading";
8
- import { valueTextExample } from '../apiExamples/valueText.js';
9
8
 
10
9
  /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
11
10
  import { AuroSelect } from '../src/auro-select.js';
@@ -25,7 +24,6 @@ export function initExamples(initCount) {
25
24
  inDialogExample();
26
25
  resetStateExample();
27
26
  auroMenuLoadingExample();
28
- valueTextExample();
29
27
  } catch (err) {
30
28
  if (initCount <= 20) {
31
29
  // setTimeout handles issue where content is sometimes loaded after the functions get called
package/components/select/demo/api.md CHANGED
@@ -33,6 +33,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
33
33
  | [offset](#offset) | `offset` | `number` | "0" | Gap between the trigger element and bib. |
34
34
  | [onDark](#onDark) | `onDark` | `boolean` | | If declared, onDark styles will be applied to the trigger. |
35
35
  | [optionSelected](#optionSelected) | `optionSelected` | `HTMLElement\|Array<HTMLElement>` | | Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true. |
36
+ | [placeholder](#placeholder) | `placeholder` | `string` | | Define custom placeholder text. |
36
37
  | [placement](#placement) | `placement` | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end". |
37
38
  | [required](#required) | `required` | `boolean` | | Populates the `required` attribute on the element. Used for client-side validation. |
38
39
  | [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `string` | | Sets a custom help text message to display for all validityStates. |
@@ -41,17 +42,14 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
41
42
  | [shape](#shape) | | `string` | "snowflake" | |
42
43
  | [size](#size) | | `string` | "xl" | |
43
44
  | [validity](#validity) | `validity` | `string` | | Specifies the `validityState` this element is in. |
44
- | [value](#value) | `value` | `String\|Array<String>` | | Value selected for the component. Default type is `String`, changing to `Array<String>` when `multiSelect` is true. |
45
+ | [value](#value) | `value` | `string` | | Value selected for the component. |
45
46
 
46
47
  ## Methods
47
48
 
48
- | Method | Type | Description |
49
- |----------------------|----------------------------------------|--------------------------------------------------|
50
- | [renderAriaHtml](#renderAriaHtml) | `(): TemplateResult` | |
51
- | [renderBACKUP](#renderBACKUP) | `(): TemplateResult` | |
52
- | [renderNativeSelect](#renderNativeSelect) | `(): TemplateResult` | |
53
- | [reset](#reset) | `(): void` | Resets component to initial state. |
54
- | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
49
+ | Method | Type | Description |
50
+ |------------|----------------------------------------|--------------------------------------------------|
51
+ | [reset](#reset) | `(): void` | Resets component to initial state. |
52
+ | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
55
53
 
56
54
  ## Events
57
55
 
@@ -59,7 +57,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
59
57
  |-----------------------------|--------------------------------------------------|--------------------------------------------------|
60
58
  | `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` values have changed. |
61
59
  | `auroSelect-valueSet` | `CustomEvent<any>` | Notifies that the component has a new value set. |
62
- | [input](#input) | `CustomEvent<{ optionSelected: any; value: any; }>` | Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object. |
60
+ | [input](#input) | `CustomEvent<{ optionSelected: any; value: string \| string[]; }>` | Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object. |
63
61
 
64
62
  ## Slots
65
63
 
@@ -71,7 +69,6 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
71
69
  | [helpText](#helpText) | Defines the content of the helpText. |
72
70
  | [label](#label) | Defines the content of the label. |
73
71
  | [optionalLabel](#optionalLabel) | Allows overriding the optional display text "(optional)", which appears next to the label. |
74
- | [placeholder](#placeholder) | Defines the content of the placeholder to be shown when there is no value |
75
72
  | [valueText](#valueText) | Dropdown value text display. |
76
73
 
77
74
  ## CSS Shadow Parts
@@ -1087,57 +1084,56 @@ export function auroMenuLoadingExample() {
1087
1084
  <!-- AURO-GENERATED-CONTENT:END -->
1088
1085
  </auro-accordion>
1089
1086
 
1090
- ### valueText <a name="valueText"></a>
1091
- The label for selected option can be customized using `valueText` slot.
1092
- This slot can be manipulated on the `input` event which delivers the new value and selected `auro-menuoption` element in the `detail` object.
1087
+ ### displayValue <a name="displayValue"></a>
1088
+ The label for selected option can be customized using `displayValue` slot under `<menuoption>.
1093
1089
 
1094
1090
  <div class="exampleWrapper">
1095
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueText.html) -->
1096
- <!-- The below content is automatically added from ./../apiExamples/valueText.html -->
1097
- <auro-select id="valueTextExample" autocomplete="address-level1">
1091
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/displayValue.html) -->
1092
+ <!-- The below content is automatically added from ./../apiExamples/displayValue.html -->
1093
+ <auro-select id="displayValueExample" autocomplete="address-level1">
1098
1094
  <span slot="bib.fullscreen.headline">Select Your Gender</span>
1099
1095
  <span slot="label">Gender</span>
1100
- <span slot="valueText"></span>
1096
+ <span slot="displayValue"></span>
1101
1097
  <auro-menu>
1102
- <auro-menuoption value="m" data-display="Male">M - Male</auro-menuoption>
1103
- <auro-menuoption value="f" data-display="Female">F - Female</auro-menuoption>
1104
- <auro-menuoption value="x" data-display="Unspecified">X - Unspecified</auro-menuoption>
1105
- <auro-menuoption value="u" data-display="Undisclosed">U - Undisclosed</auro-menuoption>
1098
+ <auro-menuoption value="m" data-display="Male">M - Male
1099
+ <span slot="displayValue">Male</span>
1100
+ </auro-menuoption>
1101
+ <auro-menuoption value="f" data-display="Female">F - Female
1102
+ <span slot="displayValue">Female</span>
1103
+ </auro-menuoption>
1104
+ <auro-menuoption value="x" data-display="Unspecified">X - Unspecified
1105
+ <span slot="displayValue">Unspecified</span>
1106
+ </auro-menuoption>
1107
+ <auro-menuoption value="u" data-display="Undisclosed">U - Undisclosed
1108
+ <span slot="displayValue">Undisclosed</span>
1109
+ </auro-menuoption>
1106
1110
  </auro-menu>
1107
1111
  </auro-select>
1108
1112
  <!-- AURO-GENERATED-CONTENT:END -->
1109
1113
  </div>
1110
1114
  <auro-accordion alignRight>
1111
1115
  <span slot="trigger">See code</span>
1112
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueText.js) -->
1113
- <!-- The below code snippet is automatically added from ./../apiExamples/valueText.js -->
1114
-
1115
- ```js
1116
- export function valueTextExample() {
1117
- const onValueTextSelectInput = (e) => {
1118
- const valueText = e.target.querySelector("[slot=valueText]");
1119
-
1120
- valueText.textContent = e.detail.optionSelected.dataset.display;
1121
- };
1122
-
1123
- const select = document.querySelector("#valueTextExample");
1124
- select.addEventListener('input', onValueTextSelectInput);
1125
- }
1126
- ```
1127
- <!-- AURO-GENERATED-CONTENT:END -->
1128
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueText.html) -->
1129
- <!-- The below code snippet is automatically added from ./../apiExamples/valueText.html -->
1116
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/displayValue.html) -->
1117
+ <!-- The below code snippet is automatically added from ./../apiExamples/displayValue.html -->
1130
1118
 
1131
1119
  ```html
1132
- <auro-select id="valueTextExample" autocomplete="address-level1">
1120
+ <auro-select id="displayValueExample" autocomplete="address-level1">
1133
1121
  <span slot="bib.fullscreen.headline">Select Your Gender</span>
1134
1122
  <span slot="label">Gender</span>
1135
- <span slot="valueText"></span>
1123
+ <span slot="displayValue"></span>
1136
1124
  <auro-menu>
1137
- <auro-menuoption value="m" data-display="Male">M - Male</auro-menuoption>
1138
- <auro-menuoption value="f" data-display="Female">F - Female</auro-menuoption>
1139
- <auro-menuoption value="x" data-display="Unspecified">X - Unspecified</auro-menuoption>
1140
- <auro-menuoption value="u" data-display="Undisclosed">U - Undisclosed</auro-menuoption>
1125
+ <auro-menuoption value="m" data-display="Male">M - Male
1126
+ <span slot="displayValue">Male</span>
1127
+ </auro-menuoption>
1128
+ <auro-menuoption value="f" data-display="Female">F - Female
1129
+ <span slot="displayValue">Female</span>
1130
+ </auro-menuoption>
1131
+ <auro-menuoption value="x" data-display="Unspecified">X - Unspecified
1132
+ <span slot="displayValue">Unspecified</span>
1133
+ </auro-menuoption>
1134
+ <auro-menuoption value="u" data-display="Undisclosed">U - Undisclosed
1135
+ <span slot="displayValue">Undisclosed</span>
1136
+ </auro-menuoption>
1141
1137
  </auro-menu>
1142
1138
  </auro-select>
1143
1139
  ```
@@ -1158,7 +1154,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
1158
1154
  <div style="width: 350px">
1159
1155
  <auro-select offset="20" noFlip placement="bottom-end">
1160
1156
  <span slot="bib.fullscreen.headline">Bib Headline</span>
1161
- <span slot="label">bottom-end bib with 20px offset and noFlip</span>
1157
+ <span slot="label">Label</span>
1158
+ <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
1162
1159
  <auro-menu>
1163
1160
  <auro-menuoption value="stops">Stops</auro-menuoption>
1164
1161
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -1170,7 +1167,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
1170
1167
  </auro-select>
1171
1168
  <auro-select offset="20" placement="bottom-end">
1172
1169
  <span slot="bib.fullscreen.headline">Bib Headline</span>
1173
- <span slot="label">bottom-end bib with 20px offset and flip</span>
1170
+ <span slot="label">Label</span>
1171
+ <span slot="helpText">bottom-end bib with 20px offset and flip</span>
1174
1172
  <auro-menu>
1175
1173
  <auro-menuoption value="stops">Stops</auro-menuoption>
1176
1174
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -1182,7 +1180,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
1182
1180
  </auro-select>
1183
1181
  <auro-select offset="20" noFlip placement="right" autoPlacement noFlip >
1184
1182
  <span slot="bib.fullscreen.headline">Bib Headline</span>
1185
- <span slot="label">right bib with 20px offset, noFlip and autoPlacement</span>
1183
+ <span slot="label">Label</span>
1184
+ <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
1186
1185
  <auro-menu>
1187
1186
  <auro-menuoption value="stops">Stops</auro-menuoption>
1188
1187
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -1204,7 +1203,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
1204
1203
  <div style="width: 350px">
1205
1204
  <auro-select offset="20" noFlip placement="bottom-end">
1206
1205
  <span slot="bib.fullscreen.headline">Bib Headline</span>
1207
- <span slot="label">bottom-end bib with 20px offset and noFlip</span>
1206
+ <span slot="label">Label</span>
1207
+ <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
1208
1208
  <auro-menu>
1209
1209
  <auro-menuoption value="stops">Stops</auro-menuoption>
1210
1210
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -1216,7 +1216,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
1216
1216
  </auro-select>
1217
1217
  <auro-select offset="20" placement="bottom-end">
1218
1218
  <span slot="bib.fullscreen.headline">Bib Headline</span>
1219
- <span slot="label">bottom-end bib with 20px offset and flip</span>
1219
+ <span slot="label">Label</span>
1220
+ <span slot="helpText">bottom-end bib with 20px offset and flip</span>
1220
1221
  <auro-menu>
1221
1222
  <auro-menuoption value="stops">Stops</auro-menuoption>
1222
1223
  <auro-menuoption value="price">Price</auro-menuoption>
@@ -1228,7 +1229,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
1228
1229
  </auro-select>
1229
1230
  <auro-select offset="20" noFlip placement="right" autoPlacement noFlip >
1230
1231
  <span slot="bib.fullscreen.headline">Bib Headline</span>
1231
- <span slot="label">right bib with 20px offset, noFlip and autoPlacement</span>
1232
+ <span slot="label">Label</span>
1233
+ <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
1232
1234
  <auro-menu>
1233
1235
  <auro-menuoption value="stops">Stops</auro-menuoption>
1234
1236
  <auro-menuoption value="price">Price</auro-menuoption>