@salla.sa/twilight-components 2.14.351 → 2.14.353

package/dist/collection/components/salla-color-picker/salla-color-picker.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import ArrowDown from "../../assets/svg/keyboard_arrow_down.svg";
 export class SallaColorPicker {
     constructor() {
@@ -33,6 +33,10 @@ export 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)
@@ -50,7 +54,10 @@ export 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) {
@@ -123,26 +130,47 @@ export 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))) {
@@ -150,7 +178,7 @@ export class SallaColorPicker {
         }
     }
     initColorPicker() {
-        this.pickerReady = import('vanilla-picker').then((mod) => {
+        this.pickerReady = import('vanilla-picker').then(mod => {
             const Picker = mod.default;
             const picker = new Picker({
                 parent: this.host,
@@ -170,14 +198,17 @@ export 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/collection/components/salla-maintenance-alert/salla-maintenance-alert.js

@@ -7,14 +7,16 @@ export class SallaMaintenanceAlert {
     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/collection/components/salla-products-list/salla-products-list.js

@@ -34,6 +34,8 @@ export class SallaProductsList {
         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',
@@ -58,11 +60,12 @@ export class SallaProductsList {
         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
@@ -464,7 +467,7 @@ export class SallaProductsList {
             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;
@@ -517,14 +520,17 @@ export class SallaProductsList {
             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() {