@salla.sa/twilight-components 2.14.596 → 2.14.598

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.css

@@ -1,21 +1,26 @@
-/*!twlt*/.s-trust-badges-wrapper {
-    display: flex;
-    align-items: center
+/*!twlt*/.s-trust-badges-image {
+  width: 55px;
+  height: 55px;
+  flex-shrink: 0;
+}
+.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)))
+  --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
+  --tw-space-x-reverse: 1;
 }
 .s-trust-badges-label {
-    margin-bottom: 0.25rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 .s-trust-badges-number {
-    font-size: 0.875rem;
-    line-height: 1.25rem
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }

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();
@@ -216,7 +222,17 @@ export class SallaUserMenu {
             window.addEventListener('click', this.onClickOutside);
         }
     }
+    /**
+     * Read consent at the moment of navigation: a link built earlier could be stale (consent accepted,
+     * withdrawn or removed on logout after the menu rendered). Only touches the profile link's href.
+     */
+    prepareProfileLink(event, itemKey) {
+        if (itemKey === 'profile' && this.profileUrl && this.sallaAccountEnabled) {
+            event.currentTarget.href = this.withAnonymousId(this.profileUrl);
+        }
+    }
     menuItemClicked(event, itemKey) {
+        this.prepareProfileLink(event, itemKey);
         if (itemKey !== 'logout') {
             return;
         }
@@ -255,7 +271,7 @@ export class SallaUserMenu {
         return (h("li", { class: {
                 's-user-menu-dropdown-item': true,
                 's-user-menu-dropdown-item-logout': i + 1 === Object.entries(this.items).length,
-            } }, h("a", { ...this.getItemAnchorLinkAttrs(itemKey), class: "s-user-menu-dropdown-item-link", onClick: event => this.menuItemClicked(event, itemKey) }, h("i", { class: "s-user-menu-dropdown-item-prefix", innerHTML: itemValue }), h("span", { class: "s-user-menu-dropdown-item-title" }, this[itemKey]), itemKey === 'wallet' && !this.inline && (this.walletBalance || this.walletBalanceLoading) ? (h("span", { class: "s-user-menu-dropdown-item-balance", style: { display: 'inline-flex', alignItems: 'center', gap: '4px' } }, this.walletBalance ? h("span", { innerHTML: this.walletBalance }) : '', this.walletBalanceLoading ? h("salla-loading", { size: "14" }) : '')) : (''), !['٠', '0', undefined].includes(this.badges[itemKey]) ? (h("span", { class: "s-user-menu-dropdown-item-badge" }, this.badges[itemKey])) : (''))));
+            } }, h("a", { ...this.getItemAnchorLinkAttrs(itemKey), class: "s-user-menu-dropdown-item-link", onClick: event => this.menuItemClicked(event, itemKey), onMouseDown: event => this.prepareProfileLink(event, itemKey), onFocus: event => this.prepareProfileLink(event, itemKey), onContextMenu: event => this.prepareProfileLink(event, itemKey) }, h("i", { class: "s-user-menu-dropdown-item-prefix", innerHTML: itemValue }), h("span", { class: "s-user-menu-dropdown-item-title" }, this[itemKey]), itemKey === 'wallet' && !this.inline && (this.walletBalance || this.walletBalanceLoading) ? (h("span", { class: "s-user-menu-dropdown-item-balance", style: { display: 'inline-flex', alignItems: 'center', gap: '4px' } }, this.walletBalance ? h("span", { innerHTML: this.walletBalance }) : '', this.walletBalanceLoading ? h("salla-loading", { size: "14" }) : '')) : (''), !['٠', '0', undefined].includes(this.badges[itemKey]) ? (h("span", { class: "s-user-menu-dropdown-item-badge" }, this.badges[itemKey])) : (''))));
     }
     componentShouldUpdate() {
         if (!this.opened) {
@@ -281,6 +297,27 @@ export class SallaUserMenu {
     buildProfileUrl(token) {
         return `${Salla.config.get('account.url', 'https://accounts.salla.com')}/${salla.config.get('user.language_code')}/user?store=${Salla.config.get('store.id')}&info=${encodeURIComponent(token)}`;
     }
+    /** Appends the analytics anonymous id (`aid`) when the customer currently consents. */
+    withAnonymousId(url) {
+        const anonymousId = this.getAnalyticsAnonymousId();
+        return anonymousId ? `${url}&aid=${encodeURIComponent(anonymousId)}` : url;
+    }
+    /**
+     * Analytics anonymous id, handed to Salla Account so its events share the
+     * store visitor's identity. Only shared with the customer's consent, the same
+     * rule analytics applies to user ids.
+     */
+    getAnalyticsAnonymousId() {
+        try {
+            if (Salla.storage.get('cookies-consent') !== 'accepted') {
+                return null;
+            }
+            return Salla.analytics?.getAnonymousId?.() || null;
+        }
+        catch (e) {
+            return null;
+        }
+    }
     static get is() { return "salla-user-menu"; }
     static get originalStyleUrls() {
         return {

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.