@aurodesignsystem/auro-formkit 4.0.2 → 5.0.0

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 (172) hide show
  1. package/CHANGELOG.md +193 -2
  2. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  3. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  4. package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
  5. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  6. package/components/bibtemplate/dist/index.js +1184 -105
  7. package/components/bibtemplate/dist/registered.js +1184 -105
  8. package/components/checkbox/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +52 -17
  10. package/components/checkbox/demo/api.min.js +66 -33
  11. package/components/checkbox/demo/index.html +16 -10
  12. package/components/checkbox/demo/index.min.js +66 -33
  13. package/components/checkbox/demo/readme.html +16 -9
  14. package/components/checkbox/dist/auro-checkbox-group.d.ts +2 -2
  15. package/components/checkbox/dist/auro-checkbox.d.ts +8 -1
  16. package/components/checkbox/dist/index.js +65 -32
  17. package/components/checkbox/dist/registered.js +65 -32
  18. package/components/combobox/README.md +2 -0
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +124 -7
  21. package/components/combobox/demo/api.min.js +4542 -1330
  22. package/components/combobox/demo/index.html +16 -10
  23. package/components/combobox/demo/index.md +108 -4
  24. package/components/combobox/demo/index.min.js +4542 -1330
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/demo/readme.md +2 -0
  27. package/components/combobox/dist/auro-combobox.d.ts +81 -18
  28. package/components/combobox/dist/index.js +4588 -1520
  29. package/components/combobox/dist/registered.js +4588 -1520
  30. package/components/counter/demo/api.html +17 -10
  31. package/components/counter/demo/api.md +167 -21
  32. package/components/counter/demo/api.min.js +3621 -866
  33. package/components/counter/demo/index.html +17 -10
  34. package/components/counter/demo/index.md +191 -34
  35. package/components/counter/demo/index.min.js +3621 -866
  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 +162 -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 +3619 -864
  43. package/components/counter/dist/registered.js +3619 -864
  44. package/components/datepicker/README.md +2 -1
  45. package/components/datepicker/demo/api.html +16 -10
  46. package/components/datepicker/demo/api.md +80 -30
  47. package/components/datepicker/demo/api.min.js +14795 -10365
  48. package/components/datepicker/demo/index.html +16 -10
  49. package/components/datepicker/demo/index.md +96 -4
  50. package/components/datepicker/demo/index.min.js +14795 -10365
  51. package/components/datepicker/demo/readme.html +16 -9
  52. package/components/datepicker/demo/readme.md +2 -1
  53. package/components/datepicker/dist/auro-datepicker.d.ts +163 -4
  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 +14916 -10486
  57. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  58. package/components/datepicker/dist/registered.js +14916 -10486
  59. package/components/dropdown/demo/api.html +16 -10
  60. package/components/dropdown/demo/api.md +94 -262
  61. package/components/dropdown/demo/api.min.js +738 -259
  62. package/components/dropdown/demo/index.html +16 -10
  63. package/components/dropdown/demo/index.md +93 -266
  64. package/components/dropdown/demo/index.min.js +738 -259
  65. package/components/dropdown/demo/readme.html +16 -9
  66. package/components/dropdown/dist/auro-dropdown.d.ts +92 -73
  67. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  68. package/components/dropdown/dist/index.js +710 -231
  69. package/components/dropdown/dist/registered.js +710 -231
  70. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  71. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  72. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  73. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  74. package/components/form/demo/api.html +16 -9
  75. package/components/form/demo/api.md +1 -1
  76. package/components/form/demo/api.min.js +3 -3
  77. package/components/form/demo/autocomplete.html +19 -3
  78. package/components/form/demo/index.html +16 -9
  79. package/components/form/demo/index.min.js +3 -3
  80. package/components/form/demo/readme.html +16 -9
  81. package/components/form/demo/working.html +19 -13
  82. package/components/form/dist/auro-form.d.ts +1 -1
  83. package/components/form/dist/index.js +2 -2
  84. package/components/form/dist/registered.js +2 -2
  85. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  86. package/components/helptext/dist/index.js +2 -4
  87. package/components/helptext/dist/registered.js +2 -4
  88. package/components/input/README.md +6 -2
  89. package/components/input/demo/api.html +16 -10
  90. package/components/input/demo/api.md +258 -144
  91. package/components/input/demo/api.min.js +1550 -497
  92. package/components/input/demo/index.html +17 -11
  93. package/components/input/demo/index.md +95 -27
  94. package/components/input/demo/index.min.js +1549 -496
  95. package/components/input/demo/readme.html +16 -9
  96. package/components/input/demo/readme.md +6 -2
  97. package/components/input/dist/auro-input.d.ts +139 -3
  98. package/components/input/dist/base-input.d.ts +80 -26
  99. package/components/input/dist/buttonVersion.d.ts +1 -1
  100. package/components/input/dist/iconVersion.d.ts +1 -1
  101. package/components/input/dist/index.js +1504 -451
  102. package/components/input/dist/registered.js +1504 -451
  103. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  104. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  105. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  106. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  107. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  108. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  109. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  110. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  111. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  112. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  113. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  114. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  115. package/components/layoutElement/dist/index.d.ts +2 -0
  116. package/components/layoutElement/dist/index.js +98 -0
  117. package/components/layoutElement/dist/registered.js +98 -0
  118. package/components/menu/demo/api.html +17 -10
  119. package/components/menu/demo/api.md +65 -8
  120. package/components/menu/demo/api.min.js +304 -65
  121. package/components/menu/demo/index.html +16 -10
  122. package/components/menu/demo/index.min.js +304 -65
  123. package/components/menu/demo/readme.html +16 -9
  124. package/components/menu/dist/auro-menu.d.ts +53 -7
  125. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  126. package/components/menu/dist/iconVersion.d.ts +1 -1
  127. package/components/menu/dist/index.js +289 -50
  128. package/components/menu/dist/registered.js +289 -50
  129. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  130. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  131. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  132. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  133. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  134. package/components/radio/demo/api.html +16 -10
  135. package/components/radio/demo/api.md +41 -9
  136. package/components/radio/demo/api.min.js +93 -95
  137. package/components/radio/demo/index.html +16 -10
  138. package/components/radio/demo/index.min.js +93 -95
  139. package/components/radio/demo/readme.html +16 -9
  140. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  141. package/components/radio/dist/auro-radio.d.ts +11 -12
  142. package/components/radio/dist/index.js +92 -94
  143. package/components/radio/dist/registered.js +92 -94
  144. package/components/select/README.md +1 -0
  145. package/components/select/demo/api.html +16 -10
  146. package/components/select/demo/api.js +0 -2
  147. package/components/select/demo/api.md +156 -114
  148. package/components/select/demo/api.min.js +3126 -657
  149. package/components/select/demo/index.html +17 -10
  150. package/components/select/demo/index.md +398 -62
  151. package/components/select/demo/index.min.js +3129 -648
  152. package/components/select/demo/readme.html +16 -9
  153. package/components/select/demo/readme.md +1 -0
  154. package/components/select/dist/auro-select.d.ts +173 -18
  155. package/components/select/dist/helptextVersion.d.ts +2 -0
  156. package/components/select/dist/index.js +3128 -791
  157. package/components/select/dist/registered.js +3128 -791
  158. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  159. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  160. package/package.json +33 -32
  161. package/packages/build-tools/src/postinstall.mjs +0 -12
  162. /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
  163. /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
  164. /package/components/{input/dist/styles/borders-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  165. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/classic/color-css.d.ts} +0 -0
  166. /package/components/{input/dist/styles/label-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  167. /package/components/{input/dist/styles/notificationIcons-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  168. /package/components/{menu/dist/styles/color-menu-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  169. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  170. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  171. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  172. /package/components/{menu/dist/styles/tokens-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
package/components/input/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-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
 
package/components/input/demo/readme.md CHANGED
@@ -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,11 @@ 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></auro-input>
85
+ <auro-input>
86
+ <span slot="ariaLabel.clear">Clear All</span>
87
+ <span slot="label">Label</span>
88
+ <span slot="helpText">Help Text</span>
89
+ </auro-input>
86
90
  ```
87
91
  <!-- AURO-GENERATED-CONTENT:END -->
88
92
 
package/components/input/dist/auro-input.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export class AuroInput extends BaseInput {
2
+ static get styles(): import("lit").CSSResult[];
2
3
  /**
3
4
  * This will register this element with the browser.
4
5
  * @param {string} [name="auro-input"] - The name of element that you want to register to.
@@ -11,21 +12,156 @@ export class AuroInput extends BaseInput {
11
12
  /**
12
13
  * @private
13
14
  */
14
- private iconTag;
15
+ private buttonTag;
15
16
  /**
16
17
  * @private
17
18
  */
18
- private buttonTag;
19
+ private hasDisplayValueContent;
19
20
  /**
20
21
  * @private
21
22
  */
22
23
  private helpTextTag;
24
+ /**
25
+ * @private
26
+ */
27
+ private iconTag;
28
+ /**
29
+ * Determines if the HTML input element should be visually hidden.
30
+ * Returns true when display value content exists without focus and has a value,
31
+ * or when the input has no value, is not focused, and has no placeholder text.
32
+ * @returns {boolean} - True if the input should be visually hidden, false otherwise.
33
+ * @private
34
+ */
35
+ private get inputHidden();
36
+ /**
37
+ * Determines if the input should display in a state with no focus or value indication.
38
+ * Returns true when the input has display content without focus and has a value,
39
+ * or when the input has no value and is not focused.
40
+ * @returns {boolean} - True if the input should show no focus or value state, false otherwise.
41
+ * @private
42
+ */
43
+ private get noFocusOrValue();
44
+ /**
45
+ * Whether the label is being hidden currently based on state.
46
+ * @returns {boolean} - Returns true if the label is hidden.
47
+ * @private
48
+ */
49
+ private get labelHidden();
50
+ /**
51
+ * Returns the label font class based on layout and visibility state.
52
+ * @private
53
+ * @returns {string} - The font class for the label.
54
+ */
55
+ private get labelFontClass();
56
+ /**
57
+ * Returns the input font class based on layout and visibility state.
58
+ * @private
59
+ * @returns {string} - The font class for the input.
60
+ */
61
+ private get inputFontClass();
62
+ /**
63
+ * Returns classmap configuration for html5 input labels in all layouts.
64
+ * @private
65
+ * @returns {Record<string, boolean>}
66
+ */
67
+ private get commonLabelClasses();
68
+ /**
69
+ * Returns classmap configuration for html5 inputs in all layouts.
70
+ * @private
71
+ * @returns {Record<string, boolean>} - Returns classmap.
72
+ */
73
+ private get commonInputClasses();
74
+ /**
75
+ * Returns classmap configuration for html5 inputs in each layout.
76
+ * @private
77
+ * @returns {object} - Returns classmap.
78
+ */
79
+ private get legacyInputClasses();
80
+ /**
81
+ * Returns classmap configuration for wrapper elements in each layout.
82
+ * @private
83
+ * @returns {object} - Returns classmap.
84
+ */
85
+ private get commonWrapperClasses();
86
+ /**
87
+ * Returns classmap configuration for helpText elements in each layout.
88
+ * @private
89
+ * @returns {object} - Returns classmap.
90
+ */
91
+ private get helpTextClasses();
23
92
  /**
24
93
  * Function to determine if the input is meant to render an icon visualizing the input type.
25
94
  * @private
26
95
  * @returns {boolean} - Returns true if the input type is meant to render an icon.
27
96
  */
28
97
  private hasTypeIcon;
29
- render(): import("lit-html").TemplateResult;
98
+ /**
99
+ * Function to determine if there is any displayValue content to render.
100
+ * @private
101
+ * @returns {void}
102
+ */
103
+ private checkDisplayValueSlotChange;
104
+ /**
105
+ * Returns HTML for the validation error icon.
106
+ * @private
107
+ * @returns {html} - Returns HTML for the validation error icon.
108
+ */
109
+ private renderValidationErrorIconHtml;
110
+ /**
111
+ * Returns HTML for the HTML5 input element.
112
+ * @private
113
+ * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value.
114
+ * @returns {html} - Returns HTML for the HTML5 input element.
115
+ */
116
+ private renderHtmlInput;
117
+ /**
118
+ * Returns HTML for the clear action button.
119
+ * @private
120
+ * @returns {html} - Returns HTML for the clear action button.
121
+ */
122
+ private renderHtmlActionClear;
123
+ /**
124
+ * Returns HTML for the show password button.
125
+ * @private
126
+ * @returns {html} - Returns HTML for the show password button.
127
+ */
128
+ private renderHtmlNotificationPassword;
129
+ /**
130
+ * Returns HTML for the input type icon.
131
+ * @private
132
+ * @returns {html} - Returns HTML for the input type icon.
133
+ */
134
+ private renderHtmlTypeIcon;
135
+ /**
136
+ * Returns HTML for the help text and error message.
137
+ * @private
138
+ * @returns {html} - Returns HTML for the help text and error message.
139
+ */
140
+ private renderHtmlHelpText;
141
+ /**
142
+ * Returns HTML for the classic layout.
143
+ * @private
144
+ * @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
145
+ */
146
+ private renderLayoutClassic;
147
+ /**
148
+ * Returns HTML for the emphasized layout. Does not support type="*".
149
+ * @private
150
+ * @returns {html} - Returns HTML for the emphasized layout.
151
+ */
152
+ private renderLayoutEmphasized;
153
+ /**
154
+ * Returns HTML for the emphasized layout. Does not support type="*".
155
+ * @private
156
+ * @returns {html} - Returns HTML for the emphasized layout.
157
+ */
158
+ private renderLayoutSnowflake;
159
+ /**
160
+ * Logic to determine the layout of the component.
161
+ * @private
162
+ * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
163
+ * @returns {void}
164
+ */
165
+ private renderLayout;
30
166
  }
31
167
  import BaseInput from './base-input.js';
package/components/input/dist/base-input.d.ts CHANGED
@@ -1,31 +1,35 @@
1
1
  /**
2
2
  * Auro-input provides users a way to enter data into a text field.
3
3
  *
4
- * @attr {Boolean} bordered - Applies bordered UI variant.
5
- * @attr {Boolean} borderless - Applies borderless UI variant.
6
- *
7
4
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
8
5
  * @attr id
9
6
  *
10
- * @slot helptext - Sets the help text displayed below the input.
7
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
8
+ * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
9
+ * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
10
+ * @slot helpText - Sets the help text displayed below the input.
11
11
  * @slot label - Sets the label text for the input.
12
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
13
+ * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
12
14
  *
13
15
  * @csspart wrapper - Use for customizing the style of the root element
14
16
  * @csspart label - Use for customizing the style of the label element
15
17
  * @csspart helpText - Use for customizing the style of the helpText element
18
+ * @csspart input - Use for customizing the style of the input element
16
19
  * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
17
20
  * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
21
+ * @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin)
22
+ * @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin)
18
23
  * @event input - Event fires when the value of an `auro-input` has been changed.
19
24
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
20
25
  */
21
- export default class BaseInput extends LitElement {
26
+ export default class BaseInput extends AuroElement {
22
27
  static get properties(): {
23
28
  /**
24
29
  * The value for the role attribute.
25
30
  */
26
31
  a11yRole: {
27
32
  type: StringConstructor;
28
- attribute: boolean;
29
33
  reflect: boolean;
30
34
  };
31
35
  /**
@@ -33,7 +37,6 @@ export default class BaseInput extends LitElement {
33
37
  */
34
38
  a11yExpanded: {
35
39
  type: BooleanConstructor;
36
- attribute: boolean;
37
40
  reflect: boolean;
38
41
  };
39
42
  /**
@@ -41,7 +44,6 @@ export default class BaseInput extends LitElement {
41
44
  */
42
45
  a11yControls: {
43
46
  type: StringConstructor;
44
- attribute: boolean;
45
47
  reflect: boolean;
46
48
  };
47
49
  /**
@@ -56,6 +58,7 @@ export default class BaseInput extends LitElement {
56
58
  */
57
59
  autocapitalize: {
58
60
  type: StringConstructor;
61
+ reflect: boolean;
59
62
  };
60
63
  /**
61
64
  * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
@@ -69,6 +72,7 @@ export default class BaseInput extends LitElement {
69
72
  */
70
73
  autocorrect: {
71
74
  type: StringConstructor;
75
+ reflect: boolean;
72
76
  };
73
77
  /**
74
78
  * If set, disables the input.
@@ -107,7 +111,6 @@ export default class BaseInput extends LitElement {
107
111
  /** Exposes inputmode attribute for input. */
108
112
  inputmode: {
109
113
  type: StringConstructor;
110
- attribute: boolean;
111
114
  reflect: boolean;
112
115
  };
113
116
  /**
@@ -115,6 +118,7 @@ export default class BaseInput extends LitElement {
115
118
  */
116
119
  lang: {
117
120
  type: StringConstructor;
121
+ reflect: boolean;
118
122
  };
119
123
  /**
120
124
  * The maximum value allowed. This only applies for inputs with a type of `number` and all date formats.
@@ -127,6 +131,7 @@ export default class BaseInput extends LitElement {
127
131
  */
128
132
  maxLength: {
129
133
  type: NumberConstructor;
134
+ reflect: boolean;
130
135
  };
131
136
  /**
132
137
  * The minimum value allowed. This only applies for inputs with a type of `number` and all date formats.
@@ -139,12 +144,22 @@ export default class BaseInput extends LitElement {
139
144
  */
140
145
  minLength: {
141
146
  type: NumberConstructor;
147
+ reflect: boolean;
142
148
  };
143
149
  /**
144
150
  * Populates the `name` attribute on the input.
145
151
  */
146
152
  name: {
147
153
  type: StringConstructor;
154
+ reflect: boolean;
155
+ };
156
+ /**
157
+ * Sets styles for nested operation - removes borders, hides help + error text, and
158
+ * hides accents.
159
+ */
160
+ nested: {
161
+ type: BooleanConstructor;
162
+ reflect: boolean;
148
163
  };
149
164
  /**
150
165
  * If set, disables auto-validation on blur.
@@ -168,10 +183,11 @@ export default class BaseInput extends LitElement {
168
183
  reflect: boolean;
169
184
  };
170
185
  /**
171
- * Define custom placeholder text, only supported by date input formats.
186
+ * Define custom placeholder text.
172
187
  */
173
188
  placeholder: {
174
189
  type: StringConstructor;
190
+ reflect: boolean;
175
191
  };
176
192
  /**
177
193
  * Makes the input read-only, but can be set programmatically.
@@ -247,6 +263,13 @@ export default class BaseInput extends LitElement {
247
263
  setCustomValidityValueMissing: {
248
264
  type: StringConstructor;
249
265
  };
266
+ /**
267
+ * Simple makes the input render without a border.
268
+ */
269
+ simple: {
270
+ type: BooleanConstructor;
271
+ reflect: boolean;
272
+ };
250
273
  /**
251
274
  * Custom help text message for email type validity.
252
275
  */
@@ -258,6 +281,7 @@ export default class BaseInput extends LitElement {
258
281
  */
259
282
  spellcheck: {
260
283
  type: StringConstructor;
284
+ reflect: boolean;
261
285
  };
262
286
  /**
263
287
  * 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`.
@@ -293,27 +317,39 @@ export default class BaseInput extends LitElement {
293
317
  */
294
318
  touched: boolean;
295
319
  /**
320
+ * The id for input node.
296
321
  * @private
297
- * id for input node
298
322
  */
299
323
  inputId: {
300
324
  type: StringConstructor;
301
325
  reflect: boolean;
302
326
  attribute: boolean;
303
327
  };
328
+ layout: {
329
+ type: StringConstructor;
330
+ attribute: string;
331
+ reflect: boolean;
332
+ };
304
333
  };
305
- static get styles(): import("lit").CSSResult[];
334
+ activeLabel: boolean;
306
335
  icon: boolean;
307
336
  disabled: boolean;
308
- required: boolean;
309
- noValidate: boolean;
310
337
  max: any;
311
- min: any;
312
338
  maxLength: any;
339
+ min: any;
313
340
  minLength: any;
341
+ noValidate: boolean;
314
342
  onDark: boolean;
315
- activeLabel: boolean;
343
+ required: boolean;
316
344
  setCustomValidityForType: string;
345
+ /**
346
+ * @private
347
+ */
348
+ private shape;
349
+ /**
350
+ * @private
351
+ */
352
+ private size;
317
353
  /**
318
354
  * Internal Defaults.
319
355
  * @private
@@ -328,6 +364,7 @@ export default class BaseInput extends LitElement {
328
364
  validationCCLength: number;
329
365
  hasValue: boolean;
330
366
  label: string;
367
+ placeholderStr: any;
331
368
  allowedInputTypes: string[];
332
369
  /**
333
370
  * Credit Card is not included as this caused cursor placement issues.
@@ -352,9 +389,10 @@ export default class BaseInput extends LitElement {
352
389
  };
353
390
  uniqueId: string;
354
391
  firstUpdated(): void;
355
- inputId: string;
392
+ wrapperElement: Element;
356
393
  inputElement: HTMLInputElement;
357
394
  labelElement: HTMLLabelElement;
395
+ inputId: string;
358
396
  format: any;
359
397
  ValidityMessageOverride: any;
360
398
  /**
@@ -389,12 +427,6 @@ export default class BaseInput extends LitElement {
389
427
  * @returns {string}
390
428
  */
391
429
  private definePattern;
392
- /**
393
- * Function to set element focus.
394
- * @private
395
- * @return {void}
396
- */
397
- private focus;
398
430
  /**
399
431
  * Required to convert SVG icons from data to HTML string.
400
432
  * @private
@@ -408,6 +440,17 @@ export default class BaseInput extends LitElement {
408
440
  * @returns {void}
409
441
  */
410
442
  private notifyValueChanged;
443
+ /**
444
+ * Handles clicking on the auro-input anywhere outside of the HTML5 input and still moving focus in.
445
+ * @private
446
+ * @return {void}
447
+ */
448
+ private handleClick;
449
+ /**
450
+ * Function to set element focus.
451
+ * @return {void}
452
+ */
453
+ focus(): void;
411
454
  /**
412
455
  * Handles event of clearing input content by clicking the X icon.
413
456
  * @private
@@ -425,6 +468,13 @@ export default class BaseInput extends LitElement {
425
468
  * @return {void}
426
469
  */
427
470
  private handleFocusin;
471
+ hasFocus: boolean;
472
+ /**
473
+ * Function to support @focusout event.
474
+ * @private
475
+ * @return {void}
476
+ */
477
+ private handleFocusout;
428
478
  /**
429
479
  * Function to support @blur event.
430
480
  * @private
@@ -444,10 +494,14 @@ export default class BaseInput extends LitElement {
444
494
  */
445
495
  validate(force?: boolean): void;
446
496
  /**
447
- * Resets component to initial state.
497
+ * Resets component to initial state, including resetting the touched state and validity.
448
498
  * @returns {void}
449
499
  */
450
500
  reset(): void;
501
+ /**
502
+ * Clears the input value.
503
+ */
504
+ clear(): void;
451
505
  /**
452
506
  * Sets configuration data used elsewhere based on the `type` attribute.
453
507
  * @private
@@ -478,7 +532,7 @@ export default class BaseInput extends LitElement {
478
532
  /**
479
533
  * Support placeholder text.
480
534
  * @private
481
- * @returns {string}
535
+ * @returns {void}
482
536
  */
483
537
  private getPlaceholder;
484
538
  /**
@@ -507,6 +561,6 @@ export default class BaseInput extends LitElement {
507
561
  */
508
562
  private matchInputValueToCreditCard;
509
563
  }
510
- import { LitElement } from "lit";
564
+ import { AuroElement } from '../../layoutElement/src/auroElement.js';
511
565
  import { AuroInputUtilities } from "./utilities.js";
512
566
  import AuroFormValidation from '@auro-formkit/form-validation';
package/components/input/dist/buttonVersion.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: "9.3.0";
1
+ declare const _default: "11.0.0";
2
2
  export default _default;
package/components/input/dist/iconVersion.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: "8.0.1";
1
+ declare const _default: "8.0.4";
2
2
  export default _default;