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

package/dist/esm/tet-b2b-check-out-form_5.entry.js

@@ -1,14 +1,19 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-7f1e2a22.js';
-import { p as processTranslations, t as translate } from './translations-eff34607.js';
-import { R as RequiredValidator, P as PhoneNumberValidator } from './phone-99c2f297.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement, H as Host } from './index-950abbb7.js';
+import { p as processTranslations, t as translate } from './translations-baabae60.js';
+import { R as RequiredValidator, P as PhoneNumberValidator } from './phone-4b016684.js';
 import { a as a11yBtnClick } from './a11y-9b4d9fd4.js';
-import './typecheck-31fd6c02.js';
-import './http-codes-7faa9f6e.js';
+import './typecheck-4abf0258.js';
+import './http-codes-eb08ff6f.js';
 
 /**
  * The email validator class.
  */
 class EMailAddressValidator {
+    errorMessage;
+    /**
+     * The regex for the email validation.
+     */
+    emailAddressRegex = '^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$';
     /**
      * Constructor.
      *
@@ -16,10 +21,6 @@ class EMailAddressValidator {
      */
     constructor(errorMessage) {
         this.errorMessage = errorMessage;
-        /**
-         * The regex for the email validation.
-         */
-        this.emailAddressRegex = '^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$';
     }
     /**
      * Returns validation error message.
@@ -33,7 +34,7 @@ class EMailAddressValidator {
      * @param value
      */
     validate(value) {
-        const validateValue = value === null || value === void 0 ? void 0 : value.trim();
+        const validateValue = value?.trim();
         // A generic email address must meet pattern with @ and dot.
         return RegExp(this.emailAddressRegex).test(validateValue);
     }
@@ -49,6 +50,14 @@ const TetAvailabilityContactForm = class {
         this.language = 'lv';
         this.theme = undefined;
     }
+    /** Form element of component */
+    checkOutForm;
+    /** The application 'tet-dialog' element. */
+    dialogElement;
+    /** The extra field slot element. */
+    extraFieldsSlotElement;
+    /** Event emit when form filled successfully */
+    submitCheckOutForm;
     /**
      * The watch to update translations.
      * @param language
@@ -117,7 +126,7 @@ const TetAvailabilityContactForm = class {
      * @private
      */
     renderInput(id, label, placeholder, isPhoneNr) {
-        return (h("tet-input", Object.assign({ id: id, class: "modal-form-card__input", theme: this.theme, label: `${label} *`, placeholder: placeholder || label }, (isPhoneNr && { isPhoneNumber: true }), { validators: this.getValidators(label, isPhoneNr) })));
+        return (h("tet-input", { id: id, class: "modal-form-card__input", theme: this.theme, label: `${label} *`, placeholder: placeholder || label, ...(isPhoneNr && { isPhoneNumber: true }), validators: this.getValidators(label, isPhoneNr) }));
     }
     /** Validates all input fields and returns whether all of them are valid or not. */
     async validateInputFields() {
@@ -143,9 +152,9 @@ const TetAvailabilityContactForm = class {
         let emitValue = {};
         inputElements.forEach((item) => {
             const value = item.querySelector('input').value;
-            emitValue = Object.assign(Object.assign({}, emitValue), { [item.id]: value });
+            emitValue = { ...emitValue, [item.id]: value };
         });
-        this.submitCheckOutForm.emit(Object.assign(Object.assign({}, emitValue), this.extraFieldsSubmissionData));
+        this.submitCheckOutForm.emit({ ...emitValue, ...this.extraFieldsSubmissionData });
     }
     /** Returns the slotted `extra-fields` input elements with a provided id attribute. */
     get extraFieldsElements() {
@@ -199,66 +208,6 @@ const TetB2bCompareCard = class {
         registerInstance(this, hostRef);
         this.countChange = createEvent(this, "countChange", 7);
         this.selectedChange = createEvent(this, "selectedChange", 7);
-        /** @private The suffix for the price displayed - "€/mēn."). */
-        this.priceSuffix = '€/mēn.';
-        /**
-         * @private Initializes localCount based on options.counterOptions.defaultValue or defaults to 1.
-         */
-        this.initCount = () => {
-            var _a, _b, _c;
-            this.localCount = (_c = (_a = this.count) !== null && _a !== void 0 ? _a : (_b = this.options.counterOptions) === null || _b === void 0 ? void 0 : _b.defaultValue) !== null && _c !== void 0 ? _c : 1;
-        };
-        /**
-         * @private Updates localCount and emits the countChange event.
-         * @param newCount - The new count value to be emitted.
-         */
-        this.updateCountAndEmit = (newCount) => {
-            if (typeof newCount === 'number') {
-                this.localCount = newCount;
-            }
-            this.countChange.emit({ cardId: this.options.id, count: newCount });
-        };
-        /**
-         * @private Handles the card click event, setting localIsSelected to true and emitting selectedChange.
-         */
-        this.handleSelect = (e) => {
-            const isLinkOrDescendant = e.target.closest('a');
-            if (isLinkOrDescendant) {
-                return;
-            }
-            if (!this.localIsSelected) {
-                this.localIsSelected = true;
-                this.selectedChange.emit(true);
-            }
-        };
-        /**
-         * @private Handles the value change event from the nested tet-stepper-input component.
-         * @param detail - The event containing the new quantity value.
-         */
-        this.handleCounterValueChange = ({ detail }) => {
-            if (this.added) {
-                this.updateCountAndEmit(detail);
-            }
-            else {
-                this.localCount = detail;
-            }
-        };
-        /**
-         * @private Handles the "Add to Basket" action, stops event propagation, and emits the new count.
-         * @param e - The DOM event.
-         */
-        this.handleAdd = (e) => {
-            e.stopPropagation();
-            this.updateCountAndEmit(this.localCount);
-        };
-        /**
-         * @private Handles the "Remove from Basket" action, stops event propagation, and emits a null count.
-         * @param e - The DOM event.
-         */
-        this.handleRemove = (e) => {
-            e.stopPropagation();
-            this.updateCountAndEmit(null);
-        };
         this.localCount = 0;
         this.localIsSelected = false;
         this.isTablet = false;
@@ -267,6 +216,11 @@ const TetB2bCompareCard = class {
         this.count = undefined;
         this.isSelected = false;
     }
+    /** @private Tracks changes in the component's host element size to manage responsive state. */
+    resizeObserver;
+    /** @private The suffix for the price displayed - "€/mēn."). */
+    priceSuffix = '€/mēn.';
+    get hostElement() { return getElement(this); }
     /**
      * @private Signals whether the item is currently considered "added" to the cart.
      * Derived from the external 'count' prop being a defined number.
@@ -295,6 +249,16 @@ const TetB2bCompareCard = class {
             this.localIsSelected = newSelected;
         }
     }
+    /**
+     * Emitted when the user changes the quantity counter value and submits; or on card close event.
+     * @event
+     */
+    countChange;
+    /**
+     * Emitted when the card is clicked to change its selected state
+     * @event
+     */
+    selectedChange;
     componentWillLoad() {
         this.initCount();
         processTranslations('tet-components', 'lv').then(() => forceUpdate(this));
@@ -313,15 +277,72 @@ const TetB2bCompareCard = class {
             this.resizeObserver.disconnect();
         }
     }
+    /**
+     * @private Initializes localCount based on options.counterOptions.defaultValue or defaults to 1.
+     */
+    initCount = () => {
+        this.localCount = this.count ?? this.options.counterOptions?.defaultValue ?? 1;
+    };
+    /**
+     * @private Updates localCount and emits the countChange event.
+     * @param newCount - The new count value to be emitted.
+     */
+    updateCountAndEmit = (newCount) => {
+        if (typeof newCount === 'number') {
+            this.localCount = newCount;
+        }
+        this.countChange.emit({ cardId: this.options.id, count: newCount });
+    };
+    /**
+     * @private Handles the card click event, setting localIsSelected to true and emitting selectedChange.
+     */
+    handleSelect = (e) => {
+        const isLinkOrDescendant = e.target.closest('a');
+        if (isLinkOrDescendant) {
+            return;
+        }
+        if (!this.localIsSelected) {
+            this.localIsSelected = true;
+            this.selectedChange.emit(true);
+        }
+    };
+    /**
+     * @private Handles the value change event from the nested tet-stepper-input component.
+     * @param detail - The event containing the new quantity value.
+     */
+    handleCounterValueChange = ({ detail }) => {
+        if (this.added) {
+            this.updateCountAndEmit(detail);
+        }
+        else {
+            this.localCount = detail;
+        }
+    };
+    /**
+     * @private Handles the "Add to Basket" action, stops event propagation, and emits the new count.
+     * @param e - The DOM event.
+     */
+    handleAdd = (e) => {
+        e.stopPropagation();
+        this.updateCountAndEmit(this.localCount);
+    };
+    /**
+     * @private Handles the "Remove from Basket" action, stops event propagation, and emits a null count.
+     * @param e - The DOM event.
+     */
+    handleRemove = (e) => {
+        e.stopPropagation();
+        this.updateCountAndEmit(null);
+    };
     render() {
         const { localIsSelected, localCount, options, priceSuffix } = this;
         const { title, subtitle, isBestChoice, price, discountPrice, benefits, contract } = options;
-        const currentPrice = discountPrice !== null && discountPrice !== void 0 ? discountPrice : price;
+        const currentPrice = discountPrice ?? price;
         const currentTotal = (localCount * currentPrice).toFixed(2);
         const oldTotal = (localCount * price).toFixed(2);
         const detailsId = `details-${options.id}`;
         const titleId = `title-${options.id}`;
-        return (h(Host, { key: 'fb55819189417025a6ff7b17d927e82c0884bdab' }, h("div", { key: '01f724dcd984957286c3f4bbcd648c5a6cf5ac2d', class: { card__wrapper: isBestChoice } }, isBestChoice && (h("div", { key: 'bbfe753f9cda625a3722f92037dcfed2f71d69fd', class: { 'card__badge': true, 'card__badge--is-tablet': this.isTablet } }, translate('components-b2b-configurator-best-choice'))), h("div", Object.assign({ key: 'aa3ccc968da6e0c1c4d02dc707fa1fbb812f900a', class: { 'card': true, [`${this.theme}`]: true, 'card--selected': !!this.count || localIsSelected }, onClick: this.handleSelect, onKeyDown: a11yBtnClick, tabindex: 0, role: "button", "aria-expanded": localIsSelected }, (localIsSelected ? { 'aria-controls': detailsId } : {}), { "aria-labelledby": titleId }), h("section", { key: '7476d69d4f4420e2e7b7cefcdcf6bebac2f25a4b', class: { 'offer': true, 'offer--is-tablet': this.isTablet } }, h("div", { key: '5f87e22fad55417f0e24146452ee8f32c97c0bc7', class: "offer__header" }, h("div", { key: 'e43787318e1614bc0e77e3a0ef2623a9cf719763', class: { 'offer__top-info': true, 'offer__top-info--is-tablet': this.isTablet } }, h("h3", { key: '4e2b8e30f85bc06d7a6d5b3e4daec545371b78d2', id: titleId, class: { 'offer__title': true, 'offer__title--is-tablet': this.isTablet } }, title), h("div", { key: 'ee30c90972ee615bed5305de0b2a00ac1f2f987c', class: { 'offer__price': true, 'offer__price--is-tablet': this.isTablet } }, currentPrice.toFixed(2), h("span", { key: '852bcb2b6c1481c60bb5cced1a7f4aff1ab76004', class: { 'offer__price-suffix': true, 'offer__price-suffix--is-tablet': this.isTablet } }, ' ', h("span", { key: 'c3f227c198a670cb44e44427d202c52d13b8f9e6' }, priceSuffix)))), h("p", { key: 'd0baae9f2c3b1296540e0284556ec41c86364817', class: { 'offer__subtitle': true, 'offer__subtitle--is-tablet': this.isTablet } }, subtitle)), h("hr", { key: '5046b8ca91442bdcfa0b06ec384bbb8d3daff0e4', class: "divider divider--slim" }), h("tet-text-list", { key: 'e60899203c82d30f8936fa0643a961aaeb27663f', class: "offer__benefits", withIcon: true, listIcon: "tc-check", theme: this.theme }, benefits.map((benefit) => (h("span", null, benefit)))), contract && (h("div", { key: '69442b31d59e499906cf4962b4f3fc50df8ddb4c', class: "offer__contract-link" }, h("a", { key: 'd82dba7210d1af5493e3ac0bfd4a6d12a2865edc', class: { 'tet-link': true, [`${this.theme}`]: true }, href: contract, target: "_blank", rel: "noopener noreferrer" }, translate('components-b2b-configurator-contract-link-label'), h("span", { key: '974ef9b2a17ffe3335122d3ef0dd52c00f9d37ea', class: "sr-only" }, translate('components-a11y-open-link-in-new-window')))))), localIsSelected && [
+        return (h(Host, { key: 'fb55819189417025a6ff7b17d927e82c0884bdab' }, h("div", { key: '01f724dcd984957286c3f4bbcd648c5a6cf5ac2d', class: { card__wrapper: isBestChoice } }, isBestChoice && (h("div", { key: 'bbfe753f9cda625a3722f92037dcfed2f71d69fd', class: { 'card__badge': true, 'card__badge--is-tablet': this.isTablet } }, translate('components-b2b-configurator-best-choice'))), h("div", { key: 'aa3ccc968da6e0c1c4d02dc707fa1fbb812f900a', class: { 'card': true, [`${this.theme}`]: true, 'card--selected': !!this.count || localIsSelected }, onClick: this.handleSelect, onKeyDown: a11yBtnClick, tabindex: 0, role: "button", "aria-expanded": localIsSelected, ...(localIsSelected ? { 'aria-controls': detailsId } : {}), "aria-labelledby": titleId }, h("section", { key: '7476d69d4f4420e2e7b7cefcdcf6bebac2f25a4b', class: { 'offer': true, 'offer--is-tablet': this.isTablet } }, h("div", { key: '5f87e22fad55417f0e24146452ee8f32c97c0bc7', class: "offer__header" }, h("div", { key: 'e43787318e1614bc0e77e3a0ef2623a9cf719763', class: { 'offer__top-info': true, 'offer__top-info--is-tablet': this.isTablet } }, h("h3", { key: '4e2b8e30f85bc06d7a6d5b3e4daec545371b78d2', id: titleId, class: { 'offer__title': true, 'offer__title--is-tablet': this.isTablet } }, title), h("div", { key: 'ee30c90972ee615bed5305de0b2a00ac1f2f987c', class: { 'offer__price': true, 'offer__price--is-tablet': this.isTablet } }, currentPrice.toFixed(2), h("span", { key: '852bcb2b6c1481c60bb5cced1a7f4aff1ab76004', class: { 'offer__price-suffix': true, 'offer__price-suffix--is-tablet': this.isTablet } }, ' ', h("span", { key: 'c3f227c198a670cb44e44427d202c52d13b8f9e6' }, priceSuffix)))), h("p", { key: 'd0baae9f2c3b1296540e0284556ec41c86364817', class: { 'offer__subtitle': true, 'offer__subtitle--is-tablet': this.isTablet } }, subtitle)), h("hr", { key: '5046b8ca91442bdcfa0b06ec384bbb8d3daff0e4', class: "divider divider--slim" }), h("tet-text-list", { key: 'e60899203c82d30f8936fa0643a961aaeb27663f', class: "offer__benefits", withIcon: true, listIcon: "tc-check", theme: this.theme }, benefits.map((benefit) => (h("span", null, benefit)))), contract && (h("div", { key: '69442b31d59e499906cf4962b4f3fc50df8ddb4c', class: "offer__contract-link" }, h("a", { key: 'd82dba7210d1af5493e3ac0bfd4a6d12a2865edc', class: { 'tet-link': true, [`${this.theme}`]: true }, href: contract, target: "_blank", rel: "noopener noreferrer" }, translate('components-b2b-configurator-contract-link-label'), h("span", { key: '974ef9b2a17ffe3335122d3ef0dd52c00f9d37ea', class: "sr-only" }, translate('components-a11y-open-link-in-new-window')))))), localIsSelected && [
             h("hr", { key: '0c8262c7071b3d29b60c3b0585f4267995a6ebc9', class: "divider" }),
             h("section", { key: '1b769a5109c6f3fd630db105815df20d61549476', id: detailsId, role: "region", "aria-labelledby": titleId, class: { 'details': true, 'details--is-tablet': this.isTablet } }, h("div", { key: 'f1d0f98651555a8ea20df42a59748db9531592a6', class: { 'details__price-block': true, 'details__price-block--is-tablet': this.isTablet } }, h("span", { key: '49bf16ce3e1d17ea945c09c55bacdcbb0ba625ca' }, translate('components-b2b-configurator-monthly-payment')), h("div", { key: '771f52eb3c4753ffe032d0a9987abc9d610acddd', class: "details__total", "aria-live": "polite" }, h("div", { key: '923e856154fb08a2d1fd2caae03e0dcc997296d4', class: "details__total--current" }, currentTotal, " ", priceSuffix), discountPrice != null && discountPrice < price && (h("div", { key: 'd09b58c1a939f5afb1c0534cd860fe016144e7e8', class: "details__total--original" }, oldTotal, " ", priceSuffix)))), h("hr", { key: '9287063fddec7add9799ca5aefd87af1ae67a145', class: "divider" }), h("div", { key: '2b62b079963f57098fff47e0974eb9a71e17c7c1', class: { 'details__actions': true, 'details__actions--is-tablet': this.isTablet } }, h("div", { key: 'c32ee4619ac0081ad2c26a5297a519ac2909e5a2', class: "details__quantity-control" }, options.counterOptions && [
                 h("span", { key: '4be740f29a8ae2549282bb1374ff66ee2e1d0be6', id: `qty-label-${options.id}`, class: "details__quantity-label" }, translate(options.counterOptions.label)),
@@ -334,7 +355,6 @@ const TetB2bCompareCard = class {
                 : translate('components-b2b-configurator-add-to-basket'))))
         ]))));
     }
-    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "count": ["syncCount"],
         "isSelected": ["syncSelected"]
@@ -348,94 +368,6 @@ const TetB2bConfiguratorCartStyle0 = tetB2bConfiguratorCartCss;
 const TetB2bConfiguratorCart = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /** @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" }, translate('components-b2b-cart-empty-title')), h("div", { class: "empty-cart__description" }, translate('components-b2b-cart-empty-description'))));
-        };
-        /** Renders the two inner service accordions based on slot content. */
-        this.renderContent = () => {
-            const blocks = [
-                { name: translate('components-b2b-cart-primary-service-title'), type: 'primary' },
-                { name: translate('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
-                    ? translate('components-b2b-cart-service-singular')
-                    : translate('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 ? translate('components-b2b-cart-accordion-less') : translate('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: translate('components-b2b-cart-primary-notification-title'), content: translate('components-b2b-cart-primary-notification-description'), allowClose: false, theme: this.theme, icon: null })), hasSecondaryNotification && (h("tet-notification", { class: "summary__notification", type: "neutral", headerTitle: translate('components-b2b-cart-secondary-notification-title'), content: translate('components-b2b-cart-secondary-notification-description'), allowClose: false, theme: this.theme })), this.isAccordionOpen && (h("div", { class: "summary__savings" }, h("div", null, translate('components-b2b-cart-savings-title')), h("span", { class: "summary__savings-amount" }, " ", `${summarySavings} ${this.priceSuffix}`))), h("div", { class: "summary__monthly-payment" }, translate('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" }, ' ', translate('components-b2b-cart-monthly-payment-disclosure'), ' '))), this.isAccordionOpen && h("slot", { name: "cta" })));
-        };
         this.theme = 'light';
         this.data = undefined;
         this.isCartEmpty = true;
@@ -447,6 +379,19 @@ const TetB2bConfiguratorCart = class {
         this.primarySlotFilled = false;
         this.secondarySlotFilled = false;
     }
+    get hostElement() { return getElement(this); }
+    /** @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
@@ -497,6 +442,92 @@ const TetB2bConfiguratorCart = class {
             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" }, translate('components-b2b-cart-empty-title')), h("div", { class: "empty-cart__description" }, translate('components-b2b-cart-empty-description'))));
+    };
+    /** Renders the two inner service accordions based on slot content. */
+    renderContent = () => {
+        const blocks = [
+            { name: translate('components-b2b-cart-primary-service-title'), type: 'primary' },
+            { name: translate('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
+                ? translate('components-b2b-cart-service-singular')
+                : translate('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 ? translate('components-b2b-cart-accordion-less') : translate('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: translate('components-b2b-cart-primary-notification-title'), content: translate('components-b2b-cart-primary-notification-description'), allowClose: false, theme: this.theme, icon: null })), hasSecondaryNotification && (h("tet-notification", { class: "summary__notification", type: "neutral", headerTitle: translate('components-b2b-cart-secondary-notification-title'), content: translate('components-b2b-cart-secondary-notification-description'), allowClose: false, theme: this.theme })), this.isAccordionOpen && (h("div", { class: "summary__savings" }, h("div", null, translate('components-b2b-cart-savings-title')), h("span", { class: "summary__savings-amount" }, " ", `${summarySavings} ${this.priceSuffix}`))), h("div", { class: "summary__monthly-payment" }, translate('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" }, ' ', translate('components-b2b-cart-monthly-payment-disclosure'), ' '))), this.isAccordionOpen && h("slot", { name: "cta" })));
+    };
     render() {
         const cartTitle = translate('components-b2b-cart-title');
         const isEditMode = this.context === 'edit';
@@ -509,7 +540,6 @@ const TetB2bConfiguratorCart = class {
                 'cart__accordion--closed': !this.isAccordionOpen
             }, isOpen: this.isAccordionOpen, onOpenChanged: this.handleAccordionChanged, header: cartTitle, theme: this.theme, transparentBackground: true, indicatorDirection: this.isDesktopResolution || isCheckoutMode ? 'down' : 'up' }, h("div", { key: '2593ac6fded70db5e0356d4eac9be05ec30b3d25', class: `cart__title--${this.context}` }, cartTitle), h("div", { key: 'd01c8e52bbe63de3aad45c9795907ec8f753914d', class: { cart__content: true, [`cart__content--${this.context}`]: true } }, this.isCartEmpty ? this.renderEmptyContent() : [this.renderContent()])), showSummary && this.renderSummary())));
     }
-    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "isDesktopResolution": ["openAccordionOnResolutionChange"],
         "isCartEmpty": ["checkStickyClassOnCartEmptyChange"]
@@ -524,66 +554,69 @@ const TetBusinessNavigation = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.menuClickEvent = createEvent(this, "menu-click-event", 7);
-        /**
-         * Initialises the mouse drag.
-         * @param {MouseEvent} event Current mouse event.
-         */
-        this.onContainerMouseDown = (event) => {
-            this.isPointerDown = true;
-            this.positions = {
-                scrollLeft: this.navigationContainer.scrollLeft,
-                mouseX: event.clientX
-            };
-            this.navigationContainer.addEventListener('mousemove', this.onContainerMouseMove);
-            this.navigationContainer.addEventListener('mouseup', this.onContainerMouseUp);
-            this.navigationContainer.addEventListener('mouseleave', this.onContainerMouseUp);
-        };
-        /**
-         * Scrolls the `navigationContainer` on mouse drag.
-         * @param {MouseEvent} e Current mouse event.
-         */
-        this.onContainerMouseMove = (e) => {
-            e.preventDefault();
-            const mouseButton = e.buttons;
-            this.isPointerDown = mouseButton === 1;
-            if (!this.isPointerDown) {
-                this.onContainerMouseUp();
-                return;
-            }
-            const deltaX = e.clientX - this.positions.mouseX;
-            this.navigationContainer.scrollTo(this.positions.scrollLeft - deltaX, 0);
-        };
-        /**
-         * Removes mouse drag events.
-         */
-        this.onContainerMouseUp = () => {
-            this.isPointerDown = false;
-            this.navigationContainer.removeEventListener('mousemove', this.onContainerMouseMove);
-            this.navigationContainer.removeEventListener('mouseup', this.onContainerMouseUp);
-            this.navigationContainer.removeEventListener('mouseleave', this.onContainerMouseUp);
-        };
-        /** Render menu item */
-        this.renderMenuItem = (menuItem) => {
-            const { id, icon, name } = menuItem;
-            return (h("button", { key: id, class: { 'business-navigation-item': true, 'selected': this.selectedItemId === id }, onClick: () => this.selectMenuItem(id) }, icon && h("tet-icon", { class: "business-navigation-item__icon", name: icon }), h("span", { class: "business-navigation-item__title" }, name)));
-        };
         this.menuItems = undefined;
         this.theme = 'light';
         this.selectedItemId = undefined;
         this.positions = { scrollLeft: 0, mouseX: 0 };
     }
+    navigationContainer;
+    isPointerDown;
+    /** Event emitter for menu item click passing menu id */
+    menuClickEvent;
     /** Method to run on menu item selection */
     async selectMenuItem(id) {
         this.selectedItemId = id;
         this.menuClickEvent.emit({ id });
     }
     componentWillLoad() {
-        var _a;
         if (!this.menuItems || this.menuItems.length === 0) {
             return;
         }
-        this.selectedItemId = ((_a = this.menuItems.find((item) => item.selected === true)) === null || _a === void 0 ? void 0 : _a.id) || this.menuItems[0].id;
+        this.selectedItemId = this.menuItems.find((item) => item.selected === true)?.id || this.menuItems[0].id;
     }
+    /**
+     * Initialises the mouse drag.
+     * @param {MouseEvent} event Current mouse event.
+     */
+    onContainerMouseDown = (event) => {
+        this.isPointerDown = true;
+        this.positions = {
+            scrollLeft: this.navigationContainer.scrollLeft,
+            mouseX: event.clientX
+        };
+        this.navigationContainer.addEventListener('mousemove', this.onContainerMouseMove);
+        this.navigationContainer.addEventListener('mouseup', this.onContainerMouseUp);
+        this.navigationContainer.addEventListener('mouseleave', this.onContainerMouseUp);
+    };
+    /**
+     * Scrolls the `navigationContainer` on mouse drag.
+     * @param {MouseEvent} e Current mouse event.
+     */
+    onContainerMouseMove = (e) => {
+        e.preventDefault();
+        const mouseButton = e.buttons;
+        this.isPointerDown = mouseButton === 1;
+        if (!this.isPointerDown) {
+            this.onContainerMouseUp();
+            return;
+        }
+        const deltaX = e.clientX - this.positions.mouseX;
+        this.navigationContainer.scrollTo(this.positions.scrollLeft - deltaX, 0);
+    };
+    /**
+     * Removes mouse drag events.
+     */
+    onContainerMouseUp = () => {
+        this.isPointerDown = false;
+        this.navigationContainer.removeEventListener('mousemove', this.onContainerMouseMove);
+        this.navigationContainer.removeEventListener('mouseup', this.onContainerMouseUp);
+        this.navigationContainer.removeEventListener('mouseleave', this.onContainerMouseUp);
+    };
+    /** Render menu item */
+    renderMenuItem = (menuItem) => {
+        const { id, icon, name } = menuItem;
+        return (h("button", { key: id, class: { 'business-navigation-item': true, 'selected': this.selectedItemId === id }, onClick: () => this.selectMenuItem(id) }, icon && h("tet-icon", { class: "business-navigation-item__icon", name: icon }), h("span", { class: "business-navigation-item__title" }, name)));
+    };
     /** Render Functional Component*/
     render() {
         const { menuItems, theme } = this;
@@ -601,38 +634,6 @@ const TetBusinessSummaryCardComponent = class {
         this.editButtonClick = createEvent(this, "editButtonClick", 7);
         this.deleteButtonClick = createEvent(this, "deleteButtonClick", 7);
         this.amountChange = createEvent(this, "amountChange", 7);
-        /** Function to render stepper label if provided */
-        this.renderLabel = (withValue) => {
-            const { stepperLabel, value } = this;
-            if (!stepperLabel) {
-                return;
-            }
-            if (withValue) {
-                return (h("span", { class: "contract-term" }, stepperLabel, ": ", value));
-            }
-            else {
-                return h("span", { class: "stepper-label" }, stepperLabel);
-            }
-        };
-        /** Render stepper if necessary */
-        this.renderStepper = () => {
-            const { withStepper, theme, value, minValue, maxValue } = this;
-            if (!withStepper) {
-                return;
-            }
-            return (h("div", { class: "stepper-wrapper" }, this.renderLabel(false), h("tet-stepper-input", { class: "business-summary-card__stepper", theme: theme, value: value, step: 1, min: minValue, max: maxValue, onInputValueChanged: (e) => {
-                    this.value = e.detail;
-                    this.amountChange.emit(e.detail);
-                } })));
-        };
-        /** Render Edit or Delete Icon Button */
-        this.renderIconButton = (type) => {
-            const buttonType = type === 'tc-edit-box' ? 'edit' : 'delete';
-            const buttonClickEvent = (e) => {
-                type === 'tc-edit-box' ? this.editButtonClick.emit(e) : this.deleteButtonClick.emit(e);
-            };
-            return (h("button", { class: "icon-button", onClick: (e) => buttonClickEvent(e), onKeyDown: a11yBtnClick }, h("tet-icon", { class: buttonType, name: type, focusable: false })));
-        };
         this.productName = undefined;
         this.price = undefined;
         this.productDescription = undefined;
@@ -648,9 +649,47 @@ const TetBusinessSummaryCardComponent = class {
         this.context = 'edit';
         this.language = 'lv';
     }
+    /** Emit event when Edit button clicked */
+    editButtonClick;
+    /** Emit event when Delete button clicked */
+    deleteButtonClick;
+    /** Emit event when amount of products changed */
+    amountChange;
     async componentWillLoad() {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
+    /** Function to render stepper label if provided */
+    renderLabel = (withValue) => {
+        const { stepperLabel, value } = this;
+        if (!stepperLabel) {
+            return;
+        }
+        if (withValue) {
+            return (h("span", { class: "contract-term" }, stepperLabel, ": ", value));
+        }
+        else {
+            return h("span", { class: "stepper-label" }, stepperLabel);
+        }
+    };
+    /** Render stepper if necessary */
+    renderStepper = () => {
+        const { withStepper, theme, value, minValue, maxValue } = this;
+        if (!withStepper) {
+            return;
+        }
+        return (h("div", { class: "stepper-wrapper" }, this.renderLabel(false), h("tet-stepper-input", { class: "business-summary-card__stepper", theme: theme, value: value, step: 1, min: minValue, max: maxValue, onInputValueChanged: (e) => {
+                this.value = e.detail;
+                this.amountChange.emit(e.detail);
+            } })));
+    };
+    /** Render Edit or Delete Icon Button */
+    renderIconButton = (type) => {
+        const buttonType = type === 'tc-edit-box' ? 'edit' : 'delete';
+        const buttonClickEvent = (e) => {
+            type === 'tc-edit-box' ? this.editButtonClick.emit(e) : this.deleteButtonClick.emit(e);
+        };
+        return (h("button", { class: "icon-button", onClick: (e) => buttonClickEvent(e), onKeyDown: a11yBtnClick }, h("tet-icon", { class: buttonType, name: type, focusable: false })));
+    };
     /** Return functional Component */
     render() {
         const { productName, price, productDescription, discountPrice, currency, contractTerm, theme } = this;