@salla.sa/twilight-components 2.14.352 → 2.14.354

package/dist/collection/collection-manifest.json

@@ -103,6 +103,60 @@
     "typescriptVersion": "5.5.4"
   },
   "collections": [],
-  "bundles": [],
+  "bundles": [
+    {
+      "components": [
+        "salla-cart-item-offers",
+        "salla-cart-summary"
+      ]
+    },
+    {
+      "components": [
+        "salla-alert",
+        "salla-bottom-alert"
+      ]
+    },
+    {
+      "components": [
+        "salla-add-product-button",
+        "salla-product-availability",
+        "salla-product-options",
+        "salla-quick-buy"
+      ]
+    },
+    {
+      "components": [
+        "salla-accordion",
+        "salla-breadcrumb",
+        "salla-button",
+        "salla-drawer",
+        "salla-loading",
+        "salla-modal"
+      ]
+    },
+    {
+      "components": [
+        "salla-booking-field",
+        "salla-color-picker",
+        "salla-conditional-fields",
+        "salla-datetime-picker",
+        "salla-file-upload",
+        "salla-quantity-input",
+        "salla-tel-input"
+      ]
+    },
+    {
+      "components": [
+        "salla-comment-form",
+        "salla-comment-item",
+        "salla-comments",
+        "salla-rating-stars",
+        "salla-review-card",
+        "salla-reviews",
+        "salla-reviews-page",
+        "salla-reviews-summary"
+      ]
+    }
+  ],
   "global": "global/app.js"
 }

package/dist/collection/components/salla-add-product-button/salla-add-product-button.js

@@ -22,12 +22,19 @@ export class SallaAddProductButton {
         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 Cart;
         }
         if (this.hasPreOrder) {
@@ -120,7 +127,7 @@ export class SallaAddProductButton {
     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() {
@@ -143,11 +150,12 @@ export class SallaAddProductButton {
                 && 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);
             }
         });
     }
@@ -199,7 +207,7 @@ export class SallaAddProductButton {
     }
     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;
@@ -207,6 +215,9 @@ export class SallaAddProductButton {
         this.btn?.setText(this.getLabel());
         salla.lang.onLoaded(() => this.btn?.setText(this.getLabel()));
     }
+    disconnectedCallback() {
+        this.viewportMediaQuery?.removeEventListener('change', this.onViewportChange);
+    }
     static get is() { return "salla-add-product-button"; }
     static get originalStyleUrls() {
         return {
@@ -441,7 +452,8 @@ export class SallaAddProductButton {
             "selectedOptions": {},
             "showQuickBuy": {},
             "isApplePayActive": {},
-            "buyNowText": {}
+            "buyNowText": {},
+            "isDesktopViewport": {}
         };
     }
     static get events() {

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

@@ -25,12 +25,17 @@ export class SallaAppInstallAlert {
     }
     /**
      * 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/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-product-options/salla-product-options.js

@@ -26,6 +26,7 @@ export class SallaProductOptions {
         this.disableCardValue = true;
         this.availableDigitalCardValues = [];
         this.userInitiatedValidation = false;
+        this.isCartMode = false;
         this.outSkus = [];
         /**
        * Avoid selection of previous default or selected card value option
@@ -507,10 +508,12 @@ export class SallaProductOptions {
             return acc.concat(mappedDetails);
         }, []);
     }
-    componentDidLoad() {
+    async componentDidLoad() {
         if (!this.optionsData?.length) {
             return;
         }
+        // Register for hooks — theme can call enterCartMode() here
+        await Salla.hooks.registerComponent('salla-product-options', this);
         // Handle donation options
         const selectedDonationOption = this.optionsData.find(option => option.type === DisplayType.DONATION)?.details?.find(detail => detail.is_selected);
         if (selectedDonationOption) {
@@ -522,8 +525,9 @@ export class SallaProductOptions {
             }, 1000);
         }
         // Handle pre-selected options on product page
+        // Skip if in cart mode (enterCartMode called by hook) or on cart page
         // Call salla.product.getPrice() directly to avoid triggering form validation which causes unwanted scroll
-        if (!salla.url.is_page("cart")) {
+        if (!salla.url.is_page("cart") && !this.isCartMode) {
             const pricingOptionTypes = [
                 DisplayType.SINGLE_OPTION,
                 DisplayType.MULTIPLE_OPTIONS,
@@ -556,6 +560,17 @@ export class SallaProductOptions {
             }
         }
     }
+    /**
+     * Switch the component to cart-item mode: fill selected options,
+     * enable disabled-out-of-stock, and skip product price updates.
+     * Used by themes when treating a product page as a cart item editor.
+     */
+    async enterCartMode() {
+        this.isCartMode = true;
+        this.disableCardValue = false;
+        this.canDisabled = true;
+        this.fillSelectedOptions();
+    }
     /**
      * Enable user-initiated validation mode so invalid fields will scroll into view
      */
@@ -943,7 +958,8 @@ export class SallaProductOptions {
             "selectedOutSkus": {},
             "disableCardValue": {},
             "availableDigitalCardValues": {},
-            "userInitiatedValidation": {}
+            "userInitiatedValidation": {},
+            "isCartMode": {}
         };
     }
     static get events() {
@@ -1105,6 +1121,23 @@ export class SallaProductOptions {
                     "tags": []
                 }
             },
+            "enterCartMode": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Switch the component to cart-item mode: fill selected options,\nenable disabled-out-of-stock, and skip product price updates.\nUsed by themes when treating a product page as a cart item editor.",
+                    "tags": []
+                }
+            },
             "enableUserInitiatedValidation": {
                 "complexType": {
                     "signature": "() => Promise<void>",

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() {