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

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

@@ -0,0 +1,661 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-599035b8.js';
+import { e as endpoints, A as ApiRequest } from './p-0f3158fd.js';
+import { c as createStore, d as defineCustomElement$8 } from './p-3f018e97.js';
+import { t as translate } from './p-14a1ad7c.js';
+import { d as defineCustomElement$h } from './p-bada8e16.js';
+import { d as defineCustomElement$g } from './p-2f2d4140.js';
+import { d as defineCustomElement$f } from './p-23115de8.js';
+import { d as defineCustomElement$e } from './p-7529e18a.js';
+import { d as defineCustomElement$d } from './p-4f61f832.js';
+import { d as defineCustomElement$c } from './p-d4ff9edf.js';
+import { d as defineCustomElement$b } from './p-77854406.js';
+import { d as defineCustomElement$a } from './p-97051b94.js';
+import { d as defineCustomElement$9 } from './p-42d49a8d.js';
+import { d as defineCustomElement$7 } from './p-490802fa.js';
+import { d as defineCustomElement$6 } from './p-3d3f207f.js';
+import { d as defineCustomElement$5 } from './p-8b00261c.js';
+import { d as defineCustomElement$4 } from './p-336624db.js';
+import { d as defineCustomElement$3 } from './p-493ca52e.js';
+import { d as defineCustomElement$2 } from './p-ac89537a.js';
+
+const b2bConfigurator = () => {
+    let apiUrl;
+    try {
+        apiUrl = new URL(endpoints.b2bConfigurator).href;
+    }
+    catch (error) {
+        console.error(error);
+        return Promise.reject('B2B configurator endpoint URL generation failed.');
+    }
+    const request = new ApiRequest()
+        .setUrl(apiUrl)
+        .setErrorFallbackValue([]);
+    return request.execute();
+};
+
+/**
+ * Ensures an asynchronous operation (Promise or async function) takes at least
+ * a specified minimum duration to resolve.
+ * @param callback The Promise to await, or an asynchronous function that returns a Promise.
+ * @param minDurationMs The minimum time, in milliseconds, the resulting Promise should take to resolve.
+ * @returns A Promise that resolves with the result of the callback, but only after
+ * both the callback and the minDurationMs delay have completed.
+ */
+const ensureMinDuration = async (callback, minDurationMs) => {
+    const responsePromise = typeof callback === 'function' ? callback() : callback;
+    const delayPromise = new Promise((resolve) => setTimeout(resolve, minDurationMs));
+    const [result] = await Promise.all([responsePromise, delayPromise]);
+    return result;
+};
+
+const { state, set, get } = createStore({
+    data: [],
+    cart: new Map(),
+    productDetails: new Map()
+});
+const initData = (data) => {
+    set('data', data);
+    const productDetails = new Map();
+    for (const category of data) {
+        for (const product of category.products) {
+            const { type: categoryType, name: categoryName, id: categoryId } = category;
+            const { name: { lv: name }, description: { lv: description }, amount, b2bConfiguratorProduct } = product;
+            productDetails.set(product.productCode, {
+                name,
+                description,
+                amount,
+                discountAmount: b2bConfiguratorProduct.discountAmount,
+                categoryType,
+                categoryName,
+                categoryId,
+                b2bConfiguratorProduct
+            });
+        }
+    }
+    set('productDetails', productDetails);
+};
+const addToCart = (product, count) => {
+    if (count < 0) {
+        return;
+    }
+    const newCart = new Map(state.cart);
+    newCart.set(product, count);
+    set('cart', newCart);
+};
+const removeFromCart = (product) => {
+    const newCart = new Map(state.cart);
+    newCart.delete(product);
+    set('cart', newCart);
+};
+const resetCart = () => {
+    set('cart', new Map());
+};
+const getCart = () => {
+    return Object.fromEntries(get('cart'));
+};
+
+const tetB2bConfiguratorCss = "@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}:host{--font-family-fallback:Gilroy, Arial, sans-serif;--font-family-headline:Gilroy;--font-family-content:Inter, var(--font-family-fallback);font-family:var(--font-family-content)}:root{--tet-link-color:var(--tc-text-primary);--tet-link-color-hover:var(--tc-text-secondary);--tet-link-color-active:var(--tc-text-tertiary);--tet-link-color-focus:var(--tc-blue-40);--tet-link-color-disabled:var(--tc-button-text-inverse-disabled);--tet-link-secondary-color:var(--tc-text-secondary);--tet-link-secondary-color-hover:var(--tc-text-primary)}.tet-link,.tet-link__arrow{text-decoration:underline;color:var(--tet-link-color);position:relative;line-height:1.5rem;cursor:pointer}.tet-link.dark,.tet-link__arrow.dark{--tet-link-color:var(--tc-text-primary-dark);--tet-link-color-hover:var(--tc-text-secondary-dark);--tet-link-color-active:var(--tc-text-tertiary-dark);--tet-link-color-focus:var(--tc-blue-40-dark);--tet-link-color-disabled:var(--tc-button-text-inverse-disabled-dark);--tet-link-secondary-color:var(--tc-text-secondary-dark);--tet-link-secondary-color-hover:var(--tc-text-primary-dark)}.tet-link.tet-link--secondary,.tet-link__arrow.tet-link--secondary{--tet-link-color:var(--tet-link-secondary-color);--tet-link-color-hover:var(--tet-link-secondary-color-hover)}.tet-link tet-icon,.tet-link__arrow tet-icon{--icon-color:var(--tet-link-color)}.tet-link:hover,.tet-link__arrow:hover{color:var(--tet-link-color-hover)}.tet-link:hover tet-icon,.tet-link__arrow:hover tet-icon{--icon-color:var(--tet-link-color-hover)}.tet-link:active,.tet-link__arrow:active{color:var(--tet-link-color-active)}.tet-link:active tet-icon,.tet-link__arrow:active tet-icon{--icon-color:var(--tet-link-color-active)}.tet-link:focus-visible,.tet-link__arrow:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:0.125rem;transition:outline 0s;outline-color:var(--tet-link-color-focus);border-radius:0.125rem}.tet-link.disabled,.tet-link__arrow.disabled{color:var(--tet-link-color-disabled);pointer-events:none;cursor:auto}.tet-link.disabled tet-icon,.tet-link__arrow.disabled tet-icon{--icon-color:var(--tet-link-color-disabled)}.tet-link.disabled:focus-visible,.tet-link__arrow.disabled:focus-visible{outline:none}.tet-link tet-icon,.tet-link__arrow tet-icon{padding-left:0.25rem;padding-right:0.25rem;--icon-container-display:inline-block}.tet-link__arrow{padding-right:1.5rem}.tet-link__arrow::after{content:\"-->\";position:absolute;white-space:nowrap;display:inline-block;text-decoration:none;padding-left:0.25rem;letter-spacing:initial;transition:all 0.15s ease-in}.tet-link__arrow:hover::after{padding-left:0.375rem}:host{display:block;--b2b-cart-offset-top:0px}.light{--b2b-text-color:var(--tc-text-primary);--b2b-text-color-secondary:var(--tc-text-secondary);--b2b-background-color:var(--tc-layer-primary);--b2b-icon-background-color:var(--tc-layer-secondary);--b2b-icon-pressed-background-color:var(--tc-layer-quaternary);--b2b-box-shadow:var(--tc-elevation-one);--b2b-border-color:var(--tc-border-quaternary);--b2b-summary-block-color:var(--tc-layer-secondary);--b2b-summary-accent-color:var(--tc-yellow-20);--b2b-confirmation-dialog-icon-color:var(--tc-yellow-40);--b2b-success-dialog-icon-color:var(--tc-green-40)}.dark{--b2b-text-color:var(--tc-text-primary-dark);--b2b-text-color-secondary:var(--tc-text-secondary-dark);--b2b-background-color:var(--tc-layer-primary-dark);--b2b-icon-background-color:var(--tc-layer-secondary-dark);--b2b-icon-pressed-background-color:var(--tc-layer-quaternary-dark);--b2b-box-shadow:var(--tc-elevation-one-dark);--b2b-border-color:var(--tc-border-quaternary-dark);--b2b-summary-block-color:var(--tc-layer-secondary-dark);--b2b-summary-accent-color:var(--tc-grey-20-dark);--b2b-confirmation-dialog-icon-color:var(--tc-yellow-40-dark);--b2b-success-dialog-icon-color:var(--tc-green-40-dark)}button.button-reset{background:none;border:none;padding:0;font:inherit;color:inherit;text-align:inherit}.placeholder{--placeholder-animation-speed:5s}.configurator{display:flex;gap:1rem;flex-direction:column;color:var(--b2b-text-color)}@media screen and (min-width: 64rem){.configurator{gap:1.5rem;flex-direction:row;align-items:flex-start}}.offer{border-radius:1rem;height:fit-content;flex:0 0 calc(70% - 0.75rem);background-color:var(--b2b-background-color);box-shadow:var(--b2b-box-shadow)}.offer__block{--accordion-header-padding:1rem;--accordion-header-mobile-padding:1rem;--accordion-header-font:600 1.25rem/1.5rem Gilroy, Gilroy, Arial, sans-serif;--accordion-header-mobile-font:600 1.25rem/1.5rem Gilroy, Gilroy, Arial, sans-serif}.offer__block:first-child{--accordion-border-radius:1rem 1rem 0 0;--accordion-outer-border:var(--b2b-border-color)}.offer__block:last-child{--accordion-border-radius:0 0 1rem 1rem;--accordion-border-bottom-width:0}@media screen and (min-width: 64rem){.offer__block{--accordion-header-padding:1.5rem;--accordion-header-font:600 1.75rem/2rem Gilroy, Gilroy, Arial, sans-serif}}.offer__content{overflow:hidden;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:0.75rem;border-color:var(--b2b-border-color);border-top-style:solid;border-top-width:0.0625rem}@media screen and (min-width: 48rem){.offer__content{padding:1.5rem}}@media screen and (min-width: 64rem){.offer__content{flex-direction:row;gap:1.5rem;padding-bottom:2.5rem}}.offer__navigation{margin:0 -1.5rem;flex:0 0 30%}@media screen and (min-width: 64rem){.offer__navigation{max-width:20.5rem;margin:0}}.offer__cards{flex:1 1 0%}.offer__cards-header{padding:0.5rem 0 0.75rem 0;display:flex;gap:0.5rem;justify-content:space-between;align-items:center}@media screen and (min-width: 64rem){.offer__cards-header{padding:1rem 0}}.offer__cards-list{display:flex;flex-direction:column;gap:1rem}.offer__cards-title{flex:auto;font:600 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\"}@media screen and (min-width: 64rem){.offer__cards-title{font:600 1.25rem/1.5rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}}.compare__button{border-radius:50%;overflow:hidden}@media screen and (min-width: 64rem){.compare__button{border-radius:0.125rem}}.compare__button:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:0.125rem;transition:outline 0s}.compare__button.dark:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline:0.125rem solid var(--tc-blue-40-dark);outline-offset:0.125rem;transition:outline 0s}.compare__button:active{--b2b-icon-background-color:var(--b2b-icon-pressed-background-color)}.compare__text{font:400 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\";display:none}@media screen and (min-width: 64rem){.compare__text{display:initial}}.compare__icon-wrapper{width:2.75rem;height:2.75rem;display:flex;justify-content:center;align-items:center;background-color:var(--b2b-icon-background-color);cursor:pointer}@media screen and (min-width: 64rem){.compare__icon-wrapper{display:none}}.compare__icon{--icon-size:1.5rem}.cart{flex:0 0 calc(30% - 0.75rem);position:sticky}.cart--edit{bottom:-1px;top:calc(var(--b2b-cart-sticky-top) + var(--b2b-cart-offset-top))}.cart--empty{display:none}@media screen and (min-width: 64rem){.cart--empty{display:flex}}.cart__card-list{padding:0 1rem 1rem;display:flex;flex-direction:column;gap:0.5rem}.cart__cta{display:block;align-self:center}@media screen and (min-width: 48rem){.cart__cta{align-self:flex-end}}.action-dialog{display:flex;flex-direction:column;gap:0.5rem;align-items:center;margin-bottom:1.5rem}.action-dialog--loading{--dialog-footer-border-color:transparent}.action-dialog__title{text-align:center;font:600 1.5rem/1.75rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}.action-dialog__description{font:400 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.action-dialog__icon{--icon-size:3rem}.action-dialog__attention-icon{--icon-color:var(--b2b-confirmation-dialog-icon-color)}.action-dialog__success-icon{--icon-color:var(--b2b-success-dialog-icon-color)}.action-dialog__footer{display:flex;justify-content:space-between;flex:auto}.action-dialog__button-text{white-space:nowrap}";
+const TetB2bConfiguratorStyle0 = tetB2bConfiguratorCss;
+
+/** 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;
+const TetB2bConfigurator$1 = /*@__PURE__*/ proxyCustomElement(class TetB2bConfigurator extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.compareLinkClick = createEvent(this, "compareLinkClick", 7);
+        this.b2bConfiguratorSubmit = createEvent(this, "b2bConfiguratorSubmit", 7);
+        this.successCloseClick = createEvent(this, "successCloseClick", 7);
+        /** @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: translate('components-b2b-offer-primary-title'), type: 'primary' },
+                { name: translate('components-b2b-offer-secondary-title'), type: 'secondary' }
+            ];
+            return (h("div", { class: { offer: true, [`offer--${this.theme}`]: true } }, blocks.map((block) => {
+                const menuItems = state.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 state.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 || state.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" }, translate('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() }, translate('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();
+                } }, translate('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" }, translate('components-b2b-loading-dialog-title')), h("div", { class: "action-dialog__description" }, translate('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" }, translate('components-b2b-success-dialog-title')), h("div", { class: "action-dialog__description" }, translate('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" }, translate('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" }, translate('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: state.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" }, translate('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 } }, translate('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 = state.cart.get(productCode);
+                const details = state.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: translate(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 = [...state.cart]
+                    .filter(([productCode]) => {
+                    const details = state.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 = !state.cart.size;
+            let summaryAmounts = { primary: 0, secondary: 0 };
+            let summaryCounts = { primary: 0, secondary: 0 };
+            let summaryWouldBeAmount = 0;
+            for (const [key, count] of state.cart) {
+                const details = state.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 }, translate('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 state.cart) {
+                const details = state.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 = state.data.find((category) => category.type === 'primary')) === null || _a === void 0 ? void 0 : _a.id) || null;
+        this.activeSecondaryCategoryId = ((_b = state.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() : state.data && [this.renderOffer(), this.renderCart()]), this.renderCheckoutForm(), this.renderConfirmationDialog(), this.renderSubmissionStateDialog()));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "activePrimaryCategoryId": ["resetSelectedPrimaryCards"],
+        "activeSecondaryCategoryId": ["resetSelectedSecondaryCards"]
+    }; }
+    static get style() { return TetB2bConfiguratorStyle0; }
+}, [1, "tet-b2b-configurator", {
+        "theme": [1],
+        "stickyRefEl": [1, "sticky-ref-el"],
+        "referenceElement": [32],
+        "isLoading": [32],
+        "itemToRemove": [32],
+        "checkoutAttempted": [32],
+        "formState": [32],
+        "activePrimaryCategoryId": [32],
+        "activeSecondaryCategoryId": [32],
+        "selectedPrimaryCards": [32],
+        "selectedSecondaryCards": [32],
+        "isDesktopResolution": [32],
+        "setSubmitFormState": [64]
+    }, [[9, "resize", "onResize"]], {
+        "activePrimaryCategoryId": ["resetSelectedPrimaryCards"],
+        "activeSecondaryCategoryId": ["resetSelectedSecondaryCards"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tet-b2b-configurator", "tet-accordion", "tet-b2b-check-out-form", "tet-b2b-compare-card", "tet-b2b-configurator-cart", "tet-business-navigation", "tet-business-summary-card", "tet-button", "tet-checkbox", "tet-dialog", "tet-icon", "tet-input", "tet-notification", "tet-placeholder", "tet-spinner", "tet-stepper-input", "tet-text-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tet-b2b-configurator":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TetB2bConfigurator$1);
+            }
+            break;
+        case "tet-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "tet-b2b-check-out-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "tet-b2b-compare-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "tet-b2b-configurator-cart":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "tet-business-navigation":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "tet-business-summary-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "tet-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "tet-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "tet-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "tet-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "tet-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "tet-notification":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "tet-placeholder":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "tet-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "tet-stepper-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "tet-text-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const TetB2bConfigurator = TetB2bConfigurator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TetB2bConfigurator, defineCustomElement };