@tet/tet-components 1.3.112-testing → 1.3.113-staging

package/dist/collection/components/views/tet-b2b-configurator/partials/tet-b2b-configurator-cart/tet-b2b-configurator-cart.css

@@ -0,0 +1,320 @@
+@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 {
+  display: block;
+}
+
+.light {
+  --b2b-cart-text-color: var(--tc-text-primary);
+  --b2b-cart-text-color-secondary: var(--tc-text-secondary);
+  --b2b-cart-background-color: var(--tc-layer-primary);
+  --b2b-cart-box-shadow: var(--tc-elevation-one);
+  --b2b-cart-border-color: var(--tc-border-quaternary);
+  --b2b-cart-block-color: var(--tc-layer-secondary);
+  --b2b-cart-block-details-color: var(--tc-layer-tertiary);
+  --b2b-cart-summary-accent-color: var(--tc-yellow-20);
+  --elevation-six-layer-1-color: rgba(12, 12, 14, 0.06);
+}
+.light.checkout {
+  --b2b-cart-background-color: var(--tc-layer-secondary);
+  --b2b-cart-block-color: var(--tc-layer-tertiary);
+  --b2b-cart-block-details-color: var(--tc-layer-quaternary);
+}
+
+.dark {
+  --b2b-cart-text-color: var(--tc-text-primary-dark);
+  --b2b-cart-text-color-secondary: var(--tc-text-secondary-dark);
+  --b2b-cart-background-color: var(--tc-layer-primary-dark);
+  --b2b-cart-box-shadow: var(--tc-elevation-one-dark);
+  --b2b-cart-border-color: var(--tc-border-quaternary-dark);
+  --b2b-cart-block-color: var(--tc-layer-secondary-dark);
+  --b2b-cart-block-details-color: var(--tc-layer-tertiary-dark);
+  --b2b-cart-summary-accent-color: var(--tc-grey-20-dark);
+  --elevation-six-layer-1-color: rgba(12, 12, 14, 0.20);
+}
+.dark.checkout {
+  --b2b-cart-background-color: var(--tc-layer-secondary-dark);
+  --b2b-cart-block-color: var(--tc-layer-tertiary-dark);
+  --b2b-cart-block-details-color: var(--tc-layer-quaternary-dark);
+}
+
+.cart {
+  color: var(--b2b-cart-text-color);
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  height: fit-content;
+  border-radius: 1rem;
+  background: var(--b2b-cart-background-color);
+  box-shadow: var(--b2b-cart-box-shadow);
+}
+.cart__accordion {
+  --accordion-border-radius: 1rem 1rem 0 0;
+  --accordion-header-padding: 1rem;
+  --accordion-header-mobile-padding: 1rem;
+  --accordion-header-font: 600 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;
+}
+@media all and (min-width: 90rem) {
+  .cart__accordion--edit {
+    --accordion-header-display: none;
+  }
+}
+.cart__accordion--rounded {
+  --accordion-border-radius: 1rem;
+}
+.cart__accordion--empty {
+  --accordion-border-radius: 1rem;
+}
+.cart__title--edit {
+  display: none;
+}
+@media all and (min-width: 90rem) {
+  .cart__title--edit {
+    display: block;
+    padding: 1.5rem 1.5rem 1rem 1.5rem;
+    border-bottom: 0.0625rem solid var(--b2b-cart-border-color);
+    align-self: stretch;
+    font: 600 1.125rem/1.75rem "Inter", "Gilroy, Arial, sans-serif";
+  }
+}
+.cart__title--checkout {
+  display: none;
+}
+.cart__content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  border-color: var(--b2b-cart-border-color);
+  border-top-style: solid;
+  border-top-width: 0.0625rem;
+}
+
+.block {
+  --accordion-border-radius: 0.5rem;
+  --accordion-background-color: var(--b2b-cart-block-color);
+  --accordion-header-padding: 1rem 1rem 0.75rem 1rem;
+  --accordion-header-mobile-padding: 1rem 1rem 0.75rem 1rem;
+  --accordion-header-font: 600 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif;
+}
+.block__wrapper {
+  border-radius: 0.5rem;
+  border: 0.0625rem solid var(--b2b-cart-border-color);
+  background-color: var(--b2b-cart-block-color);
+}
+@media all and (min-width: 48rem) {
+  .block {
+    --accordion-header-padding: 1rem;
+    --accordion-header-mobile-padding: 1rem;
+    --accordion-header-font: 600 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;
+  }
+}
+.block__header {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  gap: 0.5rem;
+}
+.block__header-row {
+  display: flex;
+  justify-content: space-between;
+}
+.block__header-amount {
+  text-align: end;
+}
+.block__header-details {
+  font: 500 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
+  background: var(--b2b-cart-block-details-color);
+  padding: 0.25rem 0.5rem;
+  border-radius: 1.375rem;
+}
+.block__header-indicator {
+  font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+}
+@media all and (min-width: 48rem) {
+  .block__header-indicator {
+    font: 400 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  }
+}
+.block__header-icon {
+  --icon-size: 1.25rem;
+}
+
+.empty-cart {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.empty-cart__icon {
+  margin-bottom: 0.5rem;
+  --icon-size: 3rem;
+}
+.empty-cart__title {
+  font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+}
+.empty-cart__description {
+  color: var(--b2b-cart-text-color-secondary);
+  font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+}
+
+.summary {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 1rem 1.5rem;
+  border-color: var(--b2b-cart-border-color);
+  border-top-style: solid;
+  border-top-width: 0.0625rem;
+  box-shadow: 0 -6px 12px 0 var(--elevation-six-layer-1-color);
+}
+@media all and (min-width: 48rem) {
+  .summary {
+    padding: 1rem 1.5rem 1.5rem;
+  }
+}
+.summary__notification {
+  margin-bottom: 1rem;
+}
+.summary__savings {
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  background-color: var(--b2b-cart-summary-accent-color);
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+}
+.summary__savings-amount {
+  text-align: end;
+}
+.summary__monthly-payment {
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  font: 500 1.125rem/1.75rem "Inter", "Gilroy, Arial, sans-serif";
+}
+@media all and (min-width: 48rem) {
+  .summary__monthly-payment {
+    margin-bottom: 1.5rem;
+  }
+}
+@media all and (min-width: 90rem) {
+  .summary__monthly-payment {
+    margin-bottom: 1rem;
+    font: 500 1.25rem/1.5rem "Gilroy", "Gilroy, Arial, sans-serif";
+  }
+}
+.summary__monthly-price {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  white-space: nowrap;
+}
+.summary__monthly-price-disclosure {
+  color: var(--b2b-cart-text-color-secondary);
+  font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+}

package/dist/collection/components/views/tet-b2b-configurator/partials/tet-b2b-configurator-cart/tet-b2b-configurator-cart.js

@@ -0,0 +1,239 @@
+import { processTranslations, t } from "../../../../../services/translations/index";
+import { Host, forceUpdate, h } from "@stencil/core";
+export class TetB2bConfiguratorCart {
+    constructor() {
+        /** @private The suffix for the price displayed - "€/mēn."). */
+        this.priceSuffix = '€/mēn.';
+        /**
+         * Updates `primarySlotFilled` or `secondarySlotFilled` based on assigned slot elements.
+         * @param e The slotchange event.
+         */
+        this.handleSlotChanged = (e) => {
+            const slot = e.target;
+            const slotName = slot.name;
+            if (slotName === 'primary') {
+                this.primarySlotFilled = slot.assignedElements().length !== 0;
+            }
+            else {
+                this.secondarySlotFilled = slot.assignedElements().length !== 0;
+            }
+        };
+        /**
+         * Handler for all accordion open state changes.
+         * Uses element reference checking to correctly distinguish between nested components (lower events bubble up).
+         * @param e The CustomEvent containing the new open state.
+         */
+        this.handleAccordionChanged = (e) => {
+            const targetEl = e.target;
+            const isOpen = e.detail;
+            if (targetEl === this.accordionEl) {
+                this.isAccordionOpen = e.detail;
+                return;
+            }
+            if (targetEl === this.primaryBlockEl) {
+                this.isPrimaryBlockOpen = isOpen;
+                return;
+            }
+            if (targetEl === this.secondaryBlockEl) {
+                this.isSecondaryBlockOpen = isOpen;
+                return;
+            }
+        };
+        /** Renders the empty cart content placeholder. */
+        this.renderEmptyContent = () => {
+            return (h("div", { class: "empty-cart" }, h("tet-icon", { class: "empty-cart__icon", name: "tc-empty", theme: this.theme }), h("div", { class: "empty-cart__title" }, t('components-b2b-cart-empty-title')), h("div", { class: "empty-cart__description" }, t('components-b2b-cart-empty-description'))));
+        };
+        /** Renders the two inner service accordions based on slot content. */
+        this.renderContent = () => {
+            const blocks = [
+                { name: t('components-b2b-cart-primary-service-title'), type: 'primary' },
+                { name: t('components-b2b-cart-secondary-service-title'), type: 'secondary' }
+            ];
+            const content = blocks.map((block) => {
+                const isPrimary = block.type === 'primary';
+                const blockOpen = isPrimary ? this.isPrimaryBlockOpen : this.isSecondaryBlockOpen;
+                const slotFilled = isPrimary ? this.primarySlotFilled : this.secondarySlotFilled;
+                const amount = isPrimary ? this.data.primaryAmount : this.data.secondaryAmount;
+                const count = isPrimary ? this.data.primaryCount : this.data.secondaryCount;
+                const countValue = count % 10 === 1 && count !== 11
+                    ? t('components-b2b-cart-service-singular')
+                    : t('components-b2b-cart-service-plural');
+                const refCallback = (el) => {
+                    if (block.type === 'primary') {
+                        this.primaryBlockEl = el;
+                    }
+                    else {
+                        this.secondaryBlockEl = el;
+                    }
+                };
+                return (h("div", { hidden: !slotFilled, class: "block__wrapper" }, h("tet-accordion", { ref: refCallback, key: block.type, class: "block", isOpen: isPrimary ? this.isPrimaryBlockOpen : this.isSecondaryBlockOpen, header: block.name, theme: this.theme, transparentBackground: true }, h("div", { slot: "header", class: "block__header" }, h("div", { class: "block__header-row" }, block.name, " ", h("span", { class: "block__header-amount" }, `${amount} ${this.priceSuffix}`)), h("div", { class: "block__header-row" }, h("div", { class: "block__header-details" }, `${count} ${countValue}`), h("div", { class: "block__header-indicator" }, blockOpen ? t('components-b2b-cart-accordion-less') : t('components-b2b-cart-accordion-more'), h("tet-icon", { class: "block__header-icon", name: `chevron-${blockOpen ? 'up' : 'down'}`, theme: this.theme })))), h("slot", { onSlotchange: this.handleSlotChanged, name: block.type }))));
+            });
+            return content;
+        };
+        /** Renders the cart summary, including notifications and financial details. */
+        this.renderSummary = () => {
+            const { summarySavings, summaryAmount, hasPrimaryNotification, hasSecondaryNotification } = this.data;
+            return (h("div", { class: "summary" }, hasPrimaryNotification && (h("tet-notification", { class: "summary__notification", type: "warning", headerTitle: t('components-b2b-cart-primary-notification-title'), content: t('components-b2b-cart-primary-notification-description'), allowClose: false, theme: this.theme, icon: null })), hasSecondaryNotification && (h("tet-notification", { class: "summary__notification", type: "neutral", headerTitle: t('components-b2b-cart-secondary-notification-title'), content: t('components-b2b-cart-secondary-notification-description'), allowClose: false, theme: this.theme })), this.isAccordionOpen && (h("div", { class: "summary__savings" }, t('components-b2b-cart-savings-title'), h("span", { class: "summary__savings-amount" }, " ", `${summarySavings} ${this.priceSuffix}`))), h("div", { class: "summary__monthly-payment" }, t('components-b2b-cart-monthly-payment-title'), h("div", { class: "summary__monthly-price" }, `${summaryAmount} ${this.priceSuffix}`, h("span", { class: "summary__monthly-price-disclosure" }, ' ', t('components-b2b-cart-monthly-payment-disclosure'), ' '))), h("slot", { name: "cta" })));
+        };
+        this.theme = 'light';
+        this.data = undefined;
+        this.isCartEmpty = true;
+        this.context = 'edit';
+        this.isDesktopResolution = true;
+        this.isAccordionOpen = this.context === 'edit';
+        this.isPrimaryBlockOpen = true;
+        this.isSecondaryBlockOpen = true;
+        this.primarySlotFilled = false;
+        this.secondarySlotFilled = false;
+    }
+    /**
+     * Imperatively opens the main accordion when transitioning to desktop in 'edit' context.
+     * @param isDesktop The new resolution state.
+     */
+    openAccordionOnResolutionChange(isDesktop) {
+        if (isDesktop && this.accordionEl && this.context === 'edit') {
+            this.accordionEl.open();
+        }
+    }
+    componentWillLoad() {
+        processTranslations('tet-components', 'lv').then(() => forceUpdate(this));
+    }
+    render() {
+        const cartTitle = t('components-b2b-cart-title');
+        const isEditMode = this.context === 'edit';
+        const isCheckoutMode = this.context === 'checkout';
+        const showSummary = !this.isCartEmpty && (isEditMode || (isCheckoutMode && this.isAccordionOpen));
+        return (h(Host, { key: 'd45cdb03a56d3ba7af8a6a3665d5800e4931d596' }, h("div", { key: '197dee4e7ee59fc0a4b5b3990d6ad9801e39e56b', class: { cart: true, [`${this.theme}`]: true, [`${this.context}`]: true } }, h("tet-accordion", { key: '10dbdf166982087d8aa61e386f53802aa1d4793d', ref: (el) => (this.accordionEl = el), class: {
+                'cart__accordion': true,
+                [`cart__accordion--${this.context}`]: true,
+                'cart__accordion--rounded': this.isCartEmpty || (isCheckoutMode && !this.isAccordionOpen)
+            }, isOpen: this.isAccordionOpen, onOpenChanged: this.handleAccordionChanged, header: cartTitle, withBorder: true, theme: this.theme, transparentBackground: true }, h("div", { key: '518b46e3ab31d836ab22522c6dfbc621e20d4b34', class: `cart__title--${this.context}` }, cartTitle), h("div", { key: '00d1a740549ad56e06a0dcece42d3ae07bb6bd08', class: "cart__content" }, this.isCartEmpty ? this.renderEmptyContent() : [this.renderContent()])), showSummary && this.renderSummary())));
+    }
+    static get is() { return "tet-b2b-configurator-cart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-b2b-configurator-cart.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-b2b-configurator-cart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'light'"
+                        }],
+                    "text": "The theme used for the component's styling."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "B2BCartData",
+                    "resolved": "{ summaryAmount: string; summarySavings: string; primaryAmount: string; secondaryAmount: string; primaryCount: number; secondaryCount: number; hasPrimaryNotification?: boolean; hasSecondaryNotification?: boolean; }",
+                    "references": {
+                        "B2BCartData": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/views/tet-b2b-configurator/partials/tet-b2b-configurator-cart/tet-b2b-configurator-cart.tsx",
+                            "id": "src/components/views/tet-b2b-configurator/partials/tet-b2b-configurator-cart/tet-b2b-configurator-cart.tsx::B2BCartData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The data object containing summary and content details."
+                }
+            },
+            "isCartEmpty": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether to render placeholder for empty cart."
+                },
+                "attribute": "is-cart-empty",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "context": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'edit' | 'checkout'",
+                    "resolved": "\"checkout\" | \"edit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Context in which cart is renderd. `edit` will result in more details"
+                },
+                "attribute": "context",
+                "reflect": false,
+                "defaultValue": "'edit'"
+            },
+            "isDesktopResolution": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether component's parent is in desktop resolution."
+                },
+                "attribute": "is-desktop-resolution",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isAccordionOpen": {},
+            "isPrimaryBlockOpen": {},
+            "isSecondaryBlockOpen": {},
+            "primarySlotFilled": {},
+            "secondarySlotFilled": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "isDesktopResolution",
+                "methodName": "openAccordionOnResolutionChange"
+            }];
+    }
+}

package/dist/collection/components/views/tet-b2b-service-calculator/tet-b2b-service-calculator.js

@@ -51,7 +51,7 @@ export class TetB2bServiceCalculator {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h("section", { key: 'b83b60908fd3f4b7b8e3ae573b32b7d8c23e8141', class: "container" }, h("div", { key: '1d0af7d46eb2274277179dc2b29f879b768b1ab1', class: "title-block" }, t('components-b2b-calculator-title')), h("div", { key: '425cec4bb82289288eb7eb6b8c14ba43ec57e859', class: "calculator-block" }, h("p", { key: 'a72ca55525abdbcb202d8319307991aed1a89e8c', class: "slider-title" }, t('components-b2b-calculator-computer-count')), h("tet-range-slider", { key: '8e924bd7c0efc50a9983949095e695c8b2b67878', class: "slider", size: "large", type: "primary", defaultValue: 75, maxValue: 100, withControls: false, withInput: false, dataPoints: [1, 20, 40, 60, 80, 100], displayDataPoints: [1, 20, 40, 60, 80, 100], lockToDataPoint: false }), h("div", { key: '4989f6f23fc5c01f392d21a5812f3656eaaccab5', class: "control-container" }, h("div", { key: '132e323f1245f13170e83f436a413bc4753293d7', class: "control" }, h("tet-checkbox", { key: '9e0cce6b781b2d5cca9a79dfeb5ca720a2e48eb2', class: "it-admin-checkbox", checked: this.withItAdmin, onCheck: this.handleWithItAdminValueChange }, t('components-b2b-calculator-it-admin-checkbox-label'))), h("div", { key: '282dd948d4afddf81ce90785c9d41826488fea23', class: "control" }, h("tet-switch", { key: 'cd2ebec5367c0bfab2dba2cfcb435305c7f0eb08', class: "in-person-support-switch", checked: this.withInPersonServiceSupport, onCheck: this.handleInPersonServiceSupportValueChange }, t('components-b2b-calculator-in-person-support-switch-label')))), h("div", { key: '8126f1b9712ad0f28cd221d2b38b024e8a27f6e7', class: "monthly-payment-block" }, h("p", { key: '61447682f99eabf3c42ff4c4529603a5bc50d4b5', class: "title" }, t('components-b2b-calculator-potential-monthly-payment')), h("p", { key: 'bfdb6ccb03e65643b1001dde59e682c4446b8124' }, h("span", { key: 'c6b453add474ca7418577452765ace9754e072f9', class: "price" }, this.totalPrice), h("span", { key: '340953c02d902887c1eb7592afc60dca1a89c359', class: "currency" }, t('components-euro-per-month')))))));
+        return (h("section", { key: '2c9f6ae01ab12735b3492888fc1febd0fd51b546', class: "container" }, h("div", { key: '60394cb7349120b48616aba0a870ef8685edc40a', class: "title-block" }, t('components-b2b-calculator-title')), h("div", { key: 'd2ac7f4fdd410ee189d050bd4d5fd1bb0f73b4a5', class: "calculator-block" }, h("p", { key: 'edf8926835f672ebc008caef3deec3e4cc7b5a14', class: "slider-title" }, t('components-b2b-calculator-computer-count')), h("tet-range-slider", { key: 'fdfd40e6e3e1b7824f228d541bc9ace2ccbc46b6', class: "slider", size: "large", type: "primary", defaultValue: 75, maxValue: 100, withControls: false, withInput: false, dataPoints: [1, 20, 40, 60, 80, 100], displayDataPoints: [1, 20, 40, 60, 80, 100], lockToDataPoint: false }), h("div", { key: 'd9ed76461682c5494ccaf9468ae2dbbd1ca931cd', class: "control-container" }, h("div", { key: 'f55b79ff0c175a60d11c1ceec0fa313305a82098', class: "control" }, h("tet-checkbox", { key: '9b1201c8b9fce6d1f53287a53fa9ea2dfa62a93c', class: "it-admin-checkbox", checked: this.withItAdmin, onCheck: this.handleWithItAdminValueChange }, t('components-b2b-calculator-it-admin-checkbox-label'))), h("div", { key: 'edd7d131801763c3ef5bf886e30eb1c706b9fa84', class: "control" }, h("tet-switch", { key: 'd76ad9657552b463be81cadbb3c8f53515a455e4', class: "in-person-support-switch", checked: this.withInPersonServiceSupport, onCheck: this.handleInPersonServiceSupportValueChange }, t('components-b2b-calculator-in-person-support-switch-label')))), h("div", { key: '2ad7f8f75baa33950f255d6a23bf40aca1fdd6e4', class: "monthly-payment-block" }, h("p", { key: '3d3f196760ed91e719a1c72c9feb97dcfde3f2d5', class: "title" }, t('components-b2b-calculator-potential-monthly-payment')), h("p", { key: '1f7ab898634ab62c1404de4fcf0aa4c2c186e326' }, h("span", { key: 'b9351441346c8dc61020a50c17078749b169c682', class: "price" }, this.totalPrice), h("span", { key: '4ce5d394d7488d3e85e2821bcc7be409c33d71ac', class: "currency" }, t('components-euro-per-month')))))));
     }
     static get is() { return "tet-b2b-service-calculator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-business-lines/tet-business-lines.js

@@ -46,7 +46,7 @@ export class TetBusinessLines {
     }
     render() {
         var _a;
-        return (h("div", { key: '2776a10ae67467579c1c797bfedcc5ddafa4fac6', class: "container" }, this.showHeadings && this.renderHeadings(), h("div", { key: '4870860481ae0d60dd5209a5e3302ca3167d3605', class: "business-line-wrapper" }, (_a = this.businessLines) === null || _a === void 0 ? void 0 : _a.map(this.renderBusinessLineItem))));
+        return (h("div", { key: 'b4c4543b0c9bd1e362714f1c96ddf03b99def211', class: "container" }, this.showHeadings && this.renderHeadings(), h("div", { key: 'bb902fa1e8f85a321ce950e4ba27e14d23253a70', class: "business-line-wrapper" }, (_a = this.businessLines) === null || _a === void 0 ? void 0 : _a.map(this.renderBusinessLineItem))));
     }
     static get is() { return "tet-business-lines"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-price-view/test/tet-price-view.spec.js

@@ -86,9 +86,6 @@ describe('tet-price-view', () => {
         const style = container.getAttribute('style') || '';
         expect(style).toContain('width: 7rem');
         expect(style).toContain('height: 7rem');
-        const heading = page.root.shadowRoot.querySelector('.price-view__heading');
-        const headingStyle = heading.getAttribute('style') || '';
-        expect(headingStyle).toContain('font-size: 0.875rem');
     });
     it('sets custom font on price block', async () => {
         const page = await newSpecPage({

package/dist/collection/components/views/tet-price-view/tet-price-view.css

@@ -2,10 +2,6 @@
   display: block;
 }
 
-.price-view {
-  padding: 1rem;
-  text-align: center;
-}
 .price-view__container {
   box-sizing: border-box;
   font-family: Inter, sans-serif;
@@ -15,6 +11,18 @@
   border-radius: 1rem;
   container-type: inline-size;
 }
+.price-view__container.dark:not(.static-colors).price-view__white {
+  background-color: var(--tc-layer-inverse-primary, rgb(12, 12, 14));
+  color: var(--tc-text-inverse-primary, rgb(253, 253, 253));
+}
+.price-view__container.dark:not(.static-colors).price-view__grey {
+  background-color: var(--tc-grey-10-dark, rgb(24, 25, 27));
+  color: var(--tc-text-inverse-primary, rgb(253, 253, 253));
+}
+.price-view__container.dark:not(.static-colors).price-view__black {
+  background-color: var(--tc-layer-primary, rgb(255, 255, 255));
+  color: var(--tc-text-primary, rgb(12, 12, 14));
+}
 .price-view__white {
   background-color: var(--tc-layer-primary, rgb(255, 255, 255));
   color: var(--tc-text-primary, rgb(12, 12, 14));
@@ -34,11 +42,10 @@
 .price-view__body {
   margin: auto;
   width: fit-content;
-  height: 100%;
+  height: fit-content;
   display: flex;
   flex-direction: column;
-  align-items: flex-center;
-  justify-content: space-evenly;
+  justify-content: space-between;
 }
 .price-view__heading {
   text-align: left;