@salla.sa/twilight-components 2.14.596 → 2.14.598

package/dist/components/salla-trust-badges.js

@@ -2,8 +2,9 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as setTranslationDefault } from './translate.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}";
+const sallaTrustBadgesCss = "/*!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)))}.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}";
 
 const SallaTrustBadges$1 = /*@__PURE__*/ proxyCustomElement(class SallaTrustBadges extends HTMLElement {
     constructor() {
@@ -16,18 +17,21 @@ const SallaTrustBadges$1 = /*@__PURE__*/ proxyCustomElement(class SallaTrustBadg
         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/components/salla-user-menu.js

@@ -118,6 +118,12 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
             profile: UserCircle
         };
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => this.loadTranslations());
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     async componentWillLoad() {
         await salla.onReady();
         await salla.lang.onLoaded();
@@ -249,7 +255,17 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
             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;
         }
@@ -288,7 +304,7 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
         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) {
@@ -314,6 +330,27 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
     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;
+        }
+    }
     get host() { return this; }
     static get style() { return sallaUserMenuCss; }
 }, [4, "salla-user-menu", {

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

@@ -11,7 +11,6 @@ import { d as defineCustomElement$2 } from './salla-tel-input2.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$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserProfile extends HTMLElement {
-    // Constructor
     constructor() {
         super();
         this.__registerHost();
@@ -41,8 +40,10 @@ const SallaUserProfile$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserProfi
         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');
@@ -64,6 +65,9 @@ const SallaUserProfile$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserProfi
             });
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     // Event handler for phone number field changes
     phoneNumberFieldEventHandler(data) {
         if (!data.detail.number) {

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

@@ -140,11 +140,16 @@ const SallaUserSettings$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserSett
                 });
             }
         });
-        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));
@@ -559,7 +564,7 @@ const SallaUserSettings$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserSett
         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 style() { return sallaUserSettingsCss; }
 }, [0, "salla-user-settings", {

package/dist/components/salla-verify.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { M as MailIcon } from './mail.js';
 import { d as defineCustomElement$4 } from './salla-button2.js';
 import { d as defineCustomElement$3 } from './salla-loading2.js';
@@ -43,11 +43,6 @@ const SallaVerify$1 = /*@__PURE__*/ proxyCustomElement(class SallaVerify extends
          * 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;
@@ -73,6 +68,18 @@ const SallaVerify$1 = /*@__PURE__*/ proxyCustomElement(class SallaVerify extends
             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/components/translate.js

@@ -14,5 +14,41 @@ 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 { translate as t };
+export { addMissingTranslations as a, setTranslationDefault as s, translate as t };