@aurodesignsystem/auro-formkit 2.0.0-beta.2 → 2.0.0-beta.3
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/07ca42419b9f050c-meta.json +1 -1
- package/.turbo/cache/0cea4c1f34f3683b-meta.json +1 -1
- package/.turbo/cache/17259cf94d8f8925-meta.json +1 -1
- package/.turbo/cache/1ab37ce15d9be440-meta.json +1 -0
- package/.turbo/cache/1ab37ce15d9be440.tar.zst +0 -0
- 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/1de15d89eed2d760-meta.json +1 -1
- package/.turbo/cache/2110a4d14e0d11b2-meta.json +1 -0
- package/.turbo/cache/2110a4d14e0d11b2.tar.zst +0 -0
- package/.turbo/cache/257a7a26ea72dbc5-meta.json +1 -1
- package/.turbo/cache/2990aaa7ebc5b967-meta.json +1 -1
- package/.turbo/cache/2990aaa7ebc5b967.tar.zst +0 -0
- package/.turbo/cache/2fd056afdf4eb39d-meta.json +1 -0
- package/.turbo/cache/2fd056afdf4eb39d.tar.zst +0 -0
- package/.turbo/cache/3bf45120d0cc9bd8-meta.json +1 -1
- 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/4f92cea2d8c63de2-meta.json +1 -1
- package/.turbo/cache/5bf2d3f7ba5891e0-meta.json +1 -0
- package/.turbo/cache/5bf2d3f7ba5891e0.tar.zst +0 -0
- package/.turbo/cache/5c16ce3cff5c9dff-meta.json +1 -1
- 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/784c03fe9fd5ac05-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/80a13352066a9801-meta.json +1 -0
- package/.turbo/cache/80a13352066a9801.tar.zst +0 -0
- package/.turbo/cache/80b5d974184a01df-meta.json +1 -1
- package/.turbo/cache/87219c41a4ace9cd-meta.json +1 -1
- package/.turbo/cache/87219c41a4ace9cd.tar.zst +0 -0
- package/.turbo/cache/8954c6073396fadd-meta.json +1 -1
- package/.turbo/cache/8e79bd5c3a16a72e-meta.json +1 -0
- package/.turbo/cache/92daa6d7c389d548-meta.json +1 -1
- package/.turbo/cache/993dff2edb7b6766-meta.json +1 -1
- package/.turbo/cache/9a097d6576dadd64-meta.json +1 -1
- package/.turbo/cache/a63cbfecf0f78586-meta.json +1 -0
- package/.turbo/cache/{ce67b6522dd09e64.tar.zst → a63cbfecf0f78586.tar.zst} +0 -0
- package/.turbo/cache/a6a56bb802e1c20f-meta.json +1 -1
- package/.turbo/cache/a77bc920ea508bb8-meta.json +1 -1
- package/.turbo/cache/a77bc920ea508bb8.tar.zst +0 -0
- package/.turbo/cache/b2c66328fdd78093-meta.json +1 -0
- package/.turbo/cache/b2c66328fdd78093.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/d39e6ef95ebc4cc0-meta.json +1 -0
- package/.turbo/cache/d39e6ef95ebc4cc0.tar.zst +0 -0
- 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/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/f411e2deb0676959-meta.json +1 -0
- package/.turbo/cache/f411e2deb0676959.tar.zst +0 -0
- package/.turbo/cache/fa132b5b5f0e75f8-meta.json +1 -1
- package/.turbo/cache/fbbe2704bf9cb90b-meta.json +1 -1
- package/CHANGELOG.md +26 -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 +104 -116
- package/components/combobox/demo/index.min.js +104 -116
- 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 +103 -115
- 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 +96 -130
- package/components/datepicker/demo/index.min.js +96 -130
- 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 +96 -130
- 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/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 -83
- package/components/input/demo/api.min.js +52 -61
- package/components/input/demo/index.md +6 -6
- package/components/input/demo/index.min.js +52 -61
- package/components/input/dist/auro-input.d.ts.map +1 -1
- package/components/input/dist/base-input.d.ts +5 -12
- package/components/input/dist/base-input.d.ts.map +1 -1
- package/components/input/dist/index.js +52 -61
- 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 +22 -25
- 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 +3 -3
- package/components/select/demo/api.md +7 -11
- package/components/select/demo/api.min.js +33 -60
- package/components/select/demo/index.min.js +33 -56
- package/components/select/dist/auro-select.d.ts +2 -2
- package/components/select/dist/auro-select.d.ts.map +1 -1
- package/components/select/dist/index.js +32 -55
- package/components/select/src/auro-select.js +3 -21
- 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/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/56cb35d4c7473a23-meta.json +0 -1
- package/.turbo/cache/56cb35d4c7473a23.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/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/a49cc58242467fdc-meta.json +0 -1
- package/.turbo/cache/a49cc58242467fdc.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/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/ff58f630c9d69af4-meta.json +0 -1
- package/.turbo/cache/ff58f630c9d69af4.tar.zst +0 -0
- /package/.turbo/cache/{0a2b0a4df8a0443f.tar.zst → 8e79bd5c3a16a72e.tar.zst} +0 -0
|
@@ -32,10 +32,6 @@ function valueExample() {
|
|
|
32
32
|
document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => {
|
|
33
33
|
valueExample.value = 'flight course';
|
|
34
34
|
});
|
|
35
|
-
|
|
36
|
-
document.querySelector('#undefinedValueExampleBtn').addEventListener('click', () => {
|
|
37
|
-
valueExample.value = undefined;
|
|
38
|
-
});
|
|
39
35
|
}
|
|
40
36
|
|
|
41
37
|
function valueExtractionExample() {
|
|
@@ -253,20 +249,20 @@ class AuroFormValidation {
|
|
|
253
249
|
const pattern = new RegExp(`^${elem.pattern}$`, 'u');
|
|
254
250
|
|
|
255
251
|
if (!pattern.test(elem.value)) {
|
|
256
|
-
elem.validity = '
|
|
257
|
-
elem.
|
|
252
|
+
elem.validity = 'patternMismatch';
|
|
253
|
+
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
|
|
258
254
|
}
|
|
259
255
|
}
|
|
260
256
|
|
|
261
257
|
// Length > 0 is required to prevent the error message from showing when the input is empty
|
|
262
258
|
if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
|
|
263
259
|
elem.validity = 'tooShort';
|
|
264
|
-
elem.
|
|
260
|
+
elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
|
|
265
261
|
}
|
|
266
262
|
|
|
267
263
|
if (elem.value?.length > elem.maxLength) {
|
|
268
264
|
elem.validity = 'tooLong';
|
|
269
|
-
elem.
|
|
265
|
+
elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
|
|
270
266
|
}
|
|
271
267
|
}
|
|
272
268
|
|
|
@@ -282,33 +278,32 @@ class AuroFormValidation {
|
|
|
282
278
|
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
|
|
283
279
|
|
|
284
280
|
if (!elem.value.match(emailRegex)) {
|
|
285
|
-
elem.validity = '
|
|
286
|
-
elem.
|
|
281
|
+
elem.validity = 'patternMismatch';
|
|
282
|
+
elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
|
|
287
283
|
}
|
|
288
284
|
} else if (elem.type === 'credit-card') {
|
|
289
285
|
if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
|
|
290
286
|
elem.validity = 'tooShort';
|
|
291
|
-
elem.
|
|
287
|
+
elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
|
|
292
288
|
}
|
|
293
289
|
} else if (elem.type === 'number') {
|
|
294
290
|
if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
|
|
295
291
|
elem.validity = 'rangeOverflow';
|
|
296
|
-
elem.
|
|
292
|
+
elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
|
|
297
293
|
}
|
|
298
294
|
|
|
299
|
-
if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
|
|
295
|
+
if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
|
|
300
296
|
elem.validity = 'rangeUnderflow';
|
|
301
|
-
elem.
|
|
297
|
+
elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
|
|
302
298
|
}
|
|
303
|
-
|
|
304
299
|
} else if (elem.type === 'month-day-year' ||
|
|
305
300
|
elem.type === 'month-year' ||
|
|
306
301
|
elem.type === 'month-fullYear' ||
|
|
307
302
|
elem.type === 'year-month-day'
|
|
308
303
|
) {
|
|
309
|
-
if (elem.value
|
|
304
|
+
if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
|
|
310
305
|
elem.validity = 'tooShort';
|
|
311
|
-
elem.
|
|
306
|
+
elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
|
|
312
307
|
} else {
|
|
313
308
|
const valueDate = new Date(elem.value);
|
|
314
309
|
|
|
@@ -318,7 +313,7 @@ class AuroFormValidation {
|
|
|
318
313
|
|
|
319
314
|
if (valueDate > maxDate) {
|
|
320
315
|
elem.validity = 'rangeOverflow';
|
|
321
|
-
elem.
|
|
316
|
+
elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
|
|
322
317
|
}
|
|
323
318
|
}
|
|
324
319
|
|
|
@@ -328,7 +323,7 @@ class AuroFormValidation {
|
|
|
328
323
|
|
|
329
324
|
if (valueDate < minDate) {
|
|
330
325
|
elem.validity = 'rangeUnderflow';
|
|
331
|
-
elem.
|
|
326
|
+
elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
|
|
332
327
|
}
|
|
333
328
|
}
|
|
334
329
|
}
|
|
@@ -351,10 +346,10 @@ class AuroFormValidation {
|
|
|
351
346
|
|
|
352
347
|
if (elem.hasAttribute('error')) {
|
|
353
348
|
elem.validity = 'customError';
|
|
354
|
-
elem.
|
|
349
|
+
elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
|
|
355
350
|
} else if (validationShouldRun) {
|
|
356
351
|
elem.validity = 'valid';
|
|
357
|
-
elem.
|
|
352
|
+
elem.errorMessage = '';
|
|
358
353
|
|
|
359
354
|
/**
|
|
360
355
|
* Only validate once we interact with the datepicker
|
|
@@ -366,7 +361,7 @@ class AuroFormValidation {
|
|
|
366
361
|
let hasValue = elem.value && elem.value.length > 0;
|
|
367
362
|
|
|
368
363
|
// If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
|
|
369
|
-
if (this.auroInputElements
|
|
364
|
+
if (this.auroInputElements?.length === 2) {
|
|
370
365
|
if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
|
|
371
366
|
hasValue = false;
|
|
372
367
|
}
|
|
@@ -374,31 +369,27 @@ class AuroFormValidation {
|
|
|
374
369
|
|
|
375
370
|
if (!hasValue && elem.required) {
|
|
376
371
|
elem.validity = 'valueMissing';
|
|
377
|
-
elem.
|
|
372
|
+
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
378
373
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
379
374
|
this.validateType(elem);
|
|
380
375
|
this.validateAttributes(elem);
|
|
381
376
|
}
|
|
382
377
|
}
|
|
383
378
|
|
|
384
|
-
if (this.auroInputElements
|
|
379
|
+
if (this.auroInputElements?.length > 0) {
|
|
385
380
|
elem.validity = this.auroInputElements[0].validity;
|
|
386
|
-
elem.
|
|
381
|
+
elem.errorMessage = this.auroInputElements[0].errorMessage;
|
|
387
382
|
|
|
388
|
-
if (elem.validity === 'valid') {
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
|
|
392
|
-
}
|
|
383
|
+
if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
|
|
384
|
+
elem.validity = this.auroInputElements[1].validity;
|
|
385
|
+
elem.errorMessage = this.auroInputElements[1].errorMessage;
|
|
393
386
|
}
|
|
394
387
|
}
|
|
395
388
|
|
|
396
389
|
if (validationShouldRun || elem.hasAttribute('error')) {
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
elem.setCustomValidity = elem.ValidityMessageOverride;
|
|
401
|
-
}
|
|
390
|
+
// Use the validity message override if it is declared
|
|
391
|
+
if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
|
|
392
|
+
elem.errorMessage = elem.ValidityMessageOverride;
|
|
402
393
|
}
|
|
403
394
|
|
|
404
395
|
this.getErrorMessage(elem);
|
|
@@ -444,18 +435,18 @@ class AuroFormValidation {
|
|
|
444
435
|
if (elem.validity !== 'valid') {
|
|
445
436
|
if (elem.setCustomValidity) {
|
|
446
437
|
elem.errorMessage = elem.setCustomValidity;
|
|
447
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
438
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
|
|
448
439
|
const input = elem.renderRoot.querySelector('input');
|
|
449
440
|
|
|
450
441
|
if (input.validationMessage.length > 0) {
|
|
451
442
|
elem.errorMessage = input.validationMessage;
|
|
452
443
|
}
|
|
453
|
-
} else if (this.inputElements &&
|
|
444
|
+
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
454
445
|
const firstInput = this.inputElements[0];
|
|
455
446
|
|
|
456
447
|
if (firstInput.validationMessage.length > 0) {
|
|
457
448
|
elem.errorMessage = firstInput.validationMessage;
|
|
458
|
-
} else if (this.inputElements
|
|
449
|
+
} else if (this.inputElements?.length === 2) {
|
|
459
450
|
const secondInput = this.inputElements[1];
|
|
460
451
|
|
|
461
452
|
if (secondInput.validationMessage.length > 0) {
|
|
@@ -3370,7 +3361,7 @@ var tokensCss$2 = i$b`:host{--ds-auro-select-placeholder-text-color: var(--ds-co
|
|
|
3370
3361
|
* @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
|
|
3371
3362
|
* @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
|
|
3372
3363
|
* @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
|
|
3373
|
-
* @attr {String} error - When defined, sets persistent validity to `customError` and sets
|
|
3364
|
+
* @attr {String} error - When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
|
|
3374
3365
|
* @attr {Boolean} noValidate - If set, disables auto-validation on blur.
|
|
3375
3366
|
* @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
|
|
3376
3367
|
* @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
|
|
@@ -3618,26 +3609,8 @@ class AuroSelect extends r$4 {
|
|
|
3618
3609
|
* with `auro-select.value`.
|
|
3619
3610
|
*/
|
|
3620
3611
|
this.menu.addEventListener('auroMenu-selectValueFailure', () => {
|
|
3621
|
-
this.
|
|
3622
|
-
this.optionSelected = this.menu.optionSelected;
|
|
3623
|
-
|
|
3624
|
-
this.validity = 'badInput';
|
|
3625
|
-
|
|
3626
|
-
// Capitalizes the first letter of each word in this.value string
|
|
3627
|
-
const valueStr = this.value.replace(/(^\w{1})|(\s+\w{1})/gu, (letter) => letter.toUpperCase());
|
|
3628
|
-
|
|
3629
|
-
// Pass the new string to the trigger content
|
|
3630
|
-
this.updateDisplayedValue(valueStr);
|
|
3631
|
-
});
|
|
3632
|
-
|
|
3633
|
-
this.menu.addEventListener('auroMenu-selectValueReset', () => {
|
|
3634
|
-
// set the trigger content back to the placeholder
|
|
3612
|
+
this.reset();
|
|
3635
3613
|
this.updateDisplayedValue(this.placeholder);
|
|
3636
|
-
|
|
3637
|
-
this.optionSelected = undefined;
|
|
3638
|
-
this.value = undefined;
|
|
3639
|
-
|
|
3640
|
-
this.validation.validate(this);
|
|
3641
3614
|
});
|
|
3642
3615
|
}
|
|
3643
3616
|
|
|
@@ -3906,7 +3879,7 @@ class AuroSelect extends r$4 {
|
|
|
3906
3879
|
</p>`
|
|
3907
3880
|
: u$3`
|
|
3908
3881
|
<p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
3909
|
-
${this.
|
|
3882
|
+
${this.errorMessage}
|
|
3910
3883
|
</p>`
|
|
3911
3884
|
}
|
|
3912
3885
|
</span>
|
|
@@ -3940,8 +3913,8 @@ var tokensCss$1 = i$b`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
|
|
|
3940
3913
|
* @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
|
|
3941
3914
|
* @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
|
|
3942
3915
|
* @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
|
|
3943
|
-
* @event auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
3944
3916
|
* @event auroMenu-selectValueReset - Notifies that the component value has been reset.
|
|
3917
|
+
* @event auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
3945
3918
|
* @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
|
|
3946
3919
|
* @slot loadingText - Text to show while loading attribute is set
|
|
3947
3920
|
* @slot loadingIcon - Icon to show while loading attribute is set
|
|
@@ -145,20 +145,20 @@ class AuroFormValidation {
|
|
|
145
145
|
const pattern = new RegExp(`^${elem.pattern}$`, 'u');
|
|
146
146
|
|
|
147
147
|
if (!pattern.test(elem.value)) {
|
|
148
|
-
elem.validity = '
|
|
149
|
-
elem.
|
|
148
|
+
elem.validity = 'patternMismatch';
|
|
149
|
+
elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
|
|
150
150
|
}
|
|
151
151
|
}
|
|
152
152
|
|
|
153
153
|
// Length > 0 is required to prevent the error message from showing when the input is empty
|
|
154
154
|
if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
|
|
155
155
|
elem.validity = 'tooShort';
|
|
156
|
-
elem.
|
|
156
|
+
elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
|
|
157
157
|
}
|
|
158
158
|
|
|
159
159
|
if (elem.value?.length > elem.maxLength) {
|
|
160
160
|
elem.validity = 'tooLong';
|
|
161
|
-
elem.
|
|
161
|
+
elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
|
|
162
162
|
}
|
|
163
163
|
}
|
|
164
164
|
|
|
@@ -174,33 +174,32 @@ class AuroFormValidation {
|
|
|
174
174
|
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
|
|
175
175
|
|
|
176
176
|
if (!elem.value.match(emailRegex)) {
|
|
177
|
-
elem.validity = '
|
|
178
|
-
elem.
|
|
177
|
+
elem.validity = 'patternMismatch';
|
|
178
|
+
elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
|
|
179
179
|
}
|
|
180
180
|
} else if (elem.type === 'credit-card') {
|
|
181
181
|
if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
|
|
182
182
|
elem.validity = 'tooShort';
|
|
183
|
-
elem.
|
|
183
|
+
elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
|
|
184
184
|
}
|
|
185
185
|
} else if (elem.type === 'number') {
|
|
186
186
|
if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
|
|
187
187
|
elem.validity = 'rangeOverflow';
|
|
188
|
-
elem.
|
|
188
|
+
elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
-
if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
|
|
191
|
+
if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
|
|
192
192
|
elem.validity = 'rangeUnderflow';
|
|
193
|
-
elem.
|
|
193
|
+
elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
|
|
194
194
|
}
|
|
195
|
-
|
|
196
195
|
} else if (elem.type === 'month-day-year' ||
|
|
197
196
|
elem.type === 'month-year' ||
|
|
198
197
|
elem.type === 'month-fullYear' ||
|
|
199
198
|
elem.type === 'year-month-day'
|
|
200
199
|
) {
|
|
201
|
-
if (elem.value
|
|
200
|
+
if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
|
|
202
201
|
elem.validity = 'tooShort';
|
|
203
|
-
elem.
|
|
202
|
+
elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
|
|
204
203
|
} else {
|
|
205
204
|
const valueDate = new Date(elem.value);
|
|
206
205
|
|
|
@@ -210,7 +209,7 @@ class AuroFormValidation {
|
|
|
210
209
|
|
|
211
210
|
if (valueDate > maxDate) {
|
|
212
211
|
elem.validity = 'rangeOverflow';
|
|
213
|
-
elem.
|
|
212
|
+
elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
|
|
214
213
|
}
|
|
215
214
|
}
|
|
216
215
|
|
|
@@ -220,7 +219,7 @@ class AuroFormValidation {
|
|
|
220
219
|
|
|
221
220
|
if (valueDate < minDate) {
|
|
222
221
|
elem.validity = 'rangeUnderflow';
|
|
223
|
-
elem.
|
|
222
|
+
elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
|
|
224
223
|
}
|
|
225
224
|
}
|
|
226
225
|
}
|
|
@@ -243,10 +242,10 @@ class AuroFormValidation {
|
|
|
243
242
|
|
|
244
243
|
if (elem.hasAttribute('error')) {
|
|
245
244
|
elem.validity = 'customError';
|
|
246
|
-
elem.
|
|
245
|
+
elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
|
|
247
246
|
} else if (validationShouldRun) {
|
|
248
247
|
elem.validity = 'valid';
|
|
249
|
-
elem.
|
|
248
|
+
elem.errorMessage = '';
|
|
250
249
|
|
|
251
250
|
/**
|
|
252
251
|
* Only validate once we interact with the datepicker
|
|
@@ -258,7 +257,7 @@ class AuroFormValidation {
|
|
|
258
257
|
let hasValue = elem.value && elem.value.length > 0;
|
|
259
258
|
|
|
260
259
|
// If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
|
|
261
|
-
if (this.auroInputElements
|
|
260
|
+
if (this.auroInputElements?.length === 2) {
|
|
262
261
|
if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
|
|
263
262
|
hasValue = false;
|
|
264
263
|
}
|
|
@@ -266,31 +265,27 @@ class AuroFormValidation {
|
|
|
266
265
|
|
|
267
266
|
if (!hasValue && elem.required) {
|
|
268
267
|
elem.validity = 'valueMissing';
|
|
269
|
-
elem.
|
|
268
|
+
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
270
269
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
271
270
|
this.validateType(elem);
|
|
272
271
|
this.validateAttributes(elem);
|
|
273
272
|
}
|
|
274
273
|
}
|
|
275
274
|
|
|
276
|
-
if (this.auroInputElements
|
|
275
|
+
if (this.auroInputElements?.length > 0) {
|
|
277
276
|
elem.validity = this.auroInputElements[0].validity;
|
|
278
|
-
elem.
|
|
277
|
+
elem.errorMessage = this.auroInputElements[0].errorMessage;
|
|
279
278
|
|
|
280
|
-
if (elem.validity === 'valid') {
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
|
|
284
|
-
}
|
|
279
|
+
if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
|
|
280
|
+
elem.validity = this.auroInputElements[1].validity;
|
|
281
|
+
elem.errorMessage = this.auroInputElements[1].errorMessage;
|
|
285
282
|
}
|
|
286
283
|
}
|
|
287
284
|
|
|
288
285
|
if (validationShouldRun || elem.hasAttribute('error')) {
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
elem.setCustomValidity = elem.ValidityMessageOverride;
|
|
293
|
-
}
|
|
286
|
+
// Use the validity message override if it is declared
|
|
287
|
+
if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
|
|
288
|
+
elem.errorMessage = elem.ValidityMessageOverride;
|
|
294
289
|
}
|
|
295
290
|
|
|
296
291
|
this.getErrorMessage(elem);
|
|
@@ -336,18 +331,18 @@ class AuroFormValidation {
|
|
|
336
331
|
if (elem.validity !== 'valid') {
|
|
337
332
|
if (elem.setCustomValidity) {
|
|
338
333
|
elem.errorMessage = elem.setCustomValidity;
|
|
339
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
334
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
|
|
340
335
|
const input = elem.renderRoot.querySelector('input');
|
|
341
336
|
|
|
342
337
|
if (input.validationMessage.length > 0) {
|
|
343
338
|
elem.errorMessage = input.validationMessage;
|
|
344
339
|
}
|
|
345
|
-
} else if (this.inputElements &&
|
|
340
|
+
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
346
341
|
const firstInput = this.inputElements[0];
|
|
347
342
|
|
|
348
343
|
if (firstInput.validationMessage.length > 0) {
|
|
349
344
|
elem.errorMessage = firstInput.validationMessage;
|
|
350
|
-
} else if (this.inputElements
|
|
345
|
+
} else if (this.inputElements?.length === 2) {
|
|
351
346
|
const secondInput = this.inputElements[1];
|
|
352
347
|
|
|
353
348
|
if (secondInput.validationMessage.length > 0) {
|
|
@@ -3262,7 +3257,7 @@ var tokensCss$2 = i$b`:host{--ds-auro-select-placeholder-text-color: var(--ds-co
|
|
|
3262
3257
|
* @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
|
|
3263
3258
|
* @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
|
|
3264
3259
|
* @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
|
|
3265
|
-
* @attr {String} error - When defined, sets persistent validity to `customError` and sets
|
|
3260
|
+
* @attr {String} error - When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
|
|
3266
3261
|
* @attr {Boolean} noValidate - If set, disables auto-validation on blur.
|
|
3267
3262
|
* @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
|
|
3268
3263
|
* @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
|
|
@@ -3510,26 +3505,8 @@ class AuroSelect extends r$4 {
|
|
|
3510
3505
|
* with `auro-select.value`.
|
|
3511
3506
|
*/
|
|
3512
3507
|
this.menu.addEventListener('auroMenu-selectValueFailure', () => {
|
|
3513
|
-
this.
|
|
3514
|
-
this.optionSelected = this.menu.optionSelected;
|
|
3515
|
-
|
|
3516
|
-
this.validity = 'badInput';
|
|
3517
|
-
|
|
3518
|
-
// Capitalizes the first letter of each word in this.value string
|
|
3519
|
-
const valueStr = this.value.replace(/(^\w{1})|(\s+\w{1})/gu, (letter) => letter.toUpperCase());
|
|
3520
|
-
|
|
3521
|
-
// Pass the new string to the trigger content
|
|
3522
|
-
this.updateDisplayedValue(valueStr);
|
|
3523
|
-
});
|
|
3524
|
-
|
|
3525
|
-
this.menu.addEventListener('auroMenu-selectValueReset', () => {
|
|
3526
|
-
// set the trigger content back to the placeholder
|
|
3508
|
+
this.reset();
|
|
3527
3509
|
this.updateDisplayedValue(this.placeholder);
|
|
3528
|
-
|
|
3529
|
-
this.optionSelected = undefined;
|
|
3530
|
-
this.value = undefined;
|
|
3531
|
-
|
|
3532
|
-
this.validation.validate(this);
|
|
3533
3510
|
});
|
|
3534
3511
|
}
|
|
3535
3512
|
|
|
@@ -3798,7 +3775,7 @@ class AuroSelect extends r$4 {
|
|
|
3798
3775
|
</p>`
|
|
3799
3776
|
: u$3`
|
|
3800
3777
|
<p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
3801
|
-
${this.
|
|
3778
|
+
${this.errorMessage}
|
|
3802
3779
|
</p>`
|
|
3803
3780
|
}
|
|
3804
3781
|
</span>
|
|
@@ -3832,8 +3809,8 @@ var tokensCss$1 = i$b`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
|
|
|
3832
3809
|
* @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
|
|
3833
3810
|
* @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
|
|
3834
3811
|
* @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
|
|
3835
|
-
* @event auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
3836
3812
|
* @event auroMenu-selectValueReset - Notifies that the component value has been reset.
|
|
3813
|
+
* @event auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
3837
3814
|
* @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
|
|
3838
3815
|
* @slot loadingText - Text to show while loading attribute is set
|
|
3839
3816
|
* @slot loadingIcon - Icon to show while loading attribute is set
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
|
|
6
6
|
* @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
|
|
7
7
|
* @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
|
|
8
|
-
* @attr {String} error - When defined, sets persistent validity to `customError` and sets
|
|
8
|
+
* @attr {String} error - When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
|
|
9
9
|
* @attr {Boolean} noValidate - If set, disables auto-validation on blur.
|
|
10
10
|
* @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
|
|
11
11
|
* @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
|
|
@@ -94,7 +94,7 @@ export class AuroSelect extends LitElement {
|
|
|
94
94
|
static register(name?: string): void;
|
|
95
95
|
placeholder: string;
|
|
96
96
|
optionSelected: any;
|
|
97
|
-
validity:
|
|
97
|
+
validity: any;
|
|
98
98
|
/**
|
|
99
99
|
* @private
|
|
100
100
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"auro-select.d.ts","sourceRoot":"","sources":["../src/auro-select.js"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH;IAyDE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAgDI;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IAED,+CAMC;IAmBD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IApJC,oBAAyC;IACzC,oBAA+B;IAC/B,
|
|
1
|
+
{"version":3,"file":"auro-select.d.ts","sourceRoot":"","sources":["../src/auro-select.js"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH;IAyDE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAgDI;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IAED,+CAMC;IAmBD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IApJC,oBAAyC;IACzC,oBAA+B;IAC/B,cAAyB;IAMzB;;OAEG;IACH,iBAEuC;IAEvC;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAOjD;;OAEG;IACH,oBAAyF;IAEzF;;OAEG;IACH,6BAAiC;IAGnC;;;OAGG;IACH,wBAGC;IAFC,2BAAiB;IACjB,kBAAwB;IA0E1B;;;;OAIG;IACH,0BAUC;IATC,cAA4E;IAC5E,iBAA8D;IAsBhE;;;;;OAKG;IACH,6BAyBC;IAED;;;;OAIG;IACH,sBAyCC;IAxCC,cAAwD;IAoBtD,WAAsC;IAsB1C;;;;OAIG;IACH,wBA4CC;IAED;;;;;;;;;;;;;OAaG;IACH,gCAUC;IAED;;;;OAIG;IACH,sBAYC;IAED;;;;OAIG;IACH,6BAMC;IA4BD,qBAYC;IAED,sCAqBC;IAED;;;OAGG;IACH,SAFa,IAAI,CAIhB;IAED;;;;OAIG;IACH,mBAkCC;IAMD,4CAgDC;CACF;2BAtiB0B,KAAK"}
|