@tet/tet-components 1.4.71-testing → 1.4.72-staging

package/dist/collection/components/advanced/cards/tet-compare-card-v3/tet-compare-card-v3.js

@@ -0,0 +1,699 @@
+import { h, Fragment } from "@stencil/core";
+import { productComparison } from "../../../../services/api/index";
+export class TetCompareCardV3 {
+    constructor() {
+        this.cardType = 'static';
+        this.theme = 'light';
+        this.bestChoice = false;
+        this.language = 'lv';
+        this.options = [];
+        this.bonuses = [];
+        this.benefits = [];
+        this.contractTerm = 0;
+        this.bestChoiceText = '';
+        this.currency = '€/mēn.';
+        this.secondaryLink = '';
+        this.secondaryLinkText = '';
+        this.secondaryLinkOpenBlank = false;
+        this.buttonTitle = '';
+        this.linkOpenBlank = false;
+        this.showLoader = true;
+        this.selectedProductCode = '';
+        this.selectedSwitchKeys = [];
+        this.preselectedKeys = [];
+        this.preselectedProductCode = '';
+        this.allProductData = {};
+        this.preselectedRemountId = 0;
+        this.buttonSize = 'large';
+    }
+    buttonSizeBreakpoint = 1280;
+    /**
+     * WeakMap to store unique IDs for bonuses.
+     */
+    bonusWeakMap = new WeakMap();
+    /**
+     * Counter for unique bonus IDs.
+     */
+    bonusCounter = 0;
+    /**
+     * Emitted when the card has loaded.
+     */
+    cardLoaded;
+    /**
+     * Emitted when the selected product has changed.
+     */
+    productChanged;
+    /**
+     * @param event
+     */
+    onOptionSelected(event) {
+        const productCode = event.detail.value;
+        this.selectedProductCode = productCode;
+        this.productChanged.emit();
+    }
+    async componentWillLoad() {
+        this.syncButtonSize();
+        this.fetchProductComparison();
+        switch (this.cardType) {
+            case 'dropdown':
+            case 'radio': {
+                const selectedOption = this.options.find(option => option.preselected) ?? this.options[0];
+                if (selectedOption) {
+                    this.selectedProductCode = selectedOption.productCode;
+                    this.productChanged.emit();
+                }
+                break;
+            }
+            case 'switcher': {
+                const preselected = this.options.find(option => option.preselected);
+                if (preselected) {
+                    this.preselectedKeys = [...preselected.keys ?? []];
+                    this.preselectedProductCode = preselected.productCode;
+                    this.selectedSwitchKeys = [...preselected.keys ?? []];
+                    this.selectedProductCode = preselected.productCode;
+                    this.productChanged.emit();
+                }
+                break;
+            }
+            case 'static':
+                this.selectedProductCode = this.options.find(option => option.productCode)?.productCode || '';
+                this.productChanged.emit();
+                break;
+            default:
+                break;
+        }
+    }
+    onResize() {
+        this.syncButtonSize();
+    }
+    syncButtonSize() {
+        if (globalThis.window === undefined) {
+            this.buttonSize = 'large';
+            return;
+        }
+        const nextButtonSize = globalThis.window.innerWidth < this.buttonSizeBreakpoint
+            ? 'medium'
+            : 'large';
+        if (this.buttonSize !== nextButtonSize) {
+            this.buttonSize = nextButtonSize;
+        }
+    }
+    getSelectionOptions() {
+        return this.options.map((option) => ({
+            label: option.label || '',
+            value: option.productCode || '',
+            preselected: option.preselected || false
+        }));
+    }
+    /**
+     * Resolves product code by matching an exact toggle-key combination.
+     */
+    getToggledProductCode(keys) {
+        const sortedKeys = [...keys].sort((a, b) => a.localeCompare(b)).join(',');
+        const found = this.options.find(option => [...option.keys ?? []].sort((a, b) => a.localeCompare(b)).join(',') === sortedKeys);
+        return found ? found.productCode : null;
+    }
+    /**
+     * Handles switch interactions and keeps selection in a valid state.
+     */
+    handleSwitchToggle(key, checked) {
+        const benefit = this.benefits.find(benefit => benefit.toggleKey === key);
+        let activeKeys = [...this.selectedSwitchKeys];
+        if (checked) {
+            if (benefit?.selectAll) {
+                const fullCombo = this.getFullComboToggleOption();
+                if (fullCombo) {
+                    this.selectedSwitchKeys = [...fullCombo.keys ?? []];
+                    this.selectedProductCode = fullCombo.productCode;
+                    this.productChanged.emit();
+                    return;
+                }
+            }
+            if (!activeKeys.includes(key))
+                activeKeys.push(key);
+        }
+        else {
+            const newActiveKeys = activeKeys.filter(k => k !== key);
+            if (newActiveKeys.length === 0) {
+                this.selectedSwitchKeys = [...this.preselectedKeys];
+                this.selectedProductCode = this.preselectedProductCode;
+                this.preselectedRemountId++;
+                this.productChanged.emit();
+                return;
+            }
+            const validProductCode = this.getToggledProductCode(newActiveKeys);
+            if (validProductCode) {
+                this.selectedSwitchKeys = newActiveKeys;
+                this.selectedProductCode = validProductCode;
+                this.productChanged.emit();
+                return;
+            }
+            this.selectedSwitchKeys = [...this.preselectedKeys];
+            this.selectedProductCode = this.preselectedProductCode;
+            this.preselectedRemountId++;
+            this.productChanged.emit();
+            return;
+        }
+        activeKeys = activeKeys.sort((a, b) => a.localeCompare(b));
+        const productCode = this.getToggledProductCode(activeKeys);
+        this.selectedSwitchKeys = activeKeys;
+        if (productCode) {
+            this.selectedProductCode = productCode;
+            this.productChanged.emit();
+        }
+        else {
+            this.selectedProductCode = this.preselectedProductCode;
+            this.selectedSwitchKeys = [...this.preselectedKeys];
+            this.preselectedRemountId++;
+            this.productChanged.emit();
+        }
+    }
+    /**
+     * Returns option with the most keys (used by select-all switch behavior).
+     */
+    getFullComboToggleOption() {
+        if (!this.options.length) {
+            return null;
+        }
+        return this.options.reduce((max, curr) => (curr.keys ?? []).length > (max.keys ?? []).length ? curr : max, this.options[0]);
+    }
+    async fetchProductComparison() {
+        const productCodes = this.options.map(option => option.productCode).filter(Boolean);
+        if (productCodes.length) {
+            try {
+                const response = await productComparison(productCodes.join(','));
+                this.allProductData = response['products'] || {};
+            }
+            catch (e) {
+                this.allProductData = {};
+                console.error(e);
+            }
+        }
+        else {
+            this.allProductData = {};
+        }
+        this.showLoader = false;
+        this.cardLoaded.emit();
+    }
+    /**
+     * Returns contract term data matching current `contractTerm` prop.
+     */
+    selectedContractTerm() {
+        const contractTerms = this.allProductData[this.selectedProductCode]?.contractTerms;
+        if (!contractTerms?.length) {
+            return;
+        }
+        return contractTerms.find((contractTerm) => contractTerm.term === this.contractTerm);
+    }
+    currentBonuses() {
+        const option = this.options.find(option => option.productCode === this.selectedProductCode);
+        return option?.bonuses ?? [];
+    }
+    allBonuses() {
+        return this.options.flatMap(option => option.bonuses || []);
+    }
+    /**
+     * Returns a stable ID for each bonus object across renders.
+     */
+    getUniqueBonusId(bonus) {
+        const existingId = this.bonusWeakMap.get(bonus);
+        if (existingId) {
+            return existingId;
+        }
+        const nextId = `bonus-${this.bonusCounter++}`;
+        this.bonusWeakMap.set(bonus, nextId);
+        return nextId;
+    }
+    /**
+     * Chooses semantic element tag from provided data attributes.
+     */
+    getElementTag(attributes) {
+        if (attributes?.href?.trim()) {
+            return 'a';
+        }
+        const modalKey = attributes?.['data-modal-screen-key']?.trim();
+        const role = attributes?.role?.trim().toLowerCase();
+        if (modalKey || role === 'button') {
+            return 'button';
+        }
+        return 'div';
+    }
+    renderBenefit(benefit) {
+        const attributes = Array.isArray(benefit.dataAttributes) ? undefined : benefit.dataAttributes;
+        const isInteractive = Boolean(attributes && Object.keys(attributes).length > 0);
+        const ElementTag = this.getElementTag(attributes);
+        const hasTitle = !!benefit.title;
+        const hasBenefit = !!benefit.icon && !!benefit.name;
+        return (h(Fragment, null, hasTitle && (h("div", { class: "benefits__title" }, benefit.title)), hasBenefit && (h(ElementTag, { class: {
+                'benefit': true,
+                'benefit--interactive': isInteractive,
+            }, key: benefit.toggleKey, ...(attributes || {}) }, h("tet-icon", { theme: this.theme, class: "benefit__icon", name: benefit.icon }), h("span", { class: "benefit__text" }, benefit.name), isInteractive && (h("div", { class: "benefit__chevron-icon-container" }, h("tet-icon", { class: "benefit__icon benefit__icon--chevron", name: "tc-chevron-right-small" })))))));
+    }
+    renderSwitch(benefit) {
+        const { toggleKey } = benefit;
+        if (!toggleKey) {
+            return null;
+        }
+        const isPreselected = this.preselectedKeys.includes(toggleKey);
+        const switchKey = isPreselected
+            ? `${toggleKey}-${this.preselectedRemountId}`
+            : toggleKey;
+        const hasTitle = !!benefit.title;
+        return (h(Fragment, null, hasTitle && (h("div", { class: "benefits__title" }, benefit.title)), h("div", { class: "switch-wrapper" }, h("tet-switch", { class: "switch", theme: this.theme, key: switchKey, name: toggleKey, checked: this.selectedSwitchKeys.includes(toggleKey), onCheck: (e) => this.handleSwitchToggle(toggleKey, e.detail.checked), labelPosition: "left", focusStyleOnContainer: true }, h("div", { class: "switch-label" }, h("tet-icon", { theme: this.theme, class: "benefit__icon", name: benefit.icon }), benefit.name)))));
+    }
+    /**
+     * Renders bonuses and marks bonuses outside current product as inactive.
+     */
+    renderBonuses() {
+        const currentBonusIds = new Set(this.currentBonuses().map(this.getUniqueBonusId.bind(this)));
+        const allBonuses = this.allBonuses();
+        const bonusTitle = this.options.find(option => option.productCode === this.selectedProductCode)?.bonusTitle;
+        if (allBonuses.length < 1) {
+            return null;
+        }
+        return (h("div", { class: "bonuses" }, !!bonusTitle && (h("div", { class: "bonuses__title" }, bonusTitle)), h("div", { class: "bonuses__bonus-container" }, allBonuses.map((bonus) => {
+            const id = this.getUniqueBonusId(bonus);
+            const isActive = currentBonusIds.has(id);
+            const attributes = Array.isArray(bonus.dataAttributes) ? undefined : bonus.dataAttributes;
+            const isInteractive = Boolean(attributes && Object.keys(attributes).length > 0);
+            const ElementTag = this.getElementTag(attributes);
+            return (h(ElementTag, { key: id, type: isInteractive ? 'button' : undefined, class: {
+                    'bonus': true,
+                    'bonus--inactive': !isActive,
+                    'bonus--interactive': isInteractive,
+                }, ...(attributes || {}) }, h("tet-icon", { theme: this.theme, class: "bonus__icon", name: bonus.iconName }), h("span", { class: "bonus__text" }, bonus.name), isInteractive && (h("div", { class: "bonus__chevron-icon-container" }, h("tet-icon", { class: "bonus__icon bonus__icon--chevron", name: "tc-chevron-right-small" })))));
+        }))));
+    }
+    renderRadioOptions() {
+        const selectionOptions = this.getSelectionOptions();
+        return (h("div", { class: "radio-container" }, selectionOptions.map((option) => (h("div", { class: "radio-wrapper" }, h("tet-radio", { class: "radio", theme: this.theme, name: "radio-card-options", label: option.label, value: option.value, checked: this.selectedProductCode === option.value, focusStyleOnContainer: true, onCheck: (event) => this.onOptionSelected(event) }))))));
+    }
+    renderPrice(price, parsedPrice, priceDescription) {
+        if (!price || Number.isNaN(parsedPrice)) {
+            return null;
+        }
+        return (h("div", { class: "price-wrapper" }, h("div", { class: "price-container" }, h("div", { class: "price-container__price translation-none" }, parsedPrice.toFixed(2).replace('.', ',')), h("div", { class: "price-container__currency" }, h("span", null, this.currency))), priceDescription && h("span", { class: "price-container__description" }, priceDescription)));
+    }
+    renderBenefitsSection() {
+        const selectionOptions = this.getSelectionOptions();
+        if (this.cardType === 'switcher') {
+            return (h("div", { class: "benefits" }, h("div", null, this.benefits.map((benefit) => this.renderSwitch(benefit)))));
+        }
+        const renderedBenefits = this.benefits.map((benefit) => this.renderBenefit(benefit));
+        return (h("div", { class: "benefits" }, h("div", { class: "benefits__benefit-container" }, renderedBenefits, this.cardType === 'dropdown' && (h("tet-dropdown", { id: "dropdown", class: "dropdown", theme: this.theme, "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: selectionOptions })), this.cardType === 'radio' && this.renderRadioOptions())));
+    }
+    /**
+     * Renders the card body.
+     * @returns rendered card body.
+     */
+    renderCard() {
+        const comparisonData = this.allProductData[this.selectedProductCode];
+        const contractTermData = this.selectedContractTerm();
+        const overrideProductName = comparisonData?.attributes?.find(attr => attr.key === 'overrideProductName')?.value;
+        const mainTitle = overrideProductName ?? comparisonData?.name?.[this.language];
+        const price = contractTermData?.amount.toString() ?? '';
+        const parsedPrice = Number.parseFloat(price.replace(',', '.'));
+        const promotionCode = contractTermData?.promotionCode ?? '';
+        const term = contractTermData?.term ?? '';
+        const priceDescription = contractTermData?.priceDescription?.[this.language] ?? '';
+        const secondaryLink = this.secondaryLink || contractTermData?.contract || '';
+        const shouldRenderSecondaryLink = !!secondaryLink && !!this.secondaryLinkText;
+        const secondaryLinkTarget = this.secondaryLinkOpenBlank ? '_blank' : undefined;
+        const secondaryLinkRel = this.secondaryLinkOpenBlank ? 'noopener noreferrer' : undefined;
+        const baseUrl = comparisonData?.formUrl?.[this.language] || '';
+        const params = new URLSearchParams({
+            contractTerm: term?.toString() ?? '',
+            product: this.selectedProductCode,
+            promotion: promotionCode ?? '',
+            lang: this.language ?? '',
+            from: 'tet.lv'
+        });
+        const link = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${params.toString()}`;
+        const isBestChoice = !!this.options.find(option => option.productCode === this.selectedProductCode)?.bestChoice;
+        return (h("div", { class: { 'card': true, 'best-choice': isBestChoice } }, this.bestChoiceText && (h("div", { class: { 'best-choice-title': true, 'active': isBestChoice } }, this.bestChoiceText)), h("div", { class: "content content__top" }, mainTitle && h("h3", { class: "title" }, mainTitle), this.renderPrice(price, parsedPrice, priceDescription), h("tet-button", { class: "button", type: "primary", theme: "light", size: this.buttonSize, url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle), shouldRenderSecondaryLink && (h("div", { class: "secondary-link" }, h("a", { class: "tet-link", href: secondaryLink, target: secondaryLinkTarget, rel: secondaryLinkRel }, this.secondaryLinkText)))), h("div", { class: "content content__bottom" }, this.renderBonuses(), this.renderBenefitsSection())));
+    }
+    /**
+     * Renders the loader.
+     */
+    renderLoader() {
+        return (h("tet-placeholder", { class: "card__placeholder", height: "37rem", width: "100%", darkTheme: this.theme === 'dark' }));
+    }
+    render() {
+        if (this.showLoader) {
+            return this.renderLoader();
+        }
+        return this.renderCard();
+    }
+    static get is() { return "tet-compare-card-v3"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-compare-card-v3.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-compare-card-v3.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "cardType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dropdown' | 'switcher' | 'static' | 'radio'",
+                    "resolved": "\"dropdown\" | \"radio\" | \"static\" | \"switcher\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the button."
+                },
+                "attribute": "card-type",
+                "reflect": false,
+                "defaultValue": "'static'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the card."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "bestChoice": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The disabled state of the bestChoice card."
+                },
+                "attribute": "best-choice",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The language of the component."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'lv'"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CompareCardInterfaceV3[]",
+                    "resolved": "CompareCardInterfaceV3[]",
+                    "references": {
+                        "CompareCardInterfaceV3": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-compare-card-v3/tet-compare-card-v3.tsx",
+                            "id": "src/components/advanced/cards/tet-compare-card-v3/tet-compare-card-v3.tsx::CompareCardInterfaceV3"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Product variants available in this card.\nUsed as the source for dropdown/radio/switcher selection and to resolve\nthe active variant data (productCode, keys, labels, bonuses, etc.)."
+                },
+                "defaultValue": "[]"
+            },
+            "bonuses": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional bonuses shown on the card.\nBonuses are product-specific."
+                },
+                "defaultValue": "[]"
+            },
+            "benefits": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BenefitInterfaceV3[]",
+                    "resolved": "BenefitInterfaceV3[]",
+                    "references": {
+                        "BenefitInterfaceV3": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-compare-card-v3/tet-compare-card-v3.tsx",
+                            "id": "src/components/advanced/cards/tet-compare-card-v3/tet-compare-card-v3.tsx::BenefitInterfaceV3"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional benefits shown on the card.\nBenefits are shared across all products."
+                },
+                "defaultValue": "[]"
+            },
+            "contractTerm": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines selected contract term for the card."
+                },
+                "attribute": "contract-term",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "bestChoiceText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines best choice text for the card."
+                },
+                "attribute": "best-choice-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "currency": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines currency for the card."
+                },
+                "attribute": "currency",
+                "reflect": false,
+                "defaultValue": "'\u20AC/m\u0113n.'"
+            },
+            "secondaryLink": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines secondary link for the card."
+                },
+                "attribute": "secondary-link",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "secondaryLinkText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines secondary link text for the card."
+                },
+                "attribute": "secondary-link-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "secondaryLinkOpenBlank": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines whether the secondary link opens in a new tab."
+                },
+                "attribute": "secondary-link-open-blank",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "buttonTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines button title for the card."
+                },
+                "attribute": "button-title",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "linkOpenBlank": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines whether the main link (button) opens in a new tab."
+                },
+                "attribute": "link-open-blank",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showLoader": {},
+            "selectedProductCode": {},
+            "selectedSwitchKeys": {},
+            "preselectedKeys": {},
+            "preselectedProductCode": {},
+            "allProductData": {},
+            "preselectedRemountId": {},
+            "buttonSize": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cardLoaded",
+                "name": "cardLoaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the card has loaded."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "productChanged",
+                "name": "productChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected product has changed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "optionSelected",
+                "method": "onOptionSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "onResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}