@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
@@ -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
 
@@ -25,6 +25,30 @@ export class AuroInput extends BaseInput {
25
25
  * @private
26
26
  */
27
27
  private iconTag;
28
+ /**
29
+ * Whether the input is being hidden currently based on state.
30
+ * @returns {boolean} - Returns true if the input is hidden.
31
+ * @private
32
+ */
33
+ private get inputHidden();
34
+ /**
35
+ * Whether the label is being hidden currently based on state.
36
+ * @returns {boolean} - Returns true if the label is hidden.
37
+ * @private
38
+ */
39
+ private get labelHidden();
40
+ /**
41
+ * Returns the label font class based on layout and visibility state.
42
+ * @private
43
+ * @returns {string} - The font class for the label.
44
+ */
45
+ private get labelFontClass();
46
+ /**
47
+ * Returns the input font class based on layout and visibility state.
48
+ * @private
49
+ * @returns {string} - The font class for the input.
50
+ */
51
+ private get inputFontClass();
28
52
  /**
29
53
  * Returns classmap configuration for html5 input labels in all layouts.
30
54
  * @private
@@ -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.
@@ -315,8 +340,14 @@ export default class BaseInput extends AuroElement {
315
340
  onDark: boolean;
316
341
  required: boolean;
317
342
  setCustomValidityForType: string;
318
- shape: string;
319
- size: string;
343
+ /**
344
+ * @private
345
+ */
346
+ private shape;
347
+ /**
348
+ * @private
349
+ */
350
+ private size;
320
351
  /**
321
352
  * Internal Defaults.
322
353
  * @private
@@ -415,10 +446,9 @@ export default class BaseInput extends AuroElement {
415
446
  private handleClick;
416
447
  /**
417
448
  * Function to set element focus.
418
- * @private
419
449
  * @return {void}
420
450
  */
421
- private focus;
451
+ focus(): void;
422
452
  /**
423
453
  * Handles event of clearing input content by clicking the X icon.
424
454
  * @private
@@ -462,10 +492,14 @@ export default class BaseInput extends AuroElement {
462
492
  */
463
493
  validate(force?: boolean): void;
464
494
  /**
465
- * Resets component to initial state.
495
+ * Resets component to initial state, including resetting the touched state and validity.
466
496
  * @returns {void}
467
497
  */
468
498
  reset(): void;
499
+ /**
500
+ * Clears the input value.
501
+ */
502
+ clear(): void;
469
503
  /**
470
504
  * Sets configuration data used elsewhere based on the `type` attribute.
471
505
  * @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;