@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-multiple-bundle-product-slider2.js

@@ -1,4 +1,139 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as s,createEvent as l,h as i,Host as n}from"@stencil/core/internal/client";import{K as d,a}from"./keyboard_arrow_right.js";import{d as c}from"./salla-slider2.js";const r=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.productSelected=l(this,"productSelected",7),this.productOptionsSelected=l(this,"productOptionsSelected",7),this.selectedProducts={},this.savedOptionsByInstance={},this.handleProductClick=(e,t)=>{const s=this.generateEventName(this.section.id,t),l=document.getElementById(s);if(l){if(l){const s=!l.checked;s||(this.dispatchClearOptionsEvent(e,t),this.clearSavedOptionsState(this.section.id,t)),l.checked=s,requestAnimationFrame((()=>{const e=new window.Event("change",{bubbles:!0});l.dispatchEvent(e)}))}this.productSelected.emit({product:e,sectionId:this.section.id})}},this.handleOptionsClick=e=>{this.productOptionsSelected.emit({product:e,sectionId:this.section.id})}}getProductInstanceKey(e,t){return`${e}::${t}`}dispatchClearOptionsEvent(e,t){salla.event.dispatch("multiple-bundle-product-modal::clear-options",{productId:e.id,sectionId:this.section.id,sectionIndex:this.sectionIndex,productIndex:t})}handleOptionsSaved(e){const t=e.detail;if(!t)return;const{sectionId:s,productIndex:l,selectedOptions:i}=t;if(null==s||s!==this.section?.id)return;if(null==l||Number.isNaN(l))return;const n=this.getProductInstanceKey(s,l);if(i?.length)this.savedOptionsByInstance={...this.savedOptionsByInstance,[n]:!0};else if(this.savedOptionsByInstance[n]){const e={...this.savedOptionsByInstance};delete e[n],this.savedOptionsByInstance=e}}clearSavedOptionsState(e,t){const s=this.getProductInstanceKey(e,t);if(!this.savedOptionsByInstance[s])return;const l={...this.savedOptionsByInstance};delete l[s],this.savedOptionsByInstance=l}generateEventName(e,t){return`bundle[${e}][${t}][id]`}render(){return i(n,{key:"df82c8c561e6ef9718a179be2815ed01789700a0"},i("salla-slider",{key:"b7b96681ce045a2dad72edf9cdbda7ea1b3f3c2e",type:"carousel",controlsOuter:!1,showControls:!1,id:`accordion-multiple-bundle-product-${this.section.id}`,pagination:!0,class:"s-multiple-bundle-product-wrapper-slider",sliderConfig:{spaceBetween:0}},i("div",{key:"9762b78a8c67586f2455632632a1e97eefcddbaf",slot:"items"},this?.section?.products?.map(((e,t)=>{const s=this.selectedProducts[this.section.id]?.has(e.id)||!1,l=this.savedOptionsByInstance[this.getProductInstanceKey(this.section.id,t)]?salla.lang.getWithDefault("pages.products.edit_selected_options","تعديل الخيارات"):salla.lang.get("pages.products.choose_from_options");let n=salla.config.get("theme.is_rtl",!0)?d:a;return i("div",{class:"s-multiple-bundle-product-slide-one-third "+(0==e.quantity?"s-multiple-bundle-product-slide-one-third-disabled":""),key:e.id},i("div",{class:"s-multiple-bundle-product-card"},i("div",{class:"s-multiple-bundle-product-image-wrapper",onClick:()=>this.handleProductClick(e,t)},i("input",{id:this.generateEventName(this.section.id,t),type:"checkbox",class:"s-multiple-bundle-product-checkbox",checked:s,name:this.generateEventName(this.section.id,t),value:e.id}),i("img",{src:e.image.url||salla.url.cdn("images/s-empty.png"),loading:"lazy",alt:e.image.alt||e.name,class:"s-multiple-bundle-product-image"})),i("div",{class:"s-multiple-bundle-product-content-wrapper"},i("div",{class:"s-multiple-bundle-product-content"},i("div",{class:"s-multiple-bundle-product-details"},i("div",{class:"s-multiple-bundle-product-title-wrapper"},i("h2",{class:"s-multiple-bundle-product-title"},i("a",{href:e?.url||"#",target:"_blank",rel:"noopener noreferrer"},e.name))),i("div",{class:"s-multiple-bundle-product-price-wrapper"},i("span",{class:"s-multiple-bundle-product-price"},i("span",{innerHTML:salla.money(e.price)})),e.sale_price>0&&i("span",{class:"s-multiple-bundle-product-price-discount"},i("span",{innerHTML:salla.money(e.regular_price)})))),e.quantity_in_group>0&&0!==e.quantity&&i("span",{class:"s-multiple-bundle-product-badge"},salla.lang.get("pages.products.pieces"),i("span",null,e.quantity_in_group)),0===e.quantity&&i("span",{class:"s-multiple-bundle-product-badge"},salla.lang.get("pages.products.quantity_in_group_finished"))),e.options?.length>0&&i("button",{class:"s-multiple-bundle-product-button",onClick:()=>this.handleOptionsClick(e),type:"button"},l,i("span",{class:"s-multiple-bundle-product-button-icon",innerHTML:n})))))})))))}get host(){return this}static get style(){return""}},[0,"salla-multiple-bundle-product-slider",{section:[16],sectionIndex:[2,"section-index"],selectedProducts:[16],savedOptionsByInstance:[32]},[[4,"optionsSaved","handleOptionsSaved"]]]);function o(){"undefined"!=typeof customElements&&["salla-multiple-bundle-product-slider","salla-slider"].forEach((t=>{switch(t){case"salla-multiple-bundle-product-slider":customElements.get(e(t))||customElements.define(e(t),r);break;case"salla-slider":customElements.get(e(t))||c()}}))}o();export{r as S,o as d}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { K as KeyBoardArrowLeftIcon, a as KeyBoardArrowRightIcon } from './keyboard_arrow_right.js';
+import { d as defineCustomElement$1 } from './salla-slider2.js';
+
+const sallaMultipleBundleProductSliderCss = "";
+
+const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class SallaMultipleBundleProductSlider extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.productSelected = createEvent(this, "productSelected", 7);
+        this.productOptionsSelected = createEvent(this, "productOptionsSelected", 7);
+        /** A dictionary tracking which product IDs are currently selected per section. */
+        this.selectedProducts = {};
+        this.savedOptionsByInstance = {};
+        this.handleProductClick = (product, productIndex) => {
+            // Find the checkbox input for this product
+            const checkboxId = this.generateEventName(this.section.id, productIndex);
+            const checkbox = document.getElementById(checkboxId);
+            if (!checkbox)
+                return;
+            if (checkbox) {
+                const willBeChecked = !checkbox.checked;
+                if (!willBeChecked) {
+                    this.dispatchClearOptionsEvent(product, productIndex);
+                    this.clearSavedOptionsState(this.section.id, productIndex);
+                }
+                // Toggle the checkbox state
+                checkbox.checked = willBeChecked;
+                // Dispatch a change event to trigger form validation/submission
+                requestAnimationFrame(() => {
+                    const changeEvent = new window.Event('change', { bubbles: true });
+                    checkbox.dispatchEvent(changeEvent);
+                });
+            }
+            this.productSelected.emit({
+                product,
+                sectionId: this.section.id,
+            });
+        };
+        this.handleOptionsClick = (product) => {
+            this.productOptionsSelected.emit({
+                product,
+                sectionId: this.section.id,
+            });
+        };
+    }
+    getProductInstanceKey(sectionId, productIndex) {
+        return `${sectionId}::${productIndex}`;
+    }
+    dispatchClearOptionsEvent(product, productIndex) {
+        salla.event.dispatch('multiple-bundle-product-modal::clear-options', {
+            productId: product.id,
+            sectionId: this.section.id,
+            sectionIndex: this.sectionIndex,
+            productIndex,
+        });
+    }
+    handleOptionsSaved(event) {
+        const detail = event.detail;
+        if (!detail)
+            return;
+        const { sectionId, productIndex, selectedOptions } = detail;
+        if (sectionId == null || sectionId !== this.section?.id)
+            return;
+        if (productIndex == null || Number.isNaN(productIndex))
+            return;
+        const key = this.getProductInstanceKey(sectionId, productIndex);
+        const hasOptions = !!selectedOptions?.length;
+        if (hasOptions) {
+            this.savedOptionsByInstance = {
+                ...this.savedOptionsByInstance,
+                [key]: true,
+            };
+        }
+        else if (this.savedOptionsByInstance[key]) {
+            const updatedState = { ...this.savedOptionsByInstance };
+            delete updatedState[key];
+            this.savedOptionsByInstance = updatedState;
+        }
+    }
+    clearSavedOptionsState(sectionId, productIndex) {
+        const key = this.getProductInstanceKey(sectionId, productIndex);
+        if (!this.savedOptionsByInstance[key])
+            return;
+        const updatedState = { ...this.savedOptionsByInstance };
+        delete updatedState[key];
+        this.savedOptionsByInstance = updatedState;
+    }
+    generateEventName(sectionId, productIndex) {
+        return `bundle[${sectionId}][${productIndex}][id]`;
+    }
+    render() {
+        return (h(Host, { key: 'df82c8c561e6ef9718a179be2815ed01789700a0' }, h("salla-slider", { key: 'b7b96681ce045a2dad72edf9cdbda7ea1b3f3c2e', type: "carousel", controlsOuter: false, showControls: false, id: `accordion-multiple-bundle-product-${this.section.id}`, pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: { spaceBetween: 0 } }, h("div", { key: '9762b78a8c67586f2455632632a1e97eefcddbaf', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
+            const isChecked = this.selectedProducts[this.section.id]?.has(product.id) || false;
+            const hasSavedOptions = this.savedOptionsByInstance[this.getProductInstanceKey(this.section.id, productIndex)];
+            const optionsButtonLabel = hasSavedOptions
+                ? salla.lang.getWithDefault('pages.products.edit_selected_options', 'تعديل الخيارات')
+                : salla.lang.get('pages.products.choose_from_options');
+            let optionsArrowIcon = salla.config.get('theme.is_rtl', true)
+                ? KeyBoardArrowLeftIcon
+                : KeyBoardArrowRightIcon;
+            return (h("div", { class: `s-multiple-bundle-product-slide-one-third ${product.quantity == 0
+                    ? 's-multiple-bundle-product-slide-one-third-disabled'
+                    : ''}`, key: product.id }, h("div", { class: "s-multiple-bundle-product-card" }, h("div", { class: "s-multiple-bundle-product-image-wrapper", onClick: () => this.handleProductClick(product, productIndex) }, h("input", { id: this.generateEventName(this.section.id, productIndex), type: "checkbox", class: "s-multiple-bundle-product-checkbox", checked: isChecked, name: this.generateEventName(this.section.id, productIndex), value: product.id }), h("img", { src: product.image.url || salla.url.cdn('images/s-empty.png'), loading: "lazy", alt: product.image.alt || product.name, class: "s-multiple-bundle-product-image" })), h("div", { class: "s-multiple-bundle-product-content-wrapper" }, h("div", { class: "s-multiple-bundle-product-content" }, h("div", { class: "s-multiple-bundle-product-details" }, h("div", { class: "s-multiple-bundle-product-title-wrapper" }, h("h2", { class: "s-multiple-bundle-product-title" }, h("a", { href: product?.url || '#', target: "_blank", rel: "noopener noreferrer" }, product.name))), h("div", { class: "s-multiple-bundle-product-price-wrapper" }, h("span", { class: "s-multiple-bundle-product-price" }, h("span", { innerHTML: salla.money(product.price) })), product.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-price-discount" }, h("span", { innerHTML: salla.money(product.regular_price) }))))), product.quantity_in_group > 0 && product.quantity !== 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.pieces'), h("span", null, product.quantity_in_group))), product.quantity === 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.quantity_in_group_finished')))), product.options?.length > 0 && (h("button", { class: "s-multiple-bundle-product-button", onClick: () => this.handleOptionsClick(product), type: "button" }, optionsButtonLabel, h("span", { class: "s-multiple-bundle-product-button-icon", innerHTML: optionsArrowIcon })))))));
+        })))));
+    }
+    get host() { return this; }
+    static get style() { return sallaMultipleBundleProductSliderCss; }
+}, [0, "salla-multiple-bundle-product-slider", {
+        "section": [16],
+        "sectionIndex": [2, "section-index"],
+        "selectedProducts": [16, "selected-products"],
+        "savedOptionsByInstance": [32]
+    }, [[4, "optionsSaved", "handleOptionsSaved"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-multiple-bundle-product-slider", "salla-slider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-multiple-bundle-product-slider":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaMultipleBundleProductSlider);
+            }
+            break;
+        case "salla-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaMultipleBundleProductSlider as S, defineCustomElement as d };

package/dist/components/salla-multiple-bundle-product.js

@@ -1,4 +1,210 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as l,proxyCustomElement as a,HTMLElement as s,h as e,Host as t}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 c}from"./salla-accordion-head2.js";import{d}from"./salla-booking-field2.js";import{d as i}from"./salla-button2.js";import{d as n}from"./salla-color-picker2.js";import{d as m}from"./salla-conditional-fields2.js";import{d as u}from"./salla-datetime-picker2.js";import{d as p}from"./salla-file-upload2.js";import{d as b}from"./salla-loading2.js";import{d as f}from"./salla-map2.js";import{d as k}from"./salla-modal2.js";import{d as E}from"./salla-multiple-bundle-product-cart2.js";import{d as j}from"./salla-multiple-bundle-product-details2.js";import{d as h}from"./salla-multiple-bundle-product-options-modal2.js";import{d as g}from"./salla-multiple-bundle-product-slider2.js";import{d as y}from"./salla-product-options2.js";import{d as S}from"./salla-progress-bar2.js";import{d as P}from"./salla-skeleton2.js";import{d as v}from"./salla-slider2.js";const w=a(class extends s{constructor(l){super(),!1!==l&&this.__registerHost(),this.parsedSections=[]}parseProducts(l){let a=[];if("string"==typeof l)try{const s=JSON.parse(l);a=this.extractSections(s)}catch(s){console.error("Invalid JSON passed to bundleSections prop:",l),a=[]}else l&&(a=this.extractSections(l));this.parsedSections=a}extractSections(l){return l.bundle&&l.bundle.sections&&Array.isArray(l.bundle.sections)?l.bundle.sections:Array.isArray(l)?l:l.sections&&Array.isArray(l.sections)?l.sections:(console.warn("No valid sections found in data:",l),[])}isCartPage(){return salla.url.is_page("cart")}renderCartPage(){return e("salla-multiple-bundle-product-cart",{sections:this.parsedSections})}renderDetailsPage(){return e("salla-multiple-bundle-product-details",{sections:this.parsedSections})}componentWillLoad(){this.parseProducts(this.bundleSections)}render(){return e(t,{key:"d2723aa4c40e7585adbc5e128035b03dc9920fbc",class:"s-multiple-bundle-product-wrapper"},this.isCartPage()?this.renderCartPage():this.renderDetailsPage())}static get watchers(){return{bundleSections:[{parseProducts:0}]}}static get style(){return":host{display:block}"}},[0,"salla-multiple-bundle-product",{bundleSections:[1,"bundle-sections"],parsedSections:[32]},void 0,{bundleSections:[{parseProducts:0}]}]);function x(){"undefined"!=typeof customElements&&["salla-multiple-bundle-product","salla-accordion","salla-accordion-body","salla-accordion-head","salla-booking-field","salla-button","salla-color-picker","salla-conditional-fields","salla-datetime-picker","salla-file-upload","salla-loading","salla-map","salla-modal","salla-multiple-bundle-product-cart","salla-multiple-bundle-product-details","salla-multiple-bundle-product-options-modal","salla-multiple-bundle-product-slider","salla-product-options","salla-progress-bar","salla-skeleton","salla-slider"].forEach((a=>{switch(a){case"salla-multiple-bundle-product":customElements.get(l(a))||customElements.define(l(a),w);break;case"salla-accordion":customElements.get(l(a))||o();break;case"salla-accordion-body":customElements.get(l(a))||r();break;case"salla-accordion-head":customElements.get(l(a))||c();break;case"salla-booking-field":customElements.get(l(a))||d();break;case"salla-button":customElements.get(l(a))||i();break;case"salla-color-picker":customElements.get(l(a))||n();break;case"salla-conditional-fields":customElements.get(l(a))||m();break;case"salla-datetime-picker":customElements.get(l(a))||u();break;case"salla-file-upload":customElements.get(l(a))||p();break;case"salla-loading":customElements.get(l(a))||b();break;case"salla-map":customElements.get(l(a))||f();break;case"salla-modal":customElements.get(l(a))||k();break;case"salla-multiple-bundle-product-cart":customElements.get(l(a))||E();break;case"salla-multiple-bundle-product-details":customElements.get(l(a))||j();break;case"salla-multiple-bundle-product-options-modal":customElements.get(l(a))||h();break;case"salla-multiple-bundle-product-slider":customElements.get(l(a))||g();break;case"salla-product-options":customElements.get(l(a))||y();break;case"salla-progress-bar":customElements.get(l(a))||S();break;case"salla-skeleton":customElements.get(l(a))||P();break;case"salla-slider":customElements.get(l(a))||v()}}))}x();const A=w,N=x;export{A as SallaMultipleBundleProduct,N as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$l } from './salla-accordion2.js';
+import { d as defineCustomElement$k } from './salla-accordion-body2.js';
+import { d as defineCustomElement$j } from './salla-accordion-head2.js';
+import { d as defineCustomElement$i } from './salla-booking-field2.js';
+import { d as defineCustomElement$h } from './salla-button2.js';
+import { d as defineCustomElement$g } from './salla-color-picker2.js';
+import { d as defineCustomElement$f } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$e } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$d } from './salla-file-upload2.js';
+import { d as defineCustomElement$c } from './salla-loading2.js';
+import { d as defineCustomElement$b } from './salla-map2.js';
+import { d as defineCustomElement$a } from './salla-modal2.js';
+import { d as defineCustomElement$9 } from './salla-multiple-bundle-product-cart2.js';
+import { d as defineCustomElement$8 } from './salla-multiple-bundle-product-details2.js';
+import { d as defineCustomElement$7 } from './salla-multiple-bundle-product-options-modal2.js';
+import { d as defineCustomElement$6 } from './salla-multiple-bundle-product-slider2.js';
+import { d as defineCustomElement$5 } from './salla-product-options2.js';
+import { d as defineCustomElement$4 } from './salla-progress-bar2.js';
+import { d as defineCustomElement$3 } from './salla-skeleton2.js';
+import { d as defineCustomElement$2 } from './salla-slider2.js';
+
+const sallaMultipleBundleProductCss = ":host{display:block}";
+
+const SallaMultipleBundleProduct$1 = /*@__PURE__*/ proxyCustomElement(class SallaMultipleBundleProduct extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.parsedSections = [];
+    }
+    parseProducts(newValue) {
+        let sections = [];
+        if (typeof newValue === 'string') {
+            try {
+                const parsed = JSON.parse(newValue);
+                sections = this.extractSections(parsed);
+            }
+            catch (e) {
+                console.error('Invalid JSON passed to bundleSections prop:', newValue);
+                sections = [];
+            }
+        }
+        else if (newValue) {
+            sections = this.extractSections(newValue);
+        }
+        this.parsedSections = sections;
+    }
+    extractSections(data) {
+        // Handle new nested structure: data.bundle.sections
+        if (data.bundle && data.bundle.sections && Array.isArray(data.bundle.sections)) {
+            return data.bundle.sections;
+        }
+        // Handle old flat structure: data is directly an array of sections
+        if (Array.isArray(data)) {
+            return data;
+        }
+        // Handle case where data.sections exists at root level
+        if (data.sections && Array.isArray(data.sections)) {
+            return data.sections;
+        }
+        console.warn('No valid sections found in data:', data);
+        return [];
+    }
+    isCartPage() {
+        return salla.url.is_page('cart');
+    }
+    renderCartPage() {
+        return h("salla-multiple-bundle-product-cart", { sections: this.parsedSections });
+    }
+    renderDetailsPage() {
+        return h("salla-multiple-bundle-product-details", { sections: this.parsedSections });
+    }
+    componentWillLoad() {
+        this.parseProducts(this.bundleSections);
+    }
+    render() {
+        return (h(Host, { key: 'd2723aa4c40e7585adbc5e128035b03dc9920fbc', class: "s-multiple-bundle-product-wrapper" }, this.isCartPage() ? this.renderCartPage() : this.renderDetailsPage()));
+    }
+    static get watchers() { return {
+        "bundleSections": ["parseProducts"]
+    }; }
+    static get style() { return sallaMultipleBundleProductCss; }
+}, [0, "salla-multiple-bundle-product", {
+        "bundleSections": [1, "bundle-sections"],
+        "parsedSections": [32]
+    }, undefined, {
+        "bundleSections": ["parseProducts"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-multiple-bundle-product", "salla-accordion", "salla-accordion-body", "salla-accordion-head", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-map", "salla-modal", "salla-multiple-bundle-product-cart", "salla-multiple-bundle-product-details", "salla-multiple-bundle-product-options-modal", "salla-multiple-bundle-product-slider", "salla-product-options", "salla-progress-bar", "salla-skeleton", "salla-slider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-multiple-bundle-product":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaMultipleBundleProduct$1);
+            }
+            break;
+        case "salla-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "salla-accordion-body":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "salla-accordion-head":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "salla-booking-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "salla-color-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "salla-conditional-fields":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "salla-datetime-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "salla-multiple-bundle-product-cart":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-multiple-bundle-product-details":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-multiple-bundle-product-options-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-multiple-bundle-product-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-product-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-skeleton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaMultipleBundleProduct = SallaMultipleBundleProduct$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaMultipleBundleProduct, defineCustomElement };

package/dist/components/salla-notification-item.js

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

package/dist/components/salla-notification-item2.js

@@ -1,4 +1,35 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as i,proxyCustomElement as t,HTMLElement as e,h as a}from"@stencil/core/internal/client";const n=t(class extends e{constructor(i){super(),!1!==i&&this.__registerHost()}render(){return a("a",{key:"c568ebb15db1854f8f32ffa406f4751b16e67e4d",href:this.notification.url,class:{"s-notifications-item":!0,"s-notifications-item-shadow":!0,"s-notifications-item-read":!this.notification.is_new}},a("span",{key:"af8ce6607fb53b0459673aec66d4e4453fa13f94",class:"s-notifications-item-icon"},a("i",{key:"9a55f3c72eb6bef64f58e24395bab8f787c084ed",class:{"s-notifications-item-icon sicon-bell-ring":!0,"s-notifications-item-icon-new":this.notification.is_new}})),a("div",{key:"20559c46d9087d602c83f82f409c5fa43966a8de",class:"s-notifications-item-content"},a("div",{key:"22a21adb2253a0db5d9d404ba196fe1a2094c7ff",class:"s-notifications-item-content-leading"},a("h4",{key:"3a07031fe0e697a4c818dece184623bd13249f30"},this.notification.title),a("p",{key:"a481734126292bbb2b22f4a326d7a489131a0828"},this.notification.sub_title)),a("span",{key:"adad90fe0b72bd92363d53c8ffcc39602da00399",class:"s-notifications-item-content-trailing"},a("i",{key:"65401a987fd64c6647f1cabc4d802f6c835f0e61",class:"sicon-time s-notifications-item-content-trailing-icon"}),a("span",{key:"1c73bdb085cb3e5c3ecaea7352d3112b9facdf38"},this.notification.date))))}static get style(){return""}},[0,"salla-notification-item",{notification:[16]}]);function s(){"undefined"!=typeof customElements&&["salla-notification-item"].forEach((t=>{"salla-notification-item"===t&&(customElements.get(i(t))||customElements.define(i(t),n))}))}s();export{n as S,s as d}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sallaNotificationsCss = "";
+
+const SallaNotificationItem = /*@__PURE__*/ proxyCustomElement(class SallaNotificationItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return h("a", { key: 'c568ebb15db1854f8f32ffa406f4751b16e67e4d', href: this.notification.url, class: { "s-notifications-item": true, "s-notifications-item-shadow": true, "s-notifications-item-read": !this.notification.is_new } }, h("span", { key: 'af8ce6607fb53b0459673aec66d4e4453fa13f94', class: "s-notifications-item-icon" }, h("i", { key: '9a55f3c72eb6bef64f58e24395bab8f787c084ed', class: { 's-notifications-item-icon sicon-bell-ring': true, 's-notifications-item-icon-new': this.notification.is_new } })), h("div", { key: '20559c46d9087d602c83f82f409c5fa43966a8de', class: "s-notifications-item-content" }, h("div", { key: '22a21adb2253a0db5d9d404ba196fe1a2094c7ff', class: "s-notifications-item-content-leading" }, h("h4", { key: '3a07031fe0e697a4c818dece184623bd13249f30' }, this.notification.title), h("p", { key: 'a481734126292bbb2b22f4a326d7a489131a0828' }, this.notification.sub_title)), h("span", { key: 'adad90fe0b72bd92363d53c8ffcc39602da00399', class: "s-notifications-item-content-trailing" }, h("i", { key: '65401a987fd64c6647f1cabc4d802f6c835f0e61', class: "sicon-time s-notifications-item-content-trailing-icon" }), h("span", { key: '1c73bdb085cb3e5c3ecaea7352d3112b9facdf38' }, this.notification.date))));
+    }
+    static get style() { return sallaNotificationsCss; }
+}, [0, "salla-notification-item", {
+        "notification": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-notification-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-notification-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaNotificationItem);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaNotificationItem as S, defineCustomElement as d };

package/dist/components/salla-notifications.js

@@ -1,4 +1,193 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as t,proxyCustomElement as i,HTMLElement as s,h as e}from"@stencil/core/internal/client";import{H as n}from"./Helper.js";import{d as a}from"./salla-notification-item2.js";import{d as o}from"./salla-placeholder2.js";const l=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.itemPerPage=10,this.no_notifications_trans=salla.lang.get("blocks.header.no_notifications"),this.load_more_text_trans=salla.lang.get("common.elements.load_more"),salla.lang.onLoaded((()=>{this.no_notifications_trans=salla.lang.get("blocks.header.no_notifications"),this.load_more_text_trans=salla.lang.get("common.elements.load_more")}))}loading(t=!0){let i=this.status?.querySelector(".s-button-text");i&&(n.toggleElementClassIf(i,"s-button-hide","s-button-show",(()=>t)),this.btnLoader.style.display=t?"inherit":"none")}getNotificationCard(t){const i=document.createElement("salla-notification-item");return i.notification=t,i.classList.add("s-block"),i}render(){return this.showPlaceholder?e("div",{class:"s-notifications-no-content"},e("salla-placeholder",{alignment:"center"},e("span",{slot:"title"},this.no_notifications_trans))):e("div",{class:"s-notifications-wrapper"},e("div",{class:"s-notifications-container",ref:t=>this.wrapper=t}),this.nextPage&&e("div",{class:"s-infinite-scroll-wrapper",ref:t=>this.status=t},e("button",{onClick:()=>this.loadMore(),class:"s-infinite-scroll-btn s-button-btn s-button-primary"},e("span",{class:"s-button-text s-infinite-scroll-btn-text"},this.loadMoreText??this.load_more_text_trans),e("span",{class:"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader",ref:t=>this.btnLoader=t,style:{display:"none"}}))))}isV2Response(t){return!!t.cursor}normalizeNotification(t){return{title:t.title,sub_title:t.body,date:t.time_ago,is_new:!t.is_read,url:t.url}}normalizePagination(t){return{count:t.count,currentPage:t.current,links:{next:null!=t.next?t.next+"":void 0}}}normalizeResponse(t){return this.isV2Response(t)?{data:(t.data||[]).map((t=>this.normalizeNotification(t))),pagination:this.normalizePagination(t.cursor)}:t}handleResponse(t){return t.map((t=>this.getNotificationCard(t)))}initiateInfiniteScroll(){this.wrapper?(this.infiniteScroll=salla.infiniteScroll.initiate(this.wrapper,this.wrapper,{path:()=>this.nextPage,history:!0,nextPage:this.nextPage,scrollThreshold:!1},!0),this.infiniteScroll?.on("request",(()=>{this.loading()})),this.infiniteScroll?.on("load",(t=>{this.loading(!1);const i=this.normalizeResponse(t);this.pagination=i.pagination,this.nextPage=i.pagination.links?.next||null,this.handleResponse(i.data).forEach((t=>this.wrapper.append(t)));let s=this.host.querySelectorAll("salla-notification-item:not(.animated)");n.animateItems(s)})),this.infiniteScroll?.on("error",(t=>{salla.logger.error("Error loading more comments:",t)}))):salla.logger.error("Wrapper is undefined. Cannot initiate infinite scroll.")}async loadInitialData(){await salla.api.notifications.fetch({per_page:this.itemPerPage}).then((t=>{const i=this.normalizeResponse(t);this.pagination=i.pagination,this.total=i.pagination.total,this.nextPage=i.pagination.links?.next||null,setTimeout((()=>{if(!i.data.length)return this.showPlaceholder=!0;this.handleResponse(i.data).forEach((t=>this.wrapper.append(t))),this.initiateInfiniteScroll();let t=this.wrapper.querySelectorAll("salla-notification-item:not(.animated)");n.animateItems(t)}),100)})).catch((t=>{salla.logger.error(t),this.showPlaceholder=!0,this.loading(!1)}))}async loadMore(){this.infiniteScroll?.loadNextPage()}async componentWillLoad(){await this.loadInitialData()}get host(){return this}static get style(){return""}},[0,"salla-notifications",{loadMoreText:[1,"load-more-text"],itemPerPage:[2,"item-per-page"],pagination:[32],total:[32],showPlaceholder:[32],nextPage:[32],no_notifications_trans:[32],load_more_text_trans:[32]}]);function r(){"undefined"!=typeof customElements&&["salla-notifications","salla-notification-item","salla-placeholder"].forEach((i=>{switch(i){case"salla-notifications":customElements.get(t(i))||customElements.define(t(i),l);break;case"salla-notification-item":customElements.get(t(i))||a();break;case"salla-placeholder":customElements.get(t(i))||o()}}))}r();const c=l,h=r;export{c as SallaNotifications,h as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { H as Helper } from './Helper.js';
+import { d as defineCustomElement$3 } from './salla-notification-item2.js';
+import { d as defineCustomElement$2 } from './salla-placeholder2.js';
+
+const sallaNotificationsCss = "";
+
+const SallaNotifications$1 = /*@__PURE__*/ proxyCustomElement(class SallaNotifications extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Number of notifications to load per request.
+         */
+        this.itemPerPage = 10;
+        this.no_notifications_trans = salla.lang.get('blocks.header.no_notifications');
+        this.load_more_text_trans = salla.lang.get('common.elements.load_more');
+        salla.lang.onLoaded(() => {
+            this.no_notifications_trans = salla.lang.get('blocks.header.no_notifications');
+            this.load_more_text_trans = salla.lang.get('common.elements.load_more');
+        });
+    }
+    // Show/hide loading
+    loading(isLoading = true) {
+        let btnText = this.status?.querySelector('.s-button-text');
+        if (btnText) {
+            Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
+            this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
+        }
+    }
+    getNotificationCard(notification) {
+        const notificationItem = document.createElement('salla-notification-item');
+        notificationItem.notification = notification;
+        notificationItem.classList.add('s-block');
+        return notificationItem;
+    }
+    render() {
+        if (this.showPlaceholder) {
+            return h("div", { class: "s-notifications-no-content" }, h("salla-placeholder", { alignment: 'center' }, h("span", { slot: 'title' }, this.no_notifications_trans)));
+        }
+        return h("div", { class: "s-notifications-wrapper" }, h("div", { class: "s-notifications-container", ref: wrapper => this.wrapper = wrapper }), this.nextPage && (h("div", { class: "s-infinite-scroll-wrapper", ref: status => this.status = status }, h("button", { onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, this.loadMoreText ?? this.load_more_text_trans), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => this.btnLoader = btnLoader, style: { "display": "none" } })))));
+    }
+    /**
+     * Detect whether the response uses the new API format (v2) by checking for `cursor` key.
+     */
+    isV2Response(resp) {
+        return !!resp.cursor;
+    }
+    /**
+     * Map a single v2 notification to the legacy Notification interface.
+     */
+    normalizeNotification(item) {
+        return {
+            title: item.title,
+            sub_title: item.body,
+            date: item.time_ago,
+            is_new: !item.is_read,
+            url: item.url,
+        };
+    }
+    /**
+     * Normalize a v2 cursor pagination to the legacy Pagination format.
+     */
+    normalizePagination(cursor) {
+        return {
+            count: cursor.count,
+            currentPage: cursor.current,
+            links: {
+                next: cursor.next != null ? String(cursor.next) : undefined,
+            },
+        };
+    }
+    /**
+     * Middleware that normalizes any API response to the legacy shape.
+     * If the response is already in legacy format, it passes through unchanged.
+     */
+    normalizeResponse(resp) {
+        if (this.isV2Response(resp)) {
+            return {
+                data: (resp.data || []).map((item) => this.normalizeNotification(item)),
+                pagination: this.normalizePagination(resp.cursor),
+            };
+        }
+        return resp;
+    }
+    handleResponse(notificationsList) {
+        return notificationsList.map(notification => this.getNotificationCard(notification));
+    }
+    initiateInfiniteScroll() {
+        if (!this.wrapper) {
+            salla.logger.error('Wrapper is undefined. Cannot initiate infinite scroll.');
+            return;
+        }
+        this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {
+            path: () => this.nextPage,
+            history: true,
+            nextPage: this.nextPage,
+            scrollThreshold: false,
+        }, true);
+        this.infiniteScroll?.on('request', _response => {
+            this.loading();
+        });
+        this.infiniteScroll?.on('load', rawResponse => {
+            this.loading(false);
+            const response = this.normalizeResponse(rawResponse);
+            this.pagination = response.pagination;
+            this.nextPage = response.pagination.links?.next || null;
+            this.handleResponse(response.data).forEach(data => this.wrapper.append(data));
+            let items = this.host.querySelectorAll('salla-notification-item:not(.animated)');
+            Helper.animateItems(items);
+        });
+        this.infiniteScroll?.on('error', (e) => {
+            salla.logger.error('Error loading more comments:', e);
+        });
+    }
+    async loadInitialData() {
+        await salla.api.notifications.fetch({ "per_page": this.itemPerPage })
+            .then(rawResp => {
+            const resp = this.normalizeResponse(rawResp);
+            this.pagination = resp.pagination;
+            this.total = resp.pagination.total;
+            this.nextPage = resp.pagination.links?.next || null;
+            // if (!this.notifications.length) {
+            //   this.showPlaceholder = true;
+            //   return this.loading(false);
+            // }
+            setTimeout(() => {
+                if (!resp.data.length) {
+                    return this.showPlaceholder = true;
+                }
+                this.handleResponse(resp.data).forEach(data => this.wrapper.append(data));
+                this.initiateInfiniteScroll();
+                let items = this.wrapper.querySelectorAll('salla-notification-item:not(.animated)');
+                Helper.animateItems(items);
+            }, 100);
+        })
+            .catch(error => {
+            salla.logger.error(error);
+            this.showPlaceholder = true;
+            this.loading(false);
+        });
+    }
+    // Get next page
+    async loadMore() {
+        this.infiniteScroll?.loadNextPage();
+    }
+    async componentWillLoad() {
+        await this.loadInitialData();
+    }
+    get host() { return this; }
+    static get style() { return sallaNotificationsCss; }
+}, [0, "salla-notifications", {
+        "loadMoreText": [1, "load-more-text"],
+        "itemPerPage": [2, "item-per-page"],
+        "pagination": [32],
+        "total": [32],
+        "showPlaceholder": [32],
+        "nextPage": [32],
+        "no_notifications_trans": [32],
+        "load_more_text_trans": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-notifications", "salla-notification-item", "salla-placeholder"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-notifications":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaNotifications$1);
+            }
+            break;
+        case "salla-notification-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-placeholder":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaNotifications = SallaNotifications$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaNotifications, defineCustomElement };