@salla.sa/twilight-components 2.14.595 → 2.14.597

package/dist/esm/salla-scopes.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-HRJpfiBN.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host } from './index-BmRQjBRH.js';
 import { S as Search } from './search-BscTeWDc.js';
 
 var StoreAlt = `<!-- Generated by IcoMoon.io -->
@@ -58,10 +58,17 @@ const SallaScopees = class {
         salla.event.on('scopes::open', ({ mode = null, product_id = null } = {}) => {
             this.open(mode, product_id);
         });
-        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?.();
+    }
     /**
      * Whether to hand scope selection to the native app instead of rendering the web modal.
      * Delegates only inside the native SPA webview (Salla.mobile.isSpaWebview() — bridge live AND

package/dist/esm/salla-search-product-card.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-HRJpfiBN.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BmRQjBRH.js';
 import { S as Star } from './star2-D4oPi1Ov.js';
 import { C as Cart } from './cart-gFG8By9O.js';
 

package/dist/esm/salla-search.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-HRJpfiBN.js';
+import { r as registerInstance, h, a as getElement } from './index-BmRQjBRH.js';
 import { S as Search } from './search-BscTeWDc.js';
 import { C as Cancel } from './cancel-BsLF_HK7.js';
 import { A as ArrowLeftIcon, a as ArrowRightIcon } from './keyboard_arrow_right-Vqpj4CWE.js';

package/dist/esm/salla-skeleton.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-HRJpfiBN.js';
+import { r as registerInstance, h, H as Host } from './index-BmRQjBRH.js';
 
 const sallaSkeletonCss = "/*!twlt*/:host{display:block}.s-loyalty-skeleton .s-loyalty-prize-item .s-skeleton-wrapper{margin-left:auto;margin-right:auto}.s-skeleton-wrapper{display:block}@keyframes pulse{50%{opacity:.5}}.s-skeleton-wrapper{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.s-skeleton-item{height:100%;width:100%;border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.s-skeleton-item:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.s-skeleton-item-circular{border-radius:9999px}";
 
@@ -9,16 +9,16 @@ const SallaSkeleton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         /**
-       *  Set the shape type of the skeleton is it circle or normal
-       */
+         * The shape type of the skeleton. 'circle' for circular skeletons (e.g., avatars), 'normal' for rectangular shapes. Default is 'normal'.
+         */
         this.type = 'normal';
         /**
-       *  Set the skeleton width
-       */
+         * The width of the skeleton. Can be any CSS width value (e.g., '100%', '50px', '2rem'). Default is '100%'.
+         */
         this.width = '100%';
         /**
-       *  Set the skeleton height
-       */
+         * The height of the skeleton. Can be any CSS height value (e.g., '100%', '50px', '2rem'). Default is '100%'.
+         */
         this.height = '100%';
     }
     render() {
@@ -26,7 +26,7 @@ const SallaSkeleton = class {
             's-skeleton-item': true,
             's-skeleton-item-circular': this.type == 'circle',
         };
-        return (h(Host, { key: 'b6ea2f9ba293c4c5922a5abf48f05845d02a8590', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '8fa3bed8b7aa80e01742d6c2496bc0578aabe7f1', class: classes }, "\u00A0")));
+        return (h(Host, { key: '7a1ce16742202fd5e2e37eded505d94e03079137', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '8fb06aebef2322b52ad83f7524f42d8908c4b5b0', class: classes }, "\u00A0")));
     }
 };
 SallaSkeleton.style = sallaSkeletonCss;

package/dist/esm/salla-social-share.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-HRJpfiBN.js';
+import { r as registerInstance, h, a as getElement } from './index-BmRQjBRH.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 import { f as facebook, t as twitter } from './facebook-CO-PeZ27.js';
 import { M as MailIcon } from './mail-DmgxDvXL.js';

package/dist/esm/salla-social.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-HRJpfiBN.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BmRQjBRH.js';
 import { f as facebook, t as twitter } from './facebook-CO-PeZ27.js';
 
 var instagram = `<!-- Generated by IcoMoon.io -->
@@ -41,10 +41,15 @@ const SallaSocial = class {
         this.iconsList = { instagram, twitter, facebook, youtube, snapchat, tiktok };
         this.socialSlot = this.host.querySelector('[slot="social-item"]')?.innerHTML ||
             `<a href={link} rel="noopener" target="_blank" title={type} aria-label={type}><span class="s-social-icon">{icon}</span></a>`;
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.links = salla.config.get('store.social');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getLinksArray() {
         return this.links ? Object.entries(this.links)
             .filter(([key, value]) => !!value && key !== 'whatsapp')
@@ -55,7 +60,7 @@ const SallaSocial = class {
     }
     render() {
         const linksArray = this.getLinksArray();
-        return (h(Host, { key: '4b8d92800f475d314d5637e290c1fa95c78335f5' }, h("ul", { key: 'b6134f221891e28484155c55d3bcf0182bcb967a', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, h("div", { id: "social-slot", innerHTML: this.socialSlot
+        return (h(Host, { key: 'ce42d3f37cc3c9b9753f9431b43267e4a49153a3' }, h("ul", { key: '515e3effaf234de3b639bc5276559f05de06e755', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, h("div", { id: "social-slot", innerHTML: this.socialSlot
                 .replace(/\{icon\}/g, this.iconsList[link.type])
                 .replace(/\{type\}/g, link.type)
                 .replace(/\{link\}/g, link.value.toString()) })))))));

package/dist/esm/salla-tab-content_3.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, c as createEvent, a as getElement } from './index-HRJpfiBN.js';
+import { r as registerInstance, h, c as createEvent, a as getElement } from './index-BmRQjBRH.js';
 
 const sallaTabContentCss = "";
 
@@ -48,8 +48,8 @@ const SallaTabHeader = class {
         this.tabSelected = createEvent(this, "tabSelected");
         this.id = generateRandomId();
         /**
-       * The class applied to the currently active(selected) tab
-       */
+         * The class applied to the currently active(selected) tab
+         */
         this.activeClass = undefined;
         /**
          * Set the height of the tab bar
@@ -90,7 +90,7 @@ const SallaTabHeader = class {
             's-tabs-active': this.isSelected,
         };
         return [
-            h("div", { key: '04bb51760a3e43aed1645cf724b90e21ee2631bf', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: 'c9d5fc5dbc0a45712c9aa5e03becc613590011ea' })),
+            h("div", { key: '1169c14eb00246f521ccb3929f7167d605d18a7e', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '33d608f80ee3ff772bae744c20caa70755334463' })),
         ];
     }
 };

package/dist/esm/salla-tiered-offer.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-HRJpfiBN.js';
+import { r as registerInstance, h, H as Host } from './index-BmRQjBRH.js';
 
 var DiscountType;
 (function (DiscountType) {
@@ -81,13 +81,18 @@ const SallaTieredOffer = class {
         this.handleTabClick = (tierName) => {
             this.activeTabTier = tierName;
         };
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.loyaltyProgramText = salla.lang.get('blocks.tiered_offer.program_title');
             this.currentTierText = salla.lang.get('blocks.tiered_offer.current_tier');
             this.discountText = salla.lang.get('blocks.tiered_offer.discount');
             this.benefitText = salla.lang.get('blocks.tiered_offer.tier_description');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     async componentWillLoad() {
         try {
             await salla.onReady();

package/dist/esm/salla-trust-badges.entry.js

@@ -1,7 +1,8 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-HRJpfiBN.js';
+import { r as registerInstance, h, H as Host } from './index-BmRQjBRH.js';
+import { s as setTranslationDefault } from './translate-CxrJQ3Jf.js';
 
 const sallaTrustBadgesCss = "/*!twlt*/.s-trust-badges-wrapper{display:flex;align-items:center}.s-trust-badges-wrapper>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.s-trust-badges-wrapper:where([dir=\"rtl\"],[dir=\"rtl\"] *)>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}.s-trust-badges-label{margin-bottom:0.25rem;font-size:0.875rem;line-height:1.25rem}.s-trust-badges-number{font-size:0.875rem;line-height:1.25rem}";
 
@@ -15,18 +16,21 @@ const SallaTrustBadges = class {
         this.commercialRegisterLabel = '';
         this.freelanceLabel = '';
     }
-    componentWillLoad() {
+    connectedCallback() {
         this.initializeTranslations();
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     // The badge image is a KSA-only legal requirement.
     isVisibilityEnforced() {
         return salla.config.get('store.store_country') === 'SA';
     }
     initializeTranslations() {
-        salla.lang.onLoaded(() => {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             // Set translations synchronously
             const setTranslation = (lang, key, value) => {
-                salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                setTranslationDefault(lang, key, value);
             };
             // Add missing translations
             setTranslation('ar.trans', 'blocks.footer.commercial_register', 'السجل التجاري');

package/dist/esm/salla-user-menu.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-HRJpfiBN.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BmRQjBRH.js';
 import { A as ArrowDown } from './keyboard_arrow_down-DCZbpt2a.js';
 import { B as BellRing } from './bell-ring-D3mWkc-3.js';
 import { C as Cart } from './cart-gFG8By9O.js';
@@ -113,6 +113,12 @@ const SallaUserMenu = class {
             profile: UserCircle
         };
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => this.loadTranslations());
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     async componentWillLoad() {
         await salla.onReady();
         await salla.lang.onLoaded();

package/dist/esm/salla-user-profile.entry.js

@@ -1,13 +1,12 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-HRJpfiBN.js';
+import { r as registerInstance, h } from './index-BmRQjBRH.js';
 import { G as Genders } from './interfaces-OF8QcbMM.js';
 
 const sallaUserProfileCss = "/*!twlt*/:host{display:block}.form-input{height:2.5rem;width:100%;border-radius:0.375rem;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.form-input:focus{border-color:var(--color-primary);--tw-ring-color:transparent}.form-input:is(.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.form-input:focus:is(.dark *){border-color:var(--color-primary)}@media (min-width: 640px){.form-input{font-size:0.875rem;line-height:1.25rem}}.s-user-profile-wrapper{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:1.5rem}@media (min-width: 640px){.s-user-profile-wrapper{grid-template-columns:repeat(2, minmax(0, 1fr));gap:2rem}}.s-user-profile-field-label{margin-bottom:0.5rem;display:block;font-size:0.875rem;line-height:1.25rem;font-weight:700;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.s-user-profile-field-error{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.s-user-profile-submit{margin-top:1.5rem;width:100%}.s-user-profile-filepond-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center}.s-user-profile-filepond-placeholder-icon{margin-bottom:0.25rem}.s-user-profile-filepond-placeholder-icon svg{height:1.5rem;width:1.5rem;fill:#7c8082}.s-user-profile-skeleton-wrapper{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));grid-template-rows:repeat(3, minmax(0, 1fr));gap:3rem}";
 
 const SallaUserProfile = class {
-    // Constructor
     constructor(hostRef) {
         registerInstance(this, hostRef);
         /**
@@ -36,8 +35,10 @@ const SallaUserProfile = class {
         this.invalid_email_trans = salla.lang.get('pages.error.invalid_value', {
             attribute: 'email',
         });
+    }
+    connectedCallback() {
         // Localization setup when the language is loaded
-        salla.lang.onLoaded(() => {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             // Assigning translated strings to state properties
             // These translations are fetched from the localization object
             this.first_name_trans = salla.lang.get('pages.profile.first_name');
@@ -59,6 +60,9 @@ const SallaUserProfile = class {
             });
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     // Event handler for phone number field changes
     phoneNumberFieldEventHandler(data) {
         if (!data.detail.number) {

package/dist/esm/salla-user-settings.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-HRJpfiBN.js';
+import { r as registerInstance, h, H as Host } from './index-BmRQjBRH.js';
 
 var Bullhorn = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -135,11 +135,16 @@ const SallaUserSettings = class {
                 });
             }
         });
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.registerTranslationDefaults();
             this.loadTranslations();
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getDaysUntilExecution(executionAt) {
         const executionMs = executionAt > 1e12 ? executionAt : executionAt * 1000;
         return Math.max(0, Math.ceil((executionMs - Date.now()) / 86400000));
@@ -554,7 +559,7 @@ const SallaUserSettings = class {
         return (h("salla-button", { fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeleteModal() }, this.capitalizeText(this.deleteAccount)));
     }
     render() {
-        return (h(Host, { key: '830b118e5ceabea1a2b14298d4aba796a040ec23', class: "s-user-settings-wrapper" }, this.canHideName && (h("div", { key: '3cf9e816c9757a8b60d6529091fe14df5ea32e4e', class: "s-user-settings-section" }, h("salla-list-tile", { key: '0ffb3e8f97d6b0af34fd57721f9430cc48cc67d2' }, h("div", { key: '702c5826f7f2fe9b4dcfe358f66cef306bafb5ab', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'e4ed4d6b03f1df675900b6a9ea6ea53b222414de', innerHTML: UserCancel })), h("div", { key: '4f6d392cdd4080ddff359381dfaf21847fdfba13', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'e786b26d5547e83bcab8df6dfa0c1697a1dc5727', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: 'a875a59062a1ff9e600b3b2cac9e1265467d45d6', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: '450801ab871d8603fc79b05a0b5b8bc4d7ce4457', class: "s-toggle" }, h("input", { key: '9b79c1e08008b3c839ffe2492bf160b0e51c30d8', class: "s-toggle-input", checked: this.isHiddenName, onChange: e => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: 'ca0807167186af65c389afd1f6db8487c61aa7cf', class: "s-toggle-switcher" })))))), h("div", { key: '57b71f67259053faad864b1c81a496b4cb0792f6', class: "s-user-settings-section" }, h("salla-list-tile", { key: '5f59cf890492310d734e3e3de92f5866280993c1' }, h("div", { key: 'a3d39ee7bc01fb41060e8447d566a721f0638673', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'ebe6f58818f3954091ec278f7dd0d5b947e6bf01', innerHTML: Bullhorn })), h("div", { key: '68f3f48970a343238d9a221cb5581584db5695a8', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '2b3edd4333a7730eae644023a021d49a57112fb9', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '0f406c80ed900ab42b5eaa4148b27e3db6222a0a', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: 'e0b42fd7b6df963de51ca8e9ddd06a1710589760', class: "s-toggle" }, h("input", { key: 'e67b1189631ea46e58fa12228b4d357a621f4cc6', class: "s-toggle-input", checked: this.isNotifiable, onChange: e => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: '52620a74be33301cbcb31d60d80919d99e342b2f', class: "s-toggle-switcher" }))))), this.isDeleteAccountEnabled ? (h("div", { class: "s-user-settings-section s-user-settings-section-delete-user" }, h("salla-list-tile", null, h("div", { slot: "icon", class: "s-user-settings-section-icon" }, this.renderUserDeleteIcon()), h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deleteAccount)), h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.isDeletePending ? this.deleteAccountPending : this.deleteAccountDesc)), h("div", { slot: "action", class: "s-user-settings-section-action" }, this.renderDeleteSectionAction())))) : (h("div", { class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", null, h("div", { slot: "icon", class: "s-user-settings-section-icon" }, h("span", { innerHTML: UserOff })), h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { slot: "action", class: "s-user-settings-section-action" }, h("salla-button", { fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount)))))), this.isDeleteAccountEnabled ? (h("salla-modal", { id: "salla-user-settings-delete-modal", width: "xs", centered: true, showBack: this.currentStep === 'otp', isClosable: this.currentStep !== 'success', iconStyle: this.currentStep === 'success' ? 'success' : undefined, onModalVisibilityChanged: e => this.handleModalVisibilityChanged(e), onModalBack: () => this.goBackFromOtp(), ref: modal => (this.confirmationModal = modal) }, this.currentStep !== 'success' ? (h("span", { slot: "icon", class: "s-user-settings-delete-icon" }, this.renderUserDeleteIcon())) : null, h("div", { key: this.currentStep, class: "s-user-settings-delete-step" }, this.renderDeleteStep()))) : (h("salla-modal", { width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => (this.confirmationModal = modal) }, h("span", { slot: "icon", class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { class: "s-user-settings-confirmation" }, h("div", { class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { class: "s-user-settings-confirmation-actions" }, h("salla-button", { width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { fill: "outline", loading: this.buttonLoading, width: "wide", onClick: () => this.confirmDeactivateAccount() }, this.capitalizeText(this.deactivateAccount))))))));
+        return (h(Host, { key: '371350c4fcfd92a9434000b1390cb5ab01a92cc5', class: "s-user-settings-wrapper" }, this.canHideName && (h("div", { key: '4e4ade371cc81d7e4c5750f5341f30bfcfc082a6', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'fd23340814c525c686f9c94e17bc6a3d2182ac1e' }, h("div", { key: 'd0cfc9df3a6072335133ac2817ed9afa34ea489e', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '17546bf4c7931fafdb769168c6cb1788303a6312', innerHTML: UserCancel })), h("div", { key: '09ec636514d69b741a3cd1a91d5599d0ff34cca1', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'f69abae297492ed509475590b2623745efb30f03', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '17c0191aae2401b8a1cd22942a5acecc0dfe1c62', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: '6b55ddc3ec0a01767f870e279ae7bfad9f43663e', class: "s-toggle" }, h("input", { key: '18af334c71b48528543de61a9c3a71a73dc054b5', class: "s-toggle-input", checked: this.isHiddenName, onChange: e => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: 'c90548df6ff7dc5beceeb2347545923ea4de096e', class: "s-toggle-switcher" })))))), h("div", { key: 'c471b3a73abbfbc1a894e5f2c9fcb8af4ea085f5', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'a906c43c0b227d6f757ec919047cfade9192cdc4' }, h("div", { key: '7e4c1375e64883c3465393f855a9faa987137bc1', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '5d8ee4cb69ddf765ddb6c108594c7de4cbedd078', innerHTML: Bullhorn })), h("div", { key: '4e0e5b84822e98234be621eab4150c48581e104b', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: 'ac8521a039e4e869cb1aeea7213df8b70ce87bb7', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '6caa3b3d1fe8eadc194ad44a4e2299f9a95018ea', slot: "action", class: "s-user-settings-section-action" }, h("label", { key: '37a26623047ef4cb98f7bbdb8715b515488c5ac0', class: "s-toggle" }, h("input", { key: 'f74fbb125afb8743fc981672ffa56b129c4ed2ed', class: "s-toggle-input", checked: this.isNotifiable, onChange: e => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: '45b367693d63424e859d4dce5538a2ee37ff76a7', class: "s-toggle-switcher" }))))), this.isDeleteAccountEnabled ? (h("div", { class: "s-user-settings-section s-user-settings-section-delete-user" }, h("salla-list-tile", null, h("div", { slot: "icon", class: "s-user-settings-section-icon" }, this.renderUserDeleteIcon()), h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deleteAccount)), h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.isDeletePending ? this.deleteAccountPending : this.deleteAccountDesc)), h("div", { slot: "action", class: "s-user-settings-section-action" }, this.renderDeleteSectionAction())))) : (h("div", { class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", null, h("div", { slot: "icon", class: "s-user-settings-section-icon" }, h("span", { innerHTML: UserOff })), h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { slot: "action", class: "s-user-settings-section-action" }, h("salla-button", { fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount)))))), this.isDeleteAccountEnabled ? (h("salla-modal", { id: "salla-user-settings-delete-modal", width: "xs", centered: true, showBack: this.currentStep === 'otp', isClosable: this.currentStep !== 'success', iconStyle: this.currentStep === 'success' ? 'success' : undefined, onModalVisibilityChanged: e => this.handleModalVisibilityChanged(e), onModalBack: () => this.goBackFromOtp(), ref: modal => (this.confirmationModal = modal) }, this.currentStep !== 'success' ? (h("span", { slot: "icon", class: "s-user-settings-delete-icon" }, this.renderUserDeleteIcon())) : null, h("div", { key: this.currentStep, class: "s-user-settings-delete-step" }, this.renderDeleteStep()))) : (h("salla-modal", { width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => (this.confirmationModal = modal) }, h("span", { slot: "icon", class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { class: "s-user-settings-confirmation" }, h("div", { class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { class: "s-user-settings-confirmation-actions" }, h("salla-button", { width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { fill: "outline", loading: this.buttonLoading, width: "wide", onClick: () => this.confirmDeactivateAccount() }, this.capitalizeText(this.deactivateAccount))))))));
     }
 };
 SallaUserSettings.style = sallaUserSettingsCss;

package/dist/esm/salla-verify.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-HRJpfiBN.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-BmRQjBRH.js';
 import { M as MailIcon } from './mail-DmgxDvXL.js';
 
 var AndroidPhoneIcon = `<!-- Generated by IcoMoon.io -->
@@ -39,11 +39,6 @@ const SallaVerify = class {
          * to use: `salla.api.auth.verify` or `salla.profile.verify`
          */
         this.isProfileVerify = false;
-        salla.lang.onLoaded(() => {
-            this.translationLoaded = true;
-            this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + this.type);
-            this.modal?.setTitle(this.title);
-        });
         if (this.display == 'inline') {
             this.modal = { open: () => '', close: () => '', setTitle: () => '' };
             return;
@@ -69,6 +64,18 @@ const SallaVerify = class {
             this.timer.innerHTML = '30 : 00';
         });
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.translationLoaded = true;
+            this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + this.type);
+            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?.();
+    }
     splitNumber(e) {
         this.resetError();
         let data = e.data || e.target.value; // Chrome doesn't get the e.data, it's always empty, fallback to value then.

package/dist/esm/salla-wallet.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-HRJpfiBN.js';
+import { r as registerInstance, h, H as Host } from './index-BmRQjBRH.js';
 
 const sallaWalletCss = "/*!twlt*/@charset \"UTF-8\";.s-wallet-table{min-width:100%}.s-wallet-table-balance-container{display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:1rem}.s-wallet-table-balance-icon{border-radius:50%;width:52px;height:52px;font-size:25px;padding:16px 13px;background:var(--color-primary-reverse);color:var(--color-primary)}.s-wallet-table-empty-state{display:flex;flex-direction:column;align-items:center}.s-wallet-table-empty-state i{font-size:80px;margin:4rem 0 2rem;color:var(--infinte-color)}.s-wallet-table-transaction-status{padding:6px 19px !important;border-radius:20px;width:max-content;display:flex;align-items:center}.s-wallet-table-transaction-status-default{background:#fff6eb;color:#a46f29}.s-wallet-table-transaction-status-cashback{background:#effbf6;color:#00af6c}.s-wallet-table-transaction-status-refund{background:#ecf3fe;color:#5196f3}.s-wallet-table-transaction-status-purchase{background:#feecec;color:#f55157}.s-wallet-table-transaction-status-icons-success{color:#00af6c}.s-wallet-summary{display:flex;align-items:stretch;gap:16px;margin-bottom:28px}.s-wallet-balance-card{flex:0 0 34%;max-width:240px;background:#fff;border-radius:12px;padding:20px;box-sizing:border-box}.s-wallet-balance-mark{width:48px;height:48px;border-radius:9999px;background:var(--color-primary-reverse, #eaf7f0);color:var(--color-primary, #2e8b57);display:inline-flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px}.s-wallet-balance-figure{font-size:18px;font-weight:700;color:#1c1c1c}.s-wallet-balance-label{margin-top:2px;font-size:12px;color:#9aa0a6}.s-wallet-amount{display:inline-flex;align-items:center;gap:4px;font-weight:700;white-space:nowrap}.s-wallet-amount-credit{color:#00af6c}.s-wallet-amount-debit{color:#f55157}.s-wallet-transaction-type{display:flex;align-items:center;color:#4b5563}@media screen and (min-width: 768px){.s-wallet-balance-card{display:flex;flex-direction:column;justify-content:center}}@media screen and (max-width: 767px){.s-wallet-summary{gap:12px;margin-bottom:20px}.s-wallet-balance-card{flex:0 0 38%;padding:16px;text-align:center}.s-wallet-balance-mark{margin-bottom:8px}}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.table{display:table}.hidden{display:none}.items-center{align-items:center}.p-3{padding:0.75rem}.text-center{text-align:center}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-normal{font-weight:400}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-wallet-container>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.625rem * var(--tw-space-y-reverse))}@media (min-width: 768px){.s-wallet-container>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}}.s-wallet-mobile-title{display:inline-block;width:8rem;font-weight:400;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}@media (min-width: 768px){.s-wallet-mobile-title{display:none}}.s-wallet-reference-id{display:none}@media (min-width: 768px){.s-wallet-reference-id{display:inline-block}}.s-wallet-buy-as-gift-icon{margin-left:0.25rem;margin-right:0.25rem;display:inline-block;color:var(--color-primary)}.s-wallet-copy-to-clipboard-button{display:flex;align-items:center}@media (min-width: 768px){.s-wallet-copy-to-clipboard-button{display:none}}.s-wallet-copy-to-clipboard-button salla-button{position:relative}.s-wallet-copy-to-clipboard-button-icon{pointer-events:none;font-size:0.75rem;line-height:1rem}.s-wallet-copy-to-clipboard-button-icon:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-left:0.25rem}.s-wallet-copy-to-clipboard-button-icon:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-right:0.25rem}@media (min-width: 768px){.s-wallet-status-container{margin-left:0px;margin-right:0px}}.s-wallet-status-container:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-left:auto}.s-wallet-status-container:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-right:auto}.s-wallet-status-container i{margin-top:0.25rem}.s-wallet-status-container i:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-right:0.25rem}.s-wallet-status-container i:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:0.25rem}.s-wallet-rated-text{--tw-text-opacity:1;color:rgb(251 191 36 / var(--tw-text-opacity, 1))}.s-wallet-unrated-text{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.s-wallet-no-content{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding-top:2.5rem;padding-bottom:5rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-wallet-no-content .icon{margin-bottom:1rem;display:flex;height:8rem;width:8rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));font-size:3rem;line-height:1;--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.s-wallet-no-content p{margin-bottom:1rem;font-size:1rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-wallet-table{min-width:100%;border-collapse:separate}@media (min-width: 768px){.s-wallet-table{margin-bottom:-0.75rem;--tw-border-spacing-y:1.25rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}}.s-wallet-table-head{margin-bottom:1.25rem;display:none;--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}@media (min-width: 768px){.s-wallet-table-head{display:table-header-group}}.s-wallet-table-head-tr-th{padding-left:1.5rem;padding-right:1.5rem;text-align:start;font-size:0.875rem;line-height:1.25rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.s-wallet-table-head-tr-th:where([dir=\"ltr\"],[dir=\"ltr\"] *){text-align:left}.s-wallet-table-head-tr-th:last-child:where([dir=\"ltr\"],[dir=\"ltr\"] *){text-align:right}.s-wallet-table-head-tr-th:where([dir=\"rtl\"],[dir=\"rtl\"] *){text-align:right}.s-wallet-table-head-tr-th:last-child:where([dir=\"rtl\"],[dir=\"rtl\"] *){text-align:left}.s-wallet-table-tbody-tr{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;overflow:hidden;border-radius:var(--s-radius, 0.25rem);border-bottom-width:8px;border-top-width:8px;--tw-border-opacity:1;border-color:rgb(249 250 251 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:0.5rem;transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms}@media (min-width: 768px){.s-wallet-table-tbody-tr{display:table-row;flex-direction:row;flex-wrap:nowrap;padding:0px}}.s-wallet-table-tbody-tr-td{width:100%;white-space:nowrap;font-size:0.875rem;line-height:1.25rem}.s-wallet-table-tbody-tr-td:first-child{font-weight:700}@media (min-width: 768px){.s-wallet-table-tbody-tr-td{height:5rem;width:auto}.s-wallet-table-tbody-tr-td:last-child{text-align:end}.s-wallet-table-tbody-tr-td:first-child:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-top-left-radius:0.375rem;border-bottom-left-radius:0.375rem}.s-wallet-table-tbody-tr-td:first-child:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-top-right-radius:0.375rem;border-bottom-right-radius:0.375rem}}.s-wallet-table-tbody-tr-td:first-child{font-weight:700}.s-wallet-table-tbody-tr-td-content{position:relative;display:flex;align-items:center;justify-content:space-between;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.25rem;padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem}@media (min-width: 768px){.s-wallet-table-tbody-tr-td-content{padding-left:1.5rem;padding-right:1.5rem;padding-top:1.5rem;padding-bottom:1.5rem}}.s-wallet-table-tbody-tr-td-content:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-right:0.5rem}.s-wallet-table-tbody-tr-td-content:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-left:0.5rem}.s-wallet-table-tbody-tr a{position:absolute;top:0px;bottom:0px;display:block;width:100%}.s-wallet-table-tbody-tr a:where([dir=\"ltr\"],[dir=\"ltr\"] *){left:0px}.s-wallet-table-tbody-tr a:where([dir=\"rtl\"],[dir=\"rtl\"] *){right:0px}@media (min-width: 768px){.md\\:mx-0{margin-left:0px;margin-right:0px}.md\\:inline-block{display:inline-block}.md\\:hidden{display:none}}.ltr\\:ml-auto:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-left:auto}.ltr\\:mr-4:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-right:1rem}.rtl\\:ml-4:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:1rem}.rtl\\:mr-auto:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-right:auto}";
 

package/dist/esm/salla-wishlist-actions.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-HRJpfiBN.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BmRQjBRH.js';
 
 const sallaWishlistActionsCss = "/*!twlt*/:host{display:block}.s-wishlist-actions-menu{min-width:200px;inset-inline-end:0;inset-inline-start:auto;list-style:none;margin:0;padding:4px 0;box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}.s-wishlist-actions-menu-item{display:block;width:100%;padding:10px 16px;text-align:start;font-size:0.875rem;color:#374151;background:transparent;cursor:pointer;white-space:nowrap}.s-wishlist-actions-menu-item:hover{background-color:#f3f4f6;color:var(--color-primary)}.s-wishlist-actions-panel{box-shadow:0 1px 3px rgba(0, 0, 0, 0.08)}.s-wishlist-actions-panel-select-all{user-select:none}.s-wishlist-actions-select-all:indeterminate,.s-wishlist-actions-select-all:indeterminate:hover,.s-wishlist-actions-select-all:indeterminate:focus{background-color:var(--color-primary);border-color:var(--color-primary)}.s-wishlist-actions-select-all:indeterminate::after{content:\"\";position:absolute;top:50%;left:50%;width:10px;height:2px;background:#fff;border:none;transform:translate(-50%, -50%)}.s-wishlist-actions-social-anchor{display:none}h1.s-wishlist-actions-page-title{text-align:start !important}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-20{z-index:20}.mb-3{margin-bottom:0.75rem}.mt-1{margin-top:0.25rem}.mt-3{margin-top:0.75rem}.flex{display:flex}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-4{padding:1rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline{outline-style:solid}";
 

package/dist/esm/salla-wishlist-summary.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-HRJpfiBN.js';
+import { r as registerInstance, h, H as Host } from './index-BmRQjBRH.js';
 import { H as Heart } from './heart-00vBRoH3.js';
 import { H as Helper } from './Helper-BQ-wOE14.js';
 import './anime.es-CgtvEd63.js';

package/dist/esm/translate-CxrJQ3Jf.js

@@ -0,0 +1,54 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+/**
+ * Translate with a real fallback.
+ *
+ * `salla.lang.get(key, replacements, locale)` takes a LOCALE as its third
+ * argument, not a fallback, and lang.js echoes the key back when it has no
+ * translation. Passing a fallback there silently asks for a nonsense locale and
+ * still renders the raw key to the customer, which is what a store shows while
+ * its translation bundle has not yet picked up newly added keys.
+ */
+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.
+ */
+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.
+ */
+function setTranslationDefault(locale, key, value) {
+    const messages = salla.lang.messages?.[locale];
+    if (messages && getLocaleTranslation(locale, key) === undefined) {
+        salla.helpers.setNested(messages, key, value);
+    }
+}
+
+export { addMissingTranslations as a, setTranslationDefault as s, translate as t };