@salla.sa/twilight-components/dist/collection/components/salla-order-details/salla-order-details-multiple-bundle-product.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { Host, h } from "@stencil/core";
/**
 * @salla/ui-components
 * The `salla-order-details-multiple-bundle-product` component renders a collapsible summary for an order multiple bundle product with optional options list.
 * It uses the salla-accordion component to provide collapsible functionality.
 */
export class SallaproductDetailsMultipleBundleProduct {
    constructor() {
        /** Placeholder image URL when product image is not available */
        this.placeholderImage = salla.url.cdn('images/s-empty.png');
    }
    getProductImage() {
        if (!this.productDetails?.image) {
            return this.placeholderImage;
        }
        // Handle both string and object types for image
        if (typeof this.productDetails.image === 'string') {
            return this.productDetails.image;
        }
        return (this.productDetails.image.url || this.placeholderImage || salla.url.cdn('images/s-empty.png'));
    }
    getProductImageAlt() {
        if (!this.productDetails?.image || typeof this.productDetails.image === 'string') {
            return this.productDetails?.name || '';
        }
        return this.productDetails.image.alt || this.productDetails?.name || '';
    }
    getAccordionId() {
        return `accordion-${this.productDetails?.id || 'default'}`;
    }
    getAccordionKey() {
        return this.productDetails?.id || 'default';
    }
    shouldBeCollapsible() {
        if (this.collapsible !== undefined) {
            return this.collapsible;
        }
        return this.productDetails?.options?.length > 0;
    }
    renderOptions() {
        if (!this.productDetails?.options?.length) {
            return null;
        }
        return (h("salla-accordion-body", null, h("div", { class: "s-order-details-options" }, h("salla-order-details-options", { options: this.productDetails.options }))));
    }
    render() {
        if (!this.productDetails) {
            return null;
        }
        const collapsibleState = this.shouldBeCollapsible();
        return (h(Host, { class: "s-order-details-bundle-wrapper" }, h("salla-accordion", { key: this.getAccordionKey(), collapsed: false, bordered: true, collapsible: collapsibleState, id: this.getAccordionId(), size: "sm" }, h("salla-accordion-head", null, h("div", { class: "s-order-details-product" }, h("div", { class: "s-order-details-product-content" }, h("div", { class: "s-order-details-product-info" }, h("div", { class: "s-order-details-product-image" }, h("img", { src: this.getProductImage(), alt: this.getProductImageAlt() })), h("div", { class: "s-order-details-product-details" }, h("a", { href: this.productDetails?.url || '#', class: "s-order-details-product-name" }, this.productDetails?.name || ''), this.productDetails?.quantity && (h("span", { class: "s-order-details-product-quantity" }, "\u00D7", this.productDetails.quantity))))))), this.renderOptions())));
    }
    static get is() { return "salla-order-details-multiple-bundle-product"; }
    static get originalStyleUrls() {
        return {
            "$": ["salla-order-details-multiple-bundle-product.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["salla-order-details-multiple-bundle-product.css"]
        };
    }
    static get properties() {
        return {
            "productDetails": {
                "type": "unknown",
                "attribute": "product-details",
                "mutable": false,
                "complexType": {
                    "original": "OrderProduct",
                    "resolved": "OrderProduct",
                    "references": {
                        "OrderProduct": {
                            "location": "import",
                            "path": "./interfaces",
                            "id": "src/components/salla-order-details/interfaces.ts::OrderProduct"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The product data to display"
                },
                "getter": false,
                "setter": false
            },
            "collapsible": {
                "type": "boolean",
                "attribute": "collapsible",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Whether the accordion should be collapsible"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "placeholderImage": {
                "type": "string",
                "attribute": "placeholder-image",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Placeholder image URL when product image is not available"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "salla.url.cdn('images/s-empty.png')"
            }
        };
    }
}