@tet/tet-components 1.4.75-testing → 1.4.76-staging

package/dist/esm/tet-compare-card-v3.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-aac31bd2.js';
-import './http-codes-1927ea00.js';
-import { p as productComparison } from './product-comparison-dd90c721.js';
+import { r as registerInstance, c as createEvent, h } from './index-e933a7d2.js';
+import './http-codes-cf0086d4.js';
+import { p as productComparison } from './product-comparison-cb8955f6.js';
 
-const tetCompareCardV3Css = ":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)}:root{--tet-link-color:var(--tc-text-primary);--tet-link-color-hover:var(--tc-text-secondary);--tet-link-color-active:var(--tc-text-tertiary);--tet-link-color-focus:var(--tc-blue-40);--tet-link-color-disabled:var(--tc-button-text-inverse-disabled);--tet-link-secondary-color:var(--tc-text-secondary);--tet-link-secondary-color-hover:var(--tc-text-primary)}.tet-link,.tet-link__arrow{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;color:var(--tet-link-color);position:relative;line-height:1.5rem;cursor:pointer}.tet-link.dark,.tet-link__arrow.dark{--tet-link-color:var(--tc-text-primary-dark);--tet-link-color-hover:var(--tc-text-secondary-dark);--tet-link-color-active:var(--tc-text-tertiary-dark);--tet-link-color-focus:var(--tc-blue-40-dark);--tet-link-color-disabled:var(--tc-button-text-inverse-disabled-dark);--tet-link-secondary-color:var(--tc-text-secondary-dark);--tet-link-secondary-color-hover:var(--tc-text-primary-dark)}.tet-link.tet-link--secondary,.tet-link__arrow.tet-link--secondary{--tet-link-color:var(--tet-link-secondary-color);--tet-link-color-hover:var(--tet-link-secondary-color-hover)}.tet-link tet-icon,.tet-link__arrow tet-icon{--icon-color:var(--tet-link-color)}.tet-link:hover,.tet-link__arrow:hover{color:var(--tet-link-color-hover)}.tet-link:hover tet-icon,.tet-link__arrow:hover tet-icon{--icon-color:var(--tet-link-color-hover)}.tet-link:active,.tet-link__arrow:active{color:var(--tet-link-color-active)}.tet-link:active tet-icon,.tet-link__arrow:active tet-icon{--icon-color:var(--tet-link-color-active)}.tet-link:focus-visible,.tet-link__arrow:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:0.125rem;transition:outline 0s;outline-color:var(--tet-link-color-focus);border-radius:0.125rem}.tet-link.disabled,.tet-link__arrow.disabled{color:var(--tet-link-color-disabled);pointer-events:none;cursor:auto}.tet-link.disabled tet-icon,.tet-link__arrow.disabled tet-icon{--icon-color:var(--tet-link-color-disabled)}.tet-link.disabled:focus-visible,.tet-link__arrow.disabled:focus-visible{outline:none}.tet-link tet-icon,.tet-link__arrow tet-icon{padding-left:0.25rem;padding-right:0.25rem;--icon-container-display:inline-block}.tet-link__arrow{padding-right:1.5rem}.tet-link__arrow::after{content:\"-->\";position:absolute;white-space:nowrap;display:inline-block;text-decoration:none;padding-left:0.25rem;letter-spacing:initial;transition:all 0.15s ease-in}.tet-link__arrow:hover::after{padding-left:0.375rem}:host{--compare-card-top-part-background-color:var(--tc-layer-permanent-yellow);--compare-card-bottom-part-background-color:var(--tc-layer-primary);--compare-card-text-permanent-color:var(--tc-text-permanent-black);--compare-card-text-color:var(--tc-text-primary);--compare-card-text-tertiary-color:var(--tc-text-tertiary);--compare-card-best-choice-background-color:var(--tc-layer-inverse-primary);--compare-card-best-choice-text-color:var(--tc-text-adaptive-yellow-to-black);--compare-card-separator-border-color:var(--tc-border-tertiary);--compare-card-chevron-container-background-color:var(--tc-layer-tertiary);--compare-card-chevron-container-hover-background-color:var(--tc-layer-inverse-primary);--compare-card-chevron-container-active-background-color:var(--tc-layer-inverse-tertiary);--compare-card-chevron-icon-color:var(--tc-grey-60);--compare-card-chevron-icon-hover-color:var(--tc-icon-inverse-primary);--compare-card-interactive-element-hover-background-color:var(--tc-layer-secondary);--compare-card-interactive-element-active-background-color:var(--tc-layer-tertiary);--compare-card-focus-outline-color:var(--tc-blue-40);--compare-card-box-shadow:var(--tc-elevation-three);--compare-card-border-radius:1rem;--compare-card-min-width:20.5rem;--compare-card-max-width:100%;--compare-card-radio-container-background-color:var(--tc-product-card-menu-default);--compare-card-radio-container-background-hover-color:var(--tc-product-card-menu-hover);--compare-card-radio-container-background-pressed-color:var(--tc-product-card-menu-pressed);--compare-card-radio-container-background-active-color:var(--tc-product-card-menu-active);--compare-card-radio-container-border-color:var(--tc-product-card-menu-border-default);--compare-card-radio-container-border-hover-color:var(--tc-product-card-menu-border-hover);--compare-card-radio-container-border-pressed-color:var(--tc-product-card-menu-border-pressed);--compare-card-radio-container-border-active-color:var(--tc-product-card-menu-border-active);display:inline-block;width:100%;min-width:var(--compare-card-min-width);max-width:var(--compare-card-max-width)}:host([theme=dark]){--compare-card-bottom-part-background-color:var(--tc-layer-primary-dark);--compare-card-text-color:var(--tc-text-primary-dark);--compare-card-text-tertiary-color:var(--tc-text-tertiary-dark);--compare-card-best-choice-background-color:var(--tc-layer-inverse-primary-dark);--compare-card-best-choice-text-color:var(--tc-text-adaptive-yellow-to-black-dark);--compare-card-separator-border-color:var(--tc-border-tertiary-dark);--compare-card-chevron-container-background-color:var(--tc-layer-tertiary-dark);--compare-card-chevron-container-hover-background-color:var(--tc-layer-inverse-primary-dark);--compare-card-chevron-container-active-background-color:var(--tc-layer-inverse-tertiary-dark);--compare-card-chevron-icon-color:var(--tc-grey-60-dark);--compare-card-chevron-icon-hover-color:var(--tc-icon-inverse-primary-dark);--compare-card-interactive-element-hover-background-color:var(--tc-layer-secondary-dark);--compare-card-interactive-element-active-background-color:var(--tc-layer-tertiary-dark);--compare-card-focus-outline-color:var(--tc-blue-40-dark);--compare-card-box-shadow:var(--tc-elevation-three-dark);--compare-card-radio-container-background-color:var(--tc-product-card-menu-default-dark);--compare-card-radio-container-background-hover-color:var(--tc-product-card-menu-hover-dark);--compare-card-radio-container-background-pressed-color:var(--tc-product-card-menu-pressed-dark);--compare-card-radio-container-background-active-color:var(--tc-product-card-menu-active-dark);--compare-card-radio-container-border-color:var(--tc-product-card-menu-border-default-dark);--compare-card-radio-container-border-hover-color:var(--tc-product-card-menu-border-hover-dark);--compare-card-radio-container-border-pressed-color:var(--tc-product-card-menu-border-pressed-dark);--compare-card-radio-container-border-active-color:var(--tc-product-card-menu-border-active-dark)}.card{display:inline-flex;flex-direction:column;position:relative;width:100%;height:100%;border-radius:var(--compare-card-border-radius);box-shadow:var(--compare-card-box-shadow)}.card__placeholder{--placeholder-border-radius:var(--compare-card-border-radius)}.card .content{padding:1.5rem 1rem}.card .content__top{background-color:var(--compare-card-top-part-background-color);color:var(--compare-card-text-permanent-color);border-top-left-radius:var(--compare-card-border-radius);border-top-right-radius:var(--compare-card-border-radius)}.card .content__bottom{background-color:var(--compare-card-bottom-part-background-color);color:var(--compare-card-text-color);border-bottom-left-radius:var(--compare-card-border-radius);border-bottom-right-radius:var(--compare-card-border-radius)}@media screen and (min-width: 31.25rem){.card .content{padding:1.5rem 2rem}}@media screen and (min-width: 80rem){.card .content{padding:2rem}}.card .best-choice-title{font:500 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\";position:absolute;align-self:center;visibility:hidden;white-space:nowrap;top:-2.5rem;max-width:18.5rem;padding:0.5rem 1rem;border-radius:1rem 1rem 0 0;background-color:var(--compare-card-best-choice-background-color);color:var(--compare-card-best-choice-text-color);overflow:hidden;text-overflow:ellipsis}.card .best-choice-title.active{visibility:visible}.card .title{font:600 1.75rem/2rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}.card .price-wrapper{display:flex;flex-direction:column;overflow:hidden;gap:0.75rem}.card .price-wrapper .price-container{display:flex;align-items:flex-end;gap:0.25rem;align-self:stretch}.card .price-wrapper .price-container__price{font:600 3.5rem/4rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}@media screen and (min-width: 31.25rem){.card .price-wrapper .price-container__price{font:600 5rem/5.5rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}}@media screen and (min-width: 90rem){.card .price-wrapper .price-container__price{font:600 6rem/6.5rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}}.card .price-wrapper .price-container__currency{font:600 1.25rem/1.5rem \"Gilroy\", \"Gilroy, Arial, sans-serif\";margin-bottom:0.75rem}@media screen and (min-width: 31.25rem){.card .price-wrapper .price-container__currency{font:600 1.5rem/1.75rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}}.card .price-wrapper .price-container__description{font:400 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.card .button{--button-width:100%;margin:0.75rem 0 1rem;width:100%}.card .secondary-link{font:400 0.75rem/1rem \"Inter\", \"Gilroy, Arial, sans-serif\";width:fit-content;margin:0 auto}.card .bonuses,.card .benefits{display:flex;flex-direction:column;gap:0.75rem}.card .bonuses__title,.card .benefits__title{font:400 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\";padding:0.375rem 0;color:var(--compare-card-text-tertiary-color);border-bottom:0.0625rem solid var(--compare-card-separator-border-color)}.card .bonuses .benefits__title,.card .benefits .benefits__title{margin:1.5rem 0 0.75rem}.card .bonuses__bonus-container .bonus,.card .bonuses__bonus-container .benefit,.card .bonuses__benefit-container .bonus,.card .bonuses__benefit-container .benefit,.card .benefits__bonus-container .bonus,.card .benefits__bonus-container .benefit,.card .benefits__benefit-container .bonus,.card .benefits__benefit-container .benefit{font:500 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\";display:flex;align-items:center;width:100%;gap:0.75rem;padding:0.375rem 0.5rem;border-radius:0.5rem;appearance:none;-webkit-appearance:none;background:none;border:none;margin:0;color:inherit;text-align:start;text-decoration:none;--bonus-chevron-container-state-bg:var(--compare-card-chevron-container-background-color);--bonus-chevron-icon-state-color:var(--compare-card-chevron-icon-color)}.card .bonuses__bonus-container .bonus--interactive:hover,.card .bonuses__bonus-container .benefit--interactive:hover,.card .bonuses__benefit-container .bonus--interactive:hover,.card .bonuses__benefit-container .benefit--interactive:hover,.card .benefits__bonus-container .bonus--interactive:hover,.card .benefits__bonus-container .benefit--interactive:hover,.card .benefits__benefit-container .bonus--interactive:hover,.card .benefits__benefit-container .benefit--interactive:hover{--bonus-chevron-container-state-bg:var(--compare-card-chevron-container-hover-background-color);--bonus-chevron-icon-state-color:var(--compare-card-chevron-icon-hover-color);background-color:var(--compare-card-interactive-element-hover-background-color)}.card .bonuses__bonus-container .bonus--interactive:active,.card .bonuses__bonus-container .benefit--interactive:active,.card .bonuses__benefit-container .bonus--interactive:active,.card .bonuses__benefit-container .benefit--interactive:active,.card .benefits__bonus-container .bonus--interactive:active,.card .benefits__bonus-container .benefit--interactive:active,.card .benefits__benefit-container .bonus--interactive:active,.card .benefits__benefit-container .benefit--interactive:active{--bonus-chevron-container-state-bg:var(--compare-card-chevron-container-active-background-color);--bonus-chevron-icon-state-color:var(--compare-card-chevron-icon-hover-color);background-color:var(--compare-card-interactive-element-active-background-color)}.card .bonuses__bonus-container .bonus--interactive:focus-visible,.card .bonuses__bonus-container .benefit--interactive:focus-visible,.card .bonuses__benefit-container .bonus--interactive:focus-visible,.card .bonuses__benefit-container .benefit--interactive:focus-visible,.card .benefits__bonus-container .bonus--interactive:focus-visible,.card .benefits__bonus-container .benefit--interactive:focus-visible,.card .benefits__benefit-container .bonus--interactive:focus-visible,.card .benefits__benefit-container .benefit--interactive:focus-visible{outline:0.125rem solid var(--compare-card-focus-outline-color)}.card .bonuses__bonus-container .bonus--interactive:is(:hover,:active) .bonus__chevron-icon-container,.card .bonuses__bonus-container .bonus--interactive:is(:hover,:active) .benefit__chevron-icon-container,.card .bonuses__bonus-container .benefit--interactive:is(:hover,:active) .bonus__chevron-icon-container,.card .bonuses__bonus-container .benefit--interactive:is(:hover,:active) .benefit__chevron-icon-container,.card .bonuses__benefit-container .bonus--interactive:is(:hover,:active) .bonus__chevron-icon-container,.card .bonuses__benefit-container .bonus--interactive:is(:hover,:active) .benefit__chevron-icon-container,.card .bonuses__benefit-container .benefit--interactive:is(:hover,:active) .bonus__chevron-icon-container,.card .bonuses__benefit-container .benefit--interactive:is(:hover,:active) .benefit__chevron-icon-container,.card .benefits__bonus-container .bonus--interactive:is(:hover,:active) .bonus__chevron-icon-container,.card .benefits__bonus-container .bonus--interactive:is(:hover,:active) .benefit__chevron-icon-container,.card .benefits__bonus-container .benefit--interactive:is(:hover,:active) .bonus__chevron-icon-container,.card .benefits__bonus-container .benefit--interactive:is(:hover,:active) .benefit__chevron-icon-container,.card .benefits__benefit-container .bonus--interactive:is(:hover,:active) .bonus__chevron-icon-container,.card .benefits__benefit-container .bonus--interactive:is(:hover,:active) .benefit__chevron-icon-container,.card .benefits__benefit-container .benefit--interactive:is(:hover,:active) .bonus__chevron-icon-container,.card .benefits__benefit-container .benefit--interactive:is(:hover,:active) .benefit__chevron-icon-container{background-color:var(--bonus-chevron-container-state-bg)}.card .bonuses__bonus-container .bonus--interactive:is(:hover,:active) .bonus__icon--chevron,.card .bonuses__bonus-container .bonus--interactive:is(:hover,:active) .benefit__icon--chevron,.card .bonuses__bonus-container .benefit--interactive:is(:hover,:active) .bonus__icon--chevron,.card .bonuses__bonus-container .benefit--interactive:is(:hover,:active) .benefit__icon--chevron,.card .bonuses__benefit-container .bonus--interactive:is(:hover,:active) .bonus__icon--chevron,.card .bonuses__benefit-container .bonus--interactive:is(:hover,:active) .benefit__icon--chevron,.card .bonuses__benefit-container .benefit--interactive:is(:hover,:active) .bonus__icon--chevron,.card .bonuses__benefit-container .benefit--interactive:is(:hover,:active) .benefit__icon--chevron,.card .benefits__bonus-container .bonus--interactive:is(:hover,:active) .bonus__icon--chevron,.card .benefits__bonus-container .bonus--interactive:is(:hover,:active) .benefit__icon--chevron,.card .benefits__bonus-container .benefit--interactive:is(:hover,:active) .bonus__icon--chevron,.card .benefits__bonus-container .benefit--interactive:is(:hover,:active) .benefit__icon--chevron,.card .benefits__benefit-container .bonus--interactive:is(:hover,:active) .bonus__icon--chevron,.card .benefits__benefit-container .bonus--interactive:is(:hover,:active) .benefit__icon--chevron,.card .benefits__benefit-container .benefit--interactive:is(:hover,:active) .bonus__icon--chevron,.card .benefits__benefit-container .benefit--interactive:is(:hover,:active) .benefit__icon--chevron{--icon-color:var(--bonus-chevron-icon-state-color)}.card .bonuses__bonus-container .bonus__text,.card .bonuses__bonus-container .benefit__text,.card .bonuses__benefit-container .bonus__text,.card .bonuses__benefit-container .benefit__text,.card .benefits__bonus-container .bonus__text,.card .benefits__bonus-container .benefit__text,.card .benefits__benefit-container .bonus__text,.card .benefits__benefit-container .benefit__text{flex:1 0 0;text-align:start}.card .bonuses__bonus-container .bonus__icon,.card .bonuses__bonus-container .benefit__icon,.card .bonuses__benefit-container .bonus__icon,.card .bonuses__benefit-container .benefit__icon,.card .benefits__bonus-container .bonus__icon,.card .benefits__bonus-container .benefit__icon,.card .benefits__benefit-container .bonus__icon,.card .benefits__benefit-container .benefit__icon{--icon-container-display:flex;--icon-size:1.5rem}.card .bonuses__bonus-container .bonus__icon--chevron,.card .bonuses__bonus-container .benefit__icon--chevron,.card .bonuses__benefit-container .bonus__icon--chevron,.card .bonuses__benefit-container .benefit__icon--chevron,.card .benefits__bonus-container .bonus__icon--chevron,.card .benefits__bonus-container .benefit__icon--chevron,.card .benefits__benefit-container .bonus__icon--chevron,.card .benefits__benefit-container .benefit__icon--chevron{--icon-size:1rem;--icon-color:var(--compare-card-chevron-icon-color)}.card .bonuses__bonus-container .bonus__chevron-icon-container,.card .bonuses__bonus-container .benefit__chevron-icon-container,.card .bonuses__benefit-container .bonus__chevron-icon-container,.card .bonuses__benefit-container .benefit__chevron-icon-container,.card .benefits__bonus-container .bonus__chevron-icon-container,.card .benefits__bonus-container .benefit__chevron-icon-container,.card .benefits__benefit-container .bonus__chevron-icon-container,.card .benefits__benefit-container .benefit__chevron-icon-container{display:flex;justify-content:center;align-items:center;margin-left:0.125rem;padding:0.125rem;border-radius:50%;background:var(--compare-card-chevron-container-background-color);width:1.25rem;height:1.25rem}.card .bonuses__bonus-container .bonus--inactive,.card .bonuses__bonus-container .benefit--inactive,.card .bonuses__benefit-container .bonus--inactive,.card .bonuses__benefit-container .benefit--inactive,.card .benefits__bonus-container .bonus--inactive,.card .benefits__bonus-container .benefit--inactive,.card .benefits__benefit-container .bonus--inactive,.card .benefits__benefit-container .benefit--inactive{display:none}.card .bonuses__bonus-container .bonus--interactive,.card .bonuses__bonus-container .benefit--interactive,.card .bonuses__benefit-container .bonus--interactive,.card .bonuses__benefit-container .benefit--interactive,.card .benefits__bonus-container .bonus--interactive,.card .benefits__bonus-container .benefit--interactive,.card .benefits__benefit-container .bonus--interactive,.card .benefits__benefit-container .benefit--interactive{cursor:pointer}.card .bonuses__bonus-container .benefit+.dropdown,.card .bonuses__benefit-container .benefit+.dropdown,.card .benefits__bonus-container .benefit+.dropdown,.card .benefits__benefit-container .benefit+.dropdown{margin-top:0.375rem}.card .bonuses__bonus-container .benefit+.radio-container,.card .bonuses__benefit-container .benefit+.radio-container,.card .benefits__bonus-container .benefit+.radio-container,.card .benefits__benefit-container .benefit+.radio-container{margin-top:0.75rem}.card .radio-container{display:flex;flex-direction:column;gap:1rem}.card .radio-wrapper{border-radius:0.5rem}.card .radio-wrapper .radio{--radio-container-outline-offset:-0.125rem}.card .radio-wrapper .radio .radio__container--focus-style:has(:focus-visible){border-radius:0.5rem}.card .radio-wrapper .radio .radio__container{padding:1rem 0.75rem;border-radius:0.5rem;border:0.0625rem solid var(--compare-card-radio-container-border-color);background-color:var(--compare-card-radio-container-background-color);cursor:pointer}.card .radio-wrapper:not(.disabled):not(.unavailable) .radio__container:hover{background-color:var(--compare-card-radio-container-background-hover-color)}.card .radio-wrapper:not(.disabled):not(.unavailable) .radio__container:active{background-color:var(--compare-card-radio-container-background-pressed-color)}.card .radio-wrapper:not(.error):not(.disabled):not(.unavailable) .radio__container:hover{border-color:var(--compare-card-radio-container-border-hover-color)}.card .radio-wrapper:not(.error):not(.disabled):not(.unavailable) .radio__container:active{border-color:var(--compare-card-radio-container-border-pressed-color)}.card .radio-wrapper:not(.disabled):not(.unavailable) .radio[checked]:not([checked=false]) .radio__container{border-color:var(--compare-card-radio-container-border-active-color);background-color:var(--compare-card-radio-container-background-active-color)}.card .switch-wrapper{border-radius:0.5rem}.card .switch-wrapper .switch{--switch-container-outline-offset:-0.125rem}.card .switch-wrapper .switch-label{display:flex;align-items:center;gap:0.75rem;width:100%;text-align:start}.card .switch-wrapper .switch::part(switch-container){padding:0.375rem 0.5rem;border-radius:0.5rem;cursor:pointer}.card .switch-wrapper:not(.disabled) .switch::part(switch-container):hover{background-color:var(--compare-card-interactive-element-hover-background-color)}.card .switch-wrapper:not(.disabled) .switch::part(switch-container):active{background-color:var(--compare-card-interactive-element-active-background-color)}";
+const tetCompareCardV3Css = ":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)}:root{--tet-link-color:var(--tc-text-primary);--tet-link-color-hover:var(--tc-text-secondary);--tet-link-color-active:var(--tc-text-tertiary);--tet-link-color-focus:var(--tc-blue-40);--tet-link-color-disabled:var(--tc-button-text-inverse-disabled);--tet-link-secondary-color:var(--tc-text-secondary);--tet-link-secondary-color-hover:var(--tc-text-primary)}.tet-link,.tet-link__arrow{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font;color:var(--tet-link-color);position:relative;line-height:1.5rem;cursor:pointer}.tet-link.dark,.tet-link__arrow.dark{--tet-link-color:var(--tc-text-primary-dark);--tet-link-color-hover:var(--tc-text-secondary-dark);--tet-link-color-active:var(--tc-text-tertiary-dark);--tet-link-color-focus:var(--tc-blue-40-dark);--tet-link-color-disabled:var(--tc-button-text-inverse-disabled-dark);--tet-link-secondary-color:var(--tc-text-secondary-dark);--tet-link-secondary-color-hover:var(--tc-text-primary-dark)}.tet-link.tet-link--secondary,.tet-link__arrow.tet-link--secondary{--tet-link-color:var(--tet-link-secondary-color);--tet-link-color-hover:var(--tet-link-secondary-color-hover)}.tet-link tet-icon,.tet-link__arrow tet-icon{--icon-color:var(--tet-link-color)}.tet-link:hover,.tet-link__arrow:hover{color:var(--tet-link-color-hover)}.tet-link:hover tet-icon,.tet-link__arrow:hover tet-icon{--icon-color:var(--tet-link-color-hover)}.tet-link:active,.tet-link__arrow:active{color:var(--tet-link-color-active)}.tet-link:active tet-icon,.tet-link__arrow:active tet-icon{--icon-color:var(--tet-link-color-active)}.tet-link:focus-visible,.tet-link__arrow:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:0.125rem;transition:outline 0s;outline-color:var(--tet-link-color-focus);border-radius:0.125rem}.tet-link.disabled,.tet-link__arrow.disabled{color:var(--tet-link-color-disabled);pointer-events:none;cursor:auto}.tet-link.disabled tet-icon,.tet-link__arrow.disabled tet-icon{--icon-color:var(--tet-link-color-disabled)}.tet-link.disabled:focus-visible,.tet-link__arrow.disabled:focus-visible{outline:none}.tet-link tet-icon,.tet-link__arrow tet-icon{padding-left:0.25rem;padding-right:0.25rem;--icon-container-display:inline-block}.tet-link__arrow{padding-right:1.5rem}.tet-link__arrow::after{content:\"-->\";position:absolute;white-space:nowrap;display:inline-block;text-decoration:none;padding-left:0.25rem;letter-spacing:initial;transition:all 0.15s ease-in}.tet-link__arrow:hover::after{padding-left:0.375rem}:host{--compare-card-top-part-background-color:var(--tc-layer-permanent-yellow);--compare-card-bottom-part-background-color:var(--tc-layer-primary);--compare-card-text-permanent-color:var(--tc-text-black-permanent);--compare-card-text-color:var(--tc-text-primary);--compare-card-text-tertiary-color:var(--tc-text-tertiary);--compare-card-best-choice-background-color:var(--tc-layer-inverse-primary);--compare-card-best-choice-text-color:var(--tc-text-adaptive-yellow-to-black);--compare-card-separator-border-color:var(--tc-border-tertiary);--compare-card-chevron-container-background-color:var(--tc-layer-tertiary);--compare-card-chevron-container-hover-background-color:var(--tc-layer-inverse-primary);--compare-card-chevron-container-active-background-color:var(--tc-layer-inverse-tertiary);--compare-card-chevron-icon-color:var(--tc-grey-60);--compare-card-chevron-icon-hover-color:var(--tc-icon-inverse-primary);--compare-card-interactive-element-hover-background-color:var(--tc-layer-secondary);--compare-card-interactive-element-active-background-color:var(--tc-layer-tertiary);--compare-card-label-background-color:var(--tc-layer-yellow-quaternary);--compare-card-focus-outline-color:var(--tc-blue-40);--compare-card-box-shadow:var(--tc-elevation-three);--compare-card-border-radius:1rem;--compare-card-min-width:20.5rem;--compare-card-max-width:100%;--compare-card-radio-container-background-color:var(--tc-product-card-menu-default);--compare-card-radio-container-background-hover-color:var(--tc-product-card-menu-hover);--compare-card-radio-container-background-pressed-color:var(--tc-product-card-menu-pressed);--compare-card-radio-container-background-active-color:var(--tc-product-card-menu-active);--compare-card-radio-container-border-color:var(--tc-product-card-menu-border-default);--compare-card-radio-container-border-hover-color:var(--tc-product-card-menu-border-hover);--compare-card-radio-container-border-pressed-color:var(--tc-product-card-menu-border-pressed);--compare-card-radio-container-border-active-color:var(--tc-product-card-menu-border-active);display:flex;width:100%;min-width:var(--compare-card-min-width);max-width:var(--compare-card-max-width)}:host([theme=dark]){--compare-card-bottom-part-background-color:var(--tc-layer-primary-dark);--compare-card-text-color:var(--tc-text-primary-dark);--compare-card-text-tertiary-color:var(--tc-text-tertiary-dark);--compare-card-best-choice-background-color:var(--tc-layer-inverse-primary-dark);--compare-card-best-choice-text-color:var(--tc-text-adaptive-yellow-to-black-dark);--compare-card-separator-border-color:var(--tc-border-tertiary-dark);--compare-card-chevron-container-background-color:var(--tc-layer-tertiary-dark);--compare-card-chevron-container-hover-background-color:var(--tc-layer-inverse-primary-dark);--compare-card-chevron-container-active-background-color:var(--tc-layer-inverse-tertiary-dark);--compare-card-chevron-icon-color:var(--tc-grey-60-dark);--compare-card-chevron-icon-hover-color:var(--tc-icon-inverse-primary-dark);--compare-card-interactive-element-hover-background-color:var(--tc-layer-secondary-dark);--compare-card-interactive-element-active-background-color:var(--tc-layer-tertiary-dark);--compare-card-focus-outline-color:var(--tc-blue-40-dark);--compare-card-box-shadow:var(--tc-elevation-three-dark);--compare-card-radio-container-background-color:var(--tc-product-card-menu-default-dark);--compare-card-radio-container-background-hover-color:var(--tc-product-card-menu-hover-dark);--compare-card-radio-container-background-pressed-color:var(--tc-product-card-menu-pressed-dark);--compare-card-radio-container-background-active-color:var(--tc-product-card-menu-active-dark);--compare-card-radio-container-border-color:var(--tc-product-card-menu-border-default-dark);--compare-card-radio-container-border-hover-color:var(--tc-product-card-menu-border-hover-dark);--compare-card-radio-container-border-pressed-color:var(--tc-product-card-menu-border-pressed-dark);--compare-card-radio-container-border-active-color:var(--tc-product-card-menu-border-active-dark)}.card{display:inline-flex;flex-direction:column;position:relative;width:100%;height:100%;border-radius:var(--compare-card-border-radius);box-shadow:var(--compare-card-box-shadow)}.card__placeholder{--placeholder-min-height:37rem;--placeholder-border-radius:var(--compare-card-border-radius)}.card .content{padding:1.5rem 1rem}.card .content__top{background-color:var(--compare-card-top-part-background-color);color:var(--compare-card-text-permanent-color);border-top-left-radius:var(--compare-card-border-radius);border-top-right-radius:var(--compare-card-border-radius)}.card .content__bottom{background-color:var(--compare-card-bottom-part-background-color);color:var(--compare-card-text-color);border-bottom-left-radius:var(--compare-card-border-radius);border-bottom-right-radius:var(--compare-card-border-radius);height:100%}@media screen and (min-width: 31.25rem){.card .content{padding:1.5rem 2rem}}@media screen and (min-width: 80rem){.card .content{padding:2rem}}.card .best-choice-title{font:500 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\";display:flex;align-items:center;gap:0.5rem;position:absolute;align-self:center;visibility:hidden;white-space:nowrap;top:-2.5rem;max-width:18.5rem;padding:0.5rem 1.25rem;border-radius:1rem 1rem 0 0;background-color:var(--compare-card-best-choice-background-color);color:var(--compare-card-best-choice-text-color);overflow:hidden;text-overflow:ellipsis}.card .best-choice-title__icon{--icon-container-display:flex;--icon-size:1.375rem;--icon-color:var(--compare-card-best-choice-text-color)}.card .best-choice-title.active{visibility:visible}.card .title{font:600 1.75rem/2rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}.card .price-wrapper{display:flex;flex-direction:column;overflow:hidden;gap:0.75rem}.card .price-wrapper .price-container{display:flex;flex-direction:column}.card .price-wrapper .price-container__price-group{display:inline-flex;align-items:flex-end;flex-wrap:nowrap;white-space:nowrap;gap:0.25rem}.card .price-wrapper .price-container__price{font:600 3.5rem/4rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}@media screen and (min-width: 31.25rem){.card .price-wrapper .price-container__price{font:600 4rem/4.375rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}}@media screen and (min-width: 64rem){.card .price-wrapper .price-container__price{font:600 5rem/5.5rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}}@media screen and (min-width: 90rem){.card .price-wrapper .price-container__price{font:600 6rem/6.5rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}}.card .price-wrapper .price-container__currency{margin-bottom:0.5rem;font:600 1.25rem/1.5rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}@media screen and (min-width: 64rem){.card .price-wrapper .price-container__currency{font:600 1.5rem/1.75rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}}@media screen and (min-width: 90rem){.card .price-wrapper .price-container__currency{margin-bottom:0.75rem}}.card .price-wrapper .price-container__base-price{font:600 1.5rem/1.75rem \"Gilroy\", \"Gilroy, Arial, sans-serif\";flex:0 0 100%;width:100%;text-decoration-line:line-through}.card .price-wrapper .price-container__description{font:400 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.card .card-label{font:500 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\";overflow:hidden;padding:0.625rem 0.75rem;margin-top:0.75rem;border-radius:0.5rem;background-color:var(--compare-card-label-background-color)}.card .button{--button-width:100%;margin:0.75rem 0 1rem;width:100%}.card .secondary-link{font:400 0.75rem/1rem \"Inter\", \"Gilroy, Arial, sans-serif\";width:fit-content;margin:0 auto}.card .bonuses{display:flex;flex-direction:column;gap:1.5rem}.card .bonuses+.controls{margin-top:1.5rem}.card .bonuses__bonus-container .bonus{font:500 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\";display:flex;align-items:center;width:100%;gap:0.75rem;padding:0.375rem 0.5rem;border-radius:0.5rem;appearance:none;-webkit-appearance:none;background:none;border:none;margin:0;color:inherit;text-align:start;text-decoration:none;--bonus-chevron-container-state-bg:var(--compare-card-chevron-container-background-color);--bonus-chevron-icon-state-color:var(--compare-card-chevron-icon-color)}.card .bonuses__bonus-container .bonus--interactive{cursor:pointer}.card .bonuses__bonus-container .bonus--interactive:hover{--bonus-chevron-container-state-bg:var(--compare-card-chevron-container-hover-background-color);--bonus-chevron-icon-state-color:var(--compare-card-chevron-icon-hover-color);background-color:var(--compare-card-interactive-element-hover-background-color)}.card .bonuses__bonus-container .bonus--interactive:active{--bonus-chevron-container-state-bg:var(--compare-card-chevron-container-active-background-color);--bonus-chevron-icon-state-color:var(--compare-card-chevron-icon-hover-color);background-color:var(--compare-card-interactive-element-active-background-color)}.card .bonuses__bonus-container .bonus--interactive:focus-visible{outline:0.125rem solid var(--compare-card-focus-outline-color)}.card .bonuses__bonus-container .bonus--interactive:is(:hover,:active) .bonus__chevron-icon-container{background-color:var(--bonus-chevron-container-state-bg)}.card .bonuses__bonus-container .bonus--interactive:is(:hover,:active) .bonus__icon--chevron{--icon-color:var(--bonus-chevron-icon-state-color)}.card .bonuses__bonus-container .bonus__text{flex:1 0 0;text-align:start}.card .bonuses__bonus-container .bonus__icon{--icon-container-display:flex;--icon-size:1.5rem}.card .bonuses__bonus-container .bonus__icon--chevron{--icon-size:1rem;--icon-color:var(--compare-card-chevron-icon-color)}.card .bonuses__bonus-container .bonus__chevron-icon-container{display:flex;justify-content:center;align-items:center;margin-left:0.125rem;padding:0.125rem;border-radius:50%;background:var(--compare-card-chevron-container-background-color);width:1.25rem;height:1.25rem}.card .controls+.bonuses{margin-top:1.5rem}.card .section-title{font:400 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\";padding:0.375rem 0;margin-bottom:0.75rem;color:var(--compare-card-text-tertiary-color);border-bottom:0.0625rem solid var(--compare-card-separator-border-color)}.card .radio-container{display:flex;flex-direction:column;gap:1rem}.card .radio-wrapper{border-radius:0.5rem}.card .radio-wrapper .radio{--radio-container-outline-offset:-0.125rem}.card .radio-wrapper .radio .radio__container--focus-style:has(:focus-visible){border-radius:0.5rem}.card .radio-wrapper .radio .radio__container{padding:1rem 0.75rem;border-radius:0.5rem;border:0.0625rem solid var(--compare-card-radio-container-border-color);background-color:var(--compare-card-radio-container-background-color);cursor:pointer}.card .radio-wrapper:not(.disabled):not(.unavailable) .radio__container:hover{background-color:var(--compare-card-radio-container-background-hover-color)}.card .radio-wrapper:not(.disabled):not(.unavailable) .radio__container:active{background-color:var(--compare-card-radio-container-background-pressed-color)}.card .radio-wrapper:not(.error):not(.disabled):not(.unavailable) .radio__container:hover{border-color:var(--compare-card-radio-container-border-hover-color)}.card .radio-wrapper:not(.error):not(.disabled):not(.unavailable) .radio__container:active{border-color:var(--compare-card-radio-container-border-pressed-color)}.card .radio-wrapper:not(.disabled):not(.unavailable) .radio[checked]:not([checked=false]) .radio__container{border-color:var(--compare-card-radio-container-border-active-color);background-color:var(--compare-card-radio-container-background-active-color)}.card .switch-wrapper{border-radius:0.5rem}.card .switch-wrapper .switch{--switch-container-outline-offset:-0.125rem}.card .switch-wrapper .switch-label{display:flex;align-items:center;gap:0.75rem;width:100%;text-align:start}.card .switch-wrapper .switch::part(switch-container){padding:0.375rem 0.5rem;border-radius:0.5rem;cursor:pointer}.card .switch-wrapper:not(.disabled) .switch::part(switch-container):hover{background-color:var(--compare-card-interactive-element-hover-background-color)}.card .switch-wrapper:not(.disabled) .switch::part(switch-container):active{background-color:var(--compare-card-interactive-element-active-background-color)}";
 const TetCompareCardV3Style0 = tetCompareCardV3Css;
 
 const TetCompareCardV3 = class {
@@ -12,37 +12,31 @@ const TetCompareCardV3 = class {
         this.productChanged = createEvent(this, "productChanged", 7);
         this.cardType = 'static';
         this.theme = 'light';
-        this.bestChoice = false;
         this.language = 'lv';
         this.options = [];
-        this.bonuses = [];
-        this.benefits = [];
+        this.toggles = [];
         this.contractTerm = 0;
-        this.bestChoiceText = '';
+        this.controlsTitle = undefined;
+        this.bestChoiceText = undefined;
+        this.bestChoiceIconName = undefined;
         this.currency = '€/mēn.';
         this.secondaryLink = '';
         this.secondaryLinkText = '';
         this.secondaryLinkOpenBlank = false;
         this.buttonTitle = '';
         this.linkOpenBlank = false;
+        this.showControlsFirst = false;
         this.showLoader = true;
-        this.selectedProductCode = '';
+        this.selectedProductId = '';
         this.selectedSwitchKeys = [];
         this.preselectedKeys = [];
-        this.preselectedProductCode = '';
+        this.preselectedProductId = '';
         this.allProductData = {};
         this.preselectedRemountId = 0;
         this.buttonSize = 'large';
     }
     buttonSizeBreakpoint = 1280;
-    /**
-     * WeakMap to store unique IDs for bonuses.
-     */
-    bonusWeakMap = new WeakMap();
-    /**
-     * Counter for unique bonus IDs.
-     */
-    bonusCounter = 0;
+    didEmitCardLoaded = false;
     /**
      * Emitted when the card has loaded.
      */
@@ -55,8 +49,8 @@ const TetCompareCardV3 = class {
      * @param event
      */
     onOptionSelected(event) {
-        const productCode = event.detail.value;
-        this.selectedProductCode = productCode;
+        const productId = event.detail.value;
+        this.selectedProductId = productId;
         this.productChanged.emit();
     }
     async componentWillLoad() {
@@ -67,7 +61,7 @@ const TetCompareCardV3 = class {
             case 'radio': {
                 const selectedOption = this.options.find(option => option.preselected) ?? this.options[0];
                 if (selectedOption) {
-                    this.selectedProductCode = selectedOption.productCode;
+                    this.selectedProductId = this.getOptionId(selectedOption);
                     this.productChanged.emit();
                 }
                 break;
@@ -76,19 +70,25 @@ const TetCompareCardV3 = class {
                 const preselected = this.options.find(option => option.preselected);
                 if (preselected) {
                     this.preselectedKeys = [...preselected.keys ?? []];
-                    this.preselectedProductCode = preselected.productCode;
+                    this.preselectedProductId = this.getOptionId(preselected);
                     this.selectedSwitchKeys = [...preselected.keys ?? []];
-                    this.selectedProductCode = preselected.productCode;
+                    this.selectedProductId = this.getOptionId(preselected);
                     this.productChanged.emit();
                 }
                 break;
             }
             case 'static':
-                this.selectedProductCode = this.options.find(option => option.productCode)?.productCode || '';
+                this.selectedProductId = this.getOptionId(this.options[0]);
                 this.productChanged.emit();
                 break;
         }
     }
+    componentDidRender() {
+        if (!this.showLoader && !this.didEmitCardLoaded) {
+            this.didEmitCardLoaded = true;
+            this.cardLoaded.emit();
+        }
+    }
     onResize() {
         this.syncButtonSize();
     }
@@ -104,33 +104,39 @@ const TetCompareCardV3 = class {
             this.buttonSize = nextButtonSize;
         }
     }
+    getOptionId(option) {
+        return option?.id ?? option?.productCode ?? '';
+    }
+    getOptionById(productId) {
+        return this.options.find(option => this.getOptionId(option) === productId);
+    }
     getSelectionOptions() {
         return this.options.map((option) => ({
-            label: option.label || '',
-            value: option.productCode || '',
-            preselected: option.preselected || false
+            label: option.optionLabel || '',
+            value: this.getOptionId(option),
+            preselected: this.getOptionId(option) === this.selectedProductId,
         }));
     }
     /**
-     * Resolves product code by matching an exact toggle-key combination.
+     * Resolves a product selection key by matching an exact toggle-key combination.
      */
-    getToggledProductCode(keys) {
+    getToggledProductId(keys) {
         const sortedKeys = [...keys].sort((a, b) => a.localeCompare(b)).join(',');
         const found = this.options.find(option => [...option.keys ?? []].sort((a, b) => a.localeCompare(b)).join(',') === sortedKeys);
-        return found ? found.productCode : null;
+        return found ? this.getOptionId(found) : null;
     }
     /**
      * Handles switch interactions and keeps selection in a valid state.
      */
     handleSwitchToggle(key, checked) {
-        const benefit = this.benefits.find(benefit => benefit.toggleKey === key);
+        const toggle = this.toggles.find(toggle => toggle.toggleKey === key);
         let activeKeys = [...this.selectedSwitchKeys];
         if (checked) {
-            if (benefit?.selectAll) {
+            if (toggle?.selectAll) {
                 const fullCombo = this.getFullComboToggleOption();
                 if (fullCombo) {
                     this.selectedSwitchKeys = [...fullCombo.keys ?? []];
-                    this.selectedProductCode = fullCombo.productCode;
+                    this.selectedProductId = this.getOptionId(fullCombo);
                     this.productChanged.emit();
                     return;
                 }
@@ -142,33 +148,33 @@ const TetCompareCardV3 = class {
             const newActiveKeys = activeKeys.filter(k => k !== key);
             if (newActiveKeys.length === 0) {
                 this.selectedSwitchKeys = [...this.preselectedKeys];
-                this.selectedProductCode = this.preselectedProductCode;
+                this.selectedProductId = this.preselectedProductId;
                 this.preselectedRemountId++;
                 this.productChanged.emit();
                 return;
             }
-            const validProductCode = this.getToggledProductCode(newActiveKeys);
-            if (validProductCode) {
+            const validProductId = this.getToggledProductId(newActiveKeys);
+            if (validProductId) {
                 this.selectedSwitchKeys = newActiveKeys;
-                this.selectedProductCode = validProductCode;
+                this.selectedProductId = validProductId;
                 this.productChanged.emit();
                 return;
             }
             this.selectedSwitchKeys = [...this.preselectedKeys];
-            this.selectedProductCode = this.preselectedProductCode;
+            this.selectedProductId = this.preselectedProductId;
             this.preselectedRemountId++;
             this.productChanged.emit();
             return;
         }
         activeKeys = activeKeys.sort((a, b) => a.localeCompare(b));
-        const productCode = this.getToggledProductCode(activeKeys);
+        const productId = this.getToggledProductId(activeKeys);
         this.selectedSwitchKeys = activeKeys;
-        if (productCode) {
-            this.selectedProductCode = productCode;
+        if (productId) {
+            this.selectedProductId = productId;
             this.productChanged.emit();
         }
         else {
-            this.selectedProductCode = this.preselectedProductCode;
+            this.selectedProductId = this.preselectedProductId;
             this.selectedSwitchKeys = [...this.preselectedKeys];
             this.preselectedRemountId++;
             this.productChanged.emit();
@@ -184,52 +190,40 @@ const TetCompareCardV3 = class {
         return this.options.reduce((max, curr) => (curr.keys ?? []).length > (max.keys ?? []).length ? curr : max, this.options[0]);
     }
     async fetchProductComparison() {
-        const productCodes = this.options.map(option => option.productCode).filter(Boolean);
+        const productCodes = Array.from(new Set(this.options
+            .filter(option => !option.productData)
+            .map(option => option.productCode)
+            .filter(Boolean)));
+        let fetchedProductData = {};
         if (productCodes.length) {
             try {
                 const response = await productComparison(productCodes.join(','));
-                this.allProductData = response['products'] || {};
+                fetchedProductData = response['products'] || {};
             }
             catch (e) {
-                this.allProductData = {};
                 console.error(e);
             }
         }
-        else {
-            this.allProductData = {};
-        }
+        this.allProductData = this.options.reduce((productData, option) => {
+            const productId = this.getOptionId(option);
+            const data = option.productCode ? fetchedProductData[option.productCode] : undefined;
+            if (productId && data) {
+                productData[productId] = data;
+            }
+            return productData;
+        }, {});
         this.showLoader = false;
-        this.cardLoaded.emit();
     }
     /**
      * Returns contract term data matching current `contractTerm` prop.
      */
     selectedContractTerm() {
-        const contractTerms = this.allProductData[this.selectedProductCode]?.contractTerms;
+        const contractTerms = this.allProductData[this.selectedProductId]?.contractTerms;
         if (!contractTerms?.length) {
             return;
         }
         return contractTerms.find((contractTerm) => contractTerm.term === this.contractTerm);
     }
-    currentBonuses() {
-        const option = this.options.find(option => option.productCode === this.selectedProductCode);
-        return option?.bonuses ?? [];
-    }
-    allBonuses() {
-        return this.options.flatMap(option => option.bonuses || []);
-    }
-    /**
-     * Returns a stable ID for each bonus object across renders.
-     */
-    getUniqueBonusId(bonus) {
-        const existingId = this.bonusWeakMap.get(bonus);
-        if (existingId) {
-            return existingId;
-        }
-        const nextId = `bonus-${this.bonusCounter++}`;
-        this.bonusWeakMap.set(bonus, nextId);
-        return nextId;
-    }
     /**
      * Chooses semantic element tag from provided data attributes.
      */
@@ -244,19 +238,8 @@ const TetCompareCardV3 = class {
         }
         return 'div';
     }
-    renderBenefit(benefit) {
-        const attributes = Array.isArray(benefit.dataAttributes) ? undefined : benefit.dataAttributes;
-        const isInteractive = Boolean(attributes && Object.keys(attributes).length > 0);
-        const ElementTag = this.getElementTag(attributes);
-        const hasTitle = !!benefit.title;
-        const hasBenefit = !!benefit.icon && !!benefit.name;
-        return (h(Fragment, null, hasTitle && (h("div", { class: "benefits__title" }, benefit.title)), hasBenefit && (h(ElementTag, { class: {
-                'benefit': true,
-                'benefit--interactive': isInteractive,
-            }, key: benefit.toggleKey, ...(attributes || {}) }, h("tet-icon", { theme: this.theme, class: "benefit__icon", name: benefit.icon }), h("span", { class: "benefit__text" }, benefit.name), isInteractive && (h("div", { class: "benefit__chevron-icon-container" }, h("tet-icon", { class: "benefit__icon benefit__icon--chevron", name: "tc-chevron-right-small" })))))));
-    }
-    renderSwitch(benefit) {
-        const { toggleKey } = benefit;
+    renderSwitch(toggle) {
+        const { toggleKey, icon, name } = toggle;
         if (!toggleKey) {
             return null;
         }
@@ -264,85 +247,134 @@ const TetCompareCardV3 = class {
         const switchKey = isPreselected
             ? `${toggleKey}-${this.preselectedRemountId}`
             : toggleKey;
-        const hasTitle = !!benefit.title;
-        return (h(Fragment, null, hasTitle && (h("div", { class: "benefits__title" }, benefit.title)), h("div", { class: "switch-wrapper" }, h("tet-switch", { class: "switch", theme: this.theme, key: switchKey, name: toggleKey, checked: this.selectedSwitchKeys.includes(toggleKey), onCheck: (e) => this.handleSwitchToggle(toggleKey, e.detail.checked), labelPosition: "left", focusStyleOnContainer: true }, h("div", { class: "switch-label" }, h("tet-icon", { theme: this.theme, class: "benefit__icon", name: benefit.icon }), benefit.name)))));
+        return (h("div", { class: "switch-wrapper" }, h("tet-switch", { class: "switch", theme: this.theme, key: switchKey, name: toggleKey, checked: this.selectedSwitchKeys.includes(toggleKey), onCheck: (e) => this.handleSwitchToggle(toggleKey, e.detail.checked), labelPosition: "left", focusStyleOnContainer: true }, h("div", { class: "switch-label" }, h("tet-icon", { theme: this.theme, class: "benefit__icon", name: icon }), name))));
     }
     /**
-     * Renders bonuses and marks bonuses outside current product as inactive.
+     * Renders bonus groups for the selected product.
      */
     renderBonuses() {
-        const currentBonusIds = new Set(this.currentBonuses().map(this.getUniqueBonusId.bind(this)));
-        const allBonuses = this.allBonuses();
-        const bonusTitle = this.options.find(option => option.productCode === this.selectedProductCode)?.bonusTitle;
-        if (allBonuses.length < 1) {
+        const option = this.getOptionById(this.selectedProductId);
+        const groups = option?.bonuses ?? [];
+        if (groups.length < 1) {
             return null;
         }
-        return (h("div", { class: "bonuses" }, !!bonusTitle && (h("div", { class: "bonuses__title" }, bonusTitle)), h("div", { class: "bonuses__bonus-container" }, allBonuses.map((bonus) => {
-            const id = this.getUniqueBonusId(bonus);
-            const isActive = currentBonusIds.has(id);
-            const attributes = Array.isArray(bonus.dataAttributes) ? undefined : bonus.dataAttributes;
-            const isInteractive = Boolean(attributes && Object.keys(attributes).length > 0);
-            const ElementTag = this.getElementTag(attributes);
-            return (h(ElementTag, { key: id, type: isInteractive ? 'button' : undefined, class: {
-                    'bonus': true,
-                    'bonus--inactive': !isActive,
-                    'bonus--interactive': isInteractive,
-                }, ...(attributes || {}) }, h("tet-icon", { theme: this.theme, class: "bonus__icon", name: bonus.iconName }), h("span", { class: "bonus__text" }, bonus.name), isInteractive && (h("div", { class: "bonus__chevron-icon-container" }, h("tet-icon", { class: "bonus__icon bonus__icon--chevron", name: "tc-chevron-right-small" })))));
-        }))));
+        return (h("div", { class: "bonuses" }, groups.map((group) => {
+            const items = group.items ?? [];
+            if (!items.length) {
+                return null;
+            }
+            return (h("div", { class: "bonuses__bonus-container" }, !!group.title && h("div", { class: "section-title" }, group.title), items.map((bonus) => {
+                const attributes = Array.isArray(bonus.dataAttributes) ? undefined : bonus.dataAttributes;
+                const ElementTag = this.getElementTag(attributes);
+                const isInteractive = ['a', 'button'].includes(ElementTag);
+                return (h(ElementTag, { type: ElementTag === 'button' ? 'button' : undefined, class: {
+                        'bonus': true,
+                        'bonus--interactive': isInteractive,
+                    }, ...(attributes || {}) }, h("tet-icon", { theme: this.theme, class: "bonus__icon", name: bonus.iconName }), h("span", { class: "bonus__text" }, bonus.name), isInteractive && (h("div", { class: "bonus__chevron-icon-container" }, h("tet-icon", { class: "bonus__icon bonus__icon--chevron", name: "tc-chevron-right-small" })))));
+            })));
+        })));
     }
     renderRadioOptions() {
         const selectionOptions = this.getSelectionOptions();
-        return (h("div", { class: "radio-container" }, selectionOptions.map((option) => (h("div", { class: "radio-wrapper" }, h("tet-radio", { class: "radio", theme: this.theme, name: "radio-card-options", label: option.label, value: option.value, checked: this.selectedProductCode === option.value, focusStyleOnContainer: true, onCheck: (event) => this.onOptionSelected(event) }))))));
+        return (h("div", { class: "radio-container" }, selectionOptions.map((option) => (h("div", { class: "radio-wrapper" }, h("tet-radio", { class: "radio", theme: this.theme, name: "radio-card-options", label: option.label, value: option.value, checked: this.selectedProductId === option.value, focusStyleOnContainer: true, onCheck: (event) => this.onOptionSelected(event) }))))));
     }
-    renderPrice(price, parsedPrice, priceDescription) {
-        if (!price || Number.isNaN(parsedPrice)) {
+    renderPrice({ contractPrice: price, basePrice, priceDescription, showDiscount }) {
+        const parsedPrice = Number.parseFloat(price.replace(',', '.'));
+        const parsedBasePrice = Number.parseFloat(basePrice.replace(',', '.'));
+        const showStripedPrice = showDiscount && Number.isFinite(parsedBasePrice);
+        if (!price || !Number.isFinite(parsedPrice)) {
             return null;
         }
-        return (h("div", { class: "price-wrapper" }, h("div", { class: "price-container" }, h("div", { class: "price-container__price translation-none" }, parsedPrice.toFixed(2).replace('.', ',')), h("div", { class: "price-container__currency" }, h("span", null, this.currency))), priceDescription && h("span", { class: "price-container__description" }, priceDescription)));
+        return (h("div", { class: "price-wrapper" }, h("div", { class: "price-container" }, h("div", { class: "price-container__price-group" }, h("div", { class: "price-container__price translation-none" }, parsedPrice.toFixed(2).replace('.', ',')), h("div", { class: "price-container__currency" }, h("span", null, this.currency))), showStripedPrice && (h("div", { class: "price-container__base-price translation-none" }, h("span", null, parsedBasePrice.toFixed(2).replace('.', ',')), h("span", null, this.currency)))), priceDescription && h("span", { class: "price-container__description" }, priceDescription)));
+    }
+    getPriceData(manualProductData, comparisonData, contractTermData) {
+        const contractPrice = (manualProductData?.discountPrice ??
+            manualProductData?.price ??
+            contractTermData?.amount ??
+            '').toString();
+        const basePrice = (manualProductData?.price ?? comparisonData?.amount ?? '').toString();
+        const parsedContractPrice = Number.parseFloat(contractPrice.replace(',', '.'));
+        const parsedBasePrice = Number.parseFloat(basePrice.replace(',', '.'));
+        const showDiscount = Number.isFinite(parsedContractPrice) &&
+            Number.isFinite(parsedBasePrice) &&
+            parsedBasePrice > parsedContractPrice;
+        return {
+            contractPrice,
+            basePrice,
+            priceDescription: manualProductData?.priceDescription ?? contractTermData?.priceDescription?.[this.language] ?? '',
+            showDiscount,
+        };
     }
-    renderBenefitsSection() {
+    renderControl(selectionOptions) {
+        switch (this.cardType) {
+            case 'switcher':
+                return (h("div", { class: "benefits" }, h("div", null, this.toggles.map(toggle => this.renderSwitch(toggle)))));
+            case 'dropdown':
+                return (h("tet-dropdown", { id: "dropdown", class: "dropdown", theme: this.theme, "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: selectionOptions }));
+            case 'radio':
+                return this.renderRadioOptions();
+            default:
+                return null;
+        }
+    }
+    renderControls() {
         const selectionOptions = this.getSelectionOptions();
-        if (this.cardType === 'switcher') {
-            return (h("div", { class: "benefits" }, h("div", null, this.benefits.map((benefit) => this.renderSwitch(benefit)))));
+        const renderTitle = !!this.controlsTitle && this.cardType !== 'static';
+        const control = this.renderControl(selectionOptions);
+        if (!control) {
+            return null;
         }
-        const renderedBenefits = this.benefits.map((benefit) => this.renderBenefit(benefit));
-        return (h("div", { class: "benefits" }, h("div", { class: "benefits__benefit-container" }, renderedBenefits, this.cardType === 'dropdown' && (h("tet-dropdown", { id: "dropdown", class: "dropdown", theme: this.theme, "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: selectionOptions })), this.cardType === 'radio' && this.renderRadioOptions())));
+        return (h("div", { class: "controls" }, renderTitle && h("div", { class: "section-title" }, this.controlsTitle), control));
     }
+    buildLinkWithParams(baseUrl, params) {
+        if (!baseUrl) {
+            return '';
+        }
+        const url = new URL(baseUrl);
+        params.forEach((value, key) => {
+            url.searchParams.append(key, value);
+        });
+        return url.toString();
+    }
+    ;
     /**
      * Renders the card body.
      * @returns rendered card body.
      */
     renderCard() {
-        const comparisonData = this.allProductData[this.selectedProductCode];
+        const comparisonData = this.allProductData[this.selectedProductId];
+        const selectedOption = this.getOptionById(this.selectedProductId);
+        const manualProductData = selectedOption?.productData;
         const contractTermData = this.selectedContractTerm();
         const overrideProductName = comparisonData?.attributes?.find(attr => attr.key === 'overrideProductName')?.value;
-        const mainTitle = overrideProductName ?? comparisonData?.name?.[this.language];
-        const price = contractTermData?.amount.toString() ?? '';
-        const parsedPrice = Number.parseFloat(price.replace(',', '.'));
+        const mainTitle = manualProductData?.name ?? overrideProductName ?? comparisonData?.name?.[this.language];
+        const priceData = this.getPriceData(manualProductData, comparisonData, contractTermData);
         const promotionCode = contractTermData?.promotionCode ?? '';
         const term = contractTermData?.term ?? '';
-        const priceDescription = contractTermData?.priceDescription?.[this.language] ?? '';
-        const secondaryLink = this.secondaryLink || contractTermData?.contract || '';
+        const secondaryLink = this.secondaryLink || manualProductData?.contractUrl || contractTermData?.contract || '';
         const shouldRenderSecondaryLink = !!secondaryLink && !!this.secondaryLinkText;
         const secondaryLinkTarget = this.secondaryLinkOpenBlank ? '_blank' : undefined;
         const secondaryLinkRel = this.secondaryLinkOpenBlank ? 'noopener noreferrer' : undefined;
         const baseUrl = comparisonData?.formUrl?.[this.language] || '';
         const params = new URLSearchParams({
             contractTerm: term?.toString() ?? '',
-            product: this.selectedProductCode,
+            product: selectedOption?.productCode ?? '',
             promotion: promotionCode ?? '',
             lang: this.language ?? '',
             from: 'tet.lv'
         });
-        const link = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${params.toString()}`;
-        const isBestChoice = !!this.options.find(option => option.productCode === this.selectedProductCode)?.bestChoice;
-        return (h("div", { class: { 'card': true, 'best-choice': isBestChoice } }, this.bestChoiceText && (h("div", { class: { 'best-choice-title': true, 'active': isBestChoice } }, this.bestChoiceText)), h("div", { class: "content content__top" }, mainTitle && h("h3", { class: "title" }, mainTitle), this.renderPrice(price, parsedPrice, priceDescription), h("tet-button", { class: "button", type: "primary", theme: "light", size: this.buttonSize, url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle), shouldRenderSecondaryLink && (h("div", { class: "secondary-link" }, h("a", { class: "tet-link", href: secondaryLink, target: secondaryLinkTarget, rel: secondaryLinkRel }, this.secondaryLinkText)))), h("div", { class: "content content__bottom" }, this.renderBonuses(), this.renderBenefitsSection())));
+        const link = manualProductData ? manualProductData.formUrl : this.buildLinkWithParams(baseUrl, params);
+        const isBestChoice = !!selectedOption?.bestChoice;
+        const cardLabel = selectedOption?.cardLabel;
+        return (h("div", { class: { 'card': true, 'best-choice': isBestChoice } }, this.bestChoiceText && (h("div", { class: { 'best-choice-title': true, 'active': isBestChoice } }, !!this.bestChoiceIconName && (h("tet-icon", { class: "best-choice-title__icon ", name: this.bestChoiceIconName })), h("span", null, this.bestChoiceText))), h("div", { class: "content content__top" }, mainTitle && h("h3", { class: "title" }, mainTitle), this.renderPrice(priceData), !!cardLabel && (h("p", { class: "card-label" }, cardLabel)), h("tet-button", { class: "button", type: "primary", theme: "light", size: this.buttonSize, url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle), shouldRenderSecondaryLink && (h("div", { class: "secondary-link" }, h("a", { class: "tet-link", href: secondaryLink, target: secondaryLinkTarget, rel: secondaryLinkRel }, this.secondaryLinkText)))), h("div", { class: "content content__bottom" }, this.showControlsFirst
+            ? [this.renderControls(), this.renderBonuses()]
+            : [this.renderBonuses(), this.renderControls()])));
     }
     /**
      * Renders the loader.
      */
     renderLoader() {
-        return (h("tet-placeholder", { class: "card__placeholder", height: "37rem", width: "100%", darkTheme: this.theme === 'dark' }));
+        return (h("tet-placeholder", { class: "card__placeholder", height: "100%", width: "100%", darkTheme: this.theme === 'dark' }));
     }
     render() {
         if (this.showLoader) {

package/dist/esm/tet-compare-cards-tab.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-aac31bd2.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-e933a7d2.js';
 import { f as fillProductData } from './utils-c110a4b1.js';
-import './http-codes-1927ea00.js';
-import { p as productComparison } from './product-comparison-dd90c721.js';
+import './http-codes-cf0086d4.js';
+import { p as productComparison } from './product-comparison-cb8955f6.js';
 import { C as CompareCardsTabProductsFilters } from './compare-cards-tab-products-filters-79b7b7c6.js';
 import './build-form-url-c2769e0d.js';
 

package/dist/esm/tet-compare-cards_2.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-aac31bd2.js';
-import './http-codes-1927ea00.js';
-import { p as productComparison } from './product-comparison-dd90c721.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-e933a7d2.js';
+import './http-codes-cf0086d4.js';
+import { p as productComparison } from './product-comparison-cb8955f6.js';
 import { f as fillProductData } from './utils-c110a4b1.js';
 import './build-form-url-c2769e0d.js';