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

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 +49 -37
  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 +49 -37
  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 +49 -37
  18. package/components/checkbox/dist/registered.js +49 -37
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +112 -8
  21. package/components/combobox/demo/api.min.js +2941 -851
  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 +2941 -851
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/dist/auro-combobox.d.ts +37 -8
  27. package/components/combobox/dist/index.js +2730 -736
  28. package/components/combobox/dist/registered.js +2730 -736
  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 +6696 -4097
  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 +6696 -4097
  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 +6696 -4097
  42. package/components/counter/dist/registered.js +6696 -4097
  43. package/components/datepicker/demo/api.html +16 -10
  44. package/components/datepicker/demo/api.md +24 -16
  45. package/components/datepicker/demo/api.min.js +11749 -8230
  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 +11749 -8230
  49. package/components/datepicker/demo/readme.html +16 -9
  50. package/components/datepicker/dist/auro-datepicker.d.ts +84 -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 +6531 -3012
  54. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  55. package/components/datepicker/dist/registered.js +6531 -3012
  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 +226 -129
  81. package/components/input/demo/api.min.js +828 -234
  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 +828 -234
  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 +33 -9
  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 +828 -234
  92. package/components/input/dist/registered.js +828 -234
  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 +72 -85
  110. package/components/radio/demo/index.html +16 -10
  111. package/components/radio/demo/index.min.js +72 -85
  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 +72 -85
  116. package/components/radio/dist/registered.js +72 -85
  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 +2107 -639
  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 +2104 -624
  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 +2028 -644
  127. package/components/select/dist/registered.js +2028 -644
  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
@@ -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-input 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-input</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-input'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
 
@@ -20,7 +20,7 @@ The following sections are editable by making changes to the following files:
20
20
  # Input
21
21
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
22
22
  <!-- The below content is automatically added from ./docs/partials/description.md -->
23
- Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helptext` for additional content support.
23
+ Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helpText` for additional content support.
24
24
  <!-- AURO-GENERATED-CONTENT:END -->
25
25
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
26
26
  <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -82,7 +82,10 @@ This configuration enables proper module resolution for the component's TypeScri
82
82
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
83
83
 
84
84
  ```html
85
- <auro-input bordered shape="rounded" size="lg"></auro-input>
85
+ <auro-input>
86
+ <span slot="label">Label</span>
87
+ <span slot="helpText">Help Text</span>
88
+ </auro-input>
86
89
  ```
87
90
  <!-- AURO-GENERATED-CONTENT:END -->
88
91
 
@@ -40,19 +40,19 @@ export class AuroInput extends BaseInput {
40
40
  /**
41
41
  * Returns classmap configuration for html5 inputs in each layout.
42
42
  * @private
43
- * @return {object} - Returns classmap.
43
+ * @returns {object} - Returns classmap.
44
44
  */
45
45
  private get legacyInputClasses();
46
46
  /**
47
47
  * Returns classmap configuration for wrapper elements in each layout.
48
48
  * @private
49
- * @return {object} - Returns classmap.
49
+ * @returns {object} - Returns classmap.
50
50
  */
51
51
  private get commonWrapperClasses();
52
52
  /**
53
53
  * Returns classmap configuration for helpText elements in each layout.
54
54
  * @private
55
- * @return {object} - Returns classmap.
55
+ * @returns {object} - Returns classmap.
56
56
  */
57
57
  private get helpTextClasses();
58
58
  /**
@@ -4,14 +4,19 @@
4
4
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
5
5
  * @attr id
6
6
  *
7
- * @slot helptext - Sets the help text displayed below the input.
7
+ * @slot helpText - Sets the help text displayed below the input.
8
8
  * @slot label - Sets the label text for the input.
9
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
10
+ * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
9
11
  *
10
12
  * @csspart wrapper - Use for customizing the style of the root element
11
13
  * @csspart label - Use for customizing the style of the label element
12
14
  * @csspart helpText - Use for customizing the style of the helpText element
15
+ * @csspart input - Use for customizing the style of the input element
13
16
  * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
14
17
  * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
18
+ * @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin)
19
+ * @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin)
15
20
  * @event input - Event fires when the value of an `auro-input` has been changed.
16
21
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
17
22
  */
@@ -22,7 +27,6 @@ export default class BaseInput extends AuroElement {
22
27
  */
23
28
  a11yRole: {
24
29
  type: StringConstructor;
25
- attribute: boolean;
26
30
  reflect: boolean;
27
31
  };
28
32
  /**
@@ -30,7 +34,6 @@ export default class BaseInput extends AuroElement {
30
34
  */
31
35
  a11yExpanded: {
32
36
  type: BooleanConstructor;
33
- attribute: boolean;
34
37
  reflect: boolean;
35
38
  };
36
39
  /**
@@ -38,7 +41,6 @@ export default class BaseInput extends AuroElement {
38
41
  */
39
42
  a11yControls: {
40
43
  type: StringConstructor;
41
- attribute: boolean;
42
44
  reflect: boolean;
43
45
  };
44
46
  /**
@@ -53,6 +55,7 @@ export default class BaseInput extends AuroElement {
53
55
  */
54
56
  autocapitalize: {
55
57
  type: StringConstructor;
58
+ reflect: boolean;
56
59
  };
57
60
  /**
58
61
  * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
@@ -66,6 +69,7 @@ export default class BaseInput extends AuroElement {
66
69
  */
67
70
  autocorrect: {
68
71
  type: StringConstructor;
72
+ reflect: boolean;
69
73
  };
70
74
  /**
71
75
  * If set, disables the input.
@@ -104,7 +108,6 @@ export default class BaseInput extends AuroElement {
104
108
  /** Exposes inputmode attribute for input. */
105
109
  inputmode: {
106
110
  type: StringConstructor;
107
- attribute: boolean;
108
111
  reflect: boolean;
109
112
  };
110
113
  /**
@@ -112,6 +115,7 @@ export default class BaseInput extends AuroElement {
112
115
  */
113
116
  lang: {
114
117
  type: StringConstructor;
118
+ reflect: boolean;
115
119
  };
116
120
  /**
117
121
  * The maximum value allowed. This only applies for inputs with a type of `number` and all date formats.
@@ -124,6 +128,7 @@ export default class BaseInput extends AuroElement {
124
128
  */
125
129
  maxLength: {
126
130
  type: NumberConstructor;
131
+ reflect: boolean;
127
132
  };
128
133
  /**
129
134
  * The minimum value allowed. This only applies for inputs with a type of `number` and all date formats.
@@ -136,12 +141,22 @@ export default class BaseInput extends AuroElement {
136
141
  */
137
142
  minLength: {
138
143
  type: NumberConstructor;
144
+ reflect: boolean;
139
145
  };
140
146
  /**
141
147
  * Populates the `name` attribute on the input.
142
148
  */
143
149
  name: {
144
150
  type: StringConstructor;
151
+ reflect: boolean;
152
+ };
153
+ /**
154
+ * Sets styles for nested operation - removes borders, hides help + error text, and
155
+ * hides accents.
156
+ */
157
+ nested: {
158
+ type: BooleanConstructor;
159
+ reflect: boolean;
145
160
  };
146
161
  /**
147
162
  * If set, disables auto-validation on blur.
@@ -165,10 +180,11 @@ export default class BaseInput extends AuroElement {
165
180
  reflect: boolean;
166
181
  };
167
182
  /**
168
- * Define custom placeholder text, only supported by date input formats.
183
+ * Define custom placeholder text.
169
184
  */
170
185
  placeholder: {
171
186
  type: StringConstructor;
187
+ reflect: boolean;
172
188
  };
173
189
  /**
174
190
  * Makes the input read-only, but can be set programmatically.
@@ -244,6 +260,13 @@ export default class BaseInput extends AuroElement {
244
260
  setCustomValidityValueMissing: {
245
261
  type: StringConstructor;
246
262
  };
263
+ /**
264
+ * Simple makes the input render without a border.
265
+ */
266
+ simple: {
267
+ type: BooleanConstructor;
268
+ reflect: boolean;
269
+ };
247
270
  /**
248
271
  * Custom help text message for email type validity.
249
272
  */
@@ -255,6 +278,7 @@ export default class BaseInput extends AuroElement {
255
278
  */
256
279
  spellcheck: {
257
280
  type: StringConstructor;
281
+ reflect: boolean;
258
282
  };
259
283
  /**
260
284
  * Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `date`, `tel` or `text`. If given value is not allowed or set, defaults to `text`.
@@ -268,6 +292,7 @@ export default class BaseInput extends AuroElement {
268
292
  */
269
293
  value: {
270
294
  type: StringConstructor;
295
+ reflect: boolean;
271
296
  };
272
297
  /**
273
298
  * Sets validation mode to re-eval with each input.
@@ -290,8 +315,8 @@ export default class BaseInput extends AuroElement {
290
315
  */
291
316
  touched: boolean;
292
317
  /**
318
+ * The id for input node.
293
319
  * @private
294
- * id for input node
295
320
  */
296
321
  inputId: {
297
322
  type: StringConstructor;
@@ -415,10 +440,9 @@ export default class BaseInput extends AuroElement {
415
440
  private handleClick;
416
441
  /**
417
442
  * Function to set element focus.
418
- * @private
419
443
  * @return {void}
420
444
  */
421
- private focus;
445
+ focus(): void;
422
446
  /**
423
447
  * Handles event of clearing input content by clicking the X icon.
424
448
  * @private
@@ -1,2 +1,2 @@
1
- declare const _default: "9.3.0";
1
+ declare const _default: "11.0.0";
2
2
  export default _default;
@@ -1,2 +1,2 @@
1
- declare const _default: "8.0.1";
1
+ declare const _default: "8.0.4";
2
2
  export default _default;