@salla.sa/twilight-components 2.14.596 → 2.14.598

package/dist/collection/Helpers/money-text.js

@@ -0,0 +1,37 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const escapeHtml = (value) => String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+/** Riyal icon swap, the same rule `salla.money()` applies when the store enables `use_sar_symbol`. */
+const withSarIcon = (html) => salla?.config?.get?.('store.settings.use_sar_symbol') ? html.replace(/SAR|ر\.س\.?/g, '<i class=sicon-sar></i>') : html;
+/**
+ * Money in a given currency as HTML, without ever borrowing another currency's symbol.
+ * `salla.money()` resolves currencies from the page config, which under Multimarket only holds the
+ * selected market's currencies, and silently falls back to them — so an order placed in SAR (or KWD)
+ * would show the current market's symbol. Known currencies keep `salla.money()`'s store formatting;
+ * unknown ones use the ISO symbol from `Intl`, separated by a non-breaking space.
+ */
+export function moneyHtml(amount, currency) {
+    // Only bypass salla.money when the page's currency list is known and lacks this code.
+    const currencies = salla?.config?.get?.('currencies');
+    if (!currency || !currencies || typeof currencies !== 'object' || currencies[currency]) {
+        return salla.money({ amount, currency });
+    }
+    let symbol = currency;
+    try {
+        symbol = new Intl.NumberFormat(salla?.lang?.locale || 'ar', { style: 'currency', currency, currencyDisplay: 'narrowSymbol' })
+            .formatToParts(0)
+            .find(part => part.type === 'currency')?.value || currency;
+    }
+    catch {
+        // unknown ISO code: show the code itself
+    }
+    return withSarIcon(`${escapeHtml(salla.helpers.number(amount))} ${escapeHtml(symbol)}`);
+}
+/**
+ * Server-formatted money text (twig `|money`) as safe HTML: escaped, then the riyal icon swap.
+ * Kept for payloads that still send formatted strings.
+ */
+export function moneyTextHtml(text) {
+    return withSarIcon(escapeHtml(text));
+}

package/dist/collection/Helpers/translate.js

@@ -14,3 +14,39 @@ export function translate(key, replacements, fallback) {
     const value = salla.lang.get(key, replacements);
     return !value || value === key ? fallback : value;
 }
+/**
+ * The value stored for `key` in one locale bucket of `salla.lang.messages` (e.g. `'en.trans'`).
+ * Read the bucket directly: `salla.lang.get()` falls back to English, so it can't tell which locale is missing.
+ */
+function getLocaleTranslation(locale, key) {
+    return key.split('.').reduce((node, part) => node?.[part], salla.lang.messages?.[locale]);
+}
+/**
+ * Register bundled ar/en defaults only where a locale has no translation for the key yet.
+ *
+ * `salla.lang.addBulk()` overwrites, and a `salla.lang.subscribe()` callback runs again on every
+ * `salla.lang.setMessages()`, so adding unconditionally would replace the store's own text for these keys.
+ */
+export function addMissingTranslations(defaults) {
+    const missing = Object.entries(defaults).reduce((acc, [key, translations]) => {
+        Object.entries(translations).forEach(([locale, value]) => {
+            if (getLocaleTranslation(`${locale}.trans`, key) === undefined) {
+                (acc[key] = acc[key] || {})[locale] = value;
+            }
+        });
+        return acc;
+    }, {});
+    if (Object.keys(missing).length) {
+        salla.lang.addBulk(missing);
+    }
+}
+/**
+ * Set a bundled default in one locale bucket of `salla.lang.messages` (e.g. `'en.trans'`), unless that key
+ * already has a value there. Same reason as {@link addMissingTranslations}: `setNested()` overwrites.
+ */
+export function setTranslationDefault(locale, key, value) {
+    const messages = salla.lang.messages?.[locale];
+    if (messages && getLocaleTranslation(locale, key) === undefined) {
+        salla.helpers.setNested(messages, key, value);
+    }
+}

package/dist/collection/components/salla-add-product-button/salla-add-product-button.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Host, h } from "@stencil/core";
+import { Host, h, forceUpdate } from "@stencil/core";
 import Cart from "../../assets/svg/cart.svg";
 // import SallaIcon from '../../assets/svg/salla.svg';
 import WalletIcon from "../../assets/svg/full-wallet.svg";
@@ -48,8 +48,12 @@ export class SallaAddProductButton {
             this.isDesktopViewport = e.matches;
             this.btn?.setText((e.matches && !!this.passedLabel) ? this.passedLabel : this.getLabel());
         };
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.buyNowText = salla.lang.get('pages.products.buy_now');
+            // re-render so componentDidRender() re-applies the button label
+            forceUpdate(this);
         });
     }
     /**
@@ -377,6 +381,7 @@ export class SallaAddProductButton {
         salla.lang.onLoaded(() => this.btn?.setText(this.getLabel()));
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         this.viewportMediaQuery?.removeEventListener('change', this.onViewportChange);
         salla.product?.event?.offPriceUpdated?.(this.onBuyNowPriceUpdated);
     }

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

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import informationIcon from "../../assets/svg/information-line.svg";
 export class SallaAlert {
     constructor() {
-        /** Variant theme */
+        /** The visual style/theme of the alert. Can be 'info', 'success', 'warning', or 'error'. Default is 'info'. */
         this.variant = 'info';
     }
     renderIcon() {
@@ -24,7 +24,7 @@ export class SallaAlert {
         }
     }
     render() {
-        return (h(Host, { key: '053085e619a62bc641cf05e5fab4c3d601560d4b', class: `s-alert-wrapper s-alert-${this.variant}` }, h("span", { key: '8c9b20d9382b0e9eaec53b769c98c73df01043b6', class: "s-alert-icon" }, this.renderIcon()), h("span", { key: '0ab4176e253bfe191c4115c6d4bcdf815895e746', class: "s-alert-text" }, this.message, h("slot", { key: 'd4f428d1d47ddf977d0363c0476e7190ef680857' }))));
+        return (h(Host, { key: 'c1a1e9575ed9aab90960ad3a54ada18d8e3ee240', class: `s-alert-wrapper s-alert-${this.variant}` }, h("span", { key: '7fb08789ad8355cc4bd441a5869e95d2337685a5', class: "s-alert-icon" }, this.renderIcon()), h("span", { key: 'ed3c4fcb5450f21caedeeca28a9a177b151333ec', class: "s-alert-text" }, this.message, h("slot", { key: '6818451171f85fd6ad63f07c69871082d3fcba4e' }))));
     }
     static get is() { return "salla-alert"; }
     static get originalStyleUrls() {
@@ -52,7 +52,7 @@ export class SallaAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Message text"
+                    "text": "The alert message text to display."
                 },
                 "getter": false,
                 "setter": false,
@@ -71,7 +71,7 @@ export class SallaAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variant theme"
+                    "text": "The visual style/theme of the alert. Can be 'info', 'success', 'warning', or 'error'. Default is 'info'."
                 },
                 "getter": false,
                 "setter": false,
@@ -91,7 +91,7 @@ export class SallaAlert {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Icon type (defaults to variant)"
+                    "text": "The icon type to display. Defaults to the variant type. Set to 'none' to hide the icon."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -12,10 +12,15 @@ export class SallaAppsIcons {
         salla.onReady(() => {
             this.apps = salla.config.get('store.apps');
         });
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.appsTitle = salla.lang.get('blocks.footer.download_apps');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getAppsArray() {
         return Object.entries(this.apps)
             .map(([name, value]) => ({ name, value }));

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

@@ -5,6 +5,7 @@ import { Host, h } from "@stencil/core";
 import BookingTime from "../../assets/svg/calendar-time.svg";
 import Calendar from "../../assets/svg/calendar.svg";
 import TimeIcon from "../../assets/svg/time.svg";
+import { setTranslationDefault } from "../../Helpers/translate";
 export class SallaBookingField {
     constructor() {
         this.bookNowLabel = salla.lang.get('pages.cart.book_an_appointment', 'حجز موعد');
@@ -14,15 +15,20 @@ export class SallaBookingField {
         this.bookingUrl = '';
         this.iframeReady = false;
         this.reservations = [];
-        // Load translations
-        salla.lang.onLoaded(() => this.setTranslations());
         // Register event listeners
         Salla.event.on('booking::open', (data) => this.handleBookingOpen(data));
     }
+    connectedCallback() {
+        // Load translations
+        this.langUnsubscribe = salla.lang.subscribe(() => this.setTranslations());
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     async setTranslations() {
         const setNestedAsync = (lang, key, value) => {
             return new Promise((resolve) => {
-                salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                setTranslationDefault(lang, key, value);
                 resolve(true);
             });
         };
@@ -148,7 +154,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: '2ccdcbee3a61bfa69e1e272dca9e993cd568baf8' }, h("div", { key: 'b26b71c2d9ac60e84461e54b4979c5e89e87e437', 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: '739e1d72691af1760caa732090057b24c751a807', class: "s-booking-field-book-now", size: "small", loaderPosition: "center", fill: "outline", onClick: event => this.openBookingModal(event, false) }, h("span", { key: 'c00e5db1bd56c66c2b72db3371c748fa9fa10602', class: "s-booking-field-book-now-content" }, h("span", { key: 'd85c983123460c3f528ab6aea7b6c57bb9cb0f0f', innerHTML: BookingTime }), this.reservations.length ? this.editLabel : this.bookNowLabel))), this.reservations.length > 0 && (h("div", { key: 'b94321aaad303ab7aa21f629b8c9de458209346b', 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: 'aa18bd55cfd8903cfe66655ed4737854aab6da75', 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: '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()));
     }
     static get is() { return "salla-booking-field"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-bottom-alert/salla-bottom-alert.js

@@ -7,6 +7,7 @@ import cartIcon from "../../assets/svg/cart.svg";
 import imageIcon from "../../assets/svg/image.svg";
 import moneyIcon from "../../assets/svg/money-card.svg";
 import checkCircleIcon from "../../assets/svg/check-circle.svg";
+import { setTranslationDefault } from "../../Helpers/translate";
 export class SallaBottomAlert {
     constructor() {
         this.storeId = salla.config.get('store.id');
@@ -31,7 +32,9 @@ export class SallaBottomAlert {
          * Alert Type
          * */
         this.type = 'popup';
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.defaultMessage = salla.lang.get('common.elements.experimental_and_available_store');
             this.defaultActionLabel = salla.lang.get('common.elements.know_more');
             this.storeFeatures = salla.lang.get('common.elements.store_features');
@@ -42,20 +45,20 @@ export class SallaBottomAlert {
             const enTrans = salla.lang.messages?.['en.trans'];
             if (!arTrans || !enTrans)
                 return;
-            salla.helpers.setNested(arTrans, 'common.elements.more_details', 'تفاصيل أكثر');
-            salla.helpers.setNested(enTrans, 'common.elements.more_details', 'More Details');
-            salla.helpers.setNested(arTrans, 'common.elements.store_price', 'سعر المتجر');
-            salla.helpers.setNested(enTrans, 'common.elements.store_price', 'Store Price');
-            salla.helpers.setNested(arTrans, 'common.elements.the_developer', 'المطور');
-            salla.helpers.setNested(enTrans, 'common.elements.the_developer', 'the developer');
-            salla.helpers.setNested(arTrans, 'common.elements.store_price_details', 'السعر يشمل');
-            salla.helpers.setNested(enTrans, 'common.elements.store_price_details', 'Price Includes');
-            salla.helpers.setNested(arTrans, 'common.elements.salla', 'سلة');
-            salla.helpers.setNested(enTrans, 'common.elements.salla', 'Salla');
-            salla.helpers.setNested(arTrans, 'common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
-            salla.helpers.setNested(enTrans, 'common.elements.store_is_available_for_purchase', 'This ready store is available for purchase from');
-            salla.helpers.setNested(arTrans, 'common.elements.ready_stores', 'المتاجر الجاهزة');
-            salla.helpers.setNested(enTrans, 'common.elements.ready_stores', 'Ready Stores');
+            setTranslationDefault('ar.trans', 'common.elements.more_details', 'تفاصيل أكثر');
+            setTranslationDefault('en.trans', 'common.elements.more_details', 'More Details');
+            setTranslationDefault('ar.trans', 'common.elements.store_price', 'سعر المتجر');
+            setTranslationDefault('en.trans', 'common.elements.store_price', 'Store Price');
+            setTranslationDefault('ar.trans', 'common.elements.the_developer', 'المطور');
+            setTranslationDefault('en.trans', 'common.elements.the_developer', 'the developer');
+            setTranslationDefault('ar.trans', 'common.elements.store_price_details', 'السعر يشمل');
+            setTranslationDefault('en.trans', 'common.elements.store_price_details', 'Price Includes');
+            setTranslationDefault('ar.trans', 'common.elements.salla', 'سلة');
+            setTranslationDefault('en.trans', 'common.elements.salla', 'Salla');
+            setTranslationDefault('ar.trans', 'common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
+            setTranslationDefault('en.trans', 'common.elements.store_is_available_for_purchase', 'This ready store is available for purchase from');
+            setTranslationDefault('ar.trans', 'common.elements.ready_stores', 'المتاجر الجاهزة');
+            setTranslationDefault('en.trans', 'common.elements.ready_stores', 'Ready Stores');
             setTimeout(() => {
                 this.storePrice = salla.lang.get('common.elements.store_price');
                 this.theDeveloper = salla.lang.get('common.elements.the_developer');
@@ -68,6 +71,9 @@ export class SallaBottomAlert {
             }, 100);
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     componentDidLoad() {
         // Fetch template data on mount if there's a template
         if (this.template &&
@@ -128,9 +134,9 @@ export class SallaBottomAlert {
     }
     render() {
         const hasTemplate = this.template && typeof this.template === 'object' && Object.keys(this.template).length > 0;
-        return (h(Host, { key: '00d1b1e0b98318096f366dfa13c43df13d95df1c', class: `s-bottom-alert-wrapper ${hasTemplate ? 's-bottom-alert-wrapper-with-template' : ''}` }, hasTemplate && (h("div", { key: '01079527fba6e46eb5e893e64b68e66f35f12c2f', class: "s-bottom-alert-logo-section" }, h("img", { key: '49fd2f67e97ded7ff6240573b825dcea349e47f8', src: "https://cdn.salla.network/images/logo/logo-light.svg", alt: "Salla", class: "s-bottom-alert-logo" }), h("span", { key: '998216dbcfb5381c94ef3b94ddfa2334ccfd24ac', class: "s-bottom-alert-logo-text" }, this.readyStores))), h("div", { key: '68bd744c9b41847ca757f1127610c84e3eededf6', class: "s-bottom-alert-content" }, h("div", { key: '2dd6195b822a6e076fffddc8fb851292f97e8074', class: "flex items-center gap-2" }, h("div", { key: '67ea932ac092fa207b1888f7641d8733c5109f01', class: "s-bottom-alert-icon" }, this.icon ? h("i", { class: this.icon }) : h("i", { innerHTML: infoIcon })), h("div", { key: '5ea417ca4e00f9a3e19902d84192a9f788c1e75b', class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (h("span", { class: "flex flex-wrap items-center gap-1" }, this.defaultMessage, h("span", { class: {
+        return (h(Host, { key: '4c3b1d7d0be604027b8b95fd78b9b464621e526a', class: `s-bottom-alert-wrapper ${hasTemplate ? 's-bottom-alert-wrapper-with-template' : ''}` }, hasTemplate && (h("div", { key: '6c90fd96f45ca304de08324a3ae40de3e868dc23', class: "s-bottom-alert-logo-section" }, h("img", { key: 'f84bae86ce5d82750d7ba6d2d29ce81140e1fe3f', src: "https://cdn.salla.network/images/logo/logo-light.svg", alt: "Salla", class: "s-bottom-alert-logo" }), h("span", { key: '8e78eb67f2b02934fe9fe9ed08aa3b0fb81c82d4', class: "s-bottom-alert-logo-text" }, this.readyStores))), h("div", { key: '1c64cbdced918c2568089c9e0c9cd6b3ec02229a', class: "s-bottom-alert-content" }, h("div", { key: 'bdbfa17a0c192ddfd5e315b097a1c6dae8b30047', class: "flex items-center gap-2" }, h("div", { key: 'e908c88635ac3a38a609aa21a4e6aa901fc5d7eb', class: "s-bottom-alert-icon" }, this.icon ? h("i", { class: this.icon }) : h("i", { innerHTML: infoIcon })), h("div", { key: 'a57c3f1d12302dae8bce086cc7a76c6251a1de37', class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (h("span", { class: "flex flex-wrap items-center gap-1" }, this.defaultMessage, h("span", { class: {
                 's-bottom-alert-message-highlight': true,
-            }, "aria-label": "Developer" }, this.salla), h("span", { innerHTML: salla.money(this.template.price) }))) : (this.defaultMessage))), this.type !== 'banner' && (h("div", { key: '06f2d2949b3a5864151eb96378fc8f82373397a7', class: hasTemplate ? 's-bottom-alert-actions-group' : 's-bottom-alert-action' }, hasTemplate ? (this.loading ? (h("salla-loading", { size: "20" })) : (h("div", { class: "s-bottom-alert-actions-group-container" }, h("a", { class: "s-bottom-alert-action-link", onClick: () => this.handleAction() }, this.actionLabel || this.moreDetailsLabel), this.templateData?.link ? (h("button", { type: "button", class: "s-bottom-alert-action-purchase-button", onClick: () => window.open(this.templateData?.link, '_blank') }, this.buyTheTemplate)) : null))) : (h("salla-button", { href: this.actionUrl, size: "medium", onClick: () => this.handleAction(), width: "normal" }, this.actionLabel || this.defaultActionLabel)))), this.type === 'popup' && this.popup())));
+            }, "aria-label": "Developer" }, this.salla), h("span", { innerHTML: salla.money(this.template.price) }))) : (this.defaultMessage))), this.type !== 'banner' && (h("div", { key: 'f80ef6a48ed2b1d0c6e3aacf1988878bc8eee9a3', class: hasTemplate ? 's-bottom-alert-actions-group' : 's-bottom-alert-action' }, hasTemplate ? (this.loading ? (h("salla-loading", { size: "20" })) : (h("div", { class: "s-bottom-alert-actions-group-container" }, h("a", { class: "s-bottom-alert-action-link", onClick: () => this.handleAction() }, this.actionLabel || this.moreDetailsLabel), this.templateData?.link ? (h("button", { type: "button", class: "s-bottom-alert-action-purchase-button", onClick: () => window.open(this.templateData?.link, '_blank') }, this.buyTheTemplate)) : null))) : (h("salla-button", { href: this.actionUrl, size: "medium", onClick: () => this.handleAction(), width: "normal" }, this.actionLabel || this.defaultActionLabel)))), this.type === 'popup' && this.popup())));
     }
     static get is() { return "salla-bottom-alert"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-bullet-delivery/salla-bullet-delivery.css

@@ -675,6 +675,7 @@
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
 .s-bullet-delivery-addresses-list{
+  position: relative;
   display: flex;
   max-height: 260px;
   flex-direction: column;
@@ -923,6 +924,7 @@
   overflow: hidden;
 }
 .s-bullet-delivery-branches-list{
+  position: relative;
   max-height: min(260px, 32svh);
   overflow-y: auto;
   border-radius: 0.5rem;

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

@@ -5,27 +5,27 @@ import { h, Host } from "@stencil/core";
 export class SallaButton {
     constructor() {
         /**
-         * Button Type
+         * The shape/variant of the button. Can be 'link' (text-only style), 'icon' (circular icon button), or 'btn' (standard button). Default is 'btn'.
          */
         this.shape = 'btn';
         /**
-         * Button Color
+         * The color theme of the button. Available options: 'primary', 'success', 'warning', 'danger', 'light', 'gray', 'dark'. Default is 'primary'.
          */
         this.color = 'primary';
         /**
-         * Button Fill
+         * The fill style of the button. 'solid' (filled background), 'outline' (bordered, transparent background), or 'none'. Default is 'solid'.
          */
         this.fill = 'solid';
         /**
-         * Button Size
+         * The size of the button. Can be 'small', 'medium', or 'large'. Default is 'medium'.
          */
         this.size = 'medium';
         /**
-         * Button Width
+         * The width of the button. 'wide' makes the button full-width, 'normal' uses auto width. Default is 'normal'.
          */
         this.width = 'normal';
         /**
-         * Is the button currently loading
+         * Shows a loading spinner on the button. Default is false.
          */
         this.loading = false;
         /**
@@ -35,23 +35,15 @@ export class SallaButton {
          */
         this.enableLoader = true;
         /**
-         * Is the button currently disabled
+         * Disables the button, preventing user interaction. Default is false.
          */
         this.disabled = false;
         /**
-         * If there is need to change loader position, pass the position
+         * Position of the loading spinner. Can be 'start', 'end', 'center', or 'after' (after the button text). Default is 'after'.
          */
         this.loaderPosition = 'after';
         /**
-         * Determines the type of the rendered button.
-         * By default, the type is set to "button," making it a general-purpose button.
-         * Setting `type` to "submit" makes the button behave as a submit button within a form, triggering form submission.
-         * Possible values for `type` include "button," "submit," "reset," and "menu.".
-         *
-         * Possible values and their usage are as follows:
-         * "button" (default, used for general button functionality),
-         * "reset" (resets form fields to their default values), and
-         * "menu" (represents a button that, when activated, displays a context menu).
+         * The HTML type attribute for the button. 'button' (default, general-purpose), 'submit' (submits forms), or 'reset' (resets form fields).
          */
         this.type = "button";
     }
@@ -186,7 +178,7 @@ export class SallaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Button Type"
+                    "text": "The shape/variant of the button. Can be 'link' (text-only style), 'icon' (circular icon button), or 'btn' (standard button). Default is 'btn'."
                 },
                 "getter": false,
                 "setter": false,
@@ -206,7 +198,7 @@ export class SallaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Button Color"
+                    "text": "The color theme of the button. Available options: 'primary', 'success', 'warning', 'danger', 'light', 'gray', 'dark'. Default is 'primary'."
                 },
                 "getter": false,
                 "setter": false,
@@ -226,7 +218,7 @@ export class SallaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Button Fill"
+                    "text": "The fill style of the button. 'solid' (filled background), 'outline' (bordered, transparent background), or 'none'. Default is 'solid'."
                 },
                 "getter": false,
                 "setter": false,
@@ -246,7 +238,7 @@ export class SallaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Button Size"
+                    "text": "The size of the button. Can be 'small', 'medium', or 'large'. Default is 'medium'."
                 },
                 "getter": false,
                 "setter": false,
@@ -266,7 +258,7 @@ export class SallaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Button Width"
+                    "text": "The width of the button. 'wide' makes the button full-width, 'normal' uses auto width. Default is 'normal'."
                 },
                 "getter": false,
                 "setter": false,
@@ -286,7 +278,7 @@ export class SallaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Is the button currently loading"
+                    "text": "Shows a loading spinner on the button. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -326,7 +318,7 @@ export class SallaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Is the button currently disabled"
+                    "text": "Disables the button, preventing user interaction. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -346,7 +338,7 @@ export class SallaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If there is need to change loader position, pass the position"
+                    "text": "Position of the loading spinner. Can be 'start', 'end', 'center', or 'after' (after the button text). Default is 'after'."
                 },
                 "getter": false,
                 "setter": false,
@@ -366,7 +358,7 @@ export class SallaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Button with href as normal link"
+                    "text": "When provided, renders the button as an anchor (`<a>`) element with this URL."
                 },
                 "getter": false,
                 "setter": false,
@@ -385,7 +377,7 @@ export class SallaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the type of the rendered button.\nBy default, the type is set to \"button,\" making it a general-purpose button.\nSetting `type` to \"submit\" makes the button behave as a submit button within a form, triggering form submission.\nPossible values for `type` include \"button,\" \"submit,\" \"reset,\" and \"menu.\".\n\nPossible values and their usage are as follows:\n\"button\" (default, used for general button functionality), \n\"reset\" (resets form fields to their default values), and \n\"menu\" (represents a button that, when activated, displays a context menu)."
+                    "text": "The HTML type attribute for the button. 'button' (default, general-purpose), 'submit' (submits forms), or 'reset' (resets form fields)."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/salla-cart-item-offers/salla-cart-item-offers.js

@@ -37,14 +37,21 @@ export class SallaCartItemOffers {
             this.showAll = !this.showAll;
         };
     }
-    async componentWillLoad() {
-        await Salla.onReady();
-        await salla.lang.onLoaded(() => {
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.freeLabel = salla.lang.get('common.elements.freeExclam');
             this.receivedOffer = salla.lang.get('pages.cart.received_offer');
             this.discountAmountLabel = salla.lang.get('pages.cart.discount_amount');
             this.showMoreOffers = salla.lang.get('pages.cart.show_more_offers');
         });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
+    async componentWillLoad() {
+        await Salla.onReady();
+        // still hold the first render until translations are in; the labels come from the subscriber
+        await salla.lang.onLoaded();
         this.internalQuantity = this.quantity;
         this.internalOffers = this.parseOffers(this.offers);
         this.internalProductPrice = this.productPrice;

package/dist/collection/components/salla-cart-summary/salla-cart-summary.js

@@ -118,7 +118,7 @@ export class SallaCartSummary {
         return cartUrl;
     }
     render() {
-        return (h(Host, { key: '80544f74203447490842d9ef9519ba3013fe0d02' }, h("a", { key: 'd769586f49b37a079653587d990871cb3ffe6542', class: "s-cart-summary-wrapper", href: this.getCartLink(), onClick: this.handleCheckoutClick }, h("div", { key: 'ad1833c7562138c211def82a365a89216157db20', id: "s-cart-icon" }, h("slot", { key: 'a5d60463eb9f023ffed29586a94d3b5feaf586c8', name: "icon" }, h("i", { key: '64a0c861706a05edc9057b1692d33945306958c0', class: "s-cart-summary-icon", innerHTML: CartIcon }))), h("span", { key: '6781086462fdb3e9910d9d32bd53014345c7148b', class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { key: '04dd5019a64ac99153b843ec2cff9103cf247c6a', class: "s-cart-summary-content" }, this.showCartLabel && h("span", { key: '2625556cc87729a72eb9ab455e3274a24c1738fa', class: "s-cart-summary-label" }, this.cartLabel), h("b", { key: '97a1a1911d6e18f9dde89437bd8749553ce8d35c', class: "s-cart-summary-total", innerHTML: salla.money(this.cartSummaryTotal) })))));
+        return (h(Host, { key: '4ed9d259a12ec48915a500bbeddb87c0078e8a3a' }, h("a", { key: '0d15f13e6e225dfe25e5b714f2bab5e6804fa387', class: "s-cart-summary-wrapper", href: this.getCartLink(), onClick: this.handleCheckoutClick }, h("div", { key: '9bbb00e5582afd7b79c65ae10d7dc1f28f67b943', id: "s-cart-icon" }, h("slot", { key: 'fa36457a1adf6587b787c1d2a4eeb50580593929', name: "icon" }, h("i", { key: 'fcdc45a58e4ab257af5965b8cb2d04c722ca7bea', class: "s-cart-summary-icon", innerHTML: CartIcon }))), h("span", { key: 'da492932c9cf9aec194a1f009960c132e5c79c5c', class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { key: 'a5465b7f3a2366136cb1a294f5b345807b93d4de', class: "s-cart-summary-content" }, this.showCartLabel && h("span", { key: '17497746811a5d6c33ca2ebcb5ba2a17e1fc86c3', class: "s-cart-summary-label" }, this.cartLabel), h("b", { key: '828ab6dee93cd7dee0e8964b8503831ebefc08da', class: "s-cart-summary-total", innerHTML: salla.money(this.cartSummaryTotal) })))));
     }
     static get is() { return "salla-cart-summary"; }
     static get originalStyleUrls() {
@@ -146,7 +146,7 @@ export class SallaCartSummary {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show cart label"
+                    "text": "Whether to show the cart label text alongside the cart icon. Default is false (icon only)."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/salla-comment-form/salla-comment-form.js

@@ -6,16 +6,21 @@ export class SallaCommentForm {
     constructor() {
         this.placeholder = salla.lang.get('blocks.comments.placeholder');
         this.submitText = salla.lang.get('blocks.comments.submit');
-        salla.lang.onLoaded(() => {
-            this.placeholder = salla.lang.get('blocks.comments.placeholder');
-            this.submitText = salla.lang.get('blocks.comments.submit');
-        });
         salla.onReady(() => {
             this.canComment = salla.config.get('user.can_comment');
             this.itemId = salla.config.get('page.id');
             this.type = salla.url.is_page('page-single') ? 'page' : salla.url.is_page('blog.single') ? 'blog' : 'product';
         });
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.placeholder = salla.lang.get('blocks.comments.placeholder');
+            this.submitText = salla.lang.get('blocks.comments.submit');
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     submit() {
         if (!this.commentForm.reportValidity()) {
             salla.log('CommentForm:: validation error!');
@@ -38,7 +43,7 @@ export class SallaCommentForm {
             .finally(() => this.submitBtn.stop());
     }
     render() {
-        return (h(Host, { key: '16f5113a8345c31dce2f8302bcb5a5fba62e91c3' }, !!this.canComment ? h("form", { ref: frm => this.commentForm = frm }, h("div", { class: "s-comment-form-wrapper" }, this.showAvatar ?
+        return (h(Host, { key: '12db8a037d96013df1c9f3e4547d3383b6332fcc' }, !!this.canComment ? h("form", { ref: frm => this.commentForm = frm }, h("div", { class: "s-comment-form-wrapper" }, this.showAvatar ?
             h("img", { class: "s-comment-form-avatar", src: salla.config.get('user.avatar'), alt: "user avatar" }) : '', h("div", { class: "s-comment-form-content" }, h("textarea", { cols: 30, rows: 5, minlength: "4", maxlength: "500", ref: field => this.commentField = field, placeholder: this.placeholder, class: "s-comment-form-input", required: true }), h("br", null), h("div", { class: "s-comment-form-action" }, h("salla-button", { ref: btn => this.submitBtn = btn, "loader-position": 'center', onClick: () => this.submit() }, this.submitText))))) : ''));
     }
     static get is() { return "salla-comment-form"; }

package/dist/collection/components/salla-comments/salla-comment-item.js

@@ -5,6 +5,7 @@ import { Host, h } from "@stencil/core";
 import CheckIcon from "../../assets/svg/check.svg";
 import Reply from "../../assets/svg/reply.svg";
 import ThumbsUp from "../../assets/svg/thumbs-up.svg";
+import { setTranslationDefault } from "../../Helpers/translate";
 export class SallaCommentItem {
     constructor() {
         // Translations
@@ -21,10 +22,12 @@ export class SallaCommentItem {
         this.likesCount = 0;
         this.likedComments = [];
         this.showReviewFactors = false;
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             const setNestedAsync = (lang, key, value) => {
                 return new Promise((resolve) => {
-                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                    setTranslationDefault(lang, key, value);
                     resolve(true);
                 });
             };
@@ -47,6 +50,9 @@ export class SallaCommentItem {
             setTranslations();
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     componentDidLoad() {
         if (!this.comment)
             return;
@@ -61,6 +67,8 @@ export class SallaCommentItem {
         catch {
             salla.log('Bad json for liked_comments');
         }
+        // back from an SSO login redirect: finish the like the guest asked for
+        salla.auth?.api?.takeResume?.('comment.like', this.comment.id) && this.toggleLike();
     }
     getReplies() {
         return Array.isArray(this.comment.replies) ? this.comment.replies : [this.comment.replies];
@@ -85,7 +93,7 @@ export class SallaCommentItem {
     }
     async toggleLike() {
         if (salla.config.isGuest()) {
-            return salla.notify.error(salla.lang.get('common.messages.must_login'));
+            return salla.api.auth.requireLoginThen(`comment::like.after-login.${this.comment.id}`, () => this.toggleLike(), { action: 'comment.like', payload: this.comment.id });
         }
         this.likedComments = JSON.parse(localStorage.getItem('liked_comments') || '[]');
         const isLiked = this.likedComments.includes(this.comment.id);