@aurodesignsystem/auro-formkit 5.7.0 → 5.8.1
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/CHANGELOG.md +15 -26
- package/components/checkbox/demo/api.min.js +68 -4
- package/components/checkbox/demo/index.min.js +68 -4
- package/components/checkbox/dist/index.js +68 -4
- package/components/checkbox/dist/registered.js +68 -4
- package/components/combobox/demo/api.md +230 -38
- package/components/combobox/demo/api.min.js +207 -52
- package/components/combobox/demo/index.md +150 -1
- package/components/combobox/demo/index.min.js +207 -52
- package/components/combobox/dist/auro-combobox.d.ts +18 -1
- package/components/combobox/dist/index.js +201 -51
- package/components/combobox/dist/registered.js +201 -51
- package/components/counter/demo/api.min.js +80 -22
- package/components/counter/demo/index.min.js +80 -22
- package/components/counter/dist/buttonVersion.d.ts +2 -0
- package/components/counter/dist/index.js +80 -22
- package/components/counter/dist/registered.js +80 -22
- package/components/datepicker/demo/api.md +40 -0
- package/components/datepicker/demo/api.min.js +218 -55
- package/components/datepicker/demo/index.min.js +218 -55
- package/components/datepicker/dist/auro-calendar-cell.d.ts +6 -0
- package/components/datepicker/dist/auro-datepicker.d.ts +8 -0
- package/components/datepicker/dist/buttonVersion.d.ts +1 -1
- package/components/datepicker/dist/iconVersion.d.ts +1 -1
- package/components/datepicker/dist/index.js +218 -55
- package/components/datepicker/dist/registered.js +218 -55
- package/components/dropdown/demo/api.min.js +6 -8
- package/components/dropdown/demo/index.min.js +6 -8
- package/components/dropdown/dist/iconVersion.d.ts +1 -1
- package/components/dropdown/dist/index.js +6 -8
- package/components/dropdown/dist/registered.js +6 -8
- package/components/input/demo/api.min.js +99 -27
- package/components/input/demo/index.min.js +99 -27
- package/components/input/dist/base-input.d.ts +19 -2
- package/components/input/dist/buttonVersion.d.ts +1 -1
- package/components/input/dist/index.js +99 -27
- package/components/input/dist/registered.js +99 -27
- package/components/menu/demo/api.min.js +6 -1
- package/components/menu/demo/index.min.js +6 -1
- package/components/menu/dist/index.js +6 -1
- package/components/menu/dist/registered.js +6 -1
- package/components/radio/demo/api.min.js +100 -8
- package/components/radio/demo/index.min.js +100 -8
- package/components/radio/dist/auro-radio-group.d.ts +14 -0
- package/components/radio/dist/index.js +100 -8
- package/components/radio/dist/registered.js +100 -8
- package/components/select/demo/api.min.js +84 -20
- package/components/select/demo/index.min.js +84 -20
- package/components/select/dist/index.js +78 -19
- package/components/select/dist/registered.js +78 -19
- package/package.json +5 -2
- package/components/checkbox/dist/helptextVersion.d.ts +0 -2
- package/components/combobox/dist/bibtemplateVersion.d.ts +0 -2
- package/components/combobox/dist/dropdownVersion.d.ts +0 -2
- package/components/combobox/dist/inputVersion.d.ts +0 -2
- package/components/counter/dist/bibtemplateVersion.d.ts +0 -2
- package/components/counter/dist/dropdownVersion.d.ts +0 -2
- package/components/counter/dist/helptextVersion.d.ts +0 -2
- package/components/datepicker/dist/bibtemplateVersion.d.ts +0 -2
- package/components/datepicker/dist/dropdownVersion.d.ts +0 -2
- package/components/datepicker/dist/inputVersion.d.ts +0 -2
- package/components/dropdown/dist/dropdownVersion.d.ts +0 -2
- package/components/dropdown/dist/helptextVersion.d.ts +0 -2
- package/components/input/dist/helptextVersion.d.ts +0 -2
- package/components/menu/dist/dropdownVersion.d.ts +0 -2
- package/components/radio/dist/helptextVersion.d.ts +0 -2
- package/components/select/dist/bibtemplateVersion.d.ts +0 -2
- package/components/select/dist/dropdownVersion.d.ts +0 -2
- package/components/select/dist/helptextVersion.d.ts +0 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,33 +1,22 @@
|
|
|
1
|
-
|
|
1
|
+
## [5.8.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.8.0...v5.8.1) (2025-11-11)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
* make
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
* add `appearance` deprecate `ondark` on radio [#1154](https://github.com/AlaskaAirlines/auro-formkit/issues/1154) ([b8279ec](https://github.com/AlaskaAirlines/auro-formkit/commit/b8279ec6ac5093faccdbc66dbd7e7ccba98583b2))
|
|
21
|
-
* add `appearance` deprecate `ondark` on select [#1152](https://github.com/AlaskaAirlines/auro-formkit/issues/1152) ([e7f6938](https://github.com/AlaskaAirlines/auro-formkit/commit/e7f69388efb0228e9f00abd91789ea4a5d1e0e88))
|
|
22
|
-
* add slots for custom aria-labels in counter [#1163](https://github.com/AlaskaAirlines/auro-formkit/issues/1163) ([8d9b313](https://github.com/AlaskaAirlines/auro-formkit/commit/8d9b313a6dea83bb2519006c134d87533466b9a1))
|
|
23
|
-
* add slots for custom aria-labels in datepicker [#1164](https://github.com/AlaskaAirlines/auro-formkit/issues/1164) ([4059bec](https://github.com/AlaskaAirlines/auro-formkit/commit/4059bec0dc0ce13fbd22c70a37575e3004e405a1))
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
### Performance Improvements
|
|
27
|
-
|
|
28
|
-
* update `auro-button` and `auro-icon` ([c035d79](https://github.com/AlaskaAirlines/auro-formkit/commit/c035d79bd499e384442f756ac089b25935080f03))
|
|
29
|
-
* update auro-button import paths ([7dd3b66](https://github.com/AlaskaAirlines/auro-formkit/commit/7dd3b6603cf5e3f9385ee2a81a5833085cea6dcc))
|
|
30
|
-
* update to latest dependencies ([b62f1bb](https://github.com/AlaskaAirlines/auro-formkit/commit/b62f1bbe653944ed0187aa4fe234d4896cbe6eb9))
|
|
6
|
+
* apply active, focust-within and hover just to not disabled elements in dropdown ([0eb4e27](https://github.com/AlaskaAirlines/auro-formkit/commit/0eb4e27366de5a79e16836864b78026fde8696ed))
|
|
7
|
+
* make no match option appear when no valid options [#1197](https://github.com/AlaskaAirlines/auro-formkit/issues/1197) ([b5310e6](https://github.com/AlaskaAirlines/auro-formkit/commit/b5310e6f8518d8c28e9eb1a89f729698d0564b7f))
|
|
8
|
+
* properly set value on custom registered select [#1216](https://github.com/AlaskaAirlines/auro-formkit/issues/1216) ([d243a1e](https://github.com/AlaskaAirlines/auro-formkit/commit/d243a1e72560f9a5bed1bd2cb4126d10a840227c))
|
|
9
|
+
* refactor dependency versioning mechanism [#1221](https://github.com/AlaskaAirlines/auro-formkit/issues/1221) ([3d136f3](https://github.com/AlaskaAirlines/auro-formkit/commit/3d136f34cd057bbc81b1c75c4854d3b5ad2187c4))
|
|
10
|
+
* remove changes to combobx, since its behavior is being affected by dropdown ([40cae72](https://github.com/AlaskaAirlines/auro-formkit/commit/40cae720838ef5b62b0ab1dfd7e83c8f048ac38b))
|
|
11
|
+
* remove hover behavior on disabled auro-dropdown [#1190](https://github.com/AlaskaAirlines/auro-formkit/issues/1190) ([15cbdb6](https://github.com/AlaskaAirlines/auro-formkit/commit/15cbdb65dbb0901f50ba04f896e97c195a833787))
|
|
12
|
+
* remove hover behavior on disabled combobox elements [#1172](https://github.com/AlaskaAirlines/auro-formkit/issues/1172) ([5985b5e](https://github.com/AlaskaAirlines/auro-formkit/commit/5985b5e0525e2f21e9993497ccb505553eb64aa2))
|
|
13
|
+
* remove hover behavior on disabled input elements [#1182](https://github.com/AlaskaAirlines/auro-formkit/issues/1182) ([87c5755](https://github.com/AlaskaAirlines/auro-formkit/commit/87c5755df172be4fd3b5ad457fb82a68358d1970))
|
|
14
|
+
* remove hover behavior on disabled radio elements [#1171](https://github.com/AlaskaAirlines/auro-formkit/issues/1171) ([ab83597](https://github.com/AlaskaAirlines/auro-formkit/commit/ab835975888e0f9d84512ce7cde532d7c4eda936))
|
|
15
|
+
* reorder task dependencies in turbo.json for consistent build order ([370d452](https://github.com/AlaskaAirlines/auro-formkit/commit/370d4525bcad94dabf318939aed410c7b48b417f))
|
|
16
|
+
* update `placeholderStr` when `placeholder` attr gets changed [#1214](https://github.com/AlaskaAirlines/auro-formkit/issues/1214) ([b375d3d](https://github.com/AlaskaAirlines/auro-formkit/commit/b375d3d813d34415ef8186e6a8f32d522a4703dc))
|
|
17
|
+
* update task dependencies in turbo.json for improved build order ([0893e60](https://github.com/AlaskaAirlines/auro-formkit/commit/0893e6091af39919c520f6a12933bbb742b24642))
|
|
18
|
+
* update task dependencies in turbo.json for improved build order ([9ad4535](https://github.com/AlaskaAirlines/auro-formkit/commit/9ad4535b4b204051d25e2fae2cff293f95f562d7))
|
|
19
|
+
* update version correctly for combobox helptext ([f356a84](https://github.com/AlaskaAirlines/auro-formkit/commit/f356a84fbd68f54e22d546b07b1260897f3e4ea5))
|
|
31
20
|
|
|
32
21
|
### Changelog
|
|
33
22
|
|
|
@@ -969,6 +969,52 @@ class AuroFormValidation {
|
|
|
969
969
|
message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
|
|
970
970
|
}
|
|
971
971
|
]
|
|
972
|
+
},
|
|
973
|
+
combobox: {
|
|
974
|
+
filter: [
|
|
975
|
+
{
|
|
976
|
+
check: (e) => {
|
|
977
|
+
|
|
978
|
+
// Guard Clause: If the behavior is not 'filter', skip this validation
|
|
979
|
+
if (e.behavior !== 'filter') return false;
|
|
980
|
+
|
|
981
|
+
// Get the current input value
|
|
982
|
+
const currentInputValue = e.input.value;
|
|
983
|
+
|
|
984
|
+
// Skip validation if the input has no value
|
|
985
|
+
if (!currentInputValue) return false;
|
|
986
|
+
|
|
987
|
+
/**
|
|
988
|
+
* Let's check if the option selected and combobox value match.
|
|
989
|
+
*/
|
|
990
|
+
|
|
991
|
+
// Guard Clause: If there is no option selected fail the validation
|
|
992
|
+
if (!e.optionSelected) return true;
|
|
993
|
+
|
|
994
|
+
// Guard Clause: If there is no value fail the validation
|
|
995
|
+
if (!e.value) return true;
|
|
996
|
+
|
|
997
|
+
// Guard Clause: If the selected option's value doesn't match the input value fail the validation
|
|
998
|
+
if (e.optionSelected.value !== e.value) return true;
|
|
999
|
+
|
|
1000
|
+
/**
|
|
1001
|
+
* Now let's make sure the user hasn't change the value in the input after selecting an option.
|
|
1002
|
+
* This is to make sure there's no user confusion if they select an option but then change the value to something else.
|
|
1003
|
+
*/
|
|
1004
|
+
|
|
1005
|
+
// Guard Clause: If the current input value doesn't match the option selected value fail the validation
|
|
1006
|
+
if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
|
|
1007
|
+
|
|
1008
|
+
// Guard Clause: If the current input value doesn't match the combobox value fail the validation
|
|
1009
|
+
if (currentInputValue && currentInputValue !== e.value) return true;
|
|
1010
|
+
|
|
1011
|
+
// If all the checks passed the validation passes
|
|
1012
|
+
return false;
|
|
1013
|
+
},
|
|
1014
|
+
validity: 'valueMissing',
|
|
1015
|
+
message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
|
|
1016
|
+
}
|
|
1017
|
+
]
|
|
972
1018
|
}
|
|
973
1019
|
};
|
|
974
1020
|
|
|
@@ -977,6 +1023,8 @@ class AuroFormValidation {
|
|
|
977
1023
|
elementType = 'input';
|
|
978
1024
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
979
1025
|
elementType = 'counter';
|
|
1026
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
1027
|
+
elementType = 'combobox';
|
|
980
1028
|
}
|
|
981
1029
|
|
|
982
1030
|
if (elementType) {
|
|
@@ -1163,6 +1211,15 @@ class AuroFormValidation {
|
|
|
1163
1211
|
}
|
|
1164
1212
|
}
|
|
1165
1213
|
|
|
1214
|
+
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
1215
|
+
|
|
1216
|
+
if (isCombobox) {
|
|
1217
|
+
|
|
1218
|
+
if (!elem.persistInput || elem.behavior === "filter") {
|
|
1219
|
+
hasValue = elem.input.value?.length > 0;
|
|
1220
|
+
}
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1166
1223
|
if (!hasValue && elem.required && elem.touched) {
|
|
1167
1224
|
elem.validity = 'valueMissing';
|
|
1168
1225
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
@@ -1171,6 +1228,11 @@ class AuroFormValidation {
|
|
|
1171
1228
|
this.validateElementAttributes(elem);
|
|
1172
1229
|
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
1173
1230
|
this.validateElementAttributes(elem);
|
|
1231
|
+
} else if (isCombobox) {
|
|
1232
|
+
this.validateElementAttributes(elem);
|
|
1233
|
+
|
|
1234
|
+
// Don't run extra validation for cases where the combobox is not being used as a filter
|
|
1235
|
+
validationShouldRun = elem.behavior !== 'filter';
|
|
1174
1236
|
}
|
|
1175
1237
|
}
|
|
1176
1238
|
|
|
@@ -1178,8 +1240,8 @@ class AuroFormValidation {
|
|
|
1178
1240
|
|
|
1179
1241
|
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
1180
1242
|
|
|
1181
|
-
// Don't reset combobox validity if
|
|
1182
|
-
if (!isCombobox || isCombobox && !elem.
|
|
1243
|
+
// Don't reset combobox validity if persistInput is set since we can't use the input value to validate
|
|
1244
|
+
if (!isCombobox || isCombobox && !elem.persistInput) {
|
|
1183
1245
|
|
|
1184
1246
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
1185
1247
|
this.auroInputElements.forEach(input => input.validate());
|
|
@@ -1252,6 +1314,8 @@ class AuroFormValidation {
|
|
|
1252
1314
|
if (input.validationMessage.length > 0) {
|
|
1253
1315
|
elem.errorMessage = input.validationMessage;
|
|
1254
1316
|
}
|
|
1317
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
|
|
1318
|
+
elem.errorMessage = elem.input?.inputElement?.validationMessage;
|
|
1255
1319
|
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
1256
1320
|
const firstInput = this.inputElements[0];
|
|
1257
1321
|
|
|
@@ -1543,7 +1607,7 @@ class AuroHelpText extends i$2 {
|
|
|
1543
1607
|
}
|
|
1544
1608
|
}
|
|
1545
1609
|
|
|
1546
|
-
var
|
|
1610
|
+
var formkitVersion = '202511110110';
|
|
1547
1611
|
|
|
1548
1612
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1549
1613
|
// See LICENSE in the project root for license information.
|
|
@@ -1610,7 +1674,7 @@ class AuroCheckboxGroup extends i$2 {
|
|
|
1610
1674
|
/**
|
|
1611
1675
|
* @private
|
|
1612
1676
|
*/
|
|
1613
|
-
this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext',
|
|
1677
|
+
this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
|
|
1614
1678
|
}
|
|
1615
1679
|
|
|
1616
1680
|
static get styles() {
|
|
@@ -961,6 +961,52 @@ class AuroFormValidation {
|
|
|
961
961
|
message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
|
|
962
962
|
}
|
|
963
963
|
]
|
|
964
|
+
},
|
|
965
|
+
combobox: {
|
|
966
|
+
filter: [
|
|
967
|
+
{
|
|
968
|
+
check: (e) => {
|
|
969
|
+
|
|
970
|
+
// Guard Clause: If the behavior is not 'filter', skip this validation
|
|
971
|
+
if (e.behavior !== 'filter') return false;
|
|
972
|
+
|
|
973
|
+
// Get the current input value
|
|
974
|
+
const currentInputValue = e.input.value;
|
|
975
|
+
|
|
976
|
+
// Skip validation if the input has no value
|
|
977
|
+
if (!currentInputValue) return false;
|
|
978
|
+
|
|
979
|
+
/**
|
|
980
|
+
* Let's check if the option selected and combobox value match.
|
|
981
|
+
*/
|
|
982
|
+
|
|
983
|
+
// Guard Clause: If there is no option selected fail the validation
|
|
984
|
+
if (!e.optionSelected) return true;
|
|
985
|
+
|
|
986
|
+
// Guard Clause: If there is no value fail the validation
|
|
987
|
+
if (!e.value) return true;
|
|
988
|
+
|
|
989
|
+
// Guard Clause: If the selected option's value doesn't match the input value fail the validation
|
|
990
|
+
if (e.optionSelected.value !== e.value) return true;
|
|
991
|
+
|
|
992
|
+
/**
|
|
993
|
+
* Now let's make sure the user hasn't change the value in the input after selecting an option.
|
|
994
|
+
* This is to make sure there's no user confusion if they select an option but then change the value to something else.
|
|
995
|
+
*/
|
|
996
|
+
|
|
997
|
+
// Guard Clause: If the current input value doesn't match the option selected value fail the validation
|
|
998
|
+
if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
|
|
999
|
+
|
|
1000
|
+
// Guard Clause: If the current input value doesn't match the combobox value fail the validation
|
|
1001
|
+
if (currentInputValue && currentInputValue !== e.value) return true;
|
|
1002
|
+
|
|
1003
|
+
// If all the checks passed the validation passes
|
|
1004
|
+
return false;
|
|
1005
|
+
},
|
|
1006
|
+
validity: 'valueMissing',
|
|
1007
|
+
message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
|
|
1008
|
+
}
|
|
1009
|
+
]
|
|
964
1010
|
}
|
|
965
1011
|
};
|
|
966
1012
|
|
|
@@ -969,6 +1015,8 @@ class AuroFormValidation {
|
|
|
969
1015
|
elementType = 'input';
|
|
970
1016
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
971
1017
|
elementType = 'counter';
|
|
1018
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
1019
|
+
elementType = 'combobox';
|
|
972
1020
|
}
|
|
973
1021
|
|
|
974
1022
|
if (elementType) {
|
|
@@ -1155,6 +1203,15 @@ class AuroFormValidation {
|
|
|
1155
1203
|
}
|
|
1156
1204
|
}
|
|
1157
1205
|
|
|
1206
|
+
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
1207
|
+
|
|
1208
|
+
if (isCombobox) {
|
|
1209
|
+
|
|
1210
|
+
if (!elem.persistInput || elem.behavior === "filter") {
|
|
1211
|
+
hasValue = elem.input.value?.length > 0;
|
|
1212
|
+
}
|
|
1213
|
+
}
|
|
1214
|
+
|
|
1158
1215
|
if (!hasValue && elem.required && elem.touched) {
|
|
1159
1216
|
elem.validity = 'valueMissing';
|
|
1160
1217
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
@@ -1163,6 +1220,11 @@ class AuroFormValidation {
|
|
|
1163
1220
|
this.validateElementAttributes(elem);
|
|
1164
1221
|
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
1165
1222
|
this.validateElementAttributes(elem);
|
|
1223
|
+
} else if (isCombobox) {
|
|
1224
|
+
this.validateElementAttributes(elem);
|
|
1225
|
+
|
|
1226
|
+
// Don't run extra validation for cases where the combobox is not being used as a filter
|
|
1227
|
+
validationShouldRun = elem.behavior !== 'filter';
|
|
1166
1228
|
}
|
|
1167
1229
|
}
|
|
1168
1230
|
|
|
@@ -1170,8 +1232,8 @@ class AuroFormValidation {
|
|
|
1170
1232
|
|
|
1171
1233
|
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
1172
1234
|
|
|
1173
|
-
// Don't reset combobox validity if
|
|
1174
|
-
if (!isCombobox || isCombobox && !elem.
|
|
1235
|
+
// Don't reset combobox validity if persistInput is set since we can't use the input value to validate
|
|
1236
|
+
if (!isCombobox || isCombobox && !elem.persistInput) {
|
|
1175
1237
|
|
|
1176
1238
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
1177
1239
|
this.auroInputElements.forEach(input => input.validate());
|
|
@@ -1244,6 +1306,8 @@ class AuroFormValidation {
|
|
|
1244
1306
|
if (input.validationMessage.length > 0) {
|
|
1245
1307
|
elem.errorMessage = input.validationMessage;
|
|
1246
1308
|
}
|
|
1309
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
|
|
1310
|
+
elem.errorMessage = elem.input?.inputElement?.validationMessage;
|
|
1247
1311
|
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
1248
1312
|
const firstInput = this.inputElements[0];
|
|
1249
1313
|
|
|
@@ -1535,7 +1599,7 @@ class AuroHelpText extends i$2 {
|
|
|
1535
1599
|
}
|
|
1536
1600
|
}
|
|
1537
1601
|
|
|
1538
|
-
var
|
|
1602
|
+
var formkitVersion = '202511110110';
|
|
1539
1603
|
|
|
1540
1604
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1541
1605
|
// See LICENSE in the project root for license information.
|
|
@@ -1602,7 +1666,7 @@ class AuroCheckboxGroup extends i$2 {
|
|
|
1602
1666
|
/**
|
|
1603
1667
|
* @private
|
|
1604
1668
|
*/
|
|
1605
|
-
this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext',
|
|
1669
|
+
this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
|
|
1606
1670
|
}
|
|
1607
1671
|
|
|
1608
1672
|
static get styles() {
|
|
@@ -914,6 +914,52 @@ class AuroFormValidation {
|
|
|
914
914
|
message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
|
|
915
915
|
}
|
|
916
916
|
]
|
|
917
|
+
},
|
|
918
|
+
combobox: {
|
|
919
|
+
filter: [
|
|
920
|
+
{
|
|
921
|
+
check: (e) => {
|
|
922
|
+
|
|
923
|
+
// Guard Clause: If the behavior is not 'filter', skip this validation
|
|
924
|
+
if (e.behavior !== 'filter') return false;
|
|
925
|
+
|
|
926
|
+
// Get the current input value
|
|
927
|
+
const currentInputValue = e.input.value;
|
|
928
|
+
|
|
929
|
+
// Skip validation if the input has no value
|
|
930
|
+
if (!currentInputValue) return false;
|
|
931
|
+
|
|
932
|
+
/**
|
|
933
|
+
* Let's check if the option selected and combobox value match.
|
|
934
|
+
*/
|
|
935
|
+
|
|
936
|
+
// Guard Clause: If there is no option selected fail the validation
|
|
937
|
+
if (!e.optionSelected) return true;
|
|
938
|
+
|
|
939
|
+
// Guard Clause: If there is no value fail the validation
|
|
940
|
+
if (!e.value) return true;
|
|
941
|
+
|
|
942
|
+
// Guard Clause: If the selected option's value doesn't match the input value fail the validation
|
|
943
|
+
if (e.optionSelected.value !== e.value) return true;
|
|
944
|
+
|
|
945
|
+
/**
|
|
946
|
+
* Now let's make sure the user hasn't change the value in the input after selecting an option.
|
|
947
|
+
* This is to make sure there's no user confusion if they select an option but then change the value to something else.
|
|
948
|
+
*/
|
|
949
|
+
|
|
950
|
+
// Guard Clause: If the current input value doesn't match the option selected value fail the validation
|
|
951
|
+
if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
|
|
952
|
+
|
|
953
|
+
// Guard Clause: If the current input value doesn't match the combobox value fail the validation
|
|
954
|
+
if (currentInputValue && currentInputValue !== e.value) return true;
|
|
955
|
+
|
|
956
|
+
// If all the checks passed the validation passes
|
|
957
|
+
return false;
|
|
958
|
+
},
|
|
959
|
+
validity: 'valueMissing',
|
|
960
|
+
message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
|
|
961
|
+
}
|
|
962
|
+
]
|
|
917
963
|
}
|
|
918
964
|
};
|
|
919
965
|
|
|
@@ -922,6 +968,8 @@ class AuroFormValidation {
|
|
|
922
968
|
elementType = 'input';
|
|
923
969
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
924
970
|
elementType = 'counter';
|
|
971
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
972
|
+
elementType = 'combobox';
|
|
925
973
|
}
|
|
926
974
|
|
|
927
975
|
if (elementType) {
|
|
@@ -1108,6 +1156,15 @@ class AuroFormValidation {
|
|
|
1108
1156
|
}
|
|
1109
1157
|
}
|
|
1110
1158
|
|
|
1159
|
+
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
1160
|
+
|
|
1161
|
+
if (isCombobox) {
|
|
1162
|
+
|
|
1163
|
+
if (!elem.persistInput || elem.behavior === "filter") {
|
|
1164
|
+
hasValue = elem.input.value?.length > 0;
|
|
1165
|
+
}
|
|
1166
|
+
}
|
|
1167
|
+
|
|
1111
1168
|
if (!hasValue && elem.required && elem.touched) {
|
|
1112
1169
|
elem.validity = 'valueMissing';
|
|
1113
1170
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
@@ -1116,6 +1173,11 @@ class AuroFormValidation {
|
|
|
1116
1173
|
this.validateElementAttributes(elem);
|
|
1117
1174
|
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
1118
1175
|
this.validateElementAttributes(elem);
|
|
1176
|
+
} else if (isCombobox) {
|
|
1177
|
+
this.validateElementAttributes(elem);
|
|
1178
|
+
|
|
1179
|
+
// Don't run extra validation for cases where the combobox is not being used as a filter
|
|
1180
|
+
validationShouldRun = elem.behavior !== 'filter';
|
|
1119
1181
|
}
|
|
1120
1182
|
}
|
|
1121
1183
|
|
|
@@ -1123,8 +1185,8 @@ class AuroFormValidation {
|
|
|
1123
1185
|
|
|
1124
1186
|
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
1125
1187
|
|
|
1126
|
-
// Don't reset combobox validity if
|
|
1127
|
-
if (!isCombobox || isCombobox && !elem.
|
|
1188
|
+
// Don't reset combobox validity if persistInput is set since we can't use the input value to validate
|
|
1189
|
+
if (!isCombobox || isCombobox && !elem.persistInput) {
|
|
1128
1190
|
|
|
1129
1191
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
1130
1192
|
this.auroInputElements.forEach(input => input.validate());
|
|
@@ -1197,6 +1259,8 @@ class AuroFormValidation {
|
|
|
1197
1259
|
if (input.validationMessage.length > 0) {
|
|
1198
1260
|
elem.errorMessage = input.validationMessage;
|
|
1199
1261
|
}
|
|
1262
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
|
|
1263
|
+
elem.errorMessage = elem.input?.inputElement?.validationMessage;
|
|
1200
1264
|
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
1201
1265
|
const firstInput = this.inputElements[0];
|
|
1202
1266
|
|
|
@@ -1488,7 +1552,7 @@ class AuroHelpText extends LitElement {
|
|
|
1488
1552
|
}
|
|
1489
1553
|
}
|
|
1490
1554
|
|
|
1491
|
-
var
|
|
1555
|
+
var formkitVersion = '202511110110';
|
|
1492
1556
|
|
|
1493
1557
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1494
1558
|
// See LICENSE in the project root for license information.
|
|
@@ -1555,7 +1619,7 @@ class AuroCheckboxGroup extends LitElement {
|
|
|
1555
1619
|
/**
|
|
1556
1620
|
* @private
|
|
1557
1621
|
*/
|
|
1558
|
-
this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext',
|
|
1622
|
+
this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
|
|
1559
1623
|
}
|
|
1560
1624
|
|
|
1561
1625
|
static get styles() {
|
|
@@ -914,6 +914,52 @@ class AuroFormValidation {
|
|
|
914
914
|
message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
|
|
915
915
|
}
|
|
916
916
|
]
|
|
917
|
+
},
|
|
918
|
+
combobox: {
|
|
919
|
+
filter: [
|
|
920
|
+
{
|
|
921
|
+
check: (e) => {
|
|
922
|
+
|
|
923
|
+
// Guard Clause: If the behavior is not 'filter', skip this validation
|
|
924
|
+
if (e.behavior !== 'filter') return false;
|
|
925
|
+
|
|
926
|
+
// Get the current input value
|
|
927
|
+
const currentInputValue = e.input.value;
|
|
928
|
+
|
|
929
|
+
// Skip validation if the input has no value
|
|
930
|
+
if (!currentInputValue) return false;
|
|
931
|
+
|
|
932
|
+
/**
|
|
933
|
+
* Let's check if the option selected and combobox value match.
|
|
934
|
+
*/
|
|
935
|
+
|
|
936
|
+
// Guard Clause: If there is no option selected fail the validation
|
|
937
|
+
if (!e.optionSelected) return true;
|
|
938
|
+
|
|
939
|
+
// Guard Clause: If there is no value fail the validation
|
|
940
|
+
if (!e.value) return true;
|
|
941
|
+
|
|
942
|
+
// Guard Clause: If the selected option's value doesn't match the input value fail the validation
|
|
943
|
+
if (e.optionSelected.value !== e.value) return true;
|
|
944
|
+
|
|
945
|
+
/**
|
|
946
|
+
* Now let's make sure the user hasn't change the value in the input after selecting an option.
|
|
947
|
+
* This is to make sure there's no user confusion if they select an option but then change the value to something else.
|
|
948
|
+
*/
|
|
949
|
+
|
|
950
|
+
// Guard Clause: If the current input value doesn't match the option selected value fail the validation
|
|
951
|
+
if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
|
|
952
|
+
|
|
953
|
+
// Guard Clause: If the current input value doesn't match the combobox value fail the validation
|
|
954
|
+
if (currentInputValue && currentInputValue !== e.value) return true;
|
|
955
|
+
|
|
956
|
+
// If all the checks passed the validation passes
|
|
957
|
+
return false;
|
|
958
|
+
},
|
|
959
|
+
validity: 'valueMissing',
|
|
960
|
+
message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
|
|
961
|
+
}
|
|
962
|
+
]
|
|
917
963
|
}
|
|
918
964
|
};
|
|
919
965
|
|
|
@@ -922,6 +968,8 @@ class AuroFormValidation {
|
|
|
922
968
|
elementType = 'input';
|
|
923
969
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
924
970
|
elementType = 'counter';
|
|
971
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
972
|
+
elementType = 'combobox';
|
|
925
973
|
}
|
|
926
974
|
|
|
927
975
|
if (elementType) {
|
|
@@ -1108,6 +1156,15 @@ class AuroFormValidation {
|
|
|
1108
1156
|
}
|
|
1109
1157
|
}
|
|
1110
1158
|
|
|
1159
|
+
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
1160
|
+
|
|
1161
|
+
if (isCombobox) {
|
|
1162
|
+
|
|
1163
|
+
if (!elem.persistInput || elem.behavior === "filter") {
|
|
1164
|
+
hasValue = elem.input.value?.length > 0;
|
|
1165
|
+
}
|
|
1166
|
+
}
|
|
1167
|
+
|
|
1111
1168
|
if (!hasValue && elem.required && elem.touched) {
|
|
1112
1169
|
elem.validity = 'valueMissing';
|
|
1113
1170
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
@@ -1116,6 +1173,11 @@ class AuroFormValidation {
|
|
|
1116
1173
|
this.validateElementAttributes(elem);
|
|
1117
1174
|
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
1118
1175
|
this.validateElementAttributes(elem);
|
|
1176
|
+
} else if (isCombobox) {
|
|
1177
|
+
this.validateElementAttributes(elem);
|
|
1178
|
+
|
|
1179
|
+
// Don't run extra validation for cases where the combobox is not being used as a filter
|
|
1180
|
+
validationShouldRun = elem.behavior !== 'filter';
|
|
1119
1181
|
}
|
|
1120
1182
|
}
|
|
1121
1183
|
|
|
@@ -1123,8 +1185,8 @@ class AuroFormValidation {
|
|
|
1123
1185
|
|
|
1124
1186
|
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
1125
1187
|
|
|
1126
|
-
// Don't reset combobox validity if
|
|
1127
|
-
if (!isCombobox || isCombobox && !elem.
|
|
1188
|
+
// Don't reset combobox validity if persistInput is set since we can't use the input value to validate
|
|
1189
|
+
if (!isCombobox || isCombobox && !elem.persistInput) {
|
|
1128
1190
|
|
|
1129
1191
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
1130
1192
|
this.auroInputElements.forEach(input => input.validate());
|
|
@@ -1197,6 +1259,8 @@ class AuroFormValidation {
|
|
|
1197
1259
|
if (input.validationMessage.length > 0) {
|
|
1198
1260
|
elem.errorMessage = input.validationMessage;
|
|
1199
1261
|
}
|
|
1262
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
|
|
1263
|
+
elem.errorMessage = elem.input?.inputElement?.validationMessage;
|
|
1200
1264
|
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
1201
1265
|
const firstInput = this.inputElements[0];
|
|
1202
1266
|
|
|
@@ -1488,7 +1552,7 @@ class AuroHelpText extends LitElement {
|
|
|
1488
1552
|
}
|
|
1489
1553
|
}
|
|
1490
1554
|
|
|
1491
|
-
var
|
|
1555
|
+
var formkitVersion = '202511110110';
|
|
1492
1556
|
|
|
1493
1557
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1494
1558
|
// See LICENSE in the project root for license information.
|
|
@@ -1555,7 +1619,7 @@ class AuroCheckboxGroup extends LitElement {
|
|
|
1555
1619
|
/**
|
|
1556
1620
|
* @private
|
|
1557
1621
|
*/
|
|
1558
|
-
this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext',
|
|
1622
|
+
this.helpTextTag = versioning.generateTag('auro-formkit-checkbox-helptext', formkitVersion, AuroHelpText);
|
|
1559
1623
|
}
|
|
1560
1624
|
|
|
1561
1625
|
static get styles() {
|