@salla.sa/twilight-components 2.14.596 → 2.14.598

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

@@ -6,6 +6,7 @@ import { CommentType, buildCommentSortOptions, isFeatureEnabled } from "./interf
 import anime from "animejs";
 import Helper from "../../Helpers/Helper";
 import ChatBubbles from "../../assets/svg/chat-bubbles.svg";
+import { addMissingTranslations, setTranslationDefault } from "../../Helpers/translate";
 export class SallaComments {
     constructor() {
         /**
@@ -37,8 +38,10 @@ export class SallaComments {
             this.allowLikes = salla.config.get('store.settings.rating.allow_likes');
             this.showRatingSummary = salla.config.get('store.settings.rating.show_rating_summary');
         });
-        salla.lang.onLoaded(() => {
-            salla.lang.addBulk({
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            addMissingTranslations({
                 "blocks.comments.overall_rating": { ar: "التقييم العام", en: "Overall rating" }
             });
             this.comment_title = salla.lang.get('blocks.comments.overall_rating');
@@ -46,7 +49,7 @@ export class SallaComments {
             this.noComments = salla.lang.get('pages.rating.no_ratings');
             const setNestedAsync = (lang, key, value) => {
                 return new Promise((resolve) => {
-                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                    setTranslationDefault(lang, key, value);
                     resolve(true);
                 });
             };
@@ -64,6 +67,9 @@ export class SallaComments {
             setTranslations();
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     resetInfiniteScroll() {
         clearTimeout(this.initialDataTimer);
         if (this.infiniteScroll) {

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

@@ -18,10 +18,17 @@ export class SallaContacts {
         salla.onReady(() => {
             this.contacts = salla.config.get('store.contacts');
         });
-        salla.lang.onLoaded(() => {
-            this.contactsTitle = this.contactsTitle || salla.lang.get('blocks.footer.social');
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            if (!this.contactsTitle || this.contactsTitle === this.langTitle) {
+                this.contactsTitle = this.langTitle = salla.lang.get('blocks.footer.social');
+            }
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getContactsArray() {
         return Object.entries(this.contacts)
             .filter(([_key, value]) => value !== '')

package/dist/collection/components/salla-count-down/salla-count-down.js

@@ -5,16 +5,16 @@ import { Host, h } from "@stencil/core";
 export class SallaCountDown {
     constructor() {
         /**
-         * The size of the count down
-         * */
+         * The size of the countdown display. Can be 'sm', 'md', or 'lg'. Default is 'md'.
+         */
         this.size = 'md';
         /**
-         * The color of the count down
-         * */
+         * The color theme of the countdown. Can be 'primary', 'light', or 'dark'. Default is 'dark'.
+         */
         this.color = 'dark';
         /**
-         * The digits lang to show in the count down
-         * */
+         * The language/format for displaying digits. 'en' for English numerals, 'auto' for localized numerals. Default is 'auto'.
+         */
         this.digits = 'auto';
         /**
          * If true, hides days segment when days = 0, and hides hours segment when both days and hours = 0.
@@ -35,7 +35,12 @@ export class SallaCountDown {
         this.hours = this.number(0);
         this.minutes = this.number(0);
         this.seconds = this.number(0);
-        salla.lang.onLoaded(() => {
+        if (this.date && this.isValidDate(this.date)) {
+            this.startCountDown();
+        }
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
             this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
             this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
@@ -43,9 +48,9 @@ export class SallaCountDown {
             this.secondsLabel = salla.lang.getWithDefault('pages.checkout.second', 'ثانية');
             this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
         });
-        if (this.date && this.isValidDate(this.date)) {
-            this.startCountDown();
-        }
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
     }
     /**
      * End the count down
@@ -229,7 +234,7 @@ export class SallaCountDown {
         return this.renderCountDown();
     }
     render() {
-        return (h(Host, { key: 'a16b6dc8c000eea39b990588995b07d6361231b2', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
+        return (h(Host, { key: '6d42cb8b06464f722d078ab4eb7117c7f698f3c3', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
     }
     static get is() { return "salla-count-down"; }
     static get originalStyleUrls() {
@@ -414,7 +419,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, the count down numbers will be appear in a boxes"
+                    "text": "Whether to display countdown numbers in boxed containers. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -433,7 +438,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the count down"
+                    "text": "The size of the countdown display. Can be 'sm', 'md', or 'lg'. Default is 'md'."
                 },
                 "getter": false,
                 "setter": false,
@@ -453,7 +458,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The color of the count down"
+                    "text": "The color theme of the countdown. Can be 'primary', 'light', or 'dark'. Default is 'dark'."
                 },
                 "getter": false,
                 "setter": false,
@@ -473,7 +478,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show labels for each count down number"
+                    "text": "Whether to show labels (day, hour, minute, second) below each countdown number. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -492,7 +497,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The text to show when the count down ends"
+                    "text": "Custom text to display when the countdown ends. If not provided, uses the default localized message."
                 },
                 "getter": false,
                 "setter": false,
@@ -568,7 +573,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The digits lang to show in the count down"
+                    "text": "The language/format for displaying digits. 'en' for English numerals, 'auto' for localized numerals. Default is 'auto'."
                 },
                 "getter": false,
                 "setter": false,
@@ -588,7 +593,7 @@ export class SallaCountDown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, the count down will end at the end of the day"
+                    "text": "Whether to set the countdown end time to the end of the specified day (23:59:59). Default is false."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/salla-custom-fields/salla-custom-fields.js

@@ -4,6 +4,10 @@
 import { h, } from "@stencil/core";
 import CameraIcon from "../../assets/svg/camera.svg";
 import { FormFieldTypes, } from "../salla-user-profile/interfaces";
+/**
+ * The `salla-custom-fields` component renders custom form fields with validation support.
+ * Supports text and file upload fields with real-time validation.
+ */
 export class SallaCustomFields {
     constructor() {
         /** Whether the fields can be edited by the user. */

package/dist/collection/components/salla-file-upload/salla-file-upload.js

@@ -5,7 +5,10 @@ import { h, Host } from "@stencil/core";
 import { formatDuration, formatBytesAsSize, getFilePondMaxFileSize, getMaxImagesCount, getMaxVideosCount, getTotalMaxFiles, getUploadErrorMessage, isImageMimeType, isVideoMimeType, parseSizeToBytes, shouldCountGalleryFile, shouldCountGalleryLimit, usesSplitCountLimits, } from "./upload-limits";
 import CancelIcon from "../../assets/svg/cancel.svg";
 import PlayIcon from "../../assets/svg/play-circle.svg";
+import { setTranslationDefault } from "../../Helpers/translate";
 const VIDEO_METADATA_TIMEOUT_MS = 10000;
+// store feature (`store.features`) that switches profile avatars to the `upload` endpoint + url-only `profile/update`
+const AVATAR_UPLOAD_FEATURE = 'avatar-upload-endpoint';
 export class SallaFileUpload {
     /**
      * Lazy load FilePond and all plugins
@@ -37,6 +40,12 @@ export class SallaFileUpload {
     }
     constructor() {
         this.filePondLoaded = false;
+        /** true when the uploaded url must be saved on the profile as the avatar (avatar upload endpoint flag is on) */
+        this.savesAvatarOnUpload = false;
+        /** the profile image uses the default `profile/update` url (no custom `url` given) */
+        this.usesDefaultProfileUrl = false;
+        this.avatarSaveGeneration = 0; // bumped when the avatar is removed, so pending saves are dropped
+        this.avatarSaveQueue = Promise.resolve();
         this.max_images_count = (count) => salla.lang.get('common.uploader.max_images_count', { count });
         this.max_videos_count = (count) => salla.lang.get('common.uploader.max_videos_count', { count });
         this.max_count_hint = (count) => salla.lang.get('common.uploader.max_count_hint', { count });
@@ -188,14 +197,19 @@ export class SallaFileUpload {
             this.instantUpload = true;
         }
         if (!this.url && this.profileImage) {
+            // default: the file goes straight to `profile/update`. With the `avatar-upload-endpoint` store feature
+            // the url is switched to the `upload` endpoint once the store features are known (see componentDidLoad).
             this.url = salla.url.api('profile/update');
             this.instantUpload = true;
             this.host.hasAttribute('name') || (this.name = 'avatar');
+            this.usesDefaultProfileUrl = true;
         }
         if (!this.name) {
             this.name = 'file';
         }
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.host.querySelectorAll('.filepond--drop-label>label').forEach(label => label.innerHTML = this.getLabel());
             if (this.filepond) {
                 this.filepond.labelFileTypeNotAllowed = salla.lang.get('common.uploader.invalid_type');
@@ -216,7 +230,7 @@ export class SallaFileUpload {
             }
             const setNestedAsync = (lang, key, value) => {
                 return new Promise((resolve) => {
-                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                    setTranslationDefault(lang, key, value);
                     resolve(true);
                 });
             };
@@ -548,6 +562,19 @@ export class SallaFileUpload {
     notifyUploadError(error, file) {
         salla.notify?.error?.(this.getUploadErrorMessageForFile(error, file));
     }
+    /**
+     * Save an already uploaded avatar url on the customer profile (text-only request).
+     */
+    async saveProfileAvatar(url) {
+        try {
+            await salla.profile.update({ avatar: url });
+            return true;
+        }
+        catch (error) {
+            salla.notify?.error?.(error?.response?.data?.error?.message || salla.lang.get('common.errors.error_occurred'));
+            return false;
+        }
+    }
     removeFailedFile(file) {
         if (!this.filepond?.getFiles().some(pondFile => pondFile.id === file.id)) {
             return;
@@ -880,6 +907,7 @@ export class SallaFileUpload {
         }
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         if (this.previewFilesSyncRaf != null) {
             cancelAnimationFrame(this.previewFilesSyncRaf);
             this.previewFilesSyncRaf = null;
@@ -887,16 +915,23 @@ export class SallaFileUpload {
         this.revokeAllPreviewObjectUrls();
     }
     render() {
-        return (h(Host, { key: '77ac3b040e8c7e2b3dcc0957cbb761675b667a83', class: {
+        return (h(Host, { key: 'af7edd83879313df0a142890044c2bb02d5de73b', class: {
                 "s-file-upload": true,
                 "s-file-upload-profile-image": this.profileImage,
                 "s-file-upload-multiple": this.allowMultiple,
                 "s-file-upload-has-gallery": this.usesGalleryPreview(),
-            } }, h("input", { key: '8fdb2cc6f73427929a77a985018e5fc7df7cbd88', type: "file", name: this.name, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.getTotalMaxFiles())) : '', h("input", { key: 'dfc1c8e1315c8a73685b24cd869f8df47ac42a35', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.getHiddenInputValue(), ref: input => this.hiddenInput = input }), this.renderPreviewGallery()));
+            } }, h("input", { key: 'ea630bd56caac801e7f69f602d3553321cd81b17', type: "file", name: this.name, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.getTotalMaxFiles())) : '', h("input", { key: '884b42abe4b9cd832ab1d078af93c9cbe4164112', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.getHiddenInputValue(), ref: input => this.hiddenInput = input }), this.renderPreviewGallery()));
     }
     async componentDidLoad() {
         await Salla.onReady();
         await Salla.lang.onLoaded();
+        if (this.usesDefaultProfileUrl && Salla.config.get('store.features', []).includes(AVATAR_UPLOAD_FEATURE)) {
+            // Avatars are uploaded to the store `upload` endpoint first (`files[]` + `type`, images only),
+            // then saved on the profile as a plain URL, so `profile/update` never receives a file part.
+            this.url = salla.url.api('upload');
+            this.host.hasAttribute('accept') || (this.accept = 'image/png, image/jpeg, image/jpg'); // upload only allows jpg/png
+            this.savesAvatarOnUpload = true;
+        }
         if (this.profileImage && !this.value) {
             this.value = Salla.config.get('user.avatar');
         }
@@ -992,6 +1027,9 @@ export class SallaFileUpload {
                 }
             },
             onremovefile: (_error, file) => {
+                if (this.savesAvatarOnUpload) {
+                    this.avatarSaveGeneration++;
+                }
                 if (this.usesGalleryPreview()) {
                     if (file) {
                         this.emitRemovedFile(file);
@@ -1048,6 +1086,26 @@ export class SallaFileUpload {
                         catch {
                             return null;
                         }
+                        if (this.savesAvatarOnUpload) {
+                            // `upload` answers with a list of urls
+                            const item = Array.isArray(responseData) ? responseData[0] : responseData;
+                            const avatarUrl = typeof item === 'object' && item !== null ? item.filePath || item.url : item;
+                            if (!this.isValidUploadResult(avatarUrl))
+                                return null;
+                            const generation = this.avatarSaveGeneration;
+                            // saves run one after the other so an older upload can never overwrite a newer one
+                            this.avatarSaveQueue = this.avatarSaveQueue.then(async () => {
+                                if (generation !== this.avatarSaveGeneration)
+                                    return; // removed while waiting in the queue
+                                const saved = await this.saveProfileAvatar(avatarUrl);
+                                // expose the value and emit `uploaded` only once the profile holds this avatar (unless it was removed meanwhile)
+                                if (saved && generation === this.avatarSaveGeneration) {
+                                    this.value = { id: this.generateUploadFileId(), url: avatarUrl };
+                                    this.uploadedHandler();
+                                }
+                            });
+                            return avatarUrl;
+                        }
                         if ((this.instantUpload || this.allowMultiple) && Array.isArray(responseData) && responseData.length > 0) {
                             const item = responseData[0];
                             const fileUrl = typeof item === 'object' && item !== null ? item.filePath || item.url : item;
@@ -1090,7 +1148,13 @@ export class SallaFileUpload {
                         }
                     },
                     ondata: formData => {
-                        if (this.allowMultiple) {
+                        if (this.savesAvatarOnUpload) {
+                            const avatarFormData = new FormData();
+                            formData.forEach((value) => avatarFormData.append('files[]', value));
+                            avatarFormData.append('type', 'avatar');
+                            formData = avatarFormData; // continue below so `payloadParams` / `formData` are still applied
+                        }
+                        else if (this.allowMultiple) {
                             const newFormData = new FormData();
                             // ? This line suppose to send all files in one request but its not working properly
                             // const filesArray = this.filepond.getFiles().map(file => file.file);

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

@@ -10,9 +10,6 @@ export class SallaFilters {
         this.isInitialFetch = true; //the base-category auto-append may only run on the first filters::fetched
         this.filtersData = {};
         salla.event.on('filters::hidden', () => this.host.style.display = 'none');
-        salla.lang.onLoaded(() => {
-            this.apply = salla.lang.get('pages.checkout.apply');
-        });
         salla.event.on('filters::fetched', ({ filters }) => {
             this.host.style.display = '';
             let freshFilterData = {};
@@ -50,6 +47,14 @@ export class SallaFilters {
             this.host.childNodes.forEach(async (widget) => widget.setWidgetHeight && await widget.setWidgetHeight());
         });
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.apply = salla.lang.get('pages.checkout.apply');
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     async componentWillLoad() {
         try {
             const searchParams = new URLSearchParams(window.location.search);
@@ -211,7 +216,7 @@ export class SallaFilters {
         this.applyFilters();
     }
     render() {
-        return h(Host, { key: 'ef7f2cf7241193cb8b2fe24fdb0713d8c92c04c9' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
+        return h(Host, { key: '7e2df6367c28317e81c8904d545e79f39e80f132' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
                 this.handleOptionChange(event, option, value);
             } })));
     }
@@ -250,7 +255,7 @@ export class SallaFilters {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Array of filter options"
+                    "text": "Array of filter options to display. Each filter contains key, label, type, and values for filtering products."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/salla-filters-widget/salla-filters-widget.js

@@ -24,11 +24,14 @@ export class SallaFiltersWidget {
         salla.onReady(() => {
             this.page = salla.config.get('page');
         });
-        salla.lang.onLoaded(() => {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.showMoreLabel = salla.lang.getWithDefault('common.titles.more', this.showMoreLabel);
             this.showLessLabel = salla.lang.getWithDefault('common.elements.show_less', this.showLessLabel);
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     componentDidLoad() {
         // Use fixed height per item for predictable calculations
         // Each item is approximately 20px, so we calculate based on item count
@@ -170,12 +173,12 @@ export class SallaFiltersWidget {
         return h("span", { class: "s-filters-option-name" }, label);
     }
     render() {
-        return (h(Host, { key: 'd3d9731c163a78609bb1a2f4b01ef6c3db4fc7dc', class: "s-filters-widget-container" }, h("h3", { key: 'bf1c5a033860416035ad7c74f4d9082f4c8de282', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '2a94d9a6500b3137900136fd052c731f63b0acae' }, this.option.label), h("span", { key: '69b28fcad8ebc564dbbe907a4eb4044a0ee9d6ad', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: 'fa20429b6b3399275eecbcac390d8895c3b01350', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: '98c869541f0a1d61725048296af6296e603cfa2c', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: 'f5310cfdad6980e5d991bd03934d5c1a4a014f10', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '317bb4bcfae88596f8a8737b2454f5f2ecae5b0d', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '8620064a3526e686b95a0c21e39f5b15a8ea3133' }), this.option.type !== FilterOptionTypes.RANGE
+        return (h(Host, { key: '1e0a234fe279cd77dbdb957d1e9852d1f59b39f4', class: "s-filters-widget-container" }, h("h3", { key: 'b2b16a758d5e3c9fc97d2bfab8aee9e98cb3eae7', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: 'af2738f683dc3455adc99d6e271ed7c5217c9626' }, this.option.label), h("span", { key: '6dd325fe1977e7e1cc3e72de495bcef51a4978b4', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: '87f90e444bc15193c631a6223b45b5d5d82b512c', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: 'bde65a20317127d415c66c06e6bc1d060f959751', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '3c06b2b5158b59652a8f91649e18922111ba8f55', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: 'b38f4c7033259152e950d3c86ee17aeea1fcfcb8', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '58a69066c1fd57b3f2d034d883b3c20c14df6154' }), this.option.type !== FilterOptionTypes.RANGE
             ? this.renderFilterOption(this.option)
             : h("salla-price-range", { onChanged: (event) => {
                     this.changed.emit(event.detail);
                 }, ref: price => this.priceRange = price, filtersData: this.filtersData, option: this.option })), this.withLoadMore && (!this.searchQuery || this.filteredCount > this.initialItemCount) &&
-            h("a", { key: '8c9c93c3579578f1da4fe676d4758c0bbb5b4e21', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
+            h("a", { key: '5124f0e1f14cdec0af61106161b769d67dc8f82f', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
     }
     static get is() { return "salla-filters-widget"; }
     static get originalStyleUrls() {

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

@@ -104,7 +104,12 @@ export class SallaGifting {
         };
         this.handleCountryDropdownClosed = () => { };
         this.handleRegionDropdownClosed = () => { };
-        salla.lang.onLoaded(() => {
+        salla.event.on(this.defaultEvent, () => {
+            this.open();
+        });
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.selectImageOrUpload = salla.lang.get('blocks.buy_as_gift.select_image_or_upload');
             this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_for_your_gift');
             this.sectionTitle = salla.lang.get('blocks.buy_as_gift.gift_the_one_you_love');
@@ -138,9 +143,9 @@ export class SallaGifting {
             this.donationRequired = salla.lang.get('pages.products.donation_amount_required');
             this.currentLang = salla.lang.locale;
         });
-        salla.event.on(this.defaultEvent, () => {
-            this.open();
-        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
     }
     isPhysical() {
         return this.physicalProducts || this.physical;
@@ -852,7 +857,7 @@ export class SallaGifting {
     }
     render() {
         return [
-            h("div", { key: '02f095cd71654941cc3d11f9c9be13e019247992' }, h("salla-list-tile", { key: '5dfefabc5e6fcb2f0193bf11dcd324c517b0e649', class: this.generateClass() }, h("div", { key: '35b5b8cbf54ccbf9368cdc95d2e0505ca317a555', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '2399e07a06a808b396cf57a5233be97938e7b9b5' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '12f460ce1df5e294e77b25e07d00d85370b2b939', slot: "subtitle" }, h("div", { key: '28fd4125c6f18fb976bc271ffc7c731683757bfb' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '2ccb5745341390a9aeb80c56b4d7bb171cc2940e', slot: "action" }, h("salla-button", { key: '4e74313bd4020ae32a1c2ba30b0133da0aaf410a', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '85ef811160f391d2fc456b13a89120407d6e4c36', name: "widget-btn-content" }, h("div", { key: '6d4d1162f7147488f8ce11d7da1bf7b82bc407b0', class: "s-gifting-widget-action-content" }, h("span", { key: 'e7aa877309bc7346fe56227365ad75c0d7c1a8dc', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '5c7f1a43fa84e8e5ba74a449063fc89576626db2' }, this.sectionBtnText)))))), h("salla-modal", { key: '1de82b1f9a7fc49321eb766b1451eacd2d210480', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'f3a97db3aa3a2591a1d391af61efa15ab76f1c8c', slot: "loading" }, h("div", { key: '67fb44c701b3f2771e041b91a2a438a0419ed4dd', class: "s-gifting-skeleton" }, h("div", { key: '70b2841fbafff80879cf2d68550cc9659da140a2', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '8d337e1bfe29aea80e93ed2d1e172fa4fe23e1db', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'b8586d28a3dda5abbdbc341830560c157efb566c', class: "s-gifting-modal-title" }, h("div", { key: '956ec550fd7ddeb6b11f174b92d0133408f95165', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'f495e7ec761c8499efb7a6e7025bd205dca49f2c', height: '15px', width: '150px' })))), h("div", { key: '28e5ad1386cebcd93a5f9307bd812dca77a66188', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '951dbed5a03ab246d661dfd2a59ae099b468fa89', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'f200d5a5a4a258fb0755b6adb48e25606ab93bb7', height: '230px' }), h("salla-skeleton", { key: '1b4f69321a13d1ddea4ad038bfad22385b3b51ed', height: '10px', width: '150px' }), h("salla-skeleton", { key: '5d9219d3826de28b8e585bada604bff60dfc80f8', height: '30px' }), h("salla-skeleton", { key: 'a248552e288bea2e9839f381ec2d96bdb0e53cdf', height: '40px' })))), h("slot", { key: '3c8f9965766d7ce17fb20b4df72a3e46c273b23a', name: "header" }), !!this.hasError ?
+            h("div", { key: '2b599846ae0abb92b699be0a3dbee0d3d5f3638a' }, h("salla-list-tile", { key: '1f08c01b96dab20e82a3260e23836d56f5bcf630', class: this.generateClass() }, h("div", { key: '1f4d04b7112be42587fc35a9fa6c322321a92482', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '8ce56efcb34d19433babde1f191e4301f4c2c8d0' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '6f035a3ee40a77a554492bde74bc834caa2e9a9a', slot: "subtitle" }, h("div", { key: '1e454d9ae0b95fd5b4ee05401f3edf0161338d43' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '98df402ea7ddda379fe10897453e61acf3166559', slot: "action" }, h("salla-button", { key: '7d7c49e3d0749cf8ed86ce17709f718fece6349c', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '6411376640ba3de3d36277981e04253fdcaaf135', name: "widget-btn-content" }, h("div", { key: '8fef0671cfa1335d6a5ab028c2fc0e978eaa11e2', class: "s-gifting-widget-action-content" }, h("span", { key: '820674db5e37dd1f3e1c3f7708bff7396955960a', innerHTML: GiftSharing }), " \u00A0", h("span", { key: 'ef3ee899f2231863f984ca13708382e273e38e0a' }, this.sectionBtnText)))))), h("salla-modal", { key: '0728b976c0f20f3713c9363e1c06b9da528da9ca', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '924fad1dbb5cb1ff039328bed201c07608b5e95d', slot: "loading" }, h("div", { key: '35907d0949afb5ed389fc2ee147ef73f388dc962', class: "s-gifting-skeleton" }, h("div", { key: 'c2252de89f09c4bfc1e2691b6da246408cd98003', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '1440fcf0b2dc5c3dd1d209604636bca1d68b2fd2', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '80527a48ec97624873100e91806d206194f4666c', class: "s-gifting-modal-title" }, h("div", { key: '095732ce0ca81c125ff7664e215c4a286bba4cd6', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '9e385f2e21fa305782d7c7d40df31498dfab856d', height: '15px', width: '150px' })))), h("div", { key: 'e530926826192430f094cd227a11bb9c6aee38f7', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '35a5d4bd57461b5edf69c19f27a85da2131b0545', height: '10px', width: '150px' }), h("salla-skeleton", { key: '747893f9ab1cc35d7fccb62dbd64e7a3a57b4a98', height: '230px' }), h("salla-skeleton", { key: '80ddf6036a735901a1295c3abd5e208c0cc92ca7', height: '10px', width: '150px' }), h("salla-skeleton", { key: '98720c569e326a5d2d04a37839d2064688f00a47', height: '30px' }), h("salla-skeleton", { key: '65f9deca24700906e43d34612b01ed95c86fae00', height: '40px' })))), h("slot", { key: '82e3b8afc2a736bdee08ef906a1824fc4a16ce5a', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
@@ -875,7 +880,7 @@ export class SallaGifting {
                             h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-city` }, this.receiverCityFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectCity, items: this.displayedCities, selectedItem: this.selectedCity, loading: this.loadingCities, searching: this.searchingCities, disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId), required: true, inputId: `${this.hostId}-city`, searchQuery: this.citySearchQuery, clientSearch: !this.enableCityAjaxSearch, dropUp: true, keepParentScroll: true, onItemSelected: (e) => this.handleCitySelected(e.detail), onSearchInput: (e) => this.handleCitySearch(e.detail), onDropdownClosed: () => this.handleCityDropdownClosed() }), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.isPhysical() && this.cityNoticeText() &&
                             h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.cityNoticeText())), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, !this.skipStep1() && h("a", { href: "#!", innerHTML: LeftArrow, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: '688de0af2e48acc0d91d128a321856197861eb16', name: "footer" })))
+                    ], h("slot", { key: '1d08c0a88ae9d95dd4c740d42451ddab1fffcfdc', name: "footer" })))
         ];
     }
     static get is() { return "salla-gifting"; }

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

@@ -2,6 +2,10 @@
  * Crafted with ❤ by Salla
  */
 import { Host, h } from "@stencil/core";
+/**
+ * The `salla-hook` component serves as a placeholder for dynamic content injection.
+ * Used by the Salla hooks system to mount elements at specific locations.
+ */
 export class SallaHook {
     /**
      * Mounts a given HTML element into the hook position.
@@ -11,7 +15,7 @@ export class SallaHook {
         this.host.before(element);
     }
     render() {
-        return h(Host, { key: '579b0abf0784c9396f636da50b1fed156e5a0600' });
+        return h(Host, { key: '7784823f34808c715180741263cf7e7edf9c9d5f' });
     }
     async componentDidLoad() {
         // Register this component for hooks system, already on it logic to run componentDidLoad trigger

package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.js

@@ -34,12 +34,17 @@ export class SallaInfiniteScroll {
         <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
       </a>`;
         this.btnLoader = this.status.querySelector('.s-button-loader');
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.status.querySelector('.s-button-text').innerHTML = this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more');
             this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
             this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     loading(isLoading = true) {
         let btnText = this.status.querySelector('.s-button-text');
         Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h } from "@stencil/core";
+import { h, forceUpdate } from "@stencil/core";
 /**
  * @slot header - The top of the modal.
  * @slot footer - Replaces the bottom button.
@@ -87,6 +87,7 @@ export class SallaLocalizationModal {
         };
         //here we will used the currency code instead of the symbol when current language is not arabic
         this.arabicCurrencies = ["SAR", "AED", "KWD", "BHD", "QAR", "OMR", "EGP", "IQD", "LBP", "SYP", "TND", "DZD", "MAD", "YER"];
+        this.translationLoaded = false;
         this.languages = [];
         this.currencies = [];
         this.hasError = false;
@@ -106,6 +107,17 @@ export class SallaLocalizationModal {
         this.languageSlot = this.host.querySelector('[slot="language"]')?.innerHTML || '<label class="s-localization-modal-label" for="lang-{code}"><span>{name}</span></label>';
         this.currencySlot = this.host.querySelector('[slot="currency"]')?.innerHTML || '<label class="s-localization-modal-label" for="currency-{code}"><span>{name}</span><small class="s-localization-modal-currency">{symbol}</small></label>';
     }
+    connectedCallback() {
+        // re-render whenever translations (re)load, so the labels read via salla.lang.get() stay current
+        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?.();
+    }
     async componentWillLoad() {
         await Salla.onReady();
         await Salla.lang.onLoaded();
@@ -244,7 +256,7 @@ export class SallaLocalizationModal {
             this.showTrigger
                 ? h("button", { type: "button", onClick: () => this.open(), class: "s-localization-modal-trigger-btn" }, h("span", null, this.getLanguageName()), h("span", { class: "s-localization-modal-trigger-separator" }, "|"), " ", h("span", { innerHTML: this.getCurrencySymbol() }))
                 : '',
-            h("salla-modal", { key: '1400a13aa9490e0f5f96259bea6bfcf3f98ee829', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: 'b31041e8d245ce30f41d4221418856e886200848', slot: 'loading' }, h("div", { key: '5531d672f7c5e8fb8a6b06fa5ae5328f4efcf3fe', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: '61b8fa69733a4e970e1f72ef5b09e773781e45ae', width: '25%', height: '15px' }), h("div", { key: '20dd0f3444f0a6e05730266bf964b74f307e9aab', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '5b8b4b760f741e0cd56c07ff341205e9ec7fe4d3', width: '25%', height: '15px' }), h("div", { key: '0a3f5dbfca2d6cd81effef5d873e03c9aef57d0b', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: 'b068f327b3335b3f9154ac20f7f6de95864dde9a', height: '40px', width: '100%' }))), !!this.hasError ?
+            h("salla-modal", { key: '90691a08e6f504621d486093e0b4ce4dd6ade603', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: '09c20e2dcf5840609eb6e1e124c2d8d3ceca0519', slot: 'loading' }, h("div", { key: '078f414c5c966000da4691000080912ab9e9d6e6', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: 'd34d24597d5dca4f6e987b82886749388e118454', width: '25%', height: '15px' }), h("div", { key: '5350cec15f6091450b297ed7114638440bd4da16', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '255dd34dc36801e78ea0dd83dd9825e58de3c20f', width: '25%', height: '15px' }), h("div", { key: '2f1d1acbb0734b72f6806d3ec229ffd8fc71f9f5', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '8ffa9e5ddfe05ca91032e29f24ef9eaedd73980d', height: '40px', width: '100%' }))), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage)) :
                 h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
                     h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, Salla.lang.get('common.titles.language')), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
@@ -346,6 +358,7 @@ export class SallaLocalizationModal {
     }
     static get states() {
         return {
+            "translationLoaded": {},
             "languages": {},
             "currencies": {},
             "hasError": {},

package/dist/collection/components/salla-login-modal/salla-login-modal.css

@@ -10,6 +10,9 @@ iframe {
   transition: height 0.3s;
   width: 100%;
 }
+.visible {
+  visibility: visible;
+}
 .inline {
   display: inline;
 }