@salla.sa/twilight-components 2.14.380 → 2.14.382

package/dist/components/salla-accordion2.js

@@ -11,7 +11,9 @@ const SallaAccordion = /*@__PURE__*/ proxyCustomElement(class SallaAccordion ext
         this.__registerHost();
         /** Should the accordion be collapsible or not. Default is true. */
         this.collapsible = true;
+        /** Whether the accordion has a border. Default is false. */
         this.bordered = false;
+        /** The size of the accordion elements. */
         this.size = "md";
         /** Detect if accordion collapsed or not. */
         this.collapsed = true;
@@ -40,7 +42,7 @@ const SallaAccordion = /*@__PURE__*/ proxyCustomElement(class SallaAccordion ext
         }
     }
     render() {
-        return (h(Host, { key: 'ed8e4c0f24fa4462654e94fa46706e892c141351', 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: '1dbda01c073f3018a55ebcf5d8613a82a5dc6b27' })));
+        return (h(Host, { key: 'fb12197f13d8836304bfebb14400c79c8c4d31f0', 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: '460e8d7238bf9f014fe0bbb6c0da592c8cb3e15e' })));
     }
     get host() { return this; }
     static get style() { return sallaAccordionCss; }

package/dist/components/salla-advertisement.js

@@ -79,6 +79,10 @@ const SallaAdvertisement$1 = /*@__PURE__*/ proxyCustomElement(class SallaAdverti
     */
     componentWillLoad() {
         const getData = async () => {
+            // * Note: Do not show advertisements or load data in mobile app
+            const isMobileApp = salla.config.isMobileApp();
+            if (isMobileApp)
+                return [];
             const isPreview = salla.config.isDebug() || salla.helpers.isPreview();
             // Wait for salla to be ready
             await new Promise(resolve => salla.onReady(resolve));

package/dist/components/salla-app-install-alert.js

@@ -56,8 +56,14 @@ const SallaAppInstallAlert$1 = /*@__PURE__*/ proxyCustomElement(class SallaAppIn
             this.open = false;
         }, { once: true });
     }
+    shouldShowAlert() {
+        const isMobileApp = salla.config.isMobileApp();
+        if (isMobileApp)
+            return false;
+        return true;
+    }
     render() {
-        return this.data ? (h(Host, { class: `s-app-install-alert-wrapper ${this.open ? 'open' : ''} ${this.closing ? 'closing' : ''}`, position: this.data.position }, h("div", null, h("img", { src: this.data.icon, width: "58", height: "58", alt: `${salla.config.get('store.name')}` })), h("div", { class: "s-app-install-alert-content" }, h("h2", { class: "s-app-install-alert-title" }, this.data.title), h("p", { class: "s-app-install-alert-sub-title" }, this.data.sub_title, " ", " ", h("a", { href: this.ctaLink, target: "_blank", "aria-label": "download app", class: "s-app-install-alert-cta" }, salla.lang.getWithDefault('blocks.footer.download_app_now', 'حمله الآن')))), h("button", { class: "s-app-install-alert-cancel-button", "aria-label": "close alert", onClick: () => this.closeAlert() }, h("i", { class: "sicon-cancel" })))) : null;
+        return this.data && this.shouldShowAlert() ? (h(Host, { class: `s-app-install-alert-wrapper ${this.open ? 'open' : ''} ${this.closing ? 'closing' : ''}`, position: this.data.position }, h("div", null, h("img", { src: this.data.icon, width: "58", height: "58", alt: `${salla.config.get('store.name')}` })), h("div", { class: "s-app-install-alert-content" }, h("h2", { class: "s-app-install-alert-title" }, this.data.title), h("p", { class: "s-app-install-alert-sub-title" }, this.data.sub_title, " ", " ", h("a", { href: this.ctaLink, target: "_blank", "aria-label": "download app", class: "s-app-install-alert-cta" }, salla.lang.getWithDefault('blocks.footer.download_app_now', 'حمله الآن')))), h("button", { class: "s-app-install-alert-cancel-button", "aria-label": "close alert", onClick: () => this.closeAlert() }, h("i", { class: "sicon-cancel" })))) : null;
     }
     get host() { return this; }
     static get style() { return sallaAppInstallAlertCss; }

package/dist/components/salla-custom-fields.js

@@ -15,6 +15,7 @@ const SallaCustomFields$1 = /*@__PURE__*/ proxyCustomElement(class SallaCustomFi
         this.__registerHost();
         this.fieldChanged = createEvent(this, "fieldChanged", 7);
         this.fileUploaded = createEvent(this, "fileUploaded", 7);
+        /** Whether the fields can be edited by the user. */
         this.isEditable = true;
         this.fieldErrors = {};
         this.isSubmitting = false;
@@ -28,15 +29,18 @@ const SallaCustomFields$1 = /*@__PURE__*/ proxyCustomElement(class SallaCustomFi
     get saveButtonText() {
         return salla.lang.get("common.elements.save");
     }
+    /** Update the displayed fields programmatically. */
     async setFields(fields) {
         this.parsedFields = fields;
     }
+    /** Gets the current values of all fields, formatted for submission. */
     async getFieldValues() {
         return this.parsedFields?.reduce((values, field) => {
             values[`custom_fields[${field.id}]`] = field.value;
             return values;
         }, {}) || {};
     }
+    /** Validates all required fields and updates the error state. Returns true if valid. */
     async validateFields() {
         if (!this.parsedFields)
             return true;

package/dist/components/salla-hook.js

@@ -9,11 +9,15 @@ const SallaHook$1 = /*@__PURE__*/ proxyCustomElement(class SallaHook extends HTM
         this.__registerHost();
         this.__attachShadow();
     }
+    /**
+     * Mounts a given HTML element into the hook position.
+     * @param element The element to inject.
+     */
     async mount(element) {
         this.host.before(element);
     }
     render() {
-        return h(Host, { key: '61a0a169011899bd7c2bcc0e1ddd1376da071d1d' });
+        return h(Host, { key: 'a887790b6c3fa466e88b0b1c90fda502f3aca812' });
     }
     async componentDidLoad() {
         // Register this component for hooks system, already on it logic to run componentDidLoad trigger

package/dist/components/salla-localization-modal.js

@@ -12,22 +12,89 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoc
     constructor() {
         super();
         this.__registerHost();
-        this.translationLoaded = false;
+        this.languageNames = {
+            "ar": "العربية",
+            "en": "English",
+            "sq": "shqip",
+            "hy": "հայերէն",
+            "bg": "български",
+            "zh": "汉语",
+            "hr": "hrvatski",
+            "cs": "čeština",
+            "da": "dansk",
+            "nl": "dutch",
+            "et": "eesti keel",
+            "fi": "suomen kieli",
+            "fr": "Français",
+            "de": "Deutsch",
+            "el": "Ελληνικά",
+            "hi": "हिन्दी",
+            "hu": "magyar",
+            //we know it's `id` as ISO 639-1 but we are using `ind` as ISO 639-2 on our system as key to avoid conflicts with `id` attribute
+            "ind": "bahasa Indonesia",
+            "ga": "Gaeilge",
+            "it": "Italiano",
+            "ja": "日本語",
+            "ko": "한국어",
+            "lv": "latviešu",
+            "mt": "Maltese",
+            "fa": "فارسی",
+            "pl": "Polish",
+            "pt": "português",
+            "ro": "română",
+            "ru": "русский",
+            "sl": "slovenščina",
+            "es": "Español",
+            "sv": "svenska",
+            "tl": "Tagalog (Filipino)",
+            "tr": "Türkçe",
+            "uk": "украї́нська",
+            "ur": "اُردُو",
+            "ms": "Bahasa Malaysia",
+        };
+        this.currenciesList = {
+            SAR: { en: "Saudi Riyal", ar: "ريال سعودي", symbol: "ر.س" },
+            USD: { en: "US Dollar", ar: "دولار أمريكي", symbol: "$" },
+            EUR: { en: "Euro", ar: "يورو", symbol: "€" },
+            AED: { en: "UAE Dirham", ar: "درهم اماراتي", symbol: "د.إ" },
+            KWD: { en: "Kuwaiti Dinar", ar: "دينار كويتي", symbol: "د.ك" },
+            BHD: { en: "Bahraini Dinar", ar: "دينار بحريني", symbol: "د.ب" },
+            QAR: { en: "Qatari Riyal", ar: "ريال قطري", symbol: "ر.ق" },
+            OMR: { en: "Omani Rial", ar: "ريال عماني", symbol: "ر.ع" },
+            AUD: { en: "Australian Dollar", ar: "دولار استرالي", symbol: "$" },
+            CAD: { en: "Canadian Dollar", ar: "دولار كندي", symbol: "$" },
+            CNY: { en: "Renminbi", ar: "رنمينبي", symbol: "¥" },
+            EGP: { en: "Egyptian Pound", ar: "جنيه مصري", symbol: "ج.م" },
+            GBP: { en: "Pound Sterling", ar: "جنيه استرليني", symbol: "£" },
+            IDR: { en: "Indonesian Rupiah", ar: "روبية إندونيسية", symbol: "Rp" },
+            INR: { en: "Indian Rupee", ar: "روبية هندية", symbol: "₹" },
+            JPY: { en: "Japanese Yen", ar: "ين ياباني", symbol: "¥" },
+            MYR: { en: "Malaysian Ringgit", ar: "رينغيت ماليزي", symbol: "RM" },
+            PKR: { en: "Pakistani Rupee", ar: "روبية باكستانية", symbol: "Rs." },
+            SEK: { en: "Swedish Krona", ar: "كرونة سويدية", symbol: "kr" },
+            SGD: { en: "Singapore Dollar", ar: "دولار سنغافوري", symbol: "$" },
+            TRY: { en: "Turkish Lira", ar: "ليرة تركية", symbol: "₺" },
+            IQD: { en: "Iraqi Dinar", ar: "دينار عراقي", symbol: "د.ع" },
+            LBP: { en: "Lebanese Pound", ar: "ليرة لبنانية", symbol: "ل.ل" },
+            MRO: { en: "Mauritanian Ouguiya", ar: "أوقية موريتانية", symbol: "UM" },
+            SDG: { en: "Sudanese Pound", ar: "جنيه سوداني", symbol: "SDG" },
+            SYP: { en: "Syrian Pound", ar: "ليرة سورية", symbol: "ل.س" },
+            TND: { en: "Tunisian Dinar", ar: "دينار تونسي", symbol: "د.ت" },
+            JOD: { en: "Jordanian Dinar", ar: "دينار أردني", symbol: "JOD" },
+            DZD: { en: "Algerian Dinar", ar: "دينار جزائري", symbol: "دج" },
+            MAD: { en: "Moroccan Dirham", ar: "درهم مغربي", symbol: "د.م." },
+            LYD: { en: "Libyan Dinar", ar: "دينار ليبي", symbol: "LD" },
+            YER: { en: "Yemeni Riyal", ar: "ريال يمني", symbol: "ر.ي" }
+        };
+        //here we will used the currency code instead of the symbol when current language is not arabic
+        this.arabicCurrencies = ["SAR", "AED", "KWD", "BHD", "QAR", "OMR", "EGP", "IQD", "LBP", "SYP", "TND", "DZD", "MAD", "YER"];
         this.languages = [];
         this.currencies = [];
         this.hasError = false;
         /**
-         * Current language (existing or newly selected)
+         * To show the trigger button or not
          */
-        this.language = salla.config.get('user.language_code');
-        /**
-         * Current currency (existing or newly selected)
-         */
-        this.currency = salla.config.get('user.currency_code');
-        salla.event.on('localization::open', () => this.open());
-        salla.lang.onLoaded(() => {
-            this.translationLoaded = true;
-        });
+        this.showTrigger = false;
         /**
          * letting developer to insert his own slot like:
          * <salla-localization>
@@ -38,14 +105,25 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoc
          * we made a workaround to pass language & currency attributes, then replace names in rendering
          */
         this.languageSlot = this.host.querySelector('[slot="language"]')?.innerHTML || '<label class="s-localization-modal-label" for="lang-{code}"><span>{name}</span></label>';
-        this.currencySlot = this.host.querySelector('[slot="currency"]')?.innerHTML || '<label class="s-localization-modal-label" for="currency-{code}"><span>{name}</span><small class="s-localization-modal-currency">{code}</small></label>';
+        this.currencySlot = this.host.querySelector('[slot="currency"]')?.innerHTML || '<label class="s-localization-modal-label" for="currency-{code}"><span>{name}</span><small class="s-localization-modal-currency">{symbol}</small></label>';
+    }
+    async componentWillLoad() {
+        await Salla.onReady();
+        await Salla.lang.onLoaded();
+        Salla.event.on('localization::open', () => this.open());
+        if (!this.language) {
+            this.language = Salla.config.get('user.language_code');
+        }
+        if (!this.currency) {
+            this.currency = Salla.config.get('user.currency_code');
+        }
     }
     /**
      * open the component
      */
     async open() {
         this.modal.open();
-        return await salla.api.withoutNotifier(() => this.getLanguages())
+        return await Salla.api.withoutNotifier(() => this.getLanguages())
             .then(() => this.getCurrencies())
             .then(() => {
             if (this.languages.length < 2 && this.currencies.length < 2) {
@@ -65,13 +143,30 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoc
     async close() {
         return this.modal.close();
     }
+    getCurrency(currencyCode) {
+        return this.currenciesList[currencyCode || this.currency] || { en: "Saudi Riyal", ar: "ريال سعودي", symbol: "ر.س" };
+    }
+    getLanguageName() {
+        return this.languageNames[this.language] || this.language || '';
+    }
+    getCurrencySymbol(currencyCode) {
+        currencyCode = currencyCode || this.currency;
+        if (currencyCode === 'SAR') {
+            return '<i class="sicon-sar"></i>';
+        }
+        if (this.language === 'ar' || !this.arabicCurrencies.includes(currencyCode)) {
+            return this.getCurrency(currencyCode).symbol;
+        }
+        return currencyCode;
+    }
+    getCurrencyName(currencyCode) {
+        return this.language === 'ar' ? this.getCurrency(currencyCode).ar : this.getCurrency(currencyCode).en;
+    }
     async getLanguages() {
-        this.language = this.language || salla.config.get('user.language_code');
-        return this.languages.length > 1 ? null : await salla.config.languages().then(data => this.languages = data);
+        return this.languages.length > 1 ? null : await Salla.config.languages().then(data => this.languages = data);
     }
     async getCurrencies() {
-        this.currency = this.currency || salla.config.get('user.currency_code');
-        return this.currencies.length > 1 ? null : await salla.config.currencies().then(data => this.currencies = Object.values(data || {}));
+        return this.currencies.length > 1 ? null : await Salla.config.currencies().then(data => this.currencies = Object.values(data || {}));
     }
     onChangeCurrency(event) {
         this.currency = event.target.value;
@@ -87,50 +182,56 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoc
         this.btn.load()
             .then(() => {
             if (!this.currency) {
-                salla.log('There is no currency!');
+                Salla.log('There is no currency!');
                 return;
             }
-            if (this.currency === salla.config.get('user.currency_code', 'SAR')) {
+            if (this.currency === Salla.config.get('user.currency_code', 'SAR')) {
                 return;
             }
             url = window.location.href;
-            return salla.currency.api.change(this.currency);
+            return Salla.currency.api.change(this.currency);
         })
             .then(() => {
-            if (this.language !== salla.config.get('user.language_code', 'ar')) {
-                url = salla.helpers.addParamToUrl('lang', this.language);
+            if (this.language !== Salla.config.get('user.language_code', 'ar')) {
+                url = Salla.helpers.addParamToUrl('lang', this.language);
             }
         })
             .then(() => {
-            salla.cookie.set('s-lang', this.language);
-            salla.cookie.set('s-curr', this.currency);
+            Salla.cookie.set('s-lang', this.language);
+            Salla.cookie.set('s-curr', this.currency);
         })
             .then(() => this.btn.stop())
             .then(() => this.close())
             .then(() => {
             if (url) {
-                window.location.href = url.replace(`/${salla.config.get('user.language_code')}/`, `/${this.language}/`);
+                window.location.href = url.replace(`/${Salla.config.get('user.language_code')}/`, `/${this.language}/`);
             }
         });
     }
     render() {
-        return (h("salla-modal", { key: 'd3a45aa4cc807e1ba549514b59ada59a2397bff0', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: '1794f7c9e31a1a1b622363fa21905a73a8bbdb68', slot: 'loading' }, h("div", { key: 'd55e1b7fb36f84616dde3f19955c7e5013838080', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: '7a25a0f055f401a8a63030df1ab930957668c1df', width: '25%', height: '15px' }), h("div", { key: '8e9c1aba813a5efa58dc4132a504d1612343cce6', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: 'b3ef9e80a8dec053e9c0e6d10d1145d4057c98ad', width: '25%', height: '15px' }), h("div", { key: '1d062e516cc37994e34c0aa77634bc7a2311c4ff', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '9f7a16b0f3881882fc257ed7e1290380dea38a4c', height: '40px', width: '100%' }))), !!this.hasError ?
-            h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage)) :
-            h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
-                h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, salla.lang.get('common.titles.language')), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
-                    this.languages.map(lang => h("div", { class: "s-localization-modal-item" }, h("input", { class: "s-localization-modal-input", type: "radio", checked: this.language == lang.iso_code, onChange: () => this.language = lang.iso_code, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), h("div", { class: "s-localization-modal-label-slot", id: "language-slot", innerHTML: this.languageSlot
-                            .replace(/\{name\}/g, lang.name)
-                            .replace(/\{code\}/g, lang.code)
-                            .replace(/\{country_code\}/g, lang.country_code) }))) :
-                    h("select", { class: "s-localization-modal-select", name: "language", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
-                : '', this.currencies.length > 1 ?
-                h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, salla.lang.get('common.titles.currency')), h("div", { class: "s-localization-modal-section-inner" }, this.currencies.length < 6 ?
-                    this.currencies.map(currency => h("div", { class: "s-localization-modal-item" }, h("input", { class: "s-localization-modal-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, id: 'currency-' + currency.code, value: currency.code }), h("div", { class: "s-localization-modal-label-slot", id: "currency-slot", innerHTML: this.currencySlot
-                            .replace(/\{name\}/g, currency.name)
-                            .replace(/\{code\}/g, currency.code)
-                            .replace(/\{country_code\}/g, currency.country_code) }))) :
-                    h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
-                : '', h("salla-button", { width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))));
+        return [
+            this.showTrigger
+                ? h("button", { type: "button", onClick: () => this.open(), class: "s-localization-modal-trigger-btn" }, h("span", null, this.getLanguageName()), h("span", { class: "s-localization-modal-trigger-separator" }, "|"), " ", h("span", { innerHTML: this.getCurrencySymbol() }))
+                : '',
+            h("salla-modal", { key: 'ae9553ab14e30b7e9b6466d1e959e469e544ca5b', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: '84bf38810a3d1c99ee084951ef596cc33a18e4f7', slot: 'loading' }, h("div", { key: '5e808b2a7774bc1f1e1fe25cb880c45a3b97f1aa', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: 'c0000d5f4f5fb663f059822fe1a4f24a78a9dd65', width: '25%', height: '15px' }), h("div", { key: '45164d658a0ee5e8825422af35605bfd83e383ff', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '1e63980f25677892f731e6ad30eda08b8a3852e0', width: '25%', height: '15px' }), h("div", { key: 'b1263061b94885e99d540f90054244fb41fd0a68', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '6dfbe5d71475640cd41dfe3d01e9277f2b2b80c5', height: '40px', width: '100%' }))), !!this.hasError ?
+                h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage)) :
+                h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
+                    h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, Salla.lang.get('common.titles.language')), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
+                        this.languages.map(lang => h("div", { class: "s-localization-modal-item" }, h("input", { class: "s-localization-modal-input", type: "radio", checked: this.language == lang.iso_code, onChange: () => this.language = lang.iso_code, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), h("div", { class: "s-localization-modal-label-slot", id: "language-slot", innerHTML: this.languageSlot
+                                .replace(/\{name\}/g, lang.name)
+                                .replace(/\{code\}/g, lang.code)
+                                .replace(/\{country_code\}/g, lang.country_code) }))) :
+                        h("select", { class: "s-localization-modal-select", name: "language", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
+                    : '', this.currencies.length > 1 ?
+                    h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, Salla.lang.get('common.titles.currency')), h("div", { class: "s-localization-modal-section-inner" }, this.currencies.length < 6 ?
+                        this.currencies.map(currency => h("div", { class: "s-localization-modal-item" }, h("input", { class: "s-localization-modal-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, id: 'currency-' + currency.code, value: currency.code }), h("div", { class: "s-localization-modal-label-slot", id: "currency-slot", innerHTML: this.currencySlot
+                                .replace(/\{name\}/g, this.getCurrencyName(currency.code))
+                                .replace(/\{code\}/g, currency.code)
+                                .replace(/\{symbol\}/g, this.getCurrencySymbol(currency.code))
+                                .replace(/\{country_code\}/g, currency.country_code) }))) :
+                        h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
+                    : '', h("salla-button", { width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, Salla.lang.get('common.elements.ok'))))
+        ];
     }
     /**
      * to reduce dom levels we will move slot data into the parent dom
@@ -143,7 +244,7 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoc
 }, [0, "salla-localization-modal", {
         "language": [1537],
         "currency": [1537],
-        "translationLoaded": [32],
+        "showTrigger": [1540, "show-trigger"],
         "languages": [32],
         "currencies": [32],
         "hasError": [32],

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

@@ -23,6 +23,7 @@ const SallaMultipleBundleProductCart = /*@__PURE__*/ proxyCustomElement(class Sa
     constructor() {
         super();
         this.__registerHost();
+        /** The list of sections belonging to a bundle product. */
         this.sections = [];
         this.itemNumber = '';
     }
@@ -48,7 +49,7 @@ const SallaMultipleBundleProductCart = /*@__PURE__*/ proxyCustomElement(class Sa
         return (h("div", { slot: "html", class: "s-multiple-bundle-product-cart-header-wrapper" }, h("div", { class: `s-multiple-bundle-product-cart-header ${hasOptions ? '' : 's-multiple-bundle-product-cart-header-no-options'}` }, h("div", { class: "s-multiple-bundle-product-cart-header-content" }, h("a", { href: product?.url, class: "s-multiple-bundle-product-cart-header-image-wrapper" }, h("img", { src: product?.image?.url, alt: product?.image?.alt || product?.name, class: "s-multiple-bundle-product-cart-header-image" })), h("div", { class: "s-multiple-bundle-product-cart-header-content-details" }, h("h2", { class: "s-multiple-bundle-product-cart-header-content-details-title" }, h("a", { href: product?.url, class: "s-multiple-bundle-product-cart-header-content-details-title-link" }, product?.name)), h("div", { class: "s-multiple-bundle-product-cart-header-content-details-price" }, h("span", { class: "s-multiple-bundle-product-cart-header-content-details-price-regular" }, h("span", { innerHTML: product?.price ? salla.money(product?.price) : '' })), product?.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-cart-header-content-details-price-sale" }, h("span", { innerHTML: salla.money(product?.sale_price) })))), product?.quantity_in_group > 0 && product?.quantity !== 0 && (h("p", { class: "s-multiple-bundle-product-cart-header-content-details-quantity" }, h("span", null, salla.lang.get('pages.products.number_of_pieces')), h("span", null, product?.quantity_in_group))))), !hasOptions && (h("div", { class: "s-multiple-bundle-product-cart-header-remove-button" }, this.renderRemoveButton(sectionId, product, false))))));
     }
     render() {
-        return (h(Host, { key: '7f3424f8320337bad8af0fbb6aa5c72045e97b9c', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: '6b4150c73d5296043f216f3f48f9289e2ce10aa7', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, sectionIndex) => {
+        return (h(Host, { key: '92c0fba176ee0d769f866a0ed50a1b27d43e9717', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: '3184473ec9399f29fa225287d6adeea109b097ec', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, sectionIndex) => {
             return section.products.map(product => {
                 const bundleContext = {
                     sectionId: section.id,

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

@@ -27,6 +27,7 @@ const SallaMultipleBundleProductDetails = /*@__PURE__*/ proxyCustomElement(class
     constructor() {
         super();
         this.__registerHost();
+        /** The list of sections belonging to a bundle product. */
         this.sections = [];
         // store selected product IDs per section (can be string or number)
         this.selectedProducts = {};
@@ -179,10 +180,10 @@ const SallaMultipleBundleProductDetails = /*@__PURE__*/ proxyCustomElement(class
         }
     }
     render() {
-        return (h(Host, { key: 'c6e5ac7da584c20126ed35cfd971085a95a89cbe', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: 'f4047046f55c4aa5b8bab84983d16a7326fae8b0', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, index) => {
+        return (h(Host, { key: '9d632fa75f2dd987a03a8d8c417e520503b4b71d', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: '05517aff0eae9141a8f1f7fa0d72044fbbd46af9', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, index) => {
             const selectedCount = this.selectedProducts[section.id]?.size || 0;
             return (h("salla-accordion", { key: section.id, collapsed: index === 0 ? false : true }, h("salla-accordion-head", null, this.renderAccordionHeader(section, selectedCount)), h("salla-accordion-body", null, h("salla-multiple-bundle-product-slider", { section: section, sectionIndex: index, selectedProducts: this.selectedProducts, onProductSelected: this.handleBundleSliderProductSelected, onProductOptionsSelected: this.handleBundleSliderProductOptionsSelected }))));
-        })), h("salla-multiple-bundle-product-options-modal", { key: '8dc76d11e8876456b11b987c512cdaaca37eb562' })));
+        })), h("salla-multiple-bundle-product-options-modal", { key: 'ac01f882d3e8268b41032857816ba9481918f484' })));
     }
     get host() { return this; }
     static get style() { return sallaMultipleBundleProductDetailsCss; }

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

@@ -53,6 +53,7 @@ const SallaMultipleBundleProductOptionsModal = /*@__PURE__*/ proxyCustomElement(
         this.validationErrors = [];
         this.hasUnsavedChanges = false;
     }
+    /** Opens the modal manually. */
     async open() {
         if (!this.modal) {
             requestAnimationFrame(() => this.open());
@@ -77,11 +78,13 @@ const SallaMultipleBundleProductOptionsModal = /*@__PURE__*/ proxyCustomElement(
             this.isLoading = false;
         }, 300);
     }
+    /** Closes the modal manually. */
     async close() {
         if (this.modal) {
             this.modal.close();
         }
     }
+    /** Refreshes the internal options tracking state manually. */
     async refreshOptionsState() {
         // Force re-render by updating the component state
         this.selectedOptions = { ...this.selectedOptions };
@@ -476,7 +479,7 @@ const SallaMultipleBundleProductOptionsModal = /*@__PURE__*/ proxyCustomElement(
         const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
         const resetToken = this.optionsResetTokens[cacheKey] || 0;
         const isDisabled = this.isLoading || optionsWithSelectedState.some(opt => opt.details.some(d => d.is_selected && d.is_out === true));
-        return (h(Host, { key: 'd5a4e884d29cd964b27042ca0d0c664cbf6bc511' }, h("salla-modal", { key: '674c32ce9a987aac09d192c10692947c16464072', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: 'ab3a01faa218da40362c75f25d051938db784e35', slot: "loading" }, h("salla-skeleton", { key: '25c625ef2090e6cdb556e494b29670091ef1fa9e', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: '1d1962bba5311141a83dadd51536b7fb7bac2b70', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
+        return (h(Host, { key: '357005ce9302183eeeec3238ebde74b99c5f7d88' }, h("salla-modal", { key: '95e4f37061229e8359a269b031942d507a43ea25', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: 'b1525824f938c5af85a9ca043d2acf86e8773e6a', slot: "loading" }, h("salla-skeleton", { key: '7e71698646e7ec119afbed2fca9dab79c4fe2991', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: 'cd9042d00b0a237afd8dfe7ad4ed7032e298eb39', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
                 centeredSlides: true,
                 centeredSlidesBounds: true,
                 slidesPerView: Math.min(5, Math.max(1, this.product?.images.length)),
@@ -484,13 +487,13 @@ const SallaMultipleBundleProductOptionsModal = /*@__PURE__*/ proxyCustomElement(
                 watchSlidesProgress: true,
                 direction: 'vertical',
                 spaceBetween: 10,
-            } }, h("div", { key: 'e6ca00bd18b6c0a911c00dad57e0ac4fd5f0a769', slot: "items" }, this.product?.images &&
+            } }, h("div", { key: '81773392ee6167f0daf780637e15bef9b7b2f2c7', slot: "items" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, class: "swiper-slide" }, h("img", { src: image.url, alt: image.alt || `${this.product?.name} - Image ${index + 1}`, loading: "lazy", onError: e => {
                     e.target.style.display = 'none';
-                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: '08481d15b20bb0b522a619e0d223019ff9ee76ac', slot: "thumbs" }, this.product?.images &&
+                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: '2942ab32e0e28e6213b2a1d177e36c84136beaef', slot: "thumbs" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, "data-caption": `${this.product?.name} - Image ${index + 1}` }, h("img", { src: image.url, loading: "eager", class: "s-multiple-bundle-product-options-modal-slider-thumb", title: `${this.product?.name} - ${index + 1}`, alt: image.alt || `${this.product?.name} - ${index + 1}`, onError: e => {
                     e.target.style.display = 'none';
-                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${cacheKey}-reset-${resetToken}`, "product-id": productId, "unique-key": `${cacheKey}-reset-${resetToken}` }), h("div", { key: '8aa9b8173e758821960f37093555227024b3190f', slot: "footer" }, h("div", { key: '7324d3b90689871d779ae0a95a8a4ce4e5c18fe7', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: '2205ab886613aaa5426f117efb56b7e1ae103049', onClick: e => this.onSave(e), loading: this.isLoading, disabled: isDisabled }, this.isLoading
+                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${cacheKey}-reset-${resetToken}`, "product-id": productId, "unique-key": `${cacheKey}-reset-${resetToken}` }), h("div", { key: 'e3658d39d7462e1ba8c2099625d9a659541f6b2a', slot: "footer" }, h("div", { key: '8e03e9230c55b9ac6143e37629946e66daf47835', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: 'feca5790f828f7b29de3cba4e3a54d772a7a94c5', onClick: e => this.onSave(e), loading: this.isLoading, disabled: isDisabled }, this.isLoading
             ? salla.lang.get('common.elements.saving')
             : salla.lang.get('common.elements.save')))))));
     }

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

@@ -13,6 +13,7 @@ const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class
         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) => {
@@ -93,7 +94,7 @@ const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class
         return `bundle[${sectionId}][${productIndex}][id]`;
     }
     render() {
-        return (h(Host, { key: '07af0a15e38a4c00450bf132a7f91c647dc7ba04' }, h("salla-slider", { key: '6a34d8659c90d6ed485149f96ad7c706122f4949', 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: '2aef73459325f4be492791d045b67520d210ddf7', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
+        return (h(Host, { key: '336a3bcf504a178ee207b40b3b7fac5d26e00f91' }, h("salla-slider", { key: '004d1c3f644bfd015efe2ffc21a78e912c5d0647', 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: 'fda4544764b9bf2eb95d408179c1abc252f50243', 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

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

@@ -77,7 +77,7 @@ const SallaMultipleBundleProduct$1 = /*@__PURE__*/ proxyCustomElement(class Sall
         this.parseProducts(this.bundleSections);
     }
     render() {
-        return (h(Host, { key: '05c5e7d3b7d18f23e66f3d95a04f16ab266e99a1', class: "s-multiple-bundle-product-wrapper" }, this.isCartPage() ? this.renderCartPage() : this.renderDetailsPage()));
+        return (h(Host, { key: '2a4510d1ccd3dc840d25a288cb0788a7dd23672c', class: "s-multiple-bundle-product-wrapper" }, this.isCartPage() ? this.renderCartPage() : this.renderDetailsPage()));
     }
     static get watchers() { return {
         "bundleSections": ["parseProducts"]

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

@@ -47,7 +47,7 @@ const SallaOrderDetails$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderDet
         ];
     }
     render() {
-        return h(Host, { key: '7cfbdb28ff84c96aadda4992eb99ae54cd211937', class: "s-order-details-wrapper" }, this.renderOrderDetailsContent());
+        return h(Host, { key: 'a32d03172c884c8431e592b35b3f6560e3055555', class: "s-order-details-wrapper" }, this.renderOrderDetailsContent());
     }
     static get watchers() { return {
         "orderDetails": ["parseOrderDetailsData"]

package/dist/components/salla-rating-modal.js

@@ -333,8 +333,10 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         }
         data.order_id = this.orderId;
         data.type = this.currentTab.dataset.type;
-        this.submitted.push(this.currentIndex);
-        return salla.rating.api[this.currentTab.dataset.type](data);
+        return salla.rating.api[this.currentTab.dataset.type](data).then((res) => {
+            this.submitted.push(this.currentIndex);
+            return res;
+        });
     }
     showThankYou() {
         let seconds = 10;

package/dist/components/salla-review-card2.js

@@ -172,7 +172,7 @@ const SallaReviewCard = /*@__PURE__*/ proxyCustomElement(class SallaReviewCard e
         return (h("a", { href: this.review?.product?.url, class: "s-review-card-product-container" }, h("img", { alt: product.image?.alt || "Product", src: product.image?.url, class: "s-review-card-product-image", width: 60, height: 60, loading: "lazy", decoding: "async", draggable: false }), h("div", { class: "s-review-card-product-details" }, h("p", { class: "s-review-card-product-details-name" }, product.name), this.showPurchaseCount ? h("p", { class: "s-review-card-product-details-purchase-count" }, h("span", { innerHTML: IconFire2 }), this.purchasedCount) : null)));
     }
     render() {
-        return h("div", { key: 'dc04f5504270de8eec6f4f20930b5ad8b19bfa1e', class: "s-review-card-container" }, this.renderSlider(), this.renderSingleImage(), renderDivider(), h("div", { key: 'f2c82854952afa8f1c32ca3cdc9548aa04d4920a', class: "s-review-card-content" }, this.renderHeader(), h("p", { key: '555f4e598c753d38736642e9a4c8913035552159', class: "s-review-card-review-content", innerHTML: this.review?.content }), renderDivider(), this.renderProductInfo()));
+        return h("div", { key: '48e1eb2b71e5ee6e66def2aac42e9b6255935a17', class: "s-review-card-container" }, this.renderSlider(), this.renderSingleImage(), renderDivider(), h("div", { key: '0b24ea13f1f31224fff7e73d5db6c428adef0bd9', class: "s-review-card-content" }, this.renderHeader(), h("p", { key: '44501e61b5eed711820bece91053534a2baacbde', class: "s-review-card-review-content", innerHTML: this.review?.content }), renderDivider(), this.renderProductInfo()));
     }
     get el() { return this; }
     static get style() { return sallaReviewCardCss; }

package/dist/components/salla-scopes.js

@@ -176,6 +176,10 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class SallaScopees extends
     }
     async componentDidLoad() {
         await Salla.hooks.registerComponent('salla-scopes', this);
+        // * Note: Do not auto open scopes modal in mobile app
+        const isMobileApp = salla.config.isMobileApp();
+        if (isMobileApp)
+            return;
         if (!this.isOpenedBefore && this.selection == 'mandatory') {
             this.open();
         }

package/dist/components/salla-user-menu.js

@@ -94,9 +94,9 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
          */
         this.relativeDropdown = false;
         /**
-         * To auto mount the login modal or not
+         * To show the trigger button or not
          */
-        this.autoMount = false;
+        this.showTrigger = false;
         this.onClickOutside = () => {
             this.opened = false;
         };
@@ -181,7 +181,7 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
         });
     }
     autoMountLoginModal() {
-        if (!this.autoMount) {
+        if (!this.showTrigger) {
             return;
         }
         if (document.querySelector('salla-login-modal')) {
@@ -287,7 +287,7 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
         "avatarOnly": [516, "avatar-only"],
         "showHeader": [516, "show-header"],
         "relativeDropdown": [516, "relative-dropdown"],
-        "autoMount": [516, "auto-mount"],
+        "showTrigger": [1540, "show-trigger"],
         "accountLoading": [32],
         "opened": [32],
         "notifications": [32],

package/dist/esm/{filepond-BgLkbAlS.js → filepond-R6QOZ4Ng.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-eEimxoFN.js';
+import { d as getDefaultExportFromCjs } from './index-B-fHbvwg.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-poster-s4m5zTQ5.js → filepond-plugin-file-poster-CgZsOj29.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-eEimxoFN.js';
+import { d as getDefaultExportFromCjs } from './index-B-fHbvwg.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-size-EfVTIVeK.js → filepond-plugin-file-validate-size-CYlCC1qn.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-eEimxoFN.js';
+import { d as getDefaultExportFromCjs } from './index-B-fHbvwg.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {