@salla.sa/twilight-components 2.14.599 → 2.14.601

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

@@ -2,44 +2,75 @@
  * Crafted with ❤ by Salla
  */
 import { Host, h } from "@stencil/core";
+import { isSallaSdkAvailable } from "../../utils/ssr-helpers";
 /**
  * @slot app - Replaces app item, has replaceable props `{icon}`, `{name}`.
  */
 export class SallaAppsIcons {
     constructor() {
-        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();
-    }
     static get is() { return "salla-apps-icons"; }
     static get originalStyleUrls() {
         return {
@@ -53,44 +84,69 @@ export class SallaAppsIcons {
     }
     static get properties() {
         return {
-            "hideTitle": {
-                "type": "boolean",
-                "attribute": "hide-title",
+            "apps": {
+                "type": "unknown",
+                "attribute": "apps",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "AppsIconsConfig",
+                    "resolved": "AppsIconsConfig",
+                    "references": {
+                        "AppsIconsConfig": {
+                            "location": "import",
+                            "path": "./salla-apps-icons.types",
+                            "id": "src/components/salla-apps-icons/salla-apps-icons.types.ts::AppsIconsConfig"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Flag to show or hide title."
+                    "text": "Apps URLs in object format {appstore, googleplay}.\nWhen not provided, uses SDK config 'store.apps'."
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false
+                "setter": false
             },
             "appsTitle": {
                 "type": "string",
                 "attribute": "apps-title",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The title to display."
+                    "text": "The title to display above icons.\nWhen not provided, uses SDK lang 'blocks.footer.download_apps'."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false
             },
+            "hideTitle": {
+                "type": "boolean",
+                "attribute": "hide-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag to hide the title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "vertical": {
                 "type": "boolean",
                 "attribute": "vertical",
@@ -104,7 +160,27 @@ export class SallaAppsIcons {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Display flag to horizontal/vertical."
+                    "text": "Display icons vertically instead of horizontally."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "slotTemplate": {
+                "type": "string",
+                "attribute": "slot-template",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom slot template HTML with placeholders {icon}, {name}.\nUsed for SSR. Client-side can use slot=\"app\" instead."
                 },
                 "getter": false,
                 "setter": false,
@@ -114,7 +190,7 @@ export class SallaAppsIcons {
     }
     static get states() {
         return {
-            "apps": {}
+            "sdkApps": {}
         };
     }
     static get elementRef() { return "host"; }

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

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/salla-badge/salla-badge.js

@@ -37,7 +37,7 @@ export class SallaBadge {
         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 is() { return "salla-badge"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-booking-field/salla-booking-field.js

@@ -19,7 +19,6 @@ export class SallaBookingField {
         Salla.event.on('booking::open', (data) => this.handleBookingOpen(data));
     }
     connectedCallback() {
-        // Load translations
         this.langUnsubscribe = salla.lang.subscribe(() => this.setTranslations());
     }
     disconnectedCallback() {
@@ -69,6 +68,11 @@ export class SallaBookingField {
     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(() => {
@@ -98,7 +102,12 @@ export class SallaBookingField {
         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();
@@ -154,7 +163,7 @@ export class SallaBookingField {
         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()));
     }
     static get is() { return "salla-booking-field"; }
     static get originalStyleUrls() {
@@ -238,9 +247,15 @@ export class SallaBookingField {
                     "text": "Event emitted when the input is invalid."
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "SallaBookingFieldInvalidInputEvent",
+                    "resolved": "SallaBookingFieldInvalidInputEvent",
+                    "references": {
+                        "SallaBookingFieldInvalidInputEvent": {
+                            "location": "local",
+                            "path": "/home/runner/_work/twilight/twilight/packages/twilight-components/src/components/salla-booking-field/salla-booking-field.tsx",
+                            "id": "src/components/salla-booking-field/salla-booking-field.tsx::SallaBookingFieldInvalidInputEvent"
+                        }
+                    }
                 }
             }];
     }

package/dist/collection/components/salla-contacts/salla-contacts.js

@@ -2,74 +2,109 @@
  * Crafted with ❤ by Salla
  */
 import { Host, h } from "@stencil/core";
+import { isSallaSdkAvailable } from "../../utils/ssr-helpers";
 import mobile from "../../assets/svg/iphone.svg";
 import whatsapp from "../../assets/svg/whatsapp2.svg";
 import phone from "../../assets/svg/phone.svg";
 import telegram from "../../assets/svg/paper-plane-o.svg";
 import email from "../../assets/svg/mail.svg";
 /**
- * @slot contact - Replaces contact item, has replaceable props `{icon}`, `{value}`.
+ * @slot contact - Replaces contact item, has replaceable props `{icon}`, `{value}`, `{link}`.
  */
 export class SallaContacts {
     constructor() {
-        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, phone, telegram, email };
-        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,
@@ -77,11 +112,7 @@ export class SallaContacts {
             } }, 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)) }))))));
     }
     static get is() { return "salla-contacts"; }
     static get originalStyleUrls() {
@@ -96,6 +127,30 @@ export class SallaContacts {
     }
     static get properties() {
         return {
+            "contacts": {
+                "type": "unknown",
+                "attribute": "contacts",
+                "mutable": false,
+                "complexType": {
+                    "original": "ContactsConfig",
+                    "resolved": "ContactsConfig",
+                    "references": {
+                        "ContactsConfig": {
+                            "location": "import",
+                            "path": "./salla-contacts.types",
+                            "id": "src/components/salla-contacts/salla-contacts.types.ts::ContactsConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Contact information in object format {whatsapp, mobile, phone, email, telegram}.\nWhen not provided, uses SDK config 'store.contacts'."
+                },
+                "getter": false,
+                "setter": false
+            },
             "contactsTitle": {
                 "type": "string",
                 "attribute": "contacts-title",
@@ -106,10 +161,10 @@ export class SallaContacts {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Section title for social block of footer."
+                    "text": "Section title for social block of footer.\nWhen not provided, uses SDK lang 'blocks.footer.social'."
                 },
                 "getter": false,
                 "setter": false,
@@ -132,7 +187,8 @@ export class SallaContacts {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "isHeader": {
                 "type": "boolean",
@@ -151,7 +207,8 @@ export class SallaContacts {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "horizontal": {
                 "type": "boolean",
@@ -170,7 +227,8 @@ export class SallaContacts {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "iconsOnly": {
                 "type": "boolean",
@@ -185,7 +243,27 @@ export class SallaContacts {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Flag condition to show icon only or icon with label"
+                    "text": "Flag condition to show icon only or icon with label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "slotTemplate": {
+                "type": "string",
+                "attribute": "slot-template",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom slot template HTML with placeholders {icon}, {value}, {link}.\nUsed for SSR. Client-side can use slot=\"contact\" instead."
                 },
                 "getter": false,
                 "setter": false,
@@ -195,8 +273,7 @@ export class SallaContacts {
     }
     static get states() {
         return {
-            "contacts": {},
-            "iconsList": {}
+            "sdkContacts": {}
         };
     }
     static get elementRef() { return "host"; }

package/dist/collection/components/salla-contacts/salla-contacts.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/salla-datetime-picker/salla-datetime-picker.js

@@ -879,7 +879,7 @@ export class SallaDatetimePicker {
                 "mutable": false,
                 "complexType": {
                     "original": "LocaleKey",
-                    "resolved": "\"at\" | \"hr\" | \"th\" | \"tr\" | \"id\" | \"is\" | \"default\" | \"no\" | \"cy\" | \"es\" | \"mn\" | \"ms\" | \"ar\" | \"az\" | \"be\" | \"bg\" | \"bn\" | \"bs\" | \"ca\" | \"cat\" | \"ckb\" | \"cs\" | \"da\" | \"de\" | \"en\" | \"eo\" | \"et\" | \"fa\" | \"fi\" | \"fo\" | \"fr\" | \"gr\" | \"he\" | \"hi\" | \"hu\" | \"hy\" | \"it\" | \"ja\" | \"ka\" | \"ko\" | \"km\" | \"kz\" | \"lt\" | \"lv\" | \"mk\" | \"my\" | \"nl\" | \"nn\" | \"pa\" | \"pl\" | \"pt\" | \"ro\" | \"ru\" | \"si\" | \"sk\" | \"sl\" | \"sq\" | \"sr\" | \"sv\" | \"uk\" | \"vn\" | \"zh\" | \"uz\" | \"uz_latn\" | \"zh_tw\"",
+                    "resolved": "\"at\" | \"hr\" | \"th\" | \"tr\" | \"id\" | \"is\" | \"default\" | \"no\" | \"cy\" | \"es\" | \"mn\" | \"ms\" | \"ar\" | \"en\" | \"az\" | \"be\" | \"bg\" | \"bn\" | \"bs\" | \"ca\" | \"cat\" | \"ckb\" | \"cs\" | \"da\" | \"de\" | \"eo\" | \"et\" | \"fa\" | \"fi\" | \"fo\" | \"fr\" | \"gr\" | \"he\" | \"hi\" | \"hu\" | \"hy\" | \"it\" | \"ja\" | \"ka\" | \"ko\" | \"km\" | \"kz\" | \"lt\" | \"lv\" | \"mk\" | \"my\" | \"nl\" | \"nn\" | \"pa\" | \"pl\" | \"pt\" | \"ro\" | \"ru\" | \"si\" | \"sk\" | \"sl\" | \"sq\" | \"sr\" | \"sv\" | \"uk\" | \"vn\" | \"zh\" | \"uz\" | \"uz_latn\" | \"zh_tw\"",
                     "references": {
                         "LocaleKey": {
                             "location": "import",

package/dist/collection/components/salla-order-options-modal/salla-order-options-modal.js

@@ -391,18 +391,18 @@ export class SallaOrderOptionsModal {
         // 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