@salla.sa/twilight-components 2.14.596 → 2.14.597

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

@@ -53,7 +53,9 @@ export 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');
@@ -61,6 +63,9 @@ export class SallaQuickOrder {
             this.userNameLabel = salla.lang.get('pages.products.your_name');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getBtnColor() {
         return this.quickOrderStyle === 'default' ? 'light' : 'primary';
     }

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

@@ -10,6 +10,7 @@ import ShippingFast from "../../assets/svg/shipping-fast.svg";
 import Star from "../../assets/svg/star.svg";
 import WhatsappIcon from "../../assets/svg/whatsapp2.svg";
 import Helper from "../../Helpers/Helper";
+import { setTranslationDefault } from "../../Helpers/translate";
 export class SallaRatingModal {
     constructor() {
         this.hasError = false;
@@ -85,11 +86,13 @@ export 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);
                 });
             };
@@ -139,6 +142,9 @@ export class SallaRatingModal {
             setTranslations();
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getV2Ref() {
         return this.v2Ref ?? this.host.querySelector('salla-rating-modal-v2');
     }

package/dist/collection/components/salla-rating-stars/salla-rating-stars.js

@@ -11,24 +11,24 @@ export class SallaRatingStars {
         this.reviewLabel = '';
         this.selectedStar = 0;
         /**
-       * Sets input name.
-       */
+         * The name attribute for the rating input (used in forms). Default is 'rating'.
+         */
         this.name = 'rating';
         /**
-        * Sets the height and width of the component. Defaults to medium.
-        */
+         * The size of the star icons. Can be 'large', 'medium', 'small', or 'mini'. Default is 'medium'.
+         */
         this.size = 'medium';
         /**
-       * Number of reviews to display.
-       */
+         * The number of reviews to display next to the stars. Default is 0 (hidden).
+         */
         this.reviews = 0;
         /**
-        * Render the description label before the stars instead of after.
-        */
+         * Render the description label before the stars instead of after.
+         */
         this.labelBeforeStars = false;
         /**
-        * Allows the rating to be editable.
-        */
+         * Whether the rating is interactive/editable by the user. Default is false (display-only).
+         */
         this.editable = false;
         this.tag = true;
     }
@@ -215,7 +215,7 @@ export class SallaRatingStars {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Sets input name."
+                    "text": "The name attribute for the rating input (used in forms). Default is 'rating'."
                 },
                 "getter": false,
                 "setter": false,
@@ -235,7 +235,7 @@ export class SallaRatingStars {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the height and width of the component. Defaults to medium."
+                    "text": "The size of the star icons. Can be 'large', 'medium', 'small', or 'mini'. Default is 'medium'."
                 },
                 "getter": false,
                 "setter": false,
@@ -255,7 +255,7 @@ export class SallaRatingStars {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The rating value."
+                    "text": "The current rating value (0-5). Used to display filled stars."
                 },
                 "getter": false,
                 "setter": false,
@@ -274,7 +274,7 @@ export class SallaRatingStars {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Number of reviews to display."
+                    "text": "The number of reviews to display next to the stars. Default is 0 (hidden)."
                 },
                 "getter": false,
                 "setter": false,
@@ -294,7 +294,7 @@ export class SallaRatingStars {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show the description label."
+                    "text": "Whether to show a descriptive label (e.g., \"Excellent\", \"Good\") next to the rating. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -333,7 +333,7 @@ export class SallaRatingStars {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Allows the rating to be editable."
+                    "text": "Whether the rating is interactive/editable by the user. Default is false (display-only)."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/salla-review-card/salla-review-card.js

@@ -6,6 +6,10 @@ import IconVerified from "../../assets/svg/check.svg";
 import IconStar2 from "../../assets/svg/star-02.svg";
 import IconStar2Muted from "../../assets/svg/star-02-muted.svg";
 import IconFire2 from "../../assets/svg/fire-02.svg";
+/**
+ * The `salla-review-card` component displays a product review with images, ratings, and product info.
+ * Supports image carousel with swipe gestures.
+ */
 export class SallaReviewCard {
     constructor() {
         this.currentSlide = 0;
@@ -158,7 +162,7 @@ export class SallaReviewCard {
         return (h("a", { href: this.review?.product?.url, class: "s-review-card-product-container" }, h("img", { alt: product.image?.alt || "Product", src: product.image?.url, class: "s-review-card-product-image", width: 60, height: 60, loading: "lazy", decoding: "async", draggable: false }), h("div", { class: "s-review-card-product-details" }, h("p", { class: "s-review-card-product-details-name" }, product.name), this.showPurchaseCount ? h("p", { class: "s-review-card-product-details-purchase-count" }, h("span", { innerHTML: IconFire2 }), this.purchasedCount) : null)));
     }
     render() {
-        return h("div", { key: '44589734c0a8ab8211a50e89e306de7dd53ad679', class: "s-review-card-container" }, this.renderSlider(), this.renderSingleImage(), renderDivider(), h("div", { key: '14e57255f40beab2e4b92724f26f171cdaaf69f4', class: "s-review-card-content" }, this.renderHeader(), h("p", { key: '8f27f7f13b5611a71164dba288f53e53e10e67f0', class: "s-review-card-review-content", innerHTML: this.review?.content }), renderDivider(), this.renderProductInfo()));
+        return h("div", { key: '5d214b55ba611ae39a8a3352e67c1c0c74749cae', class: "s-review-card-container" }, this.renderSlider(), this.renderSingleImage(), renderDivider(), h("div", { key: '8f761e54645173d887eaecc50bbc6e1f9664a861', class: "s-review-card-content" }, this.renderHeader(), h("p", { key: 'a75cbc58c4631f96aa112f9cd522a7ad43629b27', class: "s-review-card-review-content", innerHTML: this.review?.content }), renderDivider(), this.renderProductInfo()));
     }
     static get is() { return "salla-review-card"; }
     static get originalStyleUrls() {

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

@@ -52,11 +52,16 @@ export class SallaReviews {
             this.displayAllURL = salla.url.get('testimonials');
             this.isRTL = salla.config.get('theme.is_rtl', true);
         });
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.testimonialText = salla.lang.get('blocks.home.testimonials');
             this.displayAllLinkText = salla.lang.get('blocks.home.display_all');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     fetchReviews() {
         if (this.source === 'json') {
             return Promise.resolve(JSON.parse(this.sourceValue));

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h, Host } from "@stencil/core";
+import { h, Host, forceUpdate } from "@stencil/core";
 import StoreAlt from "../../assets/svg/store-alt.svg";
 import Search from "../../assets/svg/search.svg";
 import { ModeType } from "./interfaces";
@@ -46,10 +46,17 @@ export class SallaScopees {
         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/collection/components/salla-skeleton/salla-skeleton.js

@@ -5,16 +5,16 @@ import { h, Host } from "@stencil/core";
 export class SallaSkeleton {
     constructor() {
         /**
-       *  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() {
@@ -22,7 +22,7 @@ export class SallaSkeleton {
             '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")));
     }
     static get is() { return "salla-skeleton"; }
     static get originalStyleUrls() {
@@ -50,7 +50,7 @@ export class SallaSkeleton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the shape type of the skeleton is it circle or normal"
+                    "text": "The shape type of the skeleton. 'circle' for circular skeletons (e.g., avatars), 'normal' for rectangular shapes. Default is 'normal'."
                 },
                 "getter": false,
                 "setter": false,
@@ -70,7 +70,7 @@ export class SallaSkeleton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the skeleton width"
+                    "text": "The width of the skeleton. Can be any CSS width value (e.g., '100%', '50px', '2rem'). Default is '100%'."
                 },
                 "getter": false,
                 "setter": false,
@@ -90,7 +90,7 @@ export class SallaSkeleton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the skeleton height"
+                    "text": "The height of the skeleton. Can be any CSS height value (e.g., '100%', '50px', '2rem'). Default is '100%'."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -325,14 +325,16 @@ export class SallaSlider {
     isStaticWhenSingle() {
         return this.staticWhenSingle && this.host.querySelector('[slot="items"]')?.children?.length === 1;
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.displayAllTitle = salla.lang.get('blocks.home.display_all');
+        });
+    }
     async componentWillLoad() {
         if (this.isStaticWhenSingle()) {
             this.host.classList.add('s-slider-single-mode');
             return;
         }
-        salla.lang.onLoaded(() => {
-            this.displayAllTitle = salla.lang.get('blocks.home.display_all');
-        });
         this.hasThumbSlot = !!this.host.querySelector('[slot="thumbs"]');
         if (this.listenToThumbnailsOption) {
             salla.event.on('product-options::change', data => {
@@ -617,6 +619,7 @@ export class SallaSlider {
         this.viewportMediaQuery.addEventListener('change', this.onViewportChange);
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         if (this.isStaticWhenSingle()) {
             return;
         }

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

@@ -17,10 +17,15 @@ export class SallaSocial {
         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')
@@ -31,7 +36,7 @@ export class SallaSocial {
     }
     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/collection/components/salla-tabs/salla-tab-header.js

@@ -10,8 +10,8 @@ export class SallaTabHeader {
     constructor() {
         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
@@ -52,7 +52,7 @@ export class SallaTabHeader {
             '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' })),
         ];
     }
     static get is() { return "salla-tab-header"; }

package/dist/collection/components/salla-tel-input/salla-tel-input.js

@@ -3,23 +3,6 @@
  */
 import { Host, h } from "@stencil/core";
 export class SallaTelInput {
-    /**
-     * Lazy load intl-tel-input library
-     * This reduces initial bundle size by ~80-90KB
-     */
-    async loadTelInput() {
-        if (this.TelInput)
-            return;
-        try {
-            const telInputModule = await import('intl-tel-input');
-            this.TelInput = telInputModule.default;
-        }
-        catch (error) {
-            console.error('Failed to load Tel Input:', error);
-            salla.notify?.error?.('Failed to load phone input. Please refresh the page.');
-            throw error;
-        }
-    }
     constructor() {
         /**
          * input name
@@ -40,7 +23,26 @@ export class SallaTelInput {
         this.invalidCountryCode = salla.lang.get('common.errors.invalid_value', { attribute: this.countryCodeLabel });
         this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
         this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
-        salla.lang.onLoaded(() => {
+    }
+    /**
+     * Lazy load intl-tel-input library
+     * This reduces initial bundle size by ~80-90KB
+     */
+    async loadTelInput() {
+        if (this.TelInput)
+            return;
+        try {
+            const telInputModule = await import('intl-tel-input');
+            this.TelInput = telInputModule.default;
+        }
+        catch (error) {
+            console.error('Failed to load Tel Input:', error);
+            salla.notify?.error?.('Failed to load phone input. Please refresh the page.');
+            throw error;
+        }
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.mobileLabel = salla.lang.get('common.elements.mobile');
             this.countryCodeLabel = salla.lang.get('common.elements.country_code');
             this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
@@ -51,6 +53,9 @@ export class SallaTelInput {
             this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     // Init is async and v26 loads the validation utils lazily; both must settle.
     async whenReady() {
         await this.initPromise;
@@ -138,7 +143,7 @@ export class SallaTelInput {
         }
     }
     render() {
-        return (h(Host, { key: 'd03d6361922175ab55e0f58fd54cbbc09f89e5e6', class: "s-tel-input" }, h("input", { key: '69a1fea1c843d4d36d6b0dd59131fa82f0cb62b6', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: 'd627bceaf3d7e812a8bc727a12359495350d51b8', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '013c643d29f51c5ff35cd94ab62e4fcffbb8df0c', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+        return (h(Host, { key: '3b574317d312de0e81facdcc3c470adcccfa1b14', class: "s-tel-input" }, h("input", { key: '6884be98619d7c86a14ac091cbbcc8bbbf78404f', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: '670676e296168ebd3771b50fbd1fde9d1d3e27fc', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '1c69b4e169c37a71a86cc479b06c08dc6a9d190b', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
     }
     componentDidLoad() {
         this.initPromise = this.initTelInput();

package/dist/collection/components/salla-tiered-offer/salla-tiered-offer.js

@@ -13,13 +13,18 @@ export class SallaTieredOffer {
         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/collection/components/salla-trust-badges/salla-trust-badges.js

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { Host, h } from "@stencil/core";
+import { setTranslationDefault } from "../../Helpers/translate";
 export class SallaTrustBadges {
     constructor() {
         /**
@@ -11,18 +12,21 @@ export class SallaTrustBadges {
         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/collection/components/salla-user-menu/salla-user-menu.js

@@ -85,6 +85,12 @@ export class SallaUserMenu {
             profile: ProfileIcon
         };
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => this.loadTranslations());
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     async componentWillLoad() {
         await salla.onReady();
         await salla.lang.onLoaded();

package/dist/collection/components/salla-user-profile/salla-user-profile.js

@@ -20,7 +20,6 @@ import { Genders } from "./interfaces";
  * rich set of features and customization options.
  */
 export class SallaUserProfile {
-    // Constructor
     constructor() {
         /**
          * The minimum allowed age for a user. Users with a birthdate indicating an age less than this value will be considered invalid.
@@ -48,8 +47,10 @@ export class SallaUserProfile {
         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');
@@ -71,6 +72,9 @@ export class SallaUserProfile {
             });
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     // Event handler for phone number field changes
     phoneNumberFieldEventHandler(data) {
         if (!data.detail.number) {

package/dist/collection/components/salla-user-settings/salla-user-settings.js

@@ -113,11 +113,16 @@ export class SallaUserSettings {
                 });
             }
         });
-        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));
@@ -532,7 +537,7 @@ export class SallaUserSettings {
         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))))))));
     }
     static get is() { return "salla-user-settings"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Host, h } from "@stencil/core";
+import { Host, h, forceUpdate } from "@stencil/core";
 import AndroidPhoneIcon from "../../assets/svg/android-phone.svg";
 import MailIcon from "../../assets/svg/mail.svg";
 /**
@@ -32,11 +32,6 @@ export class SallaVerify {
          * 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;
@@ -62,6 +57,18 @@ export class SallaVerify {
             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.