@salla.sa/twilight-components 2.14.349 → 2.14.351

package/dist/components/salla-product-options2.js

@@ -558,19 +558,53 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         }, []);
     }
     componentDidLoad() {
-        if (this.optionsData?.length === 0 && !this.optionsData.some(option => option.type === DisplayType.DONATION)) {
+        if (!this.optionsData?.length) {
             return;
         }
-        const selectedDonationOption = this.optionsData.find(option => option.type === DisplayType.DONATION)?.details.find(detail => detail.is_selected);
-        if (!selectedDonationOption) {
-            return;
+        // Handle donation options
+        const selectedDonationOption = this.optionsData.find(option => option.type === DisplayType.DONATION)?.details?.find(detail => detail.is_selected);
+        if (selectedDonationOption) {
+            setTimeout(() => {
+                salla.event.emit('product-options::donation-changed', {
+                    id: this.productId,
+                    price: selectedDonationOption.additional_price
+                });
+            }, 1000);
+        }
+        // Handle pre-selected options on product page
+        // Call salla.product.getPrice() directly to avoid triggering form validation which causes unwanted scroll
+        if (!salla.url.is_page("cart")) {
+            const pricingOptionTypes = [
+                DisplayType.SINGLE_OPTION,
+                DisplayType.MULTIPLE_OPTIONS,
+                DisplayType.COLOR,
+                DisplayType.THUMBNAIL,
+                DisplayType.DONATION,
+                DisplayType.DIGITAL_CARD_VALUE,
+                DisplayType.COUNTRY
+            ];
+            const hasPreSelectedPricingOption = this.optionsData.some(option => pricingOptionTypes.includes(option.type) &&
+                option.details?.some(detail => detail.is_selected));
+            if (hasPreSelectedPricingOption) {
+                // Use requestAnimationFrame to ensure DOM is fully painted before accessing form
+                requestAnimationFrame(() => {
+                    try {
+                        const form = this.host.closest('form');
+                        if (!form)
+                            return;
+                        // Validate form belongs to this product to avoid conflicts on complex pages
+                        const formData = new FormData(form);
+                        const formProductId = formData.get('id') || formData.get('product_id');
+                        if (formProductId && String(formProductId) !== String(this.productId))
+                            return;
+                        salla.product.getPrice(formData);
+                    }
+                    catch (e) {
+                        salla.log('Error updating price for pre-selected options:', e);
+                    }
+                });
+            }
         }
-        setTimeout(() => {
-            salla.event.emit('product-options::donation-changed', {
-                id: this.productId,
-                price: selectedDonationOption.additional_price
-            });
-        }, 1000);
     }
     /**
      * Enable user-initiated validation mode so invalid fields will scroll into view

package/dist/components/salla-products-list2.js

@@ -203,19 +203,6 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         //as a request they don't want to let the user to open the product details
         //todo:: find a better way to handle this request
         this.getSource() === 'landing-page' && (product.url = '');
-        try {
-            // Add source query param to product URL for tracking in Product Viewed event
-            if (this.source && product.url && !product.url.includes('s-product-source=')) {
-                const [urlWithoutFragment, fragment] = product.url.split('#');
-                const separator = urlWithoutFragment.includes('?') ? '&' : '?';
-                const pageSlug = salla.config?.get('page.slug') || 'unknown';
-                const sourceValue = `${pageSlug}.${this.source}`;
-                product.url = `${urlWithoutFragment}${separator}s-product-source=${sourceValue}${fragment ? '#' + fragment : ''}`;
-            }
-        }
-        catch (error) {
-            Salla.log('Error with source');
-        }
         const customComponentTag = this.hasCustomComponent ? this.productCardComponent : 'salla-product-card';
         const productCard = document.createElement(customComponentTag);
         productCard.product = product;
@@ -223,15 +210,15 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         this.applyHorizontalCardStyles(productCard);
         // Attach click event listener to save the current products snapshot
         productCard.addEventListener('click', (event) => {
-            if (!this.hasInfiniteScroll) {
-                return;
-            }
             const target = event.target;
             // Check if the clicked element is an anchor or inside an anchor
             const anchor = target.closest('a');
             if (anchor) {
-                this.takeStateSnapshot();
-                sessionStorage.setItem(this.lastViewedProductKey, product.id);
+                Helper.saveProductSource(this.getSource());
+                if (this.hasInfiniteScroll) {
+                    this.takeStateSnapshot();
+                    sessionStorage.setItem(this.lastViewedProductKey, product.id);
+                }
             }
         });
         return productCard;
@@ -561,7 +548,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
     }
     getInitialData() {
         this.loading();
-        return salla.product.api.fetch({ source: this.getSource(), source_value: this.getSourceValue(), limit: this.limit }).then(async (response) => {
+        return salla.product.api.fetch({ source: Helper.getApiSource(this.getSource()), source_value: this.getSourceValue(), limit: this.limit }).then(async (response) => {
             if (!response.data.length) {
                 this.showPlaceholder = true;
                 this.placeholderLoader && this.placeholderLoader.remove();
@@ -587,7 +574,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
             .then(() => {
             this.hasCustomComponent = !!customElements.get(this.productCardComponent);
             this.sourceValueIsValid = !!(this.getSourceValue() || this.isSourceWithoutValue());
-            this.hasInfiniteScroll = !['json', 'selected', 'related', 'landing-page'].includes(this.getSource()) && !this.limit;
+            this.hasInfiniteScroll = !['json', 'selected', 'related', 'landing-page', 'recently'].includes(this.getSource()) && !this.limit;
             let searchParams = new URLSearchParams(window.location.search);
             try {
                 this.sortBy = this.sortBy || searchParams.get('sort') || searchParams.get('by');

package/dist/components/salla-products-slider2.js

@@ -57,7 +57,7 @@ const SallaProductsSlider = /*@__PURE__*/ proxyCustomElement(class SallaProducts
                 this.isReady = false;
                 return;
             }
-            return salla.product.api.fetch({ source: this.getSource(), source_value: this.getSourceValue(), limit: this.limit })
+            return salla.product.api.fetch({ source: Helper.getApiSource(this.getSource()), source_value: this.getSourceValue(), limit: this.limit })
                 .then(response => Helper.injectExtraFieldsToResponse(response))
                 .then(response => {
                 this.productsData = response.data;
@@ -87,18 +87,20 @@ const SallaProductsSlider = /*@__PURE__*/ proxyCustomElement(class SallaProducts
     getItemHTML(product) {
         //as a request they don't want to let the user to open the product details
         //todo:: find a better way to handle this request
-        this.getSource() === 'landing-page' && (product.url = '');
+        const isLandingPage = this.getSource() === 'landing-page';
+        isLandingPage && (product.url = '');
+        const handleClick = isLandingPage ? undefined : () => Helper.saveProductSource(this.getSource());
         if (this.hasCustomComponent && this.productCardComponent.toLowerCase() == 'custom-salla-product-card') {
-            return h("div", { class: "s-products-slider-card" }, h("custom-salla-product-card", { product: product, source: this.getSource(), "source-value": this.getSourceValue() }));
+            return h("div", { class: "s-products-slider-card", onClick: handleClick }, h("custom-salla-product-card", { product: product, source: this.getSource(), "source-value": this.getSourceValue() }));
         }
         if (this.hasCustomComponent) {
             const customElem = document.createElement(this.productCardComponent);
             customElem.setAttribute('product', JSON.stringify(product));
             customElem.setAttribute('source', this.getSource());
             customElem.setAttribute('source-value', this.getSourceValue());
-            return h("div", { class: "s-products-slider-card", innerHTML: customElem.outerHTML });
+            return h("div", { class: "s-products-slider-card", onClick: handleClick, innerHTML: customElem.outerHTML });
         }
-        return h("div", { class: "s-products-slider-card" }, h("salla-product-card", { "show-quantity": this.getSource() == 'landing-page', "hide-add-btn": this.getSource() == 'landing-page', "shadow-on-hover": true, product: product }));
+        return h("div", { class: "s-products-slider-card", onClick: handleClick }, h("salla-product-card", { "show-quantity": isLandingPage, "hide-add-btn": isLandingPage, "shadow-on-hover": true, product: product }));
     }
     canRender() {
         return this.sourceValueIsValid && this.isReady;

package/dist/components/salla-slider2.js

@@ -9887,7 +9887,9 @@ const SallaSlider = /*@__PURE__*/ proxyCustomElement(class SallaSlider extends H
         this.currentIndex = undefined;
         this.isEnd = false;
         this.isBeginning = true;
-        this.windowWidth = window.innerWidth;
+        /** Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse recommended) */
+        this.isDesktopViewport = typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)').matches : true;
+        this.viewportMediaQuery = null;
         this.hasThumbSlot = false;
         this.pre_defined_config = {
             carousel: {
@@ -9931,6 +9933,9 @@ const SallaSlider = /*@__PURE__*/ proxyCustomElement(class SallaSlider extends H
                 spaceBetween: 30
             }
         };
+        this.onViewportChange = (e) => {
+            this.isDesktopViewport = e.matches;
+        };
         this.direction = this.direction || document.documentElement.dir;
     }
     // Methods
@@ -10227,11 +10232,11 @@ const SallaSlider = /*@__PURE__*/ proxyCustomElement(class SallaSlider extends H
         return pre_defined_config;
     }
     getThumbsDirection() {
-        const { verticalThumbs, windowWidth, direction } = this;
-        if (verticalThumbs && windowWidth < 768 && direction === 'rtl') {
+        const { verticalThumbs, isDesktopViewport, direction } = this;
+        if (verticalThumbs && !isDesktopViewport && direction === 'rtl') {
             return 'rtl';
         }
-        if (verticalThumbs && windowWidth > 768 && direction === 'rtl') {
+        if (verticalThumbs && isDesktopViewport && direction === 'rtl') {
             return 'ltr';
         }
         return direction;
@@ -10286,7 +10291,7 @@ const SallaSlider = /*@__PURE__*/ proxyCustomElement(class SallaSlider extends H
         classes += this.verticalThumbs ? ' s-slider-vertical ' : ' s-slider-horizontal ';
         classes += this.arrowsCentered ? ' s-slider-v-centered ' : '';
         classes += this.gridThumbs ? ' s-slider-with-grid-thumbs ' : '';
-        return (h(Host, { key: '0b3f597ee3e0b5bfddfdcc9e3167edc93273defe', class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
+        return (h(Host, { key: '44f6baf2ec3a6421cd8d8ce6779c6ce781cecc7f', class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
             h("div", { class: "s-slider-block__title" }, this.blockTitle ?
                 h("div", { class: "s-slider-block__title-right" }, h("h2", null, this.blockTitle), this.blockSubtitle ? h("p", { innerHTML: this.blockSubtitle }) : '')
                 : '', h("div", { class: "s-slider-block__title-left" }, this.displayAllUrl ?
@@ -10294,7 +10299,7 @@ const SallaSlider = /*@__PURE__*/ proxyCustomElement(class SallaSlider extends H
                 : '', this.showControls ?
                 h("div", { class: "s-slider-block__title-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? KeyBoardArrowRightIcon : KeyBoardArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? KeyBoardArrowLeftIcon : KeyBoardArrowRightIcon })))
                 : ''))
-            : '', h("div", { key: 'b4439c52238fef56cb59af6a568759dbe4ff7b3b', class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", { key: '9f527368279faa132cd8f451d231da84d37736b4' }), h("div", { key: '1a25a9068037cd732c5d0dcba32fbf630b812acd', class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { key: '777e3773d840abaf0fc55cdcdf50b504696fdd5c', name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", dir: this.getThumbsDirection(), ref: el => this.thumbsSliderContainer = el }, h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ?
+            : '', h("div", { key: '384d3224e9e2f9ad08d71093ee4c6f907232c07e', class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", { key: '578756df5b652d9b7e86d3f0424e4ec886b7a75f' }), h("div", { key: '7966a00ec720374a3dac1533d72fdfeb31db8105', class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { key: '39f9656cabb053dc4878ae1f2bd94a6efc19f975', name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", dir: this.getThumbsDirection(), ref: el => this.thumbsSliderContainer = el }, h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ?
             h("div", { class: "s-slider-thumbs-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-thumbs-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? KeyBoardArrowRightIcon : KeyBoardArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-thumbs-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? KeyBoardArrowLeftIcon : KeyBoardArrowRightIcon })))
             : null))
             : null));
@@ -10368,8 +10373,11 @@ const SallaSlider = /*@__PURE__*/ proxyCustomElement(class SallaSlider extends H
             this.flattenSlotToElements(this.thumbsSliderWrapper, 'div[slot="thumbs"]');
         }
         this.initSlider();
+        this.viewportMediaQuery = window.matchMedia('(min-width: 768px)');
+        this.viewportMediaQuery.addEventListener('change', this.onViewportChange);
     }
     disconnectedCallback() {
+        this.viewportMediaQuery?.removeEventListener('change', this.onViewportChange);
         this.lazyObserver?.disconnect();
         this.lazyImageObserver?.disconnect();
     }
@@ -10401,7 +10409,7 @@ const SallaSlider = /*@__PURE__*/ proxyCustomElement(class SallaSlider extends H
         "isEnd": [32],
         "isBeginning": [32],
         "displayAllTitle": [32],
-        "windowWidth": [32],
+        "isDesktopViewport": [32],
         "sliderInstance": [64],
         "slideTo": [64],
         "slideNext": [64],

package/dist/esm/{Helper-Bt5Zv9cl.js → Helper-B5RLi6Xo.js}

@@ -51,6 +51,10 @@ class Helper {
             'components.most_sales_products': 'sales', //temporary, delete it after two days from now
         }[source || salla.config.get('page.slug')] || source || 'latest';
     }
+    getApiSource(source) {
+        const apiSourceMap = { 'recently': 'selected' };
+        return apiSourceMap[source] || source;
+    }
     getPageTitleForSource(source) {
         source = {
             'brands': 'common.titles.brands',
@@ -177,6 +181,16 @@ class Helper {
     productsIncludes() {
         return this.includes?.filter(field => field != 'metadata');
     }
+    saveProductSource(source) {
+        if (!source)
+            return;
+        try {
+            sessionStorage.setItem('s-viewed-source', source);
+        }
+        catch (error) {
+            salla.logger.warn('Error saving product source to session storage');
+        }
+    }
     parseJson(includes) {
         if (typeof includes !== 'string') {
             return includes;

package/dist/esm/{filepond-DQR2YBu7.js → filepond-BcVCWOQQ.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-Bhszo8cU.js';
+import { d as getDefaultExportFromCjs } from './index-D8IUoDXw.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-poster-XvYa1rlk.js → filepond-plugin-file-poster-B6OLqzjJ.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-Bhszo8cU.js';
+import { d as getDefaultExportFromCjs } from './index-D8IUoDXw.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-size-BRBnctOE.js → filepond-plugin-file-validate-size-BCifsMdp.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-Bhszo8cU.js';
+import { d as getDefaultExportFromCjs } from './index-D8IUoDXw.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-type-BuD6F1gi.js → filepond-plugin-file-validate-type-BzRNZ2wk.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-Bhszo8cU.js';
+import { d as getDefaultExportFromCjs } from './index-D8IUoDXw.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-edit-BJ8YnBRL.js → filepond-plugin-image-edit-Dvu8RWud.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-Bhszo8cU.js';
+import { d as getDefaultExportFromCjs } from './index-D8IUoDXw.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-exif-orientation-BGad_AoX.js → filepond-plugin-image-exif-orientation-DtlS_Id7.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-Bhszo8cU.js';
+import { d as getDefaultExportFromCjs } from './index-D8IUoDXw.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-preview-Cb6UzPfa.js → filepond-plugin-image-preview-DRaZsLxF.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-Bhszo8cU.js';
+import { d as getDefaultExportFromCjs } from './index-D8IUoDXw.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{index-DIfeuyTs.js → index-BT5aIJiI.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-Bhszo8cU.js';
+import { d as getDefaultExportFromCjs } from './index-D8IUoDXw.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {