@tet/tet-components 1.4.83-testing → 1.4.84-staging

package/dist/collection/components/advanced/cards/tet-assembler/tet-assembler.js

@@ -0,0 +1,798 @@
+import { h, Host, forceUpdate } from "@stencil/core";
+import { assemblerScenario } from "../../../../services/api/index";
+import { generateFormUrl } from "../../../../services/url/build-form-url";
+import { processTranslations, t } from "../../../../services/translations/index";
+import { formatPrice } from "../../../../services/utils/index";
+const DEFAULT_CONTRACT_TERM = 24;
+/**
+ * Product assembler with selectable options, switches and a dynamic summary panel.
+ */
+export class TetAssembler {
+    constructor() {
+        this.scenario = '';
+        this.language = 'lv';
+        this.theme = 'light';
+        this.expanded = true;
+        this.selectedContractTermId = '';
+        this.selectedSwitchKeys = [];
+        this.selectedProductCode = '';
+        this.currentSummary = {};
+        this.backendData = null;
+    }
+    /**
+     * The root element of the assembler component.
+     */
+    host;
+    /**
+     * Emitted whenever the selected assembler configuration changes.
+     */
+    assemblerChange;
+    async componentWillLoad() {
+        await processTranslations('tet-components', this.language);
+        if (this.scenario) {
+            await this.fetchScenarioData();
+        }
+        this.initializeSelection();
+    }
+    componentDidLoad() {
+        this.emitChange('initial');
+    }
+    async scenarioChanged() {
+        if (this.scenario) {
+            await this.fetchScenarioData();
+            this.initializeSelection();
+            this.emitChange('initial');
+        }
+    }
+    /**
+     * Loads translations and rerenders the assembler when the language changes.
+     */
+    async onLanguageChange(language) {
+        processTranslations('tet-components', language).then(() => forceUpdate(this));
+    }
+    async fetchScenarioData() {
+        try {
+            const response = await assemblerScenario(this.scenario);
+            let backendData = null;
+            if (response && typeof response === 'object' && 'data' in response) {
+                backendData = response.data ?? null;
+            }
+            else {
+                backendData = response;
+            }
+            this.backendData = backendData;
+            this.expanded = !this.isBundle();
+        }
+        catch (error) {
+            console.error(error);
+            this.backendData = null;
+        }
+    }
+    getLocalizedValue(value) {
+        if (!value) {
+            return '';
+        }
+        if (typeof value === 'string') {
+            return value;
+        }
+        return value[this.language] ?? value.lv ?? '';
+    }
+    getContractTermValue(contractTerm) {
+        return contractTerm.contractTerm ?? contractTerm.term;
+    }
+    getBackendProducts() {
+        const products = this.backendData?.products;
+        if (!products) {
+            return {};
+        }
+        if (Array.isArray(products)) {
+            return products.reduce((result, product) => {
+                if (product.productCode) {
+                    result[product.productCode] = product;
+                }
+                return result;
+            }, {});
+        }
+        return products;
+    }
+    getResolvedCollapsedTitle() {
+        return this.backendData?.bundleTitle ?? '';
+    }
+    getResolvedCollapsedButtonTitle() {
+        return this.backendData?.bundleButtonText ?? '';
+    }
+    getResolvedCollapsedDescription() {
+        return this.backendData?.bundleBottomText ?? '';
+    }
+    isBundle() {
+        return this.backendData?.isBundle ?? false;
+    }
+    getResolvedContractTerms(productCode = this.selectedProductCode) {
+        const products = this.getBackendProducts();
+        const product = products[productCode] ?? Object.values(products)[0];
+        if (!product?.contractTerms?.length) {
+            return [];
+        }
+        const defaultContractTerm = DEFAULT_CONTRACT_TERM;
+        return product.contractTerms
+            .filter((contractTerm) => {
+            const term = this.getContractTermValue(contractTerm);
+            return term === 0 || term === 24;
+        })
+            .sort((firstTerm, secondTerm) => {
+            const firstValue = this.getContractTermValue(firstTerm) ?? 0;
+            const secondValue = this.getContractTermValue(secondTerm) ?? 0;
+            if (firstValue === defaultContractTerm) {
+                return -1;
+            }
+            if (secondValue === defaultContractTerm) {
+                return 1;
+            }
+            return firstValue - secondValue;
+        })
+            .map((contractTerm) => {
+            const term = this.getContractTermValue(contractTerm) ?? 0;
+            return {
+                id: String(term),
+                label: term === 0
+                    ? t('components-assembler-contract-term-indefinite')
+                    : t('components-assembler-contract-term-24'),
+                selected: term === defaultContractTerm
+            };
+        });
+    }
+    formatToggleLabel(toggleName = '') {
+        return toggleName
+            .replace(/_/g, ' ')
+            .replace(/-/g, ' ')
+            .replace(/\b\w/g, (letter) => letter.toUpperCase());
+    }
+    getPanelItemTitle(item) {
+        const toggleName = item.toggleName ?? '';
+        return item.label ?? item.title ?? item.text ?? this.formatToggleLabel(toggleName);
+    }
+    getResolvedSections() {
+        return (this.backendData?.panels ?? []).map((panel) => ({
+            id: panel.name,
+            placement: panel.placement,
+            items: panel.items ?? []
+        }));
+    }
+    getBackendCombinationToggles(combination) {
+        if (!combination || typeof combination !== 'object') {
+            return {};
+        }
+        const resolvedCombination = combination;
+        if (resolvedCombination.toggles &&
+            typeof resolvedCombination.toggles === 'object' &&
+            !Array.isArray(resolvedCombination.toggles)) {
+            return resolvedCombination.toggles;
+        }
+        return Object.entries(combination).reduce((result, [key, value]) => {
+            if (typeof value === 'boolean') {
+                result[key] = value;
+            }
+            return result;
+        }, {});
+    }
+    getBackendCombinationBenefits(combination) {
+        if (!combination || typeof combination !== 'object') {
+            return [];
+        }
+        const resolvedCombination = combination;
+        if (Array.isArray(resolvedCombination.benefits)) {
+            return resolvedCombination.benefits;
+        }
+        return [];
+    }
+    getBackendCombinationEntries() {
+        const combinations = this.backendData?.combinations;
+        if (!combinations) {
+            return [];
+        }
+        if (Array.isArray(combinations)) {
+            return combinations
+                .filter((combination) => !!combination.productCode)
+                .map((combination) => [combination.productCode, combination]);
+        }
+        return Object.entries(combinations).map(([combinationKey, combination]) => {
+            const resolvedCombination = combination;
+            const productCode = resolvedCombination.productCode ?? combinationKey;
+            if (resolvedCombination.toggles || resolvedCombination.benefits) {
+                return [
+                    productCode,
+                    {
+                        ...resolvedCombination,
+                        productCode
+                    }
+                ];
+            }
+            return [
+                productCode,
+                {
+                    productCode,
+                    toggles: this.getBackendCombinationToggles(combination)
+                }
+            ];
+        });
+    }
+    getSelectedBackendCombination() {
+        return this.getBackendCombination(this.selectedProductCode);
+    }
+    getBackendCombination(productCode) {
+        return this.getBackendCombinationEntries()
+            .find(([currentProductCode]) => currentProductCode === productCode)?.[1];
+    }
+    getBackendToggleKeys() {
+        const keysFromCombinations = this.getBackendCombinationEntries()
+            .flatMap(([, combination]) => Object.keys(this.getBackendCombinationToggles(combination)));
+        const keysFromPanels = (this.backendData?.panels ?? [])
+            .flatMap((panel) => panel.items ?? [])
+            .filter((item) => item.type === 'toggle' && !!item.toggleName)
+            .map((item) => item.toggleName);
+        return Array.from(new Set([...keysFromCombinations, ...keysFromPanels]));
+    }
+    getInitialBackendProductCode() {
+        const combinations = this.getBackendCombinationEntries();
+        const products = this.getBackendProducts();
+        const defaultProduct = this.backendData?.defaultProduct ?? this.backendData?.defaultProductCode;
+        if (defaultProduct) {
+            if (this.getBackendCombination(defaultProduct)) {
+                return defaultProduct;
+            }
+            if (products[defaultProduct]) {
+                return defaultProduct;
+            }
+        }
+        if (!combinations.length) {
+            return Object.keys(products)[0] ?? '';
+        }
+        return combinations[0][0];
+    }
+    getSelectedSwitchKeysFromBackendProductCode(productCode) {
+        const toggles = this.getBackendCombinationToggles(this.getBackendCombination(productCode));
+        return Object.entries(toggles)
+            .filter(([, checked]) => checked)
+            .map(([key]) => key);
+    }
+    getCurrentBackendToggleState() {
+        return this.getBackendToggleKeys().reduce((result, key) => {
+            result[key] = this.selectedSwitchKeys.includes(key);
+            return result;
+        }, {});
+    }
+    getBackendProductCodeByToggleState(toggleState) {
+        const toggleKeys = this.getBackendToggleKeys();
+        const combination = this.getBackendCombinationEntries().find(([, currentCombination]) => {
+            const toggles = this.getBackendCombinationToggles(currentCombination);
+            return toggleKeys.every((key) => Boolean(toggles[key]) === Boolean(toggleState[key]));
+        });
+        return combination?.[0] ?? '';
+    }
+    isBackendSwitchDisabled(switchKey) {
+        if (!this.backendData?.combinations) {
+            return false;
+        }
+        const currentState = this.getCurrentBackendToggleState();
+        const nextState = {
+            ...currentState,
+            [switchKey]: !currentState[switchKey]
+        };
+        return !this.getBackendProductCodeByToggleState(nextState);
+    }
+    getSelectedBackendProduct(productCode = this.selectedProductCode) {
+        if (!productCode) {
+            return undefined;
+        }
+        return this.getBackendProducts()[productCode];
+    }
+    getSelectedBackendProductContractTerm(productCode = this.selectedProductCode, contractTermId = this.selectedContractTermId) {
+        const product = this.getSelectedBackendProduct(productCode);
+        if (!product?.contractTerms?.length) {
+            return undefined;
+        }
+        return product.contractTerms.find((contractTerm) => String(this.getContractTermValue(contractTerm)) === contractTermId);
+    }
+    getProductBaseUrl(product) {
+        const productFormUrl = this.getLocalizedValue(product?.formUrl);
+        if (productFormUrl) {
+            try {
+                return new URL(productFormUrl, window.location.origin).href;
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        return '';
+    }
+    getProductFormUrl(product, contractTerm, contractTermId = this.selectedContractTermId) {
+        const baseUrl = this.getProductBaseUrl(product);
+        if (!baseUrl || !this.selectedProductCode) {
+            return baseUrl;
+        }
+        const selectedContractTerm = contractTerm
+            ? this.getContractTermValue(contractTerm) ?? Number(contractTermId)
+            : Number(contractTermId);
+        try {
+            const formUrl = generateFormUrl(baseUrl, {
+                product: product?.productCode ?? this.selectedProductCode,
+                contractTerm: selectedContractTerm,
+                promotion: contractTerm?.promotionCode ?? undefined
+            });
+            const finalUrl = new URL(formUrl);
+            finalUrl.searchParams.set('lang', this.language);
+            finalUrl.searchParams.set('from', 'tet.lv');
+            return finalUrl.toString();
+        }
+        catch (error) {
+            console.error(error);
+            return baseUrl;
+        }
+    }
+    benefitMatchesContractTerm(benefit) {
+        const selectedContractTerm = Number(this.selectedContractTermId);
+        const contractTerms = benefit.contractTerms;
+        if (!contractTerms) {
+            return true;
+        }
+        if (Array.isArray(contractTerms)) {
+            return contractTerms.includes(selectedContractTerm);
+        }
+        return Boolean(contractTerms[String(selectedContractTerm)]);
+    }
+    getSelectedBackendBenefitsForPlacement(placement) {
+        const combination = this.getSelectedBackendCombination();
+        return this.getBackendCombinationBenefits(combination).filter((benefit) => {
+            const benefitPlacement = benefit.placement ?? 'main';
+            return benefitPlacement === placement && this.benefitMatchesContractTerm(benefit);
+        });
+    }
+    initializeSelection() {
+        const selectedProductCode = this.getInitialBackendProductCode();
+        const contractTerms = this.getResolvedContractTerms(selectedProductCode);
+        const selectedContractTermId = contractTerms.find((term) => term.selected)?.id ?? contractTerms[0]?.id ?? '';
+        this.selectedContractTermId = selectedContractTermId;
+        this.selectedSwitchKeys = this.getSelectedSwitchKeysFromBackendProductCode(selectedProductCode);
+        this.selectedProductCode = selectedProductCode;
+        this.currentSummary = this.resolveBackendSummary(selectedContractTermId);
+    }
+    mergeSummary(currentSummary, summaryOverride) {
+        if (!summaryOverride) {
+            return currentSummary;
+        }
+        return Object.entries(summaryOverride).reduce((result, [key, value]) => {
+            if (value !== undefined) {
+                result[key] = value;
+            }
+            return result;
+        }, { ...currentSummary });
+    }
+    resolveBackendSummary(selectedContractTermId) {
+        if (!this.backendData?.products || !this.selectedProductCode) {
+            return {};
+        }
+        const product = this.getSelectedBackendProduct(this.selectedProductCode);
+        const contractTerm = this.getSelectedBackendProductContractTerm(this.selectedProductCode, selectedContractTermId);
+        const price = contractTerm?.amount !== undefined && contractTerm?.amount !== null
+            ? contractTerm.amount
+            : contractTerm?.price ?? product?.amount ?? product?.price;
+        const productBenefits = this.getLocalizedValue(contractTerm?.benefits) ||
+            this.getLocalizedValue(product?.benefits);
+        const currency = t('components-assembler-currency-per-month');
+        const formattedPrice = price === undefined || price === null || price === ''
+            ? ''
+            : formatPrice(price, { currency: '' });
+        const basePrice = product?.amount;
+        const formattedBasePrice = basePrice === undefined || basePrice === null || basePrice === ''
+            ? ''
+            : formatPrice(basePrice, { currency });
+        return this.mergeSummary({}, {
+            title: this.getLocalizedValue(contractTerm?.name) ||
+                this.getLocalizedValue(product?.name),
+            subtitle: this.getLocalizedValue(contractTerm?.subtitle) ||
+                this.getLocalizedValue(product?.subtitle) ||
+                this.getLocalizedValue(product?.description) ||
+                '',
+            price: formattedPrice,
+            currency,
+            oldPrice: contractTerm?.showDiscount ? formattedBasePrice : '',
+            description: this.getLocalizedValue(contractTerm?.priceDescription) ||
+                this.getLocalizedValue(contractTerm?.description) ||
+                '',
+            highlightDescription: productBenefits,
+            primaryButtonTitle: t('components-assembler-apply-button-text'),
+            primaryButtonUrl: this.getProductFormUrl(product, contractTerm, selectedContractTermId)
+        });
+    }
+    emitChange(source, changedKey, selectedContractTermId = this.selectedContractTermId, selectedSwitchKeys = this.selectedSwitchKeys, summary = this.currentSummary) {
+        this.assemblerChange.emit({
+            source,
+            changedKey,
+            selectedContractTermId,
+            selectedSwitchKeys: [...selectedSwitchKeys],
+            selectedProductCode: this.selectedProductCode,
+            summary: { ...summary }
+        });
+    }
+    selectContractTerm(contractTermId) {
+        this.selectedContractTermId = contractTermId;
+        const currentSummary = this.resolveBackendSummary(contractTermId);
+        this.currentSummary = currentSummary;
+        this.emitChange('contractTerm', contractTermId, contractTermId, this.selectedSwitchKeys, currentSummary);
+    }
+    onContractTermSelected(event) {
+        const contractTermId = String(event.detail.new);
+        if (contractTermId !== this.selectedContractTermId) {
+            this.selectContractTerm(contractTermId);
+        }
+    }
+    toggleSwitch(switchKey, checked) {
+        if (!this.backendData?.combinations || this.isBackendSwitchDisabled(switchKey)) {
+            return;
+        }
+        const toggleState = {
+            ...this.getCurrentBackendToggleState(),
+            [switchKey]: checked
+        };
+        const selectedProductCode = this.getBackendProductCodeByToggleState(toggleState);
+        if (!selectedProductCode) {
+            return;
+        }
+        const selectedSwitchKeys = this.getSelectedSwitchKeysFromBackendProductCode(selectedProductCode);
+        this.selectedProductCode = selectedProductCode;
+        const currentSummary = this.resolveBackendSummary(this.selectedContractTermId);
+        this.selectedSwitchKeys = selectedSwitchKeys;
+        this.currentSummary = currentSummary;
+        this.emitChange('switch', switchKey, this.selectedContractTermId, selectedSwitchKeys, currentSummary);
+    }
+    renderContractTerms(labelOverride) {
+        const contractTerms = this.getResolvedContractTerms();
+        const label = labelOverride ?? '';
+        if (!contractTerms.length) {
+            return null;
+        }
+        return (h("div", { class: "assembler__contract" }, label ? h("span", { class: "assembler__field-label" }, label) : null, h("tet-tab-header", { class: "assembler__contract-tabs", segmented: true, position: "center", theme: this.theme === 'dark' ? 'dark' : 'light', defaultTab: this.selectedContractTermId, "aria-label": label, onTabSelected: (event) => this.onContractTermSelected(event) }, contractTerms.map((term) => (h("button", { "data-name": term.id, type: "button" }, term.label))))));
+    }
+    renderSwitchRow(item) {
+        const isChecked = this.selectedSwitchKeys.includes(item.key);
+        const isDisabled = item.disabled || this.isBackendSwitchDisabled(item.key);
+        return (h("div", { class: "assembler__switch-row" }, h("tet-switch", { class: {
+                'assembler__switch': true,
+                'is-disabled': isDisabled
+            }, key: `${item.key}-${isChecked}-${isDisabled}`, name: item.key, theme: this.theme, checked: isChecked, disabled: isDisabled, labelPosition: "left", focusStyleOnContainer: true, onCheck: (event) => this.toggleSwitch(item.key, event.detail.checked) }, h("div", { class: "assembler__switch-label" }, item.icon ? h("tet-icon", { class: "assembler__switch-icon", name: item.icon, theme: this.theme }) : null, h("span", null, item.label), isDisabled ? h("tet-icon", { class: "assembler__switch-lock", name: "tc-lock", theme: this.theme }) : null))));
+    }
+    getJoomlaModalData(label, joomlaModalId) {
+        const value = label ?? '';
+        const modalIdStart = 3;
+        const modalIdEnd = value.startsWith('[[[') ? value.indexOf(']]]', modalIdStart) : -1;
+        const hasEmbeddedModalId = modalIdEnd > modalIdStart;
+        const embeddedModalId = hasEmbeddedModalId ? value.slice(modalIdStart, modalIdEnd) : '';
+        const embeddedLabel = hasEmbeddedModalId ? value.slice(modalIdEnd + 3).trimStart() : '';
+        return {
+            modalId: joomlaModalId ?? embeddedModalId,
+            label: embeddedLabel || value
+        };
+    }
+    renderInformationalRow(label, icon, isVisuallyDisabled = false) {
+        return (h("div", { class: {
+                'assembler__benefit--visually-disabled': isVisuallyDisabled,
+                'assembler__switch-row': true
+            } }, h("div", { class: "assembler__switch-label" }, icon ? h("tet-icon", { class: "assembler__switch-icon", name: icon, theme: this.theme }) : null, h("span", null, label))));
+    }
+    renderBackendBenefit(benefit) {
+        if (!benefit.label && !benefit.icon) {
+            return null;
+        }
+        const modalData = this.getJoomlaModalData(benefit.label, benefit.joomlaModalId);
+        const isVisuallyDisabled = benefit.isVisuallyDisabled ?? false;
+        if (benefit.type === 'joomla_modal' && modalData.modalId) {
+            return (h("button", { class: {
+                    'assembler__benefit-link': true,
+                    'assembler__benefit--visually-disabled': isVisuallyDisabled,
+                    'tet-link': true
+                }, type: "button", "data-modal-screen-key": modalData.modalId }, h("span", { class: "assembler__switch-label" }, benefit.icon ? h("tet-icon", { class: "assembler__switch-icon", name: benefit.icon, theme: this.theme }) : null, h("span", null, modalData.label)), h("span", { class: "assembler__benefit-link-icon" }, h("tet-icon", { class: "assembler__benefit-link-icon--chevron", name: "tc-chevron-right-small" }))));
+        }
+        return this.renderInformationalRow(modalData.label, benefit.icon, isVisuallyDisabled);
+    }
+    renderBackendBenefitsForPlacement(placement) {
+        const benefits = this.getSelectedBackendBenefitsForPlacement(placement);
+        if (!benefits.length) {
+            return null;
+        }
+        return benefits.map((benefit) => this.renderBackendBenefit(benefit));
+    }
+    renderPanelItem(item, _section) {
+        const toggleName = item.toggleName;
+        const title = this.getPanelItemTitle(item);
+        if (item.type === 'contract_term') {
+            return this.renderContractTerms(title);
+        }
+        if (item.type === 'toggle' && toggleName) {
+            return this.renderSwitchRow({
+                key: toggleName,
+                label: title,
+                icon: item.icon ?? undefined
+            });
+        }
+        if (item.type === 'joomla_modal') {
+            const modalData = this.getJoomlaModalData(item.label, item.joomlaModalId);
+            return (h("div", { class: "assembler__switch-row" }, h("div", { class: "assembler__switch-label" }, item.icon ? h("tet-icon", { class: "assembler__switch-icon", name: item.icon }) : null, modalData.modalId ? (h("button", { class: "assembler__modal-button", type: "button", "data-modal-screen-key": modalData.modalId }, modalData.label)) : (h("span", null, modalData.label)))));
+        }
+        if (item.type === 'benefit') {
+            if (this.backendData?.combinations) {
+                return null;
+            }
+            if (!title && !item.icon) {
+                return null;
+            }
+            return this.renderInformationalRow(title, item.icon);
+        }
+        if (item.type === 'text') {
+            return this.renderInformationalRow(title, item.icon);
+        }
+        return (h("div", { class: {
+                'assembler__switch-row': true,
+                'assembler__switch-row--heading': item.type === 'heading'
+            } }, h("div", { class: "assembler__switch-label" }, item.icon ? h("tet-icon", { class: "assembler__switch-icon", name: item.icon }) : null, h("span", null, title)), item.additionalText ? (h("span", { class: "assembler__option-description assembler__option-description--aside" }, item.additionalText)) : null));
+    }
+    renderSwitchSection(section) {
+        if (section.items?.length) {
+            const placement = section.placement ?? 'main';
+            let combinationBenefitsRendered = false;
+            return (h("div", { class: "assembler__switch-list" }, section.items.map((item) => {
+                if (item.type === 'benefit' && this.backendData?.combinations) {
+                    if (combinationBenefitsRendered) {
+                        return null;
+                    }
+                    combinationBenefitsRendered = true;
+                    return this.renderBackendBenefitsForPlacement(placement);
+                }
+                return this.renderPanelItem(item, section);
+            })));
+        }
+        return null;
+    }
+    renderSection(section) {
+        return (h("section", { class: "assembler__section" }, this.renderSwitchSection(section)));
+    }
+    renderSummary() {
+        const summary = this.currentSummary;
+        const target = summary.linkOpenBlank ? '_blank' : '_self';
+        const primaryButtonTitle = summary.primaryButtonTitle || t('components-assembler-apply-button-text');
+        return (h("aside", { class: "assembler__summary", "aria-live": "polite" }, summary.promoText ? (h("div", { class: "assembler__promo" }, h("tet-icon", { name: "gift" }), h("span", { class: "assembler__promo--title" }, summary.promoText))) : null, h("div", { class: "assembler__summary-top" }, h("div", { class: "assembler__summary-heading" }, h("div", null, summary.title ? h("h3", null, summary.title) : null, summary.subtitle ? h("p", null, summary.subtitle) : null), summary.badge ? h("span", { class: "assembler__badge" }, summary.badge) : null), summary.price ? (h("div", { class: "assembler__price" }, h("span", { class: "assembler__price-value" }, summary.price), summary.currency ? h("span", { class: "assembler__price-currency" }, summary.currency) : null)) : null, summary.oldPrice ? h("span", { class: "assembler__old-price" }, summary.oldPrice) : null, summary.description ? h("p", { class: "assembler__summary-description" }, summary.description) : null, summary.highlight ? (h("div", { class: "assembler__highlight" }, h("strong", null, summary.highlight))) : null, summary.highlightDescription ? (h("p", { class: "assembler__summary-description" }, summary.highlightDescription)) : null), h("div", { class: "assembler__summary-actions" }, summary.primaryButtonUrl ? (h("tet-button", { class: "assembler__button", type: "primary", theme: this.theme, url: summary.primaryButtonUrl, urlTarget: target }, primaryButtonTitle)) : null, summary.secondaryButtonTitle && summary.secondaryButtonUrl ? (h("tet-button", { class: "assembler__button", type: "secondary", theme: this.theme, url: summary.secondaryButtonUrl, urlTarget: target }, summary.secondaryButtonTitle)) : null, summary.contractSummaryText && summary.contractSummaryUrl ? (h("a", { class: "assembler__summary-link", href: summary.contractSummaryUrl, target: target }, summary.contractSummaryText)) : null, summary.footerText ? h("p", null, summary.footerText) : null, summary.footerSecondaryText ? h("p", null, summary.footerSecondaryText) : null)));
+    }
+    getBundleChoiceToggle() {
+        return this.backendData?.bundleChoiceToggle ?? '';
+    }
+    getBackendProductCodeByToggleValue(toggleKey, value) {
+        const combination = this.getBackendCombinationEntries().find(([, currentCombination]) => this.getBackendCombinationToggles(currentCombination)[toggleKey] === value);
+        return combination?.[0] ?? '';
+    }
+    selectBackendProductByCode(productCode, changedKey) {
+        if (!productCode) {
+            return;
+        }
+        const selectedSwitchKeys = this.getSelectedSwitchKeysFromBackendProductCode(productCode);
+        const contractTerms = this.getResolvedContractTerms(productCode);
+        const selectedContractTermId = contractTerms.some((term) => term.id === this.selectedContractTermId)
+            ? this.selectedContractTermId
+            : contractTerms.find((term) => term.selected)?.id ?? contractTerms[0]?.id ?? this.selectedContractTermId;
+        this.selectedProductCode = productCode;
+        this.selectedContractTermId = selectedContractTermId;
+        const currentSummary = this.resolveBackendSummary(selectedContractTermId);
+        this.selectedSwitchKeys = selectedSwitchKeys;
+        this.currentSummary = currentSummary;
+        this.emitChange('switch', changedKey, selectedContractTermId, selectedSwitchKeys, currentSummary);
+    }
+    expandAssembler() {
+        const bundleChoiceToggle = this.getBundleChoiceToggle();
+        if (this.backendData?.combinations && bundleChoiceToggle) {
+            const nextToggleState = {
+                ...this.getCurrentBackendToggleState(),
+                [bundleChoiceToggle]: true
+            };
+            const productCode = this.getBackendProductCodeByToggleState(nextToggleState) ||
+                this.getBackendProductCodeByToggleValue(bundleChoiceToggle, true);
+            this.selectBackendProductByCode(productCode, bundleChoiceToggle);
+        }
+        this.expanded = true;
+    }
+    collapseAssembler() {
+        const bundleChoiceToggle = this.getBundleChoiceToggle();
+        if (this.backendData?.combinations && bundleChoiceToggle) {
+            const nextToggleState = {
+                ...this.getCurrentBackendToggleState(),
+                [bundleChoiceToggle]: false
+            };
+            const productCode = this.getBackendProductCodeByToggleState(nextToggleState) ||
+                this.getBackendProductCodeByToggleValue(bundleChoiceToggle, false);
+            this.selectBackendProductByCode(productCode, bundleChoiceToggle);
+        }
+        this.expanded = false;
+    }
+    getExpandableSection() {
+        return this.getResolvedSections().find((section) => section.placement === 'side_panel');
+    }
+    getVisibleSections() {
+        const expandableSection = this.getExpandableSection();
+        return this.getResolvedSections().filter((section) => {
+            if (expandableSection && section.id === expandableSection.id) {
+                return false;
+            }
+            return section.placement !== 'side_panel';
+        });
+    }
+    renderCollapsedContent() {
+        const collapsedTitle = this.getResolvedCollapsedTitle();
+        const collapsedButtonTitle = this.getResolvedCollapsedButtonTitle();
+        const collapsedDescription = this.getResolvedCollapsedDescription();
+        if (!collapsedTitle && !collapsedButtonTitle && !collapsedDescription) {
+            return null;
+        }
+        return (h("div", { class: "assembler__collapsed-content", "aria-hidden": this.expanded ? 'true' : 'false' }, collapsedTitle ? h("h3", null, collapsedTitle) : null, collapsedButtonTitle ? (h("tet-button", { class: "assembler__collapsed-button", type: "secondary", theme: this.theme, onClick: () => this.expandAssembler() }, collapsedButtonTitle)) : null, collapsedDescription ? h("div", { innerHTML: collapsedDescription }) : null));
+    }
+    renderExpandedContent() {
+        const expandableSection = this.getExpandableSection();
+        if (!expandableSection) {
+            return null;
+        }
+        return (h("div", { class: "assembler__expanded-content", "aria-hidden": this.expanded ? 'false' : 'true' }, this.isBundle() ? (h("button", { class: "assembler__collapse-button", type: "button", "aria-label": t('components-assembler-close-button-label'), onClick: () => this.collapseAssembler() }, h("tet-icon", { name: "close" }))) : null, this.renderSection(expandableSection)));
+    }
+    renderSidePanel() {
+        if (!this.getExpandableSection() &&
+            !this.getResolvedCollapsedTitle() &&
+            !this.getResolvedCollapsedButtonTitle() &&
+            !this.getResolvedCollapsedDescription()) {
+            return null;
+        }
+        return (h("div", { class: "assembler__side-panel" }, this.renderCollapsedContent(), this.renderExpandedContent()));
+    }
+    render() {
+        const hasSidePanel = !!this.getExpandableSection() ||
+            !!this.getResolvedCollapsedTitle() ||
+            !!this.getResolvedCollapsedButtonTitle() ||
+            !!this.getResolvedCollapsedDescription();
+        return (h(Host, { key: 'c5b26de73483597b6bb4dcec2aaafa849bcf7ea4' }, h("div", { key: '0f2259f993c606a81412a7698bff2b8e1925cd4b', class: {
+                'assembler-layout': true,
+                'has-side-panel': hasSidePanel,
+                'is-expanded': this.expanded
+            } }, this.renderSidePanel(), h("div", { key: '88082f45e2373f8901bc49d05daa66056e0a0fb7', class: "assembler" }, h("div", { key: 'ea2da55ae73662faca92606195e09821fde4a9d9', class: "assembler__configuration" }, h("div", { key: '26993c786cc73a51b9a4f57209d6835c54d5ae5b', class: "assembler__content" }, this.getVisibleSections().map((section) => this.renderSection(section)))), this.renderSummary()))));
+    }
+    static get is() { return "tet-assembler"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-assembler.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-assembler.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "scenario": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Scenario name from Joomla admin."
+                },
+                "attribute": "scenario",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Language",
+                    "resolved": "\"en\" | \"lv\" | \"ru\"",
+                    "references": {
+                        "Language": {
+                            "location": "import",
+                            "path": "@services/translations",
+                            "id": "src/services/translations/index.ts::Language"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current language."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'lv'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the assembler component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether assembler configuration sections are expanded."
+                },
+                "attribute": "expanded",
+                "reflect": true,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedContractTermId": {},
+            "selectedSwitchKeys": {},
+            "selectedProductCode": {},
+            "currentSummary": {},
+            "backendData": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "assemblerChange",
+                "name": "assemblerChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the selected assembler configuration changes."
+                },
+                "complexType": {
+                    "original": "AssemblerChangeEventInterface",
+                    "resolved": "AssemblerChangeEventInterface",
+                    "references": {
+                        "AssemblerChangeEventInterface": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-assembler/tet-assembler.tsx",
+                            "id": "src/components/advanced/cards/tet-assembler/tet-assembler.tsx::AssemblerChangeEventInterface"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "scenario",
+                "methodName": "scenarioChanged"
+            }, {
+                "propName": "language",
+                "methodName": "onLanguageChange"
+            }];
+    }
+}