@salla.sa/twilight-components/dist/cjs/salla-order-details-options.cjs.entry.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
'use strict';

var index = require('./index-C7gO-zm5.js');

var copyIcon = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>swap-fill</title>
<path d="M28 10.667h-2.667c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h2.667c0.735 0 1.333 0.597 1.333 1.333v13.333c0 0.736-0.599 1.333-1.333 1.333h-13.333c-0.735 0-1.333-0.597-1.333-1.333v-2.667c0-0.737-0.597-1.333-1.333-1.333s-1.333 0.596-1.333 1.333v2.667c0 2.205 1.795 4 4 4h13.333c2.205 0 4-1.795 4-4v-13.333c0-2.205-1.795-4-4-4zM21.333 17.333v-13.333c0-2.205-1.795-4-4-4h-13.333c-2.205 0-4 1.795-4 4v13.333c0 2.205 1.795 4 4 4h13.333c2.205 0 4-1.795 4-4zM2.667 17.333v-13.333c0-0.736 0.599-1.333 1.333-1.333h13.333c0.735 0 1.333 0.597 1.333 1.333v13.333c0 0.736-0.599 1.333-1.333 1.333h-13.333c-0.735 0-1.333-0.597-1.333-1.333z"></path>
</svg>
`;

const sallaOrderDetailsOptionsCss = "";

const SallaOrderDetailsOptions = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /** Whether to show the options in a bordered container */
        this.bordered = true;
        /** Placeholder image URL when option image is not available */
        this.placeholderImage = 'images/placeholder.png';
        /** Parsed options data */
        this.optionsData = [];
    }
    componentWillLoad() {
        this.parseOptionsData();
    }
    componentWillUpdate() {
        this.parseOptionsData();
    }
    parseOptionsData() {
        if (!this.options) {
            this.optionsData = [];
            return;
        }
        if (typeof this.options === 'string') {
            try {
                this.optionsData = JSON.parse(this.options);
            }
            catch (e) {
                // Invalid options JSON, fallback to empty array
                this.optionsData = [];
            }
        }
        else {
            this.optionsData = Array.isArray(this.options) ? this.options : [];
        }
    }
    renderOptionValue(option) {
        // Handle image options
        if (option.is_image) {
            return (index.h("div", { class: "s-order-details-option-image-container" }, index.h("a", { href: option.value, target: "_blank" }, index.h("img", { class: "s-order-details-option-image", src: option.value || this.placeholderImage, alt: option.name }))));
        }
        // Handle color options
        if (option.color) {
            return (index.h("span", { title: option.value, class: "s-order-details-option-color-swatch", style: { backgroundColor: option.color } }));
        }
        // Handle file options
        if (option.is_file) {
            return (index.h("a", { href: option.value, target: "_blank", class: "s-order-details-option-file-link" }, salla.lang.get('common.elements.attachments')));
        }
        // Handle color picker options
        if (option.is_color_picker) {
            return (index.h("div", { class: "s-order-details-option-color-picker" }, index.h("div", { class: "s-order-details-option-color-picker-content" }, index.h("span", { class: "s-order-details-option-color-picker-text" }, option.value), index.h("span", { class: "s-order-details-option-color-picker-swatch", style: { backgroundColor: option.value, width: '1rem' } })), index.h("salla-button", { onClick: e => this.copyToClipboard(e, option.value), shape: "link", class: "s-order-details-option-color-picker-button" }, index.h("span", { class: "s-order-details-option-color-copy-icon", innerHTML: copyIcon }))));
        }
        // Handle map options
        if (option.is_map && option.latitude && option.longitude) {
            return (index.h("salla-map", { id: `location_map_${option.id}`, class: `map_${option.id}`, zoom: 15, readonly: true, lat: option.latitude, lng: option.longitude }, index.h("div", { slot: "button" }, index.h("button", { type: "button", class: "s-order-details-option-map-button", onClick: () => this.openMap(option.id) }, salla.lang.get('common.elements.show_location')))));
        }
        // Default text value
        return (index.h("span", { class: "s-order-details-option-default-text" }, option.display_value || option.value));
    }
    copyToClipboard(event, content) {
        event.preventDefault();
        if (navigator.clipboard) {
            navigator.clipboard.writeText(content);
        }
    }
    openMap(optionId) {
        const mapElement = document.querySelector(`salla-map.map_${optionId}`);
        if (mapElement && mapElement.open) {
            mapElement.open();
        }
    }
    render() {
        if (!this.optionsData.length) {
            return null;
        }
        const containerClasses = this.bordered
            ? 's-order-details-options-container'
            : 's-order-details-options-container-borderless';
        return (index.h(index.Host, { class: "s-order-details-options-wrapper" }, index.h("h2", { class: "s-order-details-options-title" }, salla.lang.get('pages.cart.item_options')), index.h("div", { class: containerClasses }, index.h("dl", { class: "s-order-details-options-list" }, this.optionsData.map(option => (index.h("div", { key: option.id, class: "s-order-details-options-item" }, index.h("dt", { class: "s-order-details-options-item-name" }, option.name, ":"), index.h("dd", { class: option.is_image
                ? 's-order-details-options-item-value-image'
                : 's-order-details-options-item-value-text' }, this.renderOptionValue(option)))))))));
    }
};
SallaOrderDetailsOptions.style = sallaOrderDetailsOptionsCss;

exports.salla_order_details_options = SallaOrderDetailsOptions;