@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.0 → 0.0.0-pr624.10
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.
- package/components/bibtemplate/dist/auro-bibtemplate.d.ts +1 -0
- package/components/bibtemplate/dist/index.js +88 -6
- package/components/bibtemplate/dist/registered.js +88 -6
- package/components/checkbox/demo/api.min.js +4 -3
- package/components/checkbox/demo/index.min.js +4 -3
- package/components/checkbox/dist/index.js +4 -3
- package/components/checkbox/dist/registered.js +4 -3
- package/components/combobox/demo/api.md +30 -29
- package/components/combobox/demo/api.min.js +609 -532
- package/components/combobox/demo/index.html +0 -1
- package/components/combobox/demo/index.md +43 -0
- package/components/combobox/demo/index.min.js +607 -530
- package/components/combobox/dist/auro-combobox.d.ts +13 -18
- package/components/combobox/dist/index.js +479 -387
- package/components/combobox/dist/registered.js +479 -387
- package/components/counter/demo/api.min.js +377 -62
- package/components/counter/demo/index.min.js +377 -62
- package/components/counter/dist/index.js +377 -62
- package/components/counter/dist/registered.js +377 -62
- package/components/datepicker/demo/api.md +13 -5
- package/components/datepicker/demo/api.min.js +868 -438
- package/components/datepicker/demo/index.md +13 -0
- package/components/datepicker/demo/index.min.js +868 -438
- package/components/datepicker/dist/auro-datepicker.d.ts +21 -2
- package/components/datepicker/dist/index.js +710 -280
- package/components/datepicker/dist/registered.js +710 -280
- package/components/dropdown/demo/api.md +2 -2
- package/components/dropdown/demo/api.min.js +199 -37
- package/components/dropdown/demo/index.md +45 -0
- package/components/dropdown/demo/index.min.js +199 -37
- package/components/dropdown/dist/auro-dropdown.d.ts +10 -1
- package/components/dropdown/dist/auro-dropdownBib.d.ts +8 -0
- package/components/dropdown/dist/index.js +199 -37
- package/components/dropdown/dist/registered.js +199 -37
- package/components/dropdown/dist/styles/classic/color-css.d.ts +2 -0
- package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
- package/components/input/README.md +1 -1
- package/components/input/demo/api.md +57 -53
- package/components/input/demo/api.min.js +142 -141
- package/components/input/demo/index.md +4 -4
- package/components/input/demo/index.min.js +142 -141
- package/components/input/demo/readme.md +1 -1
- package/components/input/dist/auro-input.d.ts +22 -13
- package/components/input/dist/base-input.d.ts +1 -1
- package/components/input/dist/index.js +142 -141
- package/components/input/dist/registered.js +142 -141
- package/components/input/dist/styles/classic/color-css.d.ts +2 -0
- package/components/input/dist/styles/classic/style-css.d.ts +2 -0
- package/components/layoutElement/dist/index.d.ts +1 -0
- package/components/layoutElement/dist/index.js +95 -1
- package/components/menu/demo/api.md +11 -11
- package/components/menu/demo/api.min.js +115 -130
- package/components/menu/demo/index.min.js +115 -130
- package/components/menu/dist/auro-menu-utils.d.ts +0 -8
- package/components/menu/dist/auro-menu.d.ts +3 -8
- package/components/menu/dist/index.d.ts +1 -1
- package/components/menu/dist/index.js +116 -90
- package/components/menu/dist/registered.js +115 -130
- package/components/radio/demo/api.min.js +4 -3
- package/components/radio/demo/index.min.js +4 -3
- package/components/radio/dist/index.js +4 -3
- package/components/radio/dist/registered.js +4 -3
- package/components/select/demo/api.js +2 -0
- package/components/select/demo/api.md +108 -42
- package/components/select/demo/api.min.js +1264 -352
- package/components/select/demo/index.html +1 -0
- package/components/select/demo/index.md +298 -777
- package/components/select/demo/index.min.js +1251 -351
- package/components/select/dist/auro-select.d.ts +110 -18
- package/components/select/dist/helptextVersion.d.ts +2 -0
- package/components/select/dist/index.js +1105 -190
- package/components/select/dist/registered.js +1105 -190
- package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
- package/components/select/dist/styles/tokens-css.d.ts +2 -0
- package/package.json +3 -3
- /package/components/{dropdown → datepicker}/dist/styles/default/color-css.d.ts +0 -0
- /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/emphasized}/style-css.d.ts +0 -0
- /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
- /package/components/dropdown/dist/styles/{default/bibStyles-css.d.ts → classic/bibColors-css.d.ts} +0 -0
- /package/components/dropdown/dist/styles/{style-css.d.ts → classic/bibStyles-css.d.ts} +0 -0
|
@@ -7,54 +7,52 @@ Generate unique names for dependency components.
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute |
|
|
11
|
-
|
|
12
|
-
| `a11yControls` | `a11yControls` |
|
|
13
|
-
| `a11yExpanded` | `a11yExpanded` |
|
|
14
|
-
| `a11yRole` | `a11yRole` |
|
|
15
|
-
| [activeLabel](#activeLabel) | `activeLabel` |
|
|
16
|
-
| [autocapitalize](#autocapitalize) | `autocapitalize` |
|
|
17
|
-
| [autocomplete](#autocomplete) | `autocomplete` |
|
|
18
|
-
| [autocorrect](#autocorrect) | `autocorrect` |
|
|
19
|
-
| [
|
|
20
|
-
| [
|
|
21
|
-
| [
|
|
22
|
-
| [
|
|
23
|
-
| [
|
|
24
|
-
| [
|
|
25
|
-
| [
|
|
26
|
-
| [
|
|
27
|
-
| [
|
|
28
|
-
| [
|
|
29
|
-
| [
|
|
30
|
-
| [
|
|
31
|
-
| [
|
|
32
|
-
| [
|
|
33
|
-
| [
|
|
34
|
-
| [
|
|
35
|
-
| [
|
|
36
|
-
| [
|
|
37
|
-
| [
|
|
38
|
-
| [
|
|
39
|
-
| [
|
|
40
|
-
| [
|
|
41
|
-
| [
|
|
42
|
-
| [
|
|
43
|
-
| [
|
|
44
|
-
| [
|
|
45
|
-
| [
|
|
46
|
-
| [
|
|
47
|
-
| [
|
|
48
|
-
| [
|
|
49
|
-
| [
|
|
50
|
-
| [
|
|
51
|
-
| [
|
|
52
|
-
| [
|
|
53
|
-
| [
|
|
54
|
-
| [
|
|
55
|
-
| [
|
|
56
|
-
| [validity](#validity) | `validity` | | `string` | | Specifies the `validityState` this element is in. |
|
|
57
|
-
| [value](#value) | `value` | | `string` | | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. |
|
|
10
|
+
| Property | Attribute | Type | Default | Description |
|
|
11
|
+
|-----------------------------------|-----------------------------------|-----------|-------------|--------------------------------------------------|
|
|
12
|
+
| `a11yControls` | `a11yControls` | `string` | | The value for the aria-controls attribute. |
|
|
13
|
+
| `a11yExpanded` | `a11yExpanded` | `boolean` | | The value for the aria-expanded attribute. |
|
|
14
|
+
| `a11yRole` | `a11yRole` | `string` | | The value for the role attribute. |
|
|
15
|
+
| [activeLabel](#activeLabel) | `activeLabel` | `boolean` | false | If set, the label will remain fixed in the active position. |
|
|
16
|
+
| [autocapitalize](#autocapitalize) | `autocapitalize` | `string` | | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]. |
|
|
17
|
+
| [autocomplete](#autocomplete) | `autocomplete` | `string` | | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
|
|
18
|
+
| [autocorrect](#autocorrect) | `autocorrect` | `string` | | When set to `off`, stops iOS from auto-correcting words when typed into a text box. |
|
|
19
|
+
| [customValidityTypeEmail](#customValidityTypeEmail) | `customValidityTypeEmail` | `string` | | Custom help text message for email type validity. |
|
|
20
|
+
| [disabled](#disabled) | `disabled` | `boolean` | false | If set, disables the input. |
|
|
21
|
+
| [error](#error) | `error` | `string` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
|
|
22
|
+
| [errorMessage](#errorMessage) | `errorMessage` | `string` | | Contains the help text message for the current validity error. |
|
|
23
|
+
| [format](#format) | `format` | `string` | | Specifies the input mask format. |
|
|
24
|
+
| [icon](#icon) | `icon` | `boolean` | false | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
|
|
25
|
+
| [id](#id) | `id` | `string` | | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
|
|
26
|
+
| [inputmode](#inputmode) | `inputmode` | `string` | | Exposes inputmode attribute for input. |
|
|
27
|
+
| [lang](#lang) | `lang` | `string` | | Defines the language of an element. |
|
|
28
|
+
| [layout](#layout) | | `string` | "classic" | |
|
|
29
|
+
| [max](#max) | `max` | `string` | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
|
|
30
|
+
| [maxLength](#maxLength) | `maxLength` | `number` | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
|
|
31
|
+
| [min](#min) | `min` | `string` | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
|
|
32
|
+
| [minLength](#minLength) | `minLength` | `number` | "undefined" | The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`. |
|
|
33
|
+
| [name](#name) | `name` | `string` | | Populates the `name` attribute on the input. |
|
|
34
|
+
| [noValidate](#noValidate) | `noValidate` | `boolean` | false | If set, disables auto-validation on blur. |
|
|
35
|
+
| [onDark](#onDark) | `onDark` | `boolean` | false | Sets onDark styles on input. |
|
|
36
|
+
| [pattern](#pattern) | `pattern` | `string` | | Specifies a regular expression the form control's value should match. |
|
|
37
|
+
| [placeholder](#placeholder) | `placeholder` | `string` | | Define custom placeholder text, only supported by date input formats. |
|
|
38
|
+
| [readonly](#readonly) | `readonly` | `boolean` | | Makes the input read-only, but can be set programmatically. |
|
|
39
|
+
| [required](#required) | `required` | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
|
|
40
|
+
| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `string` | | Sets a custom help text message to display for all validityStates. |
|
|
41
|
+
| [setCustomValidityBadInput](#setCustomValidityBadInput) | `setCustomValidityBadInput` | `string` | | Custom help text message to display when validity = `badInput`. |
|
|
42
|
+
| [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | `string` | | Custom help text message to display when validity = `customError`. |
|
|
43
|
+
| [setCustomValidityForType](#setCustomValidityForType) | `setCustomValidityForType` | `string` | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. |
|
|
44
|
+
| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow) | `setCustomValidityRangeOverflow` | `string` | | Custom help text message to display when validity = `rangeOverflow`. |
|
|
45
|
+
| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | `string` | | Custom help text message to display when validity = `rangeUnderflow`. |
|
|
46
|
+
| [setCustomValidityTooLong](#setCustomValidityTooLong) | `setCustomValidityTooLong` | `string` | | Custom help text message to display when validity = `tooLong`. |
|
|
47
|
+
| [setCustomValidityTooShort](#setCustomValidityTooShort) | `setCustomValidityTooShort` | `string` | | Custom help text message to display when validity = `tooShort`. |
|
|
48
|
+
| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
49
|
+
| [shape](#shape) | | `string` | "classic" | |
|
|
50
|
+
| [size](#size) | | `string` | "lg" | |
|
|
51
|
+
| [spellcheck](#spellcheck) | `spellcheck` | `string` | | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
|
|
52
|
+
| [type](#type) | `type` | `string` | | 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`. |
|
|
53
|
+
| [validateOnInput](#validateOnInput) | `validateOnInput` | `boolean` | | Sets validation mode to re-eval with each input. |
|
|
54
|
+
| [validity](#validity) | `validity` | `string` | | Specifies the `validityState` this element is in. |
|
|
55
|
+
| [value](#value) | `value` | `string` | | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. |
|
|
58
56
|
|
|
59
57
|
## Methods
|
|
60
58
|
|
|
@@ -108,13 +106,13 @@ The default component supports the basic input `type="text"` structure. The `(op
|
|
|
108
106
|
<div class="exampleWrapper">
|
|
109
107
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
110
108
|
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
111
|
-
<auro-input bordered></auro-input>
|
|
109
|
+
<auro-input bordered shape="rounded" size="lg"></auro-input>
|
|
112
110
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
113
111
|
</div>
|
|
114
112
|
<div class="exampleWrapper--ondark" aria-hidden>
|
|
115
113
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
|
|
116
114
|
<!-- The below content is automatically added from ./../apiExamples/onDark.html -->
|
|
117
|
-
<auro-input onDark bordered></auro-input>
|
|
115
|
+
<auro-input onDark bordered shape="rounded" size="lg"></auro-input>
|
|
118
116
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
119
117
|
</div>
|
|
120
118
|
<auro-accordion alignRight>
|
|
@@ -123,14 +121,14 @@ The default component supports the basic input `type="text"` structure. The `(op
|
|
|
123
121
|
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
124
122
|
|
|
125
123
|
```html
|
|
126
|
-
<auro-input bordered></auro-input>
|
|
124
|
+
<auro-input bordered shape="rounded" size="lg"></auro-input>
|
|
127
125
|
```
|
|
128
126
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
129
127
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
|
|
130
128
|
<!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
|
|
131
129
|
|
|
132
130
|
```html
|
|
133
|
-
<auro-input onDark bordered></auro-input>
|
|
131
|
+
<auro-input onDark bordered shape="rounded" size="lg"></auro-input>
|
|
134
132
|
```
|
|
135
133
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
136
134
|
</auro-accordion>
|
|
@@ -1235,11 +1233,13 @@ The component may be restyled using the following code sample and changing the v
|
|
|
1235
1233
|
<!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
|
|
1236
1234
|
|
|
1237
1235
|
```scss
|
|
1236
|
+
/* stylelint-disable custom-property-empty-line-before */
|
|
1237
|
+
|
|
1238
1238
|
@use "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska" as v;
|
|
1239
1239
|
|
|
1240
1240
|
$ds-basic-color-border-bold: #585e67;
|
|
1241
1241
|
|
|
1242
|
-
:host(:not(ondark)) {
|
|
1242
|
+
:host(:not([ondark])) {
|
|
1243
1243
|
--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
|
|
1244
1244
|
--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
|
|
1245
1245
|
--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
|
|
@@ -1248,6 +1248,8 @@ $ds-basic-color-border-bold: #585e67;
|
|
|
1248
1248
|
--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
|
|
1249
1249
|
--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
|
|
1250
1250
|
--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
|
|
1251
|
+
|
|
1252
|
+
--ds-auro-input-outline-color: transparent;
|
|
1251
1253
|
}
|
|
1252
1254
|
|
|
1253
1255
|
:host([ondark]) {
|
|
@@ -1259,6 +1261,8 @@ $ds-basic-color-border-bold: #585e67;
|
|
|
1259
1261
|
--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
|
|
1260
1262
|
--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
|
|
1261
1263
|
--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse});
|
|
1264
|
+
|
|
1265
|
+
--ds-auro-input-outline-color: transparent;
|
|
1262
1266
|
}
|
|
1263
1267
|
```
|
|
1264
1268
|
<!-- AURO-GENERATED-CONTENT:END -->
|