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

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

@@ -1,170 +1,4 @@
-import { p as proxyCustomElement, H, h, f as forceUpdate, c as Host } from './p-37ed3ebb.js';
-import { t as translate, p as processTranslations } from './p-aca28e71.js';
-import { d as defineCustomElement$4 } from './p-08cb8e8b.js';
-import { d as defineCustomElement$3 } from './p-9da9a443.js';
-import { d as defineCustomElement$2 } from './p-b2d2b9f2.js';
-
-const tetB2bConfiguratorCartCss = "@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)}:host{display:block}.light{--b2b-cart-text-color:var(--tc-text-primary);--b2b-cart-text-color-secondary:var(--tc-text-secondary);--b2b-cart-background-color:var(--tc-layer-primary);--b2b-cart-box-shadow:var(--tc-elevation-one);--b2b-cart-border-color:var(--tc-border-quaternary);--b2b-cart-block-color:var(--tc-layer-secondary);--b2b-cart-block-details-color:var(--tc-layer-tertiary);--b2b-cart-summary-accent-color:var(--tc-yellow-20);--elevation-six-layer-1-color:rgba(12, 12, 14, 0.06)}.light.checkout{--b2b-cart-background-color:var(--tc-layer-secondary);--b2b-cart-block-color:var(--tc-layer-tertiary);--b2b-cart-block-details-color:var(--tc-layer-quaternary)}.dark{--b2b-cart-text-color:var(--tc-text-primary-dark);--b2b-cart-text-color-secondary:var(--tc-text-secondary-dark);--b2b-cart-background-color:var(--tc-layer-primary-dark);--b2b-cart-box-shadow:var(--tc-elevation-one-dark);--b2b-cart-border-color:var(--tc-border-quaternary-dark);--b2b-cart-block-color:var(--tc-layer-secondary-dark);--b2b-cart-block-details-color:var(--tc-layer-tertiary-dark);--b2b-cart-summary-accent-color:var(--tc-grey-20-dark);--elevation-six-layer-1-color:rgba(12, 12, 14, 0.20)}.dark.checkout{--b2b-cart-background-color:var(--tc-layer-secondary-dark);--b2b-cart-block-color:var(--tc-layer-tertiary-dark);--b2b-cart-block-details-color:var(--tc-layer-quaternary-dark)}.cart{color:var(--b2b-cart-text-color);display:flex;flex:auto;flex-direction:column;height:fit-content;border-radius:1rem;background:var(--b2b-cart-background-color);box-shadow:var(--b2b-cart-box-shadow)}.cart__accordion{--accordion-border-radius:1rem 1rem 0 0;--accordion-header-padding:1rem;--accordion-header-mobile-padding:1rem;--accordion-header-font:600 1rem/1.5rem Inter, Gilroy, Arial, sans-serif}@media all and (min-width: 90rem){.cart__accordion--edit{--accordion-header-display:none}}.cart__accordion--rounded{--accordion-border-radius:1rem}.cart__accordion--empty{--accordion-border-radius:1rem}.cart__title--edit{display:none}@media all and (min-width: 90rem){.cart__title--edit{display:block;padding:1.5rem 1.5rem 1rem 1.5rem;border-bottom:0.0625rem solid var(--b2b-cart-border-color);align-self:stretch;font:600 1.125rem/1.75rem \"Inter\", \"Gilroy, Arial, sans-serif\"}}.cart__title--checkout{display:none}.cart__content{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-color:var(--b2b-cart-border-color);border-top-style:solid;border-top-width:0.0625rem}.block{--accordion-border-radius:0.5rem;--accordion-background-color:var(--b2b-cart-block-color);--accordion-header-padding:1rem 1rem 0.75rem 1rem;--accordion-header-mobile-padding:1rem 1rem 0.75rem 1rem;--accordion-header-font:600 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif}.block__wrapper{border-radius:0.5rem;border:0.0625rem solid var(--b2b-cart-border-color);background-color:var(--b2b-cart-block-color)}@media all and (min-width: 48rem){.block{--accordion-header-padding:1rem;--accordion-header-mobile-padding:1rem;--accordion-header-font:600 1rem/1.5rem Inter, Gilroy, Arial, sans-serif}}.block__header{display:flex;flex-direction:column;flex:auto;gap:0.5rem}.block__header-row{display:flex;justify-content:space-between}.block__header-amount{text-align:end}.block__header-details{font:500 0.75rem/1rem \"Inter\", \"Gilroy, Arial, sans-serif\";background:var(--b2b-cart-block-details-color);padding:0.25rem 0.5rem;border-radius:1.375rem}.block__header-indicator{font:400 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\"}@media all and (min-width: 48rem){.block__header-indicator{font:400 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\"}}.block__header-icon{--icon-size:1.25rem}.empty-cart{display:flex;flex-direction:column;align-items:center}.empty-cart__icon{margin-bottom:0.5rem;--icon-size:3rem}.empty-cart__title{font:500 1rem/1.5rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.empty-cart__description{color:var(--b2b-cart-text-color-secondary);font:400 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.summary{display:flex;flex-direction:column;padding:1rem 1rem 1.5rem;border-color:var(--b2b-cart-border-color);border-top-style:solid;border-top-width:0.0625rem;box-shadow:0 -6px 12px 0 var(--elevation-six-layer-1-color)}@media all and (min-width: 48rem){.summary{padding:1rem 1.5rem 1.5rem}}.summary__notification{margin-bottom:1rem}.summary__savings{padding:0.5rem;margin-bottom:1rem;display:flex;justify-content:space-between;gap:0.5rem;border-radius:0.5rem;background-color:var(--b2b-cart-summary-accent-color);font:500 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\"}.summary__savings-amount{text-align:end}.summary__monthly-payment{margin-bottom:1rem;display:flex;justify-content:space-between;gap:0.5rem;font:500 1.125rem/1.75rem \"Inter\", \"Gilroy, Arial, sans-serif\"}@media all and (min-width: 48rem){.summary__monthly-payment{margin-bottom:1.5rem}}@media all and (min-width: 90rem){.summary__monthly-payment{margin-bottom:1rem;font:500 1.25rem/1.5rem \"Gilroy\", \"Gilroy, Arial, sans-serif\"}}.summary__monthly-price{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}.summary__monthly-price-disclosure{color:var(--b2b-cart-text-color-secondary);font:400 0.875rem/1.25rem \"Inter\", \"Gilroy, Arial, sans-serif\"}";
-const TetB2bConfiguratorCartStyle0 = tetB2bConfiguratorCartCss;
-
-const TetB2bConfiguratorCart$1 = /*@__PURE__*/ proxyCustomElement(class TetB2bConfiguratorCart extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /** @private The suffix for the price displayed - "€/mēn."). */
-        this.priceSuffix = '€/mēn.';
-        /**
-         * Updates `primarySlotFilled` or `secondarySlotFilled` based on assigned slot elements.
-         * @param e The slotchange event.
-         */
-        this.handleSlotChanged = (e) => {
-            const slot = e.target;
-            const slotName = slot.name;
-            if (slotName === 'primary') {
-                this.primarySlotFilled = slot.assignedElements().length !== 0;
-            }
-            else {
-                this.secondarySlotFilled = slot.assignedElements().length !== 0;
-            }
-        };
-        /**
-         * Handler for all accordion open state changes.
-         * Uses element reference checking to correctly distinguish between nested components (lower events bubble up).
-         * @param e The CustomEvent containing the new open state.
-         */
-        this.handleAccordionChanged = (e) => {
-            const targetEl = e.target;
-            const isOpen = e.detail;
-            if (targetEl === this.accordionEl) {
-                this.isAccordionOpen = e.detail;
-                return;
-            }
-            if (targetEl === this.primaryBlockEl) {
-                this.isPrimaryBlockOpen = isOpen;
-                return;
-            }
-            if (targetEl === this.secondaryBlockEl) {
-                this.isSecondaryBlockOpen = isOpen;
-                return;
-            }
-        };
-        /** Renders the empty cart content placeholder. */
-        this.renderEmptyContent = () => {
-            return (h("div", { class: "empty-cart" }, h("tet-icon", { class: "empty-cart__icon", name: "tc-empty", theme: this.theme }), h("div", { class: "empty-cart__title" }, translate('components-b2b-cart-empty-title')), h("div", { class: "empty-cart__description" }, translate('components-b2b-cart-empty-description'))));
-        };
-        /** Renders the two inner service accordions based on slot content. */
-        this.renderContent = () => {
-            const blocks = [
-                { name: translate('components-b2b-cart-primary-service-title'), type: 'primary' },
-                { name: translate('components-b2b-cart-secondary-service-title'), type: 'secondary' }
-            ];
-            const content = blocks.map((block) => {
-                const isPrimary = block.type === 'primary';
-                const blockOpen = isPrimary ? this.isPrimaryBlockOpen : this.isSecondaryBlockOpen;
-                const slotFilled = isPrimary ? this.primarySlotFilled : this.secondarySlotFilled;
-                const amount = isPrimary ? this.data.primaryAmount : this.data.secondaryAmount;
-                const count = isPrimary ? this.data.primaryCount : this.data.secondaryCount;
-                const countValue = count % 10 === 1 && count !== 11
-                    ? translate('components-b2b-cart-service-singular')
-                    : translate('components-b2b-cart-service-plural');
-                const refCallback = (el) => {
-                    if (block.type === 'primary') {
-                        this.primaryBlockEl = el;
-                    }
-                    else {
-                        this.secondaryBlockEl = el;
-                    }
-                };
-                return (h("div", { hidden: !slotFilled, class: "block__wrapper" }, h("tet-accordion", { ref: refCallback, key: block.type, class: "block", isOpen: isPrimary ? this.isPrimaryBlockOpen : this.isSecondaryBlockOpen, header: block.name, theme: this.theme, transparentBackground: true }, h("div", { slot: "header", class: "block__header" }, h("div", { class: "block__header-row" }, block.name, " ", h("span", { class: "block__header-amount" }, `${amount} ${this.priceSuffix}`)), h("div", { class: "block__header-row" }, h("div", { class: "block__header-details" }, `${count} ${countValue}`), h("div", { class: "block__header-indicator" }, blockOpen ? translate('components-b2b-cart-accordion-less') : translate('components-b2b-cart-accordion-more'), h("tet-icon", { class: "block__header-icon", name: `chevron-${blockOpen ? 'up' : 'down'}`, theme: this.theme })))), h("slot", { onSlotchange: this.handleSlotChanged, name: block.type }))));
-            });
-            return content;
-        };
-        /** Renders the cart summary, including notifications and financial details. */
-        this.renderSummary = () => {
-            const { summarySavings, summaryAmount, hasPrimaryNotification, hasSecondaryNotification } = this.data;
-            return (h("div", { class: "summary" }, hasPrimaryNotification && (h("tet-notification", { class: "summary__notification", type: "warning", headerTitle: translate('components-b2b-cart-primary-notification-title'), content: translate('components-b2b-cart-primary-notification-description'), allowClose: false, theme: this.theme, icon: null })), hasSecondaryNotification && (h("tet-notification", { class: "summary__notification", type: "neutral", headerTitle: translate('components-b2b-cart-secondary-notification-title'), content: translate('components-b2b-cart-secondary-notification-description'), allowClose: false, theme: this.theme })), this.isAccordionOpen && (h("div", { class: "summary__savings" }, translate('components-b2b-cart-savings-title'), h("span", { class: "summary__savings-amount" }, " ", `${summarySavings} ${this.priceSuffix}`))), h("div", { class: "summary__monthly-payment" }, translate('components-b2b-cart-monthly-payment-title'), h("div", { class: "summary__monthly-price" }, `${summaryAmount} ${this.priceSuffix}`, h("span", { class: "summary__monthly-price-disclosure" }, ' ', translate('components-b2b-cart-monthly-payment-disclosure'), ' '))), h("slot", { name: "cta" })));
-        };
-        this.theme = 'light';
-        this.data = undefined;
-        this.isCartEmpty = true;
-        this.context = 'edit';
-        this.isDesktopResolution = true;
-        this.isAccordionOpen = this.context === 'edit';
-        this.isPrimaryBlockOpen = true;
-        this.isSecondaryBlockOpen = true;
-        this.primarySlotFilled = false;
-        this.secondarySlotFilled = false;
-    }
-    /**
-     * Imperatively opens the main accordion when transitioning to desktop in 'edit' context.
-     * @param isDesktop The new resolution state.
-     */
-    openAccordionOnResolutionChange(isDesktop) {
-        if (isDesktop && this.accordionEl && this.context === 'edit') {
-            this.accordionEl.open();
-        }
-    }
-    componentWillLoad() {
-        processTranslations('tet-components', 'lv').then(() => forceUpdate(this));
-    }
-    render() {
-        const cartTitle = translate('components-b2b-cart-title');
-        const isEditMode = this.context === 'edit';
-        const isCheckoutMode = this.context === 'checkout';
-        const showSummary = !this.isCartEmpty && (isEditMode || (isCheckoutMode && this.isAccordionOpen));
-        return (h(Host, { key: '93e2d13d305c2d6ddfec3105ed0775ae3c057d92' }, h("div", { key: '563e968522292ef43b859361647545bbc375e30a', class: { cart: true, [`${this.theme}`]: true, [`${this.context}`]: true } }, h("tet-accordion", { key: 'dabb165e6dcffcbc3258929c559010ad9c8ac1d9', ref: (el) => (this.accordionEl = el), class: {
-                'cart__accordion': true,
-                [`cart__accordion--${this.context}`]: true,
-                'cart__accordion--rounded': this.isCartEmpty || (isCheckoutMode && !this.isAccordionOpen)
-            }, isOpen: this.isAccordionOpen, onOpenChanged: this.handleAccordionChanged, header: cartTitle, withBorder: true, theme: this.theme, transparentBackground: true }, h("div", { key: '10fd1d316bea9ae9e1251f8605e18759cdf77c4f', class: `cart__title--${this.context}` }, cartTitle), h("div", { key: '1df2c1b5dc98399bd194f4782ad0ec22074eb2a4', class: "cart__content" }, this.isCartEmpty ? this.renderEmptyContent() : [this.renderContent()])), showSummary && this.renderSummary())));
-    }
-    static get watchers() { return {
-        "isDesktopResolution": ["openAccordionOnResolutionChange"]
-    }; }
-    static get style() { return TetB2bConfiguratorCartStyle0; }
-}, [1, "tet-b2b-configurator-cart", {
-        "theme": [1],
-        "data": [16],
-        "isCartEmpty": [4, "is-cart-empty"],
-        "context": [1],
-        "isDesktopResolution": [4, "is-desktop-resolution"],
-        "isAccordionOpen": [32],
-        "isPrimaryBlockOpen": [32],
-        "isSecondaryBlockOpen": [32],
-        "primarySlotFilled": [32],
-        "secondarySlotFilled": [32]
-    }, undefined, {
-        "isDesktopResolution": ["openAccordionOnResolutionChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["tet-b2b-configurator-cart", "tet-accordion", "tet-icon", "tet-notification"];
-    components.forEach(tagName => { switch (tagName) {
-        case "tet-b2b-configurator-cart":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, TetB2bConfiguratorCart$1);
-            }
-            break;
-        case "tet-accordion":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "tet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "tet-notification":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { T as TetB2bConfiguratorCart$1, d as defineCustomElement$1 } from './p-cbf2c238.js';
 
 const TetB2bConfiguratorCart = TetB2bConfiguratorCart$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tet-b2b-configurator.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TetB2bConfigurator extends Components.TetB2bConfigurator, HTMLElement {}
+export const TetB2bConfigurator: {
+    prototype: TetB2bConfigurator;
+    new (): TetB2bConfigurator;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;