@salla.sa/twilight-components 2.14.348 → 2.14.350

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

@@ -130,6 +130,16 @@ export class SallaCountDown {
             this.normalizedPreOrder?.availability_date &&
             this.renderPreOrderToBeAvailableOn(), this.renderPreOrderCountDown()));
     }
+    renderPrefixText() {
+        if (!this.prefixText)
+            return null;
+        return h("span", { class: "s-count-down-prefix-text" }, this.prefixText);
+    }
+    renderButton() {
+        if (!this.withButton || !this.buttonText)
+            return null;
+        return h("salla-button", { color: "primary", size: "medium", href: this.buttonHref }, this.buttonIcon ? h("i", { class: this.buttonIcon }) : null, h("span", null, this.buttonText));
+    }
     renderContent() {
         if (!this.date)
             return null;
@@ -142,7 +152,7 @@ export class SallaCountDown {
         return this.renderCountDown();
     }
     render() {
-        return (h(Host, { key: '96bba6312e710673e1f249cabecfc8756fac5c0e', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''}` }, this.renderContent(), this.offerEnded && this.renderOfferEnded()));
+        return (h(Host, { key: '11e7cf7cf77bbde82d990107b7ccda8f1fc9ad6f', 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.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
     }
     static get is() { return "salla-count-down"; }
     static get originalStyleUrls() {
@@ -200,6 +210,120 @@ export class SallaCountDown {
                 "setter": false,
                 "reflect": false
             },
+            "horizontal": {
+                "type": "boolean",
+                "attribute": "horizontal",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, applies compact horizontal layout"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "withButton": {
+                "type": "boolean",
+                "attribute": "with-button",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, renders a slot for an action button alongside the countdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "prefixText": {
+                "type": "string",
+                "attribute": "prefix-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The prefix text to show before the countdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "buttonHref": {
+                "type": "string",
+                "attribute": "button-href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The button href to show with the countdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "buttonText": {
+                "type": "string",
+                "attribute": "button-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The button text to show with the countdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "buttonIcon": {
+                "type": "string",
+                "attribute": "button-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The button icon to show with the countdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "boxed": {
                 "type": "boolean",
                 "attribute": "boxed",

package/dist/collection/components/salla-order-details/salla-order-details-multiple-bundle-product.js

@@ -40,16 +40,6 @@ export class SallaproductDetailsMultipleBundleProduct {
         }
         return this.productDetails?.options?.length > 0;
     }
-    renderProductPrice() {
-        if (!this.productDetails) {
-            return null;
-        }
-        const { is_on_sale, sale_price, regular_price, price } = this.productDetails;
-        if (is_on_sale && sale_price) {
-            return (h("div", null, h("span", { class: "s-order-details-product-price s-order-details-product-price-sale" }, h("span", { innerHTML: salla.money(sale_price) })), regular_price && (h("span", { class: "s-order-details-product-regular-price" }, h("span", { innerHTML: salla.money(regular_price) })))));
-        }
-        return (h("span", { class: "s-order-details-product-price" }, h("span", { innerHTML: salla.money(price) })));
-    }
     renderOptions() {
         if (!this.productDetails?.options?.length) {
             return null;

package/dist/collection/components/salla-product-options/salla-product-options.js

@@ -508,19 +508,53 @@ export class SallaProductOptions {
         }, []);
     }
     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/collection/components/salla-slider/salla-slider.css

@@ -860,4 +860,8 @@
 
 .swiper {
   overflow: clip;
+}
+
+.s-slider-vertical .s-slider-container {
+  min-width: 0;
 }

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

@@ -89,7 +89,9 @@ export class SallaSlider {
         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: {
@@ -133,6 +135,9 @@ export class SallaSlider {
                 spaceBetween: 30
             }
         };
+        this.onViewportChange = (e) => {
+            this.isDesktopViewport = e.matches;
+        };
         this.direction = this.direction || document.documentElement.dir;
     }
     // Methods
@@ -429,11 +434,11 @@ export class SallaSlider {
         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;
@@ -451,6 +456,8 @@ export class SallaSlider {
         // Backward compatibility: lazy load data-background as background-image (removed in Swiper v9+)
         this.loadLazyBackgrounds();
         this.slider.on('slideChange', () => this.loadLazyBackgrounds());
+        // Add swiper-lazy-loaded to lazy images when visible
+        this.observeLazyImages();
         // Expose slider events
         this.slider.on('slideChange', (slider) => {
             //todo:: it doesn't change when loop is active, always will be false
@@ -486,7 +493,7 @@ export class SallaSlider {
         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: '671c02110bae2bd18cac37cf07ea33a5f0fbd671', 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 ?
@@ -494,11 +501,28 @@ export class SallaSlider {
                 : '', 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' ? ArrowRightIcon : ArrowLeftIcon })), 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' ? ArrowLeftIcon : ArrowRightIcon })))
                 : ''))
-            : '', h("div", { key: '75e963b5694e4af9d2cef0e179644c44bee587ef', class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", { key: '01ab750e52328fec9acef587acfa23d0477ef41d' }), h("div", { key: '87790d8f677a5c6ae52c31de07fa53642be096ba', class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { key: 'e14d002dbb228d96b4ce915a2a83f566fce00cf7', 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' ? ArrowRightIcon : ArrowLeftIcon })), 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' ? ArrowLeftIcon : ArrowRightIcon })))
             : null))
             : null));
     }
+    /** Observe all .swiper-lazy images and add swiper-lazy-loaded when they enter viewport. */
+    observeLazyImages() {
+        const lazyEls = this.sliderContainer?.querySelectorAll('.swiper-lazy:not(.swiper-lazy-loaded)');
+        if (!lazyEls?.length)
+            return;
+        if (!this.lazyImageObserver) {
+            this.lazyImageObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (!entry.isIntersecting)
+                        return;
+                    entry.target.classList.add('swiper-lazy-loaded');
+                    observer.unobserve(entry.target);
+                });
+            }, { rootMargin: '50px' });
+        }
+        lazyEls.forEach(el => this.lazyImageObserver.observe(el));
+    }
     /** Lazy load data-background for active slide and adjacent slides (backward compat for Swiper v9+). */
     loadLazyBackgrounds() {
         if (!this.slider?.slides)
@@ -551,9 +575,13 @@ export class SallaSlider {
             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();
     }
     static get is() { return "salla-slider"; }
     static get originalStyleUrls() {
@@ -999,7 +1027,7 @@ export class SallaSlider {
             "isEnd": {},
             "isBeginning": {},
             "displayAllTitle": {},
-            "windowWidth": {}
+            "isDesktopViewport": {}
         };
     }
     static get events() {