@tet/tet-components 1.3.146-testing → 1.3.147-testing

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

@@ -0,0 +1,612 @@
+import { b2bConfigurator } from "../../../services/api/services/b2b-configurator/b2b-configurator";
+import { ensureMinDuration } from "../../../services/utils/minimum-duration-time";
+import { Host, h } from "@stencil/core";
+import { addToCart, b2bState, getCart, initData, removeFromCart, resetCart } from "./b2b-configurator.store";
+import { t } from "../../../services/translations/index";
+/** Constant with value X, that will be used to show skeleton fox >=X ms amount of time. */
+const MIN_LOAD_TIME = 500;
+/** Constant to use in desktop resolution checker. Should be same as one used in SCSS media query */
+const DESKTOP_BREAKPOINT = 1024;
+export class TetB2bConfigurator {
+    constructor() {
+        /** @private The suffix for the price displayed - "€/mēn."). */
+        this.priceSuffix = '€/mēn.';
+        /** Syncs desktop resolution with state variable */
+        this.checkDesktopResolution = () => {
+            this.isDesktopResolution = window.innerWidth >= DESKTOP_BREAKPOINT;
+        };
+        /** Fetches the data and passes it to Stencil store */
+        this.fetchData = async () => {
+            const data = await b2bConfigurator();
+            initData(data);
+        };
+        /** Renders the placeholdes/skeleton */
+        this.renderPlaceholder = () => {
+            const darkTheme = this.theme === 'dark';
+            return [
+                h("div", { class: "offer placeholder" }, h("div", { style: { padding: this.isDesktopResolution ? '1.5rem' : '1rem' } }, h("tet-placeholder", { class: "placeholder", height: this.isDesktopResolution ? '2rem' : '1.5rem', darkTheme: darkTheme })), h("div", { class: "offer__content" }, h("tet-placeholder", { class: "placeholder offer__navigation", height: this.isDesktopResolution ? '48rem' : ' 2.25rem', darkTheme: darkTheme, style: { margin: '0' } }), h("div", { class: "offer__cards" }, h("div", { class: "offer__cards-list" }, h("tet-placeholder", { class: "placeholder", height: "3rem", darkTheme: darkTheme }), h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }), h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }), h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }), h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }))))),
+                h("div", { class: "cart cart--empty", style: {
+                        'padding': '1.5rem 1rem 1rem',
+                        'background-color': `var(--b2b-background-color)`
+                    } }, h("tet-placeholder", { class: "placeholder", height: "12.75rem", darkTheme: darkTheme }))
+            ];
+        };
+        /**
+         * Handles event form navigation and sets currently active categories
+         * @param e
+         * @returns
+         */
+        this.categoryClickHandler = (e) => {
+            const { id } = e.detail;
+            const category = this.getCategoryById(id);
+            if (!category) {
+                return;
+            }
+            if (category.type === 'primary') {
+                this.activePrimaryCategoryId = id;
+            }
+            else {
+                this.activeSecondaryCategoryId = id;
+            }
+        };
+        /** Renders the offer section */
+        this.renderOffer = () => {
+            const blocks = [
+                { name: t('components-b2b-offer-primary-title'), type: 'primary' },
+                { name: t('components-b2b-offer-secondary-title'), type: 'secondary' }
+            ];
+            return (h("div", { class: { offer: true, [`offer--${this.theme}`]: true } }, blocks.map((block) => {
+                const menuItems = b2bState.data
+                    .filter((item) => item.type === block.type)
+                    .map((category) => {
+                    const { id, name, icon } = category;
+                    const selected = id === this.activePrimaryCategoryId || id === this.activeSecondaryCategoryId;
+                    return { id, name, icon, selected };
+                });
+                const accRefCallback = (el) => {
+                    if (block.type === 'primary') {
+                        this.primaryAccordionEl = el;
+                    }
+                    else {
+                        this.secondaryAccordionEl = el;
+                    }
+                };
+                const navRefCallback = (el) => {
+                    if (block.type === 'primary') {
+                        this.primaryNavEl = el;
+                    }
+                    else {
+                        this.secondaryNavEl = el;
+                    }
+                };
+                return (h("tet-accordion", { ref: accRefCallback, key: block.type, class: "offer__block", isOpen: block.type === 'primary', header: block.name, withBorder: true, theme: this.theme, transparentBackground: true }, h("div", { class: "offer__content" }, h("div", { class: "offer__navigation" }, h("tet-business-navigation", { ref: navRefCallback, menuItems: menuItems, theme: this.theme, "onMenu-click-event": this.categoryClickHandler })), this.renderCards(block.type))));
+            })));
+        };
+        /**
+         * Finds category by id. Returns category or undefined.
+         * @param categoryId
+         * @returns
+         */
+        this.getCategoryById = (categoryId) => {
+            return b2bState.data.find((category) => category.id === categoryId);
+        };
+        /**
+         * Event, emitted on compare link click with the relevant modal Id
+         * @param categoryId
+         * @returns
+         */
+        this.onCompareLinkClick = (categoryId) => {
+            const category = this.getCategoryById(categoryId);
+            if (!category || !category.modalScreenId) {
+                return;
+            }
+            this.compareLinkClick.emit(category.modalScreenId);
+        };
+        /**
+         * Handles card selection (aka. oepen state). Checks for single|multi choice
+         * @param cardId
+         * @param categoryId
+         * @returns
+         */
+        this.handleCardSelected = (cardId, categoryId) => {
+            const category = this.getCategoryById(categoryId);
+            if (!category) {
+                return;
+            }
+            const { type, allowMultipleChoice } = category;
+            if (type === 'primary') {
+                if (this.selectedPrimaryCards.includes(cardId)) {
+                    return;
+                }
+                this.selectedPrimaryCards = allowMultipleChoice ? [...this.selectedPrimaryCards, cardId] : [cardId];
+            }
+            else {
+                if (this.selectedSecondaryCards.includes(cardId)) {
+                    return;
+                }
+                this.selectedSecondaryCards = allowMultipleChoice ? [...this.selectedSecondaryCards, cardId] : [cardId];
+            }
+        };
+        /**
+         * Updates product in cart (add, edit, remove)
+         * In desktop mode - changes state of summary cart's accordions
+         * @param e
+         * @param categoryId
+         */
+        this.handleProductCountChanged = async (e, categoryId) => {
+            const { cardId, count } = e.detail;
+            const productCategory = this.getCategoryById(categoryId);
+            if (!productCategory || b2bState.cart.get(cardId) === count) {
+                return;
+            }
+            if (!count) {
+                this.itemToRemove = cardId;
+                this.confirmationDialogEl.open();
+                return;
+            }
+            if (!productCategory.allowMultipleChoice) {
+                productCategory.products.forEach((product) => product.productCode !== cardId && removeFromCart(product.productCode));
+            }
+            addToCart(cardId, count);
+            if (this.isDesktopResolution) {
+                this.cartEl.changeBlockState(productCategory.type, 'open');
+                this.cartEl.changeBlockState(productCategory.type === 'primary' ? 'secondary' : 'primary', 'close');
+            }
+        };
+        /** Resets itemId to be removed when confirmation dialog is closed */
+        this.onConfirmationClose = () => {
+            this.itemToRemove = null;
+        };
+        /** Renders confirmation dialog, shown on product removal action */
+        this.renderConfirmationDialog = () => {
+            return (h("tet-dialog", { ref: (el) => (this.confirmationDialogEl = el), class: this.theme, closeOnOverlayClick: false, onCloseDialog: this.onConfirmationClose, theme: this.theme }, h("div", { class: "action-dialog" }, h("tet-icon", { class: "action-dialog__icon action-dialog__attention-icon", name: "attention" }), h("div", { class: "action-dialog__title" }, t('components-b2b-item-remove-confirmation-title'))), h("div", { slot: "footer", class: "action-dialog__footer" }, h("tet-button", { type: "secondary", theme: this.theme, size: "large", onClick: () => this.confirmationDialogEl.close() }, t('components-b2b-item-remove-confirmation-decline')), h("tet-button", { type: "primary", theme: this.theme, size: "large", iconName: "tc-trash", iconPosition: "left", onClick: () => {
+                    removeFromCart(this.itemToRemove);
+                    this.confirmationDialogEl.close();
+                } }, t('components-b2b-item-remove-confirmation-accept')))));
+        };
+        /** Performs action to start again */
+        this.resetState = () => {
+            resetCart();
+            this.checkoutAttempted = false;
+            this.primaryAccordionEl.open();
+            this.secondaryAccordionEl.close();
+        };
+        /** Renders dialog, shown after form submit */
+        this.renderSubmissionStateDialog = () => {
+            const isFormSubmitLoading = this.formState === 'loading';
+            const successClose = () => {
+                this.resetState();
+                this.successCloseClick.emit();
+                this.submissionStateDialogEl.close();
+            };
+            const content = isFormSubmitLoading ? (h("div", { class: "action-dialog" }, h("tet-spinner", { theme: this.theme }), h("div", { class: "action-dialog__title" }, t('components-b2b-loading-dialog-title')), h("div", { class: "action-dialog__description" }, t('components-b2b-loading-dialog-description')))) : ([
+                h("div", { class: "action-dialog" }, h("tet-icon", { class: "action-dialog__icon action-dialog__success-icon", name: "tc-check-circle" }), h("div", { class: "action-dialog__title" }, t('components-b2b-success-dialog-title')), h("div", { class: "action-dialog__description" }, t('components-b2b-success-dialog-description'))),
+                h("div", { slot: "footer", class: "action-dialog__footer" }, h("tet-button", { type: "secondary", theme: this.theme, size: "large", onClick: successClose }, h("div", { class: "action-dialog__button-text" }, t('components-b2b-success-dialog-close'))), h("tet-button", { type: "primary", theme: this.theme, size: "large", onClick: () => {
+                        this.resetState();
+                        this.submissionStateDialogEl.close();
+                    } }, h("div", { class: "action-dialog__button-text" }, t('components-b2b-success-dialog-start-again'))))
+            ]);
+            return (h("tet-dialog", { ref: (el) => (this.submissionStateDialogEl = el), class: { [this.theme]: true, 'action-dialog--loading': isFormSubmitLoading }, closeOnOverlayClick: false, closeOnEscape: !isFormSubmitLoading, hideCloseButton: isFormSubmitLoading, theme: this.theme, onCloseDialog: this.formState === 'success' ? successClose : this.submissionStateDialogEl.close }, content));
+        };
+        /**
+         * Renders offer section cards for the given category type
+         * @param categoryType The type of category block to render
+         * @returns
+         */
+        this.renderCards = (categoryType) => {
+            var _a;
+            const activeCategoryId = categoryType === 'primary' ? this.activePrimaryCategoryId : this.activeSecondaryCategoryId;
+            const selectedCards = categoryType === 'primary' ? this.selectedPrimaryCards : this.selectedSecondaryCards;
+            const products = ((_a = this.getCategoryById(activeCategoryId)) === null || _a === void 0 ? void 0 : _a.products) || [];
+            const cards = products.map((product) => {
+                var _a, _b;
+                const { productCode: id, name: { lv: title }, description: { lv: subtitle }, amount: price, b2bConfiguratorProduct: { discountAmount: discountPrice, selectionType, defaultValue, minValue, maxValue, translationKey: label }, benefits: { lv: benefits }, contracts } = product;
+                const isBestChoice = !!((_a = product.attributes.find((attribute) => attribute.key === 'isBestChoice')) === null || _a === void 0 ? void 0 : _a.value);
+                const counterOptions = selectionType === 'single'
+                    ? undefined
+                    : {
+                        defaultValue,
+                        minValue,
+                        maxValue,
+                        label
+                    };
+                const options = {
+                    id,
+                    title,
+                    subtitle,
+                    isBestChoice,
+                    price,
+                    discountPrice,
+                    benefits: benefits.split('\n'),
+                    contract: (_b = contracts[0]) === null || _b === void 0 ? void 0 : _b.contract,
+                    counterOptions
+                };
+                const isSelected = selectedCards.includes(id);
+                return (h("tet-b2b-compare-card", { options: options, theme: this.theme, key: id, isSelected: isSelected, onSelectedChange: () => this.handleCardSelected(id, activeCategoryId), count: b2bState.cart.get(id), onCountChange: (e) => this.handleProductCountChanged(e, activeCategoryId) }));
+            });
+            return (h("div", { class: "offer__cards" }, h("div", { class: "offer__cards-header" }, h("div", { class: "offer__cards-title" }, t('components-b2b-offer-product-list-title')), h("button", { class: { 'button-reset': true, 'compare__button': true, [`${this.theme}`]: true }, onClick: () => {
+                    this.onCompareLinkClick(activeCategoryId);
+                } }, h("span", { class: { 'compare__text': true, 'tet-link': true, [`${this.theme}`]: true } }, t('components-b2b-offer-compare-link-text')), h("div", { class: "compare__icon-wrapper" }, h("tet-icon", { class: "compare__icon", name: "tc-info-circle-outline", theme: this.theme })))), h("div", { class: "offer__cards-list" }, cards)));
+        };
+        /**
+         * Translates Cart "count change" event and uses in the general "count change" handler
+         * @param cardId
+         * @param count
+         * @param categoryId
+         */
+        this.handleCartProductCountChange = (cardId, count, categoryId) => {
+            const updateEvent = { detail: { cardId, count } };
+            this.handleProductCountChanged(updateEvent, categoryId);
+        };
+        /**
+         * Navigates user in offer section by opening accordion and selecting the specific product which was clicked in cart component
+         * @param categoryId
+         * @param productCode
+         * @returns
+         */
+        this.goToProduct = async (categoryId, productCode) => {
+            const category = this.getCategoryById(categoryId);
+            if (!category) {
+                return;
+            }
+            if (category.type === 'primary') {
+                await this.primaryAccordionEl.open();
+                await this.primaryNavEl.selectMenuItem(categoryId);
+                this.primaryAccordionEl.scrollIntoView({ behavior: 'smooth' });
+            }
+            else if (category.type === 'secondary') {
+                await this.secondaryAccordionEl.open();
+                await this.secondaryNavEl.selectMenuItem(categoryId);
+                this.secondaryAccordionEl.scrollIntoView({ behavior: 'smooth' });
+            }
+            setTimeout(() => {
+                this.handleCardSelected(productCode, categoryId);
+            }, 0);
+        };
+        /**
+         * Renders list of Cards in Cart depending on context
+         * @param context
+         * @returns
+         */
+        this.renderCartCardsList = (context) => {
+            const categoryTypes = ['primary', 'secondary'];
+            const productCodeToSummaryCard = (productCode) => {
+                const count = b2bState.cart.get(productCode);
+                const details = b2bState.productDetails.get(productCode);
+                if (count === undefined || !details) {
+                    return null;
+                }
+                const { name, amount, description, discountAmount, categoryName, categoryType, categoryId, b2bConfiguratorProduct } = details;
+                const productDescription = categoryType === 'primary' ? description : categoryName;
+                const { selectionType, term, minValue, maxValue, translationKey } = b2bConfiguratorProduct;
+                const activeCategoryId = categoryType === 'primary' ? this.activePrimaryCategoryId : this.activeSecondaryCategoryId;
+                return (h("tet-business-summary-card", { key: productCode, productName: name, price: amount, productDescription: productDescription, discountPrice: discountAmount, currency: this.priceSuffix, contractTerm: term, theme: this.theme, withStepper: selectionType === 'number', value: count, minValue: minValue, maxValue: maxValue, stepperLabel: t(translationKey || ''), context: context, onAmountChange: (e) => this.handleCartProductCountChange(productCode, e.detail, activeCategoryId), onDeleteButtonClick: () => this.handleCartProductCountChange(productCode, 0, activeCategoryId), onEditButtonClick: () => this.goToProduct(categoryId, productCode) }));
+            };
+            return categoryTypes.map((type) => {
+                const summaryCards = [...b2bState.cart]
+                    .filter(([productCode]) => {
+                    const details = b2bState.productDetails.get(productCode);
+                    return details && details.categoryType === type;
+                })
+                    .map(([productCode]) => productCodeToSummaryCard(productCode));
+                return summaryCards.length ? (h("div", { class: "cart__card-list", slot: type }, summaryCards)) : null;
+            });
+        };
+        /** Adjusts the top position variable for the sticky cart element */
+        this.positionStickyCartEl = () => {
+            if (this.referenceElement) {
+                if (this.isDesktopResolution) {
+                    this.hostElement.style.setProperty('--b2b-cart-sticky-top', `${this.referenceElement.offsetTop}px`);
+                }
+                else {
+                    this.hostElement.style.removeProperty('--b2b-cart-sticky-top');
+                }
+            }
+        };
+        /**
+         * Renders Cart content depending on context
+         * @param context
+         * @returns
+         */
+        this.renderCart = (context = 'edit') => {
+            var _a;
+            const isCartEmpty = !b2bState.cart.size;
+            let summaryAmounts = { primary: 0, secondary: 0 };
+            let summaryCounts = { primary: 0, secondary: 0 };
+            let summaryWouldBeAmount = 0;
+            for (const [key, count] of b2bState.cart) {
+                const details = b2bState.productDetails.get(key);
+                if (!details) {
+                    continue;
+                }
+                summaryAmounts[details.categoryType] += ((_a = details.discountAmount) !== null && _a !== void 0 ? _a : details.amount) * count;
+                summaryCounts[details.categoryType] += 1;
+                summaryWouldBeAmount += details.amount * count;
+            }
+            const { primary: primaryAmount, secondary: secondaryAmount } = summaryAmounts;
+            const summaryAmount = primaryAmount + secondaryAmount;
+            const summarySavings = summaryWouldBeAmount - summaryAmount;
+            const { primary, secondary } = this.areProductsAddedToCart();
+            const hasPrimaryNotification = context === 'edit' && this.checkoutAttempted && !primary;
+            const hasSecondaryNotification = context === 'edit' && this.checkoutAttempted && !secondary;
+            const data = {
+                summaryAmount: summaryAmount.toFixed(2),
+                primaryAmount: primaryAmount.toFixed(2),
+                secondaryAmount: secondaryAmount.toFixed(2),
+                primaryCount: summaryCounts.primary,
+                secondaryCount: summaryCounts.secondary,
+                summarySavings: summarySavings.toFixed(2),
+                hasPrimaryNotification,
+                hasSecondaryNotification
+            };
+            const ctaButton = context === 'edit' ? (h("tet-button", { onClick: this.checkout, slot: "cta", class: "cart__cta", type: "primary", size: this.isDesktopResolution ? 'large' : 'medium', theme: this.theme }, t('components-b2b-cart-cta-button-title'))) : null;
+            return (h("tet-b2b-configurator-cart", { ref: (el) => (context === 'edit' ? (this.cartEl = el) : null), context: context, class: { 'cart': true, 'cart--empty': isCartEmpty, [`cart--${context}`]: true }, data: data, theme: this.theme, isCartEmpty: isCartEmpty, isDesktopResolution: this.isDesktopResolution }, this.renderCartCardsList(context), ctaButton));
+        };
+        /** Checks if both primary and secondary products are currently in cart */
+        this.areProductsAddedToCart = () => {
+            const productsInCart = { primary: false, secondary: false };
+            for (const [key, _] of b2bState.cart) {
+                const details = b2bState.productDetails.get(key);
+                if (!details) {
+                    continue;
+                }
+                productsInCart[details.categoryType] = true;
+            }
+            return productsInCart;
+        };
+        /** Cart checkout handler. Opens Checkout component*/
+        this.checkout = () => {
+            this.checkoutAttempted = true;
+            const { primary, secondary } = this.areProductsAddedToCart();
+            if (primary && secondary) {
+                this.checkoutFormEl.open();
+            }
+        };
+        /**
+         * Catches emitted checkout form data
+         * Combines with cart data and re-emits
+         * @param e
+         */
+        this.submit = ({ detail }) => {
+            const data = {
+                cart: getCart(),
+                contactInfo: detail
+            };
+            this.formState = 'loading';
+            this.b2bConfiguratorSubmit.emit(data);
+            this.checkoutFormEl.close();
+            this.submissionStateDialogEl.open();
+        };
+        this.renderCheckoutForm = () => {
+            return (h("tet-b2b-check-out-form", { ref: (el) => (this.checkoutFormEl = el), theme: this.theme, "onSubmit-check-out-form": this.submit }, h("div", { slot: "cart" }, this.renderCart('checkout'))));
+        };
+        this.referenceElement = undefined;
+        this.isLoading = true;
+        this.itemToRemove = null;
+        this.checkoutAttempted = false;
+        this.formState = 'success';
+        this.activePrimaryCategoryId = null;
+        this.activeSecondaryCategoryId = null;
+        this.selectedPrimaryCards = [];
+        this.selectedSecondaryCards = [];
+        this.isDesktopResolution = undefined;
+        this.theme = 'light';
+        this.stickyRefEl = '';
+    }
+    /** Resets selected (open) primary cards on category change */
+    resetSelectedPrimaryCards() {
+        this.selectedPrimaryCards = [];
+    }
+    /** Resets selected (open) secondary cards on category change */
+    resetSelectedSecondaryCards() {
+        this.selectedSecondaryCards = [];
+    }
+    /** Checks for desktop resolution and intializes the sticky element's reference using the provided prop or the host's parent */
+    async componentWillLoad() {
+        this.checkDesktopResolution();
+        this.referenceElement = this.stickyRefEl
+            ? document.querySelector(this.stickyRefEl)
+            : this.hostElement.parentElement;
+    }
+    /**
+     * Initiates:
+     * - data (with minimum load time to reduce flickering)
+     * - selected categories for each type
+     * - sticky elements position
+     */
+    async componentDidLoad() {
+        var _a, _b;
+        this.isLoading = true;
+        await ensureMinDuration(this.fetchData, MIN_LOAD_TIME);
+        this.isLoading = false;
+        this.activePrimaryCategoryId = ((_a = b2bState.data.find((category) => category.type === 'primary')) === null || _a === void 0 ? void 0 : _a.id) || null;
+        this.activeSecondaryCategoryId = ((_b = b2bState.data.find((category) => category.type === 'secondary')) === null || _b === void 0 ? void 0 : _b.id) || null;
+        this.positionStickyCartEl();
+    }
+    /**
+     * Initiates desktop resolution listener and sticky adjustement on window resize
+     */
+    onResize() {
+        this.checkDesktopResolution();
+        this.positionStickyCartEl();
+    }
+    /** Sets the value of form submission status*/
+    async setSubmitFormState(value) {
+        this.formState = value;
+    }
+    render() {
+        return (h(Host, { key: 'e7d2ab1d76e8ad347393bde30d0d71a7425ca2f7' }, h("div", { key: 'af251291fbb1cdf8c6eb1c3928f1fcd99181fa25', class: { configurator: true, [`${this.theme}`]: true } }, this.isLoading ? this.renderPlaceholder() : b2bState.data && [this.renderOffer(), this.renderCart()]), this.renderCheckoutForm(), this.renderConfirmationDialog(), this.renderSubmissionStateDialog()));
+    }
+    static get is() { return "tet-b2b-configurator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-b2b-configurator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-b2b-configurator.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'"
+            },
+            "stickyRefEl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Id or class of refenrece element in parent component. The header sticky position will be set to the top of this container."
+                },
+                "attribute": "sticky-ref-el",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "referenceElement": {},
+            "isLoading": {},
+            "itemToRemove": {},
+            "checkoutAttempted": {},
+            "formState": {},
+            "activePrimaryCategoryId": {},
+            "activeSecondaryCategoryId": {},
+            "selectedPrimaryCards": {},
+            "selectedSecondaryCards": {},
+            "isDesktopResolution": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "compareLinkClick",
+                "name": "compareLinkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the compare link for a category is clicked."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "b2bConfiguratorSubmit",
+                "name": "b2bConfiguratorSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The submit event of the B2B configurator."
+                },
+                "complexType": {
+                    "original": "B2BSubmit",
+                    "resolved": "{ cart: Record<string, number>; contactInfo: Record<string, string>; }",
+                    "references": {
+                        "B2BSubmit": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/views/tet-b2b-configurator/tet-b2b-configurator.tsx",
+                            "id": "src/components/views/tet-b2b-configurator/tet-b2b-configurator.tsx::B2BSubmit"
+                        }
+                    }
+                }
+            }, {
+                "method": "successCloseClick",
+                "name": "successCloseClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the close button of success modal is clicked."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setSubmitFormState": {
+                "complexType": {
+                    "signature": "(value: FormState) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "\"error\" | \"success\" | \"loading\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FormState": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/views/tet-b2b-configurator/tet-b2b-configurator.tsx",
+                            "id": "src/components/views/tet-b2b-configurator/tet-b2b-configurator.tsx::FormState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the value of form submission status",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "activePrimaryCategoryId",
+                "methodName": "resetSelectedPrimaryCards"
+            }, {
+                "propName": "activeSecondaryCategoryId",
+                "methodName": "resetSelectedSecondaryCards"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

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: '7249b0c2f37af39e860637cfe416182c5227c6d2', class: "container" }, h("div", { key: '89565a9f35411aa6a542582b77df0b9b9da03e0e', class: "title-block" }, t('components-b2b-calculator-title')), h("div", { key: '433eff5a8e863475880f8cf0216d1f604b7f74ce', class: "calculator-block" }, h("p", { key: '1b81e92aa9b7c58543257ea906c2177108b5c3e5', class: "slider-title" }, t('components-b2b-calculator-computer-count')), h("tet-range-slider", { key: 'c5ce8ce5c73329b07f9df3b22aa2f243c56ca1e9', 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: '69d35eac4899ba24153253d1a70984c60de6ee4f', class: "control-container" }, h("div", { key: '53f8d6355652051ca9e455769a32b1ee127a1a7d', class: "control" }, h("tet-checkbox", { key: 'adfd75a801a68e6ba794d27735d595dddfc9c901', class: "it-admin-checkbox", checked: this.withItAdmin, onCheck: this.handleWithItAdminValueChange }, t('components-b2b-calculator-it-admin-checkbox-label'))), h("div", { key: '000d314c262c7688e1ca5aed97dc84d0c72955e2', class: "control" }, h("tet-switch", { key: '8a423a478675117419a6c2ce02dd37962d4741e0', class: "in-person-support-switch", checked: this.withInPersonServiceSupport, onCheck: this.handleInPersonServiceSupportValueChange }, t('components-b2b-calculator-in-person-support-switch-label')))), h("div", { key: '9d869285131a855b2b9caf6d8ffe6100ab09df8f', class: "monthly-payment-block" }, h("p", { key: '08248a6283d71227e0350b4c0ff092993c86aa56', class: "title" }, t('components-b2b-calculator-potential-monthly-payment')), h("p", { key: 'cf137d3eed20a677c934f1dacdf8624bce437d70' }, h("span", { key: '070d5c3458a67c444c779e62fe522f3cda3dbb2a', class: "price" }, this.totalPrice), h("span", { key: 'f176b1e11123c143f0c63267256ec1484df38eec', class: "currency" }, t('components-euro-per-month')))))));
+        return (h("section", { key: '326aaa3f71423e90e2b453e5cc8b1df96689a8bc', class: "container" }, h("div", { key: 'f51769d2182670107b7a43467781160486c0f029', class: "title-block" }, t('components-b2b-calculator-title')), h("div", { key: 'b4ff5d39a203c91ade560be83be338166d8b9ff0', class: "calculator-block" }, h("p", { key: 'c1e8ac5d2b37d8a324acf7b3da046c29e1383c75', class: "slider-title" }, t('components-b2b-calculator-computer-count')), h("tet-range-slider", { key: '81d57baa4df911bbeceb6ba2a6c67bcd07a09a90', 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: '410efdef7d65e976e94dd7040c4d7faa1d52e32b', class: "control-container" }, h("div", { key: '931c43b16c415ab0075a9fbc9f4710210ed0a5f4', class: "control" }, h("tet-checkbox", { key: '6df1d34cb7670a01213ee83f8c3d33529f13bef6', class: "it-admin-checkbox", checked: this.withItAdmin, onCheck: this.handleWithItAdminValueChange }, t('components-b2b-calculator-it-admin-checkbox-label'))), h("div", { key: '1584213b5b9f61d97be033f37e1e0d82dafedc78', class: "control" }, h("tet-switch", { key: 'd02d94c371e55119eceea25d187346cb13cd2071', class: "in-person-support-switch", checked: this.withInPersonServiceSupport, onCheck: this.handleInPersonServiceSupportValueChange }, t('components-b2b-calculator-in-person-support-switch-label')))), h("div", { key: '4a2b3bd7bdc6f893e644480e4d234f140df41931', class: "monthly-payment-block" }, h("p", { key: '390d38acfbc980da72a405639ff1c5b14bc6402a', class: "title" }, t('components-b2b-calculator-potential-monthly-payment')), h("p", { key: '5c159aef3379a1c4c321959c9512dc733d509ebd' }, h("span", { key: 'd84fc849ac203fc4fe0199759263ee39959a594d', class: "price" }, this.totalPrice), h("span", { key: 'a8cf396d4fa1ea083833dd276fb45b0c6d73e7c2', 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: '662ada195159db350c1c297f8c07a0e344d45cb2', class: "container" }, this.showHeadings && this.renderHeadings(), h("div", { key: 'ae66eb988b9c4f8b78ca265bb30b853cda6b6993', class: "business-line-wrapper" }, (_a = this.businessLines) === null || _a === void 0 ? void 0 : _a.map(this.renderBusinessLineItem))));
+        return (h("div", { key: '373ee3335a2e897763556faedda0720e437f5894', class: "container" }, this.showHeadings && this.renderHeadings(), h("div", { key: '1d4b289bcec43264aa7f12d2bd82aa300638b0de', 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"; }