@aurodesignsystem-dev/auro-formkit 0.0.0-pr1516.0 → 0.0.0-pr1518.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/customize.min.js +8 -6
- package/components/checkbox/demo/getting-started.min.js +8 -6
- package/components/checkbox/demo/index.min.js +8 -6
- package/components/checkbox/dist/index.js +8 -6
- package/components/checkbox/dist/registered.js +8 -6
- package/components/combobox/README.md +1 -1
- package/components/combobox/demo/customize.md +2 -10
- package/components/combobox/demo/customize.min.js +382 -466
- package/components/combobox/demo/getting-started.min.js +382 -462
- package/components/combobox/demo/index.md +1 -1
- package/components/combobox/demo/index.min.js +382 -462
- package/components/combobox/demo/keyboard-behavior.md +2 -142
- package/components/combobox/demo/readme.md +1 -1
- package/components/combobox/demo/why-combobox.md +2 -2
- package/components/combobox/dist/auro-combobox.d.ts +30 -14
- package/components/combobox/dist/index.js +382 -462
- package/components/combobox/dist/registered.js +382 -462
- package/components/counter/demo/customize.min.js +9 -7
- package/components/counter/demo/index.min.js +9 -7
- package/components/counter/dist/index.js +9 -7
- package/components/counter/dist/registered.js +9 -7
- package/components/datepicker/demo/customize.min.js +78 -169
- package/components/datepicker/demo/index.min.js +78 -169
- package/components/datepicker/dist/index.js +78 -169
- package/components/datepicker/dist/registered.js +78 -169
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/customize.min.js +561 -816
- package/components/form/demo/getting-started.min.js +561 -816
- package/components/form/demo/index.min.js +561 -816
- package/components/form/demo/registerDemoDeps.min.js +561 -816
- package/components/input/demo/customize.min.js +67 -159
- package/components/input/demo/getting-started.min.js +67 -159
- package/components/input/demo/index.min.js +67 -159
- package/components/input/dist/auro-input.d.ts +1 -1
- package/components/input/dist/base-input.d.ts +3 -51
- package/components/input/dist/index.js +67 -159
- package/components/input/dist/registered.js +67 -159
- package/components/input/dist/utilities.d.ts +1 -1
- package/components/radio/demo/customize.min.js +8 -6
- package/components/radio/demo/getting-started.min.js +8 -6
- package/components/radio/demo/index.min.js +8 -6
- package/components/radio/dist/index.js +8 -6
- package/components/radio/dist/registered.js +8 -6
- package/components/select/demo/customize.min.js +9 -7
- package/components/select/demo/getting-started.min.js +9 -7
- package/components/select/demo/index.min.js +9 -7
- package/components/select/dist/index.js +9 -7
- package/components/select/dist/registered.js +9 -7
- package/custom-elements.json +1503 -1709
- package/package.json +1 -1
|
@@ -485,15 +485,17 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
485
485
|
);
|
|
486
486
|
}
|
|
487
487
|
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
488
|
+
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
489
|
+
|
|
490
|
+
// If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
|
|
491
|
+
// Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
|
|
492
|
+
// field (datepicker is the intended consumer — start/end are independently required).
|
|
493
|
+
if (this.auroInputElements?.length === 2 && !isCombobox) {
|
|
494
|
+
if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
|
|
491
495
|
hasValue = false;
|
|
492
496
|
}
|
|
493
497
|
}
|
|
494
498
|
|
|
495
|
-
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
496
|
-
|
|
497
499
|
if (isCombobox) {
|
|
498
500
|
|
|
499
501
|
if (!elem.persistInput || elem.behavior === "filter") {
|
|
@@ -810,6 +812,8 @@ function navigateArrow(component, direction, options = {}) {
|
|
|
810
812
|
}
|
|
811
813
|
}
|
|
812
814
|
|
|
815
|
+
/* eslint-disable no-underscore-dangle */
|
|
816
|
+
|
|
813
817
|
/**
|
|
814
818
|
* Returns the clear button element from the active input's shadow
|
|
815
819
|
* DOM, if available.
|
|
@@ -845,11 +849,9 @@ function isClearBtnFocused(ctx, clearBtn = getClearBtn(ctx)) {
|
|
|
845
849
|
* @param {Object} menu - The menu component.
|
|
846
850
|
*/
|
|
847
851
|
function reconcileMenuIndex(menu) {
|
|
848
|
-
// eslint-disable-next-line no-underscore-dangle
|
|
849
852
|
if (menu._index < 0 && menu.optionActive && menu.items) {
|
|
850
853
|
const idx = menu.items.indexOf(menu.optionActive);
|
|
851
854
|
if (idx >= 0) {
|
|
852
|
-
// eslint-disable-next-line no-underscore-dangle
|
|
853
855
|
menu._index = idx;
|
|
854
856
|
}
|
|
855
857
|
}
|
|
@@ -868,11 +870,7 @@ const comboboxKeyboardStrategy = {
|
|
|
868
870
|
|
|
869
871
|
// navigate if bib is open otherwise open it
|
|
870
872
|
if (component.dropdown.isPopoverVisible) {
|
|
871
|
-
|
|
872
|
-
component.activateLastEnabledAvailableOption();
|
|
873
|
-
} else {
|
|
874
|
-
navigateArrow(component, 'down');
|
|
875
|
-
}
|
|
873
|
+
navigateArrow(component, 'down');
|
|
876
874
|
} else {
|
|
877
875
|
component.showBib();
|
|
878
876
|
}
|
|
@@ -891,11 +889,7 @@ const comboboxKeyboardStrategy = {
|
|
|
891
889
|
|
|
892
890
|
// navigate if bib is open otherwise open it
|
|
893
891
|
if (component.dropdown.isPopoverVisible) {
|
|
894
|
-
|
|
895
|
-
component.activateFirstEnabledAvailableOption();
|
|
896
|
-
} else {
|
|
897
|
-
navigateArrow(component, 'up');
|
|
898
|
-
}
|
|
892
|
+
navigateArrow(component, 'up');
|
|
899
893
|
} else {
|
|
900
894
|
component.showBib();
|
|
901
895
|
}
|
|
@@ -911,13 +905,18 @@ const comboboxKeyboardStrategy = {
|
|
|
911
905
|
},
|
|
912
906
|
|
|
913
907
|
Enter(component, evt, ctx) {
|
|
908
|
+
// Forms should not submit on Enter from a combobox, regardless of which
|
|
909
|
+
// child element (input, clear button, menu) is focused.
|
|
910
|
+
evt.stopPropagation();
|
|
911
|
+
|
|
914
912
|
if (isClearBtnFocused(ctx)) {
|
|
915
|
-
//
|
|
916
|
-
//
|
|
917
|
-
//
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
913
|
+
// Let the browser dispatch Enter to the focused clear button so its
|
|
914
|
+
// built-in activation fires and clears the selection. Do NOT call
|
|
915
|
+
// preventDefault — that would block the activation.
|
|
916
|
+
return;
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
if (ctx.isExpanded && component.menu.optionActive) {
|
|
921
920
|
reconcileMenuIndex(component.menu);
|
|
922
921
|
component.menu.makeSelection();
|
|
923
922
|
|
|
@@ -926,14 +925,8 @@ const comboboxKeyboardStrategy = {
|
|
|
926
925
|
}
|
|
927
926
|
|
|
928
927
|
evt.preventDefault();
|
|
929
|
-
evt.stopPropagation();
|
|
930
928
|
} else {
|
|
931
|
-
// Prevent the keypress from bubbling to parent containers (e.g., forms)
|
|
932
|
-
// which could interpret Enter as a submit or trigger other unintended behavior.
|
|
933
|
-
// This is safe because showBib() opens the dialog programmatically,
|
|
934
|
-
// not via event propagation.
|
|
935
929
|
evt.preventDefault();
|
|
936
|
-
evt.stopPropagation();
|
|
937
930
|
component.showBib();
|
|
938
931
|
}
|
|
939
932
|
},
|
|
@@ -978,7 +971,7 @@ const comboboxKeyboardStrategy = {
|
|
|
978
971
|
component.setClearBtnFocus();
|
|
979
972
|
}
|
|
980
973
|
}
|
|
981
|
-
}
|
|
974
|
+
}
|
|
982
975
|
};
|
|
983
976
|
|
|
984
977
|
/**
|
|
@@ -4873,7 +4866,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
4873
4866
|
}
|
|
4874
4867
|
};
|
|
4875
4868
|
|
|
4876
|
-
var formkitVersion$2 = '
|
|
4869
|
+
var formkitVersion$2 = '202607011652';
|
|
4877
4870
|
|
|
4878
4871
|
let AuroElement$2 = class AuroElement extends i$3 {
|
|
4879
4872
|
static get properties() {
|
|
@@ -6279,7 +6272,7 @@ const u$4=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r}
|
|
|
6279
6272
|
|
|
6280
6273
|
var shapeSizeCss = i$6`.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:56px;max-height:56px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:58px;max-height:58px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:56px;max-height:56px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:54px;max-height:54px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-box-lg{min-height:52px;max-height:52px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-box-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-box-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-box-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-box-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-box-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-box-sm{min-height:32px;max-height:32px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-box-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-box-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-box-xs{min-height:20px;max-height:20px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-box-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-box-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
|
|
6281
6274
|
|
|
6282
|
-
var styleCss$1$1 = i$6`.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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block}.wrapper:has(:enabled){cursor:text}.wrapper:has(:enabled) label{cursor:text}.helpTextClasses{cursor:default}input{overflow:clip !important;width:100%;padding:0;border:0;background:unset;outline:none;overflow-clip-margin:0 !important;text-overflow:ellipsis}input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.displayValue{display:none}.displayValue.hasContent:is(.withValue):not(.hasFocus){display:flex;align-items:center}.accents:not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}.wrapper:not(:focus-within):not(:hover) .notificationBtn.passwordBtn,.wrapper:not(:focus-within):not(:hover) .notification.clear{display:none}.notification{display:flex;align-items:center;justify-content:center}`;
|
|
6275
|
+
var styleCss$1$1 = i$6`.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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block}.wrapper:has(:enabled){cursor:text}.wrapper:has(:enabled) label{cursor:text}.helpTextClasses{cursor:default}input{overflow:clip !important;width:100%;padding:0;border:0;background:unset;outline:none;overflow-clip-margin:0 !important;text-overflow:ellipsis}input[type=number]{appearance:textfield}input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.displayValue{display:none}.displayValue.hasContent:is(.withValue):not(.hasFocus){display:flex;align-items:center}.accents:not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}.wrapper:not(:focus-within):not(:hover) .notificationBtn.passwordBtn,.wrapper:not(:focus-within):not(:hover) .notification.clear{display:none}.notification{display:flex;align-items:center;justify-content:center}`;
|
|
6283
6276
|
|
|
6284
6277
|
var styleDefaultCss = i$6`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{text-align:left}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
|
|
6285
6278
|
|
|
@@ -10655,15 +10648,17 @@ class AuroFormValidation {
|
|
|
10655
10648
|
);
|
|
10656
10649
|
}
|
|
10657
10650
|
|
|
10658
|
-
|
|
10659
|
-
|
|
10660
|
-
|
|
10651
|
+
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
10652
|
+
|
|
10653
|
+
// If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
|
|
10654
|
+
// Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
|
|
10655
|
+
// field (datepicker is the intended consumer — start/end are independently required).
|
|
10656
|
+
if (this.auroInputElements?.length === 2 && !isCombobox) {
|
|
10657
|
+
if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
|
|
10661
10658
|
hasValue = false;
|
|
10662
10659
|
}
|
|
10663
10660
|
}
|
|
10664
10661
|
|
|
10665
|
-
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
10666
|
-
|
|
10667
10662
|
if (isCombobox) {
|
|
10668
10663
|
|
|
10669
10664
|
if (!elem.persistInput || elem.behavior === "filter") {
|
|
@@ -16344,8 +16339,6 @@ function cleanEscapedString(input) {
|
|
|
16344
16339
|
return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
|
|
16345
16340
|
}
|
|
16346
16341
|
|
|
16347
|
-
/* eslint-disable max-lines */
|
|
16348
|
-
|
|
16349
16342
|
class AuroInputUtilities {
|
|
16350
16343
|
|
|
16351
16344
|
/**
|
|
@@ -16388,7 +16381,7 @@ class AuroInputUtilities {
|
|
|
16388
16381
|
/**
|
|
16389
16382
|
* Converts an IMask-style date mask to a date-fns compatible format string.
|
|
16390
16383
|
* @param {string} mask - IMask date mask (e.g. "MM/DD/YYYY").
|
|
16391
|
-
* @returns {string} date-fns format string (e.g. "MM/dd/yyyy").
|
|
16384
|
+
* @returns {string} A date-fns format string (e.g. "MM/dd/yyyy").
|
|
16392
16385
|
*/
|
|
16393
16386
|
toDateFnsMask(mask) {
|
|
16394
16387
|
return mask
|
|
@@ -16610,6 +16603,7 @@ class AuroInputUtilities {
|
|
|
16610
16603
|
const maskOptions = this.getMaskOptions('date', normalizedFormat);
|
|
16611
16604
|
|
|
16612
16605
|
if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
|
|
16606
|
+
console.debug('Invalid date object or mask options for formatting', { valueObject, maskOptions }); // eslint-disable-line no-console
|
|
16613
16607
|
return undefined;
|
|
16614
16608
|
}
|
|
16615
16609
|
|
|
@@ -16767,6 +16761,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
16767
16761
|
// so a parent (datepicker/combobox) calling `validate()` synchronously
|
|
16768
16762
|
// during its own update cycle sees a populated util instance.
|
|
16769
16763
|
this.activeLabel = false;
|
|
16764
|
+
|
|
16770
16765
|
/** @private */
|
|
16771
16766
|
this.allowedInputTypes = [
|
|
16772
16767
|
"text",
|
|
@@ -16777,6 +16772,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
16777
16772
|
"tel"
|
|
16778
16773
|
];
|
|
16779
16774
|
this.appearance = "default";
|
|
16775
|
+
|
|
16780
16776
|
/** @private */
|
|
16781
16777
|
this.dateFormatMap = {
|
|
16782
16778
|
'mm/dd/yyyy': 'dateMMDDYYYY',
|
|
@@ -16795,23 +16791,24 @@ class BaseInput extends AuroElement$1 {
|
|
|
16795
16791
|
'mm/dd': 'dateMMDD'
|
|
16796
16792
|
};
|
|
16797
16793
|
this.disabled = false;
|
|
16794
|
+
|
|
16798
16795
|
/** @private */
|
|
16799
16796
|
this.domHandler = new DomHandler();
|
|
16800
16797
|
this.dvInputOnly = false;
|
|
16801
16798
|
this.hasValue = false;
|
|
16802
16799
|
this.hideLabelVisually = false;
|
|
16803
16800
|
this.icon = false;
|
|
16801
|
+
|
|
16804
16802
|
/** @private */
|
|
16805
16803
|
this.inputIconName = undefined;
|
|
16804
|
+
|
|
16806
16805
|
/** @private */
|
|
16807
16806
|
this.label = 'Input label is undefined';
|
|
16808
16807
|
this.layout = 'classic';
|
|
16809
16808
|
this.locale = 'en-US';
|
|
16810
16809
|
this.max = undefined;
|
|
16811
|
-
this._maxObject = undefined;
|
|
16812
16810
|
this.maxLength = undefined;
|
|
16813
16811
|
this.min = undefined;
|
|
16814
|
-
this._minObject = undefined;
|
|
16815
16812
|
this.minLength = undefined;
|
|
16816
16813
|
this.noValidate = false;
|
|
16817
16814
|
this.onDark = false;
|
|
@@ -16828,23 +16825,27 @@ class BaseInput extends AuroElement$1 {
|
|
|
16828
16825
|
"email"
|
|
16829
16826
|
];
|
|
16830
16827
|
this.shape = 'classic';
|
|
16828
|
+
|
|
16831
16829
|
/** @private */
|
|
16832
16830
|
this.showPassword = false;
|
|
16833
16831
|
this.size = 'lg';
|
|
16834
16832
|
this.touched = false;
|
|
16833
|
+
|
|
16835
16834
|
/** @private */
|
|
16836
16835
|
this.uniqueId = new UniqueId().create();
|
|
16836
|
+
|
|
16837
16837
|
/** @private */
|
|
16838
16838
|
this.util = new AuroInputUtilities({
|
|
16839
16839
|
locale: this.locale,
|
|
16840
16840
|
format: this.format
|
|
16841
16841
|
});
|
|
16842
|
+
|
|
16842
16843
|
/** @private */
|
|
16843
16844
|
this.validation = new AuroFormValidation();
|
|
16845
|
+
|
|
16844
16846
|
/** @private */
|
|
16845
16847
|
this.validationCCLength = undefined;
|
|
16846
16848
|
this.value = undefined;
|
|
16847
|
-
this._valueObject = undefined;
|
|
16848
16849
|
}
|
|
16849
16850
|
|
|
16850
16851
|
// function to define props used within the scope of this component
|
|
@@ -17282,7 +17283,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17282
17283
|
* @returns {Date|undefined}
|
|
17283
17284
|
*/
|
|
17284
17285
|
get valueObject() {
|
|
17285
|
-
return this.
|
|
17286
|
+
return this.value && dateFormatter.isValidDate(this.value) ? dateFormatter.stringToDateInstance(this.value) : undefined;
|
|
17286
17287
|
}
|
|
17287
17288
|
|
|
17288
17289
|
/**
|
|
@@ -17290,7 +17291,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17290
17291
|
* @returns {Date|undefined}
|
|
17291
17292
|
*/
|
|
17292
17293
|
get minObject() {
|
|
17293
|
-
return this.
|
|
17294
|
+
return this.min && dateFormatter.isValidDate(this.min) ? dateFormatter.stringToDateInstance(this.min) : undefined;
|
|
17294
17295
|
}
|
|
17295
17296
|
|
|
17296
17297
|
/**
|
|
@@ -17298,50 +17299,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17298
17299
|
* @returns {Date|undefined}
|
|
17299
17300
|
*/
|
|
17300
17301
|
get maxObject() {
|
|
17301
|
-
return this.
|
|
17302
|
-
}
|
|
17303
|
-
|
|
17304
|
-
/**
|
|
17305
|
-
* Parses a date string into a Date object when the corresponding `_*Object`
|
|
17306
|
-
* field hasn't been synced yet by `updated()`. Returns undefined when the
|
|
17307
|
-
* input type/format isn't a full date or the string is not a valid date.
|
|
17308
|
-
*
|
|
17309
|
-
* Why this exists: a parent (datepicker) can call `inputN.validate()` from
|
|
17310
|
-
* inside its own `updated()` before this input's `updated()` has run
|
|
17311
|
-
* `syncDateValues()` — so `_valueObject`/`_maxObject` are still `undefined`
|
|
17312
|
-
* and range checks would otherwise silently no-op (flipping the result to
|
|
17313
|
-
* `valid` or `patternMismatch`).
|
|
17314
|
-
* @private
|
|
17315
|
-
* @param {string|undefined} dateStr - ISO date string from `value`/`min`/`max`.
|
|
17316
|
-
* @returns {Date|undefined}
|
|
17317
|
-
*/
|
|
17318
|
-
_computeDateObjectFallback(dateStr) {
|
|
17319
|
-
if (!dateStr || !this.util || !this.util.isFullDateFormat(this.type, this.format)) {
|
|
17320
|
-
return undefined;
|
|
17321
|
-
}
|
|
17322
|
-
if (!dateFormatter.isValidDate(dateStr)) {
|
|
17323
|
-
return undefined;
|
|
17324
|
-
}
|
|
17325
|
-
return dateFormatter.stringToDateInstance(dateStr);
|
|
17326
|
-
}
|
|
17327
|
-
|
|
17328
|
-
/**
|
|
17329
|
-
* Internal setter for readonly date object properties.
|
|
17330
|
-
* @private
|
|
17331
|
-
* @param {'valueObject'|'minObject'|'maxObject'} propertyName - Public object property name.
|
|
17332
|
-
* @param {Date|undefined} propertyValue - Value to assign.
|
|
17333
|
-
* @returns {void}
|
|
17334
|
-
*/
|
|
17335
|
-
setDateObjectProperty(propertyName, propertyValue) {
|
|
17336
|
-
const internalPropertyName = `_${propertyName}`;
|
|
17337
|
-
const previousValue = this[internalPropertyName];
|
|
17338
|
-
|
|
17339
|
-
if (previousValue === propertyValue) {
|
|
17340
|
-
return;
|
|
17341
|
-
}
|
|
17342
|
-
|
|
17343
|
-
this[internalPropertyName] = propertyValue;
|
|
17344
|
-
this.requestUpdate(propertyName, previousValue);
|
|
17302
|
+
return this.max && dateFormatter.isValidDate(this.max) ? dateFormatter.stringToDateInstance(this.max) : undefined;
|
|
17345
17303
|
}
|
|
17346
17304
|
|
|
17347
17305
|
connectedCallback() {
|
|
@@ -17370,7 +17328,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
17370
17328
|
format: this.format
|
|
17371
17329
|
});
|
|
17372
17330
|
this.configureDataForType();
|
|
17373
|
-
this.syncDateValues();
|
|
17374
17331
|
}
|
|
17375
17332
|
|
|
17376
17333
|
disconnectedCallback() {
|
|
@@ -17409,7 +17366,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
17409
17366
|
this.setCustomHelpTextMessage();
|
|
17410
17367
|
this.configureAutoFormatting();
|
|
17411
17368
|
this.configureDataForType();
|
|
17412
|
-
this.syncDateValues();
|
|
17413
17369
|
}
|
|
17414
17370
|
|
|
17415
17371
|
/**
|
|
@@ -17467,7 +17423,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17467
17423
|
|
|
17468
17424
|
/**
|
|
17469
17425
|
* @private
|
|
17470
|
-
* @deprecated https://dev.azure.com/itsals/E_Retain_Content/_workitems/edit/1557296
|
|
17426
|
+
* @deprecated See https://dev.azure.com/itsals/E_Retain_Content/_workitems/edit/1557296.
|
|
17471
17427
|
* @returns {void} Sets the default help text for the input.
|
|
17472
17428
|
*/
|
|
17473
17429
|
setCustomHelpTextMessage() {
|
|
@@ -17553,8 +17509,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
17553
17509
|
this.configureDataForType();
|
|
17554
17510
|
}
|
|
17555
17511
|
|
|
17556
|
-
this.syncDateValues(changedProperties);
|
|
17557
|
-
|
|
17558
17512
|
if (changedProperties.has('value')) {
|
|
17559
17513
|
if (this.value && this.value.length > 0) {
|
|
17560
17514
|
this.hasValue = true;
|
|
@@ -17576,14 +17530,14 @@ class BaseInput extends AuroElement$1 {
|
|
|
17576
17530
|
|
|
17577
17531
|
if (formattedValue !== this.inputElement.value) {
|
|
17578
17532
|
this.skipNextProgrammaticInputEvent = true;
|
|
17579
|
-
if (this.maskInstance && this.type
|
|
17533
|
+
if (this.maskInstance && this.type !== 'date') {
|
|
17580
17534
|
// Route through the mask so its _value and el.value stay in lock-step
|
|
17581
17535
|
// (set value calls updateControl which writes el.value = displayValue).
|
|
17582
17536
|
// Writing el.value directly leaves the mask thinking displayValue is
|
|
17583
|
-
// stale; _saveSelection on the next focus/click then warns.
|
|
17584
|
-
//
|
|
17585
|
-
//
|
|
17586
|
-
//
|
|
17537
|
+
// stale; _saveSelection on the next focus/click then warns. Date is
|
|
17538
|
+
// excluded because its formattedValue can be raw ISO when the calendar
|
|
17539
|
+
// is invalid, and re-masking through mm/dd/yyyy would truncate it and
|
|
17540
|
+
// flip validity from patternMismatch to tooShort.
|
|
17587
17541
|
this.maskInstance.value = formattedValue || '';
|
|
17588
17542
|
} else if (formattedValue) {
|
|
17589
17543
|
this.inputElement.value = formattedValue;
|
|
@@ -17625,120 +17579,65 @@ class BaseInput extends AuroElement$1 {
|
|
|
17625
17579
|
}));
|
|
17626
17580
|
}
|
|
17627
17581
|
|
|
17628
|
-
|
|
17629
|
-
/**
|
|
17630
|
-
* Synchronizes the ISO string values and Date object representations for date-related properties.
|
|
17631
|
-
* This keeps the model and display values aligned when either side changes.
|
|
17632
|
-
*
|
|
17633
|
-
* When a full date format is in use, this method updates `value`, `min`, and `max` from their corresponding
|
|
17634
|
-
* Date objects or vice versa, based on which properties have changed. It only runs when the current configuration
|
|
17635
|
-
* represents a full year/month/day date format.
|
|
17636
|
-
*
|
|
17637
|
-
* @param {Map<string, unknown>|undefined} [changedProperties=undefined] - Optional map of changed properties used to limit which values are synchronized.
|
|
17638
|
-
* @returns {void}
|
|
17639
|
-
* @private
|
|
17640
|
-
*/
|
|
17641
|
-
syncDateValues(changedProperties = undefined) {
|
|
17642
|
-
if (!this.util.isFullDateFormat(this.type, this.format)) {
|
|
17643
|
-
return;
|
|
17644
|
-
}
|
|
17645
|
-
|
|
17646
|
-
this.syncSingleDateValue(changedProperties, 'valueObject', 'value');
|
|
17647
|
-
this.syncSingleDateValue(changedProperties, 'minObject', 'min');
|
|
17648
|
-
this.syncSingleDateValue(changedProperties, 'maxObject', 'max');
|
|
17649
|
-
}
|
|
17650
|
-
|
|
17651
|
-
/**
|
|
17652
|
-
* Synchronizes one date object/string property pair.
|
|
17653
|
-
* @private
|
|
17654
|
-
* @param {Map<string, unknown>|undefined} changedProperties - Map of changed properties from Lit.
|
|
17655
|
-
* @param {string} objectProperty - Date object property name.
|
|
17656
|
-
* @param {string} valueProperty - ISO string property name.
|
|
17657
|
-
* @returns {void}
|
|
17658
|
-
*/
|
|
17659
|
-
syncSingleDateValue(changedProperties, objectProperty, valueProperty) {
|
|
17660
|
-
const objectPropertyChanged = !changedProperties || changedProperties.has(objectProperty);
|
|
17661
|
-
|
|
17662
|
-
// objectProperty wins over valueProperty when both changed
|
|
17663
|
-
if (objectPropertyChanged && this[objectProperty]) {
|
|
17664
|
-
this[valueProperty] = dateFormatter.toISOFormatString(this[objectProperty]);
|
|
17665
|
-
return;
|
|
17666
|
-
}
|
|
17667
|
-
|
|
17668
|
-
const valuePropertyChanged = !changedProperties || changedProperties.has(valueProperty);
|
|
17669
|
-
if (!valuePropertyChanged) {
|
|
17670
|
-
return;
|
|
17671
|
-
}
|
|
17672
|
-
|
|
17673
|
-
// when value is newly set to the same ISO string that corresponds to the existing Date object, do not clear the Date object (avoid unnecessary updates)
|
|
17674
|
-
if (
|
|
17675
|
-
changedProperties &&
|
|
17676
|
-
valueProperty === 'value' &&
|
|
17677
|
-
changedProperties.get('value') === undefined &&
|
|
17678
|
-
this[objectProperty] instanceof Date &&
|
|
17679
|
-
this[valueProperty] === dateFormatter.toISOFormatString(this[objectProperty])
|
|
17680
|
-
) {
|
|
17681
|
-
return;
|
|
17682
|
-
}
|
|
17683
|
-
|
|
17684
|
-
if (dateFormatter.isValidDate(this[valueProperty])) {
|
|
17685
|
-
this.setDateObjectProperty(objectProperty, dateFormatter.stringToDateInstance(this[valueProperty]));
|
|
17686
|
-
} else {
|
|
17687
|
-
this.setDateObjectProperty(objectProperty, undefined);
|
|
17688
|
-
}
|
|
17689
|
-
}
|
|
17690
|
-
|
|
17691
17582
|
/**
|
|
17692
17583
|
* Sets up IMasks and logic based on auto-formatting requirements.
|
|
17693
17584
|
* @private
|
|
17694
17585
|
* @returns {void}
|
|
17695
17586
|
*/
|
|
17696
17587
|
configureAutoFormatting() {
|
|
17697
|
-
//
|
|
17698
|
-
//
|
|
17699
|
-
//
|
|
17700
|
-
//
|
|
17588
|
+
// _configuringMask gates two things: external re-entry into this method
|
|
17589
|
+
// while setup is mid-flight (from property changes that call back here),
|
|
17590
|
+
// and the accept/complete listeners below — both need to ignore the mask
|
|
17591
|
+
// events fired by our own value-restore step.
|
|
17701
17592
|
if (this._configuringMask) return;
|
|
17702
17593
|
this._configuringMask = true;
|
|
17703
17594
|
try {
|
|
17595
|
+
// Destroy any prior mask so IMask can attach fresh under the new format.
|
|
17596
|
+
// Null the reference too — if the new maskOptions.mask is falsy (e.g.
|
|
17597
|
+
// type switched from credit-card to text) the IMask() reassignment
|
|
17598
|
+
// below is skipped, and downstream writes at line ~823 would otherwise
|
|
17599
|
+
// route through the destroyed instance.
|
|
17704
17600
|
if (this.maskInstance) {
|
|
17705
17601
|
this.maskInstance.destroy();
|
|
17602
|
+
this.maskInstance = null;
|
|
17706
17603
|
}
|
|
17707
17604
|
|
|
17708
|
-
// Pass new format to util
|
|
17709
17605
|
this.util.updateFormat(this.format);
|
|
17710
17606
|
|
|
17711
17607
|
const maskOptions = this.util.getMaskOptions(this.type, this.format);
|
|
17712
17608
|
|
|
17713
17609
|
if (this.inputElement && maskOptions.mask) {
|
|
17714
|
-
|
|
17715
|
-
//
|
|
17716
|
-
//
|
|
17717
|
-
//
|
|
17718
|
-
// When the format changes (e.g. locale switch) and we have a valid ISO
|
|
17719
|
-
// model value, compute the display string for the NEW format instead of
|
|
17720
|
-
// re-using the old display string, which may be invalid in the new mask.
|
|
17610
|
+
// Capture the current display so it can be re-applied after IMask
|
|
17611
|
+
// attaches. The restore at the bottom goes through maskInstance.value
|
|
17612
|
+
// (not inputElement.value directly) so the mask's internal state and
|
|
17613
|
+
// the input's displayed text stay in lock-step.
|
|
17721
17614
|
let existingValue = this.inputElement.value;
|
|
17615
|
+
|
|
17616
|
+
// Format-change case (e.g. locale switch): existingValue is the OLD
|
|
17617
|
+
// mask's display string and may not parse under the new mask. When
|
|
17618
|
+
// we have a valid date model, rebuild the display from valueObject
|
|
17619
|
+
// (the canonical source) using the new mask's format function.
|
|
17722
17620
|
if (
|
|
17723
17621
|
this.util.isFullDateFormat(this.type, this.format) &&
|
|
17724
17622
|
this.value &&
|
|
17725
|
-
|
|
17726
|
-
this.valueObject instanceof Date &&
|
|
17727
|
-
!Number.isNaN(this.valueObject.getTime()) &&
|
|
17623
|
+
this.valueObject &&
|
|
17728
17624
|
typeof maskOptions.format === 'function'
|
|
17729
17625
|
) {
|
|
17730
17626
|
existingValue = maskOptions.format(this.valueObject);
|
|
17731
17627
|
}
|
|
17732
17628
|
|
|
17629
|
+
// Clear before IMask attaches so the constructor seeds an empty
|
|
17630
|
+
// internal value. Otherwise IMask reads the stale unmasked string
|
|
17631
|
+
// and emits a spurious 'accept' before the restore below runs.
|
|
17733
17632
|
this.skipNextProgrammaticInputEvent = true;
|
|
17734
17633
|
this.inputElement.value = '';
|
|
17735
17634
|
|
|
17736
17635
|
this.maskInstance = IMask(this.inputElement, maskOptions);
|
|
17737
17636
|
|
|
17637
|
+
// Mask fires 'accept' on every value change, including the restore
|
|
17638
|
+
// step below. Skip events fired during configureAutoFormatting so
|
|
17639
|
+
// we don't overwrite a value the parent just pushed.
|
|
17738
17640
|
this.maskInstance.on('accept', () => {
|
|
17739
|
-
// Suppress propagation during configureAutoFormatting's own value-restoration
|
|
17740
|
-
// (line below) — the mask emits 'accept' on every value-set, including ours,
|
|
17741
|
-
// and we don't want to overwrite a value the parent just pushed.
|
|
17742
17641
|
if (this._configuringMask) return;
|
|
17743
17642
|
this.value = this.util.toModelValue(this.maskInstance.value, this.format);
|
|
17744
17643
|
if (this.type === "date") {
|
|
@@ -17746,6 +17645,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
17746
17645
|
}
|
|
17747
17646
|
});
|
|
17748
17647
|
|
|
17648
|
+
// Mask fires 'complete' on the restore step below for any value that
|
|
17649
|
+
// happens to be a complete match. Same setup-suppression as 'accept'.
|
|
17749
17650
|
this.maskInstance.on('complete', () => {
|
|
17750
17651
|
if (this._configuringMask) return;
|
|
17751
17652
|
this.value = this.util.toModelValue(this.maskInstance.value, this.format);
|
|
@@ -17754,7 +17655,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
17754
17655
|
}
|
|
17755
17656
|
});
|
|
17756
17657
|
|
|
17757
|
-
//
|
|
17658
|
+
// Write existingValue through the mask (not the input directly) so
|
|
17659
|
+
// the mask reformats it under the new rules and keeps its internal
|
|
17660
|
+
// _value aligned with the input's displayed text.
|
|
17758
17661
|
if (existingValue) {
|
|
17759
17662
|
this.maskInstance.value = existingValue;
|
|
17760
17663
|
}
|
|
@@ -17848,10 +17751,10 @@ class BaseInput extends AuroElement$1 {
|
|
|
17848
17751
|
// the gated types currently support it, since the list is a public
|
|
17849
17752
|
// property a consumer could mutate.
|
|
17850
17753
|
if (this.setSelectionInputTypes.includes(this.type)) {
|
|
17851
|
-
let selectionStart;
|
|
17754
|
+
let selectionStart = null;
|
|
17852
17755
|
try {
|
|
17853
|
-
selectionStart = this.inputElement
|
|
17854
|
-
} catch
|
|
17756
|
+
({ selectionStart } = this.inputElement);
|
|
17757
|
+
} catch {
|
|
17855
17758
|
return;
|
|
17856
17759
|
}
|
|
17857
17760
|
if (typeof selectionStart !== 'number') {
|
|
@@ -17860,7 +17763,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
17860
17763
|
this.updateComplete.then(() => {
|
|
17861
17764
|
try {
|
|
17862
17765
|
this.inputElement.setSelectionRange(selectionStart, selectionStart);
|
|
17863
|
-
} catch
|
|
17766
|
+
} catch {
|
|
17864
17767
|
// Some input types (number/email in certain UAs) throw on
|
|
17865
17768
|
// setSelectionRange; swallow and let the native cursor stand.
|
|
17866
17769
|
}
|
|
@@ -17954,7 +17857,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
17954
17857
|
*/
|
|
17955
17858
|
reset() {
|
|
17956
17859
|
this.value = undefined;
|
|
17957
|
-
this.setDateObjectProperty('valueObject', undefined);
|
|
17958
17860
|
this.validation.reset(this);
|
|
17959
17861
|
}
|
|
17960
17862
|
|
|
@@ -17963,7 +17865,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
17963
17865
|
*/
|
|
17964
17866
|
clear() {
|
|
17965
17867
|
this.value = undefined;
|
|
17966
|
-
this.setDateObjectProperty('valueObject', undefined);
|
|
17967
17868
|
}
|
|
17968
17869
|
|
|
17969
17870
|
/**
|
|
@@ -18038,7 +17939,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
18038
17939
|
/**
|
|
18039
17940
|
* Function to support credit-card feature type.
|
|
18040
17941
|
* @private
|
|
18041
|
-
* @deprecated https://dev.azure.com/itsals/E_Retain_Content/_workitems/edit/1557296
|
|
17942
|
+
* @deprecated See https://dev.azure.com/itsals/E_Retain_Content/_workitems/edit/1557296.
|
|
18042
17943
|
* @returns {object} JSON with data for credit card formatting.
|
|
18043
17944
|
*/
|
|
18044
17945
|
matchInputValueToCreditCard() {
|
|
@@ -18492,7 +18393,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18492
18393
|
}
|
|
18493
18394
|
};
|
|
18494
18395
|
|
|
18495
|
-
var formkitVersion$1 = '
|
|
18396
|
+
var formkitVersion$1 = '202607011652';
|
|
18496
18397
|
|
|
18497
18398
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18498
18399
|
// See LICENSE in the project root for license information.
|
|
@@ -18815,7 +18716,7 @@ class AuroInput extends BaseInput {
|
|
|
18815
18716
|
/**
|
|
18816
18717
|
* Determines default help text string.
|
|
18817
18718
|
* @private
|
|
18818
|
-
* @deprecated https://dev.azure.com/itsals/E_Retain_Content/_workitems/edit/1557296
|
|
18719
|
+
* @deprecated See https://dev.azure.com/itsals/E_Retain_Content/_workitems/edit/1557296.
|
|
18819
18720
|
* @returns {string} Evaluates pre-determined help text.
|
|
18820
18721
|
*/
|
|
18821
18722
|
getHelpText() {
|
|
@@ -19618,7 +19519,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
19618
19519
|
}
|
|
19619
19520
|
}
|
|
19620
19521
|
|
|
19621
|
-
var formkitVersion = '
|
|
19522
|
+
var formkitVersion = '202607011652';
|
|
19622
19523
|
|
|
19623
19524
|
var styleCss$3 = i$6`.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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
19624
19525
|
|
|
@@ -19986,12 +19887,23 @@ function getOptionLabel(option) {
|
|
|
19986
19887
|
if (!option) {
|
|
19987
19888
|
return '';
|
|
19988
19889
|
}
|
|
19989
|
-
|
|
19990
|
-
|
|
19991
|
-
if (
|
|
19992
|
-
|
|
19890
|
+
|
|
19891
|
+
// Consumer-provided override: short-circuit the DOM walk entirely.
|
|
19892
|
+
if (option.dataset && option.dataset.label) {
|
|
19893
|
+
return option.dataset.label;
|
|
19894
|
+
}
|
|
19895
|
+
|
|
19896
|
+
// Walk direct children — the `slot` attribute only applies to direct children
|
|
19897
|
+
// of the slot host, so a shallow filter is sufficient. Avoids the cloneNode +
|
|
19898
|
+
// querySelector allocation that ran on every keystroke via syncValuesAndStates.
|
|
19899
|
+
let text = '';
|
|
19900
|
+
for (const node of option.childNodes) {
|
|
19901
|
+
const isDisplayValueSlot = node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'displayValue';
|
|
19902
|
+
if (!isDisplayValueSlot) {
|
|
19903
|
+
text += node.textContent || '';
|
|
19904
|
+
}
|
|
19993
19905
|
}
|
|
19994
|
-
return
|
|
19906
|
+
return text.replace(/\s+/gu, ' ').trim();
|
|
19995
19907
|
}
|
|
19996
19908
|
|
|
19997
19909
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
@@ -20066,8 +19978,6 @@ class AuroCombobox extends AuroElement {
|
|
|
20066
19978
|
this.availableOptions = [];
|
|
20067
19979
|
this.dropdownId = undefined;
|
|
20068
19980
|
this.dropdownOpen = false;
|
|
20069
|
-
this.triggerExpandedState = false;
|
|
20070
|
-
this._expandedTimeout = null;
|
|
20071
19981
|
this._inFullscreenTransition = false;
|
|
20072
19982
|
this.errorMessage = null;
|
|
20073
19983
|
this.isHiddenWhileLoading = false;
|
|
@@ -20078,6 +19988,30 @@ class AuroCombobox extends AuroElement {
|
|
|
20078
19988
|
this.touched = false;
|
|
20079
19989
|
this.validation = new AuroFormValidation$1();
|
|
20080
19990
|
this.validity = undefined;
|
|
19991
|
+
this._userTyped = false;
|
|
19992
|
+
// Tracks every setTimeout scheduled via _scheduleTimer so
|
|
19993
|
+
// disconnectedCallback can cancel them. Without this, a detached
|
|
19994
|
+
// combobox's pending timers still fire — most are no-ops, but
|
|
19995
|
+
// configureMenu's racing-condition retry would otherwise loop.
|
|
19996
|
+
this._pendingTimers = new Set();
|
|
19997
|
+
}
|
|
19998
|
+
|
|
19999
|
+
/**
|
|
20000
|
+
* Wraps setTimeout and records the timer id so disconnectedCallback
|
|
20001
|
+
* can cancel any outstanding callbacks. The id is removed from the set
|
|
20002
|
+
* once the callback fires so the set doesn't grow unbounded.
|
|
20003
|
+
* @param {Function} fn - Callback to run.
|
|
20004
|
+
* @param {number} ms - Delay in milliseconds.
|
|
20005
|
+
* @returns {number} The timer id.
|
|
20006
|
+
* @private
|
|
20007
|
+
*/
|
|
20008
|
+
_scheduleTimer(fn, ms) {
|
|
20009
|
+
const id = setTimeout(() => {
|
|
20010
|
+
this._pendingTimers.delete(id);
|
|
20011
|
+
fn();
|
|
20012
|
+
}, ms);
|
|
20013
|
+
this._pendingTimers.add(id);
|
|
20014
|
+
return id;
|
|
20081
20015
|
}
|
|
20082
20016
|
|
|
20083
20017
|
// This function is to define props used within the scope of this component
|
|
@@ -20439,17 +20373,6 @@ class AuroCombobox extends AuroElement {
|
|
|
20439
20373
|
attribute: false
|
|
20440
20374
|
},
|
|
20441
20375
|
|
|
20442
|
-
/**
|
|
20443
|
-
* Deferred aria-expanded state for the trigger input.
|
|
20444
|
-
* Delays the "true" transition so VoiceOver finishes its character echo
|
|
20445
|
-
* before announcing "expanded".
|
|
20446
|
-
* @private
|
|
20447
|
-
*/
|
|
20448
|
-
triggerExpandedState: {
|
|
20449
|
-
type: Boolean,
|
|
20450
|
-
reflect: false,
|
|
20451
|
-
attribute: false
|
|
20452
|
-
},
|
|
20453
20376
|
};
|
|
20454
20377
|
}
|
|
20455
20378
|
|
|
@@ -20472,13 +20395,6 @@ class AuroCombobox extends AuroElement {
|
|
|
20472
20395
|
return this.input.value;
|
|
20473
20396
|
}
|
|
20474
20397
|
|
|
20475
|
-
// /**
|
|
20476
|
-
// * Sets the value of the input element within the combobox.
|
|
20477
|
-
// */
|
|
20478
|
-
// set inputValue(value) {
|
|
20479
|
-
// this.input.value = value;
|
|
20480
|
-
// }
|
|
20481
|
-
|
|
20482
20398
|
/**
|
|
20483
20399
|
* Checks if the element is valid.
|
|
20484
20400
|
* @returns {boolean} - Returns true if the element is valid, false otherwise.
|
|
@@ -20605,7 +20521,7 @@ class AuroCombobox extends AuroElement {
|
|
|
20605
20521
|
if (this.menu) {
|
|
20606
20522
|
this.menu.matchWord = normalizeFilterValue(this.input.value);
|
|
20607
20523
|
}
|
|
20608
|
-
const label = getOptionLabel(this.menu.optionSelected)
|
|
20524
|
+
const label = getOptionLabel(this.menu.optionSelected);
|
|
20609
20525
|
this.updateTriggerTextDisplay(label || this.value);
|
|
20610
20526
|
}
|
|
20611
20527
|
|
|
@@ -20619,44 +20535,16 @@ class AuroCombobox extends AuroElement {
|
|
|
20619
20535
|
// in suggestion mode, do not override input value if no selection has been made and the input currently has focus
|
|
20620
20536
|
const isInputFocusedWithNoSelection = !this.menu.value && (this.input.matches(':focus-within') || (this.inputInBib && this.inputInBib.matches(':focus-within')));
|
|
20621
20537
|
|
|
20622
|
-
|
|
20623
|
-
|
|
20624
|
-
|
|
20625
|
-
// syncValuesAndStates re-enters here during typing when both inputs
|
|
20626
|
-
// already match, and a no-op flag flip would make the bib branch's
|
|
20627
|
-
// bail eat legitimate user-input events.
|
|
20628
|
-
const triggerNeedsSync = this.input.value !== nextValue;
|
|
20629
|
-
const bibNeedsSync = Boolean(this.inputInBib && this.inputInBib !== this.input && this.inputInBib.value !== nextValue);
|
|
20630
|
-
if (triggerNeedsSync || bibNeedsSync) {
|
|
20631
|
-
this._syncingDisplayValue = true;
|
|
20632
|
-
if (triggerNeedsSync) {
|
|
20633
|
-
this.input.value = nextValue;
|
|
20634
|
-
}
|
|
20635
|
-
if (bibNeedsSync) {
|
|
20636
|
-
this.inputInBib.value = nextValue;
|
|
20637
|
-
}
|
|
20638
|
-
const pending = [];
|
|
20639
|
-
if (triggerNeedsSync) {
|
|
20640
|
-
pending.push(this.input.updateComplete);
|
|
20641
|
-
}
|
|
20642
|
-
if (bibNeedsSync) {
|
|
20643
|
-
pending.push(this.inputInBib.updateComplete);
|
|
20644
|
-
}
|
|
20645
|
-
Promise.all(pending).then(() => {
|
|
20646
|
-
// imask reasserts otherwise, and handleBlur reverts to its stale value.
|
|
20647
|
-
if (triggerNeedsSync && this.input.maskInstance && typeof this.input.maskInstance.updateValue === 'function') {
|
|
20648
|
-
this.input.maskInstance.updateValue();
|
|
20649
|
-
}
|
|
20650
|
-
if (bibNeedsSync && this.inputInBib && this.inputInBib.maskInstance && typeof this.inputInBib.maskInstance.updateValue === 'function') {
|
|
20651
|
-
this.inputInBib.maskInstance.updateValue();
|
|
20652
|
-
}
|
|
20653
|
-
this._syncingDisplayValue = false;
|
|
20654
|
-
});
|
|
20655
|
-
}
|
|
20538
|
+
const suppressed = this.persistInput || (this.behavior === 'suggestion' && isInputFocusedWithNoSelection);
|
|
20539
|
+
if (!suppressed) {
|
|
20540
|
+
this.syncInputValuesAcrossTriggerAndBib(label || this.value);
|
|
20656
20541
|
}
|
|
20657
20542
|
|
|
20658
|
-
//
|
|
20659
|
-
|
|
20543
|
+
// Replace any previously appended displayValue clone in the trigger.
|
|
20544
|
+
// :not(slot) excludes the template's <slot name="displayValue"
|
|
20545
|
+
// slot="displayValue"> forwarder, which also has slot="displayValue"
|
|
20546
|
+
// and would otherwise be matched first and removed.
|
|
20547
|
+
const displayValueInTrigger = this.input.querySelector('[slot="displayValue"]:not(slot)');
|
|
20660
20548
|
|
|
20661
20549
|
if (displayValueInTrigger) {
|
|
20662
20550
|
displayValueInTrigger.remove();
|
|
@@ -20680,6 +20568,53 @@ class AuroCombobox extends AuroElement {
|
|
|
20680
20568
|
this.requestUpdate();
|
|
20681
20569
|
}
|
|
20682
20570
|
|
|
20571
|
+
/**
|
|
20572
|
+
* Writes nextValue to the trigger input and the bib input when their current
|
|
20573
|
+
* value differs, then re-asserts imask after Lit's update flushes.
|
|
20574
|
+
* @param {string} nextValue - The value to write to both inputs.
|
|
20575
|
+
* @returns {Promise<void>} Resolves after both inputs flush and imask
|
|
20576
|
+
* re-asserts; resolves immediately when no sync is needed.
|
|
20577
|
+
* @private
|
|
20578
|
+
*/
|
|
20579
|
+
async syncInputValuesAcrossTriggerAndBib(nextValue) {
|
|
20580
|
+
// Only set the flag when there's an actual write to suppress —
|
|
20581
|
+
// syncValuesAndStates re-enters here during typing when both inputs
|
|
20582
|
+
// already match, and a no-op flag flip would make the bib branch's
|
|
20583
|
+
// bail eat legitimate user-input events.
|
|
20584
|
+
const triggerNeedsSync = this.input.value !== nextValue;
|
|
20585
|
+
const bibNeedsSync = Boolean(this.inputInBib) && this.inputInBib.value !== nextValue;
|
|
20586
|
+
if (!triggerNeedsSync && !bibNeedsSync) {
|
|
20587
|
+
return;
|
|
20588
|
+
}
|
|
20589
|
+
|
|
20590
|
+
this._syncingDisplayValue = true;
|
|
20591
|
+
|
|
20592
|
+
const pending = [];
|
|
20593
|
+
if (triggerNeedsSync) {
|
|
20594
|
+
this.input.value = nextValue;
|
|
20595
|
+
pending.push(this.input.updateComplete);
|
|
20596
|
+
}
|
|
20597
|
+
if (bibNeedsSync) {
|
|
20598
|
+
this.inputInBib.value = nextValue;
|
|
20599
|
+
pending.push(this.inputInBib.updateComplete);
|
|
20600
|
+
}
|
|
20601
|
+
// finally — not a bare .then — so that an imask throw (see commit
|
|
20602
|
+
// d1857401c: imask can throw on credit-card format change) doesn't strand
|
|
20603
|
+
// _syncingDisplayValue=true and silently swallow every subsequent input.
|
|
20604
|
+
try {
|
|
20605
|
+
await Promise.all(pending);
|
|
20606
|
+
// imask reasserts otherwise, and handleBlur reverts to its stale value.
|
|
20607
|
+
if (triggerNeedsSync && this.input.maskInstance && typeof this.input.maskInstance.updateValue === 'function') {
|
|
20608
|
+
this.input.maskInstance.updateValue();
|
|
20609
|
+
}
|
|
20610
|
+
if (bibNeedsSync && this.inputInBib.maskInstance && typeof this.inputInBib.maskInstance.updateValue === 'function') {
|
|
20611
|
+
this.inputInBib.maskInstance.updateValue();
|
|
20612
|
+
}
|
|
20613
|
+
} finally {
|
|
20614
|
+
this._syncingDisplayValue = false;
|
|
20615
|
+
}
|
|
20616
|
+
}
|
|
20617
|
+
|
|
20683
20618
|
/**
|
|
20684
20619
|
* Processes hidden state of all menu options and determines if there are any available options not hidden.
|
|
20685
20620
|
* @private
|
|
@@ -20688,6 +20623,13 @@ class AuroCombobox extends AuroElement {
|
|
|
20688
20623
|
handleMenuOptions() {
|
|
20689
20624
|
this.generateOptionsArray();
|
|
20690
20625
|
this.availableOptions = [];
|
|
20626
|
+
// Single source of truth for the menu's filter/highlight token per call.
|
|
20627
|
+
// syncValuesAndStates re-writes the same value on exact-match keystrokes —
|
|
20628
|
+
// Lit's hasChanged makes that a no-op — and the prior duplicate set inside
|
|
20629
|
+
// handleTriggerInputValueChange is gone.
|
|
20630
|
+
if (this.menu) {
|
|
20631
|
+
this.menu.matchWord = normalizeFilterValue(this.input.value);
|
|
20632
|
+
}
|
|
20691
20633
|
this.updateFilter();
|
|
20692
20634
|
|
|
20693
20635
|
// Set aria-setsize/aria-posinset on each visible option so screen readers
|
|
@@ -20699,17 +20641,14 @@ class AuroCombobox extends AuroElement {
|
|
|
20699
20641
|
option.setAttribute('aria-posinset', index + 1);
|
|
20700
20642
|
});
|
|
20701
20643
|
|
|
20702
|
-
if (this.value && this.
|
|
20703
|
-
|
|
20704
|
-
this.setMenuValue(this.value);
|
|
20705
|
-
}
|
|
20706
|
-
|
|
20644
|
+
if (this.input.value && this.menu.options && this.menu.options.some((opt) => opt.value === this.input.value)) {
|
|
20645
|
+
this.setMenuValue(this.input.value);
|
|
20707
20646
|
this.syncValuesAndStates();
|
|
20708
20647
|
}
|
|
20709
20648
|
|
|
20710
|
-
// Re-activate when optionActive is
|
|
20711
|
-
// been reset (e.g. by clearSelection in an async update)
|
|
20712
|
-
// makeSelection() can find the correct option.
|
|
20649
|
+
// Re-activate when optionActive is not in the current scrollable viewport,
|
|
20650
|
+
// or when _index has been reset (e.g. by clearSelection in an async update)
|
|
20651
|
+
// so that makeSelection() can find the correct option.
|
|
20713
20652
|
if (!this.availableOptions.includes(this.menu.optionActive) || this.menu._index < 0) {
|
|
20714
20653
|
this.activateFirstEnabledAvailableOption();
|
|
20715
20654
|
}
|
|
@@ -20782,18 +20721,6 @@ class AuroCombobox extends AuroElement {
|
|
|
20782
20721
|
this.dropdownOpen = ev.detail.expanded;
|
|
20783
20722
|
this.updateMenuShapeSize();
|
|
20784
20723
|
|
|
20785
|
-
// Defer aria-expanded "true" so VoiceOver finishes character echo
|
|
20786
|
-
// before announcing "expanded". Set "false" immediately on close.
|
|
20787
|
-
clearTimeout(this._expandedTimeout);
|
|
20788
|
-
if (this.dropdownOpen) {
|
|
20789
|
-
const expandedDelay = 150;
|
|
20790
|
-
this._expandedTimeout = setTimeout(() => {
|
|
20791
|
-
this.triggerExpandedState = true;
|
|
20792
|
-
}, expandedDelay);
|
|
20793
|
-
} else {
|
|
20794
|
-
this.triggerExpandedState = false;
|
|
20795
|
-
}
|
|
20796
|
-
|
|
20797
20724
|
// Clear aria-activedescendant when dropdown closes
|
|
20798
20725
|
if (!this.dropdownOpen && this.input) {
|
|
20799
20726
|
this.input.setActiveDescendant(null);
|
|
@@ -20843,28 +20770,25 @@ class AuroCombobox extends AuroElement {
|
|
|
20843
20770
|
|
|
20844
20771
|
guardTouchPassthrough(this.menu);
|
|
20845
20772
|
|
|
20846
|
-
//
|
|
20847
|
-
//
|
|
20848
|
-
//
|
|
20773
|
+
// showModal() takes focus away from the trigger. Early focus once
|
|
20774
|
+
// the dialog has painted; the shared doubleRaf below is the fallback
|
|
20775
|
+
// for when the dialog needs an extra frame and also clears the
|
|
20776
|
+
// validation guard.
|
|
20849
20777
|
requestAnimationFrame(() => {
|
|
20850
20778
|
this.setInputFocus();
|
|
20851
20779
|
});
|
|
20852
|
-
|
|
20853
|
-
doubleRaf(() => {
|
|
20854
|
-
this.setInputFocus();
|
|
20855
|
-
this._inFullscreenTransition = false;
|
|
20856
|
-
});
|
|
20857
|
-
} else {
|
|
20858
|
-
// Desktop popover-open: restore the trigger caret to end-of-text.
|
|
20859
|
-
// Clicking the trigger lands on auro-input's floating <label for="…">
|
|
20860
|
-
// overlay; Chrome resets the native input's selection to [0, 0] on
|
|
20861
|
-
// label-focus before any JS runs. setInputFocus()'s non-fullscreen
|
|
20862
|
-
// branch parks the caret at end. doubleRaf lets the dropdown layout
|
|
20863
|
-
// settle first, matching the fullscreen branch timing.
|
|
20864
|
-
doubleRaf(() => {
|
|
20865
|
-
this.setInputFocus();
|
|
20866
|
-
});
|
|
20867
20780
|
}
|
|
20781
|
+
// else (desktop popover-open): Chrome resets the trigger caret to
|
|
20782
|
+
// [0, 0] when its floating <label for="…"> overlay receives focus.
|
|
20783
|
+
// The shared doubleRaf below parks the caret back at end-of-text
|
|
20784
|
+
// after the dropdown layout settles.
|
|
20785
|
+
|
|
20786
|
+
doubleRaf(() => {
|
|
20787
|
+
this.setInputFocus();
|
|
20788
|
+
if (this._inFullscreenTransition) {
|
|
20789
|
+
this._inFullscreenTransition = false;
|
|
20790
|
+
}
|
|
20791
|
+
});
|
|
20868
20792
|
}
|
|
20869
20793
|
});
|
|
20870
20794
|
|
|
@@ -20901,7 +20825,7 @@ class AuroCombobox extends AuroElement {
|
|
|
20901
20825
|
this.dropdown.trigger.inert = false;
|
|
20902
20826
|
}
|
|
20903
20827
|
|
|
20904
|
-
|
|
20828
|
+
this._scheduleTimer(() => {
|
|
20905
20829
|
this.setInputFocus();
|
|
20906
20830
|
}, 0);
|
|
20907
20831
|
});
|
|
@@ -21045,7 +20969,7 @@ class AuroCombobox extends AuroElement {
|
|
|
21045
20969
|
|
|
21046
20970
|
// racing condition on custom-combobox with custom-menu
|
|
21047
20971
|
if (!this.menu) {
|
|
21048
|
-
|
|
20972
|
+
this._scheduleTimer(() => {
|
|
21049
20973
|
this.configureMenu();
|
|
21050
20974
|
}, 0);
|
|
21051
20975
|
return;
|
|
@@ -21075,7 +20999,7 @@ class AuroCombobox extends AuroElement {
|
|
|
21075
20999
|
if (this.menu.optionSelected) {
|
|
21076
21000
|
const selected = this.menu.optionSelected;
|
|
21077
21001
|
|
|
21078
|
-
if (
|
|
21002
|
+
if (this.optionSelected !== selected) {
|
|
21079
21003
|
this.optionSelected = selected;
|
|
21080
21004
|
}
|
|
21081
21005
|
|
|
@@ -21088,7 +21012,7 @@ class AuroCombobox extends AuroElement {
|
|
|
21088
21012
|
}
|
|
21089
21013
|
|
|
21090
21014
|
// Update display
|
|
21091
|
-
this.updateTriggerTextDisplay(getOptionLabel(this.optionSelected)
|
|
21015
|
+
this.updateTriggerTextDisplay(getOptionLabel(this.optionSelected));
|
|
21092
21016
|
|
|
21093
21017
|
// Update match word for filtering
|
|
21094
21018
|
const trimmedInput = normalizeFilterValue(this.input.value);
|
|
@@ -21100,17 +21024,24 @@ class AuroCombobox extends AuroElement {
|
|
|
21100
21024
|
// Hide dropdown on selection (except during slot changes)
|
|
21101
21025
|
if (evt.detail && evt.detail.source !== 'slotchange') {
|
|
21102
21026
|
// do not close while typing in suggestion mode with no value selected, to allow freeform input
|
|
21103
|
-
|
|
21104
|
-
|
|
21027
|
+
this.hideBib();
|
|
21028
|
+
|
|
21029
|
+
// Move focus to the clear button when the user makes a selection.
|
|
21030
|
+
if (!isEcho && this.menu.value !== undefined) {
|
|
21031
|
+
this.setClearBtnFocus();
|
|
21105
21032
|
}
|
|
21106
21033
|
|
|
21107
21034
|
// Announce the selection after the dropdown closes so it isn't
|
|
21108
21035
|
// overridden by VoiceOver's "collapsed" announcement from aria-expanded.
|
|
21036
|
+
// Skip when there's no selected value (e.g. menu.clearSelection() from
|
|
21037
|
+
// the unmatched-value path), otherwise VoiceOver reads "undefined".
|
|
21109
21038
|
const selectedValue = this.menu.value;
|
|
21110
|
-
|
|
21111
|
-
|
|
21112
|
-
|
|
21113
|
-
|
|
21039
|
+
if (selectedValue) {
|
|
21040
|
+
const announcementDelay = 300;
|
|
21041
|
+
this._scheduleTimer(() => {
|
|
21042
|
+
announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
|
|
21043
|
+
}, announcementDelay);
|
|
21044
|
+
}
|
|
21114
21045
|
}
|
|
21115
21046
|
|
|
21116
21047
|
// Programmatic value syncs leave availableOptions stale because
|
|
@@ -21119,22 +21050,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21119
21050
|
// only — fresh user selections take the existing hideBib path.
|
|
21120
21051
|
if (isEcho && this.menu.optionSelected) {
|
|
21121
21052
|
this._programmaticFilterRefresh = true;
|
|
21122
|
-
this.handleMenuOptions();
|
|
21123
|
-
setTimeout(() => {
|
|
21124
|
-
this._programmaticFilterRefresh = false;
|
|
21125
|
-
}, 0);
|
|
21126
|
-
}
|
|
21127
|
-
|
|
21128
|
-
// base-input skips auto-validate when focus is inside its own shadow,
|
|
21129
|
-
// which it is after setTriggerInputFocus — re-run so prior tooShort
|
|
21130
|
-
// clears. processCreditCard reasserts errorMessage on every render.
|
|
21131
|
-
if (!isEcho && this.menu.optionSelected && this.input.validate) {
|
|
21132
|
-
this.input.updateComplete.then(() => {
|
|
21133
|
-
this.input.validate(true);
|
|
21134
|
-
if (this.input.validity === 'valid') {
|
|
21135
|
-
this.input.errorMessage = '';
|
|
21136
|
-
}
|
|
21137
|
-
});
|
|
21138
21053
|
}
|
|
21139
21054
|
});
|
|
21140
21055
|
|
|
@@ -21147,6 +21062,14 @@ class AuroCombobox extends AuroElement {
|
|
|
21147
21062
|
// stale option. Safe from re-entrancy because any resulting
|
|
21148
21063
|
// input.value changes dispatch isProgrammatic events.
|
|
21149
21064
|
this.menu.addEventListener('auroMenu-selectValueFailure', () => {
|
|
21065
|
+
// Announce the rejection BEFORE we clear `this.value` so the live
|
|
21066
|
+
// region carries the attempted value — without this the bib closes
|
|
21067
|
+
// silently and screen-reader users get no signal that their request
|
|
21068
|
+
// (e.g. a direct setMenuValue() call) was dropped.
|
|
21069
|
+
const attemptedValue = this.value;
|
|
21070
|
+
if (attemptedValue) {
|
|
21071
|
+
announceToScreenReader(this._getAnnouncementRoot(), `No matching option for ${attemptedValue}`);
|
|
21072
|
+
}
|
|
21150
21073
|
this.value = undefined;
|
|
21151
21074
|
this.optionSelected = undefined;
|
|
21152
21075
|
});
|
|
@@ -21158,10 +21081,13 @@ class AuroCombobox extends AuroElement {
|
|
|
21158
21081
|
this.input.setActiveDescendant(this.optionActive);
|
|
21159
21082
|
}
|
|
21160
21083
|
|
|
21161
|
-
//
|
|
21162
|
-
//
|
|
21163
|
-
//
|
|
21164
|
-
|
|
21084
|
+
// In fullscreen mode the menu sits inside a nested <dialog> shadow root,
|
|
21085
|
+
// and aria-activedescendant references across that boundary are lost —
|
|
21086
|
+
// VoiceOver/NVDA don't read the active option natively, so we mirror it
|
|
21087
|
+
// into the polite live region. In popover mode aria-activedescendant on
|
|
21088
|
+
// the trigger input is read natively; double-announcing would flood the
|
|
21089
|
+
// queue on arrow-key repeat.
|
|
21090
|
+
if (this.optionActive && this.dropdown.isBibFullscreen) {
|
|
21165
21091
|
const optionText = this.optionActive.textContent.trim();
|
|
21166
21092
|
const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
|
|
21167
21093
|
const optionIndex = this.availableOptions.indexOf(this.optionActive) + 1;
|
|
@@ -21194,7 +21120,12 @@ class AuroCombobox extends AuroElement {
|
|
|
21194
21120
|
* Validate every time we remove focus from the combo box.
|
|
21195
21121
|
*/
|
|
21196
21122
|
this.addEventListener('focusout', () => {
|
|
21197
|
-
|
|
21123
|
+
// Skip while the dropdown is open — focus transits out briefly on
|
|
21124
|
+
// mousedown of a menu option (popover top-layer breaks :focus-within),
|
|
21125
|
+
// and validating against the pre-selection value flashes a stale error
|
|
21126
|
+
// between mousedown and mouseup. The next focusout fires after the
|
|
21127
|
+
// dropdown closes and validates against the post-selection value.
|
|
21128
|
+
if (!this.componentHasFocus && !this._inFullscreenTransition && !this.dropdownOpen) {
|
|
21198
21129
|
this.validate();
|
|
21199
21130
|
}
|
|
21200
21131
|
});
|
|
@@ -21257,49 +21188,40 @@ class AuroCombobox extends AuroElement {
|
|
|
21257
21188
|
if (this._syncingDisplayValue) {
|
|
21258
21189
|
return;
|
|
21259
21190
|
}
|
|
21260
|
-
this._syncingBibValue = true;
|
|
21261
|
-
this.input.value = this.inputInBib.value;
|
|
21262
|
-
this.input.updateComplete.then(() => {
|
|
21263
|
-
this._syncingBibValue = false;
|
|
21264
|
-
});
|
|
21265
|
-
|
|
21266
|
-
// Run filtering inline — the re-entrant event won't reach this code.
|
|
21267
|
-
this.menu.matchWord = normalizeFilterValue(this.inputInBib.value);
|
|
21268
|
-
this.optionActive = null;
|
|
21269
21191
|
|
|
21270
|
-
//
|
|
21271
|
-
//
|
|
21272
|
-
//
|
|
21273
|
-
if (this.
|
|
21274
|
-
this.
|
|
21192
|
+
// Filtering runs via re-entrance: writing this.input.value below
|
|
21193
|
+
// dispatches an 'input' event that the trigger's listener routes to
|
|
21194
|
+
// handleTriggerInputValueChange, which refreshes the menu filter.
|
|
21195
|
+
if (this.input.value !== this.inputInBib.value) {
|
|
21196
|
+
this._syncingBibValue = true;
|
|
21197
|
+
this.input.value = this.inputInBib.value;
|
|
21198
|
+
this.input.updateComplete.then(() => {
|
|
21199
|
+
this._syncingBibValue = false;
|
|
21200
|
+
});
|
|
21275
21201
|
}
|
|
21276
21202
|
|
|
21277
|
-
this.handleMenuOptions();
|
|
21278
21203
|
this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
|
|
21279
|
-
|
|
21204
|
+
} else if (event.target === this.input) {
|
|
21205
|
+
|
|
21206
|
+
// Also sync the native input immediately so keystrokes arriving
|
|
21207
|
+
// before Lit's async update cycle (e.g. rapid Backspaces during a
|
|
21208
|
+
// fullscreen transition) operate on the correct content.
|
|
21209
|
+
// Skip the next programmatic input event to prevent the patched setter
|
|
21210
|
+
// from re-entering handleInputValueChange via the bib path.
|
|
21211
|
+
const bibNativeInput = this.inputInBib.inputElement;
|
|
21212
|
+
if (bibNativeInput && bibNativeInput.value !== this.input.value) {
|
|
21213
|
+
this.inputInBib.skipNextProgrammaticInputEvent = true;
|
|
21214
|
+
bibNativeInput.value = this.input.value || '';
|
|
21215
|
+
}
|
|
21280
21216
|
}
|
|
21281
21217
|
|
|
21218
|
+
this.value = this.input.value;
|
|
21219
|
+
|
|
21282
21220
|
// Ignore re-entrant input events caused by programmatic value sets.
|
|
21283
21221
|
if (this._syncingBibValue || this._syncingDisplayValue) {
|
|
21284
21222
|
return;
|
|
21285
21223
|
}
|
|
21286
21224
|
|
|
21287
|
-
this.inputInBib.value = this.input.value;
|
|
21288
|
-
|
|
21289
|
-
// Also sync the native input immediately so keystrokes arriving
|
|
21290
|
-
// before Lit's async update cycle (e.g. rapid Backspaces during a
|
|
21291
|
-
// fullscreen transition) operate on the correct content.
|
|
21292
|
-
// Skip the next programmatic input event to prevent the patched setter
|
|
21293
|
-
// from re-entering handleInputValueChange via the bib path.
|
|
21294
|
-
const bibNativeInput = this.inputInBib.inputElement;
|
|
21295
|
-
if (bibNativeInput && bibNativeInput.value !== this.input.value) {
|
|
21296
|
-
this.inputInBib.skipNextProgrammaticInputEvent = true;
|
|
21297
|
-
bibNativeInput.value = this.input.value || '';
|
|
21298
|
-
}
|
|
21299
|
-
|
|
21300
|
-
this.menu.matchWord = normalizeFilterValue(this.input.value);
|
|
21301
|
-
this.optionActive = null;
|
|
21302
|
-
|
|
21303
21225
|
if (this.behavior === 'suggestion') {
|
|
21304
21226
|
this.value = this.input.value;
|
|
21305
21227
|
}
|
|
@@ -21307,7 +21229,6 @@ class AuroCombobox extends AuroElement {
|
|
|
21307
21229
|
if (!this.input.value && !this._clearing) {
|
|
21308
21230
|
this.clear();
|
|
21309
21231
|
}
|
|
21310
|
-
this.handleMenuOptions();
|
|
21311
21232
|
|
|
21312
21233
|
// Validate only if the value was set programmatically (not during user
|
|
21313
21234
|
// interaction). In fullscreen dialog mode, componentHasFocus returns false
|
|
@@ -21317,34 +21238,44 @@ class AuroCombobox extends AuroElement {
|
|
|
21317
21238
|
this.validate();
|
|
21318
21239
|
}
|
|
21319
21240
|
|
|
21320
|
-
|
|
21321
|
-
|
|
21322
|
-
|
|
21323
|
-
|
|
21324
|
-
|
|
21325
|
-
|
|
21326
|
-
|
|
21327
|
-
|
|
21328
|
-
|
|
21241
|
+
this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
|
|
21242
|
+
}
|
|
21243
|
+
|
|
21244
|
+
/**
|
|
21245
|
+
* Handles input value changes originating from the trigger input.
|
|
21246
|
+
* Refreshes menu options and filtering, delegates to handleInputValueChange
|
|
21247
|
+
* for value synchronization, and manages fullscreen bib focus.
|
|
21248
|
+
* @private
|
|
21249
|
+
* @param {Event} event - The input event from the trigger input element.
|
|
21250
|
+
* @returns {void}
|
|
21251
|
+
*/
|
|
21252
|
+
handleTriggerInputValueChange(event) {
|
|
21253
|
+
// 'input' fires for every user-initiated value change — typing, paste,
|
|
21254
|
+
// IME composition end, dead-key composition, drag-drop. Flip _userTyped
|
|
21255
|
+
// here so updated('availableOptions') auto-opens the bib for sources
|
|
21256
|
+
// that keydown alone misses: paste fires no keydown, IME uses
|
|
21257
|
+
// key='Process', and dead keys produce multi-char keys (all bypass the
|
|
21258
|
+
// prior keydown.key.length===1 gate). Skip programmatic syncs.
|
|
21259
|
+
if (!this._syncingDisplayValue && !this._syncingBibValue && !this._programmaticFilterRefresh) {
|
|
21260
|
+
this._userTyped = true;
|
|
21329
21261
|
}
|
|
21330
21262
|
|
|
21331
|
-
|
|
21332
|
-
|
|
21333
|
-
|
|
21334
|
-
|
|
21335
|
-
|
|
21336
|
-
// dialog opens — the user then has to tap the input again to resume
|
|
21337
|
-
// typing.
|
|
21338
|
-
if (this.dropdown.isBibFullscreen && this.input.value && this.input.value.length > 0) {
|
|
21339
|
-
if (!this.dropdown.isPopoverVisible) {
|
|
21340
|
-
this.showBib();
|
|
21341
|
-
}
|
|
21342
|
-
if (this.dropdown.isPopoverVisible) {
|
|
21343
|
-
this.setInputFocus();
|
|
21344
|
-
}
|
|
21263
|
+
this.handleMenuOptions();
|
|
21264
|
+
this.optionActive = null;
|
|
21265
|
+
|
|
21266
|
+
if (this.value === this.input.value) {
|
|
21267
|
+
return;
|
|
21345
21268
|
}
|
|
21346
21269
|
|
|
21347
|
-
this.
|
|
21270
|
+
this.handleInputValueChange(event);
|
|
21271
|
+
|
|
21272
|
+
if (this.dropdown.isBibFullscreen && this.input.value && this.input.value.length > 0 && this.dropdown.isPopoverVisible) {
|
|
21273
|
+
this.setInputFocus();
|
|
21274
|
+
}
|
|
21275
|
+
|
|
21276
|
+
if (this._programmaticFilterRefresh) {
|
|
21277
|
+
this._programmaticFilterRefresh = false;
|
|
21278
|
+
}
|
|
21348
21279
|
}
|
|
21349
21280
|
|
|
21350
21281
|
/**
|
|
@@ -21412,6 +21343,11 @@ class AuroCombobox extends AuroElement {
|
|
|
21412
21343
|
disconnectedCallback() {
|
|
21413
21344
|
super.disconnectedCallback();
|
|
21414
21345
|
this._inFullscreenTransition = false;
|
|
21346
|
+
// Cancel any outstanding timers so detached callbacks don't fire on
|
|
21347
|
+
// disposed DOM — most are no-ops, but configureMenu's racing-condition
|
|
21348
|
+
// retry would otherwise keep rescheduling itself indefinitely.
|
|
21349
|
+
this._pendingTimers.forEach((id) => clearTimeout(id));
|
|
21350
|
+
this._pendingTimers.clear();
|
|
21415
21351
|
}
|
|
21416
21352
|
|
|
21417
21353
|
firstUpdated() {
|
|
@@ -21453,7 +21389,7 @@ class AuroCombobox extends AuroElement {
|
|
|
21453
21389
|
this.menu.value = value;
|
|
21454
21390
|
// Backup clear: if menu.value === menu.optionSelected.value already, the
|
|
21455
21391
|
// listener won't fire and the flag would swallow the next user click.
|
|
21456
|
-
|
|
21392
|
+
this._scheduleTimer(() => {
|
|
21457
21393
|
this._pendingMenuValueSync = false;
|
|
21458
21394
|
}, 0);
|
|
21459
21395
|
}
|
|
@@ -21470,15 +21406,7 @@ class AuroCombobox extends AuroElement {
|
|
|
21470
21406
|
this.menu.value = undefined;
|
|
21471
21407
|
this.validation.reset(this);
|
|
21472
21408
|
this.touched = false;
|
|
21473
|
-
// Force validity back to the cleared state. validation.reset() calls
|
|
21474
|
-
// validate() at the end, and (post-credit-card-fix) the trigger input's
|
|
21475
|
-
// residual validity may still be copied into the combobox by the
|
|
21476
|
-
// auroInputElements loop. Explicitly clear here so reset() actually
|
|
21477
|
-
// leaves the component in a "no validity" state.
|
|
21478
21409
|
this.validity = undefined;
|
|
21479
|
-
this.errorMessage = '';
|
|
21480
|
-
this.input.validity = undefined;
|
|
21481
|
-
this.input.errorMessage = '';
|
|
21482
21410
|
}
|
|
21483
21411
|
|
|
21484
21412
|
/**
|
|
@@ -21496,6 +21424,17 @@ class AuroCombobox extends AuroElement {
|
|
|
21496
21424
|
this.optionSelected = undefined;
|
|
21497
21425
|
this.value = undefined;
|
|
21498
21426
|
|
|
21427
|
+
// Clear the appended displayValue clone in the trigger if present.
|
|
21428
|
+
// :not(slot) excludes the template's <slot name="displayValue"
|
|
21429
|
+
// slot="displayValue"> forwarder (line 1816), which also has
|
|
21430
|
+
// slot="displayValue" and would otherwise be matched first and removed,
|
|
21431
|
+
// permanently breaking the consumer-provided displayValue slot.
|
|
21432
|
+
const displayValueInTrigger = this.input.querySelector('[slot="displayValue"]:not(slot)');
|
|
21433
|
+
|
|
21434
|
+
if (displayValueInTrigger) {
|
|
21435
|
+
displayValueInTrigger.remove();
|
|
21436
|
+
}
|
|
21437
|
+
|
|
21499
21438
|
if (this.input.value) {
|
|
21500
21439
|
this.input.clear();
|
|
21501
21440
|
}
|
|
@@ -21519,81 +21458,50 @@ class AuroCombobox extends AuroElement {
|
|
|
21519
21458
|
}
|
|
21520
21459
|
|
|
21521
21460
|
updated(changedProperties) {
|
|
21522
|
-
// After the component is ready,
|
|
21461
|
+
// After the component is ready, propagate direct changes down to child components.
|
|
21523
21462
|
if (changedProperties.has('value')) {
|
|
21524
|
-
|
|
21525
|
-
|
|
21526
|
-
|
|
21527
|
-
|
|
21463
|
+
// Only flag programmatic refreshes — user-typed value changes must not
|
|
21464
|
+
// suppress the availableOptions branch's showBib(). Firefox batches
|
|
21465
|
+
// 'value' and 'availableOptions' into the same updated() call, so
|
|
21466
|
+
// setting the flag unconditionally here masks the user-typed open path.
|
|
21467
|
+
if (!this._userTyped) {
|
|
21468
|
+
this._programmaticFilterRefresh = true;
|
|
21528
21469
|
}
|
|
21529
21470
|
|
|
21530
|
-
if (this.
|
|
21531
|
-
|
|
21532
|
-
|
|
21471
|
+
if (this.input.value !== this.value) {
|
|
21472
|
+
// Clear menu.value AND menu.optionSelected together. Clearing only
|
|
21473
|
+
// menu.value leaves the previously-selected option element pinned
|
|
21474
|
+
// as menu.optionSelected; a later auroMenu-selectedOption event
|
|
21475
|
+
// would then write its stale .value back into combobox.value
|
|
21476
|
+
// (e.g. Tab-after-Backspace re-selecting the prior option).
|
|
21477
|
+
if (this.menu.value || this.menu.optionSelected) {
|
|
21478
|
+
this.menu.clearSelection();
|
|
21479
|
+
}
|
|
21533
21480
|
|
|
21534
|
-
|
|
21535
|
-
|
|
21536
|
-
|
|
21537
|
-
|
|
21538
|
-
|
|
21539
|
-
|
|
21540
|
-
|
|
21541
|
-
|
|
21542
|
-
|
|
21543
|
-
|
|
21544
|
-
|
|
21545
|
-
|
|
21546
|
-
|
|
21547
|
-
|
|
21548
|
-
|
|
21549
|
-
|
|
21550
|
-
|
|
21551
|
-
|
|
21552
|
-
// matches to avoid spurious events during the normal typing path.
|
|
21553
|
-
const nextValue = this.value || '';
|
|
21554
|
-
const triggerNeedsSync = this.input.value !== nextValue;
|
|
21555
|
-
const bibNeedsSync = Boolean(this.inputInBib && this.inputInBib !== this.input && this.inputInBib.value !== nextValue);
|
|
21556
|
-
if (triggerNeedsSync || bibNeedsSync) {
|
|
21557
|
-
this._syncingDisplayValue = true;
|
|
21558
|
-
if (triggerNeedsSync) {
|
|
21559
|
-
this.input.value = nextValue;
|
|
21560
|
-
}
|
|
21561
|
-
if (bibNeedsSync) {
|
|
21562
|
-
this.inputInBib.value = nextValue;
|
|
21563
|
-
}
|
|
21564
|
-
const pending = [];
|
|
21565
|
-
if (triggerNeedsSync) {
|
|
21566
|
-
pending.push(this.input.updateComplete);
|
|
21567
|
-
}
|
|
21568
|
-
if (bibNeedsSync) {
|
|
21569
|
-
pending.push(this.inputInBib.updateComplete);
|
|
21570
|
-
}
|
|
21571
|
-
Promise.all(pending).then(() => {
|
|
21572
|
-
if (triggerNeedsSync && this.input.maskInstance && typeof this.input.maskInstance.updateValue === 'function') {
|
|
21573
|
-
this.input.maskInstance.updateValue();
|
|
21574
|
-
}
|
|
21575
|
-
if (bibNeedsSync && this.inputInBib && this.inputInBib.maskInstance && typeof this.inputInBib.maskInstance.updateValue === 'function') {
|
|
21576
|
-
this.inputInBib.maskInstance.updateValue();
|
|
21577
|
-
}
|
|
21578
|
-
this._syncingDisplayValue = false;
|
|
21579
|
-
// handleInputValueChange bailed on the flag — refresh the filter.
|
|
21580
|
-
this._programmaticFilterRefresh = true;
|
|
21581
|
-
this.handleMenuOptions();
|
|
21582
|
-
setTimeout(() => {
|
|
21583
|
-
this._programmaticFilterRefresh = false;
|
|
21584
|
-
}, 0);
|
|
21585
|
-
});
|
|
21586
|
-
}
|
|
21481
|
+
if (!this.persistInput) {
|
|
21482
|
+
this.syncInputValuesAcrossTriggerAndBib(this.value || '');
|
|
21483
|
+
}
|
|
21484
|
+
|
|
21485
|
+
// Programmatic value with no matching option: updateFilter will close
|
|
21486
|
+
// the bib silently (see line 648 — no noMatchOption + 0 results
|
|
21487
|
+
// hides). Announce so screen-reader users hear the request was
|
|
21488
|
+
// dropped. Gated on `input.value !== this.value` so this never fires
|
|
21489
|
+
// for user typing — that path always reconciles input.value to
|
|
21490
|
+
// this.value before updated() runs.
|
|
21491
|
+
if (
|
|
21492
|
+
this.value &&
|
|
21493
|
+
this.menu &&
|
|
21494
|
+
this.menu.options &&
|
|
21495
|
+
this.menu.options.length > 0 &&
|
|
21496
|
+
!this.menu.options.some((opt) => opt.value === this.value)
|
|
21497
|
+
) {
|
|
21498
|
+
announceToScreenReader(this._getAnnouncementRoot(), `No matching option for ${this.value}`);
|
|
21587
21499
|
}
|
|
21588
21500
|
}
|
|
21501
|
+
|
|
21589
21502
|
if (!this.value) {
|
|
21590
21503
|
this.clear();
|
|
21591
21504
|
}
|
|
21592
|
-
if (this.value && !this.componentHasFocus) {
|
|
21593
|
-
// If the value got set programmatically make sure we hide the bib
|
|
21594
|
-
// when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
|
|
21595
|
-
this.hideBib();
|
|
21596
|
-
}
|
|
21597
21505
|
|
|
21598
21506
|
// Sync the input and match word, but don't directly set menu.value again
|
|
21599
21507
|
if (this.menu) {
|
|
@@ -21606,7 +21514,7 @@ class AuroCombobox extends AuroElement {
|
|
|
21606
21514
|
composed: true,
|
|
21607
21515
|
detail: {
|
|
21608
21516
|
optionSelected: this.menu.optionSelected,
|
|
21609
|
-
value: this.
|
|
21517
|
+
value: this.value
|
|
21610
21518
|
}
|
|
21611
21519
|
}));
|
|
21612
21520
|
|
|
@@ -21629,16 +21537,28 @@ class AuroCombobox extends AuroElement {
|
|
|
21629
21537
|
// from a programmatic filter refresh after a value swap — the user
|
|
21630
21538
|
// didn't interact, so we shouldn't auto-open the bib (especially for
|
|
21631
21539
|
// the no-match path where the existing condition unconditionally fires).
|
|
21632
|
-
if (this._programmaticFilterRefresh) {
|
|
21633
|
-
|
|
21634
|
-
|
|
21635
|
-
|
|
21540
|
+
if ((this.menu && !this._programmaticFilterRefresh)) {
|
|
21541
|
+
if (
|
|
21542
|
+
this.availableOptions.length > 0 ||
|
|
21543
|
+
this.menu.loading ||
|
|
21544
|
+
this.noMatchOption
|
|
21545
|
+
) {
|
|
21546
|
+
if (this._userTyped && !this.dropdownOpen) {
|
|
21547
|
+
this.showBib();
|
|
21548
|
+
}
|
|
21549
|
+
this._userTyped = false;
|
|
21550
|
+
}
|
|
21551
|
+
|
|
21636
21552
|
if (!this.availableOptions.includes(this.menu.optionActive)) {
|
|
21637
21553
|
this.activateFirstEnabledAvailableOption();
|
|
21638
21554
|
}
|
|
21639
|
-
} else if (this.dropdown
|
|
21555
|
+
} else if (!this.dropdown.isBibFullscreen) {
|
|
21640
21556
|
this.hideBib();
|
|
21641
21557
|
}
|
|
21558
|
+
|
|
21559
|
+
if (this._programmaticFilterRefresh) {
|
|
21560
|
+
this._programmaticFilterRefresh = false;
|
|
21561
|
+
}
|
|
21642
21562
|
}
|
|
21643
21563
|
|
|
21644
21564
|
if (changedProperties.has('error')) {
|
|
@@ -21780,10 +21700,10 @@ class AuroCombobox extends AuroElement {
|
|
|
21780
21700
|
shape="${this.shape}"
|
|
21781
21701
|
size="${this.size}">
|
|
21782
21702
|
<${this.inputTag}
|
|
21783
|
-
@input="${this.
|
|
21703
|
+
@input="${this.handleTriggerInputValueChange}"
|
|
21784
21704
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
21785
21705
|
.a11yActivedescendant="${this.dropdownOpen && this.optionActive ? this.optionActive.id : undefined}"
|
|
21786
|
-
.a11yExpanded="${this.
|
|
21706
|
+
.a11yExpanded="${this.dropdownOpen}"
|
|
21787
21707
|
.a11yControls="${this.dropdownId}"
|
|
21788
21708
|
.autocomplete="${this.autocomplete}"
|
|
21789
21709
|
.inputmode="${this.inputmode}"
|
|
@@ -23388,14 +23308,10 @@ async function dynamicMenuExample() {
|
|
|
23388
23308
|
// Helper function that generates HTML for menuoptions
|
|
23389
23309
|
function generateMenuOptionHtml(menu, label, value) {
|
|
23390
23310
|
const option = document.createElement('auro-menuoption');
|
|
23391
|
-
const displayValue = document.createElement('div');
|
|
23392
|
-
displayValue.setAttribute("slot", "displayValue");
|
|
23393
|
-
displayValue.innerHTML = value;
|
|
23394
23311
|
|
|
23395
23312
|
option.value = value;
|
|
23396
23313
|
option.innerHTML = label;
|
|
23397
23314
|
menu.appendChild(option);
|
|
23398
|
-
option.appendChild(displayValue);
|
|
23399
23315
|
}
|
|
23400
23316
|
|
|
23401
23317
|
// Main javascript that runs all JS to create example
|