@salla.sa/twilight-components 2.14.599 → 2.14.600

package/dist/components/salla-accordion-body2.js

@@ -11,7 +11,7 @@ const SallaAccordionBody = /*@__PURE__*/ proxyCustomElement(class SallaAccordion
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: 'cc83d228977d0e4049466fb8aa38b9709fbcf9e5', class: "s-accordion-body-wrapper" }, h("slot", { key: 'c8ca6d7d1512f8e32bbb7ef0785949d655ff3619' })));
+        return (h(Host, { key: 'e0752ba7819b03c9183d457c52e31bb65844eaf8', class: "s-accordion-body-wrapper" }, h("slot", { key: '668d1bd4985dd44d07eaf850dc9ad56683be167f' })));
     }
     static get style() { return sallaAccordionBodyCss; }
 }, [4, "salla-accordion-body"]);

package/dist/components/salla-accordion-head2.js

@@ -34,13 +34,13 @@ const SallaAccordionHead = /*@__PURE__*/ proxyCustomElement(class SallaAccordion
         this.emitCollapsePanel();
     }
     render() {
-        return (h(Host, { key: '066294cd654d22b5cbe483dc34932b8132dda4c4', "data-collapsed": this.collapsed.toString(), onClick: () => this.toggleCollapse(), class: "s-accordion-head-wrapper" }, h("div", { key: 'f235f06aa9bdb59d500148acf4477445bf2f1673', class: "s-accordion-head-wrapper-start" }, h("slot", { key: '25797156b79f88ae61f53397b71b35a79ca62908', name: "title" }), h("slot", { key: '76a66a77b082b5fc18c3ac844a294e2fde113151', name: "progress" }), h("slot", { key: 'd20c4aacfe72c0f15dd8034c43d2bb4e8e0921df', name: "html" })), (this.collapsible || this.host.querySelector('[slot="note"]')) && (h("div", { key: '1a6ae8bebe03ad6c02d69a3c3b3dab425dbec0ea', class: "s-accordion-head-wrapper-end" }, h("slot", { key: 'db284dd1fb40cd1520c225e0c7416b2ea71b8c33', name: "note" }), this.collapsible && (h("button", { key: '378c70a472ed11df058aa32e42ab94de68f214b9', type: 'button', class: {
+        return (h(Host, { key: '71394d6d0786f39e70b1ef33ad86d4e0e0c38666', "data-collapsed": this.collapsed.toString(), onClick: () => this.toggleCollapse(), class: "s-accordion-head-wrapper" }, h("div", { key: '95ccb46518936ce2290534268060dff5458752c6', class: "s-accordion-head-wrapper-start" }, h("slot", { key: '37efcfadaacb3acff86501d8c97b954f0c95f6bc', name: "title" }), h("slot", { key: '5f02b2a9692e4714780a337fa04b5516e0a4e9c8', name: "progress" }), h("slot", { key: '57edacda97012754df3709e37bb8259386c51c0a', name: "html" })), (this.collapsible || this.host.querySelector('[slot="note"]')) && (h("div", { key: '8d56232063aa29fcad4593217778d05c989f7cc5', class: "s-accordion-head-wrapper-end" }, h("slot", { key: '226aa26ad7263db0ca130e01580c80d5862add41', name: "note" }), this.collapsible && (h("button", { key: 'd69093c8823575dc7bc1e17fed364121b5e9db90', type: 'button', class: {
                 's-accordion-head-wrapper-toggle': true,
                 active: !this.collapsed,
             }, onClick: e => {
                 e.stopPropagation();
                 this.toggleCollapse();
-            } }, h("span", { key: '1b4a583b66ed1f332d01ebd15c0c77a231e4e197', class: "s-accordion-head-wrapper-toggle-icon", innerHTML: this.collapsed ? Add : Minus })))))));
+            } }, h("span", { key: '36a0c5e1996f797e61519844f1be808b6119918c', class: "s-accordion-head-wrapper-toggle-icon", innerHTML: this.collapsed ? Add : Minus })))))));
     }
     get host() { return this; }
     static get style() { return sallaAccordionHeadCss; }

package/dist/components/salla-accordion2.js

@@ -42,7 +42,7 @@ const SallaAccordion = /*@__PURE__*/ proxyCustomElement(class SallaAccordion ext
         }
     }
     render() {
-        return (h(Host, { key: '06f5ef106dbc1fd779a757918cb4b424ac1adff6', class: `s-accordion-wrapper ${this.dir} ${this.bordered ? 's-accordion-wrapper-bordered' : ''} ${this.size ? `size-${this.size}` : ''}`, "data-collapsed": this.collapsed.toString() }, h("slot", { key: '3f51bced9c33774081f603b3dbf9a3dd153f2d47' })));
+        return (h(Host, { key: 'f00e8204cd26d8f5f754fccea219bd7a81a67fbe', class: `s-accordion-wrapper ${this.dir} ${this.bordered ? 's-accordion-wrapper-bordered' : ''} ${this.size ? `size-${this.size}` : ''}`, "data-collapsed": this.collapsed.toString() }, h("slot", { key: 'bcb1e384cec9b5faf3fd27544485542b3e8ef2c5' })));
     }
     get host() { return this; }
     static get style() { return sallaAccordionCss; }

package/dist/components/salla-alert.js

@@ -33,7 +33,7 @@ const SallaAlert$1 = /*@__PURE__*/ proxyCustomElement(class SallaAlert extends H
         }
     }
     render() {
-        return (h(Host, { key: 'c1a1e9575ed9aab90960ad3a54ada18d8e3ee240', class: `s-alert-wrapper s-alert-${this.variant}` }, h("span", { key: '7fb08789ad8355cc4bd441a5869e95d2337685a5', class: "s-alert-icon" }, this.renderIcon()), h("span", { key: 'ed3c4fcb5450f21caedeeca28a9a177b151333ec', class: "s-alert-text" }, this.message, h("slot", { key: '6818451171f85fd6ad63f07c69871082d3fcba4e' }))));
+        return (h(Host, { key: 'c530a6bfc1e9927e30d1bed3c28ed16282155d1c', class: `s-alert-wrapper s-alert-${this.variant}` }, h("span", { key: '42daa9c657b992f9594a71460050dbb0e59314d2', class: "s-alert-icon" }, this.renderIcon()), h("span", { key: '1c157391e9091d858f3478cc542e3fa0cf895938', class: "s-alert-text" }, this.message, h("slot", { key: '20f5f31390e74bbeea9ab57103f3a61a1bc9ad5e' }))));
     }
     static get style() { return sallaAlertCss; }
 }, [4, "salla-alert", {

package/dist/components/salla-apps-icons.js

@@ -2,53 +2,86 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as isSallaSdkAvailable } from './ssr-helpers.js';
 
-const sallaAppsIconsCss = "/*!twlt*/:host{display:block}.s-apps-icons-list{display:flex;gap:1rem}.s-apps-icons-list.vertical{flex-direction:column}.s-apps-icons-item{line-height:1}.s-apps-icons-item:hover{color:var(--color-primary)}";
+const sallaAppsIconsCss = "/*!twlt*/:host{display:block}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-apps-icons-list{display:flex;gap:1rem}.s-apps-icons-list.vertical{flex-direction:column}.s-apps-icons-item{line-height:1}.s-apps-icons-item:hover{color:var(--color-primary)}";
 
 const SallaAppsIcons$1 = /*@__PURE__*/ proxyCustomElement(class SallaAppsIcons extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.apps = salla.config.get('store.apps');
-        this.appSlot = this.host.querySelector('[slot="app"]')?.innerHTML || `<img alt="{name}" src="{icon}" width="135" height="40" decoding="async" loading="lazy" />`;
-        salla.onReady(() => {
-            this.apps = salla.config.get('store.apps');
-        });
+        /**
+         * Flag to hide the title.
+         */
+        this.hideTitle = false;
+        /**
+         * Display icons vertically instead of horizontally.
+         */
+        this.vertical = false;
+        this.sdkApps = null;
+    }
+    getDefaultSlot() {
+        return `<img alt="{name}" src="{icon}" width="135" height="40" decoding="async" loading="lazy" />`;
     }
     connectedCallback() {
-        this.langUnsubscribe = salla.lang.subscribe(() => {
-            this.appsTitle = salla.lang.get('blocks.footer.download_apps');
+        if (isSallaSdkAvailable()) {
+            this.langUnsubscribe = salla.lang.subscribe(() => {
+                if (!this.appsTitle || this.appsTitle === this.langTitle) {
+                    this.appsTitle = this.langTitle = salla.lang.get('blocks.footer.download_apps');
+                }
+            });
+        }
+        // capture once: componentDidRender removes the slot element, so a reconnect could no longer read it
+        if (!this.appSlot) {
+            const slotElement = this.slotTemplate ? null : this.host.querySelector('[slot="app"]');
+            this.appSlot = slotElement ? slotElement.innerHTML : (this.slotTemplate || this.getDefaultSlot());
+        }
+        if (!isSallaSdkAvailable())
+            return;
+        // load the store's apps even when `apps` is passed, so clearing the prop falls back to them
+        salla.onReady(() => {
+            this.sdkApps = salla.config.get('store.apps');
         });
     }
     disconnectedCallback() {
         this.langUnsubscribe?.();
     }
     getAppsArray() {
-        return Object.entries(this.apps)
-            .map(([name, value]) => ({ name, value }));
+        const apps = this.apps || this.sdkApps;
+        if (!apps) {
+            return [];
+        }
+        return Object.entries(apps)
+            .filter(([, value]) => value && typeof value === 'string')
+            .map(([name, value]) => ({ name, value: value }));
     }
-    componentWillLoad() {
-        return new Promise(resolve => salla.onReady(resolve));
+    getCdnUrl(iconName) {
+        if (isSallaSdkAvailable()) {
+            return salla.url.cdn(`images/${iconName}.png`);
+        }
+        return `https://cdn.salla.net/images/${iconName}.png`;
+    }
+    componentDidRender() {
+        this.host.querySelector('[slot="app"]')?.remove();
     }
     render() {
         const appsArray = this.getAppsArray();
-        if (Array.isArray(appsArray) && !appsArray.length) {
+        if (appsArray.length === 0) {
             return;
         }
-        return (h(Host, { class: "s-apps-icons" }, !this.hideTitle && h("h3", null, this.appsTitle), h("div", { class: { "s-apps-icons-list": true, "vertical": this.vertical } }, appsArray.map((app, index) => (h("a", { key: index, href: app.value, rel: "noreferrer", target: "_blank", class: "s-apps-icons-item", id: "app-slot", innerHTML: this.appSlot
-                .replace(/\{icon\}/g, salla.url.cdn(`images/${app.name}.png`))
+        return (h(Host, { class: "s-apps-icons" }, !this.hideTitle && this.appsTitle && h("h3", null, this.appsTitle), h("div", { class: { "s-apps-icons-list": true, "vertical": this.vertical } }, appsArray.map((app) => (h("a", { key: app.name, href: app.value, rel: "noreferrer", target: "_blank", class: "s-apps-icons-item", innerHTML: this.appSlot
+                .replace(/\{icon\}/g, this.getCdnUrl(app.name))
                 .replace(/\{name\}/g, app.name) }))))));
     }
-    componentDidRender() {
-        this.host.querySelector('[slot="app"]')?.remove();
-    }
     get host() { return this; }
     static get style() { return sallaAppsIconsCss; }
 }, [0, "salla-apps-icons", {
+        "apps": [16],
+        "appsTitle": [1025, "apps-title"],
         "hideTitle": [4, "hide-title"],
-        "appsTitle": [1, "apps-title"],
         "vertical": [4],
-        "apps": [32]
+        "slotTemplate": [1, "slot-template"],
+        "sdkApps": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/salla-badge2.js

@@ -86,7 +86,7 @@ const SallaBadge = /*@__PURE__*/ proxyCustomElement(class SallaBadge extends HTM
         this.bg = 'light';
     }
     render() {
-        return (h("div", { key: '7c7196d49621a58192820725ab40d906344983d1', class: badge({ size: this.size, bg: this.bg, color: this.color }) }, h("slot", { key: '7a39f5d916e80809f795b5cc880f1d31238fa7c5' })));
+        return (h("div", { key: '7a78bf8120879a06ce40d6e63d7fcd8444fff727', class: badge({ size: this.size, bg: this.bg, color: this.color }) }, h("slot", { key: '1ea89bc586b06a0e498d972d5efc5eaaffaf5a63' })));
     }
     static get style() { return sallaBadgeCss; }
 }, [4, "salla-badge", {

package/dist/components/salla-booking-field2.js

@@ -40,7 +40,6 @@ const SallaBookingField = /*@__PURE__*/ proxyCustomElement(class SallaBookingFie
         Salla.event.on('booking::open', (data) => this.handleBookingOpen(data));
     }
     connectedCallback() {
-        // Load translations
         this.langUnsubscribe = salla.lang.subscribe(() => this.setTranslations());
     }
     disconnectedCallback() {
@@ -90,6 +89,11 @@ const SallaBookingField = /*@__PURE__*/ proxyCustomElement(class SallaBookingFie
     handleBookingOpen(data) {
         if (data.id !== this.productId)
             return;
+        // Opt-in native override: inside the SPA webview the bridge forwards this same event to native
+        // as `mobile::booking.open` { url, id }, and the native shell owns the booking screen — skip the
+        // web iframe modal so both don't show. On web / apps without the flag, the modal opens as usual.
+        if (salla.mobile?.isSpaWebview?.())
+            return;
         this.bookingUrl = salla.url.addParamToUrl('product_id', data.id, data.url);
         this.iframeReady = true;
         setTimeout(() => {
@@ -119,7 +123,12 @@ const SallaBookingField = /*@__PURE__*/ proxyCustomElement(class SallaBookingFie
         window.addEventListener('booking::open-after-reload', (event) => this.openBookingModal(event, true));
         this.emitAfterReloadEvent();
         window.addEventListener('message', this.handleMessageEvent.bind(this));
-        this.reservationsInput.addEventListener('invalid', e => this.invalidInput.emit(e));
+        this.reservationsInput.addEventListener('invalid', e => {
+            this.invalidInput.emit({
+                target: e.target,
+                validity: e.target.validity
+            });
+        });
         this.reservationsInput.addEventListener('input', () => {
             this.reservationsInput.setCustomValidity('');
             this.reservationsInput.reportValidity();
@@ -175,7 +184,7 @@ const SallaBookingField = /*@__PURE__*/ proxyCustomElement(class SallaBookingFie
         return (h("span", { class: "s-booking-field-reservations-time" }, h("i", { class: "s-booking-field-reservations-icon", innerHTML: TimeIcon }), h("span", null, reservation.from_timestamp, " - ", reservation.to_timestamp)));
     }
     render() {
-        return (h(Host, { key: '58a42c3f74c835039e3eeab63b3fdb8b1ab3f3d7' }, h("div", { key: '3e700a1f5de967167a1a5014ee6a39ae99ce53e7', class: "s-booking-field-main" }, this.option.required || this.reservations.length > 0 ? h("div", { class: "s-booking-field-price" }, h("span", { innerHTML: salla.money(this.option.price) })) : '', h("salla-button", { key: '7f86d43a5a5100869f249b690545269e218a1799', class: "s-booking-field-book-now", size: "small", loaderPosition: "center", fill: "outline", onClick: event => this.openBookingModal(event, false) }, h("span", { key: '9a8b446c2d59ffe0b2800d48de1911c2b94a9078', class: "s-booking-field-book-now-content" }, h("span", { key: '678a8be040e17bdd6234c05d79a29fb45286156d', innerHTML: BookingTime }), this.reservations.length ? this.editLabel : this.bookNowLabel))), this.reservations.length > 0 && (h("div", { key: 'c1271b41d4584887a2c4e07b90c4d3b7ef285447', class: "s-booking-field-reservations" }, this.reservations.map((reservation, index) => (h("div", { key: index, class: "s-booking-field-reservations-item" }, this.renderReservationDate(reservation), this.renderReservationTime(reservation)))))), h("input", { key: 'b4f42ddb7adee25ef281805491bd4e5effc73ab9', class: "s-hidden", name: this.option.name, required: this.option.required, value: JSON.stringify(this.reservations) === '[]' ? '' : JSON.stringify(this.reservations), ref: reservations => this.reservationsInput = reservations }), this.iframeReady && this.bookingModal()));
+        return (h(Host, { key: '867baeadef44a292fb91610fa37543b13f106791' }, h("div", { key: '3a6b64b5ca81a71665954d48059c3f7991b074d5', class: "s-booking-field-main" }, this.option.required || this.reservations.length > 0 ? h("div", { class: "s-booking-field-price" }, h("span", { innerHTML: salla.money(this.option.price) })) : '', h("salla-button", { key: 'a274a931a7c2f3817774196c2150cf6b36365028', class: "s-booking-field-book-now", size: "small", loaderPosition: "center", fill: "outline", onClick: event => this.openBookingModal(event, false) }, h("span", { key: '52da7cac22d69527c92844bc907610593521c115', class: "s-booking-field-book-now-content" }, h("span", { key: '9aaece05a99d335158b5bbc110cbf4e7febba06d', innerHTML: BookingTime }), this.reservations.length ? this.editLabel : this.bookNowLabel))), this.reservations.length > 0 && (h("div", { key: '320151bc171976c0f2962fa30fa7efb923830cd0', class: "s-booking-field-reservations" }, this.reservations.map((reservation, index) => (h("div", { key: index, class: "s-booking-field-reservations-item" }, this.renderReservationDate(reservation), this.renderReservationTime(reservation)))))), h("input", { key: 'ecea033a152115533a80ec2ae33b415c11b19c42', class: "s-hidden", name: this.option.name, required: this.option.required, value: JSON.stringify(this.reservations) === '[]' ? '' : JSON.stringify(this.reservations), ref: reservations => this.reservationsInput = reservations }), this.iframeReady && this.bookingModal()));
     }
     get host() { return this; }
     static get style() { return sallaBookingFieldCss; }

package/dist/components/salla-contacts.js

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as isSallaSdkAvailable } from './ssr-helpers.js';
 import { W as WhatsappIcon } from './whatsapp2.js';
 import { M as MailIcon } from './mail.js';
 
@@ -32,64 +33,98 @@ const SallaContacts$1 = /*@__PURE__*/ proxyCustomElement(class SallaContacts ext
     constructor() {
         super();
         this.__registerHost();
-        this.contacts = salla.config.get('store.contacts');
+        /**
+         * Flag to toggle title visibility.
+         */
+        this.hideTitle = false;
+        /**
+         * Conditional flag to check whether the content is header or not.
+         */
+        this.isHeader = false;
+        /**
+         * Flag to toggle list of contents whether vertical or horizontal.
+         */
+        this.horizontal = false;
+        /**
+         * Flag condition to show icon only or icon with label.
+         */
+        this.iconsOnly = false;
+        this.sdkContacts = null;
         this.iconsList = { mobile, whatsapp: WhatsappIcon, phone, telegram, email: MailIcon };
-        this.contactSlot = this.host.querySelector('[slot="contact"]')?.innerHTML || `<a href={link} class="s-contacts-item"><span class="s-contacts-icon">{icon}</span>${!this.iconsOnly && "<span class='unicode'>{value}</span>"}</a>`;
-        salla.onReady(() => {
-            this.contacts = salla.config.get('store.contacts');
-        });
+    }
+    getDefaultSlot() {
+        const valueMarkup = this.iconsOnly ? '' : "<span class='unicode'>{value}</span>";
+        return '<a href="{link}" class="s-contacts-item"><span class="s-contacts-icon">{icon}</span>' + valueMarkup + '</a>';
     }
     connectedCallback() {
-        this.langUnsubscribe = salla.lang.subscribe(() => {
-            if (!this.contactsTitle || this.contactsTitle === this.langTitle) {
-                this.contactsTitle = this.langTitle = salla.lang.get('blocks.footer.social');
-            }
+        if (isSallaSdkAvailable()) {
+            this.langUnsubscribe = salla.lang.subscribe(() => {
+                if (!this.contactsTitle || this.contactsTitle === this.langTitle) {
+                    this.contactsTitle = this.langTitle = salla.lang.get('blocks.footer.social');
+                }
+            });
+        }
+        // capture once: componentDidRender removes the slot element, so a reconnect could no longer read it
+        if (!this.contactSlot) {
+            const slotElement = this.slotTemplate ? null : this.host.querySelector('[slot="contact"]');
+            this.contactSlot = slotElement ? slotElement.innerHTML : (this.slotTemplate || this.getDefaultSlot());
+        }
+        if (!isSallaSdkAvailable())
+            return;
+        // load the store's contacts even when `contacts` is passed, so clearing the prop falls back to them
+        salla.onReady(() => {
+            this.sdkContacts = salla.config.get('store.contacts');
         });
     }
     disconnectedCallback() {
         this.langUnsubscribe?.();
     }
+    getContactsData() {
+        return this.contacts || this.sdkContacts || {};
+    }
     getContactsArray() {
-        return Object.entries(this.contacts)
-            .filter(([_key, value]) => value !== '')
-            .map(([type, value]) => ({ type, value }));
+        const contactsData = this.getContactsData();
+        return Object.entries(contactsData)
+            .filter(([, value]) => value && value !== '')
+            .map(([type, value]) => ({ type, value: value }));
     }
-    getContactLink(type) {
-        const contactValue = this.contacts[type];
+    getContactLink(type, contactValue) {
         switch (type) {
             case 'phone':
             case 'mobile':
                 return `tel:${contactValue}`;
             case 'whatsapp':
-                const whatsAppNumber = (contactValue || '').toString().replace(/[^\d]/g, '');
-                return whatsAppNumber ? `https://wa.me/${whatsAppNumber}` : salla.url.get('whatsapp/send');
+                const whatsAppNumber = contactValue.toString().replace(/[^\d]/g, '');
+                return whatsAppNumber ? `https://wa.me/${whatsAppNumber}` :
+                    (isSallaSdkAvailable() ? salla.url.get('whatsapp/send') : '');
             case 'email':
                 return `mailto:${contactValue}`;
             case 'telegram':
-                // Check if the contact is already a full URL
                 return contactValue.startsWith('https://t.me/') ? contactValue : `https://t.me/${contactValue}`;
             default:
                 return contactValue;
         }
     }
     getContactIcon(type) {
-        return this.iconsList[type];
+        return this.iconsList[type] || '';
     }
-    componentWillLoad() {
-        return new Promise(resolve => salla.onReady(resolve));
+    componentDidRender() {
+        this.host.querySelector('[slot="contact"]')?.remove();
     }
     render() {
         const contactsArray = this.getContactsArray();
-        if (!contactsArray || contactsArray.length == 0) {
+        if (!contactsArray || contactsArray.length === 0) {
             return;
         }
         if (this.isHeader) {
-            return (h(Host, { class: "s-contacts s-contacts-header" }, contactsArray.filter((contact) => contact.type == 'phone' || contact.type == 'email').map((contact, index) => (h("a", { href: this.getContactLink(contact.type), key: index, class: "s-contacts-topnav-link" }, contact.type === 'email' ? (contact.value) : ([
+            return (h(Host, { class: "s-contacts s-contacts-header" }, contactsArray
+                .filter(contact => contact.type === 'phone' || contact.type === 'email')
+                .map((contact, index) => (h("a", { href: this.getContactLink(contact.type, contact.value), key: index, class: "s-contacts-topnav-link" }, contact.type === 'email' ? (contact.value) : ([
                 h("span", null, this.contactsTitle, ": "),
                 h("span", { class: "unicode" }, contact.value)
             ]))))));
         }
-        return (h(Host, { class: "s-contacts" }, !this.hideTitle && h("h3", { class: "s-contacts-title" }, this.contactsTitle), h("div", { class: {
+        return (h(Host, { class: "s-contacts" }, !this.hideTitle && this.contactsTitle && h("h3", { class: "s-contacts-title" }, this.contactsTitle), h("div", { class: {
                 's-contacts-list': true,
                 's-contacts-list-horizontal': this.horizontal,
                 's-contacts-list-vertical': !this.horizontal,
@@ -97,22 +132,19 @@ const SallaContacts$1 = /*@__PURE__*/ proxyCustomElement(class SallaContacts ext
             } }, contactsArray.map((contact, index) => (h("div", { key: index, id: "contact-slot", innerHTML: this.contactSlot
                 .replace(/\{icon\}/g, this.getContactIcon(contact.type))
                 .replace(/\{value\}/g, contact.value.toString())
-                .replace(/\{link\}/g, this.getContactLink(contact.type)) }))))));
-    }
-    componentDidRender() {
-        // this.host.querySelectorAll('#contact-slot').forEach(el => el.replaceWith(el.firstChild));
-        this.host.querySelector('[slot="contact"]')?.remove();
+                .replace(/\{link\}/g, this.getContactLink(contact.type, contact.value)) }))))));
     }
     get host() { return this; }
     static get style() { return sallaContactsCss; }
 }, [0, "salla-contacts", {
+        "contacts": [16],
         "contactsTitle": [1025, "contacts-title"],
         "hideTitle": [4, "hide-title"],
         "isHeader": [4, "is-header"],
         "horizontal": [4],
         "iconsOnly": [4, "icons-only"],
-        "contacts": [32],
-        "iconsList": [32]
+        "slotTemplate": [1, "slot-template"],
+        "sdkContacts": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -388,18 +388,18 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
         // header-inner container; the empty title div is hidden via .s-oom-wizard-modal CSS.
         // In single-step mode the header shows the relevant title text directly.
         const modalTitle = this._isWizard ? ' ' : (isStep1 ? this.freeProductTitle : this.title);
-        return (h("salla-modal", { key: '60e626bb49f8592c952182c182e6d73ddcaadeed', ref: el => (this.modal = el), class: `s-order-options-modal-host${this._isWizard ? ' s-oom-wizard-modal' : ''}`, width: "md", "modal-title": modalTitle, onModalVisibilityChanged: (e) => {
+        return (h("salla-modal", { key: '42c7d7d765d42b6fc25ec86eb824dc2bf7a0b1bd', ref: el => (this.modal = el), class: `s-order-options-modal-host${this._isWizard ? ' s-oom-wizard-modal' : ''}`, width: "md", "modal-title": modalTitle, onModalVisibilityChanged: (e) => {
                 if (!e.detail)
                     this.handleClose();
-            } }, this._isWizard && (h("div", { key: 'a842b5d1566c8bb0bd68d5986fb092c14f8a01d6', slot: "icon", class: "s-oom-steps" }, stepLabels.map((label, index) => [
+            } }, this._isWizard && (h("div", { key: '6e8e57a4f8d49d06cd70ae00b01d47b9ad66448e', slot: "icon", class: "s-oom-steps" }, stepLabels.map((label, index) => [
             index > 0 && h("div", { class: "s-oom-connector" }),
             h("div", { class: `s-oom-step ${index === current ? 'active' : (index < current ? 'done' : '')}` }, h("span", { class: "s-oom-step-num" }, index + 1), h("span", { class: "s-oom-step-label" }, label)),
-        ]))), h("div", { key: '1f61a756dcf824bf4d8be71ccbd9a0c2742851d2', class: "s-order-options-modal-body" }, isStep1 && this.freeProduct && (h("div", { key: '667841475dff0deda06d8d04e0a2841f33ec54b6', class: "s-oom-free-product-card" }, this.freeProduct.thumbnail && (h("img", { key: '129b99226216f0c1ca59fccbc0ba35d5af8cdee7', class: "s-oom-free-product-thumb", src: this.freeProduct.thumbnail, alt: this.freeProduct.name })), h("div", { key: 'ae385e2d4fb967144743d67eadd50f31c23332ec', class: "s-oom-free-product-info" }, h("span", { key: '4f48a3fd0af91435060a0d303a6d0f77f5afd1bc', class: "s-oom-free-product-name" }, this.freeProduct.name), h("div", { key: 'de62961aba2246c1d52d411461d6a45aed620eab', class: "s-oom-free-product-tags" }, h("span", { key: 'db1af48cc1a7583a7f2d026159ff01f03ad216bf', class: "s-oom-free-badge" }, this.t('common.elements.free', 'مجاني')), this.freeProduct.offer_name && (h("span", { key: 'ce595bccd755e908deb1c566758ca3629171962b', class: "s-oom-free-offer-name" }, this.freeProduct.offer_name)))))), h("p", { key: '161740bddbf25369392f362f9613f2e9c6a94fc1', class: "s-order-options-modal-subtitle" }, isStep1 ? this.freeProductSubtitle : this.subtitle), h("div", { key: '20d3f92f0f3782d599ec5ce923c2dad93f7c7608', class: "s-order-options-modal-fields" }, this.orderOptions.length > 0 && (h("salla-product-options", { key: this.sessionId, ref: el => {
+        ]))), h("div", { key: '748c8bdd31860f1f2b512940ea0e4aea27737e88', class: "s-order-options-modal-body" }, isStep1 && this.freeProduct && (h("div", { key: '85cd3903f2ba210b973eef66750ecee5a6d77a4b', class: "s-oom-free-product-card" }, this.freeProduct.thumbnail && (h("img", { key: '809cf47e06f640c438373823cb90801097274653', class: "s-oom-free-product-thumb", src: this.freeProduct.thumbnail, alt: this.freeProduct.name })), h("div", { key: 'bd7abf27cdb0256b9a00ae085be07b8e655ea33a', class: "s-oom-free-product-info" }, h("span", { key: '0324efe7d547a168eb51c4a398aef6cc097f1867', class: "s-oom-free-product-name" }, this.freeProduct.name), h("div", { key: '9eb2ab65e83e294796b910d77a2d1f7207824dad', class: "s-oom-free-product-tags" }, h("span", { key: '921d3487595380b3accc074655c445060595e6bc', class: "s-oom-free-badge" }, this.t('common.elements.free', 'مجاني')), this.freeProduct.offer_name && (h("span", { key: '0bf1142a8078b8faf67af0d623ab41fcbeba2414', class: "s-oom-free-offer-name" }, this.freeProduct.offer_name)))))), h("p", { key: '372fe80cd605b6b5b9d9fd1976f40878f67a1830', class: "s-order-options-modal-subtitle" }, isStep1 ? this.freeProductSubtitle : this.subtitle), h("div", { key: '179205569c7cadf8326fb202936a08775bc62b4c', class: "s-order-options-modal-fields" }, this.orderOptions.length > 0 && (h("salla-product-options", { key: this.sessionId, ref: el => {
                 if (!el)
                     return;
                 this.optionsRefs.set(uniqueKey, el);
                 el.seedSelectedOptions?.();
-            }, "product-id": productIdAttr, "unique-key": uniqueKey, options: JSON.stringify(this.orderOptions), "hide-out-label": "1", "no-padding": true })))), h("div", { key: 'c80a0c1f1b32e5396483171196879bc43713c2f4', slot: "footer", class: "s-order-options-modal-footer" }, showApplePay ? (h("div", { class: "s-order-options-modal-apple-pay-wrap" }, h("div", { class: "s-order-options-modal-apple-pay-total" }, h("span", { class: "s-order-options-modal-apple-pay-label" }, this.totalLabel), h("span", { class: "s-order-options-modal-apple-pay-amount", innerHTML: totalHtml })), h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', buttonstyle: "black", type: "buy", class: "s-order-options-modal-apple-pay", onClick: () => this.handleSubmit() }))) : (h("salla-button", { type: "button", color: "primary", fill: "solid", width: "wide", loading: this.isSubmitting, onClick: () => this.handleSubmit() }, h("span", { class: "s-order-options-modal-cta-content" }, h("span", { class: "s-order-options-modal-cta-text" }, isStep1 ? this.freeProductContinueLabel : this.submitLabel), isStep1
+            }, "product-id": productIdAttr, "unique-key": uniqueKey, options: JSON.stringify(this.orderOptions), "hide-out-label": "1", "no-padding": true })))), h("div", { key: '4abd512d2592800f2797897ee1cff61f3276ad2c', slot: "footer", class: "s-order-options-modal-footer" }, showApplePay ? (h("div", { class: "s-order-options-modal-apple-pay-wrap" }, h("div", { class: "s-order-options-modal-apple-pay-total" }, h("span", { class: "s-order-options-modal-apple-pay-label" }, this.totalLabel), h("span", { class: "s-order-options-modal-apple-pay-amount", innerHTML: totalHtml })), h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', buttonstyle: "black", type: "buy", class: "s-order-options-modal-apple-pay", onClick: () => this.handleSubmit() }))) : (h("salla-button", { type: "button", color: "primary", fill: "solid", width: "wide", loading: this.isSubmitting, onClick: () => this.handleSubmit() }, h("span", { class: "s-order-options-modal-cta-content" }, h("span", { class: "s-order-options-modal-cta-text" }, isStep1 ? this.freeProductContinueLabel : this.submitLabel), isStep1
             ? h("i", { class: {
                     's-oom-cta-arrow': true,
                     // "Forward" is left in RTL and right in LTR; hardcoding arrow-left made

package/dist/components/salla-order-totals-card.js

@@ -10,21 +10,62 @@ const SallaOrderTotalsCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrder
         super();
         this.__registerHost();
     }
-    handleOrderChange(newValue) {
-        if (newValue) {
-            this.setSummaryFromProp(newValue);
+    // `amounts` wins over the legacy `order` whenever both are set
+    refreshSummary() {
+        if (this.amounts) {
+            this.setSummaryFromAmounts(this.amounts);
+        }
+        else if (this.order) {
+            this.setSummaryFromOrder(this.order);
         }
         else {
             this.summary = undefined;
         }
     }
+    handleAmountsChange() {
+        this.refreshSummary();
+    }
+    handleOrderChange() {
+        this.refreshSummary();
+    }
     async componentWillLoad() {
         await Salla.onReady();
-        if (this.order) {
-            this.setSummaryFromProp(this.order);
+        this.refreshSummary();
+    }
+    normalizeAmounts(value) {
+        const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+        return {
+            sub_total: parsed.sub_total,
+            total: parsed.total,
+            shipping_cost: parsed.shipping_cost,
+            cod_cost: parsed.cash_on_delivery,
+            paid_amount: parsed.paid_amount,
+            remaining_amount: parsed.remaining_amount,
+            refund_amount: parsed.refund_amount,
+            options: parsed.options,
+            options_total: parsed.options_total,
+            tax: parsed.tax
+                ? {
+                    percent: typeof parsed.tax.percent === 'string' ? parseFloat(parsed.tax.percent) : parsed.tax.percent,
+                    amount: parsed.tax.amount,
+                }
+                : undefined,
+            discounts: parsed.discounts?.map((d) => ({
+                name: d.title,
+                discount: typeof d.discount === 'string' ? parseFloat(d.discount) : d.discount,
+            })),
+        };
+    }
+    setSummaryFromAmounts(value) {
+        try {
+            this.summary = this.normalizeAmounts(value);
+        }
+        catch (error) {
+            salla.logger.error('Failed to parse amounts data', error);
+            this.summary = undefined;
         }
     }
-    setSummaryFromProp(value) {
+    setSummaryFromOrder(value) {
         try {
             const parsedValue = typeof value === 'string' ? JSON.parse(value) : value;
             this.summary = parsedValue;
@@ -67,13 +108,16 @@ const SallaOrderTotalsCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrder
             : null, h("div", { class: "s-order-totals-card-total" }, this.renderTotalRow(salla.lang.get('pages.orders.final_total'), summary.total, 's-order-totals-card-total-label', 's-order-totals-card-total-value', true)), refundAmount > 0 ? (h("div", { class: "s-order-totals-card-refund" }, this.renderRefundRow(summary.refund_amount))) : null)))));
     }
     static get watchers() { return {
+        "amounts": ["handleAmountsChange"],
         "order": ["handleOrderChange"]
     }; }
     static get style() { return sallaOrderTotalsCardCss; }
 }, [0, "salla-order-totals-card", {
+        "amounts": [1],
         "order": [1],
         "summary": [32]
     }, undefined, {
+        "amounts": ["handleAmountsChange"],
         "order": ["handleOrderChange"]
     }]);
 function defineCustomElement$1() {

package/dist/components/salla-search.js

@@ -234,12 +234,22 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class SallaSearch extends
                 Helper.saveProductSource('search');
                 this.commitSearchHistory(this.search_term);
                 salla.event.emit('salla-search::product.clicked', [{ product, position }]);
+                this.modal?.close();
             },
             recommendationClick: (term, source) => {
                 salla.event.emit('salla-search::recommendation.clicked', { term, source });
             },
         };
-        salla.event.on('search::open', () => this.open());
+    }
+    connectedCallback() {
+        this.searchOpenListener = () => this.open();
+        salla.event.on('search::open', this.searchOpenListener);
+    }
+    disconnectedCallback() {
+        if (this.searchOpenListener) {
+            salla.event.off('search::open', this.searchOpenListener);
+            this.searchOpenListener = undefined;
+        }
     }
     async open() {
         if (!this.hasLoadedPopularSearches) {

package/dist/components/salla-tab-content2.js

@@ -21,6 +21,12 @@ const SallaTabContent = /*@__PURE__*/ proxyCustomElement(class SallaTabContent e
             name: this.name
         };
     }
+    componentWillLoad() {
+        const parent = this.host.closest('salla-tabs');
+        if (parent?.activeTab === this.name) {
+            this.isSelected = true;
+        }
+    }
     unselect() {
         this.isSelected = false;
     }
@@ -32,8 +38,9 @@ const SallaTabContent = /*@__PURE__*/ proxyCustomElement(class SallaTabContent e
             's-tabs-content': true,
             's-tabs-content-selected': this.isSelected
         };
-        return (h("div", { key: '3107faffd358504438b464be5000682d403e1b22', class: classes }, h("slot", { key: 'e6fc9e480389b54f9e6e20a7c8ccdb880a4ee6d4' })));
+        return (h("div", { key: '251a33f54b1a8bb0fc4a424de86fe9e443ef6cf1', class: classes }, h("slot", { key: 'f7244cb7f510b7bde6ff34a64ef4ce043392b4fa' })));
     }
+    get host() { return this; }
     static get style() { return sallaTabContentCss; }
 }, [4, "salla-tab-content", {
         "name": [1],

package/dist/components/salla-tabs2.js

@@ -10,18 +10,26 @@ const SallaTabs = /*@__PURE__*/ proxyCustomElement(class SallaTabs extends HTMLE
         super();
         this.__registerHost();
         /**
-         * Background color
+         * Background color for the tabs header section. Accepts any CSS color value.
          */
         this.backgroundColor = undefined;
         /**
-         * Align tabs vertically.
+         * Whether to display tabs in a vertical layout. Default is false (horizontal layout).
          */
         this.vertical = false;
     }
-    componentWillLoad() {
+    componentDidLoad() {
         this.createGroup().then(() => {
-            const [group] = this.tabGroup;
-            this.selectGroup(group);
+            if (this.activeTab) {
+                const group = this.tabGroup.find(g => g.header.name === this.activeTab);
+                if (group) {
+                    this.selectGroup(group);
+                }
+            }
+            else {
+                const [group] = this.tabGroup;
+                this.selectGroup(group);
+            }
         });
     }
     onSelectedTab(event) {
@@ -50,15 +58,17 @@ const SallaTabs = /*@__PURE__*/ proxyCustomElement(class SallaTabs extends HTMLE
         group.content.selected();
     }
     render() {
+        const headerStyle = this.backgroundColor ? { 'background-color': this.backgroundColor } : {};
         return [
-            h("div", { key: 'de6455b0d68cb3e174771ad7be1bc95141d61df1', class: "s-tabs" }, h("div", { key: '57c21f00a709723fa0be789f388b3defb391bcb2', class: "s-tabs-header" }, h("slot", { key: 'b5107fab289f9d7c661ddd7c4cfea4795eb7bb19', name: "header" })), h("div", { key: '344d142adc8f6adbc70baf4009e2d594fdbaea06', class: "s-tabs-content-wrapper" }, h("slot", { key: 'acd41f2ebb7120a2c043d17740e5fd4d2db95276', name: "content" })))
+            h("div", { key: 'd6f4e42f48cc3275f210718af56ff2fbbdb3e4a2', class: "s-tabs" }, h("div", { key: 'cdc798c1408536a3d56797b9bba071b246c01bbe', class: "s-tabs-header", style: headerStyle }, h("slot", { key: '7ba75a8985d78246faeef7c491452a5b82dbfa21', name: "header" })), h("div", { key: '0672eb44f6664cc3926a9780718f818f3b1ff507', class: "s-tabs-content-wrapper" }, h("slot", { key: '761a54a862372d9546763c814cc96ccb802f9b64', name: "content" })))
         ];
     }
     get host() { return this; }
     static get style() { return sallaTabsCss; }
 }, [4, "salla-tabs", {
         "backgroundColor": [1, "background-color"],
-        "vertical": [4]
+        "vertical": [4],
+        "activeTab": [1, "active-tab"]
     }, [[0, "tabSelected", "onSelectedTab"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {