@salla.sa/twilight-components 2.14.595 → 2.14.597

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;

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

@@ -6,6 +6,7 @@ import { CommentType, buildCommentSortOptions, isFeatureEnabled } from "./interf
 import anime from "animejs";
 import Helper from "../../Helpers/Helper";
 import ChatBubbles from "../../assets/svg/chat-bubbles.svg";
+import { addMissingTranslations, setTranslationDefault } from "../../Helpers/translate";
 export class SallaComments {
     constructor() {
         /**
@@ -25,6 +26,7 @@ export class SallaComments {
          */
         this.testimonials = false;
         this.customerId = null;
+        this.initialDataVersion = 0;
         // Translations
         this.noComments = salla.lang.get('blocks.comments.no_comments');
         this.comment_title = '';
@@ -36,8 +38,10 @@ export class SallaComments {
             this.allowLikes = salla.config.get('store.settings.rating.allow_likes');
             this.showRatingSummary = salla.config.get('store.settings.rating.show_rating_summary');
         });
-        salla.lang.onLoaded(() => {
-            salla.lang.addBulk({
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            addMissingTranslations({
                 "blocks.comments.overall_rating": { ar: "التقييم العام", en: "Overall rating" }
             });
             this.comment_title = salla.lang.get('blocks.comments.overall_rating');
@@ -45,7 +49,7 @@ export class SallaComments {
             this.noComments = salla.lang.get('pages.rating.no_ratings');
             const setNestedAsync = (lang, key, value) => {
                 return new Promise((resolve) => {
-                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                    setTranslationDefault(lang, key, value);
                     resolve(true);
                 });
             };
@@ -63,6 +67,21 @@ export class SallaComments {
             setTranslations();
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
+    resetInfiniteScroll() {
+        clearTimeout(this.initialDataTimer);
+        if (this.infiniteScroll) {
+            this.infiniteScroll.destroy();
+            const instances = salla.infiniteScroll.instances;
+            for (let index = instances.length - 1; index >= 0; index--) {
+                if (instances[index] === this.infiniteScroll)
+                    instances.splice(index, 1);
+            }
+        }
+        this.infiniteScroll = undefined;
+    }
     get sortOptions() {
         return buildCommentSortOptions({
             mostHelpfulLabel: this.mostHelpfulLabel,
@@ -197,7 +216,7 @@ export class SallaComments {
             this.wrapper.append(loading);
         }
         this.nextPage = null;
-        this.loadInitialData();
+        return this.loadInitialData();
     }
     // Get comment item HTML
     getCommentHTML(comment) {
@@ -249,6 +268,8 @@ export class SallaComments {
     }
     // Load initial data
     async loadInitialData() {
+        const version = ++this.initialDataVersion;
+        this.resetInfiniteScroll();
         try {
             let resp = { data: [], pagination: {} };
             const searchParams = new URLSearchParams(window.location.search);
@@ -269,6 +290,8 @@ export class SallaComments {
                     : null;
                 resp = await salla.api.comment.getComments(this.type, this.itemId, 1, 5, this.sort, this.customerId);
             }
+            if (version !== this.initialDataVersion)
+                return;
             if (!resp.data || !resp.data.length) {
                 this.showPlaceholder = false;
                 this.comments = [];
@@ -299,7 +322,9 @@ export class SallaComments {
             this.total = resp.pagination.total;
             this.nextPage = typeof resp.pagination.links === 'object' && !!resp.pagination.links.next ? resp.pagination.links.next : null;
             this.patchNextPageUrl();
-            setTimeout(() => {
+            this.initialDataTimer = setTimeout(() => {
+                if (version !== this.initialDataVersion || !this.wrapper)
+                    return;
                 for (const card of this.handleResponse(resp)) {
                     this.wrapper.append(card);
                 }
@@ -309,6 +334,8 @@ export class SallaComments {
             }, 100);
         }
         catch (error) {
+            if (version !== this.initialDataVersion)
+                return;
             console.error('Error loading initial data:', error);
             this.showPlaceholder = true;
             this.loading(false);

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

@@ -18,10 +18,17 @@ export class SallaContacts {
         salla.onReady(() => {
             this.contacts = salla.config.get('store.contacts');
         });
-        salla.lang.onLoaded(() => {
-            this.contactsTitle = this.contactsTitle || salla.lang.get('blocks.footer.social');
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            if (!this.contactsTitle || this.contactsTitle === this.langTitle) {
+                this.contactsTitle = this.langTitle = salla.lang.get('blocks.footer.social');
+            }
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getContactsArray() {
         return Object.entries(this.contacts)
             .filter(([_key, value]) => value !== '')

package/dist/collection/components/salla-count-down/salla-count-down.js

@@ -5,16 +5,16 @@ import { Host, h } from "@stencil/core";
 export class SallaCountDown {
     constructor() {
         /**
-         * The size of the count down
-         * */
+         * The size of the countdown display. Can be 'sm', 'md', or 'lg'. Default is 'md'.
+         */
         this.size = 'md';
         /**
-         * The color of the count down
-         * */
+         * The color theme of the countdown. Can be 'primary', 'light', or 'dark'. Default is 'dark'.
+         */
         this.color = 'dark';
         /**
-         * The digits lang to show in the count down
-         * */
+         * The language/format for displaying digits. 'en' for English numerals, 'auto' for localized numerals. Default is 'auto'.
+         */
         this.digits = 'auto';
         /**
          * If true, hides days segment when days = 0, and hides hours segment when both days and hours = 0.
@@ -35,7 +35,12 @@ export class SallaCountDown {
         this.hours = this.number(0);
         this.minutes = this.number(0);
         this.seconds = this.number(0);
-        salla.lang.onLoaded(() => {
+        if (this.date && this.isValidDate(this.date)) {
+            this.startCountDown();
+        }
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
             this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
             this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
@@ -43,9 +48,9 @@ export class SallaCountDown {
             this.secondsLabel = salla.lang.getWithDefault('pages.checkout.second', 'ثانية');
             this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
         });
-        if (this.date && this.isValidDate(this.date)) {
-            this.startCountDown();
-        }
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
     }
     /**
      * End the count down
@@ -229,7 +234,7 @@ export class SallaCountDown {
         return this.renderCountDown();
     }
     render() {
-        return (h(Host, { key: 'a16b6dc8c000eea39b990588995b07d6361231b2', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
+        return (h(Host, { key: '6d42cb8b06464f722d078ab4eb7117c7f698f3c3', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
     }
     static get is() { return "salla-count-down"; }
     static get originalStyleUrls() {
@@ -414,7 +419,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, the count down numbers will be appear in a boxes"
+                    "text": "Whether to display countdown numbers in boxed containers. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -433,7 +438,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the count down"
+                    "text": "The size of the countdown display. Can be 'sm', 'md', or 'lg'. Default is 'md'."
                 },
                 "getter": false,
                 "setter": false,
@@ -453,7 +458,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The color of the count down"
+                    "text": "The color theme of the countdown. Can be 'primary', 'light', or 'dark'. Default is 'dark'."
                 },
                 "getter": false,
                 "setter": false,
@@ -473,7 +478,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show labels for each count down number"
+                    "text": "Whether to show labels (day, hour, minute, second) below each countdown number. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -492,7 +497,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The text to show when the count down ends"
+                    "text": "Custom text to display when the countdown ends. If not provided, uses the default localized message."
                 },
                 "getter": false,
                 "setter": false,
@@ -568,7 +573,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The digits lang to show in the count down"
+                    "text": "The language/format for displaying digits. 'en' for English numerals, 'auto' for localized numerals. Default is 'auto'."
                 },
                 "getter": false,
                 "setter": false,
@@ -588,7 +593,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, the count down will end at the end of the day"
+                    "text": "Whether to set the countdown end time to the end of the specified day (23:59:59). Default is false."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -4,6 +4,10 @@
 import { h, } from "@stencil/core";
 import CameraIcon from "../../assets/svg/camera.svg";
 import { FormFieldTypes, } from "../salla-user-profile/interfaces";
+/**
+ * The `salla-custom-fields` component renders custom form fields with validation support.
+ * Supports text and file upload fields with real-time validation.
+ */
 export class SallaCustomFields {
     constructor() {
         /** Whether the fields can be edited by the user. */

package/dist/collection/components/salla-file-upload/salla-file-upload.css

@@ -358,6 +358,9 @@
 .fixed{
   position: fixed;
 }
+.relative{
+  position: relative;
+}
 .grid{
   display: grid;
 }