@aurodesignsystem/auro-formkit 5.1.0-rc-1176.1 → 5.1.0-rc-1195.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -1
- package/components/checkbox/demo/api.min.js +66 -2
- package/components/checkbox/demo/index.min.js +66 -2
- package/components/checkbox/dist/index.js +66 -2
- package/components/checkbox/dist/registered.js +66 -2
- package/components/combobox/demo/api.md +230 -38
- package/components/combobox/demo/api.min.js +155 -6
- package/components/combobox/demo/index.md +104 -0
- package/components/combobox/demo/index.min.js +155 -6
- package/components/combobox/dist/auro-combobox.d.ts +18 -1
- package/components/combobox/dist/index.js +155 -6
- package/components/combobox/dist/registered.js +155 -6
- package/components/counter/demo/api.min.js +69 -5
- package/components/counter/demo/index.min.js +69 -5
- package/components/counter/dist/index.js +69 -5
- package/components/counter/dist/registered.js +69 -5
- package/components/datepicker/demo/api.md +40 -0
- package/components/datepicker/demo/api.min.js +173 -10
- package/components/datepicker/demo/index.min.js +173 -10
- package/components/datepicker/dist/auro-calendar-cell.d.ts +6 -0
- package/components/datepicker/dist/auro-datepicker.d.ts +8 -0
- package/components/datepicker/dist/index.js +173 -10
- package/components/datepicker/dist/registered.js +173 -10
- package/components/input/demo/api.min.js +67 -3
- package/components/input/demo/index.min.js +67 -3
- package/components/input/dist/index.js +67 -3
- package/components/input/dist/registered.js +67 -3
- package/components/radio/demo/api.min.js +97 -5
- package/components/radio/demo/index.min.js +97 -5
- package/components/radio/dist/auro-radio-group.d.ts +14 -0
- package/components/radio/dist/index.js +97 -5
- package/components/radio/dist/registered.js +97 -5
- package/components/select/demo/api.min.js +67 -3
- package/components/select/demo/index.min.js +67 -3
- package/components/select/dist/index.js +67 -3
- package/components/select/dist/registered.js +67 -3
- package/package.json +1 -1
|
@@ -22,7 +22,7 @@ var emphasizedStyleCss = css`:host([layout*=emphasized][shape*=pill]:not([layout
|
|
|
22
22
|
|
|
23
23
|
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)}`;
|
|
24
24
|
|
|
25
|
-
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-expanded-widget-background: #00274a;--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}`;
|
|
25
|
+
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-expanded-widget-background: #00274a;--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}`;
|
|
26
26
|
|
|
27
27
|
const watchedItems = new Set();
|
|
28
28
|
|
|
@@ -4579,6 +4579,52 @@ class AuroFormValidation {
|
|
|
4579
4579
|
message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
|
|
4580
4580
|
}
|
|
4581
4581
|
]
|
|
4582
|
+
},
|
|
4583
|
+
combobox: {
|
|
4584
|
+
filter: [
|
|
4585
|
+
{
|
|
4586
|
+
check: (e) => {
|
|
4587
|
+
|
|
4588
|
+
// Guard Clause: If the behavior is not 'filter', skip this validation
|
|
4589
|
+
if (e.behavior !== 'filter') return false;
|
|
4590
|
+
|
|
4591
|
+
// Get the current input value
|
|
4592
|
+
const currentInputValue = e.input.value;
|
|
4593
|
+
|
|
4594
|
+
// Skip validation if the input has no value
|
|
4595
|
+
if (!currentInputValue) return false;
|
|
4596
|
+
|
|
4597
|
+
/**
|
|
4598
|
+
* Let's check if the option selected and combobox value match.
|
|
4599
|
+
*/
|
|
4600
|
+
|
|
4601
|
+
// Guard Clause: If there is no option selected fail the validation
|
|
4602
|
+
if (!e.optionSelected) return true;
|
|
4603
|
+
|
|
4604
|
+
// Guard Clause: If there is no value fail the validation
|
|
4605
|
+
if (!e.value) return true;
|
|
4606
|
+
|
|
4607
|
+
// Guard Clause: If the selected option's value doesn't match the input value fail the validation
|
|
4608
|
+
if (e.optionSelected.value !== e.value) return true;
|
|
4609
|
+
|
|
4610
|
+
/**
|
|
4611
|
+
* Now let's make sure the user hasn't change the value in the input after selecting an option.
|
|
4612
|
+
* This is to make sure there's no user confusion if they select an option but then change the value to something else.
|
|
4613
|
+
*/
|
|
4614
|
+
|
|
4615
|
+
// Guard Clause: If the current input value doesn't match the option selected value fail the validation
|
|
4616
|
+
if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
|
|
4617
|
+
|
|
4618
|
+
// Guard Clause: If the current input value doesn't match the combobox value fail the validation
|
|
4619
|
+
if (currentInputValue && currentInputValue !== e.value) return true;
|
|
4620
|
+
|
|
4621
|
+
// If all the checks passed the validation passes
|
|
4622
|
+
return false;
|
|
4623
|
+
},
|
|
4624
|
+
validity: 'valueMissing',
|
|
4625
|
+
message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
|
|
4626
|
+
}
|
|
4627
|
+
]
|
|
4582
4628
|
}
|
|
4583
4629
|
};
|
|
4584
4630
|
|
|
@@ -4587,6 +4633,8 @@ class AuroFormValidation {
|
|
|
4587
4633
|
elementType = 'input';
|
|
4588
4634
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
4589
4635
|
elementType = 'counter';
|
|
4636
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
4637
|
+
elementType = 'combobox';
|
|
4590
4638
|
}
|
|
4591
4639
|
|
|
4592
4640
|
if (elementType) {
|
|
@@ -4773,6 +4821,15 @@ class AuroFormValidation {
|
|
|
4773
4821
|
}
|
|
4774
4822
|
}
|
|
4775
4823
|
|
|
4824
|
+
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
4825
|
+
|
|
4826
|
+
if (isCombobox) {
|
|
4827
|
+
|
|
4828
|
+
if (!elem.persistInput || elem.behavior === "filter") {
|
|
4829
|
+
hasValue = elem.input.value?.length > 0;
|
|
4830
|
+
}
|
|
4831
|
+
}
|
|
4832
|
+
|
|
4776
4833
|
if (!hasValue && elem.required && elem.touched) {
|
|
4777
4834
|
elem.validity = 'valueMissing';
|
|
4778
4835
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
@@ -4781,6 +4838,11 @@ class AuroFormValidation {
|
|
|
4781
4838
|
this.validateElementAttributes(elem);
|
|
4782
4839
|
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
4783
4840
|
this.validateElementAttributes(elem);
|
|
4841
|
+
} else if (isCombobox) {
|
|
4842
|
+
this.validateElementAttributes(elem);
|
|
4843
|
+
|
|
4844
|
+
// Don't run extra validation for cases where the combobox is not being used as a filter
|
|
4845
|
+
validationShouldRun = elem.behavior !== 'filter';
|
|
4784
4846
|
}
|
|
4785
4847
|
}
|
|
4786
4848
|
|
|
@@ -4788,8 +4850,8 @@ class AuroFormValidation {
|
|
|
4788
4850
|
|
|
4789
4851
|
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
4790
4852
|
|
|
4791
|
-
// Don't reset combobox validity if
|
|
4792
|
-
if (!isCombobox || isCombobox && !elem.
|
|
4853
|
+
// Don't reset combobox validity if persistInput is set since we can't use the input value to validate
|
|
4854
|
+
if (!isCombobox || isCombobox && !elem.persistInput) {
|
|
4793
4855
|
|
|
4794
4856
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
4795
4857
|
this.auroInputElements.forEach(input => input.validate());
|
|
@@ -4862,6 +4924,8 @@ class AuroFormValidation {
|
|
|
4862
4924
|
if (input.validationMessage.length > 0) {
|
|
4863
4925
|
elem.errorMessage = input.validationMessage;
|
|
4864
4926
|
}
|
|
4927
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
|
|
4928
|
+
elem.errorMessage = elem.input?.inputElement?.validationMessage;
|
|
4865
4929
|
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
4866
4930
|
const firstInput = this.inputElements[0];
|
|
4867
4931
|
|
|
@@ -466,7 +466,7 @@ class AuroRadio extends i$2 {
|
|
|
466
466
|
*/
|
|
467
467
|
const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
|
|
468
468
|
|
|
469
|
-
var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
|
|
469
|
+
var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}.hidden{display:none}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
|
|
470
470
|
|
|
471
471
|
var colorCss$1 = i$5`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
472
472
|
|
|
@@ -975,6 +975,52 @@ class AuroFormValidation {
|
|
|
975
975
|
message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
|
|
976
976
|
}
|
|
977
977
|
]
|
|
978
|
+
},
|
|
979
|
+
combobox: {
|
|
980
|
+
filter: [
|
|
981
|
+
{
|
|
982
|
+
check: (e) => {
|
|
983
|
+
|
|
984
|
+
// Guard Clause: If the behavior is not 'filter', skip this validation
|
|
985
|
+
if (e.behavior !== 'filter') return false;
|
|
986
|
+
|
|
987
|
+
// Get the current input value
|
|
988
|
+
const currentInputValue = e.input.value;
|
|
989
|
+
|
|
990
|
+
// Skip validation if the input has no value
|
|
991
|
+
if (!currentInputValue) return false;
|
|
992
|
+
|
|
993
|
+
/**
|
|
994
|
+
* Let's check if the option selected and combobox value match.
|
|
995
|
+
*/
|
|
996
|
+
|
|
997
|
+
// Guard Clause: If there is no option selected fail the validation
|
|
998
|
+
if (!e.optionSelected) return true;
|
|
999
|
+
|
|
1000
|
+
// Guard Clause: If there is no value fail the validation
|
|
1001
|
+
if (!e.value) return true;
|
|
1002
|
+
|
|
1003
|
+
// Guard Clause: If the selected option's value doesn't match the input value fail the validation
|
|
1004
|
+
if (e.optionSelected.value !== e.value) return true;
|
|
1005
|
+
|
|
1006
|
+
/**
|
|
1007
|
+
* Now let's make sure the user hasn't change the value in the input after selecting an option.
|
|
1008
|
+
* This is to make sure there's no user confusion if they select an option but then change the value to something else.
|
|
1009
|
+
*/
|
|
1010
|
+
|
|
1011
|
+
// Guard Clause: If the current input value doesn't match the option selected value fail the validation
|
|
1012
|
+
if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
|
|
1013
|
+
|
|
1014
|
+
// Guard Clause: If the current input value doesn't match the combobox value fail the validation
|
|
1015
|
+
if (currentInputValue && currentInputValue !== e.value) return true;
|
|
1016
|
+
|
|
1017
|
+
// If all the checks passed the validation passes
|
|
1018
|
+
return false;
|
|
1019
|
+
},
|
|
1020
|
+
validity: 'valueMissing',
|
|
1021
|
+
message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
|
|
1022
|
+
}
|
|
1023
|
+
]
|
|
978
1024
|
}
|
|
979
1025
|
};
|
|
980
1026
|
|
|
@@ -983,6 +1029,8 @@ class AuroFormValidation {
|
|
|
983
1029
|
elementType = 'input';
|
|
984
1030
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
985
1031
|
elementType = 'counter';
|
|
1032
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
1033
|
+
elementType = 'combobox';
|
|
986
1034
|
}
|
|
987
1035
|
|
|
988
1036
|
if (elementType) {
|
|
@@ -1169,6 +1217,15 @@ class AuroFormValidation {
|
|
|
1169
1217
|
}
|
|
1170
1218
|
}
|
|
1171
1219
|
|
|
1220
|
+
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
1221
|
+
|
|
1222
|
+
if (isCombobox) {
|
|
1223
|
+
|
|
1224
|
+
if (!elem.persistInput || elem.behavior === "filter") {
|
|
1225
|
+
hasValue = elem.input.value?.length > 0;
|
|
1226
|
+
}
|
|
1227
|
+
}
|
|
1228
|
+
|
|
1172
1229
|
if (!hasValue && elem.required && elem.touched) {
|
|
1173
1230
|
elem.validity = 'valueMissing';
|
|
1174
1231
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
@@ -1177,6 +1234,11 @@ class AuroFormValidation {
|
|
|
1177
1234
|
this.validateElementAttributes(elem);
|
|
1178
1235
|
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
1179
1236
|
this.validateElementAttributes(elem);
|
|
1237
|
+
} else if (isCombobox) {
|
|
1238
|
+
this.validateElementAttributes(elem);
|
|
1239
|
+
|
|
1240
|
+
// Don't run extra validation for cases where the combobox is not being used as a filter
|
|
1241
|
+
validationShouldRun = elem.behavior !== 'filter';
|
|
1180
1242
|
}
|
|
1181
1243
|
}
|
|
1182
1244
|
|
|
@@ -1184,8 +1246,8 @@ class AuroFormValidation {
|
|
|
1184
1246
|
|
|
1185
1247
|
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
1186
1248
|
|
|
1187
|
-
// Don't reset combobox validity if
|
|
1188
|
-
if (!isCombobox || isCombobox && !elem.
|
|
1249
|
+
// Don't reset combobox validity if persistInput is set since we can't use the input value to validate
|
|
1250
|
+
if (!isCombobox || isCombobox && !elem.persistInput) {
|
|
1189
1251
|
|
|
1190
1252
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
1191
1253
|
this.auroInputElements.forEach(input => input.validate());
|
|
@@ -1258,6 +1320,8 @@ class AuroFormValidation {
|
|
|
1258
1320
|
if (input.validationMessage.length > 0) {
|
|
1259
1321
|
elem.errorMessage = input.validationMessage;
|
|
1260
1322
|
}
|
|
1323
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
|
|
1324
|
+
elem.errorMessage = elem.input?.inputElement?.validationMessage;
|
|
1261
1325
|
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
1262
1326
|
const firstInput = this.inputElements[0];
|
|
1263
1327
|
|
|
@@ -1586,6 +1650,7 @@ class AuroRadioGroup extends i$2 {
|
|
|
1586
1650
|
this.optionSelected = undefined;
|
|
1587
1651
|
this.onDark = false;
|
|
1588
1652
|
this.touched = false;
|
|
1653
|
+
this.hasLegend = false;
|
|
1589
1654
|
|
|
1590
1655
|
/**
|
|
1591
1656
|
* @private
|
|
@@ -1690,6 +1755,18 @@ class AuroRadioGroup extends i$2 {
|
|
|
1690
1755
|
type: Boolean,
|
|
1691
1756
|
reflect: true,
|
|
1692
1757
|
attribute: false
|
|
1758
|
+
},
|
|
1759
|
+
|
|
1760
|
+
/**
|
|
1761
|
+
* Indicates whether the legend slot is set or not.
|
|
1762
|
+
* @type {boolean}
|
|
1763
|
+
* @default false
|
|
1764
|
+
* @private
|
|
1765
|
+
*/
|
|
1766
|
+
hasLegend: {
|
|
1767
|
+
type: Boolean,
|
|
1768
|
+
reflect: false,
|
|
1769
|
+
attribute: false
|
|
1693
1770
|
}
|
|
1694
1771
|
};
|
|
1695
1772
|
}
|
|
@@ -1878,6 +1955,18 @@ class AuroRadioGroup extends i$2 {
|
|
|
1878
1955
|
this.handleItems();
|
|
1879
1956
|
}
|
|
1880
1957
|
|
|
1958
|
+
/**
|
|
1959
|
+
* Method for handling legend slot changes.
|
|
1960
|
+
* @private
|
|
1961
|
+
* @returns {void}
|
|
1962
|
+
*/
|
|
1963
|
+
handleLegendSlotChange() {
|
|
1964
|
+
const slot = this.shadowRoot.querySelector('slot[name="legend"]');
|
|
1965
|
+
if (slot) {
|
|
1966
|
+
this.hasLegend = slot.assignedNodes().length > 0;
|
|
1967
|
+
}
|
|
1968
|
+
}
|
|
1969
|
+
|
|
1881
1970
|
/**
|
|
1882
1971
|
* Method for initializing the tab index of the checked radio input.
|
|
1883
1972
|
* @private
|
|
@@ -1992,11 +2081,14 @@ class AuroRadioGroup extends i$2 {
|
|
|
1992
2081
|
const groupClasses = {
|
|
1993
2082
|
'displayFlex': this.horizontal && this.items.length <= this.max
|
|
1994
2083
|
};
|
|
2084
|
+
const legendClasses = {
|
|
2085
|
+
'hidden': !this.hasLegend && this.required
|
|
2086
|
+
};
|
|
1995
2087
|
|
|
1996
2088
|
return u`
|
|
1997
2089
|
<fieldset class="${e(groupClasses)}" part="radio-group" role="radiogroup">
|
|
1998
|
-
<legend>
|
|
1999
|
-
<slot name="legend"></slot>
|
|
2090
|
+
<legend class="${e(legendClasses)}">
|
|
2091
|
+
<slot name="legend" @slotchange=${this.handleLegendSlotChange}></slot>
|
|
2000
2092
|
${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
|
|
2001
2093
|
</legend>
|
|
2002
2094
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
@@ -441,7 +441,7 @@ class AuroRadio extends i$2 {
|
|
|
441
441
|
*/
|
|
442
442
|
const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
|
|
443
443
|
|
|
444
|
-
var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
|
|
444
|
+
var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}.hidden{display:none}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
|
|
445
445
|
|
|
446
446
|
var colorCss$1 = i$5`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]),:host([appearance=inverse]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
447
447
|
|
|
@@ -950,6 +950,52 @@ class AuroFormValidation {
|
|
|
950
950
|
message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
|
|
951
951
|
}
|
|
952
952
|
]
|
|
953
|
+
},
|
|
954
|
+
combobox: {
|
|
955
|
+
filter: [
|
|
956
|
+
{
|
|
957
|
+
check: (e) => {
|
|
958
|
+
|
|
959
|
+
// Guard Clause: If the behavior is not 'filter', skip this validation
|
|
960
|
+
if (e.behavior !== 'filter') return false;
|
|
961
|
+
|
|
962
|
+
// Get the current input value
|
|
963
|
+
const currentInputValue = e.input.value;
|
|
964
|
+
|
|
965
|
+
// Skip validation if the input has no value
|
|
966
|
+
if (!currentInputValue) return false;
|
|
967
|
+
|
|
968
|
+
/**
|
|
969
|
+
* Let's check if the option selected and combobox value match.
|
|
970
|
+
*/
|
|
971
|
+
|
|
972
|
+
// Guard Clause: If there is no option selected fail the validation
|
|
973
|
+
if (!e.optionSelected) return true;
|
|
974
|
+
|
|
975
|
+
// Guard Clause: If there is no value fail the validation
|
|
976
|
+
if (!e.value) return true;
|
|
977
|
+
|
|
978
|
+
// Guard Clause: If the selected option's value doesn't match the input value fail the validation
|
|
979
|
+
if (e.optionSelected.value !== e.value) return true;
|
|
980
|
+
|
|
981
|
+
/**
|
|
982
|
+
* Now let's make sure the user hasn't change the value in the input after selecting an option.
|
|
983
|
+
* This is to make sure there's no user confusion if they select an option but then change the value to something else.
|
|
984
|
+
*/
|
|
985
|
+
|
|
986
|
+
// Guard Clause: If the current input value doesn't match the option selected value fail the validation
|
|
987
|
+
if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
|
|
988
|
+
|
|
989
|
+
// Guard Clause: If the current input value doesn't match the combobox value fail the validation
|
|
990
|
+
if (currentInputValue && currentInputValue !== e.value) return true;
|
|
991
|
+
|
|
992
|
+
// If all the checks passed the validation passes
|
|
993
|
+
return false;
|
|
994
|
+
},
|
|
995
|
+
validity: 'valueMissing',
|
|
996
|
+
message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
|
|
997
|
+
}
|
|
998
|
+
]
|
|
953
999
|
}
|
|
954
1000
|
};
|
|
955
1001
|
|
|
@@ -958,6 +1004,8 @@ class AuroFormValidation {
|
|
|
958
1004
|
elementType = 'input';
|
|
959
1005
|
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
960
1006
|
elementType = 'counter';
|
|
1007
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
1008
|
+
elementType = 'combobox';
|
|
961
1009
|
}
|
|
962
1010
|
|
|
963
1011
|
if (elementType) {
|
|
@@ -1144,6 +1192,15 @@ class AuroFormValidation {
|
|
|
1144
1192
|
}
|
|
1145
1193
|
}
|
|
1146
1194
|
|
|
1195
|
+
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
1196
|
+
|
|
1197
|
+
if (isCombobox) {
|
|
1198
|
+
|
|
1199
|
+
if (!elem.persistInput || elem.behavior === "filter") {
|
|
1200
|
+
hasValue = elem.input.value?.length > 0;
|
|
1201
|
+
}
|
|
1202
|
+
}
|
|
1203
|
+
|
|
1147
1204
|
if (!hasValue && elem.required && elem.touched) {
|
|
1148
1205
|
elem.validity = 'valueMissing';
|
|
1149
1206
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
@@ -1152,6 +1209,11 @@ class AuroFormValidation {
|
|
|
1152
1209
|
this.validateElementAttributes(elem);
|
|
1153
1210
|
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
1154
1211
|
this.validateElementAttributes(elem);
|
|
1212
|
+
} else if (isCombobox) {
|
|
1213
|
+
this.validateElementAttributes(elem);
|
|
1214
|
+
|
|
1215
|
+
// Don't run extra validation for cases where the combobox is not being used as a filter
|
|
1216
|
+
validationShouldRun = elem.behavior !== 'filter';
|
|
1155
1217
|
}
|
|
1156
1218
|
}
|
|
1157
1219
|
|
|
@@ -1159,8 +1221,8 @@ class AuroFormValidation {
|
|
|
1159
1221
|
|
|
1160
1222
|
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
1161
1223
|
|
|
1162
|
-
// Don't reset combobox validity if
|
|
1163
|
-
if (!isCombobox || isCombobox && !elem.
|
|
1224
|
+
// Don't reset combobox validity if persistInput is set since we can't use the input value to validate
|
|
1225
|
+
if (!isCombobox || isCombobox && !elem.persistInput) {
|
|
1164
1226
|
|
|
1165
1227
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
1166
1228
|
this.auroInputElements.forEach(input => input.validate());
|
|
@@ -1233,6 +1295,8 @@ class AuroFormValidation {
|
|
|
1233
1295
|
if (input.validationMessage.length > 0) {
|
|
1234
1296
|
elem.errorMessage = input.validationMessage;
|
|
1235
1297
|
}
|
|
1298
|
+
} else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
|
|
1299
|
+
elem.errorMessage = elem.input?.inputElement?.validationMessage;
|
|
1236
1300
|
} else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
|
|
1237
1301
|
const firstInput = this.inputElements[0];
|
|
1238
1302
|
|
|
@@ -1561,6 +1625,7 @@ class AuroRadioGroup extends i$2 {
|
|
|
1561
1625
|
this.optionSelected = undefined;
|
|
1562
1626
|
this.onDark = false;
|
|
1563
1627
|
this.touched = false;
|
|
1628
|
+
this.hasLegend = false;
|
|
1564
1629
|
|
|
1565
1630
|
/**
|
|
1566
1631
|
* @private
|
|
@@ -1665,6 +1730,18 @@ class AuroRadioGroup extends i$2 {
|
|
|
1665
1730
|
type: Boolean,
|
|
1666
1731
|
reflect: true,
|
|
1667
1732
|
attribute: false
|
|
1733
|
+
},
|
|
1734
|
+
|
|
1735
|
+
/**
|
|
1736
|
+
* Indicates whether the legend slot is set or not.
|
|
1737
|
+
* @type {boolean}
|
|
1738
|
+
* @default false
|
|
1739
|
+
* @private
|
|
1740
|
+
*/
|
|
1741
|
+
hasLegend: {
|
|
1742
|
+
type: Boolean,
|
|
1743
|
+
reflect: false,
|
|
1744
|
+
attribute: false
|
|
1668
1745
|
}
|
|
1669
1746
|
};
|
|
1670
1747
|
}
|
|
@@ -1853,6 +1930,18 @@ class AuroRadioGroup extends i$2 {
|
|
|
1853
1930
|
this.handleItems();
|
|
1854
1931
|
}
|
|
1855
1932
|
|
|
1933
|
+
/**
|
|
1934
|
+
* Method for handling legend slot changes.
|
|
1935
|
+
* @private
|
|
1936
|
+
* @returns {void}
|
|
1937
|
+
*/
|
|
1938
|
+
handleLegendSlotChange() {
|
|
1939
|
+
const slot = this.shadowRoot.querySelector('slot[name="legend"]');
|
|
1940
|
+
if (slot) {
|
|
1941
|
+
this.hasLegend = slot.assignedNodes().length > 0;
|
|
1942
|
+
}
|
|
1943
|
+
}
|
|
1944
|
+
|
|
1856
1945
|
/**
|
|
1857
1946
|
* Method for initializing the tab index of the checked radio input.
|
|
1858
1947
|
* @private
|
|
@@ -1967,11 +2056,14 @@ class AuroRadioGroup extends i$2 {
|
|
|
1967
2056
|
const groupClasses = {
|
|
1968
2057
|
'displayFlex': this.horizontal && this.items.length <= this.max
|
|
1969
2058
|
};
|
|
2059
|
+
const legendClasses = {
|
|
2060
|
+
'hidden': !this.hasLegend && this.required
|
|
2061
|
+
};
|
|
1970
2062
|
|
|
1971
2063
|
return u`
|
|
1972
2064
|
<fieldset class="${e(groupClasses)}" part="radio-group" role="radiogroup">
|
|
1973
|
-
<legend>
|
|
1974
|
-
<slot name="legend"></slot>
|
|
2065
|
+
<legend class="${e(legendClasses)}">
|
|
2066
|
+
<slot name="legend" @slotchange=${this.handleLegendSlotChange}></slot>
|
|
1975
2067
|
${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
|
|
1976
2068
|
</legend>
|
|
1977
2069
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
@@ -76,6 +76,13 @@ export class AuroRadioGroup extends LitElement {
|
|
|
76
76
|
* @private
|
|
77
77
|
*/
|
|
78
78
|
touched: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Indicates whether the legend slot is set or not.
|
|
81
|
+
* @type {boolean}
|
|
82
|
+
* @default false
|
|
83
|
+
* @private
|
|
84
|
+
*/
|
|
85
|
+
hasLegend: boolean;
|
|
79
86
|
};
|
|
80
87
|
/**
|
|
81
88
|
* This will register this element with the browser.
|
|
@@ -95,6 +102,7 @@ export class AuroRadioGroup extends LitElement {
|
|
|
95
102
|
optionSelected: EventTarget;
|
|
96
103
|
onDark: boolean;
|
|
97
104
|
touched: boolean;
|
|
105
|
+
hasLegend: boolean;
|
|
98
106
|
/**
|
|
99
107
|
* @private
|
|
100
108
|
*/
|
|
@@ -164,6 +172,12 @@ export class AuroRadioGroup extends LitElement {
|
|
|
164
172
|
* @returns {void}
|
|
165
173
|
*/
|
|
166
174
|
private handleSlotChange;
|
|
175
|
+
/**
|
|
176
|
+
* Method for handling legend slot changes.
|
|
177
|
+
* @private
|
|
178
|
+
* @returns {void}
|
|
179
|
+
*/
|
|
180
|
+
private handleLegendSlotChange;
|
|
167
181
|
/**
|
|
168
182
|
* Method for initializing the tab index of the checked radio input.
|
|
169
183
|
* @private
|