@tet/tet-components 1.3.157-testing → 1.4.0-staging

package/dist/collection/components/simple/text-blocks/tet-tooltip/tet-tooltip.js

@@ -5,98 +5,6 @@ import { TooltipPosition } from "./enums/TooltipPosition";
  */
 export class TetTooltip {
     constructor() {
-        /**
-         * The minimum spacing in pixels from the sides of the window and the target element for the tooltip.
-         */
-        this.margin = 8;
-        /**
-         * The time in seconds of how long should the hover should happen before the tooltip should play the fade-out animation.
-         * This should match CSS --tooltip-delay-show property value.
-         */
-        this.tooltipTimeThreshold = 0.25;
-        /**
-         * Hide the tooltip quickly and ignore the time the tooltip has been visible for on screen.
-         */
-        this.hideQuick = () => {
-            if (this.showTooltip) {
-                this.tooltipStartTime = Date.now();
-                this.hide();
-            }
-        };
-        /**
-         * Positions the tooltip corresponding to the target element.
-         */
-        this.positionTooltip = () => {
-            const targetBoundaries = this.targetElement.getBoundingClientRect();
-            /**
-             * Check whether the tooltip can be placed on either side of the element
-             * when either the left or the right position is set by default.
-             */
-            if ([TooltipPosition.LEFT, TooltipPosition.RIGHT].includes(this.positionState)) {
-                const canPositionRight = window.innerWidth > targetBoundaries.right + this.margin + this.element.offsetWidth;
-                const canPositionLeft = this.element.offsetWidth + this.margin < targetBoundaries.left;
-                // Change positioning if it cannot.
-                if (!canPositionLeft && !canPositionRight) {
-                    this.positionState = TooltipPosition.BOTTOM;
-                }
-            }
-            const isTooltipOutOfVerticalBounds = this.positionTooltipVertically(targetBoundaries);
-            const isTooltipOutOfHorizontalBounds = this.positionTooltipHorizontally(targetBoundaries);
-            // Applies a margin for spacing purposes.
-            // This is done via JS as the margin values are needed for position calculations as well.
-            this.element.style.margin = `${this.margin}px`;
-            // Position the pointer (caret) element after the tooltip as the main tooltip position is required for calculations.
-            const isTooltipOutOfBounds = isTooltipOutOfVerticalBounds || isTooltipOutOfHorizontalBounds;
-            const actualTooltipPosition = this.getTooltipPosition(isTooltipOutOfBounds);
-            this.positionTooltipPointer(actualTooltipPosition);
-        };
-        /**
-         * Position the tooltip pointer (caret) element.
-         */
-        this.positionTooltipPointer = (position) => {
-            const target = this.targetElement.getBoundingClientRect();
-            const tooltip = this.element.getBoundingClientRect();
-            if ([TooltipPosition.TOP, TooltipPosition.BOTTOM].includes(position)) {
-                // Get the boundaries of the overlapping target element and the tooltip area on X axis.
-                const max = Math.min(target.right, tooltip.left + this.element.offsetWidth);
-                const min = Math.max(target.left, tooltip.left);
-                const overlapAreaMiddle = (max + min) / 2;
-                this.tooltipPointer.style.left = `${overlapAreaMiddle - tooltip.left - this.tooltipPointer.offsetWidth / 2}px`;
-                if (position === TooltipPosition.BOTTOM) {
-                    this.tooltipPointer.style.top = `-6px`;
-                    this.tooltipPointer.style.bottom = null;
-                    this.tooltipPointer.style.transform = 'rotate(0deg)';
-                }
-                if (position === TooltipPosition.TOP) {
-                    this.tooltipPointer.style.top = null;
-                    this.tooltipPointer.style.bottom = `-6px`;
-                    this.tooltipPointer.style.transform = 'rotate(180deg)';
-                }
-            }
-            if ([TooltipPosition.LEFT, TooltipPosition.RIGHT].includes(position)) {
-                // Get the boundaries of the overlapping target element and the tooltip area on Y axis.
-                const max = Math.min(target.bottom, tooltip.top + this.element.offsetHeight);
-                const min = Math.max(target.top, tooltip.top);
-                const overlapAreaMiddle = (max + min) / 2;
-                this.tooltipPointer.style.top = `${overlapAreaMiddle - tooltip.top - this.tooltipPointer.offsetHeight / 2}px`;
-                if (position === TooltipPosition.RIGHT) {
-                    this.tooltipPointer.style.left = `-12px`;
-                    this.tooltipPointer.style.right = null;
-                    this.tooltipPointer.style.transform = 'rotate(270deg)';
-                }
-                if (position === TooltipPosition.LEFT) {
-                    this.tooltipPointer.style.left = null;
-                    this.tooltipPointer.style.right = `-12px`;
-                    this.tooltipPointer.style.transform = 'rotate(90deg)';
-                }
-            }
-        };
-        /**
-         * Renders the tooltip.
-         */
-        this.renderTooltip = () => {
-            return (h("div", { class: { tooltip: true, [`${this.theme}`]: true }, role: "tooltip", "aria-hidden": this.showTooltip ? 'false' : 'true', "aria-live": this.showTooltip ? 'polite' : undefined }, h("div", { class: "tooltip-pointer", ref: (el) => (this.tooltipPointer = el) }), h("slot", null)));
-        };
         this.theme = 'classic';
         this.targetElementSelector = undefined;
         this.hoverElement = undefined;
@@ -105,6 +13,33 @@ export class TetTooltip {
         this.positionState = TooltipPosition.BOTTOM;
         this.showTooltip = false;
     }
+    /**
+     * The HTML element that should trigger the tooltip.
+     */
+    targetElement;
+    /**
+     * The pointer element of the tooltip.
+     */
+    tooltipPointer;
+    /**
+     * The minimum spacing in pixels from the sides of the window and the target element for the tooltip.
+     */
+    margin = 8;
+    /**
+     * The time in seconds of how long should the hover should happen before the tooltip should play the fade-out animation.
+     * This should match CSS --tooltip-delay-show property value.
+     */
+    tooltipTimeThreshold = 0.25;
+    /**
+     * The properties of keeping track when the mouse entered or exited the target element.
+     */
+    tooltipStartTime;
+    tooltipEndTime;
+    resizeObserver;
+    /**
+     * The host element of the component.
+     */
+    element;
     /**
      * Listen for the `touchmove` event and hide the tooltip if visible.
      * This will handle the mobile device events.
@@ -136,6 +71,15 @@ export class TetTooltip {
     handlePositionChange(position) {
         this.positionState = position;
     }
+    /**
+     * Hide the tooltip quickly and ignore the time the tooltip has been visible for on screen.
+     */
+    hideQuick = () => {
+        if (this.showTooltip) {
+            this.tooltipStartTime = Date.now();
+            this.hide();
+        }
+    };
     onShowTooltipChange(value) {
         // The "fade-out" is watched separately for changes to avoid the animation on the initial page load.
         if (!value) {
@@ -150,7 +94,6 @@ export class TetTooltip {
         }
     }
     async componentWillLoad() {
-        var _a, _b, _c, _d;
         if (this.targetElementSelector) {
             this.targetElement = document.querySelector(this.targetElementSelector);
         }
@@ -164,14 +107,13 @@ export class TetTooltip {
             return;
         }
         if (!this.doNotShowOnHover) {
-            (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.show.bind(this));
-            (_b = this.targetElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.hide.bind(this));
+            this.targetElement?.addEventListener('mouseenter', this.show.bind(this));
+            this.targetElement?.addEventListener('mouseleave', this.hide.bind(this));
         }
-        (_c = this.targetElement) === null || _c === void 0 ? void 0 : _c.addEventListener('focusin', this.show.bind(this));
-        (_d = this.targetElement) === null || _d === void 0 ? void 0 : _d.addEventListener('focusout', this.hide.bind(this));
+        this.targetElement?.addEventListener('focusin', this.show.bind(this));
+        this.targetElement?.addEventListener('focusout', this.hide.bind(this));
         this.resizeObserver = new ResizeObserver(() => {
-            var _a;
-            if (!((_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.offsetHeight)) {
+            if (!this.targetElement?.offsetHeight) {
                 this.element.classList.remove('hidden');
                 this.element.classList.add('hidden-quick');
             }
@@ -184,21 +126,19 @@ export class TetTooltip {
     componentDidLoad() {
         // Delay the visibility for a moment to avoid the blinking effect of the tooltips shortly after the load.
         setTimeout(() => {
-            var _a;
             this.element.style.display = 'inline-block';
-            if (!this.doNotShowOnHover && ((_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.matches(':hover'))) {
+            if (!this.doNotShowOnHover && this.targetElement?.matches(':hover')) {
                 this.show().then();
             }
         }, 100);
     }
     async disconnectedCallback() {
-        var _a, _b, _c;
         if (!this.targetElement) {
             return;
         }
-        (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.show.bind(this));
-        (_b = this.targetElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.hide.bind(this));
-        (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.unobserve(this.targetElement);
+        this.targetElement?.removeEventListener('mouseenter', this.show.bind(this));
+        this.targetElement?.removeEventListener('mouseleave', this.hide.bind(this));
+        this.resizeObserver?.unobserve(this.targetElement);
     }
     /**
      * Show the tooltip.
@@ -226,6 +166,33 @@ export class TetTooltip {
             await this.show();
         }
     }
+    /**
+     * Positions the tooltip corresponding to the target element.
+     */
+    positionTooltip = () => {
+        const targetBoundaries = this.targetElement.getBoundingClientRect();
+        /**
+         * Check whether the tooltip can be placed on either side of the element
+         * when either the left or the right position is set by default.
+         */
+        if ([TooltipPosition.LEFT, TooltipPosition.RIGHT].includes(this.positionState)) {
+            const canPositionRight = window.innerWidth > targetBoundaries.right + this.margin + this.element.offsetWidth;
+            const canPositionLeft = this.element.offsetWidth + this.margin < targetBoundaries.left;
+            // Change positioning if it cannot.
+            if (!canPositionLeft && !canPositionRight) {
+                this.positionState = TooltipPosition.BOTTOM;
+            }
+        }
+        const isTooltipOutOfVerticalBounds = this.positionTooltipVertically(targetBoundaries);
+        const isTooltipOutOfHorizontalBounds = this.positionTooltipHorizontally(targetBoundaries);
+        // Applies a margin for spacing purposes.
+        // This is done via JS as the margin values are needed for position calculations as well.
+        this.element.style.margin = `${this.margin}px`;
+        // Position the pointer (caret) element after the tooltip as the main tooltip position is required for calculations.
+        const isTooltipOutOfBounds = isTooltipOutOfVerticalBounds || isTooltipOutOfHorizontalBounds;
+        const actualTooltipPosition = this.getTooltipPosition(isTooltipOutOfBounds);
+        this.positionTooltipPointer(actualTooltipPosition);
+    };
     getTooltipPosition(isTooltipOutOfBounds) {
         switch (this.positionState) {
             case TooltipPosition.TOP:
@@ -350,6 +317,53 @@ export class TetTooltip {
         }
         return isTooltipOutOfBounds;
     }
+    /**
+     * Position the tooltip pointer (caret) element.
+     */
+    positionTooltipPointer = (position) => {
+        const target = this.targetElement.getBoundingClientRect();
+        const tooltip = this.element.getBoundingClientRect();
+        if ([TooltipPosition.TOP, TooltipPosition.BOTTOM].includes(position)) {
+            // Get the boundaries of the overlapping target element and the tooltip area on X axis.
+            const max = Math.min(target.right, tooltip.left + this.element.offsetWidth);
+            const min = Math.max(target.left, tooltip.left);
+            const overlapAreaMiddle = (max + min) / 2;
+            this.tooltipPointer.style.left = `${overlapAreaMiddle - tooltip.left - this.tooltipPointer.offsetWidth / 2}px`;
+            if (position === TooltipPosition.BOTTOM) {
+                this.tooltipPointer.style.top = `-6px`;
+                this.tooltipPointer.style.bottom = null;
+                this.tooltipPointer.style.transform = 'rotate(0deg)';
+            }
+            if (position === TooltipPosition.TOP) {
+                this.tooltipPointer.style.top = null;
+                this.tooltipPointer.style.bottom = `-6px`;
+                this.tooltipPointer.style.transform = 'rotate(180deg)';
+            }
+        }
+        if ([TooltipPosition.LEFT, TooltipPosition.RIGHT].includes(position)) {
+            // Get the boundaries of the overlapping target element and the tooltip area on Y axis.
+            const max = Math.min(target.bottom, tooltip.top + this.element.offsetHeight);
+            const min = Math.max(target.top, tooltip.top);
+            const overlapAreaMiddle = (max + min) / 2;
+            this.tooltipPointer.style.top = `${overlapAreaMiddle - tooltip.top - this.tooltipPointer.offsetHeight / 2}px`;
+            if (position === TooltipPosition.RIGHT) {
+                this.tooltipPointer.style.left = `-12px`;
+                this.tooltipPointer.style.right = null;
+                this.tooltipPointer.style.transform = 'rotate(270deg)';
+            }
+            if (position === TooltipPosition.LEFT) {
+                this.tooltipPointer.style.left = null;
+                this.tooltipPointer.style.right = `-12px`;
+                this.tooltipPointer.style.transform = 'rotate(90deg)';
+            }
+        }
+    };
+    /**
+     * Renders the tooltip.
+     */
+    renderTooltip = () => {
+        return (h("div", { class: { tooltip: true, [`${this.theme}`]: true }, role: "tooltip", "aria-hidden": this.showTooltip ? 'false' : 'true', "aria-live": this.showTooltip ? 'polite' : undefined }, h("div", { class: "tooltip-pointer", ref: (el) => (this.tooltipPointer = el) }), h("slot", null)));
+    };
     render() {
         return h(Host, { key: 'd9faa228dddd92aa8219df830b8e68673fc3613d', class: { visible: this.showTooltip } }, this.renderTooltip());
     }

package/dist/collection/components/views/tet-address-offers-view/tet-address-offers-view.js

@@ -6,37 +6,6 @@ import { processTranslations, t } from "../../../services/translations/index";
  */
 export class TetAddressOffersView {
     constructor() {
-        /**
-         * If set to `true`, will automatically run SAC after an address is selected.
-         */
-        this.autoSearchOffers = true;
-        this.checkServiceAvailability = () => {
-            if (!this.temporarySelectedAddress) {
-                return;
-            }
-            if (this.showAuthorizedAddresses && !this.noUserFound && this.userPersonalCode) {
-                this.assetAvailabilityAddresses.unselectAssetAddresses();
-            }
-            this.address = this.temporarySelectedAddress;
-        };
-        /**
-         * Assign `temporarySelectedAddress` to the one emitted by <tet-address-search>
-         * Reset `address` and the resulting <address-offers> component).
-         * Trigger SAC if an address was found by providing the `addressKey`. Only on the initial load.
-         *
-         * @param address
-         */
-        this.selectAddress = (address) => {
-            this.temporarySelectedAddress = address;
-            this.address = null;
-            if (this.showAuthorizedAddresses && !this.noUserFound && this.userPersonalCode) {
-                this.assetAvailabilityAddresses.unselectAssetAddresses();
-            }
-            if (!!this.addressKey && this.autoSearchOffers) {
-                this.checkServiceAvailability();
-                this.autoSearchOffers = false;
-            }
-        };
         this.language = 'lv';
         this.addressKey = '';
         this.theme = undefined;
@@ -51,6 +20,10 @@ export class TetAddressOffersView {
         this.accessibilityLabel = '';
         this.address = undefined;
     }
+    /**
+     * The element of the asset availability address component.
+     */
+    assetAvailabilityAddresses;
     /**
      * Looks for language change to update translations.
      * @param language
@@ -81,12 +54,47 @@ export class TetAddressOffersView {
         this.showContactForm = true;
         this.renderContactForm();
     }
+    /**
+     * If set to `true`, will automatically run SAC after an address is selected.
+     */
+    autoSearchOffers = true;
     /**
      * Lifecycle method.
      */
     async componentWillLoad() {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
+    /**
+     * Holds the selected address data before user presses "check availability".
+     */
+    temporarySelectedAddress;
+    checkServiceAvailability = () => {
+        if (!this.temporarySelectedAddress) {
+            return;
+        }
+        if (this.showAuthorizedAddresses && !this.noUserFound && this.userPersonalCode) {
+            this.assetAvailabilityAddresses.unselectAssetAddresses();
+        }
+        this.address = this.temporarySelectedAddress;
+    };
+    /**
+     * Assign `temporarySelectedAddress` to the one emitted by <tet-address-search>
+     * Reset `address` and the resulting <address-offers> component).
+     * Trigger SAC if an address was found by providing the `addressKey`. Only on the initial load.
+     *
+     * @param address
+     */
+    selectAddress = (address) => {
+        this.temporarySelectedAddress = address;
+        this.address = null;
+        if (this.showAuthorizedAddresses && !this.noUserFound && this.userPersonalCode) {
+            this.assetAvailabilityAddresses.unselectAssetAddresses();
+        }
+        if (!!this.addressKey && this.autoSearchOffers) {
+            this.checkServiceAvailability();
+            this.autoSearchOffers = false;
+        }
+    };
     /**
      * Renders header part of the address offers component.
      */
@@ -98,7 +106,7 @@ export class TetAddressOffersView {
      */
     renderAddressSearch() {
         const clickCallback = this.checkServiceAvailability.bind(this);
-        return (h("div", { class: "search-block" }, h("tet-address-search", Object.assign({ class: "search-block-input", newStyle: true, theme: this.theme, addressKey: this.addressKey, onAddressSelected: ({ detail }) => this.selectAddress(detail), language: this.language }, (this.accessibilityLabel ? { "accessibility-label": this.accessibilityLabel } : {}))), h("tet-button", { class: "search-block-button", theme: this.theme, size: "medium", clickCallback: clickCallback }, h("span", null, t('components-address-offers-view-check'))), h("tet-button", { class: "search-block-button mobile", theme: this.theme, size: "small", iconMode: true, clickCallback: clickCallback, iconName: "arrow-right" })));
+        return (h("div", { class: "search-block" }, h("tet-address-search", { class: "search-block-input", newStyle: true, theme: this.theme, addressKey: this.addressKey, onAddressSelected: ({ detail }) => this.selectAddress(detail), language: this.language, ...(this.accessibilityLabel ? { "accessibility-label": this.accessibilityLabel } : {}) }), h("tet-button", { class: "search-block-button", theme: this.theme, size: "medium", clickCallback: clickCallback }, h("span", null, t('components-address-offers-view-check'))), h("tet-button", { class: "search-block-button mobile", theme: this.theme, size: "small", iconMode: true, clickCallback: clickCallback, iconName: "arrow-right" })));
     }
     /**
      * Renders address offer available filters.

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

@@ -2,94 +2,6 @@ import { processTranslations, t } from "../../../../../services/translations/ind
 import { Host, forceUpdate, h } from "@stencil/core";
 export class TetB2bConfiguratorCart {
     constructor() {
-        /** @private The suffix for the price displayed - "€/mēn."). */
-        this.priceSuffix = '€/mēn.';
-        this.addStickyClassConditionally = () => {
-            if (this.context === 'checkout') {
-                return;
-            }
-            const rect = this.hostElement.getBoundingClientRect();
-            const { bottom, top } = rect;
-            const isTopVisible = top < window.innerHeight && top;
-            const isBottomVisible = bottom < window.innerHeight && bottom;
-            if (isTopVisible && !isBottomVisible && !this.isDesktopResolution) {
-                this.cartEl.classList.add('cart--sticky');
-            }
-            else {
-                this.cartEl.classList.remove('cart--sticky');
-            }
-        };
-        /**
-         * 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: blockOpen, header: block.name, theme: this.theme, transparentBackground: true }, h("div", { slot: "header", class: "block__header" }, h("div", { class: "block__header-row" }, h("div", null, block.name), h("div", { 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': true, 'summary--closed': !this.isAccordionOpen } }, 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" }, h("div", null, 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" }, h("div", null, `${summaryAmount} ${this.priceSuffix}`), h("span", { class: "summary__monthly-price-disclosure" }, ' ', t('components-b2b-cart-monthly-payment-disclosure'), ' '))), this.isAccordionOpen && h("slot", { name: "cta" })));
-        };
         this.theme = 'light';
         this.data = undefined;
         this.isCartEmpty = true;
@@ -101,6 +13,19 @@ export class TetB2bConfiguratorCart {
         this.primarySlotFilled = false;
         this.secondarySlotFilled = false;
     }
+    hostElement;
+    /** @private The suffix for the price displayed - "€/mēn."). */
+    priceSuffix = '€/mēn.';
+    /** @private Reference to cart element*/
+    cartEl;
+    /** @private Reference to outer accordion element*/
+    accordionEl;
+    /** @private Reference to 1st inner accordion element*/
+    primaryBlockEl;
+    /** @private Reference to 2nd inner accordion element*/
+    secondaryBlockEl;
+    /** An intersection observer for checking if cart is currently sticky to bottom. */
+    cartObserver;
     /**
      * Imperatively opens the main accordion when transitioning to desktop in 'edit' context.
      * Adds/removes sticky class on `isDesktopResolution` prop change
@@ -151,6 +76,92 @@ export class TetB2bConfiguratorCart {
             state == 'open' ? this.secondaryBlockEl.open() : this.secondaryBlockEl.close();
         }
     }
+    addStickyClassConditionally = () => {
+        if (this.context === 'checkout') {
+            return;
+        }
+        const rect = this.hostElement.getBoundingClientRect();
+        const { bottom, top } = rect;
+        const isTopVisible = top < window.innerHeight && top;
+        const isBottomVisible = bottom < window.innerHeight && bottom;
+        if (isTopVisible && !isBottomVisible && !this.isDesktopResolution) {
+            this.cartEl.classList.add('cart--sticky');
+        }
+        else {
+            this.cartEl.classList.remove('cart--sticky');
+        }
+    };
+    /**
+     * Updates `primarySlotFilled` or `secondarySlotFilled` based on assigned slot elements.
+     * @param e The slotchange event.
+     */
+    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.
+     */
+    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. */
+    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. */
+    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: blockOpen, header: block.name, theme: this.theme, transparentBackground: true }, h("div", { slot: "header", class: "block__header" }, h("div", { class: "block__header-row" }, h("div", null, block.name), h("div", { 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. */
+    renderSummary = () => {
+        const { summarySavings, summaryAmount, hasPrimaryNotification, hasSecondaryNotification } = this.data;
+        return (h("div", { class: { 'summary': true, 'summary--closed': !this.isAccordionOpen } }, 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" }, h("div", null, 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" }, h("div", null, `${summaryAmount} ${this.priceSuffix}`), h("span", { class: "summary__monthly-price-disclosure" }, ' ', t('components-b2b-cart-monthly-payment-disclosure'), ' '))), this.isAccordionOpen && h("slot", { name: "cta" })));
+    };
     render() {
         const cartTitle = t('components-b2b-cart-title');
         const isEditMode = this.context === 'edit';