@salla.sa/twilight-components 2.14.352 → 2.14.353

package/dist/components/salla-add-product-button2.js

@@ -40,12 +40,19 @@ const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddPro
         this.productType = 'product';
         this.selectedOptions = [];
         this.buyNowText = salla.lang.get('pages.products.buy_now');
+        /** Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed) */
+        this.isDesktopViewport = typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)').matches : true;
+        this.viewportMediaQuery = null;
+        this.onViewportChange = (e) => {
+            this.isDesktopViewport = e.matches;
+            this.btn?.setText((e.matches && !!this.passedLabel) ? this.passedLabel : this.getLabel());
+        };
         salla.lang.onLoaded(() => {
             this.buyNowText = salla.lang.get('pages.products.buy_now');
         });
     }
     getLabel() {
-        if (this.productStatus === 'sale' && this.supportStickyBar && window.innerWidth <= 768 && this.showQuickBuy && this.isApplePayActive) {
+        if (this.productStatus === 'sale' && this.supportStickyBar && !this.isDesktopViewport && this.showQuickBuy && this.isApplePayActive) {
             return PendingOrdersIcon;
         }
         if (this.hasPreOrder) {
@@ -138,7 +145,7 @@ const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddPro
     getQuickBuyBtnAttributes() {
         return {
             ...this.getBtnAttributes(),
-            type: this.supportStickyBar && window.innerWidth <= 768 ? 'plain' : this.productType == 'donating' ? 'donate' : 'buy'
+            type: this.supportStickyBar && !this.isDesktopViewport ? 'plain' : this.productType == 'donating' ? 'donate' : 'buy'
         };
     }
     miniCheckoutWidget() {
@@ -161,11 +168,12 @@ const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddPro
                 && salla.config.get('store.settings.payments')?.includes('apple_pay')
                 && salla.config.get('store.settings.is_salla_gateway', false);
             this.passedLabel = this.host.innerHTML.replace('<!---->', '').trim();
-            if (!!this.passedLabel && window.innerWidth >= 768) {
+            if (!!this.passedLabel && this.isDesktopViewport) {
                 return this.btn?.setText(this.passedLabel);
             }
             if (this.host.getAttribute('type') === 'submit' && this.supportStickyBar) {
-                window.addEventListener('resize', () => this.btn?.setText((window.innerWidth >= 768 && !!this.passedLabel) ? this.passedLabel : this.getLabel()));
+                this.viewportMediaQuery = window.matchMedia('(min-width: 768px)');
+                this.viewportMediaQuery.addEventListener('change', this.onViewportChange);
             }
         });
     }
@@ -217,7 +225,7 @@ const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddPro
     }
     componentDidRender() {
         //if label not passed, get label
-        if (!!this.passedLabel && (!this.supportStickyBar || window.innerWidth >= 768)) {
+        if (!!this.passedLabel && (!this.supportStickyBar || this.isDesktopViewport)) {
             // if passed label, set it
             this.btn?.setText(this.passedLabel);
             return;
@@ -225,6 +233,9 @@ const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddPro
         this.btn?.setText(this.getLabel());
         salla.lang.onLoaded(() => this.btn?.setText(this.getLabel()));
     }
+    disconnectedCallback() {
+        this.viewportMediaQuery?.removeEventListener('change', this.onViewportChange);
+    }
     get host() { return this; }
     static get style() { return sallaAddProductButtonCss; }
 }, [4, "salla-add-product-button", {
@@ -244,7 +255,8 @@ const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddPro
         "selectedOptions": [32],
         "showQuickBuy": [32],
         "isApplePayActive": [32],
-        "buyNowText": [32]
+        "buyNowText": [32],
+        "isDesktopViewport": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/salla-app-install-alert.js

@@ -30,12 +30,17 @@ const SallaAppInstallAlert$1 = /*@__PURE__*/ proxyCustomElement(class SallaAppIn
     }
     /**
      * Check if the website opens from mobile or tablet devices only (android/ios).
+     * Uses matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed).
+     * Guards against SSR/non-browser contexts (window, navigator, document).
      *
-     * @param {number} screen the width of the biggest screen to be checked
+     * @param {number} screen the width of the biggest screen to be checked (default 1024)
      * @returns {boolean} true if it is mobile or tablet else false
      */
     isMobileOrTabletDevice(screen = 1024) {
-        const screenWidth = window.innerWidth <= screen;
+        if (typeof window === 'undefined' || typeof navigator === 'undefined' || typeof document === 'undefined') {
+            return false;
+        }
+        const screenWidth = window.matchMedia(`(max-width: ${screen}px)`).matches;
         const userAgentCheck = /Macintosh|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
         const hasTouch = 'ontouchstart' in window ||
             'ontouchend' in document ||

package/dist/components/salla-color-picker2.js

@@ -43,6 +43,10 @@ const SallaColorPicker = /*@__PURE__*/ proxyCustomElement(class SallaColorPicker
          * Whether to enable adjusting the alpha channel.
          */
         this.enableAlpha = false;
+        this.updateViewportCache = () => {
+            this.cachedViewportWidth = this.getViewportWidthFromBreakpoints();
+        };
+        this.cachedViewportWidth = 0; // Will be populated in componentDidLoad via requestAnimationFrame
     }
     colorChangeHandler(color) {
         if (this.colorInput)
@@ -60,7 +64,10 @@ const SallaColorPicker = /*@__PURE__*/ proxyCustomElement(class SallaColorPicker
         this.submitted.emit(color);
     }
     popupOpenedHandler(color) {
-        this.setPopInPosition();
+        // Double rAF: defer setPopInPosition (getBoundingClientRect) until after paint to avoid forced reflow
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => this.setPopInPosition());
+        });
         this.popupOpened.emit(color);
     }
     popupClosedHandler(color) {
@@ -133,26 +140,47 @@ const SallaColorPicker = /*@__PURE__*/ proxyCustomElement(class SallaColorPicker
         this.picker = null;
         this.pickerReady = null;
     }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateViewportCache);
+    }
     componentWillLoad() {
         salla.onReady(() => {
             this.color = this.color ? this.color : salla.config.get('theme.color.primary', '#5dd5c4');
         });
     }
+    /**
+     * Returns viewport width from matchMedia breakpoints (no layout read).
+     * Must match updateViewportCache breakpoints for consistency.
+     */
+    getViewportWidthFromBreakpoints() {
+        if (typeof window === 'undefined')
+            return 1024;
+        if (window.matchMedia('(min-width: 1200px)').matches)
+            return 1200;
+        if (window.matchMedia('(min-width: 992px)').matches)
+            return 992;
+        if (window.matchMedia('(min-width: 768px)').matches)
+            return 768;
+        return 375;
+    }
     setPopInPosition() {
+        // Use cached viewport width – reading innerWidth at popup open causes forced reflow.
+        // Fallback: matchMedia-based value when cache is 0 (e.g. SSR before hydration). Same breakpoints as updateViewportCache.
+        const viewportWidth = this.cachedViewportWidth || this.getViewportWidthFromBreakpoints();
         const popup = this.host.querySelector('.picker_wrapper');
         const widgetEl = this.host.querySelector('.s-color-picker-widget');
         if (!popup || !widgetEl)
             return;
         const widgetPosition = widgetEl.getBoundingClientRect();
-        const widgetToWindowEq = window.innerWidth / 2 - widgetPosition.width / 2;
+        const widgetToWindowEq = viewportWidth / 2 - widgetPosition.width / 2;
         const widgetInLeft = widgetToWindowEq > widgetPosition.x;
         const widgetInRight = widgetToWindowEq < widgetPosition.x;
         const widgetInCenter = widgetToWindowEq === widgetPosition.x;
-        const isMobile = window.innerWidth < 768;
+        const isMobile = !window.matchMedia('(min-width: 768px)').matches;
         if (isMobile && widgetInLeft) {
             popup.style.left = '0';
         }
-        if (isMobile && (widgetInRight)) {
+        if (isMobile && widgetInRight) {
             popup.style.left = 'auto';
         }
         if (!isMobile || (isMobile && ((!widgetInRight && !widgetInLeft) || widgetInCenter))) {
@@ -160,7 +188,7 @@ const SallaColorPicker = /*@__PURE__*/ proxyCustomElement(class SallaColorPicker
         }
     }
     initColorPicker() {
-        this.pickerReady = import('./vanilla-picker.js').then(function (n) { return n.v; }).then((mod) => {
+        this.pickerReady = import('./vanilla-picker.js').then(function (n) { return n.v; }).then(mod => {
             const Picker = mod.default;
             const picker = new Picker({
                 parent: this.host,
@@ -180,14 +208,17 @@ const SallaColorPicker = /*@__PURE__*/ proxyCustomElement(class SallaColorPicker
         });
     }
     render() {
-        return (h(Host, { key: 'f6a001611bf20e8264346028c848490cf94c686a', class: "s-color-picker-main" }, h("slot", { key: '79648d165d81f200e064c8ef56a138f6b66757ed', name: "widget" }, h("div", { key: '95e7a8b7a92f5bb8f6f05b8cd39e6c91710e52a2', class: "s-color-picker-widget" }, h("div", { key: '24813d1de9a5834cfd37edf7affd4be94608f96c', class: "s-color-picker-widget-canvas", ref: dv => this.canvas = dv }), h("span", { key: '5f29f537140bc4b74431fc33229563cb1b7ce231', innerHTML: ArrowDown }))), h("input", { key: '188a9d7233388fca9a25cd5d319c0973448b07bc', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => this.colorInput = color })));
+        return (h(Host, { key: 'dc90f101197031b0ec17939dc940b527cbb42764', class: "s-color-picker-main" }, h("slot", { key: '504a93f8bba3130a953dbfc1e03420d622247c0f', name: "widget" }, h("div", { key: '7eb60d1353d1fa6edefc400d7851499d083c3000', class: "s-color-picker-widget" }, h("div", { key: '01361959e0beeecd5c4b9ba0210931f3864b9273', class: "s-color-picker-widget-canvas", ref: dv => (this.canvas = dv) }), h("span", { key: '4091ba421758a3af182e7224ffbd74c5ca58166a', innerHTML: ArrowDown }))), h("input", { key: '5302b4da7dc9beaec6ab469175dee79d5b8c5dc5', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => (this.colorInput = color) })));
     }
     componentDidLoad() {
         if (this.canvas)
             this.canvas.style.backgroundColor = this.color;
         this.initColorPicker();
+        // Populate viewport cache in next frame (avoids forced reflow during initial render)
+        requestAnimationFrame(() => this.updateViewportCache());
+        window.addEventListener('resize', this.updateViewportCache);
         if (this.colorInput) {
-            this.colorInput.addEventListener('invalid', (e) => {
+            this.colorInput.addEventListener('invalid', e => {
                 this.invalidInput.emit(e);
             });
             this.colorInput.addEventListener('input', () => {

package/dist/components/salla-maintenance-alert.js

@@ -14,14 +14,16 @@ const SallaMaintenanceAlert$1 = /*@__PURE__*/ proxyCustomElement(class SallaMain
     componentWillLoad() {
         this.title = salla.config.get('maintenance_details.title');
         this.message = salla.config.get('maintenance_details.message');
-        this.buttonTitle = window.innerWidth <= 768 ? salla.config.get('maintenance_details.button_title') : salla.config.get('maintenance_details.button_full_title');
+        // Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed)
+        const isMobile = typeof window !== 'undefined' && !window.matchMedia('(min-width: 768px)').matches;
+        this.buttonTitle = isMobile ? salla.config.get('maintenance_details.button_title') : salla.config.get('maintenance_details.button_full_title');
     }
     closeAlert() {
         salla.storage.set('hide_salla-maintenance-alert_at', Date.now());
         this.host.style.display = 'none';
     }
     render() {
-        return (h(Host, { key: 'f307529d9fa1a3cfdf33cc48dea142e274eb4f72', class: "s-maintenance-alert-wrapper" }, h("button", { key: 'a8a8d3d4c03151f9fe468153d4368ab66de0ba5f', class: "s-maintenance-alert-close", innerHTML: Cancel, onClick: () => this.closeAlert() }), h("div", { key: 'f53e7ab72950f72b68eeb5ff6887203e8f6d0dbd', class: "s-maintenance-alert-content" }, h("div", { key: 'c3c69c738da0417114c87b03c49f0a8d36663558', class: "s-maintenance-alert-container" }, h("div", { key: 'af1ec8ff601873c04de610341f15775e05a5d185', class: "s-maintenance-alert-icon" }, h("img", { key: 'a1b6dd0d161749eff7f6e7d4e92fd161896b593b', src: salla.url.cdn('images/alert.png'), alt: "Alert" })), h("div", { key: 'f1f81302bbaf4d83d50770ff1f40416624bde583', class: "s-maintenance-alert-text" }, h("h2", { key: '79eab40b1cf6cf9d307d1e9bda24fe6dd8c03852' }, this.title), h("p", { key: '5bdbe219346851b9aff8c20fd41075853fe6b981' }, this.message))), h("div", { key: '8e2cd9ad611a551ee7960310f11a9f7f07668811' }, h("a", { key: '9658d9a3e82f9719c35caf362601a12a62475508', class: "s-maintenance-alert-btn", href: salla.config.get('maintenance_details.button_url') }, this.buttonTitle)))));
+        return (h(Host, { key: '109e687d7d6ba48ddf89cd3631f5a852d50688fd', class: "s-maintenance-alert-wrapper" }, h("button", { key: 'd70e7e53acc699336e1611589ca3bdfc704504c2', class: "s-maintenance-alert-close", innerHTML: Cancel, onClick: () => this.closeAlert() }), h("div", { key: 'b816c1a9635828c206c792d68203ccfbe8e8235b', class: "s-maintenance-alert-content" }, h("div", { key: '61e91088a5613d943b6f662f5ed44093ecf99237', class: "s-maintenance-alert-container" }, h("div", { key: '1ca223334f52bc5097677dd23433107080567894', class: "s-maintenance-alert-icon" }, h("img", { key: '22e07c7a104267cda2bed74929307d039018698d', src: salla.url.cdn('images/alert.png'), alt: "Alert" })), h("div", { key: '64d37700bc1454f5afadb55b49512bbd5b412d9c', class: "s-maintenance-alert-text" }, h("h2", { key: '7651dcd09a0ba07f14ed744758598015d4b45ecd' }, this.title), h("p", { key: '1f8d057af072466f34d0f3a13396de5144bc967f' }, this.message))), h("div", { key: '34f8471b855011b499c2038b1ac9dd24cc5e2e8b' }, h("a", { key: 'd9c4f4a9fb80ab90c13dc1dde69adcb7c4cd7e9f', class: "s-maintenance-alert-btn", href: salla.config.get('maintenance_details.button_url') }, this.buttonTitle)))));
     }
     componentDidLoad() {
         //auto-hide the alert if close button is clicked before one hour

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

@@ -40,6 +40,8 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         this.prevCategoryIdKey = "prevCategoryId";
         this.isProcessing = false; // Tracks if we are processing data
         this.scrollTimeout = null;
+        this.boundScrollToLastViewedProduct = () => this.scrollToLastViewedProduct();
+        this.boundHandleScroll = () => this.handleScroll();
         this.specialPagesWithoutIds = {
             'product.index.latest': 'latest',
             'product.index.offers': 'offers',
@@ -64,11 +66,12 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         if ("scrollRestoration" in history)
             history.scrollRestoration = "manual";
         // required for scroll restoration case when the component loads before DOM content is completed (slow internet bandwidth /low device specs)
-        window.addEventListener('DOMContentLoaded', this.scrollToLastViewedProduct.bind(this));
+        window.addEventListener('DOMContentLoaded', this.boundScrollToLastViewedProduct);
         salla.event.on('salla-filters::changed', filters => this.setFilters(filters));
     }
     disconnectedCallback() {
-        window.removeEventListener('DOMContentLoaded', this.scrollToLastViewedProduct);
+        window.removeEventListener('DOMContentLoaded', this.boundScrollToLastViewedProduct);
+        window.removeEventListener('scroll', this.boundHandleScroll);
     }
     /**
      * Set parsed filters data from URI
@@ -470,7 +473,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
             this.loading(true, this.autoload ? false : true);
         });
         // Manual scroll listener
-        shouldApplyManualLoad && window.addEventListener('scroll', this.handleScroll.bind(this));
+        shouldApplyManualLoad && window.addEventListener('scroll', this.boundHandleScroll);
         this.infiniteScroll?.on('load', async (response) => {
             if (this.isProcessing)
                 return;
@@ -523,14 +526,17 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
             return;
         this.scrollTimeout = setTimeout(() => {
             this.scrollTimeout = null;
-            const wrapperRect = this.wrapper.getBoundingClientRect();
-            const windowHeight = window.innerHeight;
-            const distanceToBottom = wrapperRect.bottom - windowHeight;
-            // Trigger only when the wrapper bottom is within 200px of the viewport bottom
-            if (distanceToBottom <= 200 && !this.isProcessing && this.nextPage) {
-                // Reached near the bottom of the wrapper, loading next page...
-                this.manualLoadNextPage();
-            }
+            // Defer layout reads to next frame to avoid forced reflow (Lighthouse/PageSpeed)
+            requestAnimationFrame(() => {
+                const wrapperRect = this.wrapper.getBoundingClientRect();
+                const windowHeight = window.innerHeight;
+                const distanceToBottom = wrapperRect.bottom - windowHeight;
+                // Trigger only when the wrapper bottom is within 200px of the viewport bottom
+                if (distanceToBottom <= 200 && !this.isProcessing && this.nextPage) {
+                    // Reached near the bottom of the wrapper, loading next page...
+                    this.manualLoadNextPage();
+                }
+            });
         }, 200);
     }
     manualLoadNextPage() {

package/dist/esm/{filepond-Dg4ZKM-u.js → filepond-Cuqyleyy.js}

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

package/dist/esm/{filepond-plugin-file-poster-BUIjdsnA.js → filepond-plugin-file-poster-C6Wara8q.js}

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

package/dist/esm/{filepond-plugin-file-validate-size-DgZMMqmi.js → filepond-plugin-file-validate-size-D-M3KSxo.js}

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

package/dist/esm/{filepond-plugin-file-validate-type-DA9tDSFr.js → filepond-plugin-file-validate-type-DzAl1VI8.js}

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

package/dist/esm/{filepond-plugin-image-edit-dotdnN4Z.js → filepond-plugin-image-edit-flutfc9I.js}

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

package/dist/esm/{filepond-plugin-image-exif-orientation-oSI8aLU-.js → filepond-plugin-image-exif-orientation-B2UkG6iE.js}

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

package/dist/esm/{filepond-plugin-image-preview-DEefQK61.js → filepond-plugin-image-preview-B4u8N2nE.js}

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