@aurodesignsystem/auro-formkit 2.2.1-beta.2 → 2.2.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 +35 -0
- package/README.md +67 -67
- package/components/checkbox/README.md +1 -1
- package/components/checkbox/demo/readme.md +1 -1
- package/components/combobox/README.md +1 -1
- package/components/combobox/demo/api.min.js +352 -94
- package/components/combobox/demo/index.min.js +352 -94
- package/components/combobox/demo/readme.md +1 -1
- package/components/combobox/dist/index.js +352 -94
- package/components/combobox/dist/registered.js +352 -94
- package/components/counter/README.md +1 -1
- package/components/counter/demo/api.min.js +353 -95
- package/components/counter/demo/index.min.js +353 -95
- package/components/counter/demo/readme.md +1 -1
- package/components/counter/dist/index.js +353 -95
- package/components/counter/dist/registered.js +353 -95
- package/components/datepicker/README.md +1 -1
- package/components/datepicker/demo/api.min.js +466 -232
- package/components/datepicker/demo/index.min.js +466 -232
- package/components/datepicker/demo/readme.md +1 -1
- package/components/datepicker/dist/index.js +354 -114
- package/components/datepicker/dist/registered.js +354 -114
- package/components/dropdown/README.md +1 -1
- package/components/dropdown/demo/api.min.js +352 -94
- package/components/dropdown/demo/index.min.js +352 -94
- package/components/dropdown/demo/readme.md +1 -1
- package/components/dropdown/dist/auro-dropdown.d.ts +18 -0
- package/components/dropdown/dist/index.js +352 -94
- package/components/dropdown/dist/registered.js +352 -94
- package/components/form/README.md +1 -1
- package/components/form/demo/readme.md +1 -1
- package/components/input/README.md +1 -1
- package/components/input/demo/readme.md +1 -1
- package/components/menu/README.md +1 -1
- package/components/menu/demo/readme.md +1 -1
- package/components/radio/README.md +1 -1
- package/components/radio/demo/readme.md +1 -1
- package/components/select/README.md +1 -1
- package/components/select/demo/api.min.js +352 -94
- package/components/select/demo/index.min.js +352 -94
- package/components/select/demo/readme.md +1 -1
- package/components/select/dist/index.js +352 -94
- package/components/select/dist/registered.js +352 -94
- package/package.json +2 -2
|
@@ -7303,11 +7303,11 @@ var styleCss$a = css`@media screen and (max-width: 576px){:host{display:flex;jus
|
|
|
7303
7303
|
|
|
7304
7304
|
var colorCss$a = css`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #0b6f4d)}.day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}.day.selected{--ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #ffffff);box-shadow:var(--ds-auro-calendar-boxshadow-color)}.day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:unset}.day.selected:not(:hover){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff)}.day:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-brand-neutral-200, #e4e8ec);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}.day.disabled{--ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff)}.day.inRange:before,.day.rangeDepartDate:before,.day.rangeReturnDate:before,.day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}.day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}:host([disabled]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
|
|
7305
7305
|
|
|
7306
|
-
var styleCss$9 = css`:root{--ds-asset-font-circular-family-name: "AS Circular";--ds-asset-font-circular-filename: "ASCircularWeb";--ds-asset-font-circular-weight-light: "-Light";--ds-asset-font-circular-weight-medium: "-Medium";--ds-asset-font-circular-weight-book: "-Book";--ds-border-radius: 0.375rem;--ds-size-25: 0.125rem;--ds-size-50: 0.25rem;--ds-size-75: 0.375rem;--ds-size-100: 0.5rem;--ds-size-150: 0.75rem;--ds-size-200: 1rem;--ds-size-250: 1.25rem;--ds-size-300: 1.5rem;--ds-size-400: 2rem;--ds-size-500: 2.5rem;--ds-size-600: 3rem;--ds-size-700: 3.5rem;--ds-size-800: 4rem;--ds-size-900: 4.5rem;--ds-size-1000: 5rem;--ds-unitless-scale-20: 0.25;--ds-unitless-scale-50: 0.5;--ds-unitless-scale-100: 1;--ds-unitless-scale-140: 1.4;--ds-unitless-scale-150: 1.5;--ds-unitless-scale-200: 2;--ds-unitless-scale-300: 3;--ds-unitless-scale-350: 3.5;--ds-animation-default-property: all;--ds-animation-default-duration: 0.3s;--ds-animation-default-timing: ease-out;--ds-depth-overlay: 200;--ds-depth-modal: 300;--ds-depth-tooltip: 400;--ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15);--ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15);--ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2);--ds-grid-breakpoint-xs: 320px;--ds-grid-breakpoint-sm: 576px;--ds-grid-breakpoint-md: 768px;--ds-grid-breakpoint-lg: 1024px;--ds-grid-breakpoint-xl: 1232px;--ds-grid-column-xs: 6;--ds-grid-column-sm: 12;--ds-grid-column-md: 12;--ds-grid-column-lg: 12;--ds-grid-column-xl: 12;--ds-grid-gutter-xs: 0.5rem;--ds-grid-gutter-sm: 1rem;--ds-grid-gutter-md: 1.5rem;--ds-grid-gutter-lg: 1.5rem;--ds-grid-gutter-xl: 2rem;--ds-grid-margin-xs: 1rem;--ds-grid-margin-sm: 1rem;--ds-grid-margin-md: 1.5rem;--ds-grid-margin-lg: 2rem;--ds-grid-margin-xl: 2rem;--ds-font-family-default: "AS Circular", Helvetica Neue, Arial, sans-serif;--ds-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;--ds-text-heading-300-weight: 300;--ds-text-heading-300-px: 18px;--ds-text-heading-300-size: 1.125rem;--ds-text-heading-300-height: 1.625rem;--ds-text-heading-300-height-px: 26px;--ds-text-heading-400-weight: 300;--ds-text-heading-400-px: 20px;--ds-text-heading-400-size: 1.25rem;--ds-text-heading-400-height: 1.625rem;--ds-text-heading-400-height-px: 26px;--ds-text-heading-500-weight: 300;--ds-text-heading-500-px-breakpoint-sm: 22px;--ds-text-heading-500-px-breakpoint-md: 24px;--ds-text-heading-500-px-breakpoint-lg: 24px;--ds-text-heading-500-size-breakpoint-sm: 1.375rem;--ds-text-heading-500-size-breakpoint-md: 1.5rem;--ds-text-heading-500-size-breakpoint-lg: 1.5rem;--ds-text-heading-500-height-breakpoint-sm: 1.625rem;--ds-text-heading-500-height-breakpoint-px-sm: 26px;--ds-text-heading-500-height-breakpoint-md: 1.875rem;--ds-text-heading-500-height-breakpoint-px-md: 30px;--ds-text-heading-500-height-breakpoint-lg: 2rem;--ds-text-heading-500-height-breakpoint-px-lg: 32px;--ds-text-heading-600-weight: 300;--ds-text-heading-600-px-breakpoint-sm: 26px;--ds-text-heading-600-px-breakpoint-md: 28px;--ds-text-heading-600-px-breakpoint-lg: 28px;--ds-text-heading-600-size-breakpoint-sm: 1.625rem;--ds-text-heading-600-size-breakpoint-md: 1.75rem;--ds-text-heading-600-size-breakpoint-lg: 1.75rem;--ds-text-heading-600-height-breakpoint-sm: 1.875rem;--ds-text-heading-600-height-breakpoint-px-sm: 30px;--ds-text-heading-600-height-breakpoint-md: 2.125rem;--ds-text-heading-600-height-breakpoint-px-md: 34px;--ds-text-heading-600-height-breakpoint-lg: 2.25rem;--ds-text-heading-600-height-breakpoint-px-lg: 36px;--ds-text-heading-700-weight: 500;--ds-text-heading-700-px-breakpoint-sm: 28px;--ds-text-heading-700-px-breakpoint-md: 32px;--ds-text-heading-700-px-breakpoint-lg: 36px;--ds-text-heading-700-size-breakpoint-sm: 1.75rem;--ds-text-heading-700-size-breakpoint-md: 2rem;--ds-text-heading-700-size-breakpoint-lg: 2.25rem;--ds-text-heading-700-height-breakpoint-sm: 2.125rem;--ds-text-heading-700-height-breakpoint-px-sm: 34px;--ds-text-heading-700-height-breakpoint-md: 2.375rem;--ds-text-heading-700-height-breakpoint-px-md: 38px;--ds-text-heading-700-height-breakpoint-lg: 2.75rem;--ds-text-heading-700-height-breakpoint-px-lg: 44px;--ds-text-heading-800-weight: 500;--ds-text-heading-800-px-breakpoint-sm: 32px;--ds-text-heading-800-px-breakpoint-md: 36px;--ds-text-heading-800-px-breakpoint-lg: 40px;--ds-text-heading-800-size-breakpoint-sm: 2rem;--ds-text-heading-800-size-breakpoint-md: 2.25rem;--ds-text-heading-800-size-breakpoint-lg: 2.5rem;--ds-text-heading-800-height-breakpoint-sm: 2.375rem;--ds-text-heading-800-height-breakpoint-px-sm: 38px;--ds-text-heading-800-height-breakpoint-md: 2.625rem;--ds-text-heading-800-height-breakpoint-px-md: 42px;--ds-text-heading-800-height-breakpoint-lg: 3rem;--ds-text-heading-800-height-breakpoint-px-lg: 48px;--ds-text-heading-default-weight: 500;--ds-text-heading-default-margin: 0;--ds-text-heading-default-spacing: -0.2px;--ds-text-heading-medium-weight: 300;--ds-text-heading-display-weight: 100;--ds-text-heading-display-px-breakpoint-sm: 44px;--ds-text-heading-display-px-breakpoint-md: 48px;--ds-text-heading-display-px-breakpoint-lg: 56px;--ds-text-heading-display-size-breakpoint-sm: 2.75rem;--ds-text-heading-display-size-breakpoint-md: 3rem;--ds-text-heading-display-size-breakpoint-lg: 3.5rem;--ds-text-heading-display-height-breakpoint-sm: 3.375rem;--ds-text-heading-display-height-breakpoint-px-sm: 54px;--ds-text-heading-display-height-breakpoint-md: 3.75rem;--ds-text-heading-display-height-breakpoint-px-md: 60px;--ds-text-heading-display-height-breakpoint-lg: 4.25rem;--ds-text-heading-display-height-breakpoint-px-lg: 68px;--ds-text-body-default-weight: 500;--ds-text-body-size-xxs: 0.625rem;--ds-text-body-size-xs: 0.75rem;--ds-text-body-size-sm: 0.875rem;--ds-text-body-size-default: 1rem;--ds-text-body-size-lg: 1.125rem;--ds-text-body-height-xs: 1rem;--ds-text-body-height-sm: 1.25rem;--ds-text-body-height-default: 1.5rem;--ds-text-body-height-lg: 1.625rem;--ds-color-alert-notification-default: #0074c8;--ds-color-alert-warning-default: #de750c;--ds-color-alert-error-default: #df0b37;--ds-color-alert-success-default: #00805d;--ds-color-alert-advisory-default: #fff0cd;--ds-color-alert-bkg-success-default: #ddf6e8;--ds-color-alert-bkg-error-default: #ffedf1;--ds-color-background-primary-100-default: #ffffff;--ds-color-background-primary-100-inverse: #0e2b4f;--ds-color-background-primary-200-default: #f7f7f7;--ds-color-background-primary-200-inverse: #194069;--ds-color-background-primary-300-default: #e4e8ec;--ds-color-background-primary-300-inverse: #265688;--ds-color-background-primary-400-default: #dddddd;--ds-color-background-primary-400-inverse: #326aa5;--ds-color-background-success-default: #eef8f5;--ds-color-background-success-inverse: #173c30;--ds-color-background-error-default: #fff4f4;--ds-color-background-error-inverse: #74110e;--ds-color-background-warning-default: #fef8e9;--ds-color-background-warning-inverse: #5d4514;--ds-color-background-info-default: #f0f7fd;--ds-color-background-info-inverse: #193d73;--ds-color-background-subtle-default: #f7f8fa;--ds-color-background-subtle-inverse: #2a2a2a;--ds-color-background-accent-default: #ebfafd;--ds-color-background-accent-inverse: #275b72;--ds-color-background-emphasis-default: #c9e0f7;--ds-color-background-emphasis-inverse: #225296;--ds-color-background-scrimmed-default: rgba(0, 0, 0, 0.5);--ds-color-background-lightest: #ffffff;--ds-color-background-lighter: #f7f7f7;--ds-color-background-darker: #01426a;--ds-color-background-darkest: #00274a;--ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));--ds-color-base-white: #ffffff;--ds-color-base-white-100: rgba(255, 255, 255, 0.03);--ds-color-base-white-200: rgba(255, 255, 255, 0.06);--ds-color-base-white-300: rgba(255, 255, 255, 0.12);--ds-color-base-white-400: rgba(255, 255, 255, 0.25);--ds-color-base-white-500: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5);--ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4);--ds-color-base-white-opacity-0: rgba(255, 255, 255, 0);--ds-color-base-black: #000000;--ds-color-base-black-100: rgba(0, 0, 0, 0.03);--ds-color-base-black-200: rgba(0, 0, 0, 0.06);--ds-color-base-black-300: rgba(0, 0, 0, 0.12);--ds-color-base-black-400: rgba(0, 0, 0, 0.25);--ds-color-base-black-500: rgba(0, 0, 0, 0.5);--ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15);--ds-color-base-blue-100: #f0f7fd;--ds-color-base-blue-200: #c9e0f7;--ds-color-base-blue-300: #a0c9f1;--ds-color-base-blue-400: #79b2ec;--ds-color-base-blue-500: #5398e6;--ds-color-base-blue-600: #3b7fd2;--ds-color-base-blue-700: #2c67b5;--ds-color-base-blue-800: #225296;--ds-color-base-blue-900: #193d73;--ds-color-base-blue-1000: #102a51;--ds-color-base-cyan-100: #ebfafd;--ds-color-base-cyan-200: #a8e9f7;--ds-color-base-cyan-300: #6ad5ef;--ds-color-base-cyan-400: #56bbde;--ds-color-base-cyan-500: #4aa2c7;--ds-color-base-cyan-600: #3e89aa;--ds-color-base-cyan-700: #32718e;--ds-color-base-cyan-800: #275b72;--ds-color-base-cyan-900: #1d4658;--ds-color-base-cyan-1000: #12303d;--ds-color-base-error-100: #fff4f4;--ds-color-base-error-200: #f9aca6;--ds-color-base-error-300: #f16359;--ds-color-base-error-400: #cc1816;--ds-color-base-error-500: #74110e;--ds-color-base-gray-100: #f7f7f7;--ds-color-base-gray-200: #d4d4d4;--ds-color-base-gray-300: #c5c5c5;--ds-color-base-gray-400: #adadad;--ds-color-base-gray-500: #959595;--ds-color-base-gray-600: #7e7e7e;--ds-color-base-gray-700: #676767;--ds-color-base-gray-800: #525252;--ds-color-base-gray-900: #3d3d3d;--ds-color-base-gray-1000: #2a2a2a;--ds-color-base-green-100: #f3faf7;--ds-color-base-green-200: #000000;--ds-color-base-green-300: #addbca;--ds-color-base-green-400: #7ec6ac;--ds-color-base-green-500: #51ae8c;--ds-color-base-green-600: #459578;--ds-color-base-green-700: #3a7d64;--ds-color-base-green-800: #306854;--ds-color-base-green-900: #285545;--ds-color-base-green-1000: #1f4436;--ds-color-base-lime-100: #f5fbeb;--ds-color-base-lime-200: #d8efb4;--ds-color-base-lime-300: #badd81;--ds-color-base-lime-400: #a2c270;--ds-color-base-lime-500: #8ca761;--ds-color-base-lime-600: #778f53;--ds-color-base-lime-700: #647845;--ds-color-base-lime-800: #53643a;--ds-color-base-lime-900: #44522f;--ds-color-base-lime-1000: #364126;--ds-color-base-navy-100: #f2f7fb;--ds-color-base-navy-200: #cfe0ef;--ds-color-base-navy-300: #acc9e2;--ds-color-base-navy-400: #89b2d4;--ds-color-base-navy-500: #6899c6;--ds-color-base-navy-600: #4a82b7;--ds-color-base-navy-700: #326aa5;--ds-color-base-navy-800: #265688;--ds-color-base-navy-900: #194069;--ds-color-base-navy-1000: #0e2b4f;--ds-color-base-neutral-100: #f7f8fa;--ds-color-base-neutral-200: #e4e8ec;--ds-color-base-neutral-300: #ccd2db;--ds-color-base-neutral-400: #afb9c6;--ds-color-base-neutral-500: #939fad;--ds-color-base-neutral-600: #7e8894;--ds-color-base-neutral-700: #6a717c;--ds-color-base-neutral-800: #585e67;--ds-color-base-neutral-900: #484d55;--ds-color-base-neutral-1000: #393d43;--ds-color-base-pink-100: #fff7f8;--ds-color-base-pink-200: #fde0e6;--ds-color-base-pink-300: #fcc2ce;--ds-color-base-pink-400: #fa9db0;--ds-color-base-pink-500: #f7738e;--ds-color-base-pink-600: #e45472;--ds-color-base-pink-700: #bf475f;--ds-color-base-pink-800: #a03b50;--ds-color-base-pink-900: #833142;--ds-color-base-pink-1000: #692734;--ds-color-base-purple-100: #fbf8fe;--ds-color-base-purple-200: #ede3fd;--ds-color-base-purple-300: #ddc9fb;--ds-color-base-purple-400: #c9a9f8;--ds-color-base-purple-500: #b588f5;--ds-color-base-purple-600: #a268f3;--ds-color-base-purple-700: #8d47f0;--ds-color-base-purple-800: #7633d7;--ds-color-base-purple-900: #622ab2;--ds-color-base-purple-1000: #4e228d;--ds-color-base-red-100: #fef7f5;--ds-color-base-red-200: #fae2da;--ds-color-base-red-300: #f5c7b8;--ds-color-base-red-400: #f0a68d;--ds-color-base-red-500: #e9815e;--ds-color-base-red-600: #e35c2f;--ds-color-base-red-700: #d03a08;--ds-color-base-red-800: #ae3007;--ds-color-base-red-900: #902806;--ds-color-base-red-1000: #732005;--ds-color-base-success-100: #eef8f5;--ds-color-base-success-200: #8eceb9;--ds-color-base-success-300: #40a080;--ds-color-base-success-400: #0b6f4d;--ds-color-base-success-500: #173c30;--ds-color-base-turquoise-100: #f7fafa;--ds-color-base-turquoise-200: #dfe9ea;--ds-color-base-turquoise-300: #c2d5d6;--ds-color-base-turquoise-400: #9fbdbe;--ds-color-base-turquoise-500: #7ba5a6;--ds-color-base-turquoise-600: #5c8f91;--ds-color-base-turquoise-700: #3d7a7d;--ds-color-base-turquoise-800: #21686a;--ds-color-base-turquoise-900: #085659;--ds-color-base-turquoise-1000: #004447;--ds-color-base-yellow-100: #fff9df;--ds-color-base-yellow-200: #ffe87e;--ds-color-base-yellow-300: #f9ce06;--ds-color-base-yellow-400: #d6b622;--ds-color-base-yellow-500: #b49d35;--ds-color-base-yellow-600: #96873e;--ds-color-base-yellow-700: #7c7140;--ds-color-base-yellow-800: #665e3d;--ds-color-base-yellow-900: #524e38;--ds-color-base-yellow-1000: #403d30;--ds-color-base-warning-100: #fef8e9;--ds-color-base-warning-200: #f2c153;--ds-color-base-warning-300: #c49432;--ds-color-base-warning-400: #8e6b22;--ds-color-base-warning-500: #5d4514;--ds-color-state-error-100: #ff999b;--ds-color-state-error-500: #df0b37;--ds-color-state-success-100: #69cf96;--ds-color-state-success-500: #00805d;--ds-color-state-warning-500: #de750c;--ds-color-border-primary-default: #585e67;--ds-color-border-primary-inverse: #afb9c6;--ds-color-border-secondary-default: #939fad;--ds-color-border-secondary-inverse: #7e8894;--ds-color-border-tertiary-default: #dddddd;--ds-color-border-tertiary-inverse: #676767;--ds-color-border-error-default: #cc1816;--ds-color-border-error-inverse: #f9aca6;--ds-color-border-divider-default: rgba(0, 0, 0, 0.12);--ds-color-border-divider-inverse: rgba(255, 255, 255, 0.25);--ds-color-border-subtle-default: #f0f7fd;--ds-color-border-subtle-inverse: #326aa5;--ds-color-border-emphasis-default: #194069;--ds-color-border-emphasis-inverse: #f2f7fb;--ds-color-border-accent-default: #badd81;--ds-color-border-accent-inverse: #a2c270;--ds-color-border-success-default: #0b6f4d;--ds-color-border-success-inverse: #8eceb9;--ds-color-border-warning-default: #c49432;--ds-color-border-warning-inverse: #f2c153;--ds-color-border-info-default: #326aa5;--ds-color-border-info-inverse: #89b2d4;--ds-color-border-ui-default-default: #2c67b5;--ds-color-border-ui-default-inverse: #56bbde;--ds-color-border-ui-hover-default: #193d73;--ds-color-border-ui-hover-inverse: #a8e9f7;--ds-color-border-ui-active-default: #225296;--ds-color-border-ui-active-inverse: #6ad5ef;--ds-color-border-ui-focus-default: #2c67b5;--ds-color-border-ui-focus-inverse: #56bbde;--ds-color-border-ui-disabled-default: #adadad;--ds-color-border-ui-disabled-inverse: #7e7e7e;--ds-color-border-active-default: #0074c8;--ds-color-border-active-inverse: #00cff0;--ds-color-border-disabled-default: #d4d4d4;--ds-color-border-focus-default: #959595;--ds-color-brand-neutral-100: #f7f8fa;--ds-color-brand-neutral-200: #e4e8ec;--ds-color-brand-neutral-300: #ccd2db;--ds-color-brand-neutral-400: #afb9c6;--ds-color-brand-neutral-500: #939fad;--ds-color-brand-neutral-600: #7e8894;--ds-color-brand-neutral-700: #6a717c;--ds-color-brand-neutral-800: #585e67;--ds-color-brand-neutral-900: #484d55;--ds-color-brand-neutral-1000: #393d43;--ds-color-brand-gray-100: #f7f7f7;--ds-color-brand-gray-200: #dddddd;--ds-color-brand-gray-300: #c5c5c5;--ds-color-brand-gray-400: #adadad;--ds-color-brand-gray-500: #959595;--ds-color-brand-gray-600: #7e7e7e;--ds-color-brand-gray-700: #676767;--ds-color-brand-gray-800: #525252;--ds-color-brand-gray-900: #3d3d3d;--ds-color-brand-gray-1000: #2a2a2a;--ds-color-brand-red-100: #fef7f5;--ds-color-brand-red-200: #fae2da;--ds-color-brand-red-300: #f5c7b8;--ds-color-brand-red-400: #f0a68d;--ds-color-brand-red-500: #e9815e;--ds-color-brand-red-600: #e35c2f;--ds-color-brand-red-700: #d03a08;--ds-color-brand-red-800: #ae3007;--ds-color-brand-red-900: #902806;--ds-color-brand-red-1000: #732005;--ds-color-brand-yellow-100: #fff9df;--ds-color-brand-yellow-200: #ffe87e;--ds-color-brand-yellow-300: #f9ce06;--ds-color-brand-yellow-400: #d6b622;--ds-color-brand-yellow-500: #b49d35;--ds-color-brand-yellow-600: #96873e;--ds-color-brand-yellow-700: #7c7140;--ds-color-brand-yellow-800: #665e3d;--ds-color-brand-yellow-900: #524e38;--ds-color-brand-yellow-1000: #403d30;--ds-color-brand-lime-100: #f5fbeb;--ds-color-brand-lime-200: #d8efb4;--ds-color-brand-lime-300: #badd81;--ds-color-brand-lime-400: #a2c270;--ds-color-brand-lime-500: #8ca761;--ds-color-brand-lime-600: #778f53;--ds-color-brand-lime-700: #647845;--ds-color-brand-lime-800: #53643a;--ds-color-brand-lime-900: #44522f;--ds-color-brand-lime-1000: #364126;--ds-color-brand-green-100: #f3faf7;--ds-color-brand-green-200: #d4ece4;--ds-color-brand-green-300: #addbca;--ds-color-brand-green-400: #7ec6ac;--ds-color-brand-green-500: #51ae8c;--ds-color-brand-green-600: #459578;--ds-color-brand-green-700: #3a7d64;--ds-color-brand-green-800: #306854;--ds-color-brand-green-900: #285545;--ds-color-brand-green-1000: #1f4436;--ds-color-brand-turquoise-100: #f7fafa;--ds-color-brand-turquoise-200: #dfe9ea;--ds-color-brand-turquoise-300: #c2d5d6;--ds-color-brand-turquoise-400: #9fbdbe;--ds-color-brand-turquoise-500: #7ba5a6;--ds-color-brand-turquoise-600: #5c8f91;--ds-color-brand-turquoise-700: #3d7a7d;--ds-color-brand-turquoise-800: #21686a;--ds-color-brand-turquoise-900: #085659;--ds-color-brand-turquoise-1000: #004447;--ds-color-brand-cyan-100: #ebfafd;--ds-color-brand-cyan-200: #a8e9f7;--ds-color-brand-cyan-300: #6ad5ef;--ds-color-brand-cyan-400: #56bbde;--ds-color-brand-cyan-500: #4aa2c7;--ds-color-brand-cyan-600: #3e89aa;--ds-color-brand-cyan-700: #32718e;--ds-color-brand-cyan-800: #275b72;--ds-color-brand-cyan-900: #1d4658;--ds-color-brand-cyan-1000: #12303d;--ds-color-brand-blue-100: #f0f7fd;--ds-color-brand-blue-200: #c9e0f7;--ds-color-brand-blue-300: #a0c9f1;--ds-color-brand-blue-400: #79b2ec;--ds-color-brand-blue-500: #5398e6;--ds-color-brand-blue-600: #3b7fd2;--ds-color-brand-blue-700: #2c67b5;--ds-color-brand-blue-800: #225296;--ds-color-brand-blue-900: #193d73;--ds-color-brand-blue-1000: #102a51;--ds-color-brand-navy-100: #f2f7fb;--ds-color-brand-navy-200: #cfe0ef;--ds-color-brand-navy-300: #acc9e2;--ds-color-brand-navy-400: #89b2d4;--ds-color-brand-navy-500: #6899c6;--ds-color-brand-navy-600: #4a82b7;--ds-color-brand-navy-700: #326aa5;--ds-color-brand-navy-800: #265688;--ds-color-brand-navy-900: #194069;--ds-color-brand-navy-1000: #0e2b4f;--ds-color-brand-purple-100: #fbf8fe;--ds-color-brand-purple-200: #ede3fd;--ds-color-brand-purple-300: #ddc9fb;--ds-color-brand-purple-400: #c9a9f8;--ds-color-brand-purple-500: #b588f5;--ds-color-brand-purple-600: #a268f3;--ds-color-brand-purple-700: #8d47f0;--ds-color-brand-purple-800: #7633d7;--ds-color-brand-purple-900: #622ab2;--ds-color-brand-purple-1000: #4e228d;--ds-color-brand-pink-100: #fff7f8;--ds-color-brand-pink-200: #fde0e6;--ds-color-brand-pink-300: #fcc2ce;--ds-color-brand-pink-400: #fa9db0;--ds-color-brand-pink-500: #f7738e;--ds-color-brand-pink-600: #e45472;--ds-color-brand-pink-700: #bf475f;--ds-color-brand-pink-800: #a03b50;--ds-color-brand-pink-900: #833142;--ds-color-brand-pink-1000: #692734;--ds-color-brand-midnight-100: #c1daf0;--ds-color-brand-midnight-200: #569ed7;--ds-color-brand-midnight-300: #156fad;--ds-color-brand-midnight-400: #01426a;--ds-color-brand-midnight-500: #00274a;--ds-color-brand-atlas-100: #cde6ff;--ds-color-brand-atlas-200: #6bb7fb;--ds-color-brand-atlas-300: #2492eb;--ds-color-brand-atlas-400: #0074c8;--ds-color-brand-atlas-500: #054687;--ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2);--ds-color-brand-breeze-100: #c0f7ff;--ds-color-brand-breeze-200: #5de3f7;--ds-color-brand-breeze-300: #00cff0;--ds-color-brand-breeze-400: #099dc5;--ds-color-brand-breeze-500: #0b5575;--ds-color-brand-breeze-300-opacity-30: rgba(0, 207, 240, 0.3);--ds-color-brand-tropical-100: #e2ffcd;--ds-color-brand-tropical-200: #d0fba6;--ds-color-brand-tropical-300: #c0e585;--ds-color-brand-tropical-400: #91be62;--ds-color-brand-tropical-500: #5e8741;--ds-color-brand-alpine-100: #bcaae6;--ds-color-brand-alpine-200: #9e73ea;--ds-color-brand-alpine-300: #8439ef;--ds-color-brand-alpine-400: #631db8;--ds-color-brand-alpine-500: #39115c;--ds-color-brand-flamingo-100: #ffebee;--ds-color-brand-flamingo-200: #ffc0ca;--ds-color-brand-flamingo-300: #ff94a7;--ds-color-brand-flamingo-400: #f65b7b;--ds-color-brand-flamingo-500: #b82b47;--ds-color-brand-canyon-100: #ffcab6;--ds-color-brand-canyon-200: #f99574;--ds-color-brand-canyon-300: #f26135;--ds-color-brand-canyon-400: #de3e09;--ds-color-brand-canyon-500: #b83302;--ds-color-brand-goldcoast-100: #fff0cd;--ds-color-brand-goldcoast-200: #ffdb67;--ds-color-brand-goldcoast-300: #ffd200;--ds-color-brand-goldcoast-400: #e5ad07;--ds-color-brand-goldcoast-500: #b88624;--ds-color-brand-goldgray-100: #c5c1bf;--ds-color-brand-goldgray-200: #726e6c;--ds-color-brand-gold-100: #ccbc94;--ds-color-brand-gold-200: #7f682e;--ds-color-brand-emerald: #139142;--ds-color-brand-sapphire: #015daa;--ds-color-brand-ruby: #a41d4a;--ds-color-brand-lounge: #01426a;--ds-color-brand-loungeplus: #53b390;--ds-color-container-accent-default: #f5fbeb;--ds-color-container-accent-inverse: #badd81;--ds-color-container-emphasis-default: #ebfafd;--ds-color-container-emphasis-inverse: #6ad5ef;--ds-color-container-error-default: #fff4f4;--ds-color-container-error-inverse: #74110e;--ds-color-container-info-default: #f0f7fd;--ds-color-container-info-inverse: #193d73;--ds-color-container-primary-default: #ffffff;--ds-color-container-primary-inverse: #0e2b4f;--ds-color-container-secondary-default: #f7f7f7;--ds-color-container-secondary-inverse: #194069;--ds-color-container-subtle-default: #f7f8fa;--ds-color-container-subtle-inverse: #393d43;--ds-color-container-success-default: #eef8f5;--ds-color-container-success-inverse: #173c30;--ds-color-container-tertiary-default: rgba(0, 0, 0, 0.03);--ds-color-container-tertiary-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-warning-default: #fef8e9;--ds-color-container-warning-inverse: #5d4514;--ds-color-container-ui-primary-active-default: #225296;--ds-color-container-ui-primary-active-inverse: #6ad5ef;--ds-color-container-ui-primary-default-default: #2c67b5;--ds-color-container-ui-primary-default-inverse: #56bbde;--ds-color-container-ui-primary-disabled-default: #a0c9f1;--ds-color-container-ui-primary-disabled-inverse: #275b72;--ds-color-container-ui-primary-focus-default: #2c67b5;--ds-color-container-ui-primary-focus-inverse: #56bbde;--ds-color-container-ui-primary-hover-default: #193d73;--ds-color-container-ui-primary-hover-inverse: #a8e9f7;--ds-color-container-ui-secondary-active-default: #f0f7fd;--ds-color-container-ui-secondary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-secondary-default-default: #ffffff;--ds-color-container-ui-secondary-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-disabled-default: #f7f7f7;--ds-color-container-ui-secondary-disabled-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-secondary-focus-default: #ffffff;--ds-color-container-ui-secondary-focus-inverse: rgba(255, 255, 255, 0.03);--ds-color-container-ui-secondary-hover-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-secondary-hover-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-active-default: rgba(0, 0, 0, 0.06);--ds-color-container-ui-tertiary-active-inverse: rgba(255, 255, 255, 0.06);--ds-color-container-ui-tertiary-default-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-default-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-disabled-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-disabled-inverse: rgba(255, 255, 255, 0.25);--ds-color-container-ui-tertiary-focus-default: rgba(0, 0, 0, 0.03);--ds-color-container-ui-tertiary-focus-inverse: rgba(255, 255, 255, 0.12);--ds-color-container-ui-tertiary-hover-default: rgba(0, 0, 0, 0.12);--ds-color-container-ui-tertiary-hover-inverse: rgba(255, 255, 255, 0.25);--ds-color-icon-primary-default: #676767;--ds-color-icon-primary-inverse: #f7f7f7;--ds-color-icon-secondary-default: #7e8894;--ds-color-icon-secondary-inverse: #ccd2db;--ds-color-icon-tertiary-default: #afb9c6;--ds-color-icon-tertiary-inverse: #939fad;--ds-color-icon-emphasis-default: #2a2a2a;--ds-color-icon-emphasis-inverse: #ffffff;--ds-color-icon-accent-default: #a2c270;--ds-color-icon-accent-inverse: #badd81;--ds-color-icon-info-default: #326aa5;--ds-color-icon-info-inverse: #89b2d4;--ds-color-icon-error-default: #cc1816;--ds-color-icon-error-inverse: #f9aca6;--ds-color-icon-warning-default: #c49432;--ds-color-icon-warning-inverse: #f2c153;--ds-color-icon-success-default: #40a080;--ds-color-icon-success-inverse: #8eceb9;--ds-color-icon-subtle-default: #a0c9f1;--ds-color-icon-subtle-inverse: #326aa5;--ds-color-icon-ui-primary-default-default: #2c67b5;--ds-color-icon-ui-primary-default-inverse: #56bbde;--ds-color-icon-ui-primary-hover-default: #193d73;--ds-color-icon-ui-primary-hover-inverse: #a8e9f7;--ds-color-icon-ui-primary-active-default: #225296;--ds-color-icon-ui-primary-active-inverse: #6ad5ef;--ds-color-icon-ui-primary-disabled-default: #adadad;--ds-color-icon-ui-primary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-primary-focus-default: #2c67b5;--ds-color-icon-ui-primary-focus-inverse: #56bbde;--ds-color-icon-ui-secondary-active-default: #676767;--ds-color-icon-ui-secondary-active-inverse: #c5c5c5;--ds-color-icon-ui-secondary-default-default: #7e7e7e;--ds-color-icon-ui-secondary-default-inverse: #adadad;--ds-color-icon-ui-secondary-disabled-default: #adadad;--ds-color-icon-ui-secondary-disabled-inverse: #7e7e7e;--ds-color-icon-ui-secondary-focus-default: #7e7e7e;--ds-color-icon-ui-secondary-focus-inverse: #adadad;--ds-color-icon-ui-secondary-hover-default: #525252;--ds-color-icon-ui-secondary-hover-inverse: #dddddd;--ds-color-icon-brand-red-default: #d03a08;--ds-color-icon-brand-red-inverse: #e9815e;--ds-color-icon-brand-yellow-default: #7c7140;--ds-color-icon-brand-yellow-inverse: #f9ce06;--ds-color-icon-brand-pink-default: #bf475f;--ds-color-icon-brand-pink-inverse: #f7738e;--ds-color-icon-brand-purple-default: #8d47f0;--ds-color-icon-brand-purple-inverse: #b588f5;--ds-color-icon-brand-lime-default: #647845;--ds-color-icon-brand-lime-inverse: #badd81;--ds-color-icon-brand-green-default: #3a7d64;--ds-color-icon-brand-green-inverse: #51ae8c;--ds-color-icon-brand-turquoise-default: #3d7a7d;--ds-color-icon-brand-turquoise-inverse: #7ba5a6;--ds-color-icon-brand-navy-default: #265688;--ds-color-icon-brand-navy-inverse: #6899c6;--ds-color-icon-brand-blue-default: #2c67b5;--ds-color-icon-brand-blue-inverse: #5398e6;--ds-color-icon-brand-cyan-default: #32718e;--ds-color-icon-brand-cyan-inverse: #6ad5ef;--ds-color-icon-brand-gray-default: #676767;--ds-color-icon-brand-gray-inverse: #c5c5c5;--ds-color-icon-brand-neutral-default: #6a717c;--ds-color-icon-brand-neutral-inverse: #afb9c6;--ds-color-icon-disabled-default: rgba(0, 0, 0, 0.15);--ds-color-text-primary-default: #2a2a2a;--ds-color-text-primary-inverse: #ffffff;--ds-color-text-secondary-default: #525252;--ds-color-text-secondary-inverse: #dddddd;--ds-color-text-tertiary-default: #6a717c;--ds-color-text-tertiary-inverse: #adadad;--ds-color-text-error-default: #cc1816;--ds-color-text-error-inverse: #f9aca6;--ds-color-text-emphasis-default: #265688;--ds-color-text-emphasis-inverse: #cfe0ef;--ds-color-text-accent-default: #647845;--ds-color-text-accent-inverse: #badd81;--ds-color-text-info-default: #326aa5;--ds-color-text-info-inverse: #acc9e2;--ds-color-text-subtle-default: #32718e;--ds-color-text-subtle-inverse: #56bbde;--ds-color-text-success-default: #0b6f4d;--ds-color-text-success-inverse: #8eceb9;--ds-color-text-ui-active-default: #225296;--ds-color-text-ui-active-inverse: #6ad5ef;--ds-color-text-ui-default-default: #2c67b5;--ds-color-text-ui-default-inverse: #56bbde;--ds-color-text-ui-disabled-default: #adadad;--ds-color-text-ui-disabled-inverse: #7e7e7e;--ds-color-text-ui-focus-default: #2c67b5;--ds-color-text-ui-focus-inverse: #56bbde;--ds-color-text-ui-hover-default: #193d73;--ds-color-text-ui-hover-inverse: #a8e9f7;--ds-color-text-link-default: #0074c8;--ds-color-text-link-inverse: #00cff0;--ds-color-tier-alaska-mvp-default: #726e6c;--ds-color-tier-alaska-mvp-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold-default: #7f682e;--ds-color-tier-alaska-mvpgold-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold75k-default: #7f682e;--ds-color-tier-alaska-mvpgold75k-inverse: #c5c1bf;--ds-color-tier-alaska-mvpgold100k-default: #7f682e;--ds-color-tier-alaska-mvpgold100k-inverse: #c5c1bf;--ds-color-tier-alaska-lounge: #01426a;--ds-color-tier-alaska-loungeplus: #53b390;--ds-color-tier-fare-business-default: #005154;--ds-color-tier-fare-business-inverse: #9fbdbe;--ds-color-tier-fare-economy-default: #2c67b5;--ds-color-tier-fare-economy-inverse: #a0c9f1;--ds-color-tier-fare-first-class-default: #002c4e;--ds-color-tier-fare-first-class-inverse: #89b2d4;--ds-color-tier-fare-saver-default: #4aa2c7;--ds-color-tier-fare-saver-inverse: #a8e9f7;--ds-color-tier-oneworld-emerald: #139142;--ds-color-tier-oneworld-sapphire: #015daa;--ds-color-tier-oneworld-ruby: #a41d4a;--ds-color-ui-default-default: #0074c8;--ds-color-ui-default-inverse: #00cff0;--ds-color-ui-hover-default: #054687;--ds-color-ui-hover-inverse: #5de3f7;--ds-color-ui-active-default: #054687;--ds-color-ui-active-inverse: #5de3f7;--ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);--ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);--ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);--ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);--ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);--ds-color-utility-blue-default: #79b2ec;--ds-color-utility-blue-inverse: #c9e0f7;--ds-color-utility-cyan-default: #6ad5ef;--ds-color-utility-cyan-inverse: #a8e9f7;--ds-color-utility-green-default: #7ec6ac;--ds-color-utility-green-inverse: #addbca;--ds-color-utility-gray-default: #adadad;--ds-color-utility-gray-inverse: #dddddd;--ds-color-utility-lime-default: #badd81;--ds-color-utility-lime-inverse: #d8efb4;--ds-color-utility-navy-default: #265688;--ds-color-utility-navy-inverse: #acc9e2;--ds-color-utility-neutral-default: #7e8894;--ds-color-utility-neutral-inverse: #ccd2db;--ds-color-utility-pink-default: #f7738e;--ds-color-utility-pink-inverse: #fcc2ce;--ds-color-utility-purple-default: #8d47f0;--ds-color-utility-purple-inverse: #ddc9fb;--ds-color-utility-red-default: #e35c2f;--ds-color-utility-red-inverse: #f0a68d;--ds-color-utility-turquoise-default: #5c8f91;--ds-color-utility-turquoise-inverse: #9fbdbe;--ds-color-utility-yellow-default: #f9ce06;--ds-color-utility-yellow-inverse: #ffe87e;--ds-color-utility-error-default: #cc1816;--ds-color-utility-error-inverse: #f9aca6;--ds-color-utility-warning-default: #f2c153;--ds-color-utility-warning-inverse: #f2c153;--ds-color-utility-success-default: #0b6f4d;--ds-color-utility-success-inverse: #8eceb9}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([addSpace]) :host(:not([data-show])) .popover,:host(:not([data-show])) .popover,:host([disabled]) .popover{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(*){white-space:normal}::slotted(*:hover){cursor:pointer}[data-trigger-placement]::slotted(*:hover){position:relative}[data-trigger-placement]::slotted(*:hover):before{position:absolute;left:0;display:block;width:100%;height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));content:""}[data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1*(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)))}[data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1*(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)))}:host([data-show]) .popover{z-index:var(--ds-depth-tooltip, 400)}:host([removeSpace]) .popover{margin:calc(-1*(var(--ds-size-50, 0.25rem) + 1px)) 0 !important}:host([addSpace]) .popover{margin:var(--ds-size-200, 1rem) 0 !important}:host([addSpace]) [data-trigger-placement]::slotted(*:hover):before{height:var(--ds-size-500, 2.5rem)}:host([addSpace]) [data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1*var(--ds-size-500, 2.5rem))}:host([addSpace]) [data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1*var(--ds-size-500, 2.5rem))}.popover{display:inline-block;max-width:calc(100% - var(--ds-size-400, 2rem));border-radius:var(--ds-border-radius, 0.375rem)}@media screen and (min-width: 576px){.popover{max-width:50%}}@media screen and (min-width: 768px){.popover{max-width:40%}}@media screen and (min-width: 1024px){.popover{max-width:27rem}}[data-popper-placement^=top]>.arrow{bottom:calc(-1*(var(--ds-size-100, 0.5rem) + var(--ds-size-25, 0.125rem)))}[data-popper-placement^=top]>.arrow:before{top:calc(-1*var(--ds-size-200, 1rem));left:calc(-1*var(--ds-size-75, 0.375rem));transform:rotate(45deg)}[data-popper-placement^=bottom]>.arrow{top:calc(-1*(var(--ds-size-100, 0.5rem) + var(--ds-size-25, 0.125rem)))}[data-popper-placement^=bottom]>.arrow:before{top:var(--ds-size-50, 0.25rem);right:calc(-1*var(--ds-size-200, 1rem));transform:rotate(-135deg)}.arrow{position:relative;margin-top:-var(--ds-size-100, 0.5rem)}.arrow:before{position:absolute;width:var(--ds-size-150, 0.75rem);height:var(--ds-size-150, 0.75rem);content:""}`;
|
|
7306
|
+
var styleCss$9 = css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([addSpace]) :host(:not([data-show])) .popover,:host(:not([data-show])) .popover,:host([disabled]) .popover{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(*){white-space:normal}::slotted(*:hover){cursor:pointer}[data-trigger-placement]::slotted(*:hover){position:relative}[data-trigger-placement]::slotted(*:hover):before{position:absolute;left:0;display:block;width:100%;height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));content:""}[data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1*(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)))}[data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1*(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)))}:host([data-show]) .popover{z-index:var(--ds-depth-tooltip, 400)}:host([removeSpace]) .popover{margin:calc(-1*(var(--ds-size-50, 0.25rem) + 1px)) 0 !important}:host([addSpace]) .popover{margin:var(--ds-size-200, 1rem) 0 !important}:host([addSpace]) [data-trigger-placement]::slotted(*:hover):before{height:var(--ds-size-500, 2.5rem)}:host([addSpace]) [data-trigger-placement^=top]::slotted(*:hover):before{top:calc(-1*var(--ds-size-500, 2.5rem))}:host([addSpace]) [data-trigger-placement^=bottom]::slotted(*:hover):before{bottom:calc(-1*var(--ds-size-500, 2.5rem))}.popover{display:inline-block;max-width:calc(100% - var(--ds-size-400, 2rem));border-radius:var(--ds-border-radius, 0.375rem)}@media screen and (min-width: 576px){.popover{max-width:50%}}@media screen and (min-width: 768px){.popover{max-width:40%}}@media screen and (min-width: 1024px){.popover{max-width:27rem}}[data-popper-placement^=top]>.arrow{bottom:calc(-1*(var(--ds-size-100, 0.5rem) + var(--ds-size-25, 0.125rem)))}[data-popper-placement^=top]>.arrow:before{top:calc(-1*var(--ds-size-200, 1rem));left:calc(-1*var(--ds-size-75, 0.375rem));transform:rotate(45deg)}[data-popper-placement^=bottom]>.arrow{top:calc(-1*(var(--ds-size-100, 0.5rem) + var(--ds-size-25, 0.125rem)))}[data-popper-placement^=bottom]>.arrow:before{top:var(--ds-size-50, 0.25rem);right:calc(-1*var(--ds-size-200, 1rem));transform:rotate(-135deg)}.arrow{position:relative;margin-top:-var(--ds-size-100, 0.5rem)}.arrow:before{position:absolute;width:var(--ds-size-150, 0.75rem);height:var(--ds-size-150, 0.75rem);content:""}`;
|
|
7307
7307
|
|
|
7308
7308
|
var colorCss$9 = css`::slotted(*){color:var(--ds-auro-popover-text-color)}.popover{background-color:var(--ds-auro-popover-container-color);box-shadow:var(--ds-auro-popover-boxshadow-color)}.arrow:before{background-color:var(--ds-auro-popover-container-color);box-shadow:2px 2px 1px 0 var(--ds-auro-popover-boxshadow-color)}`;
|
|
7309
7309
|
|
|
7310
|
-
var tokensCss$9 = css`:host{--ds-auro-popover-boxshadow-color:
|
|
7310
|
+
var tokensCss$9 = css`:host{--ds-auro-popover-boxshadow-color:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-popover-container-color:var(--ds-basic-color-surface-default, #ffffff);--ds-auro-popover-text-color:var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
7311
7311
|
|
|
7312
7312
|
var top = 'top';
|
|
7313
7313
|
var bottom = 'bottom';
|
|
@@ -13759,17 +13759,70 @@ const computePosition = (reference, floating, options) => {
|
|
|
13759
13759
|
/* eslint-disable line-comment-position, no-inline-comments */
|
|
13760
13760
|
|
|
13761
13761
|
|
|
13762
|
+
|
|
13763
|
+
const MAX_CONFIGURATION_COUNT = 10;
|
|
13764
|
+
|
|
13762
13765
|
class AuroFloatingUI {
|
|
13763
|
-
|
|
13766
|
+
|
|
13767
|
+
/**
|
|
13768
|
+
* @private
|
|
13769
|
+
*/
|
|
13770
|
+
static isMousePressed = false;
|
|
13771
|
+
|
|
13772
|
+
/**
|
|
13773
|
+
* @private
|
|
13774
|
+
*/
|
|
13775
|
+
static isMousePressHandlerInitialized = false;
|
|
13776
|
+
|
|
13777
|
+
/**
|
|
13778
|
+
* @private
|
|
13779
|
+
*/
|
|
13780
|
+
static setupMousePressChecker() {
|
|
13781
|
+
if (!AuroFloatingUI.isMousePressHandlerInitialized && window && window.addEventListener) {
|
|
13782
|
+
AuroFloatingUI.isMousePressHandlerInitialized = true;
|
|
13783
|
+
|
|
13784
|
+
const mouseEventGlobalHandler = (event) => {
|
|
13785
|
+
AuroFloatingUI.isMousePressed = event.type === 'mousedown';
|
|
13786
|
+
};
|
|
13787
|
+
|
|
13788
|
+
window.addEventListener('mousedown', mouseEventGlobalHandler);
|
|
13789
|
+
window.addEventListener('mouseup', mouseEventGlobalHandler);
|
|
13790
|
+
}
|
|
13791
|
+
}
|
|
13792
|
+
|
|
13793
|
+
constructor(element, behavior) {
|
|
13794
|
+
this.element = element;
|
|
13795
|
+
this.behavior = behavior;
|
|
13796
|
+
|
|
13764
13797
|
// Store event listener references for cleanup
|
|
13765
13798
|
this.focusHandler = null;
|
|
13766
13799
|
this.clickHandler = null;
|
|
13767
13800
|
this.keyDownHandler = null;
|
|
13768
|
-
|
|
13801
|
+
|
|
13802
|
+
/**
|
|
13803
|
+
* @private
|
|
13804
|
+
*/
|
|
13805
|
+
this.configureTrial = 0;
|
|
13806
|
+
|
|
13769
13807
|
/**
|
|
13770
13808
|
* @private
|
|
13771
13809
|
*/
|
|
13772
13810
|
this.eventPrefix = undefined;
|
|
13811
|
+
|
|
13812
|
+
/**
|
|
13813
|
+
* @private
|
|
13814
|
+
*/
|
|
13815
|
+
this.id = undefined;
|
|
13816
|
+
|
|
13817
|
+
/**
|
|
13818
|
+
* @private
|
|
13819
|
+
*/
|
|
13820
|
+
this.showing = false;
|
|
13821
|
+
|
|
13822
|
+
/**
|
|
13823
|
+
* @private
|
|
13824
|
+
*/
|
|
13825
|
+
this.strategy = undefined;
|
|
13773
13826
|
}
|
|
13774
13827
|
|
|
13775
13828
|
/**
|
|
@@ -13797,29 +13850,48 @@ class AuroFloatingUI {
|
|
|
13797
13850
|
* @private
|
|
13798
13851
|
* Determines the positioning strategy based on the current viewport size and mobile breakpoint.
|
|
13799
13852
|
*
|
|
13800
|
-
* This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint
|
|
13853
|
+
* This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint
|
|
13801
13854
|
* defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'.
|
|
13802
13855
|
*
|
|
13803
|
-
* @returns {String} The positioning strategy,
|
|
13856
|
+
* @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
|
|
13804
13857
|
*/
|
|
13805
13858
|
getPositioningStrategy() {
|
|
13806
|
-
|
|
13807
|
-
|
|
13808
|
-
|
|
13809
|
-
|
|
13810
|
-
|
|
13811
|
-
|
|
13859
|
+
const breakpoint = this.element.bib.mobileFullscreenBreakpoint || this.element.floaterConfig?.fullscreenBreakpoint;
|
|
13860
|
+
switch (this.behavior) {
|
|
13861
|
+
case "tooltip":
|
|
13862
|
+
return "floating";
|
|
13863
|
+
case "dialog":
|
|
13864
|
+
case "drawer":
|
|
13865
|
+
if (breakpoint) {
|
|
13866
|
+
const smallerThanBreakpoint = window.matchMedia(`(max-width: ${breakpoint})`).matches;
|
|
13867
|
+
|
|
13868
|
+
this.element.expanded = smallerThanBreakpoint;
|
|
13869
|
+
}
|
|
13870
|
+
if (this.element.nested) {
|
|
13871
|
+
return "cover";
|
|
13872
|
+
}
|
|
13873
|
+
return 'fullscreen';
|
|
13874
|
+
case "dropdown":
|
|
13875
|
+
case undefined:
|
|
13876
|
+
case null:
|
|
13877
|
+
if (breakpoint) {
|
|
13878
|
+
const smallerThanBreakpoint = window.matchMedia(`(max-width: ${breakpoint})`).matches;
|
|
13879
|
+
if (smallerThanBreakpoint) {
|
|
13880
|
+
return 'fullscreen';
|
|
13881
|
+
}
|
|
13882
|
+
}
|
|
13883
|
+
return "floating";
|
|
13884
|
+
default:
|
|
13885
|
+
return this.behavior;
|
|
13812
13886
|
}
|
|
13813
|
-
|
|
13814
|
-
return strategy;
|
|
13815
13887
|
}
|
|
13816
13888
|
|
|
13817
13889
|
/**
|
|
13818
13890
|
* @private
|
|
13819
13891
|
* Positions the bib element based on the current configuration and positioning strategy.
|
|
13820
13892
|
*
|
|
13821
|
-
* This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly.
|
|
13822
|
-
* It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element,
|
|
13893
|
+
* This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly.
|
|
13894
|
+
* It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element,
|
|
13823
13895
|
* and applies the calculated position to the bib's style.
|
|
13824
13896
|
*/
|
|
13825
13897
|
position() {
|
|
@@ -13830,21 +13902,33 @@ class AuroFloatingUI {
|
|
|
13830
13902
|
this.mirrorSize();
|
|
13831
13903
|
// Define the middlware for the floater configuration
|
|
13832
13904
|
const middleware = [
|
|
13833
|
-
offset(this.element.floaterConfig
|
|
13834
|
-
...
|
|
13835
|
-
...
|
|
13905
|
+
offset(this.element.floaterConfig?.offset || 0),
|
|
13906
|
+
...this.element.floaterConfig?.flip ? [flip()] : [], // Add flip middleware if flip is enabled.
|
|
13907
|
+
...this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : [], // Add autoPlacement middleware if autoPlacement is enabled.
|
|
13836
13908
|
];
|
|
13837
13909
|
|
|
13838
13910
|
// Compute the position of the bib
|
|
13839
13911
|
computePosition(this.element.trigger, this.element.bib, {
|
|
13840
|
-
placement: this.element.floaterConfig
|
|
13912
|
+
placement: this.element.floaterConfig?.placement,
|
|
13841
13913
|
middleware: middleware || []
|
|
13842
|
-
}).then(({x, y}) => { // eslint-disable-line id-length
|
|
13914
|
+
}).then(({ x, y }) => { // eslint-disable-line id-length
|
|
13843
13915
|
Object.assign(this.element.bib.style, {
|
|
13844
13916
|
left: `${x}px`,
|
|
13845
13917
|
top: `${y}px`,
|
|
13846
13918
|
});
|
|
13847
13919
|
});
|
|
13920
|
+
} else if (strategy === 'cover') {
|
|
13921
|
+
// Compute the position of the bib
|
|
13922
|
+
computePosition(this.element.parentNode, this.element.bib, {
|
|
13923
|
+
placement: 'bottom-start'
|
|
13924
|
+
}).then(({ x, y }) => { // eslint-disable-line id-length
|
|
13925
|
+
Object.assign(this.element.bib.style, {
|
|
13926
|
+
left: `${x}px`,
|
|
13927
|
+
top: `${y - this.element.parentNode.offsetHeight}px`,
|
|
13928
|
+
width: `${this.element.parentNode.offsetWidth}px`,
|
|
13929
|
+
height: `${this.element.parentNode.offsetHeight}px`
|
|
13930
|
+
});
|
|
13931
|
+
});
|
|
13848
13932
|
}
|
|
13849
13933
|
}
|
|
13850
13934
|
|
|
@@ -13873,34 +13957,48 @@ class AuroFloatingUI {
|
|
|
13873
13957
|
*
|
|
13874
13958
|
* @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
|
|
13875
13959
|
*/
|
|
13876
|
-
configureBibStrategy(
|
|
13877
|
-
|
|
13878
|
-
if (strategy === 'fullscreen') {
|
|
13960
|
+
configureBibStrategy(value) {
|
|
13961
|
+
if (value === 'fullscreen') {
|
|
13879
13962
|
this.element.isBibFullscreen = true;
|
|
13880
13963
|
// reset the prev position
|
|
13964
|
+
this.element.bib.setAttribute('isfullscreen', "");
|
|
13965
|
+
this.element.bib.style.position = 'fixed';
|
|
13881
13966
|
this.element.bib.style.top = "0px";
|
|
13882
13967
|
this.element.bib.style.left = "0px";
|
|
13968
|
+
this.element.bib.style.width = '';
|
|
13969
|
+
this.element.bib.style.height = '';
|
|
13883
13970
|
|
|
13884
13971
|
// reset the size that was mirroring `size` css-part
|
|
13885
13972
|
const bibContent = this.element.bib.shadowRoot.querySelector(".container");
|
|
13886
|
-
bibContent
|
|
13887
|
-
|
|
13888
|
-
|
|
13889
|
-
|
|
13973
|
+
if (bibContent) {
|
|
13974
|
+
bibContent.style.width = '';
|
|
13975
|
+
bibContent.style.height = '';
|
|
13976
|
+
bibContent.style.maxWidth = '';
|
|
13977
|
+
bibContent.style.maxHeight = `${window.visualViewport.height}px`;
|
|
13978
|
+
this.configureTrial = 0;
|
|
13979
|
+
} else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
|
|
13980
|
+
this.configureTrial += 1;
|
|
13981
|
+
|
|
13982
|
+
setTimeout(() => {
|
|
13983
|
+
this.configureBibStrategy(value);
|
|
13984
|
+
}, 0);
|
|
13985
|
+
}
|
|
13890
13986
|
|
|
13891
13987
|
if (this.element.isPopoverVisible) {
|
|
13892
13988
|
this.lockScroll(true);
|
|
13893
13989
|
}
|
|
13894
13990
|
} else {
|
|
13991
|
+
this.element.bib.style.position = '';
|
|
13992
|
+
this.element.bib.removeAttribute('isfullscreen');
|
|
13895
13993
|
this.element.isBibFullscreen = false;
|
|
13896
|
-
|
|
13897
|
-
this.lockScroll(false);
|
|
13898
13994
|
}
|
|
13899
13995
|
|
|
13900
|
-
|
|
13996
|
+
const isChanged = this.strategy && this.strategy !== value;
|
|
13997
|
+
this.strategy = value;
|
|
13998
|
+
if (isChanged) {
|
|
13901
13999
|
const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-strategy-change` : 'strategy-change', {
|
|
13902
14000
|
detail: {
|
|
13903
|
-
|
|
14001
|
+
value,
|
|
13904
14002
|
},
|
|
13905
14003
|
composed: true
|
|
13906
14004
|
});
|
|
@@ -13911,18 +14009,6 @@ class AuroFloatingUI {
|
|
|
13911
14009
|
|
|
13912
14010
|
updateState() {
|
|
13913
14011
|
const isVisible = this.element.isPopoverVisible;
|
|
13914
|
-
|
|
13915
|
-
// Refactor this to apply attribute to correct focusable element
|
|
13916
|
-
// Reference Issue: https://github.com/AlaskaAirlines/auro-library/issues/105
|
|
13917
|
-
//
|
|
13918
|
-
// this.element.trigger.setAttribute('aria-expanded', isVisible);
|
|
13919
|
-
|
|
13920
|
-
if (isVisible) {
|
|
13921
|
-
this.element.bib.setAttribute('data-show', true);
|
|
13922
|
-
} else {
|
|
13923
|
-
this.element.bib.removeAttribute('data-show');
|
|
13924
|
-
}
|
|
13925
|
-
|
|
13926
14012
|
if (!isVisible) {
|
|
13927
14013
|
this.cleanupHideHandlers();
|
|
13928
14014
|
try {
|
|
@@ -13933,16 +14019,32 @@ class AuroFloatingUI {
|
|
|
13933
14019
|
}
|
|
13934
14020
|
}
|
|
13935
14021
|
|
|
14022
|
+
/**
|
|
14023
|
+
* @private
|
|
14024
|
+
* getting called on 'blur' in trigger or `focusin` in document
|
|
14025
|
+
*
|
|
14026
|
+
* Hides the bib if focus moves outside of the trigger or bib, unless a 'noHideOnThisFocusLoss' flag is set.
|
|
14027
|
+
* This method checks if the currently active element is still within the trigger or bib.
|
|
14028
|
+
* If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
|
|
14029
|
+
*/
|
|
13936
14030
|
handleFocusLoss() {
|
|
13937
|
-
if
|
|
13938
|
-
|
|
14031
|
+
// if mouse is being pressed, skip and let click event to handle the action
|
|
14032
|
+
if (AuroFloatingUI.isMousePressed) {
|
|
13939
14033
|
return;
|
|
13940
14034
|
}
|
|
13941
14035
|
|
|
13942
|
-
|
|
13943
|
-
|
|
13944
|
-
|
|
13945
|
-
|
|
14036
|
+
if (this.element.noHideOnThisFocusLoss ||
|
|
14037
|
+
this.element.hasAttribute('noHideOnThisFocusLoss')) {
|
|
14038
|
+
return;
|
|
14039
|
+
}
|
|
14040
|
+
|
|
14041
|
+
const { activeElement } = document;
|
|
14042
|
+
// if focus is still inside of trigger or bib, do not close
|
|
14043
|
+
if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
|
|
14044
|
+
return;
|
|
14045
|
+
}
|
|
14046
|
+
// if fullscreen bib is still open and the focus is missing, do not close
|
|
14047
|
+
if (this.element.bib.hasAttribute('isfullscreen') && activeElement === document.body) {
|
|
13946
14048
|
return;
|
|
13947
14049
|
}
|
|
13948
14050
|
|
|
@@ -13950,31 +14052,66 @@ class AuroFloatingUI {
|
|
|
13950
14052
|
}
|
|
13951
14053
|
|
|
13952
14054
|
setupHideHandlers() {
|
|
14055
|
+
this.preventFocusLoseOnBibClick = (event) => {
|
|
14056
|
+
event.preventDefault();
|
|
14057
|
+
event.stopPropagation();
|
|
14058
|
+
};
|
|
14059
|
+
this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
|
|
14060
|
+
|
|
13953
14061
|
// Define handlers & store references
|
|
13954
14062
|
this.focusHandler = () => this.handleFocusLoss();
|
|
13955
14063
|
|
|
13956
14064
|
this.clickHandler = (evt) => {
|
|
13957
|
-
if (!evt.composedPath().includes(this.element.trigger) &&
|
|
13958
|
-
|
|
13959
|
-
this.
|
|
14065
|
+
if ((!evt.composedPath().includes(this.element.trigger) &&
|
|
14066
|
+
!evt.composedPath().includes(this.element.bib)) ||
|
|
14067
|
+
(this.element.bib.backdrop && evt.composedPath().includes(this.element.bib.backdrop))) {
|
|
14068
|
+
const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
14069
|
+
|
|
14070
|
+
if (existedVisibleFloatingUI && existedVisibleFloatingUI.element.isPopoverVisible) {
|
|
14071
|
+
// if something else is open, close that
|
|
14072
|
+
existedVisibleFloatingUI.hideBib();
|
|
14073
|
+
document.expandedAuroFormkitDropdown = null;
|
|
14074
|
+
document.expandedAuroFloater = this;
|
|
14075
|
+
} else {
|
|
14076
|
+
this.hideBib();
|
|
14077
|
+
}
|
|
13960
14078
|
}
|
|
13961
14079
|
};
|
|
13962
14080
|
|
|
13963
14081
|
// ESC key handler
|
|
13964
14082
|
this.keyDownHandler = (evt) => {
|
|
13965
14083
|
if (evt.key === 'Escape' && this.element.isPopoverVisible) {
|
|
14084
|
+
const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
14085
|
+
if (existedVisibleFloatingUI && existedVisibleFloatingUI !== this && existedVisibleFloatingUI.element.isPopoverVisible) {
|
|
14086
|
+
// if something else is open, let it handle itself
|
|
14087
|
+
return;
|
|
14088
|
+
}
|
|
13966
14089
|
this.hideBib();
|
|
13967
14090
|
}
|
|
13968
14091
|
};
|
|
13969
14092
|
|
|
13970
|
-
|
|
13971
|
-
|
|
13972
|
-
|
|
14093
|
+
if (this.behavior !== 'drawer' && this.behavior !== 'dialog') {
|
|
14094
|
+
// Add event listeners using the stored references
|
|
14095
|
+
document.addEventListener('focusin', this.focusHandler);
|
|
14096
|
+
}
|
|
14097
|
+
|
|
13973
14098
|
document.addEventListener('keydown', this.keyDownHandler);
|
|
14099
|
+
|
|
14100
|
+
// send this task to the end of queue to prevent conflicting
|
|
14101
|
+
// it conflicts if showBib gets call from a button that's not this.element.trigger
|
|
14102
|
+
setTimeout(() => {
|
|
14103
|
+
window.addEventListener('click', this.clickHandler);
|
|
14104
|
+
}, 0);
|
|
13974
14105
|
}
|
|
13975
14106
|
|
|
13976
14107
|
cleanupHideHandlers() {
|
|
13977
14108
|
// Remove event listeners if they exist
|
|
14109
|
+
|
|
14110
|
+
if (this.preventFocusLoseOnBibClick) {
|
|
14111
|
+
this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
|
|
14112
|
+
delete this.preventFocusLoseOnBibClick;
|
|
14113
|
+
}
|
|
14114
|
+
|
|
13978
14115
|
if (this.focusHandler) {
|
|
13979
14116
|
document.removeEventListener('focusin', this.focusHandler);
|
|
13980
14117
|
this.focusHandler = null;
|
|
@@ -13999,40 +14136,54 @@ class AuroFloatingUI {
|
|
|
13999
14136
|
|
|
14000
14137
|
updateCurrentExpandedDropdown() {
|
|
14001
14138
|
// Close any other dropdown that is already open
|
|
14002
|
-
|
|
14003
|
-
|
|
14139
|
+
const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
14140
|
+
if (existedVisibleFloatingUI && existedVisibleFloatingUI !== this &&
|
|
14141
|
+
existedVisibleFloatingUI.isPopoverVisible &&
|
|
14142
|
+
document.expandedAuroFloater.eventPrefix === this.eventPrefix) {
|
|
14143
|
+
document.expandedAuroFloater.hideBib();
|
|
14004
14144
|
}
|
|
14005
14145
|
|
|
14006
|
-
document.
|
|
14146
|
+
document.expandedAuroFloater = this;
|
|
14007
14147
|
}
|
|
14008
14148
|
|
|
14009
14149
|
showBib() {
|
|
14010
|
-
if (!this.element.disabled && !this.
|
|
14150
|
+
if (!this.element.disabled && !this.showing) {
|
|
14011
14151
|
this.updateCurrentExpandedDropdown();
|
|
14012
|
-
this.element.isPopoverVisible = true;
|
|
14013
14152
|
this.element.triggerChevron?.setAttribute('data-expanded', true);
|
|
14014
|
-
|
|
14015
|
-
|
|
14016
|
-
this.
|
|
14017
|
-
|
|
14018
|
-
|
|
14019
|
-
|
|
14020
|
-
|
|
14153
|
+
|
|
14154
|
+
// prevent double showing: isPopovervisible gets first and showBib gets called later
|
|
14155
|
+
if (!this.showing) {
|
|
14156
|
+
if (!this.element.modal) {
|
|
14157
|
+
this.setupHideHandlers();
|
|
14158
|
+
}
|
|
14159
|
+
this.showing = true;
|
|
14160
|
+
this.element.isPopoverVisible = true;
|
|
14161
|
+
this.position();
|
|
14162
|
+
this.dispatchEventDropdownToggle();
|
|
14163
|
+
}
|
|
14021
14164
|
|
|
14022
14165
|
// Setup auto update to handle resize and scroll
|
|
14023
|
-
this.element.cleanup = autoUpdate(this.element.trigger, this.element.bib, () => {
|
|
14166
|
+
this.element.cleanup = autoUpdate(this.element.trigger || this.element.parentNode, this.element.bib, () => {
|
|
14024
14167
|
this.position();
|
|
14025
14168
|
});
|
|
14026
14169
|
}
|
|
14027
14170
|
}
|
|
14028
14171
|
|
|
14029
14172
|
hideBib() {
|
|
14030
|
-
if (
|
|
14031
|
-
this.element.isPopoverVisible = false;
|
|
14173
|
+
if (!this.element.disabled && !this.element.noToggle) {
|
|
14032
14174
|
this.lockScroll(false);
|
|
14033
14175
|
this.element.triggerChevron?.removeAttribute('data-expanded');
|
|
14034
|
-
|
|
14176
|
+
|
|
14177
|
+
if (this.element.isPopoverVisible) {
|
|
14178
|
+
this.element.isPopoverVisible = false;
|
|
14179
|
+
}
|
|
14180
|
+
if (this.showing) {
|
|
14181
|
+
this.cleanupHideHandlers();
|
|
14182
|
+
this.showing = false;
|
|
14183
|
+
this.dispatchEventDropdownToggle();
|
|
14184
|
+
}
|
|
14035
14185
|
}
|
|
14186
|
+
document.expandedAuroFloater = null;
|
|
14036
14187
|
}
|
|
14037
14188
|
|
|
14038
14189
|
/**
|
|
@@ -14042,7 +14193,7 @@ class AuroFloatingUI {
|
|
|
14042
14193
|
dispatchEventDropdownToggle() {
|
|
14043
14194
|
const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
|
|
14044
14195
|
detail: {
|
|
14045
|
-
expanded: this.
|
|
14196
|
+
expanded: this.showing,
|
|
14046
14197
|
},
|
|
14047
14198
|
composed: true
|
|
14048
14199
|
});
|
|
@@ -14090,15 +14241,18 @@ class AuroFloatingUI {
|
|
|
14090
14241
|
break;
|
|
14091
14242
|
case 'focus':
|
|
14092
14243
|
if (this.element.focusShow) {
|
|
14244
|
+
|
|
14093
14245
|
/*
|
|
14094
|
-
This needs to better handle clicking that gives focus -
|
|
14095
|
-
currently it shows and then immediately hides the bib
|
|
14246
|
+
This needs to better handle clicking that gives focus -
|
|
14247
|
+
currently it shows and then immediately hides the bib
|
|
14096
14248
|
*/
|
|
14097
14249
|
this.showBib();
|
|
14098
14250
|
}
|
|
14099
14251
|
break;
|
|
14100
14252
|
case 'blur':
|
|
14101
|
-
this
|
|
14253
|
+
// send this task 100ms later queue to
|
|
14254
|
+
// wait a frame in case focus moves within the floating element/bib
|
|
14255
|
+
setTimeout(() => this.handleFocusLoss(), 0);
|
|
14102
14256
|
break;
|
|
14103
14257
|
case 'click':
|
|
14104
14258
|
if (document.activeElement === document.body) {
|
|
@@ -14106,7 +14260,7 @@ class AuroFloatingUI {
|
|
|
14106
14260
|
}
|
|
14107
14261
|
this.handleClick();
|
|
14108
14262
|
break;
|
|
14109
|
-
|
|
14263
|
+
// Do nothing
|
|
14110
14264
|
}
|
|
14111
14265
|
}
|
|
14112
14266
|
}
|
|
@@ -14150,39 +14304,79 @@ class AuroFloatingUI {
|
|
|
14150
14304
|
});
|
|
14151
14305
|
}
|
|
14152
14306
|
|
|
14307
|
+
/**
|
|
14308
|
+
*
|
|
14309
|
+
* @param {*} eventPrefix
|
|
14310
|
+
*/
|
|
14311
|
+
regenerateBibId() {
|
|
14312
|
+
this.id = this.element.getAttribute('id');
|
|
14313
|
+
if (!this.id) {
|
|
14314
|
+
this.id = window.crypto.randomUUID();
|
|
14315
|
+
this.element.setAttribute('id', this.id);
|
|
14316
|
+
}
|
|
14317
|
+
|
|
14318
|
+
this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
|
|
14319
|
+
}
|
|
14320
|
+
|
|
14153
14321
|
configure(elem, eventPrefix) {
|
|
14322
|
+
AuroFloatingUI.setupMousePressChecker();
|
|
14323
|
+
|
|
14154
14324
|
this.eventPrefix = eventPrefix;
|
|
14155
|
-
this.element
|
|
14156
|
-
|
|
14157
|
-
|
|
14325
|
+
if (this.element !== elem) {
|
|
14326
|
+
this.element = elem;
|
|
14327
|
+
}
|
|
14328
|
+
|
|
14329
|
+
if (this.behavior !== this.element.behavior) {
|
|
14330
|
+
this.behavior = this.element.behavior;
|
|
14331
|
+
}
|
|
14332
|
+
|
|
14333
|
+
if (this.element.trigger) {
|
|
14334
|
+
this.disconnect();
|
|
14335
|
+
}
|
|
14336
|
+
this.element.trigger = this.element.triggerElement || this.element.shadowRoot.querySelector('#trigger') || this.element.trigger;
|
|
14337
|
+
this.element.bib = this.element.shadowRoot.querySelector('#bib') || this.element.bib;
|
|
14158
14338
|
this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');
|
|
14159
14339
|
this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon');
|
|
14160
14340
|
|
|
14341
|
+
|
|
14342
|
+
if (this.element.floaterConfig) {
|
|
14343
|
+
this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
|
|
14344
|
+
}
|
|
14345
|
+
|
|
14161
14346
|
document.body.append(this.element.bib);
|
|
14162
14347
|
|
|
14348
|
+
this.regenerateBibId();
|
|
14163
14349
|
this.handleTriggerTabIndex();
|
|
14164
14350
|
|
|
14165
14351
|
this.handleEvent = this.handleEvent.bind(this);
|
|
14166
|
-
this.element.trigger
|
|
14167
|
-
|
|
14168
|
-
|
|
14169
|
-
|
|
14170
|
-
|
|
14171
|
-
|
|
14352
|
+
if (this.element.trigger) {
|
|
14353
|
+
this.element.trigger.addEventListener('keydown', this.handleEvent);
|
|
14354
|
+
this.element.trigger.addEventListener('click', this.handleEvent);
|
|
14355
|
+
this.element.trigger.addEventListener('mouseenter', this.handleEvent);
|
|
14356
|
+
this.element.trigger.addEventListener('mouseleave', this.handleEvent);
|
|
14357
|
+
this.element.trigger.addEventListener('focus', this.handleEvent);
|
|
14358
|
+
this.element.trigger.addEventListener('blur', this.handleEvent);
|
|
14359
|
+
}
|
|
14172
14360
|
}
|
|
14173
14361
|
|
|
14174
14362
|
disconnect() {
|
|
14175
14363
|
this.cleanupHideHandlers();
|
|
14176
|
-
this.element
|
|
14177
|
-
|
|
14178
|
-
|
|
14179
|
-
|
|
14180
|
-
|
|
14181
|
-
|
|
14182
|
-
|
|
14183
|
-
|
|
14184
|
-
this.element
|
|
14185
|
-
|
|
14364
|
+
if (this.element) {
|
|
14365
|
+
this.element.cleanup?.();
|
|
14366
|
+
|
|
14367
|
+
if (this.element.bib) {
|
|
14368
|
+
this.element.shadowRoot.append(this.element.bib);
|
|
14369
|
+
}
|
|
14370
|
+
|
|
14371
|
+
// Remove event & keyboard listeners
|
|
14372
|
+
if (this.element?.trigger) {
|
|
14373
|
+
this.element.trigger.removeEventListener('keydown', this.handleEvent);
|
|
14374
|
+
this.element.trigger.removeEventListener('click', this.handleEvent);
|
|
14375
|
+
this.element.trigger.removeEventListener('mouseenter', this.handleEvent);
|
|
14376
|
+
this.element.trigger.removeEventListener('mouseleave', this.handleEvent);
|
|
14377
|
+
this.element.trigger.removeEventListener('focus', this.handleEvent);
|
|
14378
|
+
this.element.trigger.removeEventListener('blur', this.handleEvent);
|
|
14379
|
+
}
|
|
14186
14380
|
}
|
|
14187
14381
|
}
|
|
14188
14382
|
}
|
|
@@ -15145,6 +15339,11 @@ class AuroDropdown extends LitElement {
|
|
|
15145
15339
|
* @private
|
|
15146
15340
|
*/
|
|
15147
15341
|
this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion$1, AuroHelpText$1);
|
|
15342
|
+
|
|
15343
|
+
/**
|
|
15344
|
+
* @private
|
|
15345
|
+
*/
|
|
15346
|
+
this.bindFocusEventToTrigger = this.bindFocusEventToTrigger.bind(this);
|
|
15148
15347
|
}
|
|
15149
15348
|
|
|
15150
15349
|
/**
|
|
@@ -15413,6 +15612,7 @@ class AuroDropdown extends LitElement {
|
|
|
15413
15612
|
disconnectedCallback() {
|
|
15414
15613
|
super.disconnectedCallback();
|
|
15415
15614
|
this.floater.disconnect();
|
|
15615
|
+
this.clearTriggerFocusEventBinding();
|
|
15416
15616
|
}
|
|
15417
15617
|
|
|
15418
15618
|
updated(changedProperties) {
|
|
@@ -15527,6 +15727,62 @@ class AuroDropdown extends LitElement {
|
|
|
15527
15727
|
return result;
|
|
15528
15728
|
}
|
|
15529
15729
|
|
|
15730
|
+
/**
|
|
15731
|
+
* @private
|
|
15732
|
+
* Creates and dispatches a duplicate focus event on the trigger element.
|
|
15733
|
+
* @param {Event} event - The original focus event.
|
|
15734
|
+
*/
|
|
15735
|
+
bindFocusEventToTrigger(event) {
|
|
15736
|
+
const dupEvent = new FocusEvent(event.type, {
|
|
15737
|
+
bubbles: false,
|
|
15738
|
+
cancelable: false,
|
|
15739
|
+
composed: true,
|
|
15740
|
+
});
|
|
15741
|
+
this.trigger.dispatchEvent(dupEvent);
|
|
15742
|
+
}
|
|
15743
|
+
|
|
15744
|
+
/**
|
|
15745
|
+
* @private
|
|
15746
|
+
* Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.
|
|
15747
|
+
* This ensures that focus/blur events originating from within these components are propagated to the trigger element itself.
|
|
15748
|
+
*/
|
|
15749
|
+
setupTriggerFocusEventBinding() {
|
|
15750
|
+
if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
|
|
15751
|
+
return;
|
|
15752
|
+
}
|
|
15753
|
+
|
|
15754
|
+
this.triggerContentSlot.forEach((node) => {
|
|
15755
|
+
if (node.querySelectorAll) {
|
|
15756
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
15757
|
+
auroElements.forEach((auroEl) => {
|
|
15758
|
+
auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
|
|
15759
|
+
auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
|
|
15760
|
+
});
|
|
15761
|
+
}
|
|
15762
|
+
});
|
|
15763
|
+
}
|
|
15764
|
+
|
|
15765
|
+
/**
|
|
15766
|
+
* Clears focus and blur event listeners from nested Auro components within the trigger slot.
|
|
15767
|
+
* @private
|
|
15768
|
+
* @returns {void}
|
|
15769
|
+
*/
|
|
15770
|
+
clearTriggerFocusEventBinding() {
|
|
15771
|
+
if (!this.triggerContentSlot || this.triggerContentSlot.length === 0) {
|
|
15772
|
+
return;
|
|
15773
|
+
}
|
|
15774
|
+
|
|
15775
|
+
this.triggerContentSlot.forEach((node) => {
|
|
15776
|
+
if (node.querySelectorAll) {
|
|
15777
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
15778
|
+
auroElements.forEach((auroEl) => {
|
|
15779
|
+
auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
|
|
15780
|
+
auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
|
|
15781
|
+
});
|
|
15782
|
+
}
|
|
15783
|
+
});
|
|
15784
|
+
}
|
|
15785
|
+
|
|
15530
15786
|
/**
|
|
15531
15787
|
* Handles changes to the trigger content slot and updates related properties.
|
|
15532
15788
|
*
|
|
@@ -15574,6 +15830,7 @@ class AuroDropdown extends LitElement {
|
|
|
15574
15830
|
}
|
|
15575
15831
|
|
|
15576
15832
|
if (this.triggerContentSlot) {
|
|
15833
|
+
this.setupTriggerFocusEventBinding();
|
|
15577
15834
|
this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
|
|
15578
15835
|
if (slot.textContent.trim()) {
|
|
15579
15836
|
return true;
|
|
@@ -15679,6 +15936,7 @@ class AuroDropdown extends LitElement {
|
|
|
15679
15936
|
<${this.dropdownBibTag}
|
|
15680
15937
|
id="bib"
|
|
15681
15938
|
role="tooltip"
|
|
15939
|
+
?data-show="${this.isPopoverVisible}"
|
|
15682
15940
|
?isfullscreen="${this.isBibFullscreen}"
|
|
15683
15941
|
?common="${this.common}"
|
|
15684
15942
|
?rounded="${this.common || this.rounded}"
|
|
@@ -23183,23 +23441,6 @@ class AuroDatePicker extends LitElement {
|
|
|
23183
23441
|
}
|
|
23184
23442
|
});
|
|
23185
23443
|
|
|
23186
|
-
// Close the datepicker when clicking outside it
|
|
23187
|
-
document.addEventListener('click', (evt) => {
|
|
23188
|
-
if (!evt.composedPath().includes(this) &&
|
|
23189
|
-
!evt.composedPath().includes(this.dropdown.bibContent) &&
|
|
23190
|
-
this.dropdown.isPopoverVisible) {
|
|
23191
|
-
this.dropdown.hide();
|
|
23192
|
-
}
|
|
23193
|
-
});
|
|
23194
|
-
|
|
23195
|
-
document.activeElement.addEventListener('focusin', () => {
|
|
23196
|
-
if (document.activeElement !== document.querySelector('body') &&
|
|
23197
|
-
!this.contains(document.activeElement) &&
|
|
23198
|
-
!this.dropdown.bibContent.contains(document.activeElement)) {
|
|
23199
|
-
this.dropdown.hide();
|
|
23200
|
-
}
|
|
23201
|
-
});
|
|
23202
|
-
|
|
23203
23444
|
if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
|
|
23204
23445
|
this.calendar.dateFrom = new Date(this.formattedValue).getTime();
|
|
23205
23446
|
}
|
|
@@ -23555,7 +23796,6 @@ class AuroDatePicker extends LitElement {
|
|
|
23555
23796
|
?disabled="${this.disabled}"
|
|
23556
23797
|
?error="${this.validity !== undefined && this.validity !== 'valid'}"
|
|
23557
23798
|
disableEventShow
|
|
23558
|
-
noHideOnThisFocusLoss
|
|
23559
23799
|
fullscreenBreakpoint="sm"
|
|
23560
23800
|
.placement="${this.placement}"
|
|
23561
23801
|
.offset="${this.offset}"
|