@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-order-details-multiple-bundle-product2.js

@@ -1,4 +1,125 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as a,HTMLElement as l,h as t,Host as e}from"@stencil/core/internal/client";import{d as o}from"./salla-accordion2.js";import{d as r}from"./salla-accordion-body2.js";import{d as i}from"./salla-accordion-head2.js";import{d}from"./salla-button2.js";import{d as c}from"./salla-loading2.js";import{d as n}from"./salla-map2.js";import{d as m}from"./salla-modal2.js";import{d as u}from"./salla-order-details-options2.js";const p=a(class extends l{constructor(s){super(),!1!==s&&this.__registerHost(),this.placeholderImage=salla.url.cdn("images/s-empty.png")}getProductImage(){return this.productDetails?.image?"string"==typeof this.productDetails.image?this.productDetails.image:this.productDetails.image.url||this.placeholderImage||salla.url.cdn("images/s-empty.png"):this.placeholderImage}getProductImageAlt(){return this.productDetails?.image&&"string"!=typeof this.productDetails.image?this.productDetails.image.alt||this.productDetails?.name||"":this.productDetails?.name||""}getAccordionId(){return`accordion-${this.productDetails?.id||"default"}`}getAccordionKey(){return this.productDetails?.id||"default"}shouldBeCollapsible(){return void 0!==this.collapsible?this.collapsible:this.productDetails?.options?.length>0}renderOptions(){return this.productDetails?.options?.length?t("salla-accordion-body",null,t("div",{class:"s-order-details-options"},t("salla-order-details-options",{options:this.productDetails.options}))):null}render(){if(!this.productDetails)return null;const s=this.shouldBeCollapsible();return t(e,{class:"s-order-details-bundle-wrapper"},t("salla-accordion",{key:this.getAccordionKey(),collapsed:!1,bordered:!0,collapsible:s,id:this.getAccordionId(),size:"sm"},t("salla-accordion-head",null,t("div",{class:"s-order-details-product"},t("div",{class:"s-order-details-product-content"},t("div",{class:"s-order-details-product-info"},t("div",{class:"s-order-details-product-image"},t("img",{src:this.getProductImage(),alt:this.getProductImageAlt()})),t("div",{class:"s-order-details-product-details"},t("a",{href:this.productDetails?.url||"#",class:"s-order-details-product-name"},this.productDetails?.name||""),this.productDetails?.quantity&&t("span",{class:"s-order-details-product-quantity"},"×",this.productDetails.quantity)))))),this.renderOptions()))}static get style(){return""}},[0,"salla-order-details-multiple-bundle-product",{productDetails:[16],collapsible:[4],placeholderImage:[1,"placeholder-image"]}]);function h(){"undefined"!=typeof customElements&&["salla-order-details-multiple-bundle-product","salla-accordion","salla-accordion-body","salla-accordion-head","salla-button","salla-loading","salla-map","salla-modal","salla-order-details-options"].forEach((a=>{switch(a){case"salla-order-details-multiple-bundle-product":customElements.get(s(a))||customElements.define(s(a),p);break;case"salla-accordion":customElements.get(s(a))||o();break;case"salla-accordion-body":customElements.get(s(a))||r();break;case"salla-accordion-head":customElements.get(s(a))||i();break;case"salla-button":customElements.get(s(a))||d();break;case"salla-loading":customElements.get(s(a))||c();break;case"salla-map":customElements.get(s(a))||n();break;case"salla-modal":customElements.get(s(a))||m();break;case"salla-order-details-options":customElements.get(s(a))||u()}}))}h();export{p as S,h as d}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$8 } from './salla-accordion2.js';
+import { d as defineCustomElement$7 } from './salla-accordion-body2.js';
+import { d as defineCustomElement$6 } from './salla-accordion-head2.js';
+import { d as defineCustomElement$5 } from './salla-button2.js';
+import { d as defineCustomElement$4 } from './salla-loading2.js';
+import { d as defineCustomElement$3 } from './salla-map2.js';
+import { d as defineCustomElement$2 } from './salla-modal2.js';
+import { d as defineCustomElement$1 } from './salla-order-details-options2.js';
+
+const sallaOrderDetailsMultipleBundleProductCss = "";
+
+const SallaproductDetailsMultipleBundleProduct = /*@__PURE__*/ proxyCustomElement(class SallaproductDetailsMultipleBundleProduct extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /** 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 style() { return sallaOrderDetailsMultipleBundleProductCss; }
+}, [0, "salla-order-details-multiple-bundle-product", {
+        "productDetails": [16, "product-details"],
+        "collapsible": [4],
+        "placeholderImage": [1, "placeholder-image"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-order-details-multiple-bundle-product", "salla-accordion", "salla-accordion-body", "salla-accordion-head", "salla-button", "salla-loading", "salla-map", "salla-modal", "salla-order-details-options"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-order-details-multiple-bundle-product":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaproductDetailsMultipleBundleProduct);
+            }
+            break;
+        case "salla-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-accordion-body":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-accordion-head":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-order-details-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaproductDetailsMultipleBundleProduct as S, defineCustomElement as d };

package/dist/components/salla-order-details-options.js

@@ -1,4 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{S as o,d as s}from"./salla-order-details-options2.js";const a=o,r=s;export{a as SallaOrderDetailsOptions,r as defineCustomElement}
+import { S as SallaOrderDetailsOptions$1, d as defineCustomElement$1 } from './salla-order-details-options2.js';
+
+const SallaOrderDetailsOptions = SallaOrderDetailsOptions$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaOrderDetailsOptions, defineCustomElement };

package/dist/components/salla-order-details-options2.js

@@ -1,4 +1,143 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as o,h as a,Host as e}from"@stencil/core/internal/client";import{d as l}from"./salla-button2.js";import{d as i}from"./salla-loading2.js";import{d as r}from"./salla-map2.js";import{d as n}from"./salla-modal2.js";const c=t(class extends o{constructor(s){super(),!1!==s&&this.__registerHost(),this.bordered=!0,this.placeholderImage="images/placeholder.png",this.optionsData=[]}componentWillLoad(){this.parseOptionsData()}componentWillUpdate(){this.parseOptionsData()}parseOptionsData(){if(this.options)if("string"==typeof this.options)try{this.optionsData=JSON.parse(this.options)}catch(s){this.optionsData=[]}else this.optionsData=Array.isArray(this.options)?this.options:[];else this.optionsData=[]}renderOptionValue(s){return s.is_image?a("div",{class:"s-order-details-option-image-container"},a("a",{href:s.value,target:"_blank"},a("img",{class:"s-order-details-option-image",src:s.value||this.placeholderImage,alt:s.name}))):s.color?a("span",{title:s.value,class:"s-order-details-option-color-swatch",style:{backgroundColor:s.color}}):s.is_file?a("a",{href:s.value,target:"_blank",class:"s-order-details-option-file-link"},salla.lang.get("common.elements.attachments")):s.is_color_picker?a("div",{class:"s-order-details-option-color-picker"},a("div",{class:"s-order-details-option-color-picker-content"},a("span",{class:"s-order-details-option-color-picker-text"},s.value),a("span",{class:"s-order-details-option-color-picker-swatch",style:{backgroundColor:s.value,width:"1rem"}})),a("salla-button",{onClick:t=>this.copyToClipboard(t,s.value),shape:"link",class:"s-order-details-option-color-picker-button"},a("span",{class:"s-order-details-option-color-copy-icon",innerHTML:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>swap-fill</title>\n<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>\n</svg>\n'}))):s.is_map&&s.latitude&&s.longitude?a("salla-map",{id:`location_map_${s.id}`,class:`map_${s.id}`,zoom:15,readonly:!0,lat:s.latitude,lng:s.longitude},a("div",{slot:"button"},a("button",{type:"button",class:"s-order-details-option-map-button",onClick:()=>this.openMap(s.id)},salla.lang.get("common.elements.show_location")))):a("span",{class:"s-order-details-option-default-text"},s.display_value||s.value)}copyToClipboard(s,t){s.preventDefault(),navigator.clipboard&&navigator.clipboard.writeText(t)}openMap(s){const t=document.querySelector(`salla-map.map_${s}`);t&&t.open&&t.open()}render(){if(!this.optionsData.length)return null;const s=this.bordered?"s-order-details-options-container":"s-order-details-options-container-borderless";return a(e,{class:"s-order-details-options-wrapper"},a("h2",{class:"s-order-details-options-title"},salla.lang.get("pages.cart.item_options")),a("div",{class:s},a("dl",{class:"s-order-details-options-list"},this.optionsData.map((s=>a("div",{key:s.id,class:"s-order-details-options-item"},a("dt",{class:"s-order-details-options-item-name"},s.name,":"),a("dd",{class:s.is_image?"s-order-details-options-item-value-image":"s-order-details-options-item-value-text"},this.renderOptionValue(s))))))))}static get style(){return""}},[0,"salla-order-details-options",{options:[1],bordered:[4],placeholderImage:[1,"placeholder-image"],optionsData:[32]}]);function d(){"undefined"!=typeof customElements&&["salla-order-details-options","salla-button","salla-loading","salla-map","salla-modal"].forEach((t=>{switch(t){case"salla-order-details-options":customElements.get(s(t))||customElements.define(s(t),c);break;case"salla-button":customElements.get(s(t))||l();break;case"salla-loading":customElements.get(s(t))||i();break;case"salla-map":customElements.get(s(t))||r();break;case"salla-modal":customElements.get(s(t))||n()}}))}d();export{c as S,d}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './salla-button2.js';
+import { d as defineCustomElement$3 } from './salla-loading2.js';
+import { d as defineCustomElement$2 } from './salla-map2.js';
+import { d as defineCustomElement$1 } from './salla-modal2.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 = /*@__PURE__*/ proxyCustomElement(class SallaOrderDetailsOptions extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /** 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 (h("div", { class: "s-order-details-option-image-container" }, h("a", { href: option.value, target: "_blank" }, h("img", { class: "s-order-details-option-image", src: option.value || this.placeholderImage, alt: option.name }))));
+        }
+        // Handle color options
+        if (option.color) {
+            return (h("span", { title: option.value, class: "s-order-details-option-color-swatch", style: { backgroundColor: option.color } }));
+        }
+        // Handle file options
+        if (option.is_file) {
+            return (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 (h("div", { class: "s-order-details-option-color-picker" }, h("div", { class: "s-order-details-option-color-picker-content" }, h("span", { class: "s-order-details-option-color-picker-text" }, option.value), h("span", { class: "s-order-details-option-color-picker-swatch", style: { backgroundColor: option.value, width: '1rem' } })), h("salla-button", { onClick: e => this.copyToClipboard(e, option.value), shape: "link", class: "s-order-details-option-color-picker-button" }, h("span", { class: "s-order-details-option-color-copy-icon", innerHTML: copyIcon }))));
+        }
+        // Handle map options
+        if (option.is_map && option.latitude && option.longitude) {
+            return (h("salla-map", { id: `location_map_${option.id}`, class: `map_${option.id}`, zoom: 15, readonly: true, lat: option.latitude, lng: option.longitude }, h("div", { slot: "button" }, 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 (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 (h(Host, { class: "s-order-details-options-wrapper" }, h("h2", { class: "s-order-details-options-title" }, salla.lang.get('pages.cart.item_options')), h("div", { class: containerClasses }, h("dl", { class: "s-order-details-options-list" }, this.optionsData.map(option => (h("div", { key: option.id, class: "s-order-details-options-item" }, h("dt", { class: "s-order-details-options-item-name" }, option.name, ":"), h("dd", { class: option.is_image
+                ? 's-order-details-options-item-value-image'
+                : 's-order-details-options-item-value-text' }, this.renderOptionValue(option)))))))));
+    }
+    static get style() { return sallaOrderDetailsOptionsCss; }
+}, [0, "salla-order-details-options", {
+        "options": [1],
+        "bordered": [4],
+        "placeholderImage": [1, "placeholder-image"],
+        "optionsData": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-order-details-options", "salla-button", "salla-loading", "salla-map", "salla-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-order-details-options":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaOrderDetailsOptions);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaOrderDetailsOptions as S, defineCustomElement as d };

package/dist/components/salla-order-details.js

@@ -1,4 +1,125 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as a,proxyCustomElement as s,HTMLElement as e,h as l,Fragment as t,Host as r}from"@stencil/core/internal/client";import{d as o}from"./salla-accordion2.js";import{d}from"./salla-accordion-body2.js";import{d as i}from"./salla-accordion-head2.js";import{d as c}from"./salla-button2.js";import{d as n}from"./salla-loading2.js";import{d as m}from"./salla-map2.js";import{d as p}from"./salla-modal2.js";import{d as u}from"./salla-order-details-multiple-bundle-product2.js";import{d as b}from"./salla-order-details-options2.js";const h=s(class extends e{constructor(a){super(),!1!==a&&this.__registerHost()}parseOrderDetailsData(a){this.parsedOrderDetailsData=a,this.parsedOrderDetailsData="string"==typeof this.orderDetails?JSON.parse(a):a}componentWillLoad(){this.parseOrderDetailsData(this.orderDetails),console.log("Parent componentWillLoad - parsedOrderDetailsData:",this.parsedOrderDetailsData)}renderOrderDetailsContent(){return this.parsedOrderDetailsData?[this.parsedOrderDetailsData.options&&this.parsedOrderDetailsData.options.length>0&&l("salla-order-details-options",{options:this.parsedOrderDetailsData.options}),this.parsedOrderDetailsData.sub_products&&this.parsedOrderDetailsData.sub_products.length>0&&l(t,null,l("h2",{class:"s-order-details-bundle-title"},salla.lang.get("pages.orders.sub_products")),l("div",{class:"s-order-details-bundle-content"},this.parsedOrderDetailsData.sub_products.map((a=>l("salla-order-details-multiple-bundle-product",{key:a?.id,productDetails:a})))))]:(console.warn("No parsedOrderDetailsData available"),null)}render(){return l(r,{key:"880b4567c82b94af07c1bcb0303c64516fb0791b",class:"s-order-details-wrapper"},this.renderOrderDetailsContent())}static get watchers(){return{orderDetails:[{parseOrderDetailsData:0}]}}static get style(){return""}},[0,"salla-order-details",{orderDetails:[1,"order-details"],parsedOrderDetailsData:[32]},void 0,{orderDetails:[{parseOrderDetailsData:0}]}]);function D(){"undefined"!=typeof customElements&&["salla-order-details","salla-accordion","salla-accordion-body","salla-accordion-head","salla-button","salla-loading","salla-map","salla-modal","salla-order-details-multiple-bundle-product","salla-order-details-options"].forEach((s=>{switch(s){case"salla-order-details":customElements.get(a(s))||customElements.define(a(s),h);break;case"salla-accordion":customElements.get(a(s))||o();break;case"salla-accordion-body":customElements.get(a(s))||d();break;case"salla-accordion-head":customElements.get(a(s))||i();break;case"salla-button":customElements.get(a(s))||c();break;case"salla-loading":customElements.get(a(s))||n();break;case"salla-map":customElements.get(a(s))||m();break;case"salla-modal":customElements.get(a(s))||p();break;case"salla-order-details-multiple-bundle-product":customElements.get(a(s))||u();break;case"salla-order-details-options":customElements.get(a(s))||b()}}))}D();const f=h,E=D;export{f as SallaOrderDetails,E as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Fragment, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$a } from './salla-accordion2.js';
+import { d as defineCustomElement$9 } from './salla-accordion-body2.js';
+import { d as defineCustomElement$8 } from './salla-accordion-head2.js';
+import { d as defineCustomElement$7 } from './salla-button2.js';
+import { d as defineCustomElement$6 } from './salla-loading2.js';
+import { d as defineCustomElement$5 } from './salla-map2.js';
+import { d as defineCustomElement$4 } from './salla-modal2.js';
+import { d as defineCustomElement$3 } from './salla-order-details-multiple-bundle-product2.js';
+import { d as defineCustomElement$2 } from './salla-order-details-options2.js';
+
+const sallaOrderDetailsCss = "";
+
+const SallaOrderDetails$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderDetails extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    parseOrderDetailsData(newValue) {
+        this.parsedOrderDetailsData = newValue;
+        if (typeof this.orderDetails === 'string') {
+            this.parsedOrderDetailsData = JSON.parse(newValue);
+        }
+        else {
+            this.parsedOrderDetailsData = newValue;
+        }
+    }
+    componentWillLoad() {
+        this.parseOrderDetailsData(this.orderDetails);
+        console.log('Parent componentWillLoad - parsedOrderDetailsData:', this.parsedOrderDetailsData);
+    }
+    renderOrderDetailsContent() {
+        // Check if we have parsed data
+        if (!this.parsedOrderDetailsData) {
+            console.warn('No parsedOrderDetailsData available');
+            return null;
+        }
+        return [
+            /* Product Options */
+            this.parsedOrderDetailsData.options && this.parsedOrderDetailsData.options.length > 0 && (h("salla-order-details-options", { options: this.parsedOrderDetailsData.options })),
+            /* Bundle Subproducts */
+            this.parsedOrderDetailsData.sub_products &&
+                this.parsedOrderDetailsData.sub_products.length > 0 && (h(Fragment, null, h("h2", { class: "s-order-details-bundle-title" }, salla.lang.get('pages.orders.sub_products')), h("div", { class: "s-order-details-bundle-content" }, this.parsedOrderDetailsData.sub_products.map(product => (h("salla-order-details-multiple-bundle-product", { key: product?.id, productDetails: product })))))),
+        ];
+    }
+    render() {
+        return h(Host, { key: '880b4567c82b94af07c1bcb0303c64516fb0791b', class: "s-order-details-wrapper" }, this.renderOrderDetailsContent());
+    }
+    static get watchers() { return {
+        "orderDetails": ["parseOrderDetailsData"]
+    }; }
+    static get style() { return sallaOrderDetailsCss; }
+}, [0, "salla-order-details", {
+        "orderDetails": [1, "order-details"],
+        "parsedOrderDetailsData": [32]
+    }, undefined, {
+        "orderDetails": ["parseOrderDetailsData"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-order-details", "salla-accordion", "salla-accordion-body", "salla-accordion-head", "salla-button", "salla-loading", "salla-map", "salla-modal", "salla-order-details-multiple-bundle-product", "salla-order-details-options"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-order-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaOrderDetails$1);
+            }
+            break;
+        case "salla-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "salla-accordion-body":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-accordion-head":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-order-details-multiple-bundle-product":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-order-details-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaOrderDetails = SallaOrderDetails$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaOrderDetails, defineCustomElement };

package/dist/components/salla-order-edit-item.js

@@ -1,4 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{S as o,d as r}from"./salla-order-edit-item2.js";const s=o,t=r;export{s as SallaOrderEditItem,t as defineCustomElement}
+import { S as SallaOrderEditItem$1, d as defineCustomElement$1 } from './salla-order-edit-item2.js';
+
+const SallaOrderEditItem = SallaOrderEditItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaOrderEditItem, defineCustomElement };

package/dist/components/salla-order-edit-item2.js

@@ -1,4 +1,184 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as a,createEvent as e,h as l,Host as i}from"@stencil/core/internal/client";import{d as o}from"./salla-booking-field2.js";import{d as r}from"./salla-button2.js";import{d as n}from"./salla-color-picker2.js";import{d}from"./salla-conditional-fields2.js";import{d as c}from"./salla-datetime-picker2.js";import{d as m}from"./salla-file-upload2.js";import{d as p}from"./salla-loading2.js";import{d as u}from"./salla-map2.js";import{d as h}from"./salla-modal2.js";import{d as f}from"./salla-product-options2.js";import{d as b}from"./salla-progress-bar2.js";import{d as k}from"./salla-quantity-input2.js";const g=t(class extends a{constructor(s){super(),!1!==s&&this.__registerHost(),this.orderItemUpdated=e(this,"orderItemUpdated",7),this.orderItemRemoved=e(this,"orderItemRemoved",7),this.handleQuantityChange=s=>{const t=s.detail,a=t?.quantity??parseInt(s.target.value,10);isNaN(a)||a<1||a!==this.quantity&&(this.quantity=a,this.emitUpdate(a))},this.handleOptionsChange=()=>{this.emitUpdate(this.quantity)}}componentWillLoad(){this.quantity=this.item?.quantity||1}componentDidLoad(){const s=this.host.querySelector("salla-quantity-input");s&&s.addEventListener("change",this.handleQuantityChange);const t=this.host.querySelector("salla-product-options");t&&t.addEventListener("change",this.handleOptionsChange)}disconnectedCallback(){const s=this.host.querySelector("salla-quantity-input");s&&s.removeEventListener("change",this.handleQuantityChange);const t=this.host.querySelector("salla-product-options");t&&t.removeEventListener("change",this.handleOptionsChange)}get hasOptions(){const s=this.item.product?.options;return s&&s.length>0}async getSelectedOptions(){const s=this.host.querySelector(`salla-product-options[product-id="${this.item.product?.id}"]`);return await(s?.getSelectedOptionsData())||{}}async emitUpdate(s){const t={itemId:this.item?.id,quantity:s};this.hasOptions&&(t.options=await this.getSelectedOptions()),this.orderItemUpdated.emit(t)}removeItem(){const s=this.item?.id;null!=s&&this.orderItemRemoved.emit({itemId:s})}render(){if(!this.item)return null;const s=this.item.product,t=this.item.name||s?.name||"",a=s?.image?.url||"",e=s?.image?.alt||t,o=s?.url||"#",r=s?.price,n=s?.max_quantity,d=s?.weight_label,c=this.item.product?.options,m={value:this.quantity};return n&&(m.max=n),l(i,null,l("div",null,l("div",{class:"s-order-edit-item-header"},l("div",{class:"s-order-edit-item-media"},a&&l("a",{href:o},l("img",{src:a,alt:e,class:"s-order-edit-item-image"})),l("div",{class:"s-order-edit-item-details"},l("h2",{class:"s-order-edit-item-name"},l("a",{href:o,class:"s-order-edit-item-link"},t)),null!=r&&l("span",{class:"s-order-edit-item-price",innerHTML:salla.money(r)}),d&&l("p",{class:"s-order-edit-item-weight"},salla.lang.getWithDefault("pages.products.weight","الوزن")," ",d))),l("salla-button",{type:"button",shape:"icon",size:"small",color:"danger","aria-label":salla.lang.getWithDefault("common.elements.delete","حذف"),onClick:()=>this.removeItem()},l("i",{class:"sicon-cancel"}))),l("div",{class:"s-order-edit-item-quantity"},l("h3",{class:"s-order-edit-item-quantity-label"},salla.lang.getWithDefault("common.elements.quantity","الكمية")),l("div",{class:"s-order-edit-item-quantity-input"},l("salla-quantity-input",{...m}))),this.hasOptions&&l("form",{onSubmit:s=>s.preventDefault()},l("salla-product-options",{"product-id":s.id,options:JSON.stringify(c),key:`${s.id}-order-edit-item-options`}))))}get host(){return this}static get style(){return""}},[0,"salla-order-edit-item",{item:[16],orderId:[8,"order-id"],quantity:[32]}]);function y(){"undefined"!=typeof customElements&&["salla-order-edit-item","salla-booking-field","salla-button","salla-color-picker","salla-conditional-fields","salla-datetime-picker","salla-file-upload","salla-loading","salla-map","salla-modal","salla-product-options","salla-progress-bar","salla-quantity-input"].forEach((t=>{switch(t){case"salla-order-edit-item":customElements.get(s(t))||customElements.define(s(t),g);break;case"salla-booking-field":customElements.get(s(t))||o();break;case"salla-button":customElements.get(s(t))||r();break;case"salla-color-picker":customElements.get(s(t))||n();break;case"salla-conditional-fields":customElements.get(s(t))||d();break;case"salla-datetime-picker":customElements.get(s(t))||c();break;case"salla-file-upload":customElements.get(s(t))||m();break;case"salla-loading":customElements.get(s(t))||p();break;case"salla-map":customElements.get(s(t))||u();break;case"salla-modal":customElements.get(s(t))||h();break;case"salla-product-options":customElements.get(s(t))||f();break;case"salla-progress-bar":customElements.get(s(t))||b();break;case"salla-quantity-input":customElements.get(s(t))||k()}}))}y();export{g as S,y as d}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$c } from './salla-booking-field2.js';
+import { d as defineCustomElement$b } from './salla-button2.js';
+import { d as defineCustomElement$a } from './salla-color-picker2.js';
+import { d as defineCustomElement$9 } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$8 } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$7 } from './salla-file-upload2.js';
+import { d as defineCustomElement$6 } from './salla-loading2.js';
+import { d as defineCustomElement$5 } from './salla-map2.js';
+import { d as defineCustomElement$4 } from './salla-modal2.js';
+import { d as defineCustomElement$3 } from './salla-product-options2.js';
+import { d as defineCustomElement$2 } from './salla-progress-bar2.js';
+import { d as defineCustomElement$1 } from './salla-quantity-input2.js';
+
+const sallaOrderEditItemCss = "";
+
+const SallaOrderEditItem = /*@__PURE__*/ proxyCustomElement(class SallaOrderEditItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.orderItemUpdated = createEvent(this, "orderItemUpdated", 7);
+        this.orderItemRemoved = createEvent(this, "orderItemRemoved", 7);
+        this.handleQuantityChange = (event) => {
+            const detail = event.detail;
+            const newQuantity = detail?.quantity ?? parseInt(event.target.value, 10);
+            if (isNaN(newQuantity) || newQuantity < 1)
+                return;
+            if (newQuantity === this.quantity)
+                return;
+            this.quantity = newQuantity;
+            this.emitUpdate(newQuantity);
+        };
+        this.handleOptionsChange = () => {
+            this.emitUpdate(this.quantity);
+        };
+    }
+    componentWillLoad() {
+        this.quantity = this.item?.quantity || 1;
+    }
+    componentDidLoad() {
+        const quantityEl = this.host.querySelector('salla-quantity-input');
+        if (quantityEl) {
+            quantityEl.addEventListener('change', this.handleQuantityChange);
+        }
+        const optionsEl = this.host.querySelector('salla-product-options');
+        if (optionsEl) {
+            optionsEl.addEventListener('change', this.handleOptionsChange);
+        }
+    }
+    disconnectedCallback() {
+        const quantityEl = this.host.querySelector('salla-quantity-input');
+        if (quantityEl) {
+            quantityEl.removeEventListener('change', this.handleQuantityChange);
+        }
+        const optionsEl = this.host.querySelector('salla-product-options');
+        if (optionsEl) {
+            optionsEl.removeEventListener('change', this.handleOptionsChange);
+        }
+    }
+    get hasOptions() {
+        const options = this.item.product?.options;
+        return options && options.length > 0;
+    }
+    async getSelectedOptions() {
+        const optionsEl = this.host.querySelector(`salla-product-options[product-id="${this.item.product?.id}"]`);
+        return (await optionsEl?.getSelectedOptionsData()) || {};
+    }
+    async emitUpdate(quantity) {
+        const detail = { itemId: this.item?.id, quantity };
+        if (this.hasOptions) {
+            detail.options = await this.getSelectedOptions();
+        }
+        this.orderItemUpdated.emit(detail);
+    }
+    removeItem() {
+        const itemId = this.item?.id;
+        if (itemId == null)
+            return;
+        this.orderItemRemoved.emit({ itemId });
+    }
+    render() {
+        if (!this.item)
+            return null;
+        const product = this.item.product;
+        const productName = this.item.name || product?.name || '';
+        const imageUrl = product?.image?.url || '';
+        const imageAlt = product?.image?.alt || productName;
+        const productUrl = product?.url || '#';
+        const price = product?.price;
+        const maxQuantity = product?.max_quantity;
+        const weightLabel = product?.weight_label;
+        const options = this.item.product?.options;
+        const quantityAttrs = { value: this.quantity };
+        if (maxQuantity) {
+            quantityAttrs.max = maxQuantity;
+        }
+        return (h(Host, null, h("div", null, h("div", { class: "s-order-edit-item-header" }, h("div", { class: "s-order-edit-item-media" }, imageUrl && (h("a", { href: productUrl }, h("img", { src: imageUrl, alt: imageAlt, class: "s-order-edit-item-image" }))), h("div", { class: "s-order-edit-item-details" }, h("h2", { class: "s-order-edit-item-name" }, h("a", { href: productUrl, class: "s-order-edit-item-link" }, productName)), price != null && (h("span", { class: "s-order-edit-item-price", innerHTML: salla.money(price) })), weightLabel && (h("p", { class: "s-order-edit-item-weight" }, salla.lang.getWithDefault('pages.products.weight', 'الوزن'), " ", weightLabel)))), h("salla-button", { type: "button", shape: "icon", size: "small", color: "danger", "aria-label": salla.lang.getWithDefault('common.elements.delete', 'حذف'), onClick: () => this.removeItem() }, h("i", { class: "sicon-cancel" }))), h("div", { class: "s-order-edit-item-quantity" }, h("h3", { class: "s-order-edit-item-quantity-label" }, salla.lang.getWithDefault('common.elements.quantity', 'الكمية')), h("div", { class: "s-order-edit-item-quantity-input" }, h("salla-quantity-input", { ...quantityAttrs }))), this.hasOptions && (h("form", { onSubmit: e => e.preventDefault() }, h("salla-product-options", { "product-id": product.id, options: JSON.stringify(options), key: `${product.id}-order-edit-item-options` }))))));
+    }
+    get host() { return this; }
+    static get style() { return sallaOrderEditItemCss; }
+}, [0, "salla-order-edit-item", {
+        "item": [16],
+        "orderId": [8, "order-id"],
+        "quantity": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-order-edit-item", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-map", "salla-modal", "salla-product-options", "salla-progress-bar", "salla-quantity-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-order-edit-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaOrderEditItem);
+            }
+            break;
+        case "salla-booking-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "salla-color-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "salla-conditional-fields":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-datetime-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-product-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-quantity-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaOrderEditItem as S, defineCustomElement as d };