@aurodesignsystem-dev/auro-formkit 0.0.0-pr1145.1 → 0.0.0-pr1156.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/api.min.js +2 -66
- package/components/checkbox/demo/index.min.js +2 -66
- package/components/checkbox/dist/index.js +2 -66
- package/components/checkbox/dist/registered.js +2 -66
- package/components/combobox/demo/api.md +37 -229
- package/components/combobox/demo/api.min.js +6 -155
- package/components/combobox/demo/index.md +0 -104
- package/components/combobox/demo/index.min.js +6 -155
- package/components/combobox/dist/auro-combobox.d.ts +1 -18
- package/components/combobox/dist/index.js +6 -155
- package/components/combobox/dist/registered.js +6 -155
- package/components/counter/demo/api.min.js +2 -66
- package/components/counter/demo/index.min.js +2 -66
- package/components/counter/dist/index.js +2 -66
- package/components/counter/dist/registered.js +2 -66
- package/components/datepicker/demo/api.min.js +5 -133
- package/components/datepicker/demo/index.min.js +5 -133
- package/components/datepicker/dist/index.js +5 -133
- package/components/datepicker/dist/registered.js +5 -133
- package/components/input/demo/api.min.js +3 -67
- package/components/input/demo/index.min.js +3 -67
- package/components/input/dist/index.js +3 -67
- package/components/input/dist/registered.js +3 -67
- package/components/radio/demo/api.min.js +2 -66
- package/components/radio/demo/index.min.js +2 -66
- package/components/radio/dist/index.js +2 -66
- package/components/radio/dist/registered.js +2 -66
- package/components/select/demo/api.min.js +3 -67
- package/components/select/demo/index.min.js +3 -67
- package/components/select/dist/index.js +3 -67
- package/components/select/dist/registered.js +3 -67
- package/package.json +1 -1
|
@@ -620,52 +620,6 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
620
620
|
message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
|
|
621
621
|
}
|
|
622
622
|
]
|
|
623
|
-
},
|
|
624
|
-
combobox: {
|
|
625
|
-
filter: [
|
|
626
|
-
{
|
|
627
|
-
check: (e) => {
|
|
628
|
-
|
|
629
|
-
// Guard Clause: If the behavior is not 'filter', skip this validation
|
|
630
|
-
if (e.behavior !== 'filter') return false;
|
|
631
|
-
|
|
632
|
-
// Get the current input value
|
|
633
|
-
const currentInputValue = e.input.value;
|
|
634
|
-
|
|
635
|
-
// Skip validation if the input has no value
|
|
636
|
-
if (!currentInputValue) return false;
|
|
637
|
-
|
|
638
|
-
/**
|
|
639
|
-
* Let's check if the option selected and combobox value match.
|
|
640
|
-
*/
|
|
641
|
-
|
|
642
|
-
// Guard Clause: If there is no option selected fail the validation
|
|
643
|
-
if (!e.optionSelected) return true;
|
|
644
|
-
|
|
645
|
-
// Guard Clause: If there is no value fail the validation
|
|
646
|
-
if (!e.value) return true;
|
|
647
|
-
|
|
648
|
-
// Guard Clause: If the selected option's value doesn't match the input value fail the validation
|
|
649
|
-
if (e.optionSelected.value !== e.value) return true;
|
|
650
|
-
|
|
651
|
-
/**
|
|
652
|
-
* Now let's make sure the user hasn't change the value in the input after selecting an option.
|
|
653
|
-
* This is to make sure there's no user confusion if they select an option but then change the value to something else.
|
|
654
|
-
*/
|
|
655
|
-
|
|
656
|
-
// Guard Clause: If the current input value doesn't match the option selected value fail the validation
|
|
657
|
-
if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
|
|
658
|
-
|
|
659
|
-
// Guard Clause: If the current input value doesn't match the combobox value fail the validation
|
|
660
|
-
if (currentInputValue && currentInputValue !== e.value) return true;
|
|
661
|
-
|
|
662
|
-
// If all the checks passed the validation passes
|
|
663
|
-
return false;
|
|
664
|
-
},
|
|
665
|
-
validity: 'valueMissing',
|
|
666
|
-
message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
|
|
667
|
-
}
|
|
668
|
-
]
|
|
669
623
|
}
|
|
670
624
|
};
|
|
671
625
|
|
|
@@ -674,8 +628,6 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
674
628
|
elementType = 'input';
|
|
675
629
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
676
630
|
elementType = 'counter';
|
|
677
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
678
|
-
elementType = 'combobox';
|
|
679
631
|
}
|
|
680
632
|
|
|
681
633
|
if (elementType) {
|
|
@@ -854,15 +806,6 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
854
806
|
}
|
|
855
807
|
}
|
|
856
808
|
|
|
857
|
-
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
858
|
-
|
|
859
|
-
if (isCombobox) {
|
|
860
|
-
|
|
861
|
-
if (!elem.persistInput || elem.behavior === "filter") {
|
|
862
|
-
hasValue = elem.input.value?.length > 0;
|
|
863
|
-
}
|
|
864
|
-
}
|
|
865
|
-
|
|
866
809
|
if (!hasValue && elem.required && elem.touched) {
|
|
867
810
|
elem.validity = 'valueMissing';
|
|
868
811
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
@@ -871,11 +814,6 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
871
814
|
this.validateElementAttributes(elem);
|
|
872
815
|
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
873
816
|
this.validateElementAttributes(elem);
|
|
874
|
-
} else if (isCombobox) {
|
|
875
|
-
this.validateElementAttributes(elem);
|
|
876
|
-
|
|
877
|
-
// Don't run extra validation for cases where the combobox is not being used as a filter
|
|
878
|
-
validationShouldRun = elem.behavior !== 'filter';
|
|
879
817
|
}
|
|
880
818
|
}
|
|
881
819
|
|
|
@@ -883,8 +821,8 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
883
821
|
|
|
884
822
|
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
885
823
|
|
|
886
|
-
// Don't reset combobox validity if
|
|
887
|
-
if (!isCombobox || isCombobox && !elem.
|
|
824
|
+
// Don't reset combobox validity if persistValue is set since we can't use the input value to validate
|
|
825
|
+
if (!isCombobox || isCombobox && !elem.persistValue) {
|
|
888
826
|
|
|
889
827
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
890
828
|
this.auroInputElements.forEach(input => input.validate());
|
|
@@ -957,8 +895,6 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
957
895
|
if (input.validationMessage.length > 0) {
|
|
958
896
|
elem.errorMessage = input.validationMessage;
|
|
959
897
|
}
|
|
960
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
|
|
961
|
-
elem.errorMessage = elem.input?.inputElement?.validationMessage;
|
|
962
898
|
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
963
899
|
const firstInput = this.inputElements[0];
|
|
964
900
|
|
|
@@ -5486,7 +5422,7 @@ var emphasizedStyleCss = css`:host([layout*=emphasized][shape*=pill]:not([layout
|
|
|
5486
5422
|
|
|
5487
5423
|
var emphasizedColorCss = css`.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{--auro-input-border-color: var(--ds-auro-input-border-color)}`;
|
|
5488
5424
|
|
|
5489
|
-
var snowflakeStyleCss = css`:root{--ds-advanced-color-button-flat-text: #676767;--ds-advanced-color-button-flat-text-disabled: #d0d0d0;--ds-advanced-color-button-flat-text-hover: #525252;--ds-advanced-color-button-flat-text-inverse: #ffffff;--ds-advanced-color-button-flat-text-inverse-disabled: #7e8894;--ds-advanced-color-button-flat-text-inverse-hover: #adadad;--ds-advanced-color-button-ghost-background-hover: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-ghost-background-inverse-hover: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-ghost-text: #01426a;--ds-advanced-color-button-ghost-text-disabled: #d0d0d0;--ds-advanced-color-button-ghost-text-inverse: #ffffff;--ds-advanced-color-button-ghost-text-inverse-disabled: #7e8894;--ds-advanced-color-button-primary-background: #01426a;--ds-advanced-color-button-primary-background-disabled: #acc9e2;--ds-advanced-color-button-primary-background-hover: #00274a;--ds-advanced-color-button-primary-background-inactive: #cfe0ef;--ds-advanced-color-button-primary-background-inactive-hover: #89b2d4;--ds-advanced-color-button-primary-background-inverse: #ffffff;--ds-advanced-color-button-primary-background-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-background-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-border: #01426a;--ds-advanced-color-button-primary-border-disabled: #acc9e2;--ds-advanced-color-button-primary-border-hover: #00274a;--ds-advanced-color-button-primary-border-inverse: #ffffff;--ds-advanced-color-button-primary-border-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-border-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-text: #ffffff;--ds-advanced-color-button-primary-text-disabled: #ffffff;--ds-advanced-color-button-primary-text-inverse: #01426a;--ds-advanced-color-button-secondary-background: #ffffff;--ds-advanced-color-button-secondary-background-disabled: #f7f7f7;--ds-advanced-color-button-secondary-background-hover: #f2f2f2;--ds-advanced-color-button-secondary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-secondary-border: #01426a;--ds-advanced-color-button-secondary-border-hover: #00274a;--ds-advanced-color-button-secondary-border-disabled: #cfe0ef;--ds-advanced-color-button-secondary-border-inverse: #ffffff;--ds-advanced-color-button-secondary-border-inverse-disabled: #dddddd;--ds-advanced-color-button-secondary-text: #01426a;--ds-advanced-color-button-secondary-text-hover: #00274a;--ds-advanced-color-button-secondary-text-inverse: #ffffff;--ds-advanced-color-button-tertiary-background: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-tertiary-background-hover: rgba(0, 0, 0, 0.1);--ds-advanced-color-button-tertiary-background-inverse: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-tertiary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-tertiary-text: #01426a;--ds-advanced-color-button-tertiary-text-hover: #00274a;--ds-advanced-color-button-tertiary-text-inverse: #ffffff;--ds-advanced-color-accents-accent1: #b2d583;--ds-advanced-color-accents-accent1-bold: #92c450;--ds-advanced-color-accents-accent1-muted: #deedca;--ds-advanced-color-accents-accent2: #fad362;--ds-advanced-color-accents-accent2-bold: #f2ba14;--ds-advanced-color-accents-accent2-muted: #fde398;--ds-advanced-color-accents-accent3: #63beff;--ds-advanced-color-accents-accent3-bold: #0074ca;--ds-advanced-color-accents-accent3-muted: #aedeff;--ds-advanced-color-accents-accent4: #feb17a;--ds-advanced-color-accents-accent4-bold: #fb7f24;--ds-advanced-color-accents-accent4-muted: #ffe2cf;--ds-advanced-color-accents-transparency: rgba(0, 0, 0, 0.1);--ds-advanced-color-accents-transparency-inverse: rgba(255, 255, 255, 0.2);--ds-advanced-color-avatar-gradient-bottom: #cfe0ef;--ds-advanced-color-avatar-gradient-top: #6899c6;--ds-advanced-color-boolean-disabled-inverse: #7e8894;--ds-advanced-color-boolean-error: #e31f26;--ds-advanced-color-boolean-error-hover: #b1161c;--ds-advanced-color-boolean-error-inverse: #f9a4a8;--ds-advanced-color-boolean-error-inverse-hover: #f15f65;--ds-advanced-color-boolean-indicator: #ffffff;--ds-advanced-color-boolean-indicator-inverse: #00274a;--ds-advanced-color-boolean-isfalse: #ffffff;--ds-advanced-color-boolean-isfalse-border: #585e67;--ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;--ds-advanced-color-boolean-isfalse-hover: #f2f2f2;--ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-boolean-istrue: #01426a;--ds-advanced-color-boolean-istrue-hover: #00274a;--ds-advanced-color-boolean-istrue-inverse: #ffffff;--ds-advanced-color-boolean-istrue-inverse-hover: rgba(255, 255, 255, 0.7);--ds-advanced-color-dropdown-emphasized-background: #00274A1a;--ds-advanced-color-dropdown-emphasized-background-hover: #00274A33;--ds-advanced-color-flightline-indicator: #00274a;--ds-advanced-color-flightline-line: #00274a;--ds-advanced-color-hyperlink-text: #2875b5;--ds-advanced-color-hyperlink-text-hover: #01426a;--ds-advanced-color-hyperlink-text-inverse: #ffffff;--ds-advanced-color-hyperlink-text-inverse-hover: #ebf3f9;--ds-advanced-color-shared-background: #ffffff;--ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);--ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-shared-background-muted: #f7f7f7;--ds-advanced-color-shared-background-strong: #676767;--ds-advanced-color-shared-emphasized-background: rgba(1, 66, 106, 0.1);--ds-advanced-color-shared-emphasized-background-hover: rgba(1, 66, 106, 0.2);--ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);--ds-advanced-color-shared-text-accent: #2875b5;--ds-advanced-color-skeleton-background: #f7f8fa;--ds-advanced-color-skeleton-wave: #e4e8ec;--ds-advanced-color-state-background-disabled: #dddddd;--ds-advanced-color-state-background-hover: #f2f2f2;--ds-advanced-color-state-background-inverse-disabled: #7e8894;--ds-advanced-color-state-error-inverse: #f9a4a8;--ds-advanced-color-state-focused: #01426a;--ds-advanced-color-state-focused-inverse: #ffffff;--ds-advanced-color-state-selected: #01426a;--ds-advanced-color-state-selected-hover: #00274a;--ds-basic-color-border-bold: #585e67;--ds-basic-color-border-brand: #00274a;--ds-basic-color-border-default: #959595;--ds-basic-color-border-divider: rgba(0, 0, 0, 0.15);--ds-basic-color-border-divider-inverse: rgba(255, 255, 255, 0.4);--ds-basic-color-border-inverse: #ffffff;--ds-basic-color-border-subtle: #dddddd;--ds-basic-color-brand-primary: #01426a;--ds-basic-color-brand-primary-bold: #00274a;--ds-basic-color-brand-primary-muted: #ebf3f9;--ds-basic-color-brand-primary-subtle: #2875b5;--ds-basic-color-brand-secondary: #5de3f7;--ds-basic-color-brand-secondary-bold: #18c3dd;--ds-basic-color-brand-secondary-muted: #ebfafd;--ds-basic-color-brand-secondary-subtle: #b4eff9;--ds-basic-color-brand-tertiary: #a3cd6a;--ds-basic-color-brand-tertiary-bold: #7daf3b;--ds-basic-color-brand-tertiary-muted: #eaf3dd;--ds-basic-color-brand-tertiary-subtle: #c9e1a7;--ds-basic-color-fare-basiceconomy: #97eaf8;--ds-basic-color-fare-business: #01426a;--ds-basic-color-fare-economy: #0074ca;--ds-basic-color-fare-first: #00274a;--ds-basic-color-fare-premiumeconomy: #005154;--ds-basic-color-page-background-default: #ffffff;--ds-basic-color-page-background-utility: #ffffff;--ds-basic-color-status-default: #afb9c6;--ds-basic-color-status-error: #e31f26;--ds-basic-color-status-error-subtle: #fbc6c6;--ds-basic-color-status-info: #01426a;--ds-basic-color-status-info-subtle: #ebf3f9;--ds-basic-color-status-success: #447a1f;--ds-basic-color-status-success-subtle: #d6eac7;--ds-basic-color-status-warning: #fac200;--ds-basic-color-status-warning-subtle: #fff0b2;--ds-basic-color-surface-accent1: #5de3f7;--ds-basic-color-surface-accent1-muted: #ebfafd;--ds-basic-color-surface-accent1-subtle: #b4eff9;--ds-basic-color-surface-accent2: #a3cd6a;--ds-basic-color-surface-accent2-muted: #eaf3dd;--ds-basic-color-surface-default: #ffffff;--ds-basic-color-surface-inverse: #00274a;--ds-basic-color-surface-inverse-subtle: #2875b5;--ds-basic-color-surface-neutral-medium: #c5c5c5;--ds-basic-color-surface-neutral-subtle: #f7f7f7;--ds-basic-color-texticon-accent1: #265688;--ds-basic-color-texticon-default: #2a2a2a;--ds-basic-color-texticon-disabled: #d0d0d0;--ds-basic-color-texticon-inverse: #ffffff;--ds-basic-color-texticon-inverse-disabled: #7e8894;--ds-basic-color-texticon-inverse-muted: #ccd2db;--ds-basic-color-texticon-muted: #676767;--ds-basic-color-tier-program-loungetier-lounge: #01426a;--ds-basic-color-tier-program-loungetier-loungeplus: #53b390;--ds-basic-color-tier-program-loyaltytier-bronze: #d99f6d;--ds-basic-color-tier-program-loyaltytier-bronze-muted: #eed4be;--ds-basic-color-tier-program-loyaltytier-cobalt: #030772;--ds-basic-color-tier-program-loyaltytier-cobalt-muted: #a9b6d6;--ds-basic-color-tier-program-loyaltytier-copper: #cb7457;--ds-basic-color-tier-program-loyaltytier-copper-muted: #e7bfb1;--ds-basic-color-tier-program-loyaltytier-gold: #fbdc7a;--ds-basic-color-tier-program-loyaltytier-gold-muted: #fdefc4;--ds-basic-color-tier-program-loyaltytier-nickel: #abaab1;--ds-basic-color-tier-program-loyaltytier-nickel-muted: #e5e4e7;--ds-basic-color-tier-program-loyaltytier-platinum: #bcb8a4;--ds-basic-color-tier-program-loyaltytier-platinum-muted: #dad8cd;--ds-basic-color-tier-program-loyaltytier-silver: #e4e9ec;--ds-basic-color-tier-program-loyaltytier-silver-muted: #f9fafb;--ds-basic-color-tier-program-loyaltytier-titanium: #282828;--ds-basic-color-tier-program-loyaltytier-titanium-muted: #545454;--ds-basic-color-tier-program-oneworld-emerald: #139142;--ds-basic-color-tier-program-oneworld-ruby: #a41d4a;--ds-basic-color-tier-program-oneworld-sapphire: #015daa;--ds-basic-type-brand-family-primary: "AS Circular";--ds-basic-type-brand-family-secondary: "Good OT";--ds-basic-type-brand-line-height-primary: 1.3;--ds-basic-type-brand-line-height-secondary: 1;--ds-basic-type-brand-letter-spacing-primary: 0;--ds-basic-type-brand-letter-spacing-secondary: 0.05em;--ds-basic-type-brand-letter-spacing-tertiary: 0.10em;--ds-basic-type-family-accent: "Good OT";--ds-basic-type-family-accent-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-body: "AS Circular";--ds-basic-type-family-body-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-display: "AS Circular";--ds-basic-type-family-display-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-heading: "AS Circular";--ds-basic-type-family-heading-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-letter-spacing-accent: 0.05em;--ds-basic-type-letter-spacing-accent2: 0.10em;--ds-basic-type-letter-spacing-body: 0;--ds-basic-type-letter-spacing-display: 0;--ds-basic-type-letter-spacing-heading: 0;--ds-basic-type-line-height-accent: 1.3;--ds-basic-type-line-height-accent2: 1;--ds-basic-type-line-height-body: 1.625rem;--ds-basic-type-line-height-body2: 1.5rem;--ds-basic-type-line-height-body3: 1.25rem;--ds-basic-type-line-height-body4: 1rem;--ds-basic-type-line-height-body5: 0.875rem;--ds-basic-type-line-height-display: 1.3;--ds-basic-type-line-height-heading: 1.3;--ds-basic-type-weight-accent: 450;--ds-basic-type-weight-accent2: 500;--ds-basic-type-weight-body: 450;--ds-basic-type-weight-display: 300;--ds-basic-type-weight-heading: 300;--ds-basic-type-weight-heading2: 450}:host([layout*=snowflake]) .leftIndent{margin-left:var(--ds-size-200, 1rem)}:host([layout*=snowflake]) .rightIndent{margin-right:var(--ds-size-200, 1rem)}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-block-start:var(--ds-size-50, 0.25rem)}.layout-snowflake input{transition:all 1ms linear;text-align:center}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;overflow:hidden}.layout-snowflake .displayValue{display:none;width:100%}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake.withValue:hover .alertNotification{display:none}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.left{padding-left:var(--ds-size-200, 1rem)}.layout-snowflake .accents.right{padding-right:var(--ds-size-200, 1rem)}:host([layout*=snowflake]) .helpTextWrapper{text-align:center}`;
|
|
5425
|
+
var snowflakeStyleCss = css`:root{--ds-advanced-color-button-flat-text: #676767;--ds-advanced-color-button-flat-text-disabled: #d0d0d0;--ds-advanced-color-button-flat-text-hover: #525252;--ds-advanced-color-button-flat-text-inverse: #ffffff;--ds-advanced-color-button-flat-text-inverse-disabled: #7e8894;--ds-advanced-color-button-flat-text-inverse-hover: #adadad;--ds-advanced-color-button-ghost-background-hover: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-ghost-background-inverse-hover: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-ghost-text: #01426a;--ds-advanced-color-button-ghost-text-disabled: #d0d0d0;--ds-advanced-color-button-ghost-text-inverse: #ffffff;--ds-advanced-color-button-ghost-text-inverse-disabled: #7e8894;--ds-advanced-color-button-primary-background: #01426a;--ds-advanced-color-button-primary-background-disabled: #acc9e2;--ds-advanced-color-button-primary-background-hover: #00274a;--ds-advanced-color-button-primary-background-inactive: #cfe0ef;--ds-advanced-color-button-primary-background-inactive-hover: #89b2d4;--ds-advanced-color-button-primary-background-inverse: #ffffff;--ds-advanced-color-button-primary-background-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-background-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-border: #01426a;--ds-advanced-color-button-primary-border-disabled: #acc9e2;--ds-advanced-color-button-primary-border-hover: #00274a;--ds-advanced-color-button-primary-border-inverse: #ffffff;--ds-advanced-color-button-primary-border-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-border-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-text: #ffffff;--ds-advanced-color-button-primary-text-disabled: #ffffff;--ds-advanced-color-button-primary-text-inverse: #01426a;--ds-advanced-color-button-secondary-background: #ffffff;--ds-advanced-color-button-secondary-background-disabled: #f7f7f7;--ds-advanced-color-button-secondary-background-hover: #f2f2f2;--ds-advanced-color-button-secondary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-secondary-border: #01426a;--ds-advanced-color-button-secondary-border-hover: #00274a;--ds-advanced-color-button-secondary-border-disabled: #cfe0ef;--ds-advanced-color-button-secondary-border-inverse: #ffffff;--ds-advanced-color-button-secondary-border-inverse-disabled: #dddddd;--ds-advanced-color-button-secondary-text: #01426a;--ds-advanced-color-button-secondary-text-hover: #00274a;--ds-advanced-color-button-secondary-text-inverse: #ffffff;--ds-advanced-color-button-tertiary-background: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-tertiary-background-hover: rgba(0, 0, 0, 0.1);--ds-advanced-color-button-tertiary-background-inverse: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-tertiary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-tertiary-text: #01426a;--ds-advanced-color-button-tertiary-text-hover: #00274a;--ds-advanced-color-button-tertiary-text-inverse: #ffffff;--ds-advanced-color-accents-accent1: #b2d583;--ds-advanced-color-accents-accent1-bold: #92c450;--ds-advanced-color-accents-accent1-muted: #deedca;--ds-advanced-color-accents-accent2: #fad362;--ds-advanced-color-accents-accent2-bold: #f2ba14;--ds-advanced-color-accents-accent2-muted: #fde398;--ds-advanced-color-accents-accent3: #63beff;--ds-advanced-color-accents-accent3-bold: #0074ca;--ds-advanced-color-accents-accent3-muted: #aedeff;--ds-advanced-color-accents-accent4: #feb17a;--ds-advanced-color-accents-accent4-bold: #fb7f24;--ds-advanced-color-accents-accent4-muted: #ffe2cf;--ds-advanced-color-accents-transparency: rgba(0, 0, 0, 0.1);--ds-advanced-color-accents-transparency-inverse: rgba(255, 255, 255, 0.2);--ds-advanced-color-avatar-gradient-bottom: #cfe0ef;--ds-advanced-color-avatar-gradient-top: #6899c6;--ds-advanced-color-boolean-disabled-inverse: #7e8894;--ds-advanced-color-boolean-error: #e31f26;--ds-advanced-color-boolean-error-hover: #b1161c;--ds-advanced-color-boolean-error-inverse: #f9a4a8;--ds-advanced-color-boolean-error-inverse-hover: #f15f65;--ds-advanced-color-boolean-indicator: #ffffff;--ds-advanced-color-boolean-indicator-inverse: #00274a;--ds-advanced-color-boolean-isfalse: #ffffff;--ds-advanced-color-boolean-isfalse-border: #585e67;--ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;--ds-advanced-color-boolean-isfalse-hover: #f2f2f2;--ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-boolean-istrue: #01426a;--ds-advanced-color-boolean-istrue-hover: #00274a;--ds-advanced-color-boolean-istrue-inverse: #ffffff;--ds-advanced-color-boolean-istrue-inverse-hover: rgba(255, 255, 255, 0.7);--ds-advanced-color-dropdown-emphasized-background: #00274A1a;--ds-advanced-color-dropdown-emphasized-background-hover: #00274A33;--ds-advanced-color-flightline-indicator: #00274a;--ds-advanced-color-flightline-line: #00274a;--ds-advanced-color-hyperlink-text: #2875b5;--ds-advanced-color-hyperlink-text-hover: #01426a;--ds-advanced-color-hyperlink-text-inverse: #ffffff;--ds-advanced-color-hyperlink-text-inverse-hover: #ebf3f9;--ds-advanced-color-shared-background: #ffffff;--ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);--ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-shared-background-muted: #f7f7f7;--ds-advanced-color-shared-background-strong: #676767;--ds-advanced-color-shared-emphasized-background: rgba(1, 66, 106, 0.1);--ds-advanced-color-shared-emphasized-background-hover: rgba(1, 66, 106, 0.2);--ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);--ds-advanced-color-shared-text-accent: #2875b5;--ds-advanced-color-skeleton-background: #f7f8fa;--ds-advanced-color-skeleton-wave: #e4e8ec;--ds-advanced-color-state-background-disabled: #dddddd;--ds-advanced-color-state-background-hover: #f2f2f2;--ds-advanced-color-state-background-inverse-disabled: #7e8894;--ds-advanced-color-state-error-inverse: #f9a4a8;--ds-advanced-color-state-focused: #01426a;--ds-advanced-color-state-focused-inverse: #ffffff;--ds-advanced-color-state-selected: #01426a;--ds-advanced-color-state-selected-hover: #00274a;--ds-basic-color-border-bold: #585e67;--ds-basic-color-border-brand: #00274a;--ds-basic-color-border-default: #959595;--ds-basic-color-border-divider: rgba(0, 0, 0, 0.15);--ds-basic-color-border-divider-inverse: rgba(255, 255, 255, 0.4);--ds-basic-color-border-inverse: #ffffff;--ds-basic-color-border-subtle: #dddddd;--ds-basic-color-brand-primary: #01426a;--ds-basic-color-brand-primary-bold: #00274a;--ds-basic-color-brand-primary-muted: #ebf3f9;--ds-basic-color-brand-primary-subtle: #2875b5;--ds-basic-color-brand-secondary: #5de3f7;--ds-basic-color-brand-secondary-bold: #18c3dd;--ds-basic-color-brand-secondary-muted: #ebfafd;--ds-basic-color-brand-secondary-subtle: #b4eff9;--ds-basic-color-brand-tertiary: #a3cd6a;--ds-basic-color-brand-tertiary-bold: #7daf3b;--ds-basic-color-brand-tertiary-muted: #eaf3dd;--ds-basic-color-brand-tertiary-subtle: #c9e1a7;--ds-basic-color-fare-basiceconomy: #97eaf8;--ds-basic-color-fare-business: #01426a;--ds-basic-color-fare-economy: #0074ca;--ds-basic-color-fare-first: #00274a;--ds-basic-color-fare-premiumeconomy: #005154;--ds-basic-color-page-background-default: #ffffff;--ds-basic-color-page-background-utility: #ffffff;--ds-basic-color-status-default: #afb9c6;--ds-basic-color-status-error: #e31f26;--ds-basic-color-status-error-subtle: #fbc6c6;--ds-basic-color-status-info: #01426a;--ds-basic-color-status-info-subtle: #ebf3f9;--ds-basic-color-status-success: #447a1f;--ds-basic-color-status-success-subtle: #d6eac7;--ds-basic-color-status-warning: #fac200;--ds-basic-color-status-warning-subtle: #fff0b2;--ds-basic-color-surface-accent1: #5de3f7;--ds-basic-color-surface-accent1-muted: #ebfafd;--ds-basic-color-surface-accent1-subtle: #b4eff9;--ds-basic-color-surface-accent2: #a3cd6a;--ds-basic-color-surface-accent2-muted: #eaf3dd;--ds-basic-color-surface-default: #ffffff;--ds-basic-color-surface-inverse: #00274a;--ds-basic-color-surface-inverse-subtle: #2875b5;--ds-basic-color-surface-neutral-medium: #c5c5c5;--ds-basic-color-surface-neutral-subtle: #f7f7f7;--ds-basic-color-texticon-accent1: #265688;--ds-basic-color-texticon-default: #2a2a2a;--ds-basic-color-texticon-disabled: #d0d0d0;--ds-basic-color-texticon-inverse: #ffffff;--ds-basic-color-texticon-inverse-disabled: #7e8894;--ds-basic-color-texticon-inverse-muted: #ccd2db;--ds-basic-color-texticon-muted: #676767;--ds-basic-color-tier-program-loungetier-lounge: #01426a;--ds-basic-color-tier-program-loungetier-loungeplus: #53b390;--ds-basic-color-tier-program-loyaltytier-bronze: #d99f6d;--ds-basic-color-tier-program-loyaltytier-bronze-muted: #eed4be;--ds-basic-color-tier-program-loyaltytier-cobalt: #030772;--ds-basic-color-tier-program-loyaltytier-cobalt-muted: #a9b6d6;--ds-basic-color-tier-program-loyaltytier-copper: #cb7457;--ds-basic-color-tier-program-loyaltytier-copper-muted: #e7bfb1;--ds-basic-color-tier-program-loyaltytier-gold: #fbdc7a;--ds-basic-color-tier-program-loyaltytier-gold-muted: #fdefc4;--ds-basic-color-tier-program-loyaltytier-nickel: #abaab1;--ds-basic-color-tier-program-loyaltytier-nickel-muted: #e5e4e7;--ds-basic-color-tier-program-loyaltytier-platinum: #bcb8a4;--ds-basic-color-tier-program-loyaltytier-platinum-muted: #dad8cd;--ds-basic-color-tier-program-loyaltytier-silver: #e4e9ec;--ds-basic-color-tier-program-loyaltytier-silver-muted: #f9fafb;--ds-basic-color-tier-program-loyaltytier-titanium: #282828;--ds-basic-color-tier-program-loyaltytier-titanium-muted: #545454;--ds-basic-color-tier-program-oneworld-emerald: #139142;--ds-basic-color-tier-program-oneworld-ruby: #a41d4a;--ds-basic-color-tier-program-oneworld-sapphire: #015daa;--ds-basic-type-brand-family-primary: "AS Circular";--ds-basic-type-brand-family-secondary: "Good OT";--ds-basic-type-brand-line-height-primary: 1.3;--ds-basic-type-brand-line-height-secondary: 1;--ds-basic-type-brand-letter-spacing-primary: 0;--ds-basic-type-brand-letter-spacing-secondary: 0.05em;--ds-basic-type-brand-letter-spacing-tertiary: 0.10em;--ds-basic-type-family-accent: "Good OT";--ds-basic-type-family-accent-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-body: "AS Circular";--ds-basic-type-family-body-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-display: "AS Circular";--ds-basic-type-family-display-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-heading: "AS Circular";--ds-basic-type-family-heading-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-letter-spacing-accent: 0.05em;--ds-basic-type-letter-spacing-accent2: 0.10em;--ds-basic-type-letter-spacing-body: 0;--ds-basic-type-letter-spacing-display: 0;--ds-basic-type-letter-spacing-heading: 0;--ds-basic-type-line-height-accent: 1.3;--ds-basic-type-line-height-accent2: 1;--ds-basic-type-line-height-body: 1.625rem;--ds-basic-type-line-height-body2: 1.5rem;--ds-basic-type-line-height-body3: 1.25rem;--ds-basic-type-line-height-body4: 1rem;--ds-basic-type-line-height-body5: 0.875rem;--ds-basic-type-line-height-display: 1.3;--ds-basic-type-line-height-heading: 1.3;--ds-basic-type-weight-accent: 450;--ds-basic-type-weight-accent2: 500;--ds-basic-type-weight-body: 450;--ds-basic-type-weight-display: 300;--ds-basic-type-weight-heading: 300;--ds-basic-type-weight-heading2: 450}:host([layout*=snowflake]) .leftIndent{margin-left:var(--ds-size-200, 1rem)}:host([layout*=snowflake]) .rightIndent{margin-right:var(--ds-size-200, 1rem)}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-block-start:var(--ds-size-50, 0.25rem)}.layout-snowflake input{transition:all 1ms linear;text-align:center}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;overflow:hidden}.layout-snowflake .displayValue{display:none;width:100%}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.left{padding-left:var(--ds-size-200, 1rem)}.layout-snowflake .accents.right{padding-right:var(--ds-size-200, 1rem)}:host([layout*=snowflake]) .helpTextWrapper{text-align:center}`;
|
|
5490
5426
|
|
|
5491
5427
|
const watchedItems = new Set();
|
|
5492
5428
|
|
|
@@ -10030,52 +9966,6 @@ class AuroFormValidation {
|
|
|
10030
9966
|
message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
|
|
10031
9967
|
}
|
|
10032
9968
|
]
|
|
10033
|
-
},
|
|
10034
|
-
combobox: {
|
|
10035
|
-
filter: [
|
|
10036
|
-
{
|
|
10037
|
-
check: (e) => {
|
|
10038
|
-
|
|
10039
|
-
// Guard Clause: If the behavior is not 'filter', skip this validation
|
|
10040
|
-
if (e.behavior !== 'filter') return false;
|
|
10041
|
-
|
|
10042
|
-
// Get the current input value
|
|
10043
|
-
const currentInputValue = e.input.value;
|
|
10044
|
-
|
|
10045
|
-
// Skip validation if the input has no value
|
|
10046
|
-
if (!currentInputValue) return false;
|
|
10047
|
-
|
|
10048
|
-
/**
|
|
10049
|
-
* Let's check if the option selected and combobox value match.
|
|
10050
|
-
*/
|
|
10051
|
-
|
|
10052
|
-
// Guard Clause: If there is no option selected fail the validation
|
|
10053
|
-
if (!e.optionSelected) return true;
|
|
10054
|
-
|
|
10055
|
-
// Guard Clause: If there is no value fail the validation
|
|
10056
|
-
if (!e.value) return true;
|
|
10057
|
-
|
|
10058
|
-
// Guard Clause: If the selected option's value doesn't match the input value fail the validation
|
|
10059
|
-
if (e.optionSelected.value !== e.value) return true;
|
|
10060
|
-
|
|
10061
|
-
/**
|
|
10062
|
-
* Now let's make sure the user hasn't change the value in the input after selecting an option.
|
|
10063
|
-
* This is to make sure there's no user confusion if they select an option but then change the value to something else.
|
|
10064
|
-
*/
|
|
10065
|
-
|
|
10066
|
-
// Guard Clause: If the current input value doesn't match the option selected value fail the validation
|
|
10067
|
-
if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
|
|
10068
|
-
|
|
10069
|
-
// Guard Clause: If the current input value doesn't match the combobox value fail the validation
|
|
10070
|
-
if (currentInputValue && currentInputValue !== e.value) return true;
|
|
10071
|
-
|
|
10072
|
-
// If all the checks passed the validation passes
|
|
10073
|
-
return false;
|
|
10074
|
-
},
|
|
10075
|
-
validity: 'valueMissing',
|
|
10076
|
-
message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
|
|
10077
|
-
}
|
|
10078
|
-
]
|
|
10079
9969
|
}
|
|
10080
9970
|
};
|
|
10081
9971
|
|
|
@@ -10084,8 +9974,6 @@ class AuroFormValidation {
|
|
|
10084
9974
|
elementType = 'input';
|
|
10085
9975
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
10086
9976
|
elementType = 'counter';
|
|
10087
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
10088
|
-
elementType = 'combobox';
|
|
10089
9977
|
}
|
|
10090
9978
|
|
|
10091
9979
|
if (elementType) {
|
|
@@ -10264,15 +10152,6 @@ class AuroFormValidation {
|
|
|
10264
10152
|
}
|
|
10265
10153
|
}
|
|
10266
10154
|
|
|
10267
|
-
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
10268
|
-
|
|
10269
|
-
if (isCombobox) {
|
|
10270
|
-
|
|
10271
|
-
if (!elem.persistInput || elem.behavior === "filter") {
|
|
10272
|
-
hasValue = elem.input.value?.length > 0;
|
|
10273
|
-
}
|
|
10274
|
-
}
|
|
10275
|
-
|
|
10276
10155
|
if (!hasValue && elem.required && elem.touched) {
|
|
10277
10156
|
elem.validity = 'valueMissing';
|
|
10278
10157
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
@@ -10281,11 +10160,6 @@ class AuroFormValidation {
|
|
|
10281
10160
|
this.validateElementAttributes(elem);
|
|
10282
10161
|
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
10283
10162
|
this.validateElementAttributes(elem);
|
|
10284
|
-
} else if (isCombobox) {
|
|
10285
|
-
this.validateElementAttributes(elem);
|
|
10286
|
-
|
|
10287
|
-
// Don't run extra validation for cases where the combobox is not being used as a filter
|
|
10288
|
-
validationShouldRun = elem.behavior !== 'filter';
|
|
10289
10163
|
}
|
|
10290
10164
|
}
|
|
10291
10165
|
|
|
@@ -10293,8 +10167,8 @@ class AuroFormValidation {
|
|
|
10293
10167
|
|
|
10294
10168
|
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
10295
10169
|
|
|
10296
|
-
// Don't reset combobox validity if
|
|
10297
|
-
if (!isCombobox || isCombobox && !elem.
|
|
10170
|
+
// Don't reset combobox validity if persistValue is set since we can't use the input value to validate
|
|
10171
|
+
if (!isCombobox || isCombobox && !elem.persistValue) {
|
|
10298
10172
|
|
|
10299
10173
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
10300
10174
|
this.auroInputElements.forEach(input => input.validate());
|
|
@@ -10367,8 +10241,6 @@ class AuroFormValidation {
|
|
|
10367
10241
|
if (input.validationMessage.length > 0) {
|
|
10368
10242
|
elem.errorMessage = input.validationMessage;
|
|
10369
10243
|
}
|
|
10370
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
|
|
10371
|
-
elem.errorMessage = elem.input?.inputElement?.validationMessage;
|
|
10372
10244
|
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
10373
10245
|
const firstInput = this.inputElements[0];
|
|
10374
10246
|
|
|
@@ -16238,7 +16110,6 @@ class AuroCombobox extends AuroElement {
|
|
|
16238
16110
|
this.required = false;
|
|
16239
16111
|
this.value = undefined;
|
|
16240
16112
|
this.typedValue = undefined;
|
|
16241
|
-
this.behavior = "suggestion";
|
|
16242
16113
|
|
|
16243
16114
|
// Defaults that effect the overall layout of the combobox
|
|
16244
16115
|
this.checkmark = false;
|
|
@@ -16320,17 +16191,6 @@ class AuroCombobox extends AuroElement {
|
|
|
16320
16191
|
reflect: false
|
|
16321
16192
|
},
|
|
16322
16193
|
|
|
16323
|
-
/**
|
|
16324
|
-
* Sets the behavior of the combobox, "filter" or "suggestion".
|
|
16325
|
-
* "filter" requires the user to select an option from the menu.
|
|
16326
|
-
* "suggestion" allows the user to enter a value not present in the menu options.
|
|
16327
|
-
* @default suggestion
|
|
16328
|
-
*/
|
|
16329
|
-
behavior: {
|
|
16330
|
-
type: String,
|
|
16331
|
-
reflect: true
|
|
16332
|
-
},
|
|
16333
|
-
|
|
16334
16194
|
/**
|
|
16335
16195
|
* When attribute is present auro-menu will apply check marks to selected options.
|
|
16336
16196
|
*/
|
|
@@ -16407,7 +16267,7 @@ class AuroCombobox extends AuroElement {
|
|
|
16407
16267
|
},
|
|
16408
16268
|
|
|
16409
16269
|
/**
|
|
16410
|
-
* If set, combobox will not filter menuoptions based
|
|
16270
|
+
* If set, combobox will not filter menuoptions based in input.
|
|
16411
16271
|
*/
|
|
16412
16272
|
noFilter: {
|
|
16413
16273
|
type: Boolean,
|
|
@@ -16530,13 +16390,6 @@ class AuroCombobox extends AuroElement {
|
|
|
16530
16390
|
type: String
|
|
16531
16391
|
},
|
|
16532
16392
|
|
|
16533
|
-
/**
|
|
16534
|
-
* Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter".
|
|
16535
|
-
*/
|
|
16536
|
-
setCustomValidityValueMissingFilter: {
|
|
16537
|
-
type: String
|
|
16538
|
-
},
|
|
16539
|
-
|
|
16540
16393
|
/**
|
|
16541
16394
|
* Indicates whether the combobox is in a dirty state (has been interacted with).
|
|
16542
16395
|
* @type {boolean}
|
|
@@ -17218,8 +17071,6 @@ class AuroCombobox extends AuroElement {
|
|
|
17218
17071
|
this.addEventListener('auroFormElement-validated', (evt) => {
|
|
17219
17072
|
this.input.validity = evt.detail.validity;
|
|
17220
17073
|
this.input.errorMessage = evt.detail.message;
|
|
17221
|
-
this.validity = evt.detail.validity;
|
|
17222
|
-
this.errorMessage = evt.detail.message;
|
|
17223
17074
|
});
|
|
17224
17075
|
}
|
|
17225
17076
|
|
|
@@ -2174,52 +2174,6 @@ class AuroFormValidation {
|
|
|
2174
2174
|
message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
|
|
2175
2175
|
}
|
|
2176
2176
|
]
|
|
2177
|
-
},
|
|
2178
|
-
combobox: {
|
|
2179
|
-
filter: [
|
|
2180
|
-
{
|
|
2181
|
-
check: (e) => {
|
|
2182
|
-
|
|
2183
|
-
// Guard Clause: If the behavior is not 'filter', skip this validation
|
|
2184
|
-
if (e.behavior !== 'filter') return false;
|
|
2185
|
-
|
|
2186
|
-
// Get the current input value
|
|
2187
|
-
const currentInputValue = e.input.value;
|
|
2188
|
-
|
|
2189
|
-
// Skip validation if the input has no value
|
|
2190
|
-
if (!currentInputValue) return false;
|
|
2191
|
-
|
|
2192
|
-
/**
|
|
2193
|
-
* Let's check if the option selected and combobox value match.
|
|
2194
|
-
*/
|
|
2195
|
-
|
|
2196
|
-
// Guard Clause: If there is no option selected fail the validation
|
|
2197
|
-
if (!e.optionSelected) return true;
|
|
2198
|
-
|
|
2199
|
-
// Guard Clause: If there is no value fail the validation
|
|
2200
|
-
if (!e.value) return true;
|
|
2201
|
-
|
|
2202
|
-
// Guard Clause: If the selected option's value doesn't match the input value fail the validation
|
|
2203
|
-
if (e.optionSelected.value !== e.value) return true;
|
|
2204
|
-
|
|
2205
|
-
/**
|
|
2206
|
-
* Now let's make sure the user hasn't change the value in the input after selecting an option.
|
|
2207
|
-
* This is to make sure there's no user confusion if they select an option but then change the value to something else.
|
|
2208
|
-
*/
|
|
2209
|
-
|
|
2210
|
-
// Guard Clause: If the current input value doesn't match the option selected value fail the validation
|
|
2211
|
-
if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
|
|
2212
|
-
|
|
2213
|
-
// Guard Clause: If the current input value doesn't match the combobox value fail the validation
|
|
2214
|
-
if (currentInputValue && currentInputValue !== e.value) return true;
|
|
2215
|
-
|
|
2216
|
-
// If all the checks passed the validation passes
|
|
2217
|
-
return false;
|
|
2218
|
-
},
|
|
2219
|
-
validity: 'valueMissing',
|
|
2220
|
-
message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
|
|
2221
|
-
}
|
|
2222
|
-
]
|
|
2223
2177
|
}
|
|
2224
2178
|
};
|
|
2225
2179
|
|
|
@@ -2228,8 +2182,6 @@ class AuroFormValidation {
|
|
|
2228
2182
|
elementType = 'input';
|
|
2229
2183
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
2230
2184
|
elementType = 'counter';
|
|
2231
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
2232
|
-
elementType = 'combobox';
|
|
2233
2185
|
}
|
|
2234
2186
|
|
|
2235
2187
|
if (elementType) {
|
|
@@ -2408,15 +2360,6 @@ class AuroFormValidation {
|
|
|
2408
2360
|
}
|
|
2409
2361
|
}
|
|
2410
2362
|
|
|
2411
|
-
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
2412
|
-
|
|
2413
|
-
if (isCombobox) {
|
|
2414
|
-
|
|
2415
|
-
if (!elem.persistInput || elem.behavior === "filter") {
|
|
2416
|
-
hasValue = elem.input.value?.length > 0;
|
|
2417
|
-
}
|
|
2418
|
-
}
|
|
2419
|
-
|
|
2420
2363
|
if (!hasValue && elem.required && elem.touched) {
|
|
2421
2364
|
elem.validity = 'valueMissing';
|
|
2422
2365
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
@@ -2425,11 +2368,6 @@ class AuroFormValidation {
|
|
|
2425
2368
|
this.validateElementAttributes(elem);
|
|
2426
2369
|
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
2427
2370
|
this.validateElementAttributes(elem);
|
|
2428
|
-
} else if (isCombobox) {
|
|
2429
|
-
this.validateElementAttributes(elem);
|
|
2430
|
-
|
|
2431
|
-
// Don't run extra validation for cases where the combobox is not being used as a filter
|
|
2432
|
-
validationShouldRun = elem.behavior !== 'filter';
|
|
2433
2371
|
}
|
|
2434
2372
|
}
|
|
2435
2373
|
|
|
@@ -2437,8 +2375,8 @@ class AuroFormValidation {
|
|
|
2437
2375
|
|
|
2438
2376
|
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
2439
2377
|
|
|
2440
|
-
// Don't reset combobox validity if
|
|
2441
|
-
if (!isCombobox || isCombobox && !elem.
|
|
2378
|
+
// Don't reset combobox validity if persistValue is set since we can't use the input value to validate
|
|
2379
|
+
if (!isCombobox || isCombobox && !elem.persistValue) {
|
|
2442
2380
|
|
|
2443
2381
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
2444
2382
|
this.auroInputElements.forEach(input => input.validate());
|
|
@@ -2511,8 +2449,6 @@ class AuroFormValidation {
|
|
|
2511
2449
|
if (input.validationMessage.length > 0) {
|
|
2512
2450
|
elem.errorMessage = input.validationMessage;
|
|
2513
2451
|
}
|
|
2514
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
|
|
2515
|
-
elem.errorMessage = elem.input?.inputElement?.validationMessage;
|
|
2516
2452
|
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
2517
2453
|
const firstInput = this.inputElements[0];
|
|
2518
2454
|
|
|
@@ -2174,52 +2174,6 @@ class AuroFormValidation {
|
|
|
2174
2174
|
message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
|
|
2175
2175
|
}
|
|
2176
2176
|
]
|
|
2177
|
-
},
|
|
2178
|
-
combobox: {
|
|
2179
|
-
filter: [
|
|
2180
|
-
{
|
|
2181
|
-
check: (e) => {
|
|
2182
|
-
|
|
2183
|
-
// Guard Clause: If the behavior is not 'filter', skip this validation
|
|
2184
|
-
if (e.behavior !== 'filter') return false;
|
|
2185
|
-
|
|
2186
|
-
// Get the current input value
|
|
2187
|
-
const currentInputValue = e.input.value;
|
|
2188
|
-
|
|
2189
|
-
// Skip validation if the input has no value
|
|
2190
|
-
if (!currentInputValue) return false;
|
|
2191
|
-
|
|
2192
|
-
/**
|
|
2193
|
-
* Let's check if the option selected and combobox value match.
|
|
2194
|
-
*/
|
|
2195
|
-
|
|
2196
|
-
// Guard Clause: If there is no option selected fail the validation
|
|
2197
|
-
if (!e.optionSelected) return true;
|
|
2198
|
-
|
|
2199
|
-
// Guard Clause: If there is no value fail the validation
|
|
2200
|
-
if (!e.value) return true;
|
|
2201
|
-
|
|
2202
|
-
// Guard Clause: If the selected option's value doesn't match the input value fail the validation
|
|
2203
|
-
if (e.optionSelected.value !== e.value) return true;
|
|
2204
|
-
|
|
2205
|
-
/**
|
|
2206
|
-
* Now let's make sure the user hasn't change the value in the input after selecting an option.
|
|
2207
|
-
* This is to make sure there's no user confusion if they select an option but then change the value to something else.
|
|
2208
|
-
*/
|
|
2209
|
-
|
|
2210
|
-
// Guard Clause: If the current input value doesn't match the option selected value fail the validation
|
|
2211
|
-
if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
|
|
2212
|
-
|
|
2213
|
-
// Guard Clause: If the current input value doesn't match the combobox value fail the validation
|
|
2214
|
-
if (currentInputValue && currentInputValue !== e.value) return true;
|
|
2215
|
-
|
|
2216
|
-
// If all the checks passed the validation passes
|
|
2217
|
-
return false;
|
|
2218
|
-
},
|
|
2219
|
-
validity: 'valueMissing',
|
|
2220
|
-
message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
|
|
2221
|
-
}
|
|
2222
|
-
]
|
|
2223
2177
|
}
|
|
2224
2178
|
};
|
|
2225
2179
|
|
|
@@ -2228,8 +2182,6 @@ class AuroFormValidation {
|
|
|
2228
2182
|
elementType = 'input';
|
|
2229
2183
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
2230
2184
|
elementType = 'counter';
|
|
2231
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
2232
|
-
elementType = 'combobox';
|
|
2233
2185
|
}
|
|
2234
2186
|
|
|
2235
2187
|
if (elementType) {
|
|
@@ -2408,15 +2360,6 @@ class AuroFormValidation {
|
|
|
2408
2360
|
}
|
|
2409
2361
|
}
|
|
2410
2362
|
|
|
2411
|
-
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
2412
|
-
|
|
2413
|
-
if (isCombobox) {
|
|
2414
|
-
|
|
2415
|
-
if (!elem.persistInput || elem.behavior === "filter") {
|
|
2416
|
-
hasValue = elem.input.value?.length > 0;
|
|
2417
|
-
}
|
|
2418
|
-
}
|
|
2419
|
-
|
|
2420
2363
|
if (!hasValue && elem.required && elem.touched) {
|
|
2421
2364
|
elem.validity = 'valueMissing';
|
|
2422
2365
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
@@ -2425,11 +2368,6 @@ class AuroFormValidation {
|
|
|
2425
2368
|
this.validateElementAttributes(elem);
|
|
2426
2369
|
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
2427
2370
|
this.validateElementAttributes(elem);
|
|
2428
|
-
} else if (isCombobox) {
|
|
2429
|
-
this.validateElementAttributes(elem);
|
|
2430
|
-
|
|
2431
|
-
// Don't run extra validation for cases where the combobox is not being used as a filter
|
|
2432
|
-
validationShouldRun = elem.behavior !== 'filter';
|
|
2433
2371
|
}
|
|
2434
2372
|
}
|
|
2435
2373
|
|
|
@@ -2437,8 +2375,8 @@ class AuroFormValidation {
|
|
|
2437
2375
|
|
|
2438
2376
|
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
2439
2377
|
|
|
2440
|
-
// Don't reset combobox validity if
|
|
2441
|
-
if (!isCombobox || isCombobox && !elem.
|
|
2378
|
+
// Don't reset combobox validity if persistValue is set since we can't use the input value to validate
|
|
2379
|
+
if (!isCombobox || isCombobox && !elem.persistValue) {
|
|
2442
2380
|
|
|
2443
2381
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
2444
2382
|
this.auroInputElements.forEach(input => input.validate());
|
|
@@ -2511,8 +2449,6 @@ class AuroFormValidation {
|
|
|
2511
2449
|
if (input.validationMessage.length > 0) {
|
|
2512
2450
|
elem.errorMessage = input.validationMessage;
|
|
2513
2451
|
}
|
|
2514
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
|
|
2515
|
-
elem.errorMessage = elem.input?.inputElement?.validationMessage;
|
|
2516
2452
|
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
2517
2453
|
const firstInput = this.inputElements[0];
|
|
2518
2454
|
|
|
@@ -2128,52 +2128,6 @@ class AuroFormValidation {
|
|
|
2128
2128
|
message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
|
|
2129
2129
|
}
|
|
2130
2130
|
]
|
|
2131
|
-
},
|
|
2132
|
-
combobox: {
|
|
2133
|
-
filter: [
|
|
2134
|
-
{
|
|
2135
|
-
check: (e) => {
|
|
2136
|
-
|
|
2137
|
-
// Guard Clause: If the behavior is not 'filter', skip this validation
|
|
2138
|
-
if (e.behavior !== 'filter') return false;
|
|
2139
|
-
|
|
2140
|
-
// Get the current input value
|
|
2141
|
-
const currentInputValue = e.input.value;
|
|
2142
|
-
|
|
2143
|
-
// Skip validation if the input has no value
|
|
2144
|
-
if (!currentInputValue) return false;
|
|
2145
|
-
|
|
2146
|
-
/**
|
|
2147
|
-
* Let's check if the option selected and combobox value match.
|
|
2148
|
-
*/
|
|
2149
|
-
|
|
2150
|
-
// Guard Clause: If there is no option selected fail the validation
|
|
2151
|
-
if (!e.optionSelected) return true;
|
|
2152
|
-
|
|
2153
|
-
// Guard Clause: If there is no value fail the validation
|
|
2154
|
-
if (!e.value) return true;
|
|
2155
|
-
|
|
2156
|
-
// Guard Clause: If the selected option's value doesn't match the input value fail the validation
|
|
2157
|
-
if (e.optionSelected.value !== e.value) return true;
|
|
2158
|
-
|
|
2159
|
-
/**
|
|
2160
|
-
* Now let's make sure the user hasn't change the value in the input after selecting an option.
|
|
2161
|
-
* This is to make sure there's no user confusion if they select an option but then change the value to something else.
|
|
2162
|
-
*/
|
|
2163
|
-
|
|
2164
|
-
// Guard Clause: If the current input value doesn't match the option selected value fail the validation
|
|
2165
|
-
if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
|
|
2166
|
-
|
|
2167
|
-
// Guard Clause: If the current input value doesn't match the combobox value fail the validation
|
|
2168
|
-
if (currentInputValue && currentInputValue !== e.value) return true;
|
|
2169
|
-
|
|
2170
|
-
// If all the checks passed the validation passes
|
|
2171
|
-
return false;
|
|
2172
|
-
},
|
|
2173
|
-
validity: 'valueMissing',
|
|
2174
|
-
message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
|
|
2175
|
-
}
|
|
2176
|
-
]
|
|
2177
2131
|
}
|
|
2178
2132
|
};
|
|
2179
2133
|
|
|
@@ -2182,8 +2136,6 @@ class AuroFormValidation {
|
|
|
2182
2136
|
elementType = 'input';
|
|
2183
2137
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
2184
2138
|
elementType = 'counter';
|
|
2185
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
2186
|
-
elementType = 'combobox';
|
|
2187
2139
|
}
|
|
2188
2140
|
|
|
2189
2141
|
if (elementType) {
|
|
@@ -2362,15 +2314,6 @@ class AuroFormValidation {
|
|
|
2362
2314
|
}
|
|
2363
2315
|
}
|
|
2364
2316
|
|
|
2365
|
-
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
2366
|
-
|
|
2367
|
-
if (isCombobox) {
|
|
2368
|
-
|
|
2369
|
-
if (!elem.persistInput || elem.behavior === "filter") {
|
|
2370
|
-
hasValue = elem.input.value?.length > 0;
|
|
2371
|
-
}
|
|
2372
|
-
}
|
|
2373
|
-
|
|
2374
2317
|
if (!hasValue && elem.required && elem.touched) {
|
|
2375
2318
|
elem.validity = 'valueMissing';
|
|
2376
2319
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
@@ -2379,11 +2322,6 @@ class AuroFormValidation {
|
|
|
2379
2322
|
this.validateElementAttributes(elem);
|
|
2380
2323
|
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
2381
2324
|
this.validateElementAttributes(elem);
|
|
2382
|
-
} else if (isCombobox) {
|
|
2383
|
-
this.validateElementAttributes(elem);
|
|
2384
|
-
|
|
2385
|
-
// Don't run extra validation for cases where the combobox is not being used as a filter
|
|
2386
|
-
validationShouldRun = elem.behavior !== 'filter';
|
|
2387
2325
|
}
|
|
2388
2326
|
}
|
|
2389
2327
|
|
|
@@ -2391,8 +2329,8 @@ class AuroFormValidation {
|
|
|
2391
2329
|
|
|
2392
2330
|
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
2393
2331
|
|
|
2394
|
-
// Don't reset combobox validity if
|
|
2395
|
-
if (!isCombobox || isCombobox && !elem.
|
|
2332
|
+
// Don't reset combobox validity if persistValue is set since we can't use the input value to validate
|
|
2333
|
+
if (!isCombobox || isCombobox && !elem.persistValue) {
|
|
2396
2334
|
|
|
2397
2335
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
2398
2336
|
this.auroInputElements.forEach(input => input.validate());
|
|
@@ -2465,8 +2403,6 @@ class AuroFormValidation {
|
|
|
2465
2403
|
if (input.validationMessage.length > 0) {
|
|
2466
2404
|
elem.errorMessage = input.validationMessage;
|
|
2467
2405
|
}
|
|
2468
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
|
|
2469
|
-
elem.errorMessage = elem.input?.inputElement?.validationMessage;
|
|
2470
2406
|
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
2471
2407
|
const firstInput = this.inputElements[0];
|
|
2472
2408
|
|