@tet/tet-components 1.4.30-testing → 1.4.31-production

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

@@ -0,0 +1,972 @@
+import { forceUpdate, h, Host } from "@stencil/core";
+import { a11yBtnClick } from "../../../../services/utils/a11y";
+import { processTranslations, t } from "../../../../services/translations/index";
+import { formatPrice } from "../../../../services/utils/index";
+/** Constant to use in desktop resolution checker. Should be same as one used in SCSS media query */
+const DESKTOP_BREAKPOINT = 500;
+/**
+ * Snicker card component based on the Snicker Card Max layout.
+ */
+export class TetSnickerCard {
+    constructor() {
+        this.isAccordionOpen = true;
+        this.theme = 'light';
+        this.state = 'default';
+        this.selectionType = 'radio';
+        this.isTabStop = true;
+        this.subscriptionLabel = undefined;
+        this.topBadge = undefined;
+        this.indicator = undefined;
+        this.cardTitle = undefined;
+        this.subtitle = undefined;
+        this.description = undefined;
+        this.price = undefined;
+        this.inlineMessage = undefined;
+        this.selectionConfig = undefined;
+        this.count = undefined;
+        this.primaryValue = undefined;
+        this.secondaryValue = undefined;
+        this.isInCart = false;
+        this.benefits = undefined;
+        this.benefitLink = undefined;
+        this.packageItems = undefined;
+        this.subscriptionItems = undefined;
+        this.bottomLinkText = undefined;
+        this.bottomRemark = undefined;
+        this.accordionConfig = undefined;
+    }
+    hostElement;
+    focusTargetEl;
+    static INTERACTIVE_CLICK_TAGS = new Set([
+        'TET-STEPPER-INPUT',
+        'TET-BUTTON',
+        'TET-DROPDOWN'
+    ]);
+    /** @private Reference to accordion element used for custom toggle. */
+    accordionEl;
+    isDesktopResolution = false;
+    /** Emitted when bottom link is clicked. Emits link text. */
+    bottomLinkClick;
+    /** Emitted when benefit link is clicked. Emits link text. */
+    benefitLinkClick;
+    /** Emitted when card surface is clicked. */
+    cardClick;
+    /** Emitted when any selection input changes (primary, secondary, count). */
+    selectionStateChange;
+    /** Emitted when add-to-cart button is clicked. */
+    addToCart;
+    /** Emitted when remove-from-cart button is clicked. */
+    removeFromCart;
+    get isSelectedState() {
+        return this.state === 'selected';
+    }
+    get isDisabledState() {
+        return this.state === 'disabled';
+    }
+    get isUnavailableState() {
+        return this.state === 'unavailable';
+    }
+    get isSubscribedState() {
+        return this.state === 'subscribed';
+    }
+    get isSelectable() {
+        return !!this.selectionType && !this.isDisabledState && !this.isUnavailableState && !this.isSubscribedState;
+    }
+    get isHoverable() {
+        return this.isSelectable && (this.selectionType === 'checkbox' || !this.isSelectedState);
+    }
+    get hasDesktopAccordionToggle() {
+        const openLabel = this.accordionConfig?.openLabelDesktop?.trim();
+        const closedLabel = this.accordionConfig?.closedLabelDesktop?.trim();
+        return !!openLabel && !!closedLabel;
+    }
+    componentWillLoad() {
+        this.isAccordionOpen = this.accordionConfig?.defaultState !== 'closed';
+        this.checkDesktopResolution();
+        this.ensureDesktopOpenWithoutToggle();
+        processTranslations('tet-components', 'lv').then(() => forceUpdate(this));
+    }
+    onAccordionConfigChanged() {
+        this.ensureDesktopOpenWithoutToggle();
+    }
+    onResize() {
+        const wasDesktop = this.isDesktopResolution;
+        this.checkDesktopResolution();
+        if (!wasDesktop && this.isDesktopResolution) {
+            this.ensureDesktopOpenWithoutToggle();
+        }
+    }
+    /** Syncs desktop resolution with state variable */
+    checkDesktopResolution = () => {
+        if (globalThis.window === undefined) {
+            this.isDesktopResolution = false;
+            return;
+        }
+        this.isDesktopResolution = globalThis.window.innerWidth >= DESKTOP_BREAKPOINT;
+    };
+    emitSelectionStateChanged = (patch) => {
+        const baseState = {
+            primaryValue: this.primaryValue,
+            secondaryValue: this.secondaryValue,
+            count: this.count
+        };
+        const nextState = {
+            ...baseState,
+            ...patch
+        };
+        this.selectionStateChange.emit(nextState);
+    };
+    onSelectionCounterValueChange = ({ detail }) => {
+        this.emitSelectionStateChanged({ count: detail });
+    };
+    onSelectionAdd = (event) => {
+        event.stopPropagation();
+        if (this.isDisabledState) {
+            return;
+        }
+        this.addToCart.emit({
+            primaryValue: this.primaryValue,
+            secondaryValue: this.secondaryValue,
+            count: this.count
+        });
+    };
+    onSelectionRemove = (event) => {
+        event.stopPropagation();
+        if (this.isDisabledState) {
+            return;
+        }
+        this.removeFromCart.emit();
+    };
+    onDropdownOptionSelected = (dropdown) => ({ detail }) => {
+        if (dropdown === 'primary') {
+            this.emitSelectionStateChanged({ primaryValue: detail.value });
+        }
+        else {
+            this.emitSelectionStateChanged({ secondaryValue: detail.value });
+        }
+    };
+    onAccordionChanged = ({ detail }) => {
+        this.isAccordionOpen = detail;
+    };
+    ensureDesktopOpenWithoutToggle = () => {
+        if (this.isDesktopResolution && !this.hasDesktopAccordionToggle && !this.isAccordionOpen) {
+            this.isAccordionOpen = true;
+        }
+    };
+    onBottomAccordionToggle = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isAccordionOpen) {
+            this.accordionEl?.close();
+            return;
+        }
+        this.accordionEl?.open();
+    };
+    onHeaderAccordionToggle = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.onBottomAccordionToggle(event);
+    };
+    onBottomLinkClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isDisabledState) {
+            return;
+        }
+        this.bottomLinkClick.emit(this.bottomLinkText ?? '');
+    };
+    onBenefitLinkClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isDisabledState) {
+            return;
+        }
+        this.benefitLinkClick.emit(this.benefitLink ?? '');
+    };
+    isInteractiveCardClick = (event) => (event.composedPath().some((entry) => (entry instanceof HTMLElement
+        && TetSnickerCard.INTERACTIVE_CLICK_TAGS.has(entry.tagName))));
+    onCardClick = (event) => {
+        if (!this.isSelectable) {
+            return;
+        }
+        if (this.isInteractiveCardClick(event)) {
+            return;
+        }
+        this.cardClick.emit();
+    };
+    /** Programmatically focuses the card selection target used by keyboard navigation. */
+    async focusSelectionTarget() {
+        this.focusTargetEl?.focus();
+    }
+    renderTopBadge = () => {
+        if (!this.topBadge) {
+            return null;
+        }
+        return h("div", { class: "snicker-card__badge" }, this.topBadge);
+    };
+    renderSubscriptionStrip = () => {
+        if (!this.isSubscribedState || !this.subscriptionLabel) {
+            return null;
+        }
+        return (h("div", { class: "subscription-strip" }, h("p", { class: "subscription-strip__label" }, this.subscriptionLabel)));
+    };
+    renderSelection = () => {
+        if (!this.selectionConfig) {
+            return null;
+        }
+        const { primaryDropdown, secondaryDropdown, stepper, addButtonLabel, removeButtonLabel } = this.selectionConfig;
+        const isSelectionAdded = this.isInCart;
+        const isStateDisabled = this.isDisabledState;
+        const initialStepperValue = this.count ?? stepper?.value ?? stepper?.min;
+        const actionLabel = isSelectionAdded
+            ? (removeButtonLabel ?? t('components-snicker-card-remove-from-cart'))
+            : (addButtonLabel ?? t('components-snicker-card-add-to-cart'));
+        return (h("div", { class: "selection with-divider" }, primaryDropdown && (h("tet-dropdown", { class: "selection__dropdown", theme: this.theme, label: primaryDropdown.label, buttonLabel: primaryDropdown.buttonLabel, options: primaryDropdown.options, disabled: isStateDisabled || (primaryDropdown.disabled ?? false), closeOnSelection: primaryDropdown.closeOnSelection ?? true, onOptionSelected: this.onDropdownOptionSelected('primary') })), secondaryDropdown && (h("tet-dropdown", { class: "selection__dropdown", theme: this.theme, label: secondaryDropdown.label, buttonLabel: secondaryDropdown.buttonLabel, options: secondaryDropdown.options, disabled: isStateDisabled || (secondaryDropdown.disabled ?? false), closeOnSelection: secondaryDropdown.closeOnSelection ?? true, onOptionSelected: this.onDropdownOptionSelected('secondary') })), stepper && (h("tet-stepper-input", { class: "selection__stepper", theme: this.theme, disabled: isStateDisabled, value: initialStepperValue, min: stepper.min, max: stepper.max, step: stepper.step ?? 1, accessibilityLabel: stepper.label, onInputValueChanged: this.onSelectionCounterValueChange })), !isSelectionAdded && (h("tet-button", { class: "selection__button", onClick: this.onSelectionAdd, size: "medium", type: "primary", theme: this.theme, disabled: isStateDisabled, iconName: "tc-cart-outline", iconPosition: "left", accessibilityLabel: actionLabel }, actionLabel)), isSelectionAdded && (h("tet-button", { class: "selection__button selection__button--in-cart selection__button--mobile", onClick: this.onSelectionRemove, size: "medium", type: "secondary", theme: this.theme, disabled: isStateDisabled, iconName: "tc-trash", iconPosition: "left", accessibilityLabel: actionLabel }, actionLabel)), isSelectionAdded && (h("tet-button", { class: "selection__button selection__button--in-cart selection__button--desktop", onClick: this.onSelectionRemove, size: "medium", type: "primary", theme: this.theme, disabled: isStateDisabled, iconName: "tc-trash", iconMode: true, iconPosition: "left", accessibilityLabel: actionLabel, customColorCode: this.theme === 'light' ? '#F7F7F7' : '#18191B', customColorContentTone: this.theme === 'light' ? 'dark' : 'light' }))));
+    };
+    renderBenefits = () => {
+        const benefits = this.benefits ?? [];
+        let benefitsIconType = 'primary';
+        if (this.isDisabledState) {
+            benefitsIconType = 'quaternary';
+        }
+        else if (this.isUnavailableState) {
+            benefitsIconType = 'tertiary';
+        }
+        if (benefits.length === 0 && !this.benefitLink) {
+            return null;
+        }
+        return (h("ul", { class: "benefits" }, benefits.map((benefit) => (h("li", { class: "benefits__item" }, h("tet-icon", { theme: this.theme, class: "benefits__icon", type: benefitsIconType, name: "tc-check" }), h("span", { class: "benefits__text" }, benefit)))), this.benefitLink && (h("li", { class: "benefits__item" }, h("tet-icon", { theme: this.theme, class: "benefits__icon", type: benefitsIconType, name: "tc-check" }), h("button", { type: "button", class: {
+                'button-naked': true,
+                'benefits__link': true,
+                'benefits__link--unavailable': this.isUnavailableState,
+                'tet-link': true,
+                disabled: this.isDisabledState,
+                [this.theme]: true,
+            }, disabled: this.isDisabledState, onClick: this.onBenefitLinkClick }, this.benefitLink)))));
+    };
+    renderPackageItems = () => {
+        const packageItems = this.packageItems ?? [];
+        if (packageItems.length === 0) {
+            return null;
+        }
+        return (h("div", { class: "packages with-divider" }, packageItems.map((item) => (h("div", { class: "packages__item" }, h("img", { class: "packages__image", src: item, alt: "", loading: "lazy", decoding: "async" }))))));
+    };
+    renderSubscriptionItems = () => {
+        const subscriptionItems = this.subscriptionItems ?? [];
+        if (subscriptionItems.length === 0) {
+            return null;
+        }
+        return (h("div", { class: "subscriptions" }, subscriptionItems.map((item) => (h("div", { class: "subscriptions__item" }, h("img", { class: "subscriptions__image", src: item, alt: "", loading: "lazy", decoding: "async" }))))));
+    };
+    renderInlineMessage = () => {
+        const inlineMessage = this.inlineMessage;
+        if (!inlineMessage) {
+            return null;
+        }
+        return (h("div", { class: { message: true, 'with-divider': !this.selectionConfig } }, h("tet-inline-message", { class: "message__inline", variant: inlineMessage.variant ?? 'info', theme: this.theme }, h("span", { slot: "title" }, inlineMessage.title), h("span", { slot: "description" }, inlineMessage.message))));
+    };
+    renderBottomLink = () => {
+        if (!this.bottomLinkText) {
+            return null;
+        }
+        return (h("div", { class: "footer__contract" }, h("button", { type: "button", class: {
+                'button-naked': true,
+                'tet-link': true,
+                disabled: this.isDisabledState,
+                [this.theme]: true,
+            }, disabled: this.isDisabledState, onClick: this.onBottomLinkClick }, this.bottomLinkText)));
+    };
+    renderBottomInfo = () => {
+        const hasDesktopAccordion = this.hasDesktopAccordionToggle;
+        const toggleLabel = this.isAccordionOpen
+            ? this.accordionConfig?.openLabelDesktop
+            : this.accordionConfig?.closedLabelDesktop;
+        const hasRemark = !!this.bottomRemark;
+        const hasFooterInfo = hasRemark || hasDesktopAccordion;
+        if (!hasFooterInfo) {
+            return null;
+        }
+        return (h("div", { class: "footer__info" }, hasRemark && h("p", { class: "footer__remark" }, this.bottomRemark), hasDesktopAccordion && (h("button", { class: "footer__toggle", onClick: this.onBottomAccordionToggle }, h("span", { class: "footer__toggle-label" }, toggleLabel), h("tet-icon", { theme: this.theme, class: {
+                'footer__toggle-icon': true,
+                open: this.isAccordionOpen,
+            }, type: "primary", name: "chevron-down" })))));
+    };
+    renderBottomSection = () => {
+        const hasLink = !!this.bottomLinkText;
+        const hasRemark = !!this.bottomRemark;
+        const hasDesktopAccordion = this.hasDesktopAccordionToggle;
+        const isBottomContentEmpty = !hasLink && !hasRemark;
+        if (!hasLink && !hasRemark && !hasDesktopAccordion) {
+            return null;
+        }
+        return (h("div", { class: { footer: true, 'footer--desktop-only': isBottomContentEmpty } }, this.renderBottomLink(), this.renderBottomInfo()));
+    };
+    renderIndicator = () => {
+        const indicator = this.indicator;
+        if (!indicator) {
+            return null;
+        }
+        if (indicator.type === 'checkbox') {
+            return (h("tet-checkbox", { class: "header__selector", theme: this.theme, checked: this.isSelectedState, disabled: this.isDisabledState, unavailable: this.isUnavailableState, iconName: indicator.iconName, labelFont: 'lg-inter', "aria-hidden": true, inert: true }));
+        }
+        return (h("tet-radio", { class: "header__selector", theme: this.theme, checked: this.isSelectedState, disabled: this.isDisabledState, unavailable: this.isUnavailableState, iconName: indicator.iconName, labelFont: 'lg-inter', "aria-hidden": true, inert: true }));
+    };
+    renderHeader = () => {
+        const price = this.price;
+        const hasPrice = !!price;
+        let selectionTabIndex = -1;
+        if (this.isSelectable) {
+            selectionTabIndex = this.selectionType === 'radio' && !this.isTabStop ? -1 : 0;
+        }
+        const isNumericPrice = price?.type === 'price';
+        let displayedPrice;
+        let displayedOldPrice;
+        if (isNumericPrice) {
+            const opts = { decimalSeparator: ',', currency: '' };
+            displayedPrice = formatPrice(price.value, opts);
+            displayedOldPrice = price.oldValue === undefined ? undefined : formatPrice(price.oldValue, opts);
+        }
+        else {
+            displayedPrice = price?.value;
+            displayedOldPrice = price?.oldValue;
+        }
+        const pricePrefix = isNumericPrice ? price?.prefix : undefined;
+        const priceSuffix = isNumericPrice ? price?.suffix : undefined;
+        return (h("div", { class: {
+                header: true,
+                'header--hoverable': this.isHoverable,
+                'header--closed': !this.isAccordionOpen,
+                'header--no-price': !hasPrice,
+                'with-divider': true
+            } }, h("div", { class: "header__top" }, h("div", { class: "header__top-left", ref: (el) => (this.focusTargetEl = el ?? undefined), tabindex: selectionTabIndex, onKeyDown: this.isSelectable ? a11yBtnClick : undefined, role: this.isSelectable ? this.selectionType : undefined, "aria-checked": this.isSelectable ? String(this.isSelectedState) : undefined }, this.renderIndicator(), h("h3", { class: "header__title" }, this.cardTitle)), h("button", { type: "button", class: "header__accordion-toggle", onClick: this.onHeaderAccordionToggle }, h("tet-icon", { theme: this.theme, class: {
+                'header__accordion-toggle-icon': true,
+                open: this.isAccordionOpen,
+            }, type: "primary", name: "chevron-down" }))), h("div", { class: "header__content" }, this.subtitle && h("p", { class: "header__subtitle" }, this.subtitle), hasPrice && (h("div", { class: "header__price-line" }, h("div", { class: "header__price-main" }, pricePrefix && h("span", { class: "header__price-prefix" }, pricePrefix), h("span", { class: "header__price-value" }, displayedPrice), priceSuffix && h("span", { class: "header__price-suffix" }, priceSuffix)), displayedOldPrice && (h("div", { class: "header__old-price" }, displayedOldPrice, priceSuffix ? ` ${priceSuffix}` : '')))), this.description && h("p", { class: "header__description" }, this.description))));
+    };
+    render() {
+        return (h(Host, { key: '334574c4d905e454078fc368e00b5d44133bbce4' }, h("div", { key: '5d7a1aee8f173d3e49c883f6ac8d8a48967b054b', class: {
+                'snicker-card': true,
+                [this.theme]: true,
+                'snicker-card--hoverable': this.isHoverable,
+                'snicker-card--selected': this.isSelectedState,
+                'snicker-card--disabled': this.isDisabledState,
+                'snicker-card--unavailable': this.isUnavailableState,
+                'snicker-card--subscribed': this.isSubscribedState,
+                'snicker-card--with-badge': !!this.topBadge
+            }, onClick: this.onCardClick }, this.renderTopBadge(), this.renderSubscriptionStrip(), h("tet-accordion", { key: '25dd17b759693bd3c8bc4455fa1df759e53f01a9', ref: (el) => (this.accordionEl = el), class: "accordion", theme: this.theme, isOpen: this.isAccordionOpen, onOpenChanged: this.onAccordionChanged, transparentBackground: true, isHeaderInteractive: false }, h("div", { key: 'b7ea6cd5da0e5a7297c8a279dbf9cc6341461cc1', slot: "header", class: "accordion__header" }, this.renderHeader()), h("div", { key: 'f3c0d643fc84414c5fe948fb55e4ed22e941a5a6', class: "accordion__content" }, this.renderInlineMessage(), this.renderSelection(), this.renderBenefits(), this.renderPackageItems(), this.renderSubscriptionItems())), this.renderBottomSection())));
+    }
+    static get is() { return "tet-snicker-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-snicker-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-snicker-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The card theme."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SnickerCardState",
+                    "resolved": "\"default\" | \"disabled\" | \"selected\" | \"subscribed\" | \"unavailable\"",
+                    "references": {
+                        "SnickerCardState": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx",
+                            "id": "src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx::SnickerCardState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual card state."
+                },
+                "attribute": "state",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "selectionType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SnickerCardSelectionType",
+                    "resolved": "\"checkbox\" | \"radio\"",
+                    "references": {
+                        "SnickerCardSelectionType": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx",
+                            "id": "src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx::SnickerCardSelectionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Functional selection behavior (`radio` | `checkbox`) used for card interaction and accessibility roles."
+                },
+                "attribute": "selection-type",
+                "reflect": false,
+                "defaultValue": "'radio'"
+            },
+            "isTabStop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Roving-tabindex flag used by parent groups in `radio` mode."
+                },
+                "attribute": "is-tab-stop",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "subscriptionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional subscription label shown for `subscribed` state."
+                },
+                "attribute": "subscription-label",
+                "reflect": false
+            },
+            "topBadge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional top floating badge label."
+                },
+                "attribute": "top-badge",
+                "reflect": false
+            },
+            "indicator": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SnickerCardIndicator",
+                    "resolved": "SnickerCardIndicator",
+                    "references": {
+                        "SnickerCardIndicator": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx",
+                            "id": "src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx::SnickerCardIndicator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional indicator visual config (`tet-radio` / `tet-checkbox`) for UI only; it does not control selection behavior."
+                }
+            },
+            "cardTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Main title text."
+                },
+                "attribute": "card-title",
+                "reflect": false
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Subtitle text."
+                },
+                "attribute": "subtitle",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text."
+                },
+                "attribute": "description",
+                "reflect": false
+            },
+            "price": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SnickerCardPriceInfo",
+                    "resolved": "{ type: \"price\"; value: number; prefix?: string; suffix?: string; oldValue?: number; } | { type: \"string\"; value: string; oldValue?: string; }",
+                    "references": {
+                        "SnickerCardPriceInfo": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx",
+                            "id": "src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx::SnickerCardPriceInfo"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional price information."
+                }
+            },
+            "inlineMessage": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SnickerCardInlineMessage",
+                    "resolved": "SnickerCardInlineMessage",
+                    "references": {
+                        "SnickerCardInlineMessage": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx",
+                            "id": "src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx::SnickerCardInlineMessage"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional inline message config."
+                }
+            },
+            "selectionConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SnickerCardSelection",
+                    "resolved": "SnickerCardSelection",
+                    "references": {
+                        "SnickerCardSelection": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx",
+                            "id": "src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx::SnickerCardSelection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional selection controls config: dropdowns + stepper + add/remove button."
+                }
+            },
+            "count": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current committed count state."
+                },
+                "attribute": "count",
+                "reflect": false
+            },
+            "primaryValue": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownOptionInterface['value']",
+                    "resolved": "number | string",
+                    "references": {
+                        "DropdownOptionInterface": {
+                            "location": "import",
+                            "path": "@components/simple/inputs/tet-dropdown/tet-dropdown",
+                            "id": "src/components/simple/inputs/tet-dropdown/tet-dropdown.tsx::DropdownOptionInterface"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current committed primary dropdown value."
+                },
+                "attribute": "primary-value",
+                "reflect": false
+            },
+            "secondaryValue": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownOptionInterface['value']",
+                    "resolved": "number | string",
+                    "references": {
+                        "DropdownOptionInterface": {
+                            "location": "import",
+                            "path": "@components/simple/inputs/tet-dropdown/tet-dropdown",
+                            "id": "src/components/simple/inputs/tet-dropdown/tet-dropdown.tsx::DropdownOptionInterface"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current committed secondary dropdown value."
+                },
+                "attribute": "secondary-value",
+                "reflect": false
+            },
+            "isInCart": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the item is already in cart."
+                },
+                "attribute": "is-in-cart",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "benefits": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional benefits list."
+                }
+            },
+            "benefitLink": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional benefit link rendered as the last benefits entry."
+                },
+                "attribute": "benefit-link",
+                "reflect": false
+            },
+            "packageItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional package item image urls."
+                }
+            },
+            "subscriptionItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional subscription row image urls."
+                }
+            },
+            "bottomLinkText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Bottom link text."
+                },
+                "attribute": "bottom-link-text",
+                "reflect": false
+            },
+            "bottomRemark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional remark shown in the bottom."
+                },
+                "attribute": "bottom-remark",
+                "reflect": false
+            },
+            "accordionConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SnickerCardAccordionConfig",
+                    "resolved": "SnickerCardAccordionConfig",
+                    "references": {
+                        "SnickerCardAccordionConfig": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx",
+                            "id": "src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx::SnickerCardAccordionConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional accordion toggle configuration."
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isAccordionOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bottomLinkClick",
+                "name": "bottomLinkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when bottom link is clicked. Emits link text."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "benefitLinkClick",
+                "name": "benefitLinkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when benefit link is clicked. Emits link text."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "cardClick",
+                "name": "cardClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when card surface is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "selectionStateChange",
+                "name": "selectionStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when any selection input changes (primary, secondary, count)."
+                },
+                "complexType": {
+                    "original": "SnickerCardSelectionState",
+                    "resolved": "SnickerCardSelectionState",
+                    "references": {
+                        "SnickerCardSelectionState": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx",
+                            "id": "src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx::SnickerCardSelectionState"
+                        }
+                    }
+                }
+            }, {
+                "method": "addToCart",
+                "name": "addToCart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when add-to-cart button is clicked."
+                },
+                "complexType": {
+                    "original": "SnickerCardSelectionState",
+                    "resolved": "SnickerCardSelectionState",
+                    "references": {
+                        "SnickerCardSelectionState": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx",
+                            "id": "src/components/advanced/cards/tet-snicker-card/tet-snicker-card.tsx::SnickerCardSelectionState"
+                        }
+                    }
+                }
+            }, {
+                "method": "removeFromCart",
+                "name": "removeFromCart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when remove-from-cart button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusSelectionTarget": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically focuses the card selection target used by keyboard navigation.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "accordionConfig",
+                "methodName": "onAccordionConfigChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}