@salla.sa/twilight-components 2.14.596 → 2.14.597

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

@@ -63,7 +63,7 @@ var phoneTalkingIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const sallaOrderBranchCss = "/*!twlt*/:host{display:block}.s-order-branch-ready{background-color:color-mix(in srgb, var(--color-primary) 30%, transparent)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-order-branch-wrapper{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:1rem;font-family:inherit}.s-order-branch-container{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));align-items:stretch;gap:1rem}@media (min-width: 768px){.s-order-branch-container{grid-template-columns:repeat(2, minmax(0, 1fr))}}.s-order-branch-details{display:grid;align-content:stretch;gap:1rem}.s-order-branch-info-card{display:flex;min-height:68px;align-items:center;justify-content:space-between;gap:0.75rem;border-radius:0.5rem;border-width:1px;border-color:var(--color-border,#eee);background-color:var(--color-surface,#fff);padding:0.75rem}.s-order-branch-info-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:3px;text-align:start}.s-order-branch-info-label{font-size:0.75rem;line-height:1rem;line-height:1.35;color:var(--color-text-secondary,#666)}.s-order-branch-info-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.875rem;line-height:1.25rem;font-weight:500;line-height:1.45;color:var(--color-text-primary,#1d1d1d)}.s-order-branch-hours-card .s-order-branch-info-text{gap:0.5rem}.s-order-branch-hours-list{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}.s-order-branch-hours-item{display:inline-flex;align-items:center;white-space:nowrap;border-radius:0.375rem;border-width:1px;border-color:var(--color-border,#eee);padding-left:0.625rem;padding-right:0.625rem;padding-top:0.25rem;padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:500;line-height:1.45;color:var(--color-text-primary,#1d1d1d)}.s-order-branch-info-action{display:inline-flex;height:3rem;width:3rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:0.5rem;background-color:var(--color-surface-secondary,#f6f6f6);color:var(--color-text-primary,#2b2d34);text-decoration-line:none}.s-order-branch-info-icon{display:inline-flex;height:3rem;width:3rem;align-items:center;justify-content:center;border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));font-size:22px;color:currentColor}.s-order-branch-info-icon svg{height:1.5rem;width:1.5rem;fill:currentColor}.s-order-branch-card{display:flex;flex-direction:column;gap:0.75rem;border-radius:0.5rem;border-width:1px;border-color:var(--color-border,#eee);background-color:var(--color-surface,#fff);padding:1rem}@media (min-width: 768px){.s-order-branch-card{padding:1.25rem}}.s-order-branch-ready{display:inline-flex;flex-shrink:0;align-items:center;white-space:nowrap;border-radius:9999px;border-width:1px;border-color:var(--color-primary,#236e4c);padding-left:0.75rem;padding-right:0.75rem;padding-top:0.25rem;padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:500;color:var(--color-primary-dark,#0c2519)}.s-order-branch-location{display:flex;min-height:52px;flex-direction:column;align-items:stretch;justify-content:space-between;gap:1.5rem}@media (min-width: 768px){.s-order-branch-location{flex-direction:row;align-items:center}}.s-order-branch-identity{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:0.75rem}.s-order-branch-store-icon{display:inline-flex;height:3rem;width:3rem;flex-shrink:0;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));font-size:1.5rem;line-height:2rem;color:var(--color-text-primary,#2b2d34)}.s-order-branch-store-icon svg{height:1em;width:1em;fill:currentColor}.s-order-branch-text{display:flex;min-width:0px;flex-direction:column;gap:0.25rem;text-align:start}.s-order-branch-name-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}.s-order-branch-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:500;line-height:1.45;color:var(--color-text-primary,#2b2d34)}.s-order-branch-address{overflow-wrap:break-word;font-size:0.75rem;line-height:1rem;line-height:1.45;color:var(--color-text-secondary,#666)}.s-order-branch-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;gap:0.75rem}@media (min-width: 768px){.s-order-branch-actions{flex-wrap:nowrap}}.s-order-branch-map-link{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:0.5rem;white-space:nowrap;border-radius:0.375rem;border-width:1px;border-color:var(--color-primary,#236e4c);padding-left:0.875rem;padding-right:0.875rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;line-height:1.2;color:var(--color-primary,#236e4c);text-decoration-line:none}.s-order-branch-action-icon{display:inline-flex;align-items:center;justify-content:center;font-size:0.875rem;line-height:1.25rem;color:currentColor}.s-order-branch-action-icon svg{height:1em;width:1em}";
+const sallaOrderBranchCss = "/*!twlt*/:host{display:block}.s-order-branch-ready{background-color:color-mix(in srgb, var(--color-primary) 30%, transparent)}.s-order-branch-instructions{background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}.s-order-branch-instructions-content{white-space:pre-wrap}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-order-branch-wrapper{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:1rem;font-family:inherit}.s-order-branch-container{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));align-items:stretch;gap:1rem}@media (min-width: 768px){.s-order-branch-container{grid-template-columns:repeat(2, minmax(0, 1fr))}}.s-order-branch-details{display:grid;align-content:stretch;gap:1rem}.s-order-branch-info-card{display:flex;min-height:68px;align-items:center;justify-content:space-between;gap:0.75rem;border-radius:0.5rem;border-width:1px;border-color:var(--color-border,#eee);background-color:var(--color-surface,#fff);padding:0.75rem}.s-order-branch-info-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:3px;text-align:start}.s-order-branch-info-label{font-size:0.75rem;line-height:1rem;line-height:1.35;color:var(--color-text-secondary,#666)}.s-order-branch-info-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.875rem;line-height:1.25rem;font-weight:500;line-height:1.45;color:var(--color-text-primary,#1d1d1d)}.s-order-branch-hours-card .s-order-branch-info-text{gap:0.5rem}.s-order-branch-hours-list{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}.s-order-branch-hours-item{display:inline-flex;align-items:center;white-space:nowrap;border-radius:0.375rem;border-width:1px;border-color:var(--color-border,#eee);padding-left:0.625rem;padding-right:0.625rem;padding-top:0.25rem;padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:500;line-height:1.45;color:var(--color-text-primary,#1d1d1d)}.s-order-branch-info-action{display:inline-flex;height:3rem;width:3rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:0.5rem;background-color:var(--color-surface-secondary,#f6f6f6);color:var(--color-text-primary,#2b2d34);text-decoration-line:none}.s-order-branch-info-icon{display:inline-flex;height:3rem;width:3rem;align-items:center;justify-content:center;border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));font-size:22px;color:currentColor}.s-order-branch-info-icon svg{height:1.5rem;width:1.5rem;fill:currentColor}.s-order-branch-card{display:flex;flex-direction:column;gap:0.75rem;border-radius:0.5rem;border-width:1px;border-color:var(--color-border,#eee);background-color:var(--color-surface,#fff);padding:1rem}@media (min-width: 768px){.s-order-branch-card{padding:1.25rem}}.s-order-branch-ready{display:inline-flex;flex-shrink:0;align-items:center;white-space:nowrap;border-radius:9999px;border-width:1px;border-color:var(--color-primary,#236e4c);padding-left:0.75rem;padding-right:0.75rem;padding-top:0.25rem;padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:500;color:var(--color-primary-dark,#0c2519)}.s-order-branch-location{display:flex;min-height:52px;flex-direction:column;align-items:stretch;justify-content:space-between;gap:1.5rem}@media (min-width: 768px){.s-order-branch-location{flex-direction:row;align-items:center}}.s-order-branch-identity{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:0.75rem}.s-order-branch-store-icon{display:inline-flex;height:3rem;width:3rem;flex-shrink:0;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));font-size:1.5rem;line-height:2rem;color:var(--color-text-primary,#2b2d34)}.s-order-branch-store-icon svg{height:1em;width:1em;fill:currentColor}.s-order-branch-text{display:flex;min-width:0px;flex-direction:column;gap:0.25rem;text-align:start}.s-order-branch-name-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}.s-order-branch-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:500;line-height:1.45;color:var(--color-text-primary,#2b2d34)}.s-order-branch-address{overflow-wrap:break-word;font-size:0.75rem;line-height:1rem;line-height:1.45;color:var(--color-text-secondary,#666)}.s-order-branch-instructions{border-radius:0.5rem;padding:1rem;text-align:start}.s-order-branch-instructions-heading{margin-bottom:0.5rem;display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;line-height:1rem;line-height:1.35}.s-order-branch-instructions-heading i{font-size:0.875rem;line-height:1.25rem;font-weight:700;--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.s-order-branch-instructions-content{margin:0px;overflow-wrap:break-word;font-size:0.875rem;line-height:1.25rem;font-weight:600;line-height:1.6}.s-order-branch-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;gap:0.75rem}@media (min-width: 768px){.s-order-branch-actions{flex-wrap:nowrap}}.s-order-branch-map-link{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:0.5rem;white-space:nowrap;border-radius:0.375rem;border-width:1px;border-color:var(--color-primary,#236e4c);padding-left:0.875rem;padding-right:0.875rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;line-height:1.2;color:var(--color-primary,#236e4c);text-decoration-line:none}.s-order-branch-action-icon{display:inline-flex;align-items:center;justify-content:center;font-size:0.875rem;line-height:1.25rem;color:currentColor}.s-order-branch-action-icon svg{height:1em;width:1em}";
 
 const SallaOrderBranch$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderBranch extends HTMLElement {
     constructor() {
@@ -72,10 +72,33 @@ const SallaOrderBranch$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderBran
         /** Stack the identity and contact cards vertically instead of side-by-side. */
         this.stackCards = false;
         this.isLoading = false;
+        /** Bilingual defaults for keys introduced by this component; store/central translations win. */
+        this.translationDefaults = {
+            'pages.orders.pickup_instructions': { ar: 'معلومات إرشادية', en: 'Pickup instructions' },
+        };
     }
     componentWillLoad() {
+        salla.lang.onLoaded?.(() => this.registerTranslationDefaults());
+        this.registerTranslationDefaults();
         return this.getBranchData();
     }
+    /**
+     * Register bilingual (ar/en) defaults without overriding existing translations.
+     */
+    registerTranslationDefaults() {
+        if (!salla?.lang?.addBulk)
+            return;
+        const missing = Object.entries(this.translationDefaults).reduce((acc, [key, value]) => {
+            // `get` returns the key itself when no translation is found.
+            if (salla.lang.get?.(key) === key) {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+        if (Object.keys(missing).length) {
+            salla.lang.addBulk(missing);
+        }
+    }
     async getBranchData() {
         const orderId = salla.config.get('page.id');
         if (!orderId)
@@ -111,6 +134,11 @@ const SallaOrderBranch$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderBran
     label(key, fallback) {
         return salla.lang.getWithDefault(key, fallback);
     }
+    bilingualLabel(key) {
+        const entry = this.translationDefaults[key];
+        const locale = (salla.lang.locale || 'ar').startsWith('en') ? 'en' : 'ar';
+        return this.label(key, entry?.[locale] ?? entry?.ar ?? key);
+    }
     get preparationText() {
         const range = this.branchData?.preparation_time_range;
         if (!range?.from || !range?.to)
@@ -158,6 +186,16 @@ const SallaOrderBranch$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderBran
     get phone() {
         return getBranchPhone(this.branchData?.contacts);
     }
+    get pickupInstructions() {
+        const instructions = this.branchData?.pickup_instructions;
+        return typeof instructions === 'string' && instructions.trim() ? instructions : '';
+    }
+    renderPickupInstructions() {
+        const instructions = this.pickupInstructions;
+        if (!instructions)
+            return null;
+        return (h("div", { class: "s-order-branch-instructions" }, h("div", { class: "s-order-branch-instructions-heading" }, h("span", { "aria-hidden": "true" }, h("i", { class: "sicon-info" })), h("span", null, this.bilingualLabel('pages.orders.pickup_instructions'))), h("p", { class: "s-order-branch-instructions-content" }, instructions)));
+    }
     renderDetailsColumn() {
         const phone = this.phone;
         if (!phone)
@@ -168,13 +206,13 @@ const SallaOrderBranch$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderBran
         const items = this.workingHoursItems;
         if (!items.length)
             return null;
-        return (h("div", { class: "s-order-branch-info-card s-order-branch-hours-card" }, h("span", { class: "s-order-branch-info-icon", "aria-hidden": "true" }, h("i", { class: "sicon-calendar-alt" })), h("div", { class: "s-order-branch-info-text" }, h("span", { class: "s-order-branch-info-label" }, this.label('pages.checkout.working_hours', 'ساعات العمل')), h("div", { class: "s-order-branch-hours-list" }, items.map(item => (h("span", { class: "s-order-branch-hours-item" }, item)))))));
+        return (h("div", { class: "s-order-branch-info-card s-order-branch-hours-card" }, h("span", { class: "s-order-branch-info-icon", "aria-hidden": "true" }, h("i", { class: "sicon-calendar-alt" })), h("div", { class: "s-order-branch-info-text" }, h("span", { class: "s-order-branch-info-label" }, this.label('pages.checkout.working_hours', 'ساعات العمل')), h("div", { class: "s-order-branch-hours-list" }, items.map((item, index) => (h("span", { key: `${item}-${index}`, class: "s-order-branch-hours-item" }, item)))))));
     }
     renderBranchIdentityCard() {
         const branch = this.branchData;
         const address = this.branchAddress;
         const readyText = this.preparationText;
-        return (h("section", { class: "s-order-branch-card" }, h("div", { class: "s-order-branch-location" }, h("div", { class: "s-order-branch-identity" }, h("span", { class: "s-order-branch-store-icon" }, h("i", { class: "sicon-store", "aria-hidden": "true" })), h("div", { class: "s-order-branch-text" }, h("div", { class: "s-order-branch-name-row" }, branch?.name ? h("span", { class: "s-order-branch-name" }, branch.name) : null, readyText ? h("span", { class: "s-order-branch-ready" }, readyText) : null), address ? h("span", { class: "s-order-branch-address" }, address) : null)), this.mapUrl ? (h("div", { class: "s-order-branch-actions" }, h("a", { href: this.mapUrl, target: "_blank", rel: "noopener noreferrer", class: "s-order-branch-map-link" }, h("span", null, this.label('pages.orders.branch_map', 'موقع الفرع علي الخريطة')), h("span", { class: "s-order-branch-action-icon", innerHTML: navigationIcon })))) : null)));
+        return (h("section", { class: "s-order-branch-card" }, h("div", { class: "s-order-branch-location" }, h("div", { class: "s-order-branch-identity" }, h("span", { class: "s-order-branch-store-icon" }, h("i", { class: "sicon-store", "aria-hidden": "true" })), h("div", { class: "s-order-branch-text" }, h("div", { class: "s-order-branch-name-row" }, branch?.name ? h("span", { class: "s-order-branch-name" }, branch.name) : null, readyText ? h("span", { class: "s-order-branch-ready" }, readyText) : null), address ? h("span", { class: "s-order-branch-address" }, address) : null)), this.mapUrl ? (h("div", { class: "s-order-branch-actions" }, h("a", { href: this.mapUrl, target: "_blank", rel: "noopener noreferrer", class: "s-order-branch-map-link" }, h("span", null, this.label('pages.orders.branch_map', 'موقع الفرع علي الخريطة')), h("span", { class: "s-order-branch-action-icon", innerHTML: navigationIcon })))) : null), this.renderPickupInstructions()));
     }
     render() {
         if (this.isLoading || !this.branchData) {

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

@@ -40,13 +40,15 @@ const SallaOrderSummary$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderSum
         this.isDigitalCard = (item) => item.product.type === 'codes';
         this.isDigitalProduct = (item) => item.product.type === 'digital';
     }
-    async componentWillLoad() {
-        salla.lang.onLoaded(() => {
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.codes_text = salla.lang.get('pages.thank_you.codes');
             this.copy_text = salla.lang.get('common.elements.copy');
             this.files_text = salla.lang.get('pages.thank_you.files');
             this.download_text = salla.lang.get('pages.thank_you.download');
         });
+    }
+    async componentWillLoad() {
         return await this.getOrderItems();
     }
     copyToClipboardHandler(code) {
@@ -84,10 +86,11 @@ const SallaOrderSummary$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderSum
         }
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         this.copyCodeButtonTimeout && clearTimeout(this.copyCodeButtonTimeout);
     }
     render() {
-        return (h("ul", { key: '09314d7241f730cc2dcd220542d02ca44565ae9c', class: "s-order-summary-wrapper" }, this.noItemFound ? h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" })) :
+        return (h("ul", { key: 'b01089c3818be36fa4ff2341d7986269abdfd7c8', class: "s-order-summary-wrapper" }, this.noItemFound ? h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" })) :
             this.order_items.map((item) => (this.isDigitalCard(item) ? (h("li", { key: item.product.id, class: "s-order-summary-item" }, h("h2", { class: "s-order-summary-item-title" }, this.codes_text, " (", item.name, ")"), item.codes.map((code) => (h("div", { key: code.code, class: "s-order-summary-code-item-wrapper" }, h("p", null, h("span", { innerHTML: iconCreditCard }), h("span", null, code.code)), h("salla-button", { class: `s-order-summary-item-copy-button ${this.codeCopied === code.code ? 'copied' : ''}`, onClick: () => this.copyToClipboardHandler(code.code), shape: "link" }, h("span", { innerHTML: this.codeCopied === code.code ? IconVerified : iconCopy }), h("span", null, this.copy_text))))))) :
                 this.isDigitalProduct(item) ? (h("li", { key: item.product.id, class: "s-order-summary-item" }, h("h2", { class: "s-order-summary-item-title" }, this.files_text, " (", item.name, ")"), h("ul", null, item.files.map((file) => (h("li", { class: "s-order-summary-digital-item-wrapper" }, h("div", null, h("span", { innerHTML: iconFileArchive }), h("span", null, file.name)), h("a", { href: file.url, target: "_blank", class: "s-order-summary-item-download" }, h("span", { innerHTML: iconDownload }), h("span", null, this.download_text)))))))) : null))));
     }

package/dist/components/salla-order-totals-card.js

@@ -53,7 +53,7 @@ const SallaOrderTotalsCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrder
             this.renderTotalRow(salla.lang.get('pages.cart.order_options_total'), summary.options_total), summary.discounts && this.renderDiscountRow(), summary.cod_cost &&
             this.renderTotalRow(salla.lang.get('pages.orders.cod_cost'), summary.cod_cost, ''), summary.shipping_cost &&
             this.renderTotalRow(salla.lang.get('pages.orders.shipping_cost'), summary.shipping_cost, 's-order-totals-card-shipping'), summary.tax &&
-            this.renderTotalRow(`${salla.lang.get('pages.cart.tax')} ${summary.tax.percent}%`, summary.tax.amount, ''), summary.paid_amount
+            this.renderTotalRow(`${salla.lang.get('pages.cart.tax')} ${summary.tax.percent}%`, summary.tax.amount, ''), summary.has_remaining_amount && summary.paid_amount
             ? this.renderTotalRow(salla.lang.get('pages.orders.partially_paid'), summary.paid_amount, '')
             : null, summary.remaining_amount
             ? this.renderTotalRow(salla.lang.get('pages.orders.remaining_amount'), summary.remaining_amount, '')

package/dist/components/salla-orders.js

@@ -3,6 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
+import { a as addMissingTranslations } from './translate.js';
 import { d as defineCustomElement$c } from './salla-attachment-view2.js';
 import { d as defineCustomElement$b } from './salla-button2.js';
 import { d as defineCustomElement$a } from './salla-file-upload2.js';
@@ -70,7 +71,11 @@ const SallaOrder = /*@__PURE__*/ proxyCustomElement(class SallaOrder extends HTM
         this.reviewPoints = 0;
         this.filterGeneration = 0;
         this.showExternalOrders = false;
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            addMissingTranslations(LANG_DEFAULTS);
+            this.refreshReviewLabels();
             this.languageCode = salla.lang.locale;
             this.orderNumberText = salla.lang.get('pages.thank_you.order_id');
             this.totalOrderText = salla.lang.get('pages.orders.total');
@@ -80,6 +85,9 @@ const SallaOrder = /*@__PURE__*/ proxyCustomElement(class SallaOrder extends HTM
             this.load_more_text_trans = salla.lang.get('common.elements.load_more');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     setLoadMoreLoading(isLoading = true) {
         const buttonText = this.status?.querySelector('.s-button-text');
         if (!buttonText || !this.btnLoader)
@@ -481,10 +489,6 @@ const SallaOrder = /*@__PURE__*/ proxyCustomElement(class SallaOrder extends HTM
         this.populateOrdersTableIfEmpty();
     }
     componentWillLoad() {
-        salla.lang.onLoaded(() => {
-            salla.lang.addBulk(LANG_DEFAULTS);
-            this.refreshReviewLabels();
-        });
         return salla.onReady().then(() => {
             this.setupLoyalty();
             this.showExternalOrders = salla.config

package/dist/components/salla-placeholder2.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 
 var Inbox = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -29,10 +29,17 @@ const SallaPlaceholder = /*@__PURE__*/ proxyCustomElement(class SallaPlaceholder
           * The size of the icon. Defaults to [`md`] = 45px for font icon & width/height: 3.5rem for svg icon
           */
         this.iconSize = 'md';
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.translationLoaded = true;
+            // translationLoaded is already true on later calls, so force the render that refreshes the labels read in render()
+            forceUpdate(this);
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     alignmentClass() {
         return {
             's-placeholder-wrapper': true,
@@ -42,7 +49,7 @@ const SallaPlaceholder = /*@__PURE__*/ proxyCustomElement(class SallaPlaceholder
         };
     }
     render() {
-        return (h(Host, { key: '7680e249ef9627c8c53c1fcbd02bb942d3f650a4', class: this.alignmentClass() }, h("div", { key: '17df509f27879794ea37172826489033ddb85045', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '117de24add832359f0a046a5e67b16748e25572d', class: "s-placeholder-title" }, h("slot", { key: '3bc517f00c6427a1103f859b58e9763f10851f4d', name: 'title' }, h("span", { key: '17615872d9b5e03d9b33d01fde5e1753f5f7a97e' }, salla.lang.get('common.elements.no_options')))), h("div", { key: '962eafb62268b4ae3e25610a0dec6734ac58378a', class: "s-placeholder-description" }, h("slot", { key: '6326fdee550361c7cf6be95f1da2baf5616bd0f4', name: 'description' }, h("span", { key: '179fbe8c4352fad27a88b39baa6d858075006bfe' }, salla.lang.get('common.errors.empty_results'))))));
+        return (h(Host, { key: 'e0ddbbcae1f1770e0aa1fde820b80f010b837c70', class: this.alignmentClass() }, h("div", { key: '42aaa39f4b5ff6e854d8752fd8b7f51967a61640', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '89b58694c6e8e52df2a6cfcf53f928e8e1be65cc', class: "s-placeholder-title" }, h("slot", { key: '810a0cbc0338a430f48e0478d855baef78368d30', name: 'title' }, h("span", { key: '29f370d5460607afd3ad8971afb8387e3ab8ccd7' }, salla.lang.get('common.elements.no_options')))), h("div", { key: 'daabc9a39c770605c2b0a18a8e32c9b77cd28387', class: "s-placeholder-description" }, h("slot", { key: 'b318ca5417191c0e78eaab5e814dbc393679b416', name: 'description' }, h("span", { key: '1f616f82f63bbe79d7f88ae83544ce0ab97aa9fb' }, salla.lang.get('common.errors.empty_results'))))));
     }
     static get style() { return sallaPlaceholderCss; }
 }, [4, "salla-placeholder", {

package/dist/components/salla-price-range2.js

@@ -29,7 +29,7 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class SallaPriceRange e
             this.minPrice = this.filtersData.price.min;
             this.maxPrice = this.filtersData.price.max;
         }
-        salla.lang.onLoaded(() => {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.moreThanLabel = salla.lang.getWithDefault('common.elements.more_than', this.moreThanLabel);
             this.lessThanLabel = salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel);
             this.toLabel = salla.lang.getWithDefault('common.elements.to', this.toLabel);
@@ -56,6 +56,9 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class SallaPriceRange e
             // do whatever
         }
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     /**
      * reset the price range inputs
      */
@@ -153,9 +156,9 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class SallaPriceRange e
         this.maxPrice = value === undefined ? '' : value;
     }
     render() {
-        return (h(Host, { key: '582547be2a058bd2ab9c8567b5925f25711e1aff' }, this.filterValues.map((filterValue, index) => {
+        return (h(Host, { key: '58b6733af46dcfc2f58f6096a3054512aea0f13a' }, this.filterValues.map((filterValue, index) => {
             return h("label", { class: "s-filters-label", htmlFor: `${this.option.key}-${index}`, key: index }, h("input", { id: `${this.option.key}-${index}`, name: "price", type: "radio", checked: this.isChecked(filterValue), class: "s-filters-radio", onChange: e => this.handleMinMaxPrice(e, filterValue) }), h("span", { innerHTML: this.getPriceLabel(filterValue) }));
-        }), h("div", { key: '36dea18b1f8f9b9c11a235328d6019cdb0ea5d9d', class: "flex justify-center items-center" }, h("div", { key: '765c5a4eca4cb39b47cba341e8c8f7b7888f0072', class: "relative max-w-xl w-full" }, h("div", { key: '24c54bcec699865a391f198d701abcdcf40bd438', class: "s-price-range-inputs" }, h("div", { key: '962c157d0d7df4f096eed09b51618f3bdadaa347', class: "s-price-range-relative" }, h("div", { key: 'e39123015563b93553be0498673245311644f178', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '4dadf22dc8ad4a982a07acdbb5b62b28b46aa49a', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: '1aea9954befb49f6c9f3f0b1d20ce04defa352b9', class: "s-price-range-gray-text" }, " -"), h("div", { key: 'c4ed3a532ab1c780e69bcadd96ed9581e0a69a85', class: "s-price-range-relative" }, h("div", { key: '3489752cc4de7fb82e758bf877959d7c34094d28', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '9f06151e1156553f0a45283c0db0af92c269c110', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: '1496f0eb951492d3eaad51c90bc1234d746d748c', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: '9efb20a46dae252c5e82bb52f0bcb57c8e030c99', innerHTML: this.isRTL ? IconArrowLeft : arrowRight })))))));
+        }), h("div", { key: 'ffac46ec70c43e8e6866c27e7885700d8b84e02e', class: "flex justify-center items-center" }, h("div", { key: 'a44f86c833a9311fdbd043bacab3c8e39a3798a3', class: "relative max-w-xl w-full" }, h("div", { key: '58da7b0ff0bd6599660ddf2aa2b6f1c06fbd4e3a', class: "s-price-range-inputs" }, h("div", { key: 'f6cc6ea7bc4fa74b962adc29fd0f496a81ff7f98', class: "s-price-range-relative" }, h("div", { key: 'c5dcb135e50a0eafb9662deb3adde895ea997fa9', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: 'ddc438e870e21a030984ba5422d686ee0d756b9a', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: '713b4a7ba19e6c00a57b20978813dbd250acec6d', class: "s-price-range-gray-text" }, " -"), h("div", { key: '8a87cb916d418b898747b7dfe63d770419892ec1', class: "s-price-range-relative" }, h("div", { key: 'fb1790fdc5494925560a4ce8be907f980090ceff', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '164c84322ccf6fdddc2cb93f40440e4ddab9c164', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: 'cfb8f9d06b1b66170bddfebcd5bc0fea6bdcb9ff', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: '1c1251cc2becb339ee3f286d3be50acc5ea159c0', innerHTML: this.isRTL ? IconArrowLeft : arrowRight })))))));
     }
     componentDidLoad() {
         this.isReady = true;

package/dist/components/salla-product-availability2.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { B as BellRing } from './bell-ring.js';
 import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$4 } from './salla-button2.js';
@@ -54,11 +54,8 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class SallaPro
             error?.classList.contains('s-product-availability-error-msg') && (error.innerText = '');
             e.keyCode === 13 && this.submit();
         };
-        salla.lang.onLoaded(() => {
-            this.translationLoaded = true;
-            this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
-            this.modal?.setTitle(this.title_);
-        });
+        // Read before the guest path below strips the attribute; the lang subscriber runs later, from connectedCallback.
+        this.hostTitle = this.host.title;
         if (!this.productId) {
             this.productId = salla.config.get('page.id');
         }
@@ -68,6 +65,18 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class SallaPro
         this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
         this.host.removeAttribute('title');
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.translationLoaded = true;
+            this.title_ = this.hostTitle || salla.lang.get('pages.products.notify_availability_title');
+            this.modal?.setTitle(this.title_);
+            // translationLoaded is already true on later calls, so force the render that refreshes the labels read in render()
+            forceUpdate(this);
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     channelsWatcher(newValue) {
         // fall back to store-configured channels, reading config directly when the SDK helper is missing
         let channels = newValue || salla.api.product.getAvailabilityChannels?.() || Helper.availabilityChannels();
@@ -146,7 +155,7 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class SallaPro
         field.nextElementSibling['innerText'] = '* ' + errorMsg;
     }
     render() {
-        return (h(Host, { key: 'ba2423b2f12f2c6b3870c55b12157bbcf42407e8', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
+        return (h(Host, { key: 'aa9fad186e8f24c5e27a1e9e6d5de75806226bce', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
             ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRing, class: "s-product-availability-subs-icon" }), salla.lang.get('pages.products.notify_availability_success'))
             :
                 h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.openModel() }, salla.lang.get('pages.products.notify_availability')), this.isUser || this.isSubscribedToProduct ? '' : this.renderModal()));

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

@@ -56,14 +56,6 @@ const SallaProductCard = /*@__PURE__*/ proxyCustomElement(class SallaProductCard
             salla.wishlist.event.onRemoved((_res, id) => this.toggleFavoriteIcon(false, id));
             this.placeholder = salla.url.asset(salla.config.get('theme.settings.placeholder'));
         });
-        // Language
-        salla.lang.onLoaded(() => {
-            this.remained = salla.lang.get('pages.products.remained');
-            this.donationAmount = salla.lang.get('pages.products.donation_amount');
-            this.startingPrice = salla.lang.get('pages.products.starting_price');
-            this.addToCart = salla.lang.get('pages.cart.add_to_cart');
-            this.outOfStock = salla.lang.get('pages.products.out_of_stock');
-        });
         // Parse product data
         if (!this.product) {
             return;
@@ -75,6 +67,19 @@ const SallaProductCard = /*@__PURE__*/ proxyCustomElement(class SallaProductCard
             salla.log('Bad json passed via product prop');
         }
     }
+    connectedCallback() {
+        // Language
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.remained = salla.lang.get('pages.products.remained');
+            this.donationAmount = salla.lang.get('pages.products.donation_amount');
+            this.startingPrice = salla.lang.get('pages.products.starting_price');
+            this.addToCart = salla.lang.get('pages.cart.add_to_cart');
+            this.outOfStock = salla.lang.get('pages.products.out_of_stock');
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     // Private Methods
     initCircleBar() {
         let qty = this.productData.quantity, total = this.productData.quantity > 100 ? this.productData.quantity * 2 : 100, roundPercent = (qty / total) * 100, bar = this.pie.querySelector('.s-product-card-content-pie-svg-bar'), strokeDashOffsetValue = 100 - roundPercent;

package/dist/components/salla-product-options2.js

@@ -282,12 +282,6 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
             const completed = option.donation.target_amount <= option.donation.collected_amount;
             return h("div", { class: { "s-product-options-donation-message": true, "s-product-options-donation-completed": completed, "s-product-options-donation-expired": !completed } }, h("p", null, option.donation.target_message), h("span", { innerHTML: completed ? salla.money(option.donation.target_amount) : '' }));
         };
-        salla.lang.onLoaded(() => {
-            this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
-            this.donationAmount = salla.lang.get('pages.products.donation_amount');
-            this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');
-            this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');
-        });
         if (this.options) {
             try {
                 this.setOptionsData(Array.isArray(this.options) ? this.options : JSON.parse(this.options));
@@ -308,6 +302,14 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
             });
         }
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
+            this.donationAmount = salla.lang.get('pages.products.donation_amount');
+            this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');
+            this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');
+        });
+    }
     /**
      * Sets the options data for the product
      * @param optionsData - Array of product options
@@ -688,6 +690,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         return needsCartId ? salla.api.cart.getCurrentCartId(false, "salla-product-options") : null;
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         if (this.pasteHandler) {
             document.removeEventListener("paste", this.pasteHandler);
         }

package/dist/components/salla-product-size-guide.js

@@ -26,12 +26,17 @@ const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class SallaProd
         this.__registerHost();
         this.hasError = false;
         salla.event.on('size-guide::open', (product_id) => this.open(product_id));
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.placeholder_title = salla.lang.get('pages.products.size_guide_placeholder');
             this.placeholder_description = salla.lang.get('pages.products.size_guide_placeholder_info');
             this.modal_title = salla.lang.get('pages.products.size_guides');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     /**
      * Show the size-guide modal window
      */
@@ -60,11 +65,11 @@ const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class SallaProd
         return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
     }
     render() {
-        return (h("salla-modal", { key: 'de368aff05a19d87eb4e99f4e1d7eee36155f435', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: 'c4ab31b3e6ef2751761ca2db27554f7f5bf057fc', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '17cfceb5ccb0546928f87f956267e9d0c11017ac', slot: "loading" }, h("div", { key: '4f4e20a62396d7825315203ffd22a72030e821b1', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: 'd9132b26634ae1997dad9f1229b248c2cd76fff0', height: '15px', width: '25%' }), h("div", { key: '1b6a236851eef6e7caf7b7a0e84e591824b4e4ef', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: 'bae06741881b57b4eb853f1256a22f9393d9cea4', height: '40px' }), h("salla-skeleton", { key: 'fdeb75a853f89df154b69dbd48fc8e233561af59', height: '40px' }), h("salla-skeleton", { key: 'd0be70bc141f04fd24adc86c56eec3a5e896f2d4', height: '40px' }), h("salla-skeleton", { key: 'c5146addbf2d5b9bda05170a9743cad0e08d8674', height: '40px' })), h("div", { key: '04dbbffe2de708c984c5d0966aa2b86c0051bd14', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '320fb33a2e5d9ee1f4b87c18b3f3dd13de180d4f', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'f06aeac8e2f8ea86ec9b1c5c6f2b31172f23209f', height: '10px', width: '75%' }), h("salla-skeleton", { key: '1accf852a34edcac77a77151ebf67ba8e05cc729', height: '10px', width: '50%' }), h("salla-skeleton", { key: '42d4c3364779a6ee130339e37affe2e0c590e6a7', height: '10px', width: '75%' }), h("salla-skeleton", { key: '13064a231460414b4a0abd19dda41b01ac1ee04f', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'd5a50f96ca3bab125503f836cd883cfb98ca135d', height: '10px', width: '25%' }), h("salla-skeleton", { key: '11cd2ed36d9754c32173f14cd7d5ea99fc2b5577', height: '10px', width: '60%' }), h("salla-skeleton", { key: 'a5b3a192d0e38dc13a025b8b8e0aba767f35611b', height: '10px', width: '45%' }), h("salla-skeleton", { key: 'dddcb26038e180fb5b686b29d286316d4314909f', height: '10px', width: '30%' })))), h("slot", { key: '43a08b9b6e64955b726b832f0849617ac31d4c25', name: "header" }), !this.hasError && !!this.guides ?
+        return (h("salla-modal", { key: '587dbc28fa828df2a47a4db1c124df032fe719fa', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: '822224aa89fb065c7262abf2f24914ed1fa3d8bb', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '84e14a400f9417aa9be851a07f0203348a560aec', slot: "loading" }, h("div", { key: '5cbdbcf560f08279543c4d25fd21416ce2da1314', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: 'e3139f2898256adc2c20fbb86e96a9f5d008a677', height: '15px', width: '25%' }), h("div", { key: '961f482bf358c5a4ca0d980561bafdcd7489fa68', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: '1754361211a771952be69eeda9a4c9788aaff0e6', height: '40px' }), h("salla-skeleton", { key: '2ea3578f8751a2526947d5c067392ef95e3bcf44', height: '40px' }), h("salla-skeleton", { key: '32bba195c5f6a60ce9837b4d4cbfa302d6ddfb07', height: '40px' }), h("salla-skeleton", { key: '9888b01cd47c5acdc0a159ad49db228efd630d75', height: '40px' })), h("div", { key: 'd86e706b2393b17301f9f28b4b303f00bf743363', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '02e0330958fd73288d5c654fce7169470cdf47cd', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'cccb8bc372c6ccfdf707621190bba4bc38aecb99', height: '10px', width: '75%' }), h("salla-skeleton", { key: '95f8e83b3b1a54a52da1ff2e61a866239575cf7b', height: '10px', width: '50%' }), h("salla-skeleton", { key: '4880b1d82cea617cae837ad2d6dd4d627fe8d9e3', height: '10px', width: '75%' }), h("salla-skeleton", { key: '38980cc41e7388b41e35015ceed72d025bd82980', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'bb1ad6a995e9e27b851007cae2c1f7204f3c2d91', height: '10px', width: '25%' }), h("salla-skeleton", { key: 'fc5cd1e7adafca96e00b9284123bb3eb9f892c9c', height: '10px', width: '60%' }), h("salla-skeleton", { key: '89bbd77ec6da0c8e03dd2fb9f60c929f49415c83', height: '10px', width: '45%' }), h("salla-skeleton", { key: '0666ce266b9411913ae4db64c61d3cfa44cf4245', height: '10px', width: '30%' })))), h("slot", { key: '31a338bdc12e2a4ea1f80ea4bd700e293020b840', name: "header" }), !this.hasError && !!this.guides ?
             [
                 h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description }))))
             ]
-            : this.showPlaceholder(), h("slot", { key: '5ae0956ca1f9313b5ef3d01dbdcab32f2e975e05', name: "footer" })));
+            : this.showPlaceholder(), h("slot", { key: '887b97cd58b442db20dad02db8ace42847bcef75', name: "footer" })));
     }
     get host() { return this; }
     static get style() { return sallaProductSizeGuideCss; }

package/dist/components/salla-products-list2.js

@@ -110,14 +110,14 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
             this.includes = null;
         }
         Helper.setIncludes(this.includes);
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.placeholderText = salla.lang.get('pages.categories.no_products');
             this.endOfText = salla.lang.get('common.elements.end_of_content');
             this.failedLoadMore = salla.lang.get('common.elements.failed_to_load_more');
             this.currentPage = salla.config.get('page');
         });
-    }
-    connectedCallback() {
         //Override browser scroll restoration default behaviour
         if ('scrollRestoration' in history)
             history.scrollRestoration = 'manual';
@@ -128,6 +128,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         salla.event.on('wishlist::storage.synced', this.onWishlistStorageSynced);
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         window.removeEventListener('DOMContentLoaded', this.boundScrollToLastViewedProduct);
         window.removeEventListener('scroll', this.boundHandleScroll);
         salla.event.off('wishlist::removed', this.onWishlistItemRemoved);

package/dist/components/salla-progress-bar2.js

@@ -9,6 +9,9 @@ const SallaProgressBar = /*@__PURE__*/ proxyCustomElement(class SallaProgressBar
     constructor() {
         super();
         this.__registerHost();
+        // set when the constructor builds the donation-target labels, so the subscriber can rebuild them
+        this.hasDonationTarget = false;
+        this.donationEndDate = null;
         /**
          * Set height for the wrapper.
          */
@@ -20,6 +23,8 @@ const SallaProgressBar = /*@__PURE__*/ proxyCustomElement(class SallaProgressBar
                     donationJson.target_end_date = donationJson.target_end_date == '0000-00-00' ? null : donationJson.target_end_date;
                     this.value = donationJson.collected_amount;
                     this.target = donationJson.target_amount;
+                    this.hasDonationTarget = true;
+                    this.donationEndDate = donationJson.target_end_date;
                     this.header = salla.lang.get('pages.products.target');
                     this.message = donationJson.target_end_date ? salla.lang.get('pages.products.donation_target_date') + ' ' + donationJson.target_end_date : '';
                 }
@@ -34,10 +39,6 @@ const SallaProgressBar = /*@__PURE__*/ proxyCustomElement(class SallaProgressBar
         catch (e) {
             salla.log('Wrong donation json');
         }
-        salla.lang.onLoaded(() => {
-            this.header = this.header?.replace('pages.products.target', salla.lang.get('pages.products.target'));
-            this.message = this.message?.replace('pages.products.donation_target_date', salla.lang.get('pages.products.donation_target_date'));
-        });
         salla.onReady(() => {
             this.color = this.color || salla.config.get('theme.color.primary', "#ffd5c4");
             if (!this.unit) {
@@ -45,6 +46,21 @@ const SallaProgressBar = /*@__PURE__*/ proxyCustomElement(class SallaProgressBar
             }
         });
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            if (this.hasDonationTarget) {
+                // rebuilt each time: once translated, the text no longer holds the keys replaced below
+                this.header = salla.lang.get('pages.products.target');
+                this.message = this.donationEndDate ? salla.lang.get('pages.products.donation_target_date') + ' ' + this.donationEndDate : '';
+                return;
+            }
+            this.header = this.header?.replace('pages.products.target', salla.lang.get('pages.products.target'));
+            this.message = this.message?.replace('pages.products.donation_target_date', salla.lang.get('pages.products.donation_target_date'));
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getPercentage() {
         return (this.value / this.target) * 100;
     }

package/dist/components/salla-quick-buy2.js

@@ -1888,10 +1888,15 @@ const SallaQuickBuy = /*@__PURE__*/ proxyCustomElement(class SallaQuickBuy exten
             });
             return true;
         };
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.quickBuy = salla.lang.get('pages.products.buy_now');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     quickBuyHandler() {
         if (salla.config.isGuest() && !this.isGuestCheckout()) {
             this.requireLogin.emit({ productId: this.productId });

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

@@ -75,7 +75,9 @@ const SallaQuickOrder$1 = /*@__PURE__*/ proxyCustomElement(class SallaQuickOrder
         salla.onReady(() => {
             this.productId = this.productId || salla.config.get('page.id');
         });
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.placeHolderEmail = salla.lang.get('common.elements.email');
             this.emailOptional = salla.lang.get('common.elements.optional');
             this.agreementShowText = salla.lang.get('pages.checkout.show_full_agreement');
@@ -83,6 +85,9 @@ const SallaQuickOrder$1 = /*@__PURE__*/ proxyCustomElement(class SallaQuickOrder
             this.userNameLabel = salla.lang.get('pages.products.your_name');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getBtnColor() {
         return this.quickOrderStyle === 'default' ? 'light' : 'primary';
     }

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

@@ -9,6 +9,7 @@ import { M as MailIcon } from './mail.js';
 import { d as defineCustomElement$4, S as ShippingFast, a as Star } from './salla-rating-modal-v22.js';
 import { W as WhatsappIcon } from './whatsapp2.js';
 import { H as Helper } from './Helper.js';
+import { s as setTranslationDefault } from './translate.js';
 import { d as defineCustomElement$a } from './salla-attachment-view2.js';
 import { d as defineCustomElement$9 } from './salla-button2.js';
 import { d as defineCustomElement$8 } from './salla-file-upload2.js';
@@ -98,11 +99,13 @@ const SallaRatingModal = /*@__PURE__*/ proxyCustomElement(class SallaRatingModal
         salla.onReady(() => {
             this.orderId = salla.config.get('page.id');
         });
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.contactUsLabel = salla.lang.get('blocks.footer.social');
             const setNestedAsync = (lang, key, value) => {
                 return new Promise((resolve) => {
-                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                    setTranslationDefault(lang, key, value);
                     resolve(true);
                 });
             };
@@ -152,6 +155,9 @@ const SallaRatingModal = /*@__PURE__*/ proxyCustomElement(class SallaRatingModal
             setTranslations();
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getV2Ref() {
         return this.v2Ref ?? this.host.querySelector('salla-rating-modal-v2');
     }