@salla.sa/twilight-components 2.14.346 → 2.14.349

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

@@ -2,6 +2,8 @@
  * Crafted with ❤ by Salla
  */
 import { h, Host } from "@stencil/core";
+// Import from bundle.mjs to avoid bundling issue since module resolution is set to `node`
+import Swiper from "swiper/swiper-bundle.mjs";
 import ArrowRightIcon from "../../assets/svg/keyboard_arrow_right.svg";
 import ArrowLeftIcon from "../../assets/svg/keyboard_arrow_left.svg";
 /**
@@ -105,7 +107,7 @@ export class SallaSlider {
                 direction: "vertical",
                 followFinger: false,
                 touchReleaseOnEdges: true,
-                lazy: true,
+                // v9+: lazy is native (use loading="lazy" on images + .swiper-lazy-preloader)
                 mousewheel: {}
             },
             testimonials: {
@@ -123,7 +125,7 @@ export class SallaSlider {
                 breakpoints: {
                     320: { spaceBetween: 10 },
                     768: { spaceBetween: 15 },
-                    980: { paceBetween: 30 },
+                    980: { spaceBetween: 30 },
                 }
             },
             thumbs: {
@@ -315,42 +317,11 @@ export class SallaSlider {
         if (this.listenToThumbnailsOption) {
             salla.event.on('product-options::change', data => {
                 if (data.option.type == 'thumbnail') {
-                    const slideIndex = this.sliderWrapper.querySelector(`[data-img-id="${data.detail.option_value}"]`)?.getAttribute('data-slid-index');
+                    const slideIndex = this.sliderWrapper?.querySelector(`[data-img-id="${data.detail.option_value}"]`)?.getAttribute('data-slid-index');
                     slideIndex ? this.slideTo(parseInt(slideIndex), 300, false) : '';
                 }
             });
         }
-        return new Promise((resolve, reject) => {
-            // @ts-ignore
-            if (typeof Swiper !== 'undefined') {
-                return resolve(true);
-            }
-            if (document.getElementById('swiper-script')) {
-                let interval = setInterval(() => {
-                    // @ts-ignore
-                    if (typeof Swiper !== 'undefined') {
-                        clearInterval(interval);
-                        resolve(true);
-                    }
-                }, 5);
-            }
-            else {
-                // ? There is an issue with stencil bundling it breaks the swiper import, so we need to import it manually by swiperjs rerendered file
-                // ! IT'S NOT A GOOD SOLUTION, BUT IT WORKS, WE NEED TO FIND A BETTER SOLUTION
-                this.swiperScript = document.createElement('script');
-                this.swiperScript.onload = () => {
-                    resolve(true);
-                    salla.event.emit('swiper::loaded');
-                };
-                this.swiperScript.onerror = (error) => {
-                    salla.logger.warn('failed load swiper bundle', error);
-                    reject(true);
-                };
-                this.swiperScript.src = 'https://cdn.salla.network/js/swiper@8.js';
-                this.swiperScript.setAttribute('id', 'swiper-script');
-                document.body.appendChild(this.swiperScript);
-            }
-        });
     }
     getSwiperConfig() {
         let autoplay = this.autoPlay;
@@ -363,7 +334,7 @@ export class SallaSlider {
             centeredSlides: this.centered,
             slidesPerView: this.slidesPerView,
             autoHeight: this.autoHeight,
-            lazy: true,
+            // v9+: native lazy (loading="lazy" on images); no lazy module
             on: {
                 // todo:: find better way for this workaround to show lazyLoad for duplicated slides, because it clones the slide after it's already rendered,
                 // then it re appended it as is,in this case the image is loaded but class not added.
@@ -398,7 +369,6 @@ export class SallaSlider {
             slidesPerView: 4,
             spaceBetween: 10,
             watchOverflow: true,
-            watchSlidesVisibility: true,
             breakpoints: {
                 768: {
                     direction: this.verticalThumbs ? "vertical" : "horizontal",
@@ -418,9 +388,9 @@ export class SallaSlider {
                 ...(this.pre_defined_config[this.type] || {})
             };
         if (this.type == 'thumbs' && this.thumbsSliderWrapper) {
-            for (const slide of this.thumbsSliderWrapper.children) {
-                //todo:: use `s-slider-slide`
-                slide.classList.add('swiper-slide');
+            for (const slide of Array.from(this.thumbsSliderWrapper.children)) {
+                if (slide.nodeType === Node.ELEMENT_NODE)
+                    slide.classList.add('swiper-slide');
             }
             if (this.hasThumbSlot && this.thumbsConfig) {
                 try {
@@ -433,7 +403,9 @@ export class SallaSlider {
                     salla.logger.warn('Failed to parse thumbs slider config:', error);
                 }
             }
-            // @ts-ignore
+            if (!this.thumbsSliderContainer) {
+                return pre_defined_config;
+            }
             this.thumbsSlider = new Swiper(this.thumbsSliderContainer, pre_defined_thumbs_config);
             // @ts-ignore
             pre_defined_config.thumbs = {
@@ -467,11 +439,20 @@ export class SallaSlider {
         return direction;
     }
     initSlider() {
-        for (const slide of this.sliderWrapper.children) {
-            slide.classList.add('swiper-slide');
+        for (const slide of Array.from(this.sliderWrapper?.children || [])) {
+            if (slide.nodeType === Node.ELEMENT_NODE)
+                slide.classList.add('swiper-slide');
+        }
+        if (!this.sliderContainer) {
+            salla.logger.warn('Slider container not found');
+            return;
         }
-        // @ts-ignore
         this.slider = new Swiper(this.sliderContainer, this.getSwiperConfig());
+        // 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
@@ -507,7 +488,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: '1ea8cca50a8069cfa57617a79d84a1d9a9f85d8a', class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
+        return (h(Host, { key: '0b3f597ee3e0b5bfddfdcc9e3167edc93273defe', 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 ?
@@ -515,26 +496,84 @@ 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: 'e782e1a255ef74387e143be5e54ec8212b133f63', class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", { key: 'e69fb142f47b11d749a0ea2676177118eaa2093a' }), h("div", { key: '469f85e0a975a1de25c6c6c47918b85bb640e271', class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { key: '87d7c9b65e2d499bbd716a17ec5ce1f3079cc750', 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: '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", { 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));
     }
-    componentDidLoad() {
-        let itemsSlot = this.sliderWrapper.querySelector('div[slot="items"]');
-        !!itemsSlot ? itemsSlot.replaceWith(...itemsSlot.children) : null;
-        if (this.type == 'thumbs' && this.hasThumbSlot) {
-            let thumbsSlot = this.thumbsSliderWrapper.querySelector('div[slot="thumbs"]');
-            !!thumbsSlot ? thumbsSlot.replaceWith(...thumbsSlot.children) : 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' });
         }
-        // if swiper is not loaded, lets relay on event
-        // @ts-ignore
-        if (typeof Swiper === 'undefined') {
-            salla.event.once('swiper::loaded', () => this.initSlider());
+        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)
+            return;
+        const active = this.slider.activeIndex;
+        const toLoad = [active - 1, active, active + 1];
+        toLoad.forEach(i => {
+            const slide = this.slider.slides[i];
+            if (!slide)
+                return;
+            slide.querySelectorAll('[data-background]').forEach((el) => {
+                this.loadBackgroundIfVisible(el);
+            });
+        });
+    }
+    /** Load background only when element is in viewport. */
+    loadBackgroundIfVisible(el) {
+        if (el.classList.contains('swiper-lazy-loaded'))
+            return;
+        if (!this.lazyObserver) {
+            this.lazyObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (!entry.isIntersecting)
+                        return;
+                    const target = entry.target;
+                    const bg = target.getAttribute('data-background');
+                    if (bg) {
+                        target.style.backgroundImage = `url('${bg}')`;
+                        target.classList.add('swiper-lazy-loaded');
+                        target.removeAttribute('data-background');
+                    }
+                    observer.unobserve(target);
+                });
+            }, { rootMargin: '50px' });
         }
-        else { // if swiper is loaded lets init our slider
-            this.initSlider();
+        this.lazyObserver.observe(el);
+    }
+    /** Keep only element nodes so Swiper never sees text nodes (getAttribute would throw). */
+    flattenSlotToElements(container, slotSelector) {
+        const slotEl = container?.querySelector(slotSelector);
+        if (!slotEl)
+            return;
+        const elements = Array.from(slotEl.children).filter((node) => node.nodeType === Node.ELEMENT_NODE);
+        if (elements.length)
+            slotEl.replaceWith(...elements);
+    }
+    componentDidLoad() {
+        this.flattenSlotToElements(this.sliderWrapper, 'div[slot="items"]');
+        if (this.type == 'thumbs' && this.hasThumbSlot) {
+            this.flattenSlotToElements(this.thumbsSliderWrapper, 'div[slot="thumbs"]');
         }
+        this.initSlider();
+    }
+    disconnectedCallback() {
+        this.lazyObserver?.disconnect();
+        this.lazyImageObserver?.disconnect();
     }
     static get is() { return "salla-slider"; }
     static get originalStyleUrls() {
@@ -979,7 +1018,6 @@ export class SallaSlider {
             "currentIndex": {},
             "isEnd": {},
             "isBeginning": {},
-            "swiperScript": {},
             "displayAllTitle": {},
             "windowWidth": {}
         };