@salla.sa/twilight-components 2.14.380 → 2.14.381

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

@@ -6,6 +6,7 @@ import CameraIcon from "../../assets/svg/camera.svg";
 import { FormFieldTypes, } from "../salla-user-profile/interfaces";
 export class SallaCustomFields {
     constructor() {
+        /** Whether the fields can be edited by the user. */
         this.isEditable = true;
         this.fieldErrors = {};
         this.isSubmitting = false;
@@ -19,15 +20,18 @@ export class SallaCustomFields {
     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;
@@ -154,7 +158,7 @@ export class SallaCustomFields {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The list of custom fields to render. Can be a JSON string or an array of objects."
                 },
                 "getter": false,
                 "setter": false,
@@ -173,7 +177,7 @@ export class SallaCustomFields {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Whether the fields can be edited by the user."
                 },
                 "getter": false,
                 "setter": false,
@@ -193,7 +197,7 @@ export class SallaCustomFields {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The URL to send file uploads to."
                 },
                 "getter": false,
                 "setter": false,
@@ -217,7 +221,7 @@ export class SallaCustomFields {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when a field's value changes."
                 },
                 "complexType": {
                     "original": "{\n    fieldId: string | number;\n    value: unknown;\n    isValid: boolean;\n  }",
@@ -232,7 +236,7 @@ export class SallaCustomFields {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when a file is successfully uploaded or encounters an error."
                 },
                 "complexType": {
                     "original": "{\n    fieldId: string | number;\n    file: File;\n    isValid: boolean;\n  }",
@@ -270,7 +274,7 @@ export class SallaCustomFields {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Update the displayed fields programmatically.",
                     "tags": []
                 }
             },
@@ -287,7 +291,7 @@ export class SallaCustomFields {
                     "return": "Promise<{ [key: string]: unknown; }>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Gets the current values of all fields, formatted for submission.",
                     "tags": []
                 }
             },
@@ -304,7 +308,7 @@ export class SallaCustomFields {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Validates all required fields and updates the error state. Returns true if valid.",
                     "tags": []
                 }
             }

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

@@ -3,11 +3,15 @@
  */
 import { Host, h } from "@stencil/core";
 export class SallaHook {
+    /**
+     * 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
@@ -31,7 +35,7 @@ export class SallaHook {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The unique name to identify the hook position."
                 },
                 "getter": false,
                 "setter": false,
@@ -47,7 +51,7 @@ export class SallaHook {
                     "parameters": [{
                             "name": "element",
                             "type": "HTMLElement",
-                            "docs": ""
+                            "docs": "The element to inject."
                         }],
                     "references": {
                         "Promise": {
@@ -62,8 +66,11 @@ export class SallaHook {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Mounts a given HTML element into the hook position.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "element The element to inject."
+                        }]
                 }
             }
         };

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

@@ -6,26 +6,93 @@ import { h } from "@stencil/core";
  * @slot header - The top of the modal.
  * @slot footer - Replaces the bottom button.
  * @slot language - Replaces language label, has replaceable props `{name}`, `{code}`, `{country_code}`.
- * @slot currency - Replaces currency label, has replaceable props `{name}`, `{code}`, `{country_code}`.
+ * @slot currency - Replaces currency label, has replaceable props `{name}`, `{code}`, `{symbol}`, `{country_code}`.
  */
 export class SallaLocalizationModal {
     constructor() {
-        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)
-         */
-        this.language = salla.config.get('user.language_code');
-        /**
-         * Current currency (existing or newly selected)
+         * To show the trigger button or not
          */
-        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>
@@ -36,14 +103,25 @@ export class SallaLocalizationModal {
          * 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) {
@@ -63,13 +141,30 @@ export class SallaLocalizationModal {
     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;
@@ -85,50 +180,56 @@ export class SallaLocalizationModal {
         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
@@ -157,8 +258,7 @@ export class SallaLocalizationModal {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "defaultValue": "salla.config.get('user.language_code')"
+                "reflect": true
             },
             "currency": {
                 "type": "string",
@@ -177,14 +277,32 @@ export class SallaLocalizationModal {
                 },
                 "getter": false,
                 "setter": false,
+                "reflect": true
+            },
+            "showTrigger": {
+                "type": "boolean",
+                "attribute": "show-trigger",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "To show the trigger button or not"
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": true,
-                "defaultValue": "salla.config.get('user.currency_code')"
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "translationLoaded": {},
             "languages": {},
             "currencies": {},
             "hasError": {},

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

@@ -4,6 +4,7 @@
 import { Host, h } from "@stencil/core";
 export class SallaMultipleBundleProductCart {
     constructor() {
+        /** The list of sections belonging to a bundle product. */
         this.sections = [];
         this.itemNumber = '';
     }
@@ -29,7 +30,7 @@ export class SallaMultipleBundleProductCart {
         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,
@@ -72,7 +73,7 @@ export class SallaMultipleBundleProductCart {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The list of sections belonging to a bundle product."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -4,6 +4,7 @@
 import { Host, h, Fragment } from "@stencil/core";
 export class SallaMultipleBundleProductDetails {
     constructor() {
+        /** The list of sections belonging to a bundle product. */
         this.sections = [];
         // store selected product IDs per section (can be string or number)
         this.selectedProducts = {};
@@ -156,10 +157,10 @@ export class SallaMultipleBundleProductDetails {
         }
     }
     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' })));
     }
     static get is() { return "salla-multiple-bundle-product-details"; }
     static get originalStyleUrls() {
@@ -193,7 +194,7 @@ export class SallaMultipleBundleProductDetails {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The list of sections belonging to a bundle product."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -32,6 +32,7 @@ export class SallaMultipleBundleProductOptionsModal {
         this.validationErrors = [];
         this.hasUnsavedChanges = false;
     }
+    /** Opens the modal manually. */
     async open() {
         if (!this.modal) {
             requestAnimationFrame(() => this.open());
@@ -56,11 +57,13 @@ export class SallaMultipleBundleProductOptionsModal {
             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 };
@@ -455,7 +458,7 @@ export class SallaMultipleBundleProductOptionsModal {
         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)),
@@ -463,13 +466,13 @@ export class SallaMultipleBundleProductOptionsModal {
                 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')))))));
     }
@@ -507,7 +510,7 @@ export class SallaMultipleBundleProductOptionsModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when product options are successfully saved."
                 },
                 "complexType": {
                     "original": "{\n    productId: number;\n    selectedOptions: SelectedOption[];\n    sectionId?: string | number | null;\n    productIndex?: number | null;\n  }",
@@ -528,7 +531,7 @@ export class SallaMultipleBundleProductOptionsModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when a product is selected or modified via the modal."
                 },
                 "complexType": {
                     "original": "{\n    productId: number;\n    sectionId: string | number;\n    product?: BundleProduct;\n    fromModal?: boolean;\n  }",
@@ -558,7 +561,7 @@ export class SallaMultipleBundleProductOptionsModal {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Opens the modal manually.",
                     "tags": []
                 }
             },
@@ -575,7 +578,7 @@ export class SallaMultipleBundleProductOptionsModal {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Closes the modal manually.",
                     "tags": []
                 }
             },
@@ -592,7 +595,7 @@ export class SallaMultipleBundleProductOptionsModal {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Refreshes the internal options tracking state manually.",
                     "tags": []
                 }
             }