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

package/dist/cjs/tet-b2b-configurator.cjs.entry.js

@@ -0,0 +1,536 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-66913c99.js');
+const httpCodes = require('./http-codes-e46d4b01.js');
+const index = require('./index-457201e1.js');
+const translations = require('./translations-ed4a53af.js');
+require('./typecheck-d48810dc.js');
+
+const b2bConfigurator = () => {
+    let apiUrl;
+    try {
+        apiUrl = new URL(httpCodes.endpoints.b2bConfigurator).href;
+    }
+    catch (error) {
+        console.error(error);
+        return Promise.reject('B2B configurator endpoint URL generation failed.');
+    }
+    const request = new httpCodes.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 } = index.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 = class {
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.compareLinkClick = index$1.createEvent(this, "compareLinkClick", 7);
+        this.b2bConfiguratorSubmit = index$1.createEvent(this, "b2bConfiguratorSubmit", 7);
+        this.successCloseClick = index$1.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 [
+                index$1.h("div", { class: "offer placeholder" }, index$1.h("div", { style: { padding: this.isDesktopResolution ? '1.5rem' : '1rem' } }, index$1.h("tet-placeholder", { class: "placeholder", height: this.isDesktopResolution ? '2rem' : '1.5rem', darkTheme: darkTheme })), index$1.h("div", { class: "offer__content" }, index$1.h("tet-placeholder", { class: "placeholder offer__navigation", height: this.isDesktopResolution ? '48rem' : ' 2.25rem', darkTheme: darkTheme, style: { margin: '0' } }), index$1.h("div", { class: "offer__cards" }, index$1.h("div", { class: "offer__cards-list" }, index$1.h("tet-placeholder", { class: "placeholder", height: "3rem", darkTheme: darkTheme }), index$1.h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }), index$1.h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }), index$1.h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }), index$1.h("tet-placeholder", { class: "placeholder", height: "10.25rem", darkTheme: darkTheme }))))),
+                index$1.h("div", { class: "cart cart--empty", style: {
+                        'padding': '1.5rem 1rem 1rem',
+                        'background-color': `var(--b2b-background-color)`
+                    } }, index$1.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: translations.translate('components-b2b-offer-primary-title'), type: 'primary' },
+                { name: translations.translate('components-b2b-offer-secondary-title'), type: 'secondary' }
+            ];
+            return (index$1.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 (index$1.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 }, index$1.h("div", { class: "offer__content" }, index$1.h("div", { class: "offer__navigation" }, index$1.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 (index$1.h("tet-dialog", { ref: (el) => (this.confirmationDialogEl = el), class: this.theme, closeOnOverlayClick: false, onCloseDialog: this.onConfirmationClose, theme: this.theme }, index$1.h("div", { class: "action-dialog" }, index$1.h("tet-icon", { class: "action-dialog__icon action-dialog__attention-icon", name: "attention" }), index$1.h("div", { class: "action-dialog__title" }, translations.translate('components-b2b-item-remove-confirmation-title'))), index$1.h("div", { slot: "footer", class: "action-dialog__footer" }, index$1.h("tet-button", { type: "secondary", theme: this.theme, size: "large", onClick: () => this.confirmationDialogEl.close() }, translations.translate('components-b2b-item-remove-confirmation-decline')), index$1.h("tet-button", { type: "primary", theme: this.theme, size: "large", iconName: "tc-trash", iconPosition: "left", onClick: () => {
+                    removeFromCart(this.itemToRemove);
+                    this.confirmationDialogEl.close();
+                } }, translations.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 ? (index$1.h("div", { class: "action-dialog" }, index$1.h("tet-spinner", { theme: this.theme }), index$1.h("div", { class: "action-dialog__title" }, translations.translate('components-b2b-loading-dialog-title')), index$1.h("div", { class: "action-dialog__description" }, translations.translate('components-b2b-loading-dialog-description')))) : ([
+                index$1.h("div", { class: "action-dialog" }, index$1.h("tet-icon", { class: "action-dialog__icon action-dialog__success-icon", name: "tc-check-circle" }), index$1.h("div", { class: "action-dialog__title" }, translations.translate('components-b2b-success-dialog-title')), index$1.h("div", { class: "action-dialog__description" }, translations.translate('components-b2b-success-dialog-description'))),
+                index$1.h("div", { slot: "footer", class: "action-dialog__footer" }, index$1.h("tet-button", { type: "secondary", theme: this.theme, size: "large", onClick: successClose }, index$1.h("div", { class: "action-dialog__button-text" }, translations.translate('components-b2b-success-dialog-close'))), index$1.h("tet-button", { type: "primary", theme: this.theme, size: "large", onClick: () => {
+                        this.resetState();
+                        this.submissionStateDialogEl.close();
+                    } }, index$1.h("div", { class: "action-dialog__button-text" }, translations.translate('components-b2b-success-dialog-start-again'))))
+            ]);
+            return (index$1.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 (index$1.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 (index$1.h("div", { class: "offer__cards" }, index$1.h("div", { class: "offer__cards-header" }, index$1.h("div", { class: "offer__cards-title" }, translations.translate('components-b2b-offer-product-list-title')), index$1.h("button", { class: { 'button-reset': true, 'compare__button': true, [`${this.theme}`]: true }, onClick: () => {
+                    this.onCompareLinkClick(activeCategoryId);
+                } }, index$1.h("span", { class: { 'compare__text': true, 'tet-link': true, [`${this.theme}`]: true } }, translations.translate('components-b2b-offer-compare-link-text')), index$1.h("div", { class: "compare__icon-wrapper" }, index$1.h("tet-icon", { class: "compare__icon", name: "tc-info-circle-outline", theme: this.theme })))), index$1.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 (index$1.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: translations.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 ? (index$1.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' ? (index$1.h("tet-button", { onClick: this.checkout, slot: "cta", class: "cart__cta", type: "primary", size: this.isDesktopResolution ? 'large' : 'medium', theme: this.theme }, translations.translate('components-b2b-cart-cta-button-title'))) : null;
+            return (index$1.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 (index$1.h("tet-b2b-check-out-form", { ref: (el) => (this.checkoutFormEl = el), theme: this.theme, "onSubmit-check-out-form": this.submit }, index$1.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 (index$1.h(index$1.Host, { key: 'e7d2ab1d76e8ad347393bde30d0d71a7425ca2f7' }, index$1.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 index$1.getElement(this); }
+    static get watchers() { return {
+        "activePrimaryCategoryId": ["resetSelectedPrimaryCards"],
+        "activeSecondaryCategoryId": ["resetSelectedSecondaryCards"]
+    }; }
+};
+TetB2bConfigurator.style = TetB2bConfiguratorStyle0;
+
+exports.tet_b2b_configurator = TetB2bConfigurator;

package/dist/cjs/tet-b2b-service-calculator.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f559cb2e.js');
-const translations = require('./translations-ed68775f.js');
+const index = require('./index-66913c99.js');
+const translations = require('./translations-ed4a53af.js');
 require('./typecheck-d48810dc.js');
-require('./http-codes-2f72a8b2.js');
+require('./http-codes-e46d4b01.js');
 
 const REMOTE_SERVICE_UNIT_PRICE_EUROS = 11;
 const FULL_SERVICE_UNIT_PRICE_EUROS = 21;
@@ -62,7 +62,7 @@ const TetB2bServiceCalculator = class {
         translations.processTranslations('tet-components', this.language).then(() => index.forceUpdate(this));
     }
     render() {
-        return (index.h("section", { key: '7249b0c2f37af39e860637cfe416182c5227c6d2', class: "container" }, index.h("div", { key: '89565a9f35411aa6a542582b77df0b9b9da03e0e', class: "title-block" }, translations.translate('components-b2b-calculator-title')), index.h("div", { key: '433eff5a8e863475880f8cf0216d1f604b7f74ce', class: "calculator-block" }, index.h("p", { key: '1b81e92aa9b7c58543257ea906c2177108b5c3e5', class: "slider-title" }, translations.translate('components-b2b-calculator-computer-count')), index.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 }), index.h("div", { key: '69d35eac4899ba24153253d1a70984c60de6ee4f', class: "control-container" }, index.h("div", { key: '53f8d6355652051ca9e455769a32b1ee127a1a7d', class: "control" }, index.h("tet-checkbox", { key: 'adfd75a801a68e6ba794d27735d595dddfc9c901', class: "it-admin-checkbox", checked: this.withItAdmin, onCheck: this.handleWithItAdminValueChange }, translations.translate('components-b2b-calculator-it-admin-checkbox-label'))), index.h("div", { key: '000d314c262c7688e1ca5aed97dc84d0c72955e2', class: "control" }, index.h("tet-switch", { key: '8a423a478675117419a6c2ce02dd37962d4741e0', class: "in-person-support-switch", checked: this.withInPersonServiceSupport, onCheck: this.handleInPersonServiceSupportValueChange }, translations.translate('components-b2b-calculator-in-person-support-switch-label')))), index.h("div", { key: '9d869285131a855b2b9caf6d8ffe6100ab09df8f', class: "monthly-payment-block" }, index.h("p", { key: '08248a6283d71227e0350b4c0ff092993c86aa56', class: "title" }, translations.translate('components-b2b-calculator-potential-monthly-payment')), index.h("p", { key: 'cf137d3eed20a677c934f1dacdf8624bce437d70' }, index.h("span", { key: '070d5c3458a67c444c779e62fe522f3cda3dbb2a', class: "price" }, this.totalPrice), index.h("span", { key: 'f176b1e11123c143f0c63267256ec1484df38eec', class: "currency" }, translations.translate('components-euro-per-month')))))));
+        return (index.h("section", { key: '326aaa3f71423e90e2b453e5cc8b1df96689a8bc', class: "container" }, index.h("div", { key: 'f51769d2182670107b7a43467781160486c0f029', class: "title-block" }, translations.translate('components-b2b-calculator-title')), index.h("div", { key: 'b4ff5d39a203c91ade560be83be338166d8b9ff0', class: "calculator-block" }, index.h("p", { key: 'c1e8ac5d2b37d8a324acf7b3da046c29e1383c75', class: "slider-title" }, translations.translate('components-b2b-calculator-computer-count')), index.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 }), index.h("div", { key: '410efdef7d65e976e94dd7040c4d7faa1d52e32b', class: "control-container" }, index.h("div", { key: '931c43b16c415ab0075a9fbc9f4710210ed0a5f4', class: "control" }, index.h("tet-checkbox", { key: '6df1d34cb7670a01213ee83f8c3d33529f13bef6', class: "it-admin-checkbox", checked: this.withItAdmin, onCheck: this.handleWithItAdminValueChange }, translations.translate('components-b2b-calculator-it-admin-checkbox-label'))), index.h("div", { key: '1584213b5b9f61d97be033f37e1e0d82dafedc78', class: "control" }, index.h("tet-switch", { key: 'd02d94c371e55119eceea25d187346cb13cd2071', class: "in-person-support-switch", checked: this.withInPersonServiceSupport, onCheck: this.handleInPersonServiceSupportValueChange }, translations.translate('components-b2b-calculator-in-person-support-switch-label')))), index.h("div", { key: '4a2b3bd7bdc6f893e644480e4d234f140df41931', class: "monthly-payment-block" }, index.h("p", { key: '390d38acfbc980da72a405639ff1c5b14bc6402a', class: "title" }, translations.translate('components-b2b-calculator-potential-monthly-payment')), index.h("p", { key: '5c159aef3379a1c4c321959c9512dc733d509ebd' }, index.h("span", { key: 'd84fc849ac203fc4fe0199759263ee39959a594d', class: "price" }, this.totalPrice), index.h("span", { key: 'a8cf396d4fa1ea083833dd276fb45b0c6d73e7c2', class: "currency" }, translations.translate('components-euro-per-month')))))));
     }
     static get watchers() { return {
         "language": ["onLanguageChange"],

package/dist/cjs/tet-banner-nav.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f559cb2e.js');
-const translations = require('./translations-ed68775f.js');
+const index = require('./index-66913c99.js');
+const translations = require('./translations-ed4a53af.js');
 require('./typecheck-d48810dc.js');
-require('./http-codes-2f72a8b2.js');
+require('./http-codes-e46d4b01.js');
 
 const tetBannerNavCss = ".banner-navigation{display:inline-flex;align-items:flex-end}.banner-navigation--light{color:var(--tc-icon-primary);--fill-color:var(--tc-icon-primary);--outline-color:var(--tc-blue-40, rgba(25, 98, 212, 1));--hover-color:rgba(12, 12, 14, 0.10);--done-hover-color:var(--tc-grey-80);--pause-icon-color:var( --tc-icon-primary);--active-color:var(--tc-grey-110);--inactive-color:var(--tc-grey-60)}.banner-navigation--dark{color:var(--tc-icon-primary-dark);--fill-color:var(--tc-icon-primary-dark);--outline-color:var(--tc-blue-40-dark, rgba(52, 129, 247, 1));--hover-color:rgba(187, 189, 191, 0.2);--done-hover-color:var(--tc-grey-80-dark);--pause-icon-color:var(--tc-icon-primary-dark);--active-color:var(--tc-grey-110-dark);--inactive-color:var(--tc-grey-60-dark)}.banner-navigation__pause{display:flex;align-items:center;border:none;background:none;padding:0.125rem;margin-right:0.375rem;cursor:pointer}.banner-navigation__pause:focus-visible{outline:var(--outline-color) auto 1px}.banner-navigation__pause tet-icon{--icon-color:var(--pause-icon-color)}.banner-navigation__pause:hover tet-icon{--icon-color:var(--done-hover-color)}.banner-navigation__button-container{margin:0 0 2px 0}.banner-navigation__button{display:flex;align-items:flex-end;justify-content:center;appearance:none;border:none;background:none;cursor:pointer;padding:0.125rem;color:var(--inactive-color)}.banner-navigation__button:hover .hover-rect{fill:var(--hover-color)}.banner-navigation__button--done:hover .rect-opacity,.banner-navigation__button--active:hover .rect-opacity{fill:var(--done-hover-color)}.banner-navigation__button--done:hover .outer-rect,.banner-navigation__button--active:hover .outer-rect{color:var(--done-hover-color)}.banner-navigation__button .clip-rect{width:22px}.banner-navigation__button--active,.banner-navigation__button--done{color:var(--active-color)}.banner-navigation__button--active .clip-rect{animation:fill-progress var(--progress-duration, 5000ms) linear forwards}.banner-navigation__button--done .clip-rect{width:22px}.banner-navigation__button--active.banner-navigation__button--paused .clip-rect{animation:none;width:0}@keyframes fill-progress{from{width:0}to{width:22px}}.svg-wrapper{position:relative;display:inline-block;width:12px;height:12px;transition:width 0.2s linear;pointer-events:none}.svg-wrapper .nav-svg{position:absolute;top:50%;left:0;transform:translateY(-50%);transform-origin:left center;height:12px;pointer-events:none}.svg-wrapper .rect{transition:width 0.2s linear, rx 0.2s ease-out}.nav-svg--unfilled .rect-opacity{opacity:0;width:22px;transition:width 0.2s linear, rx 0.2s ease-out, opacity 0.2s ease-in}.nav-svg--unfilled .rect{rx:10;width:11px}.nav-svg--filled .rect-opacity{opacity:1}.nav-svg--filled .rect{width:11px;rx:10}.banner-navigation__button--active .svg-wrapper{width:23px}@media (prefers-reduced-motion: reduce){.banner-navigation__button--active .clip-rect,.rect,.rect-opacity{transition:none;width:22px}}.banner-navigation__button:focus-visible{position:relative;width:fit-content;height:fit-content;outline:none}.banner-navigation__button:focus-visible::after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;scale:1.2;transform-origin:center center;outline:2px solid;outline-offset:-0.125rem;outline-color:var(--outline-color);border-radius:11px}.banner-navigation--mobile .banner-navigation__button{padding:0.3125rem}.banner-navigation--mobile .banner-navigation__pause{padding:0.3125rem;margin-right:0.4375rem;outline-offset:-0.25rem}.banner-navigation--mobile .banner-navigation__button:focus-visible::after{outline-offset:-0.3125rem}";
 const TetBannerNavStyle0 = tetBannerNavCss;