@aurodesignsystem/auro-formkit 2.0.0-beta.2 → 2.0.0-beta.4
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/.turbo/cache/013a48308b893dac-meta.json +1 -1
- package/.turbo/cache/02244170c798a2bd-meta.json +1 -0
- package/.turbo/cache/02244170c798a2bd.tar.zst +0 -0
- package/.turbo/cache/051ff97a20add0e2-meta.json +1 -0
- package/.turbo/cache/051ff97a20add0e2.tar.zst +0 -0
- package/.turbo/cache/07ca42419b9f050c-meta.json +1 -1
- package/.turbo/cache/0cea4c1f34f3683b-meta.json +1 -1
- package/.turbo/cache/0ea853339c064fa1-meta.json +1 -0
- package/.turbo/cache/0ea853339c064fa1.tar.zst +0 -0
- package/.turbo/cache/16658beec9f4a809-meta.json +1 -0
- package/.turbo/cache/16658beec9f4a809.tar.zst +0 -0
- package/.turbo/cache/17259cf94d8f8925-meta.json +1 -1
- package/.turbo/cache/1b9818717e4bdf9f-meta.json +1 -0
- package/.turbo/cache/1b9818717e4bdf9f.tar.zst +0 -0
- package/.turbo/cache/1c0f580d37370ba2-meta.json +1 -0
- package/.turbo/cache/1c0f580d37370ba2.tar.zst +0 -0
- package/.turbo/cache/1c99a949ec63ab35-meta.json +1 -1
- package/.turbo/cache/1df4710eef8ed00d-meta.json +1 -0
- package/.turbo/cache/1df4710eef8ed00d.tar.zst +0 -0
- package/.turbo/cache/204b66d1b253e9cc-meta.json +1 -0
- package/.turbo/cache/204b66d1b253e9cc.tar.zst +0 -0
- package/.turbo/cache/257a7a26ea72dbc5-meta.json +1 -1
- package/.turbo/cache/2a5d0939d6fc1052-meta.json +1 -0
- package/.turbo/cache/2a5d0939d6fc1052.tar.zst +0 -0
- package/.turbo/cache/2e3b829fcf75c836-meta.json +1 -0
- package/.turbo/cache/2e3b829fcf75c836.tar.zst +0 -0
- package/.turbo/cache/3bf45120d0cc9bd8-meta.json +1 -1
- package/.turbo/cache/3d380d0d40404cac-meta.json +1 -0
- package/.turbo/cache/3d380d0d40404cac.tar.zst +0 -0
- package/.turbo/cache/3e12285c614db539-meta.json +1 -0
- package/.turbo/cache/3e12285c614db539.tar.zst +0 -0
- package/.turbo/cache/45035bf5c4147ccd-meta.json +1 -1
- package/.turbo/cache/5bf2d3f7ba5891e0-meta.json +1 -0
- package/.turbo/cache/5bf2d3f7ba5891e0.tar.zst +0 -0
- package/.turbo/cache/5f304c0f37ef25f3-meta.json +1 -1
- package/.turbo/cache/64de7a53e02db647-meta.json +1 -1
- package/.turbo/cache/691a74627ec57993-meta.json +1 -1
- package/.turbo/cache/69aae513b7ec6c7d-meta.json +1 -1
- package/.turbo/cache/6dd67d179191bda8-meta.json +1 -0
- package/.turbo/cache/6dd67d179191bda8.tar.zst +0 -0
- package/.turbo/cache/6dd7058e6703cb35-meta.json +1 -1
- package/.turbo/cache/73e9073a5274616d-meta.json +1 -1
- package/.turbo/cache/773edc0f83c8c5a5-meta.json +1 -1
- package/.turbo/cache/786a822763403879-meta.json +1 -1
- package/.turbo/cache/7e1043cffa69f327-meta.json +1 -0
- package/.turbo/cache/7e1043cffa69f327.tar.zst +0 -0
- package/.turbo/cache/7ffd501e81790676-meta.json +1 -0
- package/.turbo/cache/7ffd501e81790676.tar.zst +0 -0
- package/.turbo/cache/80a13352066a9801-meta.json +1 -0
- package/.turbo/cache/80a13352066a9801.tar.zst +0 -0
- package/.turbo/cache/80b5d974184a01df-meta.json +1 -1
- package/.turbo/cache/8954c6073396fadd-meta.json +1 -1
- package/.turbo/cache/8e79bd5c3a16a72e-meta.json +1 -0
- package/.turbo/cache/8e9ebc3df0e18de0-meta.json +1 -0
- package/.turbo/cache/8e9ebc3df0e18de0.tar.zst +0 -0
- package/.turbo/cache/92daa6d7c389d548-meta.json +1 -1
- package/.turbo/cache/973d0eea26083f4b-meta.json +1 -0
- package/.turbo/cache/973d0eea26083f4b.tar.zst +0 -0
- package/.turbo/cache/9c6ad42729c7b2d8-meta.json +1 -0
- package/.turbo/cache/9c6ad42729c7b2d8.tar.zst +0 -0
- package/.turbo/cache/a77bc920ea508bb8-meta.json +1 -1
- package/.turbo/cache/a77bc920ea508bb8.tar.zst +0 -0
- package/.turbo/cache/a9a9d012c83882d8-meta.json +1 -0
- package/.turbo/cache/a9a9d012c83882d8.tar.zst +0 -0
- package/.turbo/cache/b54fc4f664a7a5a0-meta.json +1 -1
- package/.turbo/cache/ba4418918621fbcd-meta.json +1 -1
- package/.turbo/cache/be7c23c37b8ec74b-meta.json +1 -1
- package/.turbo/cache/be7c23c37b8ec74b.tar.zst +0 -0
- package/.turbo/cache/bffc7582905c2a5e-meta.json +1 -0
- package/.turbo/cache/bffc7582905c2a5e.tar.zst +0 -0
- package/.turbo/cache/caa0b4ac8d2a04dd-meta.json +1 -1
- package/.turbo/cache/caa0b4ac8d2a04dd.tar.zst +0 -0
- package/.turbo/cache/cc81de9c0b452a7c-meta.json +1 -1
- package/.turbo/cache/d572ebb3c833e8f4-meta.json +1 -0
- package/.turbo/cache/d572ebb3c833e8f4.tar.zst +0 -0
- package/.turbo/cache/d61543843c932504-meta.json +1 -0
- package/.turbo/cache/d61543843c932504.tar.zst +0 -0
- package/.turbo/cache/dad1301ac69bcb85-meta.json +1 -1
- package/.turbo/cache/db361cb6578dca84-meta.json +1 -0
- package/.turbo/cache/db361cb6578dca84.tar.zst +0 -0
- package/.turbo/cache/dea5945f55c6aba5-meta.json +1 -0
- package/.turbo/cache/dea5945f55c6aba5.tar.zst +0 -0
- package/.turbo/cache/e992dab20aeefbaf-meta.json +1 -1
- package/.turbo/cache/e992dab20aeefbaf.tar.zst +0 -0
- package/.turbo/cache/f3ff9040a2196834-meta.json +1 -0
- package/.turbo/cache/f3ff9040a2196834.tar.zst +0 -0
- package/.turbo/cache/f817d89688cefca8-meta.json +1 -0
- package/.turbo/cache/f817d89688cefca8.tar.zst +0 -0
- package/.turbo/cache/fa132b5b5f0e75f8-meta.json +1 -1
- package/.turbo/cache/fc57c17867dcac3d-meta.json +1 -0
- package/.turbo/cache/fc57c17867dcac3d.tar.zst +0 -0
- package/CHANGELOG.md +44 -0
- package/components/checkbox/.turbo/turbo-build.log +3 -3
- package/components/checkbox/.turbo/turbo-bundler.log +3 -3
- package/components/checkbox/demo/api.md +4 -2
- package/components/checkbox/demo/api.min.js +31 -36
- package/components/checkbox/demo/index.min.js +31 -36
- package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
- package/components/checkbox/dist/index.js +31 -36
- package/components/checkbox/src/auro-checkbox-group.js +2 -2
- package/components/combobox/.turbo/turbo-build.log +3 -3
- package/components/combobox/demo/api.md +17 -15
- package/components/combobox/demo/api.min.js +500 -218
- package/components/combobox/demo/index.min.js +500 -218
- package/components/combobox/dist/auro-combobox.d.ts +11 -4
- package/components/combobox/dist/auro-combobox.d.ts.map +1 -1
- package/components/combobox/dist/index.js +499 -217
- package/components/combobox/src/auro-combobox.js +22 -20
- package/components/counter/.turbo/turbo-build.log +3 -3
- package/components/counter/.turbo/turbo-bundler.log +3 -3
- package/components/datepicker/.turbo/turbo-build.log +9 -8
- package/components/datepicker/demo/api.md +107 -87
- package/components/datepicker/demo/api.min.js +492 -232
- package/components/datepicker/demo/index.min.js +492 -232
- package/components/datepicker/dist/auro-datepicker.d.ts +6 -13
- package/components/datepicker/dist/auro-datepicker.d.ts.map +1 -1
- package/components/datepicker/dist/index.js +492 -232
- package/components/datepicker/src/auro-datepicker.js +15 -35
- package/components/dropdown/.turbo/turbo-build.log +3 -3
- package/components/dropdown/.turbo/turbo-bundler.log +2 -2
- package/components/dropdown/demo/api.md +4 -4
- package/components/dropdown/demo/api.min.js +166 -42
- package/components/dropdown/demo/index.min.js +166 -42
- package/components/dropdown/dist/auro-dropdown.d.ts +93 -34
- package/components/dropdown/dist/auro-dropdown.d.ts.map +1 -1
- package/components/dropdown/dist/auro-dropdownBib.d.ts +9 -3
- package/components/dropdown/dist/auro-dropdownBib.d.ts.map +1 -1
- package/components/dropdown/dist/index.js +166 -42
- package/components/dropdown/src/auro-dropdown.js +154 -39
- package/components/dropdown/src/auro-dropdownBib.js +12 -3
- package/components/dropdown/src/styles/style-css.js +1 -1
- package/components/dropdown/src/styles/style.css +4 -0
- package/components/dropdown/src/styles/style.scss +5 -0
- package/components/form/.turbo/turbo-build.log +3 -3
- package/components/form/.turbo/turbo-bundler.log +3 -3
- package/components/input/.turbo/turbo-build$colon$sass.log +51 -1
- package/components/input/.turbo/turbo-build.log +56 -6
- package/components/input/.turbo/turbo-bundler.log +3 -3
- package/components/input/.turbo/turbo-sass$colon$render.log +6 -0
- package/components/input/demo/api.md +83 -81
- package/components/input/demo/api.min.js +282 -121
- package/components/input/demo/index.md +6 -6
- package/components/input/demo/index.min.js +282 -121
- package/components/input/dist/auro-input.d.ts.map +1 -1
- package/components/input/dist/base-input.d.ts +155 -84
- package/components/input/dist/base-input.d.ts.map +1 -1
- package/components/input/dist/index.js +282 -121
- package/components/input/dist/styles/mixins-css.d.ts +3 -0
- package/components/input/dist/styles/mixins-css.d.ts.map +1 -0
- package/components/input/src/auro-input.js +0 -1
- package/components/input/src/base-input.js +252 -85
- package/components/input/src/styles/borders.scss +3 -19
- package/components/input/src/styles/color.css +1 -2
- package/components/input/src/styles/color.scss +3 -10
- package/components/input/src/styles/input-css.js +1 -1
- package/components/input/src/styles/input.css +1 -1
- package/components/input/src/styles/input.scss +4 -1
- package/components/input/src/styles/label-css.js +1 -1
- package/components/input/src/styles/label.css +1 -1
- package/components/input/src/styles/label.scss +4 -7
- package/components/input/src/styles/mixins-css.js +2 -0
- package/components/input/src/styles/mixins.css +1 -0
- package/components/input/src/styles/mixins.scss +45 -0
- package/components/input/src/styles/notificationIcons-css.js +1 -1
- package/components/input/src/styles/notificationIcons.css +13 -12
- package/components/input/src/styles/notificationIcons.scss +17 -25
- package/components/input/src/styles/style-css.js +1 -1
- package/components/input/src/styles/style.css +15 -17
- package/components/input/src/styles/style.scss +0 -4
- package/components/menu/.turbo/turbo-build.log +3 -3
- package/components/menu/.turbo/turbo-bundler.log +3 -3
- package/components/menu/demo/api.min.js +1 -1
- package/components/menu/demo/index.min.js +1 -1
- package/components/menu/dist/auro-menu.d.ts +1 -1
- package/components/menu/dist/index.js +1 -1
- package/components/menu/src/auro-menu.js +1 -1
- package/components/radio/.turbo/turbo-build.log +3 -3
- package/components/radio/.turbo/turbo-bundler.log +3 -3
- package/components/radio/demo/api.md +3 -1
- package/components/radio/demo/api.min.js +30 -35
- package/components/radio/demo/index.min.js +30 -35
- package/components/radio/dist/index.js +30 -35
- package/components/radio/src/auro-radio-group.js +1 -1
- package/components/select/.turbo/turbo-build.log +7 -9
- package/components/select/demo/api.md +45 -110
- package/components/select/demo/api.min.js +320 -224
- package/components/select/demo/index.md +100 -43
- package/components/select/demo/index.min.js +320 -220
- package/components/select/dist/auro-select.d.ts +64 -51
- package/components/select/dist/auro-select.d.ts.map +1 -1
- package/components/select/dist/index.js +314 -201
- package/components/select/src/auro-select.js +100 -118
- package/components/select/src/styles/style-css.js +1 -1
- package/components/select/src/styles/style.css +7 -0
- package/components/select/src/styles/style.scss +11 -1
- package/package.json +1 -1
- package/packages/form-validation/src/validation.js +29 -34
- package/.turbo/cache/0663fcbb1d711029-meta.json +0 -1
- package/.turbo/cache/0663fcbb1d711029.tar.zst +0 -0
- package/.turbo/cache/0a2b0a4df8a0443f-meta.json +0 -1
- package/.turbo/cache/120c8e207aa1ba35-meta.json +0 -1
- package/.turbo/cache/120c8e207aa1ba35.tar.zst +0 -0
- package/.turbo/cache/17dd4bdef6550a07-meta.json +0 -1
- package/.turbo/cache/17dd4bdef6550a07.tar.zst +0 -0
- package/.turbo/cache/1de15d89eed2d760-meta.json +0 -1
- package/.turbo/cache/1de15d89eed2d760.tar.zst +0 -0
- package/.turbo/cache/2990aaa7ebc5b967-meta.json +0 -1
- package/.turbo/cache/2990aaa7ebc5b967.tar.zst +0 -0
- package/.turbo/cache/32c0b9995fb5f8dd-meta.json +0 -1
- package/.turbo/cache/32c0b9995fb5f8dd.tar.zst +0 -0
- package/.turbo/cache/47ba2b5ebdb579e9-meta.json +0 -1
- package/.turbo/cache/47ba2b5ebdb579e9.tar.zst +0 -0
- package/.turbo/cache/4f92cea2d8c63de2-meta.json +0 -1
- package/.turbo/cache/4f92cea2d8c63de2.tar.zst +0 -0
- package/.turbo/cache/56cb35d4c7473a23-meta.json +0 -1
- package/.turbo/cache/56cb35d4c7473a23.tar.zst +0 -0
- package/.turbo/cache/5c16ce3cff5c9dff-meta.json +0 -1
- package/.turbo/cache/5c16ce3cff5c9dff.tar.zst +0 -0
- package/.turbo/cache/626afdc67e0cb540-meta.json +0 -1
- package/.turbo/cache/626afdc67e0cb540.tar.zst +0 -0
- package/.turbo/cache/6ef81cf9a66f982a-meta.json +0 -1
- package/.turbo/cache/6ef81cf9a66f982a.tar.zst +0 -0
- package/.turbo/cache/784c03fe9fd5ac05-meta.json +0 -1
- package/.turbo/cache/784c03fe9fd5ac05.tar.zst +0 -0
- package/.turbo/cache/87219c41a4ace9cd-meta.json +0 -1
- package/.turbo/cache/87219c41a4ace9cd.tar.zst +0 -0
- package/.turbo/cache/8b735250fa5a62bf-meta.json +0 -1
- package/.turbo/cache/8b735250fa5a62bf.tar.zst +0 -0
- package/.turbo/cache/9154e8fe6ab767ea-meta.json +0 -1
- package/.turbo/cache/9154e8fe6ab767ea.tar.zst +0 -0
- package/.turbo/cache/993dff2edb7b6766-meta.json +0 -1
- package/.turbo/cache/993dff2edb7b6766.tar.zst +0 -0
- package/.turbo/cache/9a097d6576dadd64-meta.json +0 -1
- package/.turbo/cache/9a097d6576dadd64.tar.zst +0 -0
- package/.turbo/cache/a49cc58242467fdc-meta.json +0 -1
- package/.turbo/cache/a49cc58242467fdc.tar.zst +0 -0
- package/.turbo/cache/a6a56bb802e1c20f-meta.json +0 -1
- package/.turbo/cache/a6a56bb802e1c20f.tar.zst +0 -0
- package/.turbo/cache/af061e7a077a9ba5-meta.json +0 -1
- package/.turbo/cache/af061e7a077a9ba5.tar.zst +0 -0
- package/.turbo/cache/b50f1b283b4b81cd-meta.json +0 -1
- package/.turbo/cache/b50f1b283b4b81cd.tar.zst +0 -0
- package/.turbo/cache/bf85bc040b7e64db-meta.json +0 -1
- package/.turbo/cache/bf85bc040b7e64db.tar.zst +0 -0
- package/.turbo/cache/cd5f6987783fb56d-meta.json +0 -1
- package/.turbo/cache/cd5f6987783fb56d.tar.zst +0 -0
- package/.turbo/cache/ce67b6522dd09e64-meta.json +0 -1
- package/.turbo/cache/ce67b6522dd09e64.tar.zst +0 -0
- package/.turbo/cache/d716cb7a08152beb-meta.json +0 -1
- package/.turbo/cache/d716cb7a08152beb.tar.zst +0 -0
- package/.turbo/cache/d7a47b77deb3d9a4-meta.json +0 -1
- package/.turbo/cache/d7a47b77deb3d9a4.tar.zst +0 -0
- package/.turbo/cache/fbbe2704bf9cb90b-meta.json +0 -1
- package/.turbo/cache/fbbe2704bf9cb90b.tar.zst +0 -0
- package/.turbo/cache/ff58f630c9d69af4-meta.json +0 -1
- package/.turbo/cache/ff58f630c9d69af4.tar.zst +0 -0
- /package/.turbo/cache/{0a2b0a4df8a0443f.tar.zst → 8e79bd5c3a16a72e.tar.zst} +0 -0
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
// If using litElement base class
|
|
9
9
|
import { LitElement } from "lit";
|
|
10
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
10
11
|
import { html } from 'lit/static-html.js';
|
|
11
12
|
|
|
12
13
|
import AuroFormValidation from '@auro-formkit/form-validation';
|
|
@@ -25,22 +26,10 @@ import tokensCss from "./styles/tokens-css.js";
|
|
|
25
26
|
/**
|
|
26
27
|
* The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
|
|
27
28
|
*
|
|
28
|
-
* @attr {String} validity - Specifies the `validityState` this element is in.
|
|
29
|
-
* @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
|
|
30
|
-
* @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
|
|
31
|
-
* @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
|
|
32
|
-
* @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
|
|
33
|
-
* @attr {Boolean} noValidate - If set, disables auto-validation on blur.
|
|
34
|
-
* @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
|
|
35
|
-
* @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
|
|
36
|
-
* @prop {String} placeholder - Define placeholder text to display before a value is manually selected.
|
|
37
|
-
* @prop {String} value - Value selected for the component.
|
|
38
|
-
* @prop {Boolean} disabled - When attribute is present element shows disabled state.
|
|
39
|
-
* @prop {Boolean} noCheckmark - When true, checkmark on selected option will no longer be present.
|
|
40
|
-
* @attr {Object} optionSelected - Specifies the current selected menuOption.
|
|
41
29
|
* @slot - Default slot for the menu content.
|
|
42
30
|
* @slot label - Defines the content of the label.
|
|
43
31
|
* @slot helpText - Defines the content of the helpText.
|
|
32
|
+
* @slot placeholder - Defines the content of the placeholder to be shown when there is no value
|
|
44
33
|
* @event auroSelect-valueSet - Notifies that the component has a new value set.
|
|
45
34
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
|
|
46
35
|
* @csspart helpText - Apply CSS to the help text.
|
|
@@ -51,7 +40,6 @@ export class AuroSelect extends LitElement {
|
|
|
51
40
|
constructor() {
|
|
52
41
|
super();
|
|
53
42
|
|
|
54
|
-
this.placeholder = 'Please select option';
|
|
55
43
|
this.optionSelected = undefined;
|
|
56
44
|
this.validity = undefined;
|
|
57
45
|
|
|
@@ -106,68 +94,118 @@ export class AuroSelect extends LitElement {
|
|
|
106
94
|
// to understand how to use reflected attributes with your property settings.
|
|
107
95
|
static get properties() {
|
|
108
96
|
return {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* When attribute is present, element shows disabled state.
|
|
100
|
+
*/
|
|
101
|
+
disabled: {
|
|
102
|
+
type: Boolean,
|
|
103
|
+
reflect: true
|
|
112
104
|
},
|
|
113
|
-
|
|
114
|
-
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* If set, makes dropdown width match the size of the content, rather than the width of the trigger.
|
|
108
|
+
*/
|
|
109
|
+
flexMenuWidth: {
|
|
110
|
+
type: Boolean,
|
|
111
|
+
reflect: true
|
|
112
|
+
},
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* When true, checkmark on selected option will no longer be present.
|
|
116
|
+
*/
|
|
117
|
+
noCheckmark: {
|
|
118
|
+
type: Boolean,
|
|
119
|
+
reflect: true
|
|
115
120
|
},
|
|
121
|
+
|
|
122
|
+
/**
|
|
123
|
+
* If set, disables auto-validation on blur.
|
|
124
|
+
*/
|
|
116
125
|
noValidate: {
|
|
117
126
|
type: Boolean,
|
|
118
127
|
reflect: true
|
|
119
128
|
},
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* @private
|
|
132
|
+
*/
|
|
133
|
+
optionActive: {
|
|
134
|
+
type: Object
|
|
135
|
+
},
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
* Specifies the current selected menuOption.
|
|
139
|
+
*/
|
|
140
|
+
optionSelected: {
|
|
141
|
+
type: Object
|
|
142
|
+
},
|
|
143
|
+
|
|
144
|
+
/**
|
|
145
|
+
* @private
|
|
146
|
+
*/
|
|
147
|
+
options: {
|
|
148
|
+
type: Array
|
|
149
|
+
},
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* Populates the `required` attribute on the element. Used for client-side validation.
|
|
153
|
+
*/
|
|
120
154
|
required: {
|
|
121
155
|
type: Boolean,
|
|
122
156
|
reflect: true
|
|
123
157
|
},
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
|
|
161
|
+
*/
|
|
124
162
|
error: {
|
|
125
163
|
type: String,
|
|
126
164
|
reflect: true
|
|
127
165
|
},
|
|
166
|
+
|
|
167
|
+
/**
|
|
168
|
+
* Sets a custom help text message to display for all validityStates.
|
|
169
|
+
*/
|
|
128
170
|
setCustomValidity: {
|
|
129
171
|
type: String
|
|
130
172
|
},
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* Custom help text message to display when validity = `customError`.
|
|
176
|
+
*/
|
|
131
177
|
setCustomValidityCustomError: {
|
|
132
178
|
type: String
|
|
133
179
|
},
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
* Custom help text message to display when validity = `valueMissing`.
|
|
183
|
+
*/
|
|
134
184
|
setCustomValidityValueMissing: {
|
|
135
185
|
type: String
|
|
136
186
|
},
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* Specifies the `validityState` this element is in.
|
|
190
|
+
*/
|
|
137
191
|
validity: {
|
|
138
192
|
type: String,
|
|
139
193
|
reflect: true
|
|
140
194
|
},
|
|
141
|
-
disabled: {
|
|
142
|
-
type: Boolean,
|
|
143
|
-
reflect: true
|
|
144
|
-
},
|
|
145
|
-
noCheckmark: {
|
|
146
|
-
type: Boolean,
|
|
147
|
-
reflect: true
|
|
148
|
-
},
|
|
149
|
-
flexMenuWidth: {
|
|
150
|
-
type: Boolean,
|
|
151
|
-
reflect: true
|
|
152
|
-
},
|
|
153
|
-
placeholder: { type: String },
|
|
154
|
-
|
|
155
|
-
/**
|
|
156
|
-
* @private
|
|
157
|
-
*/
|
|
158
|
-
options: { type: Array },
|
|
159
195
|
|
|
160
196
|
/**
|
|
161
|
-
*
|
|
197
|
+
* Value selected for the component.
|
|
162
198
|
*/
|
|
163
|
-
|
|
199
|
+
value: {
|
|
200
|
+
type: String
|
|
201
|
+
}
|
|
164
202
|
};
|
|
165
203
|
}
|
|
166
204
|
|
|
167
205
|
static get styles() {
|
|
168
206
|
return [
|
|
169
|
-
styleCss,
|
|
170
207
|
colorCss,
|
|
208
|
+
styleCss,
|
|
171
209
|
tokensCss
|
|
172
210
|
];
|
|
173
211
|
}
|
|
@@ -202,36 +240,30 @@ export class AuroSelect extends LitElement {
|
|
|
202
240
|
}
|
|
203
241
|
|
|
204
242
|
/**
|
|
205
|
-
* Updates the displayed value in an Auro dropdown component based on
|
|
206
|
-
* @param {string|HTMLElement} option - The option to display. If a string, a new span element with the value string is created. If an HTMLElement, the selected option is cloned and non-styling attributes are removed.
|
|
243
|
+
* Updates the displayed value in an Auro dropdown component based on optionSelected
|
|
207
244
|
* @private
|
|
208
245
|
* @returns {void}
|
|
209
246
|
*/
|
|
210
|
-
updateDisplayedValue(
|
|
247
|
+
updateDisplayedValue() {
|
|
211
248
|
const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
|
|
212
249
|
|
|
213
250
|
// remove all existing rendered value(s)
|
|
214
|
-
triggerContentEl.querySelectorAll('auro-menuoption, [
|
|
251
|
+
triggerContentEl.querySelectorAll('auro-menuoption, [auro-menuoption]').forEach((elm) => {
|
|
215
252
|
elm.remove();
|
|
216
253
|
});
|
|
217
254
|
|
|
218
|
-
if (
|
|
219
|
-
// create a new span element with the value string
|
|
220
|
-
const valueElem = document.createElement('span');
|
|
221
|
-
valueElem.setAttribute('valuestr', true);
|
|
222
|
-
valueElem.textContent = option;
|
|
223
|
-
|
|
224
|
-
// append the new element into the trigger content
|
|
225
|
-
triggerContentEl.appendChild(valueElem);
|
|
226
|
-
} else if (typeof option === 'object') {
|
|
255
|
+
if (this.optionSelected) {
|
|
227
256
|
// clone the selected option and remove attributes that style it
|
|
228
|
-
const clone =
|
|
257
|
+
const clone = this.optionSelected.cloneNode(true);
|
|
229
258
|
clone.removeAttribute('selected');
|
|
230
259
|
clone.removeAttribute('class');
|
|
231
260
|
|
|
232
261
|
// insert the non-styled clone into the trigger
|
|
233
262
|
triggerContentEl.appendChild(clone);
|
|
234
263
|
}
|
|
264
|
+
|
|
265
|
+
// notify dropdown as trigger content is changed
|
|
266
|
+
this.dropdown.requestUpdate();
|
|
235
267
|
}
|
|
236
268
|
|
|
237
269
|
/**
|
|
@@ -241,7 +273,7 @@ export class AuroSelect extends LitElement {
|
|
|
241
273
|
*/
|
|
242
274
|
configureMenu() {
|
|
243
275
|
this.menu = this.querySelector('auro-menu, [auro-menu]');
|
|
244
|
-
|
|
276
|
+
|
|
245
277
|
// racing condition on custom-select with custom-menu
|
|
246
278
|
if (!this.menu) {
|
|
247
279
|
setTimeout(() => {
|
|
@@ -250,6 +282,7 @@ export class AuroSelect extends LitElement {
|
|
|
250
282
|
return;
|
|
251
283
|
}
|
|
252
284
|
|
|
285
|
+
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
253
286
|
this.menu.setAttribute('aria-hidden', 'true');
|
|
254
287
|
|
|
255
288
|
this.generateOptionsArray();
|
|
@@ -262,8 +295,6 @@ export class AuroSelect extends LitElement {
|
|
|
262
295
|
this.optionSelected = this.menu.optionSelected;
|
|
263
296
|
this.value = this.optionSelected.value;
|
|
264
297
|
|
|
265
|
-
this.updateDisplayedValue(this.optionSelected);
|
|
266
|
-
|
|
267
298
|
if (this.dropdown.isPopoverVisible) {
|
|
268
299
|
this.dropdown.hide();
|
|
269
300
|
}
|
|
@@ -277,25 +308,11 @@ export class AuroSelect extends LitElement {
|
|
|
277
308
|
* with `auro-select.value`.
|
|
278
309
|
*/
|
|
279
310
|
this.menu.addEventListener('auroMenu-selectValueFailure', () => {
|
|
280
|
-
this.
|
|
281
|
-
this.optionSelected = this.menu.optionSelected;
|
|
282
|
-
|
|
283
|
-
this.validity = 'badInput';
|
|
284
|
-
|
|
285
|
-
// Capitalizes the first letter of each word in this.value string
|
|
286
|
-
const valueStr = this.value.replace(/(^\w{1})|(\s+\w{1})/gu, (letter) => letter.toUpperCase());
|
|
287
|
-
|
|
288
|
-
// Pass the new string to the trigger content
|
|
289
|
-
this.updateDisplayedValue(valueStr);
|
|
311
|
+
this.reset();
|
|
290
312
|
});
|
|
291
313
|
|
|
292
314
|
this.menu.addEventListener('auroMenu-selectValueReset', () => {
|
|
293
|
-
|
|
294
|
-
this.updateDisplayedValue(this.placeholder);
|
|
295
|
-
|
|
296
|
-
this.optionSelected = undefined;
|
|
297
|
-
this.value = undefined;
|
|
298
|
-
|
|
315
|
+
this.optionSelected = this.menu.optionSelected;
|
|
299
316
|
this.validation.validate(this);
|
|
300
317
|
});
|
|
301
318
|
}
|
|
@@ -347,8 +364,6 @@ export class AuroSelect extends LitElement {
|
|
|
347
364
|
this.addEventListener('blur', () => {
|
|
348
365
|
this.validation.validate(this);
|
|
349
366
|
});
|
|
350
|
-
|
|
351
|
-
this.labelForSr();
|
|
352
367
|
}
|
|
353
368
|
|
|
354
369
|
/**
|
|
@@ -467,6 +482,10 @@ export class AuroSelect extends LitElement {
|
|
|
467
482
|
}));
|
|
468
483
|
}
|
|
469
484
|
|
|
485
|
+
if (changedProperties.has('optionSelected')) {
|
|
486
|
+
this.updateDisplayedValue();
|
|
487
|
+
}
|
|
488
|
+
|
|
470
489
|
if (changedProperties.has('error')) {
|
|
471
490
|
this.validation.validate(this, true);
|
|
472
491
|
}
|
|
@@ -480,52 +499,15 @@ export class AuroSelect extends LitElement {
|
|
|
480
499
|
this.validation.reset(this);
|
|
481
500
|
}
|
|
482
501
|
|
|
483
|
-
/**
|
|
484
|
-
* Handles reading of auro-select by screen readers.
|
|
485
|
-
* @private
|
|
486
|
-
* @returns {void}
|
|
487
|
-
*/
|
|
488
|
-
labelForSr() {
|
|
489
|
-
const placeholderLabel = document.createElement("div");
|
|
490
|
-
const textId = "label";
|
|
491
|
-
|
|
492
|
-
placeholderLabel.setAttribute("id", textId);
|
|
493
|
-
placeholderLabel.setAttribute("aria-live", "polite");
|
|
494
|
-
|
|
495
|
-
const styles = {
|
|
496
|
-
position: 'absolute',
|
|
497
|
-
overflow: 'hidden',
|
|
498
|
-
clipPath: 'inset(1px, 1px, 1px, 1px)',
|
|
499
|
-
width: '1px',
|
|
500
|
-
height: '1px',
|
|
501
|
-
padding: '0',
|
|
502
|
-
border: '0'
|
|
503
|
-
};
|
|
504
|
-
|
|
505
|
-
Object.assign(placeholderLabel.style, styles);
|
|
506
|
-
|
|
507
|
-
this.addEventListener('focus', () => {
|
|
508
|
-
document.body.appendChild(placeholderLabel);
|
|
509
|
-
|
|
510
|
-
if (!this.optionSelected) {
|
|
511
|
-
document.getElementById(textId).innerHTML = this.placeholder;
|
|
512
|
-
} else {
|
|
513
|
-
document.getElementById(textId).innerHTML = `${this.optionSelected.innerText}, ${this.placeholder}`;
|
|
514
|
-
}
|
|
515
|
-
});
|
|
516
|
-
|
|
517
|
-
this.addEventListener('blur', () => {
|
|
518
|
-
if (document.contains(placeholderLabel)) {
|
|
519
|
-
document.body.removeChild(placeholderLabel);
|
|
520
|
-
}
|
|
521
|
-
});
|
|
522
|
-
}
|
|
523
|
-
|
|
524
502
|
// When using auroElement, use the following attribute and function when hiding content from screen readers.
|
|
525
503
|
// aria-hidden="${this.hideAudible(this.hiddenAudible)}"
|
|
526
504
|
|
|
527
505
|
// function that renders the HTML and CSS into the scope of the component
|
|
528
506
|
render() {
|
|
507
|
+
const placeholderClass = {
|
|
508
|
+
hidden: this.value,
|
|
509
|
+
};
|
|
510
|
+
|
|
529
511
|
return html`
|
|
530
512
|
<div class="outerWrapper">
|
|
531
513
|
<div aria-live="polite" class="util_displayHiddenVisually">
|
|
@@ -552,7 +534,7 @@ export class AuroSelect extends LitElement {
|
|
|
552
534
|
chevron
|
|
553
535
|
part="dropdown">
|
|
554
536
|
<span slot="trigger" aria-haspopup="true" id="triggerFocus">
|
|
555
|
-
|
|
537
|
+
<span id="placeholder" class="${classMap(placeholderClass)}"><slot name="placeholder"></slot></span>
|
|
556
538
|
</span>
|
|
557
539
|
<div class="menuWrapper">
|
|
558
540
|
</div>
|
|
@@ -565,7 +547,7 @@ export class AuroSelect extends LitElement {
|
|
|
565
547
|
</p>`
|
|
566
548
|
: html`
|
|
567
549
|
<p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
568
|
-
${this.
|
|
550
|
+
${this.errorMessage}
|
|
569
551
|
</p>`
|
|
570
552
|
}
|
|
571
553
|
</span>
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}.selectElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}`;
|
|
2
|
+
export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host [auro-dropdown]{position:relative}:host [auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}:host [auro-dropdown]::part(popover){max-width:-webkit-fill-available;overflow-y:scroll}:host([disabled]) *{user-select:none}.outerWrapper{position:relative}auro-menuoption{padding:0;pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}.selectElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}`;
|
|
@@ -62,6 +62,12 @@
|
|
|
62
62
|
[slot=trigger] .nestingSpacer {
|
|
63
63
|
display: none;
|
|
64
64
|
}
|
|
65
|
+
[slot=trigger] #placeholder.hidden {
|
|
66
|
+
position: absolute;
|
|
67
|
+
z-index: -1;
|
|
68
|
+
opacity: 0;
|
|
69
|
+
pointer-events: none;
|
|
70
|
+
}
|
|
65
71
|
|
|
66
72
|
:host [auro-dropdown] {
|
|
67
73
|
position: relative;
|
|
@@ -83,6 +89,7 @@
|
|
|
83
89
|
}
|
|
84
90
|
|
|
85
91
|
auro-menuoption {
|
|
92
|
+
padding: 0;
|
|
86
93
|
pointer-events: none;
|
|
87
94
|
}
|
|
88
95
|
|
|
@@ -24,7 +24,16 @@
|
|
|
24
24
|
.nestingSpacer {
|
|
25
25
|
display: none;
|
|
26
26
|
}
|
|
27
|
-
|
|
27
|
+
|
|
28
|
+
#placeholder {
|
|
29
|
+
&.hidden {
|
|
30
|
+
position: absolute;
|
|
31
|
+
z-index: -1;
|
|
32
|
+
opacity: 0;
|
|
33
|
+
pointer-events: none;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
28
37
|
|
|
29
38
|
:host {
|
|
30
39
|
[auro-dropdown] {
|
|
@@ -52,6 +61,7 @@
|
|
|
52
61
|
}
|
|
53
62
|
|
|
54
63
|
auro-menuoption {
|
|
64
|
+
padding: 0;
|
|
55
65
|
pointer-events: none;
|
|
56
66
|
}
|
|
57
67
|
|
package/package.json
CHANGED
|
@@ -47,20 +47,20 @@ export default class AuroFormValidation {
|
|
|
47
47
|
const pattern = new RegExp(`^${elem.pattern}$`, 'u');
|
|
48
48
|
|
|
49
49
|
if (!pattern.test(elem.value)) {
|
|
50
|
-
elem.validity = '
|
|
51
|
-
elem.
|
|
50
|
+
elem.validity = 'patternMismatch';
|
|
51
|
+
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
// Length > 0 is required to prevent the error message from showing when the input is empty
|
|
56
56
|
if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
|
|
57
57
|
elem.validity = 'tooShort';
|
|
58
|
-
elem.
|
|
58
|
+
elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
if (elem.value?.length > elem.maxLength) {
|
|
62
62
|
elem.validity = 'tooLong';
|
|
63
|
-
elem.
|
|
63
|
+
elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
|
|
@@ -76,33 +76,32 @@ export default class AuroFormValidation {
|
|
|
76
76
|
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
|
|
77
77
|
|
|
78
78
|
if (!elem.value.match(emailRegex)) {
|
|
79
|
-
elem.validity = '
|
|
80
|
-
elem.
|
|
79
|
+
elem.validity = 'patternMismatch';
|
|
80
|
+
elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
|
|
81
81
|
}
|
|
82
82
|
} else if (elem.type === 'credit-card') {
|
|
83
83
|
if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
|
|
84
84
|
elem.validity = 'tooShort';
|
|
85
|
-
elem.
|
|
85
|
+
elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
|
|
86
86
|
}
|
|
87
87
|
} else if (elem.type === 'number') {
|
|
88
88
|
if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
|
|
89
89
|
elem.validity = 'rangeOverflow';
|
|
90
|
-
elem.
|
|
90
|
+
elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
|
|
93
|
+
if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
|
|
94
94
|
elem.validity = 'rangeUnderflow';
|
|
95
|
-
elem.
|
|
95
|
+
elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
|
|
96
96
|
}
|
|
97
|
-
|
|
98
97
|
} else if (elem.type === 'month-day-year' ||
|
|
99
98
|
elem.type === 'month-year' ||
|
|
100
99
|
elem.type === 'month-fullYear' ||
|
|
101
100
|
elem.type === 'year-month-day'
|
|
102
101
|
) {
|
|
103
|
-
if (elem.value
|
|
102
|
+
if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
|
|
104
103
|
elem.validity = 'tooShort';
|
|
105
|
-
elem.
|
|
104
|
+
elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
|
|
106
105
|
} else {
|
|
107
106
|
const valueDate = new Date(elem.value);
|
|
108
107
|
|
|
@@ -112,7 +111,7 @@ export default class AuroFormValidation {
|
|
|
112
111
|
|
|
113
112
|
if (valueDate > maxDate) {
|
|
114
113
|
elem.validity = 'rangeOverflow';
|
|
115
|
-
elem.
|
|
114
|
+
elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
|
|
116
115
|
}
|
|
117
116
|
}
|
|
118
117
|
|
|
@@ -122,7 +121,7 @@ export default class AuroFormValidation {
|
|
|
122
121
|
|
|
123
122
|
if (valueDate < minDate) {
|
|
124
123
|
elem.validity = 'rangeUnderflow';
|
|
125
|
-
elem.
|
|
124
|
+
elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
|
|
126
125
|
}
|
|
127
126
|
}
|
|
128
127
|
}
|
|
@@ -145,10 +144,10 @@ export default class AuroFormValidation {
|
|
|
145
144
|
|
|
146
145
|
if (elem.hasAttribute('error')) {
|
|
147
146
|
elem.validity = 'customError';
|
|
148
|
-
elem.
|
|
147
|
+
elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
|
|
149
148
|
} else if (validationShouldRun) {
|
|
150
149
|
elem.validity = 'valid';
|
|
151
|
-
elem.
|
|
150
|
+
elem.errorMessage = '';
|
|
152
151
|
|
|
153
152
|
/**
|
|
154
153
|
* Only validate once we interact with the datepicker
|
|
@@ -160,7 +159,7 @@ export default class AuroFormValidation {
|
|
|
160
159
|
let hasValue = elem.value && elem.value.length > 0;
|
|
161
160
|
|
|
162
161
|
// If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
|
|
163
|
-
if (this.auroInputElements
|
|
162
|
+
if (this.auroInputElements?.length === 2) {
|
|
164
163
|
if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
|
|
165
164
|
hasValue = false;
|
|
166
165
|
}
|
|
@@ -168,31 +167,27 @@ export default class AuroFormValidation {
|
|
|
168
167
|
|
|
169
168
|
if (!hasValue && elem.required) {
|
|
170
169
|
elem.validity = 'valueMissing';
|
|
171
|
-
elem.
|
|
170
|
+
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
172
171
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
173
172
|
this.validateType(elem);
|
|
174
173
|
this.validateAttributes(elem);
|
|
175
174
|
}
|
|
176
175
|
}
|
|
177
176
|
|
|
178
|
-
if (this.auroInputElements
|
|
177
|
+
if (this.auroInputElements?.length > 0) {
|
|
179
178
|
elem.validity = this.auroInputElements[0].validity;
|
|
180
|
-
elem.
|
|
179
|
+
elem.errorMessage = this.auroInputElements[0].errorMessage;
|
|
181
180
|
|
|
182
|
-
if (elem.validity === 'valid') {
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
|
|
186
|
-
}
|
|
181
|
+
if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
|
|
182
|
+
elem.validity = this.auroInputElements[1].validity;
|
|
183
|
+
elem.errorMessage = this.auroInputElements[1].errorMessage;
|
|
187
184
|
}
|
|
188
185
|
}
|
|
189
186
|
|
|
190
187
|
if (validationShouldRun || elem.hasAttribute('error')) {
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
elem.setCustomValidity = elem.ValidityMessageOverride;
|
|
195
|
-
}
|
|
188
|
+
// Use the validity message override if it is declared
|
|
189
|
+
if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
|
|
190
|
+
elem.errorMessage = elem.ValidityMessageOverride;
|
|
196
191
|
}
|
|
197
192
|
|
|
198
193
|
this.getErrorMessage(elem);
|
|
@@ -238,18 +233,18 @@ export default class AuroFormValidation {
|
|
|
238
233
|
if (elem.validity !== 'valid') {
|
|
239
234
|
if (elem.setCustomValidity) {
|
|
240
235
|
elem.errorMessage = elem.setCustomValidity;
|
|
241
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
236
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
|
|
242
237
|
const input = elem.renderRoot.querySelector('input');
|
|
243
238
|
|
|
244
239
|
if (input.validationMessage.length > 0) {
|
|
245
240
|
elem.errorMessage = input.validationMessage;
|
|
246
241
|
}
|
|
247
|
-
} else if (this.inputElements &&
|
|
242
|
+
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
248
243
|
const firstInput = this.inputElements[0];
|
|
249
244
|
|
|
250
245
|
if (firstInput.validationMessage.length > 0) {
|
|
251
246
|
elem.errorMessage = firstInput.validationMessage;
|
|
252
|
-
} else if (this.inputElements
|
|
247
|
+
} else if (this.inputElements?.length === 2) {
|
|
253
248
|
const secondInput = this.inputElements[1];
|
|
254
249
|
|
|
255
250
|
if (secondInput.validationMessage.length > 0) {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"hash":"0663fcbb1d711029","duration":642}
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"hash":"0a2b0a4df8a0443f","duration":5988}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"hash":"120c8e207aa1ba35","duration":19715}
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"hash":"17dd4bdef6550a07","duration":19307}
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"hash":"1de15d89eed2d760","duration":3404}
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"hash":"2990aaa7ebc5b967","duration":3755}
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"hash":"32c0b9995fb5f8dd","duration":20225}
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"hash":"47ba2b5ebdb579e9","duration":7164}
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"hash":"4f92cea2d8c63de2","duration":2007}
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"hash":"56cb35d4c7473a23","duration":20991}
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"hash":"5c16ce3cff5c9dff","duration":3164}
|
|
Binary file
|