@tet/tet-components 1.4.86-testing → 1.4.87-testing
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/dist/cjs/index-3242ff3f.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/tet-components.cjs.js +1 -1
- package/dist/cjs/tet-snicker-card.cjs.entry.js +43 -8
- package/dist/cjs/tet-tab-header.cjs.entry.js +44 -14
- package/dist/collection/components/advanced/cards/tet-snicker-card/tet-snicker-card.css +27 -3
- package/dist/collection/components/advanced/cards/tet-snicker-card/tet-snicker-card.js +83 -7
- package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.css +23 -0
- package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.js +101 -13
- package/dist/components/{p-7836f80d.js → p-67c39d1c.js} +49 -15
- package/dist/components/tet-assembler.js +1 -1
- package/dist/components/tet-cloud-configurator.js +1 -1
- package/dist/components/tet-compare-cards-tab.js +1 -1
- package/dist/components/tet-snicker-card.js +68 -26
- package/dist/components/tet-tab-header.js +1 -1
- package/dist/esm/index-aac31bd2.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tet-components.js +1 -1
- package/dist/esm/tet-snicker-card.entry.js +43 -8
- package/dist/esm/tet-tab-header.entry.js +44 -14
- package/dist/tet-components/p-c00ec93c.entry.js +1 -0
- package/dist/tet-components/p-ed9d2b9b.entry.js +1 -0
- package/dist/tet-components/tet-components.esm.js +1 -1
- package/dist/types/components/advanced/cards/tet-snicker-card/tet-snicker-card.d.ts +14 -0
- package/dist/types/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.d.ts +13 -1
- package/dist/types/components.d.ts +51 -6
- package/package.json +1 -1
- package/dist/tet-components/p-2e5c8d0d.entry.js +0 -1
- package/dist/tet-components/p-d235f460.entry.js +0 -1
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-3242ff3f.js');
|
|
6
6
|
const debounce = require('./debounce-e63291de.js');
|
|
7
7
|
|
|
8
|
-
const tetTabHeaderCss = ":host{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}:host{--color-gray-light:#cdd2de;--color-ta070:#f5f6f8;--color-ta080:#e6e8ee;--color-ta100:#cdd2de;--color-ta200:#9ba5be;--color-ta300:#69789c;--color-ta500:#1e356a;--color-ta600:#051d59;--color-tc090:#d6e6fd;--color-tc100:#d1dffe;--color-tc300:#75a1fb;--color-tc500:#1a70f6;--color-tc600:#0060f5;--color-td500:#00F1F2;--color-td600:#01cbe0;--color-tf600:#f53b2a;--color-tg300:#2b3036;--color-tg400:#1d2128;--color-tg500:#12171e;--color-tg600:#01050c;--color-th500:#f5f5f5;--color-ti500:#869198;--color-ti600:#aeb7bc;--text-font:Gilroy, serif;--text-color-darker:var(--color-ta600);--text-color-dark:var(--color-ta500);--text-color-dark-theme:var(--color-th500);--icons-font:Tet Icons, serif}.icon.tet-search{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-search::before{content:\"\\e86e\"}.icon.tet-close-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close-circled::before{content:\"\\e85a\"}.icon.tet-close{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close::before{content:\"\\e85b\"}.icon.tet-check-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check-circled::before{content:\"\\e86c\"}.icon.tet-check{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check::before{content:\"\\e855\"}.icon.tet-chevron-up{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-up::before{content:\"\\e859\"}.icon.tet-chevron-down{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-down::before{content:\"\\e856\"}.icon.tet-clipboard{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-clipboard::before{content:\"\\e86a\"}.icon.tet-info{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-info::before{content:\"\\e81d\"}.icon.tet-done{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-done::before{content:\"\\e867\"}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:host{--tabs-container-border-color:var(--tc-border-quaternary);--tabs-container-flex-wrap:nowrap;--tabs-headers-text-color:var(--tc-text-primary);--tabs-headers-text-disabled-color:var(--tc-grey-50);--tabs-headers-active-border-color:var(--tc-icon-primary);--tabs-headers-hover-border-color:var(--tc-border-tertiary);--tabs-headers-focus-border-color:var(--tc-border-secondary);--tabs-headers-focus-outline-color:var(--tc-blue-40);--tabs-headers-segmended-item-font:500 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;--tabs-headers-segmented-border-color:var(--tc-border-quaternary);--tabs-headers-segmented-background-color:var(--tc-layer-tertiary);--tabs-headers-segmented-active-background-color:var(--tc-layer-primary);--tabs-headers-segmented-active-box-shadow:var(--tc-elevation-two);--tabs-headers-item-padding:0.75rem 0.25rem;--tabs-headers-item-margin:0 0.25rem;--tabs-headers-segmented-item-padding:0.375rem 1.5rem;--tabs-headers-segmented-item-margin:0.25rem 0;--tabs-headers-square-base-rgb:255, 255, 255;--tabs-headers-pill-text-color:var(--tc-text-primary);--tabs-headers-pill-text-disabled-color:color-mix(in srgb, var(--tc-grey-80) 16%, transparent);--tabs-headers-pill-background-color:var(--tc-grey-20);--tabs-headers-pill-hover-background-color:var(--tc-grey-30);--tabs-headers-pill-pressed-background-color:color-mix(in srgb, var(--tc-grey-40) 80%, transparent);--tabs-headers-pill-active-background-color:var(--tc-yellow-40);--tabs-headers-pill-active-text-color:var(--tc-text-primary);--tabs-headers-pill-gradient-color:var(--tc-background-primary);--tabs-headers-pill-edge-padding:0rem;--tabs-headers-square-detached-background-color:var(--tc-grey-20);--tabs-headers-square-detached-hover-background-color:var(--tc-grey-30);--tabs-headers-square-detached-pressed-background-color:var(--tc-grey-40);--tabs-headers-square-detached-active-background-color:var(--tc-grey-110);--tabs-headers-square-detached-disabled-background-color:var(--tc-grey-20);--tabs-headers-square-detached-focus-outline-color:var(--tc-blue-40);--tabs-headers-square-detached-svg-filter:brightness(0) invert(0.298);--tabs-headers-square-detached-svg-hover-filter:brightness(0) invert(0.098);--tabs-headers-square-detached-svg-pressed-filter:brightness(0) invert(0.098);--tabs-headers-square-detached-svg-active-filter:brightness(0) invert(1);--tabs-headers-square-detached-svg-disabled-filter:brightness(0) invert(0.631);--tabs-headers-square-detached-gradient-color:var(--tc-background-primary);--tabs-headers-square-detached-button-max-width-default:7rem;max-width:100%}:host .dark{--tabs-container-border-color:var(--tc-border-quaternary-dark);--tabs-headers-text-color:var(--tc-text-primary-dark);--tabs-headers-text-disabled-color:var(--tc-grey-50-dark);--tabs-headers-active-border-color:var(--tc-icon-primary-dark);--tabs-headers-hover-border-color:var(--tc-border-tertiary-dark);--tabs-headers-focus-border-color:var(--tc-border-secondary-dark);--tabs-headers-focus-outline-color:var(--tc-blue-40-dark);--tabs-headers-segmented-border-color:var(--tc-border-quaternary-dark);--tabs-headers-segmented-background-color:var(--tc-layer-tertiary-dark);--tabs-headers-segmented-active-background-color:var(--tc-layer-primary-dark);--tabs-headers-segmented-active-box-shadow:var(--tc-elevation-two-dark);--tabs-headers-pill-text-color:var(--tc-grey-100-dark);--tabs-headers-pill-text-disabled-color:color-mix(in srgb, var(--tc-grey-80-dark) 30%, transparent);--tabs-headers-pill-background-color:var(--tc-brown-80-dark);--tabs-headers-pill-hover-background-color:var(--tc-brown-70-dark);--tabs-headers-pill-pressed-background-color:color-mix(in srgb, var(--tc-brown-60-dark) 80%, transparent);--tabs-headers-pill-active-background-color:var(--tc-yellow-40-dark);--tabs-headers-pill-active-text-color:var(--tc-text-primary);--tabs-headers-pill-gradient-color:var(--tc-background-primary-dark);--tabs-headers-square-detached-background-color:var(--tc-brown-80-dark);--tabs-headers-square-detached-hover-background-color:var(--tc-brown-70-dark);--tabs-headers-square-detached-pressed-background-color:var(--tc-brown-60-dark);--tabs-headers-square-detached-active-background-color:var(--tc-yellow-40-dark);--tabs-headers-square-detached-disabled-background-color:var(--tc-brown-80-dark);--tabs-headers-square-detached-focus-outline-color:var(--tc-blue-40-dark);--tabs-headers-square-detached-svg-filter:brightness(0) invert(0.859);--tabs-headers-square-detached-svg-hover-filter:brightness(0) invert(0.969);--tabs-headers-square-detached-svg-pressed-filter:brightness(0) invert(0.969);--tabs-headers-square-detached-svg-active-filter:brightness(0) invert(0.051);--tabs-headers-square-detached-svg-disabled-filter:brightness(0) invert(0.631);--tabs-headers-square-detached-gradient-color:var(--tc-background-primary-dark)}.tabs{--active-width:auto;--active-x-pos:0;--active-transition:none;position:relative;display:flex;flex-wrap:var(--tabs-container-flex-wrap);align-items:center;max-width:100%;padding:0.125rem 0;overflow-x:scroll;scrollbar-width:none;-webkit-user-select:none;user-select:none}.tabs ::slotted(img){margin:0;padding:0;height:1.3125rem}.tabs-line{display:flex;position:relative;max-width:100%;height:0.0625rem;background-color:var(--tabs-container-border-color);border:none;margin-top:-0.125rem}.tabs-line.no-underline{display:none}.tabs *{box-sizing:border-box}.tabs::-webkit-scrollbar{display:none}.tabs.right:not(.tabs--segmented){justify-content:flex-end}.tabs.center:not(.tabs--segmented){justify-content:center}.tabs ::slotted(*){display:flex;justify-content:center;align-items:center;border-bottom:0.125rem solid transparent;color:var(--tabs-headers-text-color);cursor:pointer;padding:var(--tabs-headers-item-padding) !important;margin:var(--tabs-headers-item-margin);transition:border-bottom-color 0.2s ease;white-space:nowrap;background-color:transparent;border-color:transparent;border-radius:0.125rem}.tabs ::slotted(:first-child){margin-left:0}.tabs ::slotted(:last-child){margin-right:0}.tabs ::slotted(:hover){border-bottom-color:var(--tabs-headers-hover-border-color);background-color:transparent}.tabs ::slotted(:focus){border-bottom-color:var(--tabs-headers-focus-border-color)}.tabs ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:0rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color);border-bottom-color:transparent;z-index:99}.tabs ::slotted(.disabled){border-bottom-color:transparent;color:var(--tabs-headers-text-disabled-color);outline:none;cursor:not-allowed}.tabs ::slotted(.active){border-bottom-color:var(--tabs-headers-active-border-color)}.tabs.pill .tabs-gradient,.tabs.square-detached .tabs-gradient{position:sticky;top:0.5rem;bottom:0.5rem;width:13.75rem;align-self:stretch;flex-shrink:0;opacity:0;z-index:20;pointer-events:none;transition:opacity 0.4s ease-out}.tabs.pill .tabs-gradient-left,.tabs.square-detached .tabs-gradient-left{left:-0.5rem;margin-right:-13.75rem;background:linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--tabs-gradient-color) 100%)}.tabs.pill .tabs-gradient-right,.tabs.square-detached .tabs-gradient-right{right:-0.5rem;margin-left:-13.75rem;background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--tabs-gradient-color) 100%)}.tabs.pill.tabs--overflow-left .tabs-gradient-left,.tabs.square-detached.tabs--overflow-left .tabs-gradient-left{opacity:1}.tabs.pill.tabs--overflow-right .tabs-gradient-right,.tabs.square-detached.tabs--overflow-right .tabs-gradient-right{opacity:1}.tabs.square-detached{--tabs-gradient-color:var(--tabs-headers-square-detached-gradient-color);padding-top:0.5rem;padding-bottom:0.5rem;margin-top:-0.5rem;margin-bottom:-0.5rem}.tabs.square-detached ::slotted(*){display:flex;flex:1;min-width:var(--tabs-headers-square-detached-button-max-width, var(--tabs-headers-square-detached-button-max-width-default));max-width:var(--tabs-headers-square-detached-button-max-width, var(--tabs-headers-square-detached-button-max-width-default));border:none;box-sizing:border-box;background-color:var(--tabs-headers-square-detached-background-color);justify-content:center;align-items:center;flex-shrink:0;transition:background-color 0.2s ease;--square-detached-img-filter:var(--tabs-headers-square-detached-svg-filter)}.tabs.square-detached ::slotted(:hover){border-bottom-color:transparent;background-color:var(--tabs-headers-square-detached-hover-background-color);--square-detached-img-filter:var(--tabs-headers-square-detached-svg-hover-filter)}.tabs.square-detached ::slotted(:active){background-color:var(--tabs-headers-square-detached-pressed-background-color);--square-detached-img-filter:var(--tabs-headers-square-detached-svg-pressed-filter)}.tabs.square-detached ::slotted(:focus-visible){background-color:var(--tabs-headers-square-detached-active-background-color);border-bottom-color:transparent;outline:0.125rem solid var(--tc-blue-40);outline-offset:0.25rem;transition:outline 0s;outline-color:var(--tabs-headers-square-detached-focus-outline-color);z-index:99;--square-detached-img-filter:var(--tabs-headers-square-detached-svg-active-filter)}.tabs.square-detached ::slotted(.active){border-bottom-color:transparent;background-color:var(--tabs-headers-square-detached-active-background-color);--square-detached-img-filter:var(--tabs-headers-square-detached-svg-active-filter)}.tabs.square-detached ::slotted(.disabled){background-color:var(--tabs-headers-square-detached-disabled-background-color);border-bottom-color:transparent;--square-detached-img-filter:var(--tabs-headers-square-detached-svg-disabled-filter);cursor:not-allowed}.tabs.square-detached ::slotted(:first-child){margin-left:unset}.tabs.square-detached ::slotted(:last-child){margin-right:unset}.tabs.square-detached.mobile{--tabs-headers-item-margin:0 0.5rem}.tabs.square-detached.mobile ::slotted(*){--square-detached-logo-max-w:3.9375rem;--square-detached-logo-max-h:2.8125rem;height:5.125rem;border-radius:0.568rem;padding:0.568rem 1.419rem}.tabs.square-detached.tablet{--tabs-headers-item-margin:0 0.75rem}.tabs.square-detached.tablet ::slotted(*){--square-detached-logo-max-w:5.1875rem;--square-detached-logo-max-h:3.75rem;--tabs-headers-square-detached-button-max-width-default:9.1875rem;height:6.75rem;border-radius:0.75rem;padding:0.75rem 1.875rem}.tabs.square-detached.web{--tabs-headers-item-margin:0 0.75rem}.tabs.square-detached.web ::slotted(*){--square-detached-logo-max-w:6.875rem;--square-detached-logo-max-h:5rem;--tabs-headers-square-detached-button-max-width-default:17.25rem;min-width:12.25rem !important;height:9rem;border-radius:1rem;padding:1rem 2.5rem}.tabs.blue ::slotted(:hover){--tabs-headers-hover-border-color:rgb(113, 172, 244)}.tabs.blue ::slotted(:focus){--tabs-headers-focus-border-color:rgb(113, 172, 244)}.tabs.blue ::slotted(.active){--tabs-headers-active-border-color:rgb(0, 96, 245)}.tabs.pill{--tabs-gradient-color:var(--tabs-headers-pill-gradient-color);--tabs-edge-padding:var(--tabs-headers-pill-edge-padding);padding-top:0.5rem;padding-bottom:0.5rem;margin-top:-0.5rem;margin-bottom:-0.5rem;padding-inline:calc(var(--tabs-headers-pill-edge-padding) + 0.5rem);margin-inline:-0.5rem}.tabs.pill ::slotted(*){--icon-size:1rem;gap:0.25rem;border-radius:5.5rem;border-bottom:none;transition:all 0.2s ease-in-out;align-items:center;background-color:var(--tabs-headers-pill-background-color);color:var(--tabs-headers-pill-text-color);box-sizing:border-box}.tabs.pill.web ::slotted(*){--tabs-headers-item-padding:0.375rem 1.5rem;font:500 1rem/1.5rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:-0.00625rem;min-width:5.625rem;flex-shrink:0;height:2.25rem}.tabs.pill.web ::slotted(:has(tet-icon)){--tabs-headers-item-padding:0.375rem 1rem 0.375rem 0.875rem}.tabs.pill.mobile ::slotted(*){--tabs-headers-item-padding:0.375rem 1rem;font:500 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:-0.003125rem;min-width:4.3125rem;flex-shrink:0;height:2rem}.tabs.pill.mobile ::slotted(:has(tet-icon)){--tabs-headers-item-padding:0.375rem 0.75rem 0.375rem 0.5rem}.tabs.pill ::slotted(:hover){border-bottom-color:transparent;background-color:var(--tabs-headers-pill-hover-background-color)}.tabs.pill ::slotted(:active){background-color:var(--tabs-headers-pill-pressed-background-color)}.tabs.pill ::slotted(:focus){border-bottom-color:transparent}.tabs.pill ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:0.25rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color);border-bottom-color:transparent}.tabs.pill ::slotted(.active){border-bottom-color:transparent;background-color:var(--tabs-headers-pill-active-background-color);color:var(--tabs-headers-pill-active-text-color)}.tabs.pill ::slotted(.active:active){background-color:var(--tabs-headers-pill-pressed-background-color)}.tabs.pill ::slotted(.disabled){background-color:var(--tabs-headers-pill-background-color);color:var(--tabs-headers-pill-text-disabled-color);cursor:not-allowed}.tabs.pill ::slotted(:first-child){margin-left:0 !important}.tabs.pill ::slotted(:last-child){margin-right:0 !important}.tabs--segmented{display:flex;border:0.0625rem solid var(--tabs-headers-segmented-border-color);border-radius:1.5rem;background-color:var(--tabs-headers-segmented-background-color);padding:0 0.25rem;box-sizing:border-box;overflow-x:scroll}.tabs--segmented .web{padding:0.25rem}.tabs--segmented ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.125rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color)}.tabs--segmented.dark-gray{--tabs-headers-text-color:rgb(255, 255, 255);--tabs-headers-segmented-border-color:rgb(67, 75, 86);--tabs-headers-segmented-background-color:rgb(35, 40, 46);--tabs-headers-segmented-active-background-color:rgb(67, 75, 86);--tabs-headers-segmented-active-box-shadow:0 0 0.0625rem 0 rgba(10, 11, 13, 0.08),\n 0 0.1875rem 0.25rem 0 rgba(10, 11, 13, 0.12);--icon-color:rgb(255, 255, 255)}.tabs--segmented.dark-gray ::slotted(:hover),.tabs--segmented.dark-gray ::slotted(:focus),.tabs--segmented.dark-gray ::slotted(.active){color:rgb(255, 255, 255)}.tabs--segmented.dark-gray ::slotted(.disabled){color:var(--tabs-headers-text-disabled-color);cursor:not-allowed}.tabs--segmented::before{content:\"\";position:absolute;top:0.25rem;bottom:0.25rem;left:0;z-index:0;border-radius:1.563rem;width:var(--active-width);transform:translateX(var(--active-x-pos));transition:var(--active-transition);background:var(--tabs-headers-segmented-active-background-color);box-shadow:var(--tabs-headers-segmented-active-box-shadow)}.tabs--segmented ::slotted(*){font:var(--tabs-headers-segmended-item-font);line-height:1.5rem;z-index:1;position:relative;border:none;padding:var(--tabs-headers-segmented-item-padding) !important;margin:var(--tabs-headers-segmented-item-margin) !important;border-radius:1.563rem;display:flex;flex:1;justify-content:center}.tabs--segmented.mobile ::slotted(*){font:500 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:-0.003125rem;font-weight:500;padding:0.25rem 1.5rem !important;margin:0.188rem 0 !important;line-height:1.25rem}.tabs--segmented.square{--tabs-headers-segmented-background-color:rgba(var(--tabs-headers-square-base-rgb), 0.16);--tabs-headers-segmented-border-color:transparent;height:4.75rem;border-radius:0.375rem;padding:0}.tabs--segmented.square::before{--tabs-headers-segmented-active-box-shadow:none;position:absolute;top:0;bottom:0;left:-0.0625rem;border-radius:0}.tabs--segmented.square ::slotted(*){--tabs-headers-segmented-item-padding:0;--tabs-headers-segmented-item-margin:0;border-radius:0;height:100%;align-items:center}.tabs--segmented.square ::slotted(*)::after{content:\"\";background-color:rgba(var(--tabs-headers-square-base-rgb), 0.2);position:absolute;top:0.375rem;bottom:0.375rem;right:0;width:0.0625rem}.tabs--segmented.square ::slotted(:hover){background-color:rgba(var(--tabs-headers-square-base-rgb), 0.24)}.tabs--segmented.square ::slotted(:first-child){border-radius:0.3125rem 0 0 0.3125rem}.tabs--segmented.square ::slotted(:last-child){border-radius:0 0.3125rem 0.3125rem 0}.tabs--segmented.square ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.125rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color)}.tabs--segmented.square ::slotted(:focus-visible)::after{display:none}.tabs--segmented.square ::slotted(.active)::after,.tabs--segmented.square ::slotted(:last-child)::after{display:none}.tabs--segmented.netflix{height:2.75rem;gap:0.5rem;overflow-y:hidden}.tabs--segmented.netflix ::slotted(*){flex-direction:row-reverse;align-items:center;justify-content:center;gap:0.5rem}.tabs--segmented.netflix ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.0625rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color);border-radius:1.563rem}.tabs ::slotted(.no-underline){border-bottom:none}";
|
|
8
|
+
const tetTabHeaderCss = ":host{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}:host{--color-gray-light:#cdd2de;--color-ta070:#f5f6f8;--color-ta080:#e6e8ee;--color-ta100:#cdd2de;--color-ta200:#9ba5be;--color-ta300:#69789c;--color-ta500:#1e356a;--color-ta600:#051d59;--color-tc090:#d6e6fd;--color-tc100:#d1dffe;--color-tc300:#75a1fb;--color-tc500:#1a70f6;--color-tc600:#0060f5;--color-td500:#00F1F2;--color-td600:#01cbe0;--color-tf600:#f53b2a;--color-tg300:#2b3036;--color-tg400:#1d2128;--color-tg500:#12171e;--color-tg600:#01050c;--color-th500:#f5f5f5;--color-ti500:#869198;--color-ti600:#aeb7bc;--text-font:Gilroy, serif;--text-color-darker:var(--color-ta600);--text-color-dark:var(--color-ta500);--text-color-dark-theme:var(--color-th500);--icons-font:Tet Icons, serif}.icon.tet-search{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-search::before{content:\"\\e86e\"}.icon.tet-close-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close-circled::before{content:\"\\e85a\"}.icon.tet-close{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-close::before{content:\"\\e85b\"}.icon.tet-check-circled{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check-circled::before{content:\"\\e86c\"}.icon.tet-check{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-check::before{content:\"\\e855\"}.icon.tet-chevron-up{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-up::before{content:\"\\e859\"}.icon.tet-chevron-down{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-chevron-down::before{content:\"\\e856\"}.icon.tet-clipboard{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-clipboard::before{content:\"\\e86a\"}.icon.tet-info{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-info::before{content:\"\\e81d\"}.icon.tet-done{font-family:var(--icons-font);font-weight:400;font-style:normal;font-size:1.25rem;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;speak:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.icon.tet-done::before{content:\"\\e867\"}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:host{--tabs-container-border-color:var(--tc-border-quaternary);--tabs-container-flex-wrap:nowrap;--tabs-headers-text-color:var(--tc-text-primary);--tabs-headers-text-disabled-color:var(--tc-grey-50);--tabs-headers-active-border-color:var(--tc-icon-primary);--tabs-headers-hover-border-color:var(--tc-border-tertiary);--tabs-headers-focus-border-color:var(--tc-border-secondary);--tabs-headers-focus-outline-color:var(--tc-blue-40);--tabs-headers-segmended-item-font:500 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;--tabs-headers-segmented-border-color:var(--tc-border-quaternary);--tabs-headers-segmented-background-color:var(--tc-layer-tertiary);--tabs-headers-segmented-active-background-color:var(--tc-layer-primary);--tabs-headers-segmented-active-box-shadow:var(--tc-elevation-two);--tabs-headers-item-padding:0.75rem 0.25rem;--tabs-headers-item-margin:0 0.25rem;--tabs-headers-segmented-item-padding:0.375rem 1.5rem;--tabs-headers-segmented-item-margin:0.25rem 0;--tabs-headers-square-base-rgb:255, 255, 255;--tabs-headers-pill-text-color:var(--tc-text-primary);--tabs-headers-pill-text-disabled-color:color-mix(in srgb, var(--tc-grey-80) 16%, transparent);--tabs-headers-pill-background-color:var(--tc-grey-20);--tabs-headers-pill-hover-background-color:var(--tc-grey-30);--tabs-headers-pill-pressed-background-color:color-mix(in srgb, var(--tc-grey-40) 80%, transparent);--tabs-headers-pill-active-background-color:var(--tc-yellow-40);--tabs-headers-pill-active-text-color:var(--tc-text-primary);--tabs-headers-pill-gradient-color:var(--tc-background-primary);--tabs-headers-pill-edge-padding:0rem;--tabs-headers-square-detached-background-color:var(--tc-grey-20);--tabs-headers-square-detached-hover-background-color:var(--tc-grey-30);--tabs-headers-square-detached-pressed-background-color:var(--tc-grey-40);--tabs-headers-square-detached-active-background-color:var(--tc-grey-110);--tabs-headers-square-detached-disabled-background-color:var(--tc-grey-20);--tabs-headers-square-detached-focus-outline-color:var(--tc-blue-40);--tabs-headers-square-detached-svg-filter:brightness(0) invert(0.298);--tabs-headers-square-detached-svg-hover-filter:brightness(0) invert(0.098);--tabs-headers-square-detached-svg-pressed-filter:brightness(0) invert(0.098);--tabs-headers-square-detached-svg-active-filter:brightness(0) invert(1);--tabs-headers-square-detached-svg-disabled-filter:brightness(0) invert(0.631);--tabs-headers-square-detached-gradient-color:var(--tc-background-primary);--tabs-headers-square-detached-button-max-width-default:7rem;max-width:100%}:host .dark{--tabs-container-border-color:var(--tc-border-quaternary-dark);--tabs-headers-text-color:var(--tc-text-primary-dark);--tabs-headers-text-disabled-color:var(--tc-grey-50-dark);--tabs-headers-active-border-color:var(--tc-icon-primary-dark);--tabs-headers-hover-border-color:var(--tc-border-tertiary-dark);--tabs-headers-focus-border-color:var(--tc-border-secondary-dark);--tabs-headers-focus-outline-color:var(--tc-blue-40-dark);--tabs-headers-segmented-border-color:var(--tc-border-quaternary-dark);--tabs-headers-segmented-background-color:var(--tc-layer-tertiary-dark);--tabs-headers-segmented-active-background-color:var(--tc-layer-primary-dark);--tabs-headers-segmented-active-box-shadow:var(--tc-elevation-two-dark);--tabs-headers-pill-text-color:var(--tc-grey-100-dark);--tabs-headers-pill-text-disabled-color:color-mix(in srgb, var(--tc-grey-80-dark) 30%, transparent);--tabs-headers-pill-background-color:var(--tc-brown-80-dark);--tabs-headers-pill-hover-background-color:var(--tc-brown-70-dark);--tabs-headers-pill-pressed-background-color:color-mix(in srgb, var(--tc-brown-60-dark) 80%, transparent);--tabs-headers-pill-active-background-color:var(--tc-yellow-40-dark);--tabs-headers-pill-active-text-color:var(--tc-text-primary);--tabs-headers-pill-gradient-color:var(--tc-background-primary-dark);--tabs-headers-square-detached-background-color:var(--tc-brown-80-dark);--tabs-headers-square-detached-hover-background-color:var(--tc-brown-70-dark);--tabs-headers-square-detached-pressed-background-color:var(--tc-brown-60-dark);--tabs-headers-square-detached-active-background-color:var(--tc-yellow-40-dark);--tabs-headers-square-detached-disabled-background-color:var(--tc-brown-80-dark);--tabs-headers-square-detached-focus-outline-color:var(--tc-blue-40-dark);--tabs-headers-square-detached-svg-filter:brightness(0) invert(0.859);--tabs-headers-square-detached-svg-hover-filter:brightness(0) invert(0.969);--tabs-headers-square-detached-svg-pressed-filter:brightness(0) invert(0.969);--tabs-headers-square-detached-svg-active-filter:brightness(0) invert(0.051);--tabs-headers-square-detached-svg-disabled-filter:brightness(0) invert(0.631);--tabs-headers-square-detached-gradient-color:var(--tc-background-primary-dark)}.tabs{--active-width:auto;--active-x-pos:0;--active-transition:none;position:relative;display:flex;flex-wrap:var(--tabs-container-flex-wrap);align-items:center;max-width:100%;padding:0.125rem 0;overflow-x:scroll;scrollbar-width:none;-webkit-user-select:none;user-select:none}.tabs ::slotted(img){margin:0;padding:0;height:1.3125rem}.tabs-line{display:flex;position:relative;max-width:100%;height:0.0625rem;background-color:var(--tabs-container-border-color);border:none;margin-top:-0.125rem}.tabs-line.no-underline{display:none}.tabs *{box-sizing:border-box}.tabs::-webkit-scrollbar{display:none}.tabs.right:not(.tabs--segmented){justify-content:flex-end}.tabs.center:not(.tabs--segmented){justify-content:center}.tabs ::slotted(*){display:flex;justify-content:center;align-items:center;border-bottom:0.125rem solid transparent;color:var(--tabs-headers-text-color);cursor:pointer;padding:var(--tabs-headers-item-padding) !important;margin:var(--tabs-headers-item-margin);transition:border-bottom-color 0.2s ease;white-space:nowrap;background-color:transparent;border-color:transparent;border-radius:0.125rem}.tabs ::slotted(:first-child){margin-left:0}.tabs ::slotted(:last-child){margin-right:0}.tabs ::slotted(:hover){border-bottom-color:var(--tabs-headers-hover-border-color);background-color:transparent}.tabs ::slotted(:focus){border-bottom-color:var(--tabs-headers-focus-border-color)}.tabs ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:0rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color);border-bottom-color:transparent;z-index:99}.tabs ::slotted(.disabled){border-bottom-color:transparent;color:var(--tabs-headers-text-disabled-color);outline:none;cursor:not-allowed}.tabs ::slotted(.active){border-bottom-color:var(--tabs-headers-active-border-color)}.tabs.pill .tabs-gradient,.tabs.square-detached .tabs-gradient{position:sticky;top:0.5rem;bottom:0.5rem;width:13.75rem;align-self:stretch;flex-shrink:0;opacity:0;z-index:20;pointer-events:none;transition:opacity 0.4s ease-out}.tabs.pill .tabs-gradient-left,.tabs.square-detached .tabs-gradient-left{left:-0.5rem;margin-right:-13.75rem;background:linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--tabs-gradient-color) 100%)}.tabs.pill .tabs-gradient-right,.tabs.square-detached .tabs-gradient-right{right:-0.5rem;margin-left:-13.75rem;background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--tabs-gradient-color) 100%)}.tabs.pill.tabs--overflow-left .tabs-gradient-left,.tabs.square-detached.tabs--overflow-left .tabs-gradient-left{opacity:1}.tabs.pill.tabs--overflow-right .tabs-gradient-right,.tabs.square-detached.tabs--overflow-right .tabs-gradient-right{opacity:1}.tabs.square-detached{--tabs-gradient-color:var(--tabs-headers-square-detached-gradient-color);padding-top:0.5rem;padding-bottom:0.5rem;margin-top:-0.5rem;margin-bottom:-0.5rem}.tabs.square-detached ::slotted(*){display:flex;flex:1;min-width:var(--tabs-headers-square-detached-button-max-width, var(--tabs-headers-square-detached-button-max-width-default));max-width:var(--tabs-headers-square-detached-button-max-width, var(--tabs-headers-square-detached-button-max-width-default));border:none;box-sizing:border-box;background-color:var(--tabs-headers-square-detached-background-color);justify-content:center;align-items:center;flex-shrink:0;transition:background-color 0.2s ease;--square-detached-img-filter:var(--tabs-headers-square-detached-svg-filter)}.tabs.square-detached ::slotted(:hover){border-bottom-color:transparent;background-color:var(--tabs-headers-square-detached-hover-background-color);--square-detached-img-filter:var(--tabs-headers-square-detached-svg-hover-filter)}.tabs.square-detached ::slotted(:active){background-color:var(--tabs-headers-square-detached-pressed-background-color);--square-detached-img-filter:var(--tabs-headers-square-detached-svg-pressed-filter)}.tabs.square-detached ::slotted(:focus-visible){background-color:var(--tabs-headers-square-detached-active-background-color);border-bottom-color:transparent;outline:0.125rem solid var(--tc-blue-40);outline-offset:0.25rem;transition:outline 0s;outline-color:var(--tabs-headers-square-detached-focus-outline-color);z-index:99;--square-detached-img-filter:var(--tabs-headers-square-detached-svg-active-filter)}.tabs.square-detached ::slotted(.active){border-bottom-color:transparent;background-color:var(--tabs-headers-square-detached-active-background-color);--square-detached-img-filter:var(--tabs-headers-square-detached-svg-active-filter)}.tabs.square-detached ::slotted(.disabled){background-color:var(--tabs-headers-square-detached-disabled-background-color);border-bottom-color:transparent;--square-detached-img-filter:var(--tabs-headers-square-detached-svg-disabled-filter);cursor:not-allowed}.tabs.square-detached ::slotted(:first-child){margin-left:unset}.tabs.square-detached ::slotted(:last-child){margin-right:unset}.tabs.square-detached.mobile{--tabs-headers-item-margin:0 0.5rem}.tabs.square-detached.mobile ::slotted(*){--square-detached-logo-max-w:3.9375rem;--square-detached-logo-max-h:2.8125rem;height:5.125rem;border-radius:0.568rem;padding:0.568rem 1.419rem}.tabs.square-detached.tablet{--tabs-headers-item-margin:0 0.75rem}.tabs.square-detached.tablet ::slotted(*){--square-detached-logo-max-w:5.1875rem;--square-detached-logo-max-h:3.75rem;--tabs-headers-square-detached-button-max-width-default:9.1875rem;height:6.75rem;border-radius:0.75rem;padding:0.75rem 1.875rem}.tabs.square-detached.web{--tabs-headers-item-margin:0 0.75rem}.tabs.square-detached.web ::slotted(*){--square-detached-logo-max-w:6.875rem;--square-detached-logo-max-h:5rem;--tabs-headers-square-detached-button-max-width-default:17.25rem;min-width:12.25rem !important;height:9rem;border-radius:1rem;padding:1rem 2.5rem}.tabs.blue ::slotted(:hover){--tabs-headers-hover-border-color:rgb(113, 172, 244)}.tabs.blue ::slotted(:focus){--tabs-headers-focus-border-color:rgb(113, 172, 244)}.tabs.blue ::slotted(.active){--tabs-headers-active-border-color:rgb(0, 96, 245)}.tabs.pill{--tabs-gradient-color:var(--tabs-headers-pill-gradient-color);--tabs-edge-padding:var(--tabs-headers-pill-edge-padding);padding-top:0.5rem;padding-bottom:0.5rem;margin-top:-0.5rem;margin-bottom:-0.5rem;padding-inline:calc(var(--tabs-headers-pill-edge-padding) + 0.5rem);margin-inline:-0.5rem}.tabs.pill ::slotted(*){--icon-size:1rem;gap:0.25rem;border-radius:5.5rem;border-bottom:none;transition:all 0.2s ease-in-out;align-items:center;background-color:var(--tabs-headers-pill-background-color);color:var(--tabs-headers-pill-text-color);box-sizing:border-box}.tabs.pill.web ::slotted(*){--tabs-headers-item-padding:0.375rem 1.5rem;font:500 1rem/1.5rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:-0.00625rem;min-width:5.625rem;flex-shrink:0;height:2.25rem}.tabs.pill.web ::slotted(:has(tet-icon)){--tabs-headers-item-padding:0.375rem 1rem 0.375rem 0.875rem}.tabs.pill.mobile ::slotted(*){--tabs-headers-item-padding:0.375rem 1rem;font:500 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:-0.003125rem;min-width:4.3125rem;flex-shrink:0;height:2rem}.tabs.pill.mobile ::slotted(:has(tet-icon)){--tabs-headers-item-padding:0.375rem 0.75rem 0.375rem 0.5rem}.tabs.pill ::slotted(:hover){border-bottom-color:transparent;background-color:var(--tabs-headers-pill-hover-background-color)}.tabs.pill ::slotted(:active){background-color:var(--tabs-headers-pill-pressed-background-color)}.tabs.pill ::slotted(:focus){border-bottom-color:transparent}.tabs.pill ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:0.25rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color);border-bottom-color:transparent}.tabs.pill ::slotted(.active){border-bottom-color:transparent;background-color:var(--tabs-headers-pill-active-background-color);color:var(--tabs-headers-pill-active-text-color)}.tabs.pill ::slotted(.active:active){background-color:var(--tabs-headers-pill-pressed-background-color)}.tabs.pill ::slotted(.disabled){background-color:var(--tabs-headers-pill-background-color);color:var(--tabs-headers-pill-text-disabled-color);cursor:not-allowed}.tabs.pill ::slotted(:first-child){margin-left:0 !important}.tabs.pill ::slotted(:last-child){margin-right:0 !important}.tabs--segmented{display:flex;border:0.0625rem solid var(--tabs-headers-segmented-border-color);border-radius:1.5rem;background-color:var(--tabs-headers-segmented-background-color);padding:0 0.25rem;box-sizing:border-box;overflow-x:scroll}.tabs--segmented .web{padding:0.25rem}.tabs--segmented ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.125rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color)}.tabs--segmented.dark-gray{--tabs-headers-text-color:rgb(255, 255, 255);--tabs-headers-segmented-border-color:rgb(67, 75, 86);--tabs-headers-segmented-background-color:rgb(35, 40, 46);--tabs-headers-segmented-active-background-color:rgb(67, 75, 86);--tabs-headers-segmented-active-box-shadow:0 0 0.0625rem 0 rgba(10, 11, 13, 0.08),\n 0 0.1875rem 0.25rem 0 rgba(10, 11, 13, 0.12);--icon-color:rgb(255, 255, 255)}.tabs--segmented.dark-gray ::slotted(:hover),.tabs--segmented.dark-gray ::slotted(:focus),.tabs--segmented.dark-gray ::slotted(.active){color:rgb(255, 255, 255)}.tabs--segmented.dark-gray ::slotted(.disabled){color:var(--tabs-headers-text-disabled-color);cursor:not-allowed}.tabs--segmented.tabs--disabled{border:none;--tabs-headers-segmented-background-color:var(--tc-layer-secondary);--tabs-headers-segmented-active-background-color:var(--tc-layer-primary);--tabs-headers-segmented-active-box-shadow:none}.tabs--segmented.tabs--disabled ::slotted(*){color:var(--tc-grey-40);cursor:not-allowed}.tabs--segmented.tabs--disabled ::slotted(.active){color:var(--tc-grey-50)}.tabs--segmented.tabs--disabled.dark,.tabs--segmented.tabs--disabled.dark-gray{--tabs-headers-segmented-background-color:var(--tc-layer-secondary-dark);--tabs-headers-segmented-active-background-color:var(--tc-layer-primary-dark)}.tabs--segmented.tabs--disabled.dark ::slotted(*),.tabs--segmented.tabs--disabled.dark-gray ::slotted(*){color:var(--tc-grey-40-dark)}.tabs--segmented.tabs--disabled.dark ::slotted(.active),.tabs--segmented.tabs--disabled.dark-gray ::slotted(.active){color:var(--tc-grey-50-dark)}.tabs--segmented::before{content:\"\";position:absolute;top:0.25rem;bottom:0.25rem;left:0;z-index:0;border-radius:1.563rem;width:var(--active-width);transform:translateX(var(--active-x-pos));transition:var(--active-transition);background:var(--tabs-headers-segmented-active-background-color);box-shadow:var(--tabs-headers-segmented-active-box-shadow)}.tabs--segmented ::slotted(*){font:var(--tabs-headers-segmended-item-font);line-height:1.5rem;z-index:1;position:relative;border:none;padding:var(--tabs-headers-segmented-item-padding) !important;margin:var(--tabs-headers-segmented-item-margin) !important;border-radius:1.563rem;display:flex;flex:1;justify-content:center}.tabs--segmented.mobile ::slotted(*){font:500 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:-0.003125rem;font-weight:500;padding:0.25rem 1.5rem !important;margin:0.188rem 0 !important;line-height:1.25rem}.tabs--segmented.square{--tabs-headers-segmented-background-color:rgba(var(--tabs-headers-square-base-rgb), 0.16);--tabs-headers-segmented-border-color:transparent;height:4.75rem;border-radius:0.375rem;padding:0}.tabs--segmented.square::before{--tabs-headers-segmented-active-box-shadow:none;position:absolute;top:0;bottom:0;left:-0.0625rem;border-radius:0}.tabs--segmented.square ::slotted(*){--tabs-headers-segmented-item-padding:0;--tabs-headers-segmented-item-margin:0;border-radius:0;height:100%;align-items:center}.tabs--segmented.square ::slotted(*)::after{content:\"\";background-color:rgba(var(--tabs-headers-square-base-rgb), 0.2);position:absolute;top:0.375rem;bottom:0.375rem;right:0;width:0.0625rem}.tabs--segmented.square ::slotted(:hover){background-color:rgba(var(--tabs-headers-square-base-rgb), 0.24)}.tabs--segmented.square ::slotted(:first-child){border-radius:0.3125rem 0 0 0.3125rem}.tabs--segmented.square ::slotted(:last-child){border-radius:0 0.3125rem 0.3125rem 0}.tabs--segmented.square ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.125rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color)}.tabs--segmented.square ::slotted(:focus-visible)::after{display:none}.tabs--segmented.square ::slotted(.active)::after,.tabs--segmented.square ::slotted(:last-child)::after{display:none}.tabs--segmented.netflix{height:2.75rem;gap:0.5rem;overflow-y:hidden}.tabs--segmented.netflix ::slotted(*){flex-direction:row-reverse;align-items:center;justify-content:center;gap:0.5rem}.tabs--segmented.netflix ::slotted(:focus-visible){outline:0.125rem solid var(--tc-blue-40);outline-offset:-0.0625rem;transition:outline 0s;outline-color:var(--tabs-headers-focus-outline-color);border-radius:1.563rem}.tabs ::slotted(.no-underline){border-bottom:none}";
|
|
9
9
|
const TetTabHeaderStyle0 = tetTabHeaderCss;
|
|
10
10
|
|
|
11
11
|
const TetTabHeader = class {
|
|
@@ -18,6 +18,9 @@ const TetTabHeader = class {
|
|
|
18
18
|
this.sizing = 'web';
|
|
19
19
|
this.defaultTab = 0;
|
|
20
20
|
this.segmented = false;
|
|
21
|
+
this.disabled = false;
|
|
22
|
+
this.mode = 'tab-header';
|
|
23
|
+
this.accessibilityLabel = '';
|
|
21
24
|
this.hideHeaderUnderline = false;
|
|
22
25
|
this.hideActiveHeaderUnderline = false;
|
|
23
26
|
this.autoplayDelay = 0;
|
|
@@ -257,6 +260,12 @@ const TetTabHeader = class {
|
|
|
257
260
|
get isScrollableType() {
|
|
258
261
|
return this.type === 'pill' || this.type === 'square-detached';
|
|
259
262
|
}
|
|
263
|
+
get isSwitchMode() {
|
|
264
|
+
return this.mode === 'switch';
|
|
265
|
+
}
|
|
266
|
+
get isSwitchDisabled() {
|
|
267
|
+
return this.isSwitchMode && this.disabled;
|
|
268
|
+
}
|
|
260
269
|
cleanupTabListeners() {
|
|
261
270
|
this.tabHeaders?.forEach((tab) => {
|
|
262
271
|
const listeners = this.tabListeners.get(tab);
|
|
@@ -358,6 +367,30 @@ const TetTabHeader = class {
|
|
|
358
367
|
this.initAnimationObserver();
|
|
359
368
|
}
|
|
360
369
|
}
|
|
370
|
+
onDisabledChange() {
|
|
371
|
+
this.initTabHeaders();
|
|
372
|
+
}
|
|
373
|
+
setTabAccessibility(tab, index, active) {
|
|
374
|
+
const disabled = this.isSwitchMode && (this.isSwitchDisabled || tab.classList.contains('disabled'));
|
|
375
|
+
tab.setAttribute('tabIndex', `${active && !disabled ? '0' : '-1'}`);
|
|
376
|
+
if (this.isSwitchMode) {
|
|
377
|
+
tab.setAttribute('role', 'radio');
|
|
378
|
+
tab.setAttribute('aria-checked', `${active}`);
|
|
379
|
+
if (disabled) {
|
|
380
|
+
tab.setAttribute('aria-disabled', 'true');
|
|
381
|
+
}
|
|
382
|
+
else {
|
|
383
|
+
tab.removeAttribute('aria-disabled');
|
|
384
|
+
}
|
|
385
|
+
tab.removeAttribute('aria-selected');
|
|
386
|
+
tab.removeAttribute('aria-controls');
|
|
387
|
+
return;
|
|
388
|
+
}
|
|
389
|
+
tab.setAttribute('role', 'tab');
|
|
390
|
+
tab.setAttribute('aria-controls', `tabpanel-${index + 1}-${this.idSuffix}`);
|
|
391
|
+
tab.setAttribute('aria-selected', `${active}`);
|
|
392
|
+
tab.removeAttribute('aria-checked');
|
|
393
|
+
}
|
|
361
394
|
/**
|
|
362
395
|
* Initializes tab headers.
|
|
363
396
|
*/
|
|
@@ -366,13 +399,10 @@ const TetTabHeader = class {
|
|
|
366
399
|
this.tabHeaders = Array.from(this.element.children);
|
|
367
400
|
this.tabHeadersNotDisabled = [];
|
|
368
401
|
this.tabHeaders.forEach((tab, index) => {
|
|
369
|
-
tab.setAttribute('role', 'tab');
|
|
370
402
|
tab.setAttribute('id', `tab-${index + 1}-${this.idSuffix}`);
|
|
371
|
-
tab.
|
|
372
|
-
const disabled = tab.classList.contains('disabled');
|
|
403
|
+
const disabled = this.isSwitchDisabled || tab.classList.contains('disabled');
|
|
373
404
|
const active = tab.classList.contains('active');
|
|
374
|
-
|
|
375
|
-
tab.setAttribute('aria-selected', `${active}`);
|
|
405
|
+
this.setTabAccessibility(tab, index, active);
|
|
376
406
|
if (!disabled && !this.tabListeners.has(tab)) {
|
|
377
407
|
this.tabHeadersNotDisabled.push(tab);
|
|
378
408
|
const clickHandler = () => {
|
|
@@ -528,10 +558,9 @@ const TetTabHeader = class {
|
|
|
528
558
|
if (this.tabHeaders === undefined) {
|
|
529
559
|
return;
|
|
530
560
|
}
|
|
531
|
-
this.tabHeaders.forEach((tab) => {
|
|
561
|
+
this.tabHeaders.forEach((tab, index) => {
|
|
532
562
|
tab.classList.remove('active');
|
|
533
|
-
|
|
534
|
-
tab.setAttribute('tabIndex', '-1');
|
|
563
|
+
this.setTabAccessibility(tab, index, false);
|
|
535
564
|
const imageActive = tab.querySelector('img.tab-header-image.active');
|
|
536
565
|
if (imageActive) {
|
|
537
566
|
imageActive.style.display = 'none';
|
|
@@ -557,8 +586,7 @@ const TetTabHeader = class {
|
|
|
557
586
|
});
|
|
558
587
|
}
|
|
559
588
|
selectedTab.classList.add('active');
|
|
560
|
-
selectedTab.
|
|
561
|
-
selectedTab.setAttribute('tabIndex', '0');
|
|
589
|
+
this.setTabAccessibility(selectedTab, this.tabHeaders.indexOf(selectedTab), true);
|
|
562
590
|
this.applyPillIconColor();
|
|
563
591
|
const imageActive = selectedTab.querySelector('img.tab-header-image.active');
|
|
564
592
|
if (imageActive) {
|
|
@@ -625,16 +653,17 @@ const TetTabHeader = class {
|
|
|
625
653
|
}
|
|
626
654
|
render() {
|
|
627
655
|
const shouldRenderOverflowGradients = this.showOverflowGradients;
|
|
628
|
-
return (index.h(index.Host, { key: '
|
|
656
|
+
return (index.h(index.Host, { key: '066ac0cb29060dbf7e6b88e0170d2f3cd47c8b76', "data-id-suffix": this.idSuffix }, index.h("div", { key: '8e664aece15cbc58b9c39e2a879f504489e62e8e', class: {
|
|
629
657
|
'tabs': true,
|
|
630
658
|
'tabs--segmented': this.segmented,
|
|
659
|
+
'tabs--disabled': this.isSwitchDisabled,
|
|
631
660
|
'tabs--overflow-left': this.hasOverflowLeft,
|
|
632
661
|
'tabs--overflow-right': this.hasOverflowRight,
|
|
633
662
|
[this.effectivePosition]: true,
|
|
634
663
|
[this.theme]: true,
|
|
635
664
|
[this.sizing]: true,
|
|
636
665
|
[this.type]: !!this.type
|
|
637
|
-
}, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role:
|
|
666
|
+
}, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: this.isSwitchMode ? 'radiogroup' : 'tablist', "aria-label": this.isSwitchMode && this.accessibilityLabel ? this.accessibilityLabel : undefined, "aria-orientation": this.isSwitchMode ? 'horizontal' : undefined, "aria-disabled": this.isSwitchDisabled ? 'true' : undefined }, shouldRenderOverflowGradients && index.h("div", { key: '4c9ae2fbe2bf27d7cc91bbc8ce55c3e9d7469a3b', class: "tabs-gradient tabs-gradient-left", "aria-hidden": "true" }), index.h("slot", { key: '677d35c1979329dc6271f231ca554ca58ed4924f', onSlotchange: () => this.updatePositionClass(), ref: (slot) => (this.tabContainer = slot) }), shouldRenderOverflowGradients && index.h("div", { key: '5a265eba7ef003aa87fe6bdf55ea9f596cbccfa2', class: "tabs-gradient tabs-gradient-right", "aria-hidden": "true" })), index.h("div", { key: '76e09c8fc61c1a6adc5d00224caf73869af66d57', class: {
|
|
638
667
|
'tabs-line': !this.segmented,
|
|
639
668
|
'no-underline': this.hideHeaderUnderline || this.isScrollableType,
|
|
640
669
|
[this.theme]: true
|
|
@@ -643,7 +672,8 @@ const TetTabHeader = class {
|
|
|
643
672
|
static get watchers() { return {
|
|
644
673
|
"hideActiveHeaderUnderline": ["showActiveHeaderUnderline"],
|
|
645
674
|
"autoplayDelay": ["onAutoplayDelayChange"],
|
|
646
|
-
"segmented": ["onSegmentedChange"]
|
|
675
|
+
"segmented": ["onSegmentedChange"],
|
|
676
|
+
"disabled": ["onDisabledChange"]
|
|
647
677
|
}; }
|
|
648
678
|
};
|
|
649
679
|
TetTabHeader.style = TetTabHeaderStyle0;
|
|
@@ -771,7 +771,7 @@
|
|
|
771
771
|
.header__top-left {
|
|
772
772
|
display: flex;
|
|
773
773
|
align-items: center;
|
|
774
|
-
gap: 0.5rem
|
|
774
|
+
gap: 0.5rem;
|
|
775
775
|
min-width: 0;
|
|
776
776
|
flex-wrap: wrap;
|
|
777
777
|
}
|
|
@@ -933,6 +933,9 @@
|
|
|
933
933
|
gap: 0.75rem;
|
|
934
934
|
}
|
|
935
935
|
}
|
|
936
|
+
.selection--before-switch {
|
|
937
|
+
padding-bottom: 0.5rem;
|
|
938
|
+
}
|
|
936
939
|
.selection__dropdown {
|
|
937
940
|
display: block;
|
|
938
941
|
width: 100%;
|
|
@@ -987,6 +990,27 @@
|
|
|
987
990
|
}
|
|
988
991
|
}
|
|
989
992
|
|
|
993
|
+
.segment-switch {
|
|
994
|
+
display: block;
|
|
995
|
+
padding-bottom: 1rem;
|
|
996
|
+
}
|
|
997
|
+
.segment-switch__label {
|
|
998
|
+
padding: 0 0.25rem 0.25rem;
|
|
999
|
+
font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
|
|
1000
|
+
}
|
|
1001
|
+
@media screen and (min-width: 31.25rem) {
|
|
1002
|
+
.segment-switch__label {
|
|
1003
|
+
font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
|
|
1004
|
+
}
|
|
1005
|
+
}
|
|
1006
|
+
.segment-switch__label--disabled {
|
|
1007
|
+
color: var(--snicker-card-text-tertiary);
|
|
1008
|
+
}
|
|
1009
|
+
.segment-switch__block {
|
|
1010
|
+
display: block;
|
|
1011
|
+
width: 100%;
|
|
1012
|
+
}
|
|
1013
|
+
|
|
990
1014
|
.benefits {
|
|
991
1015
|
list-style: none;
|
|
992
1016
|
margin: 0;
|
|
@@ -1086,13 +1110,13 @@
|
|
|
1086
1110
|
overflow-wrap: anywhere;
|
|
1087
1111
|
}
|
|
1088
1112
|
.footer__toggle {
|
|
1089
|
-
font:
|
|
1113
|
+
font: 400 1.125rem/1.75rem "Inter", "Gilroy, Arial, sans-serif";
|
|
1090
1114
|
border: 0;
|
|
1091
1115
|
background: transparent;
|
|
1092
1116
|
border-radius: 0.125rem;
|
|
1093
1117
|
color: var(--snicker-card-toggle-color);
|
|
1094
1118
|
align-items: center;
|
|
1095
|
-
gap: 0
|
|
1119
|
+
gap: 0;
|
|
1096
1120
|
padding: 0;
|
|
1097
1121
|
white-space: nowrap;
|
|
1098
1122
|
cursor: pointer;
|
|
@@ -26,6 +26,7 @@ export class TetSnickerCard {
|
|
|
26
26
|
this.price = undefined;
|
|
27
27
|
this.inlineMessage = undefined;
|
|
28
28
|
this.selectionConfig = undefined;
|
|
29
|
+
this.segmentSwitch = undefined;
|
|
29
30
|
this.count = undefined;
|
|
30
31
|
this.primaryValue = undefined;
|
|
31
32
|
this.secondaryValue = undefined;
|
|
@@ -43,7 +44,8 @@ export class TetSnickerCard {
|
|
|
43
44
|
static INTERACTIVE_CLICK_TAGS = new Set([
|
|
44
45
|
'TET-STEPPER-INPUT',
|
|
45
46
|
'TET-BUTTON',
|
|
46
|
-
'TET-DROPDOWN'
|
|
47
|
+
'TET-DROPDOWN',
|
|
48
|
+
'TET-TAB-HEADER'
|
|
47
49
|
]);
|
|
48
50
|
/** @private Reference to accordion element used for custom toggle. */
|
|
49
51
|
accordionEl;
|
|
@@ -59,6 +61,8 @@ export class TetSnickerCard {
|
|
|
59
61
|
addToCart;
|
|
60
62
|
/** Emitted when remove-from-cart button is clicked. */
|
|
61
63
|
removeFromCart;
|
|
64
|
+
/** Emitted when the segmented switch selection changes. */
|
|
65
|
+
segmentSwitchChange;
|
|
62
66
|
get isSelectedState() {
|
|
63
67
|
return this.selected;
|
|
64
68
|
}
|
|
@@ -242,7 +246,31 @@ export class TetSnickerCard {
|
|
|
242
246
|
const actionLabel = isSelectionAdded
|
|
243
247
|
? (removeButtonLabel ?? t('components-snicker-card-remove-from-cart'))
|
|
244
248
|
: (addButtonLabel ?? t('components-snicker-card-add-to-cart'));
|
|
245
|
-
return (h("div", { class:
|
|
249
|
+
return (h("div", { class: {
|
|
250
|
+
'selection': true,
|
|
251
|
+
'selection--before-switch': !!this.segmentSwitch
|
|
252
|
+
} }, primaryDropdown && (h("tet-dropdown", { class: "selection__dropdown", theme: this.theme, label: primaryDropdown.label, buttonLabel: primaryDropdown.buttonLabel, options: primaryDropdown.options, disabled: isStateDisabled || (primaryDropdown.disabled ?? false), closeOnSelection: primaryDropdown.closeOnSelection ?? true, onOptionSelected: this.onDropdownOptionSelected('primary') })), secondaryDropdown && (h("tet-dropdown", { class: "selection__dropdown", theme: this.theme, label: secondaryDropdown.label, buttonLabel: secondaryDropdown.buttonLabel, options: secondaryDropdown.options, disabled: isStateDisabled || (secondaryDropdown.disabled ?? false), closeOnSelection: secondaryDropdown.closeOnSelection ?? true, onOptionSelected: this.onDropdownOptionSelected('secondary') })), stepper && (h("tet-stepper-input", { class: "selection__stepper", theme: this.theme, disabled: isStateDisabled, value: initialStepperValue, displayMode: this.isDesktopResolution ? 'input' : 'text', min: stepper.min, max: stepper.max, step: stepper.step ?? 1, accessibilityLabel: stepper.label, onInputValueChanged: this.onSelectionCounterValueChange })), !isSelectionAdded && (h("tet-button", { class: "selection__button", onClick: this.onSelectionAdd, size: "medium", type: "primary", theme: this.theme, disabled: isStateDisabled, iconName: "tc-cart-outline", iconPosition: "left", accessibilityLabel: actionLabel }, actionLabel)), isSelectionAdded && (h("tet-button", { class: "selection__button selection__button--in-cart selection__button--mobile", onClick: this.onSelectionRemove, size: "medium", type: "secondary", theme: this.theme, disabled: isStateDisabled, iconName: "tc-trash", iconPosition: "left", accessibilityLabel: actionLabel }, actionLabel)), isSelectionAdded && (h("tet-button", { class: "selection__button selection__button--in-cart selection__button--desktop", onClick: this.onSelectionRemove, size: "medium", type: "primary", theme: this.theme, disabled: isStateDisabled, iconName: "tc-trash", iconMode: true, iconPosition: "left", accessibilityLabel: actionLabel, customColorCode: this.theme === 'light' ? '#F7F7F7' : '#18191B', customColorContentTone: this.theme === 'light' ? 'dark' : 'light' }))));
|
|
253
|
+
};
|
|
254
|
+
renderSegmentSwitch = () => {
|
|
255
|
+
if (!this.segmentSwitch) {
|
|
256
|
+
return null;
|
|
257
|
+
}
|
|
258
|
+
const { values, defaultSelected, label } = this.segmentSwitch;
|
|
259
|
+
const initialSelected = defaultSelected ?? values[0];
|
|
260
|
+
const isSegmentSwitchDisabled = this.isDisabledState || this.isUnavailableState;
|
|
261
|
+
return (h("div", { class: "segment-switch" }, h("div", { class: {
|
|
262
|
+
'segment-switch__label': true,
|
|
263
|
+
'segment-switch__label--disabled': isSegmentSwitchDisabled
|
|
264
|
+
} }, label), h("tet-tab-header", { class: "segment-switch__block", theme: this.theme, "default-tab": initialSelected, segmented: true, mode: "switch", accessibilityLabel: label, sizing: this.isDesktopResolution ? 'web' : 'mobile', disabled: isSegmentSwitchDisabled, onTabSelected: (event) => {
|
|
265
|
+
event.stopPropagation();
|
|
266
|
+
if (event.detail.old === undefined || event.detail.old === event.detail.new) {
|
|
267
|
+
return;
|
|
268
|
+
}
|
|
269
|
+
this.segmentSwitchChange.emit({
|
|
270
|
+
value: String(event.detail.new),
|
|
271
|
+
previousValue: String(event.detail.old)
|
|
272
|
+
});
|
|
273
|
+
} }, values.map((value) => (h("button", { "data-name": value }, value))))));
|
|
246
274
|
};
|
|
247
275
|
renderBenefits = () => {
|
|
248
276
|
const benefits = this.benefits ?? [];
|
|
@@ -307,7 +335,11 @@ export class TetSnickerCard {
|
|
|
307
335
|
if (!hasDesktopAccordion) {
|
|
308
336
|
return null;
|
|
309
337
|
}
|
|
310
|
-
return (h("button", { class:
|
|
338
|
+
return (h("button", { class: {
|
|
339
|
+
'footer__toggle': true,
|
|
340
|
+
'tet-link': true,
|
|
341
|
+
[this.theme]: true
|
|
342
|
+
}, onClick: this.onBottomAccordionToggle }, h("span", { class: "footer__toggle-label" }, toggleLabel), h("tet-icon", { theme: this.theme, class: {
|
|
311
343
|
'footer__toggle-icon': true,
|
|
312
344
|
open: this.isAccordionOpen,
|
|
313
345
|
}, type: "primary", name: "chevron-down" })));
|
|
@@ -325,12 +357,14 @@ export class TetSnickerCard {
|
|
|
325
357
|
renderIndicator = () => {
|
|
326
358
|
const indicator = this.indicator;
|
|
327
359
|
if (!indicator) {
|
|
328
|
-
return
|
|
360
|
+
return h("slot", { name: "indicator-label-icon" });
|
|
329
361
|
}
|
|
330
362
|
if (indicator.type === 'checkbox') {
|
|
331
363
|
return (h("tet-checkbox", { class: "header__selector", theme: this.theme, checked: this.isSelectedState, disabled: this.isDisabledState, unavailable: this.isUnavailableState, iconName: indicator.iconName, labelFont: 'lg-inter', label: this.cardTitle, "aria-hidden": true, inert: true, alignCenter: false }, h("slot", { name: "indicator-label-icon", slot: "label-icon" })));
|
|
332
364
|
}
|
|
333
|
-
|
|
365
|
+
else if (indicator.type === 'radio') {
|
|
366
|
+
return (h("tet-radio", { class: "header__selector", theme: this.theme, checked: this.isSelectedState, disabled: this.isDisabledState, unavailable: this.isUnavailableState, iconName: indicator.iconName, label: this.cardTitle, labelFont: 'lg-inter', "aria-hidden": true, inert: true }, h("slot", { name: "indicator-label-icon", slot: "label-icon" })));
|
|
367
|
+
}
|
|
334
368
|
};
|
|
335
369
|
renderHeader = () => {
|
|
336
370
|
const price = this.price;
|
|
@@ -364,7 +398,7 @@ export class TetSnickerCard {
|
|
|
364
398
|
}, type: "primary", name: "chevron-down" }))), h("div", { class: "header__content" }, this.subtitle && h("p", { class: "header__subtitle" }, this.subtitle), hasPrice && (h("div", { class: "header__price-line" }, h("div", { class: "header__price-main" }, pricePrefix && h("span", { class: "header__price-prefix" }, pricePrefix), h("span", { class: "header__price-value" }, displayedPrice), priceSuffix && h("span", { class: "header__price-suffix" }, priceSuffix)), displayedOldPrice && (h("div", { class: "header__old-price" }, displayedOldPrice, priceSuffix ? ` ${priceSuffix}` : '')))), this.description && h("p", { class: "header__description" }, this.description))));
|
|
365
399
|
};
|
|
366
400
|
render() {
|
|
367
|
-
return (h(Host, { key: '
|
|
401
|
+
return (h(Host, { key: '3be442b3f32bb608b25380921cead039211d8ae5' }, h("div", { key: '0d1c48eeef0e7c3565bc9c7f02e404185e1335f1', class: {
|
|
368
402
|
'snicker-card': true,
|
|
369
403
|
[this.theme]: true,
|
|
370
404
|
'snicker-card--hoverable': this.isHoverable,
|
|
@@ -373,7 +407,7 @@ export class TetSnickerCard {
|
|
|
373
407
|
'snicker-card--unavailable': this.isUnavailableState,
|
|
374
408
|
'snicker-card--subscribed': this.isSubscribedState,
|
|
375
409
|
'snicker-card--with-badge': !!this.topBadge
|
|
376
|
-
}, onClick: this.onCardClick }, this.renderTopBadge(), this.renderSubscriptionStrip(), h("tet-accordion", { key: '
|
|
410
|
+
}, onClick: this.onCardClick }, this.renderTopBadge(), this.renderSubscriptionStrip(), h("tet-accordion", { key: 'a1195aa2bfac1a5473e9482e3330c9a689b04d05', ref: (el) => (this.accordionEl = el), class: "accordion", theme: this.theme, isOpen: this.isAccordionOpen, onOpenChanged: this.onAccordionChanged, transparentBackground: true, isHeaderInteractive: false }, h("div", { key: '29f135ef5e3048c39041e2eb5e7d5f62d050c14b', slot: "header", class: "accordion__header" }, this.renderHeader()), h("div", { key: 'c8b6014cc8b98be1186687850f297c25913eacca', class: "accordion__content" }, this.renderInlineMessage(), this.renderSelection(), this.renderSegmentSwitch(), this.renderBenefits(), this.renderPackageItems(), this.renderSubscriptionItems())), this.renderBottomSection())));
|
|
377
411
|
}
|
|
378
412
|
static get is() { return "tet-snicker-card"; }
|
|
379
413
|
static get encapsulation() { return "shadow"; }
|
|
@@ -676,6 +710,27 @@ export class TetSnickerCard {
|
|
|
676
710
|
"text": "Optional selection controls config: dropdowns + stepper + add/remove button."
|
|
677
711
|
}
|
|
678
712
|
},
|
|
713
|
+
"segmentSwitch": {
|
|
714
|
+
"type": "unknown",
|
|
715
|
+
"mutable": false,
|
|
716
|
+
"complexType": {
|
|
717
|
+
"original": "SnickerCardSegmentSwitch",
|
|
718
|
+
"resolved": "SnickerCardSegmentSwitch",
|
|
719
|
+
"references": {
|
|
720
|
+
"SnickerCardSegmentSwitch": {
|
|
721
|
+
"location": "local",
|
|
722
|
+
"path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx",
|
|
723
|
+
"id": "src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx::SnickerCardSegmentSwitch"
|
|
724
|
+
}
|
|
725
|
+
}
|
|
726
|
+
},
|
|
727
|
+
"required": false,
|
|
728
|
+
"optional": true,
|
|
729
|
+
"docs": {
|
|
730
|
+
"tags": [],
|
|
731
|
+
"text": "Optional segmented switch config."
|
|
732
|
+
}
|
|
733
|
+
},
|
|
679
734
|
"count": {
|
|
680
735
|
"type": "number",
|
|
681
736
|
"mutable": false,
|
|
@@ -985,6 +1040,27 @@ export class TetSnickerCard {
|
|
|
985
1040
|
"resolved": "void",
|
|
986
1041
|
"references": {}
|
|
987
1042
|
}
|
|
1043
|
+
}, {
|
|
1044
|
+
"method": "segmentSwitchChange",
|
|
1045
|
+
"name": "segmentSwitchChange",
|
|
1046
|
+
"bubbles": true,
|
|
1047
|
+
"cancelable": true,
|
|
1048
|
+
"composed": true,
|
|
1049
|
+
"docs": {
|
|
1050
|
+
"tags": [],
|
|
1051
|
+
"text": "Emitted when the segmented switch selection changes."
|
|
1052
|
+
},
|
|
1053
|
+
"complexType": {
|
|
1054
|
+
"original": "SnickerCardSegmentChange",
|
|
1055
|
+
"resolved": "SnickerCardSegmentChange",
|
|
1056
|
+
"references": {
|
|
1057
|
+
"SnickerCardSegmentChange": {
|
|
1058
|
+
"location": "local",
|
|
1059
|
+
"path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx",
|
|
1060
|
+
"id": "src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx::SnickerCardSegmentChange"
|
|
1061
|
+
}
|
|
1062
|
+
}
|
|
1063
|
+
}
|
|
988
1064
|
}];
|
|
989
1065
|
}
|
|
990
1066
|
static get methods() {
|
|
@@ -802,6 +802,29 @@
|
|
|
802
802
|
color: var(--tabs-headers-text-disabled-color);
|
|
803
803
|
cursor: not-allowed;
|
|
804
804
|
}
|
|
805
|
+
.tabs--segmented.tabs--disabled {
|
|
806
|
+
border: none;
|
|
807
|
+
--tabs-headers-segmented-background-color: var(--tc-layer-secondary);
|
|
808
|
+
--tabs-headers-segmented-active-background-color: var(--tc-layer-primary);
|
|
809
|
+
--tabs-headers-segmented-active-box-shadow: none;
|
|
810
|
+
}
|
|
811
|
+
.tabs--segmented.tabs--disabled ::slotted(*) {
|
|
812
|
+
color: var(--tc-grey-40);
|
|
813
|
+
cursor: not-allowed;
|
|
814
|
+
}
|
|
815
|
+
.tabs--segmented.tabs--disabled ::slotted(.active) {
|
|
816
|
+
color: var(--tc-grey-50);
|
|
817
|
+
}
|
|
818
|
+
.tabs--segmented.tabs--disabled.dark, .tabs--segmented.tabs--disabled.dark-gray {
|
|
819
|
+
--tabs-headers-segmented-background-color: var(--tc-layer-secondary-dark);
|
|
820
|
+
--tabs-headers-segmented-active-background-color: var(--tc-layer-primary-dark);
|
|
821
|
+
}
|
|
822
|
+
.tabs--segmented.tabs--disabled.dark ::slotted(*), .tabs--segmented.tabs--disabled.dark-gray ::slotted(*) {
|
|
823
|
+
color: var(--tc-grey-40-dark);
|
|
824
|
+
}
|
|
825
|
+
.tabs--segmented.tabs--disabled.dark ::slotted(.active), .tabs--segmented.tabs--disabled.dark-gray ::slotted(.active) {
|
|
826
|
+
color: var(--tc-grey-50-dark);
|
|
827
|
+
}
|
|
805
828
|
.tabs--segmented::before {
|
|
806
829
|
content: "";
|
|
807
830
|
position: absolute;
|