@tet/tet-components 1.3.113-testing → 1.3.114-production

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

@@ -0,0 +1,736 @@
+import { h } from "@stencil/core";
+import { productComparison } from "../../../../services/api/index";
+/**
+ * List of card for product comparison.
+ *
+ * @part compare-card-title-wrapper - Element that encompasses all the titles and subtitle.
+ */
+export class TetCompareCardV2 {
+    constructor() {
+        /**
+         * Renders the loader.
+         */
+        this.renderLoader = () => {
+            return (h("div", { class: "cards" }, [...Array(1)].map(() => [h("tet-placeholder", { class: "tet-placeholder", height: "37rem", width: "21.5rem" })])));
+        };
+        this.clickCallback = () => null;
+        this.cardType = 'static';
+        this.theme = 'classic';
+        this.colorIcons = false;
+        this.bestChoice = false;
+        this.language = 'lv';
+        this.options = [];
+        this.cardBackgroundColor = undefined;
+        this.cardScript = undefined;
+        this.bestChoiceTextPosition = 'center';
+        this.darkMode = false;
+        this.bonuses = [];
+        this.benefitTitle = undefined;
+        this.benefits = [];
+        this.contractTerm = 0;
+        this.bestChoiceText = '';
+        this.currency = '';
+        this.secondaryLink = '';
+        this.secondaryLinkText = '';
+        this.secondaryLinkOpenBlank = false;
+        this.buttonTitle = '';
+        this.linkOpenBlank = false;
+        this.dropdownOptions = [];
+        this.showLoader = true;
+        this.selectedProductCode = '';
+        this.comparisonData = null;
+        this.selectedSwitchKeys = [];
+        this.preselectedKeys = [];
+        this.preselectedProductCode = '';
+    }
+    /**
+     * @param event
+     */
+    onOptionSelected(event) {
+        const productCode = event.detail.value;
+        this.selectedProductCode = productCode;
+        this.fetchProductComparison(productCode);
+    }
+    componentWillLoad() {
+        var _a;
+        if (this.cardType === 'dropdown') {
+            this.pushDataToDropdownOptions();
+            const preselected = this.options.find(option => option.preselected);
+            if (preselected) {
+                this.selectedProductCode = preselected.productCode;
+                this.fetchProductComparison(preselected.productCode);
+            }
+        }
+        if (this.cardType === "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.fetchProductComparison(preselected.productCode);
+            }
+            return;
+        }
+        if (this.cardType === 'static') {
+            this.selectedProductCode = ((_a = this.options.find(option => option.productCode)) === null || _a === void 0 ? void 0 : _a.productCode) || '';
+            this.fetchProductComparison(this.selectedProductCode);
+        }
+    }
+    pushDataToDropdownOptions() {
+        this.options.forEach(option => {
+            this.dropdownOptions.push({
+                label: option.label || '',
+                value: option.productCode || '',
+                preselected: option.preselected || false
+            });
+        });
+    }
+    getToggledProductCode(keys) {
+        const sortedKeys = [...keys].sort().join(',');
+        const found = this.options.find(option => [...option.keys].sort().join(',') === sortedKeys);
+        return found ? found.productCode : null;
+    }
+    handleSwitchToggle(key, checked) {
+        const benefit = this.benefits.find(benefit => benefit.toggleKey === key);
+        let activeKeys = [...this.selectedSwitchKeys];
+        if (checked) {
+            if (benefit === null || benefit === void 0 ? void 0 : benefit.selectAll) {
+                const fullComboOption = this.getFullComboToggleOption();
+                if (fullComboOption) {
+                    this.selectedSwitchKeys = [...fullComboOption.keys];
+                    this.selectedProductCode = fullComboOption.productCode;
+                    this.showLoader = true;
+                    this.fetchProductComparison(fullComboOption.productCode);
+                    return;
+                }
+            }
+            if (!activeKeys.includes(key)) {
+                activeKeys.push(key);
+            }
+        }
+        else {
+            const selectAllBenefit = this.benefits.find(benefit => benefit.selectAll);
+            const selectAllKey = selectAllBenefit === null || selectAllBenefit === void 0 ? void 0 : selectAllBenefit.toggleKey;
+            const fullCombo = this.getFullComboToggleOption();
+            const isFullComboActive = fullCombo &&
+                this.selectedSwitchKeys.length === fullCombo.keys.length &&
+                this.selectedSwitchKeys.every(key => fullCombo.keys.includes(key)) &&
+                fullCombo.keys.every(key => this.selectedSwitchKeys.includes(key));
+            if (isFullComboActive && key !== selectAllKey) {
+                this.selectedSwitchKeys = [...this.preselectedKeys];
+                this.selectedProductCode = this.preselectedProductCode;
+                this.showLoader = true;
+                this.fetchProductComparison(this.preselectedProductCode);
+                return;
+            }
+            if (activeKeys.length === 1 &&
+                activeKeys[0] === key &&
+                this.preselectedKeys.length === 1 &&
+                this.preselectedKeys[0] === key) {
+                return;
+            }
+            if (activeKeys.length === this.preselectedKeys.length &&
+                activeKeys.every(key => this.preselectedKeys.includes(key)) &&
+                this.preselectedKeys.every(key => activeKeys.includes(key)) &&
+                activeKeys.includes(key)) {
+                return;
+            }
+            activeKeys = activeKeys.filter(key => key !== key);
+            if (activeKeys.length === 0) {
+                this.selectedSwitchKeys = [...this.preselectedKeys];
+                this.selectedProductCode = this.preselectedProductCode;
+                this.showLoader = true;
+                this.fetchProductComparison(this.preselectedProductCode);
+                return;
+            }
+        }
+        activeKeys = activeKeys.sort();
+        const productCode = this.getToggledProductCode(activeKeys);
+        this.selectedSwitchKeys = activeKeys;
+        if (productCode) {
+            this.selectedProductCode = productCode;
+            this.showLoader = true;
+            this.fetchProductComparison(productCode);
+        }
+        else {
+            this.selectedProductCode = '';
+            this.comparisonData = null;
+            this.showLoader = false;
+        }
+    }
+    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(productCode) {
+        try {
+            const response = await productComparison(productCode);
+            this.comparisonData = response['products'][productCode];
+            this.showLoader = false;
+        }
+        catch (e) {
+            console.error(e);
+            this.comparisonData = null;
+            this.showLoader = false;
+        }
+    }
+    selectedContractTerm() {
+        var _a;
+        if (!((_a = this.comparisonData) === null || _a === void 0 ? void 0 : _a.contractTerms)) {
+            return;
+        }
+        if (this.contractTerm !== undefined) {
+            const contractTerm = this.comparisonData.contractTerms.find(contractTerm => contractTerm.term === this.contractTerm);
+            if (contractTerm) {
+                return contractTerm;
+            }
+        }
+    }
+    currentBonuses() {
+        var _a;
+        const option = this.options.find(option => option.productCode === this.selectedProductCode);
+        return (_a = option === null || option === void 0 ? void 0 : option.bonuses) !== null && _a !== void 0 ? _a : [];
+    }
+    getTheme() {
+        if (this.darkMode) {
+            if (this.theme === 'classic' || this.theme === 'light' || this.theme === 'dark') {
+                return `dark ${this.theme}`;
+            }
+            return 'dark grey';
+        }
+        return this.theme;
+    }
+    benefitHandler(benefit) {
+        const benefitAsLink = benefit.dataAttributes && Object.keys(benefit.dataAttributes).length > 0;
+        const benefitAsImg = !!benefit.img;
+        return (h("div", { class: "benefit", key: benefit.toggleKey }, benefitAsImg ? (h("img", { src: benefit.img, class: "benefit__icon benefit__img" })) : (h("tet-icon", { class: "benefit__icon icon", name: benefit.icon })), benefitAsLink ? (h("a", Object.assign({ class: "benefit__name benefit__link" }, (benefit.dataAttributes || {})), benefit.name)) : (h("span", { class: "benefit__name" }, benefit.name))));
+    }
+    /**
+     * Renders the card body.
+     * @returns rendered card body.
+     */
+    renderCard() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        if (!this.comparisonData) {
+            return this.renderLoader();
+        }
+        // Get data for rendering
+        const contractTermData = this.selectedContractTerm();
+        const overridePoductAttribute = (_a = this.comparisonData) === null || _a === void 0 ? void 0 : _a.attributes.find(attr => attr.key === 'overrideProductName');
+        const overridePoductName = overridePoductAttribute === null || overridePoductAttribute === void 0 ? void 0 : overridePoductAttribute.value;
+        const mainTitle = overridePoductName !== null && overridePoductName !== void 0 ? overridePoductName : (_c = (_b = this.comparisonData) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c[this.language];
+        const price = contractTermData.amount.toString();
+        const promotionCode = (_d = contractTermData === null || contractTermData === void 0 ? void 0 : contractTermData.promotionCode) !== null && _d !== void 0 ? _d : '';
+        const term = (_e = contractTermData.term) !== null && _e !== void 0 ? _e : '';
+        const priceDescription = (_f = contractTermData === null || contractTermData === void 0 ? void 0 : contractTermData.priceDescription) !== null && _f !== void 0 ? _f : 'Īpašā cena spēkā jauniem klientiem pirmos 24 mēnešus, pēc tam - tā brīža standarta cena.';
+        const secondaryLink = (_g = contractTermData === null || contractTermData === void 0 ? void 0 : contractTermData.contract) !== null && _g !== void 0 ? _g : '';
+        const baseUrl = ((_j = (_h = this.comparisonData) === null || _h === void 0 ? void 0 : _h.formUrl) === null || _j === void 0 ? void 0 : _j[this.language]) || '';
+        const params = new URLSearchParams({
+            contractTerm: (_k = term === null || term === void 0 ? void 0 : term.toString()) !== null && _k !== void 0 ? _k : '',
+            product: this.selectedProductCode,
+            promotion: promotionCode !== null && promotionCode !== void 0 ? promotionCode : '',
+            lang: (_l = this.language) !== null && _l !== void 0 ? _l : '',
+            from: 'tet.lv'
+        });
+        const link = `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${params.toString()}`;
+        const currentBonuses = this.currentBonuses();
+        const isBestChoice = ((_m = this.options.find(options => options.productCode === this.selectedProductCode)) === null || _m === void 0 ? void 0 : _m.bestChoice) || false;
+        return (h("div", { onClick: this.clickCallback, onKeyDown: () => { }, class: {
+                'card': true,
+                [`${this.cardType}`]: true,
+                [`${this.getTheme()}`]: true,
+                'best-choice': isBestChoice,
+                'dark-mode': this.darkMode
+            }, style: !this.darkMode ? { backgroundColor: this.cardBackgroundColor } : {} }, h("div", { class: {
+                'best-choice-title': true,
+                'active': isBestChoice,
+                [`${this.bestChoiceTextPosition}`]: true
+            } }, this.bestChoiceText), h("div", { class: "compare-card-half-60" }, h("div", { class: "content top" }, mainTitle ? (h("div", { class: {
+                'title-wrapper': true,
+                'js-resize-title': true
+            }, part: "compare-card-title-wrapper" }, h("h3", { class: "main-title" }, mainTitle))) : (''), h("div", { class: "price js-resize-price" }, price && !isNaN(parseFloat(price)) ? (h("div", { class: {
+                'price-wrapper': true
+            } }, h("div", { class: "price-container" }, h("div", { class: "new-price translation-none" }, parseFloat(price.replace(',', '.')).toFixed(2).replace('.', ',')), h("div", { class: "currency" }, h("span", null, this.currency))), priceDescription ? (h("span", { class: "price-description" }, priceDescription)) : (''))) : ('')), currentBonuses.length > 0 && (h("div", { class: "bonuses-wrapper" }, currentBonuses.map(bonus => (h("div", { class: "bonuss" }, h("tet-icon", { class: "bonuss__icon icon", name: "add" }), h("span", { class: "bonuss__text" }, bonus.name)))))), h("tet-button", { class: "button", type: "primary", theme: "yellow", url: link, urlTarget: this.linkOpenBlank ? '_blank' : '_self' }, this.buttonTitle))), h("div", { class: "compare-card-half-40" }, h("div", { class: "content bottom" }, this.cardType === 'dropdown' && this.benefits.length > 0 ? (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), (_o = this === null || this === void 0 ? void 0 : this.benefits) === null || _o === void 0 ? void 0 :
+            _o.map((benefit) => (this.benefitHandler(benefit))), h("tet-dropdown", { id: "dropdown", class: "dropdown", "button-label": "", "close-on-selection": "true", "flex-layout": "true", options: this.dropdownOptions }))) : (''), this.cardType === 'switcher' && this.benefits.length > 0 && (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), this.benefits.map((benefit) => {
+            const benefitAsLink = benefit.dataAttributes && Object.keys(benefit.dataAttributes).length > 0;
+            const benefitAsImg = !!benefit.img;
+            // Is this switch the only active one and preselected?
+            const isOnlyActivePreselected = this.selectedSwitchKeys.length === 1 &&
+                this.selectedSwitchKeys[0] === benefit.toggleKey &&
+                this.preselectedKeys.length === 1 &&
+                this.preselectedKeys[0] === benefit.toggleKey;
+            // For multi-preselected combo:
+            const isMultiPreselected = this.selectedSwitchKeys.length === this.preselectedKeys.length &&
+                this.selectedSwitchKeys.every(k => this.preselectedKeys.includes(k)) &&
+                this.preselectedKeys.every(k => this.selectedSwitchKeys.includes(k));
+            // Disable if it's the only active preselected, or the current set matches a multi-preselected group
+            const shouldDisableSwitch = isOnlyActivePreselected ||
+                (isMultiPreselected && this.selectedSwitchKeys.includes(benefit.toggleKey));
+            return (h("div", { class: "benefit", key: benefit.toggleKey }, benefitAsImg ? (h("img", { src: benefit.img, class: "benefit__icon benefit__img" })) : (h("tet-icon", { class: "benefit__icon icon", name: benefit.icon })), benefitAsLink ? (h("a", Object.assign({ class: "benefit__name benefit__link" }, (benefit.dataAttributes || {})), benefit.name)) : (h("span", { class: "benefit__name" }, benefit.name)), h("tet-switch", { name: benefit.toggleKey, checked: this.selectedSwitchKeys.includes(benefit.toggleKey), disabled: shouldDisableSwitch, onCheck: e => this.handleSwitchToggle(benefit.toggleKey, e.detail.checked) })));
+        }))), this.cardType === 'static' && this.benefits.length > 0 ? (h("div", { class: "benefit-wrapper" }, h("span", { class: "benefit-title" }, this.benefitTitle), (_p = this === null || this === void 0 ? void 0 : this.benefits) === null || _p === void 0 ? void 0 :
+            _p.map((benefit) => (this.benefitHandler(benefit))))) : (''), h("div", { class: "button-wrapper" }, secondaryLink && this.secondaryLinkText && (h("div", { class: {
+                'secondary-link': true
+            } }, this.secondaryLinkOpenBlank ? (h("a", { target: "_blank", href: secondaryLink }, this.secondaryLinkText)) : (h("a", { href: secondaryLink }, this.secondaryLinkText))))))), this.cardScript ? h("link", { href: this.cardScript, rel: "stylesheet", type: "text/css" }) : ''));
+    }
+    render() {
+        return this.renderCard();
+    }
+    static get is() { return "tet-compare-card-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-compare-card-v2.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-compare-card-v2.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "clickCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => any",
+                    "resolved": "() => any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The callback function to execute on button click."
+                },
+                "defaultValue": "() => null"
+            },
+            "cardType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dropdown' | 'switcher' | 'static'",
+                    "resolved": "\"dropdown\" | \"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' | ServiceAvailabilityServicesCategoryTheme",
+                    "resolved": "\"classic\" | \"dark\" | \"grey\" | \"light\" | \"netflix\" | \"non-netflix\" | \"tet-bundles\" | \"tet-business-blue\" | \"tet-business-default\" | \"tet-business-green\" | \"tet-business-mint\" | \"tet-business-purple\" | \"tet-business-red\" | \"tet-business-yellow\" | \"tet-electricity\" | \"tet-internet\" | \"tet-tv\" | \"tet-tv-plus\" | \"tet-vtv\"",
+                    "references": {
+                        "ServiceAvailabilityServicesCategoryTheme": {
+                            "location": "import",
+                            "path": "@services/api",
+                            "id": "src/services/api/index.ts::ServiceAvailabilityServicesCategoryTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the card."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'classic'"
+            },
+            "colorIcons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the card has bullet point icons colored based on current theme."
+                },
+                "attribute": "color-icons",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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": "CompareCardInterface[]",
+                    "resolved": "CompareCardInterface[]",
+                    "references": {
+                        "CompareCardInterface": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-compare-card-v2/tet-compare-card-v2.tsx",
+                            "id": "src/components/advanced/cards/tet-compare-card-v2/tet-compare-card-v2.tsx::CompareCardInterface"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines the behaviour of the results that will be shown in the component.\nEither generic or personalized."
+                },
+                "defaultValue": "[]"
+            },
+            "cardBackgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines card background color."
+                },
+                "attribute": "card-background-color",
+                "reflect": false
+            },
+            "cardScript": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines card style imports."
+                },
+                "attribute": "card-script",
+                "reflect": false
+            },
+            "bestChoiceTextPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'center' | 'right'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines the positioning of the best choice element."
+                },
+                "attribute": "best-choice-text-position",
+                "reflect": false,
+                "defaultValue": "'center'"
+            },
+            "darkMode": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines if the card is in dark mode."
+                },
+                "attribute": "dark-mode",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "bonuses": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines additional bonuses displayed on the card."
+                },
+                "defaultValue": "[]"
+            },
+            "benefitTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines the title of benefits."
+                },
+                "attribute": "benefit-title",
+                "reflect": false
+            },
+            "benefits": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BenefitInterface[]",
+                    "resolved": "BenefitInterface[]",
+                    "references": {
+                        "BenefitInterface": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-compare-card-v2/tet-compare-card-v2.tsx",
+                            "id": "src/components/advanced/cards/tet-compare-card-v2/tet-compare-card-v2.tsx::BenefitInterface"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines benefits of the card."
+                },
+                "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": "''"
+            },
+            "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 opens in a new tab."
+                },
+                "attribute": "link-open-blank",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dropdownOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ label: string; value: string; preselected: boolean }[]",
+                    "resolved": "{ label: string; value: string; preselected: boolean; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop defines dropdown options for dropdown type card."
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showLoader": {},
+            "selectedProductCode": {},
+            "comparisonData": {},
+            "selectedSwitchKeys": {},
+            "preselectedKeys": {},
+            "preselectedProductCode": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "optionSelected",
+                "method": "onOptionSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}