@salla.sa/twilight-components 2.14.354 → 2.14.355

package/dist/cjs/salla-multiple-bundle-product-options-modal_2.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var keyboard_arrow_right = require('./keyboard_arrow_right-BayM_Il2.js');
 
 const sallaMultipleBundleProductOptionsModalCss = ":host{display:block}";

package/dist/cjs/salla-multiple-bundle-product.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 const sallaMultipleBundleProductCss = ":host{display:block}";
 

package/dist/cjs/salla-notification-item.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 const sallaNotificationsCss = "";
 

package/dist/cjs/salla-notifications.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var Helper = require('./Helper-DHRnzcFm.js');
 require('./anime.es-BqW8JHZi.js');
 

package/dist/cjs/salla-offer-modal.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var specialDiscount = require('./special-discount-DC2oXurL.js');
 
 var Tag = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/cjs/salla-offer.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 var PageType;
 (function (PageType) {

package/dist/cjs/salla-order-details-multiple-bundle-product.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 const sallaOrderDetailsMultipleBundleProductCss = "";
 

package/dist/cjs/salla-order-details-options.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 var copyIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/cjs/salla-order-details.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 const sallaOrderDetailsCss = "";
 

package/dist/cjs/salla-order-summary.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var check = require('./check-x3w3-gpj.js');
 
 var iconFileArchive = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/salla-order-totals-card.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 const sallaOrderTotalsCardCss = ":host{display:block}";
 

package/dist/cjs/salla-orders.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var Helper = require('./Helper-DHRnzcFm.js');
 require('./anime.es-BqW8JHZi.js');
 

package/dist/cjs/salla-payments.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 const sallaPaymentsCss = ":host{display:block}";
 
@@ -27,36 +27,24 @@ const SallaPayments = class {
                     this.exclude = [];
                 }
             }
-            this.placeholderImage = salla.url.cdn(`images/s-empty.png`);
-            this.paymentSlot = this.host.querySelector('[slot="payment"]')?.innerHTML || `<li class="s-payments-list-item"><img class="lazy" width="100%" height="100%" src="${this.placeholderImage}" data-src="{image}" alt={payment} /><li>`;
-            this.sbcSlot = this.host.querySelector('[slot="sbc"]')?.innerHTML || `<li class="s-payments-list-item"><a target="_blank" href="{link}"> <img width="100%" height="100%" src="${this.placeholderImage}" data-src={image} class="lazy s-payments-sbc-image" alt="SBC"/></a><li>`;
-            this.codSlot = this.host.querySelector('[slot="cod"]')?.innerHTML || `<li class="s-payments-list-item"> <img width="100%" height="100%" src="${this.placeholderImage}" data-src={image} class="lazy" alt="COD"/><li>`;
+            this.paymentSlot = this.host.querySelector('[slot="payment"]')?.innerHTML || `<li class="s-payments-list-item"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" alt="{payment}" /></li>`;
+            this.sbcSlot = this.host.querySelector('[slot="sbc"]')?.innerHTML || `<li class="s-payments-list-item"><a target="_blank" href="{link}"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" class="s-payments-sbc-image" alt="SBC" /></a></li>`;
+            this.codSlot = this.host.querySelector('[slot="cod"]')?.innerHTML || `<li class="s-payments-list-item"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" alt="COD" /></li>`;
             this.payments = salla.config.get('store.settings.payments');
         });
     }
     render() {
         const madeInKSA = !this.exclude.includes('made-in-ksa') && salla.config.get('store.settings.made_in_ksa');
         const sbcId = this.exclude.includes('sbc') ? null : salla.config.get('store.settings.certificate.id');
-        return (index.h(index.Host, { key: '171f3100fd67a51ad678cfdf648ff69c64c2a3a1', class: "s-payments-list-wrap" }, index.h("ul", { key: 'e6f55f5a6b1670d1f2c270cf4316c90ff5353a08', class: "s-payments-list" }, madeInKSA && index.h("li", { key: '42bd30418212c78184ccc22a449d724cc82df46b', class: "s-payments-list-item" }, index.h("img", { key: '8affc4db8a1fd708197a00dceba7f31759b7febd', class: "lazy", width: "100%", height: "100%", decoding: "async", loading: "lazy", "data-src": salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
+        return (index.h(index.Host, { key: 'd93c9cfafd67203e3d85f78296b6256dbdfd8d78', class: "s-payments-list-wrap" }, index.h("ul", { key: '9520b4979082d6e733edb3ec5d6defe97beec6de', class: "s-payments-list" }, madeInKSA && index.h("li", { key: '93ba9c342f5809d6b75ab00f99126a351c18ccc5', class: "s-payments-list-item" }, index.h("img", { key: '8e62415523f4a1ccf839d394d5089ee49e0873c4', width: "100%", height: "100%", decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
             index.h("div", { id: "cod-slot", innerHTML: this.codSlot
                     .replace(/\{image\}/g, salla.url.cdn(`images/payment/cod_mini.png`, 58, 58)) }) :
             index.h("div", { id: "payment-slot", innerHTML: this.paymentSlot
                     .replace(/\{image\}/g, salla.url.cdn(`images/payment/${payment}_mini.png`, 58, 58))
-                    .replace(/\{payment\}/g, payment) }))), sbcId && index.h("div", { key: 'a0b88ee6a9c0378bc2946ab5506747ba0ff4ff12', id: "sbc-slot", innerHTML: this.sbcSlot
+                    .replace(/\{payment\}/g, payment) }))), sbcId && index.h("div", { key: '0acb0d8a0f4c4c53c9e439127418081684cd2bd1', id: "sbc-slot", innerHTML: this.sbcSlot
                 .replace(/\{image\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))
                 .replace(/\{link\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`) }))));
     }
-    componentDidLoad() {
-        //todo:: double check about the following workaround, it looks not normal
-        document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));
-        // fix lazy loaded images that have 100% width and height
-        this.host.querySelectorAll('.lazy').forEach((img) => {
-            img.addEventListener('load', () => {
-                img.setAttribute('width', "100%");
-                img.setAttribute('height', "100%");
-            });
-        });
-    }
     componentDidRender() {
         //todo:: double check about the following workaround to reduce the dom length, it looks unusal
         this.host.querySelectorAll('#payment-slot').forEach(el => el.replaceWith(el.firstChild));

package/dist/cjs/salla-placeholder.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 var Inbox = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/cjs/salla-price-range.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var arrowLeft = require('./arrow-left-xSEmRpp6.js');
 
 var arrowRight = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/salla-product-size-guide.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 var PencilRuler = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/cjs/salla-products-list.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var anime_es = require('./anime.es-BqW8JHZi.js');
 var shoppingBag = require('./shopping-bag-C1gvTVHr.js');
 var Helper = require('./Helper-DHRnzcFm.js');

package/dist/cjs/salla-products-slider.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var Helper = require('./Helper-DHRnzcFm.js');
 require('./anime.es-BqW8JHZi.js');
 
@@ -106,7 +106,7 @@ const SallaProductsSlider = class {
         if (!this.canRender()) {
             return;
         }
-        return (index.h(index.Host, { class: "s-products-slider-wrapper" }, index.h("salla-slider", { class: "s-products-slider-slider", id: this.sliderId || `s-products-slider-${Math.random().toString(36).substr(2, 9)}`, "auto-play": this.autoplay, type: "carousel", "block-title": this.blockTitle, "block-subTitle": this.subTitle, "display-all-url": this.displayAllUrl, sliderConfig: this.sliderConfig ? this.sliderConfig : null }, index.h("div", { slot: "items" }, this.productsData?.map(product => this.getItemHTML(product))))));
+        return (index.h(index.Host, { class: "s-products-slider-wrapper" }, index.h("salla-slider", { class: "s-products-slider-slider", id: this.sliderId || `s-products-slider-${Math.random().toString(36).substr(2, 9)}`, ...(this.sliderProps || {}), "auto-play": this.autoplay, type: "carousel", "block-title": this.blockTitle, "block-subTitle": this.subTitle, "display-all-url": this.displayAllUrl, sliderConfig: this.sliderConfig ? this.sliderConfig : null }, index.h("div", { slot: "items" }, this.productsData?.map(product => this.getItemHTML(product))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/salla-progress-bar.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 const sallaProgressBarCss = "";
 

package/dist/cjs/salla-quick-order.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var mail = require('./mail-CO8cFZH7.js');
 var cancel = require('./cancel-De6vslRA.js');
 

package/dist/cjs/salla-rating-modal.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var star = require('./star-DGcH7Yso.js');
 var checkCircle2 = require('./check-circle2-BDvlT4_n.js');
 var Helper = require('./Helper-DHRnzcFm.js');

package/dist/cjs/salla-scopes.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var search = require('./search-c7Aa7lM9.js');
 
 var StoreAlt = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/salla-search.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var search = require('./search-c7Aa7lM9.js');
 var Helper = require('./Helper-DHRnzcFm.js');
 require('./anime.es-BqW8JHZi.js');

package/dist/cjs/salla-skeleton.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 const sallaSkeletonCss = ":host{display:block}";
 

package/dist/cjs/salla-slider.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var keyboard_arrow_right = require('./keyboard_arrow_right-BayM_Il2.js');
 
 /**
@@ -9859,6 +9859,11 @@ const SallaSlider = class {
          * Show/hide thumbs slider arrows
          */
         this.showThumbsControls = true;
+        /**
+         * When enabled and there is exactly one slide in the `items` slot,
+         * render without initializing Swiper (single slide mode).
+         */
+        this.enableSingleSlideMode = false;
         /**
          * Enable autoplay  - working with `type="carousel" only`
          */
@@ -9890,6 +9895,9 @@ const SallaSlider = class {
         this.isBeginning = true;
         /** Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse recommended) */
         this.isDesktopViewport = typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)').matches : true;
+        /** When true, only one slide is present; we render without Swiper for performance. */
+        this.singleSlideMode = false;
+        this._rafId = null;
         this.viewportMediaQuery = null;
         this.hasThumbSlot = false;
         this.pre_defined_config = {
@@ -9945,7 +9953,7 @@ const SallaSlider = class {
      * @returns The Swiper slider instance
      */
     async sliderInstance() {
-        return this.slider;
+        return this.singleSlideMode ? undefined : this.slider;
     }
     /**
      * Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.
@@ -9955,6 +9963,8 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideTo(index, speed, runCallbacks) {
+        if (!this.slider)
+            return;
         return this.slider.slideTo(index, speed, runCallbacks);
     }
     /**
@@ -9982,7 +9992,7 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideToLoop(index, speed, runCallbacks) {
-        this.slider.slideToLoop(index, speed, runCallbacks);
+        this.slider?.slideToLoop(index, speed, runCallbacks);
     }
     /**
      * Does the same as .slideNext but for the case when used with enabled loop. So this method will slide to next slide with realIndex matching to next index
@@ -9991,7 +10001,7 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideNextLoop(speed, runCallbacks) {
-        this.slider.slideNextLoop(speed, runCallbacks);
+        this.slider?.slideNextLoop(speed, runCallbacks);
     }
     /**
      * Does the same as .slidePrev but for the case when used with enabled loop. So this method will slide to previous slide with realIndex matching to previous index
@@ -10000,7 +10010,7 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slidePrevLoop(speed, runCallbacks) {
-        this.slider.slidePrevLoop(speed, runCallbacks);
+        this.slider?.slidePrevLoop(speed, runCallbacks);
     }
     /**
      * Reset slider position to currently active slide for the duration equal to 'speed' parameter.
@@ -10009,7 +10019,7 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideReset(speed, runCallbacks) {
-        this.slider.slideReset(speed, runCallbacks);
+        this.slider?.slideReset(speed, runCallbacks);
     }
     /**
      * Reset slider position to closest slide/snap point for the duration equal to 'speed' parameter.
@@ -10017,56 +10027,56 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideToClosest(speed, runCallbacks) {
-        this.slider.slideToClosest(speed, runCallbacks);
+        this.slider?.slideToClosest(speed, runCallbacks);
     }
     /**
      *  You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper This method also includes subcall of the following methods which you can use separately:
      * **/
     async update() {
-        this.slider.update();
+        this.slider?.update();
     }
     /**
      * Force slider to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter
      * @param {number} speed - Transition duration (in ms).
      * **/
     async updateAutoHeight(speed) {
-        this.slider.updateAutoHeight(speed);
+        this.slider?.updateAutoHeight(speed);
     }
     /**
      * recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript
      * **/
     async updateSlides() {
-        this.slider.updateSlides();
+        this.slider?.updateSlides();
     }
     /**
      * recalculate slider progress
      * **/
     async updateProgress() {
-        this.slider.updateProgress();
+        this.slider?.updateProgress();
     }
     /**
      * update active/prev/next classes on slides and bullets
      * **/
     async updateSlidesClasses() {
-        this.slider.updateSlidesClasses();
+        this.slider?.updateSlidesClasses();
     }
     /**
      * Get slider slides
      * **/
     async getSlides() {
-        return await this.slider?.slides;
+        return this.singleSlideMode ? undefined : await this.slider?.slides;
     }
     /**
      * Get slider slides
      * **/
     async updateSize() {
-        return await this.slider.updateSize();
+        return await this.slider?.updateSize();
     }
     /**
      * Get thumbs slider update
      * **/
     async sliderInit() {
-        return await this.slider.init();
+        return await this.slider?.init();
     }
     /**
      * Get thumbs slider slides
@@ -10105,6 +10115,8 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async thumbsSlideTo(index, speed, runCallbacks) {
+        if (!this.thumbsSlider)
+            return;
         return this.thumbsSlider.slideTo(index, speed, runCallbacks);
     }
     /**
@@ -10292,7 +10304,16 @@ const SallaSlider = class {
         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 (index.h(index.Host, { key: '44f6baf2ec3a6421cd8d8ce6779c6ce781cecc7f', class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
+        if (this.singleSlideMode) {
+            return (index.h(index.Host, { class: 's-slider-wrapper s-slider-single-mode ' + classes }, this.blockTitle || this.displayAllUrl ?
+                index.h("div", { class: "s-slider-block__title" }, this.blockTitle ?
+                    index.h("div", { class: "s-slider-block__title-right" }, index.h("h2", null, this.blockTitle), this.blockSubtitle ? index.h("p", { innerHTML: this.blockSubtitle }) : '')
+                    : '', this.displayAllUrl ?
+                    index.h("div", { class: "s-slider-block__title-left" }, index.h("a", { href: this.displayAllUrl, class: "s-slider-block__display-all" }, this.displayAllTitle))
+                    : '')
+                : '', index.h("div", { class: "swiper s-slider-container s-slider-single", dir: this.vertical ? "ltr" : this.direction }, index.h("slot", null), index.h("div", { class: "swiper-wrapper s-slider-swiper-wrapper" }, index.h("slot", { name: 'items' })))));
+        }
+        return (index.h(index.Host, { class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
             index.h("div", { class: "s-slider-block__title" }, this.blockTitle ?
                 index.h("div", { class: "s-slider-block__title-right" }, index.h("h2", null, this.blockTitle), this.blockSubtitle ? index.h("p", { innerHTML: this.blockSubtitle }) : '')
                 : '', index.h("div", { class: "s-slider-block__title-left" }, this.displayAllUrl ?
@@ -10300,7 +10321,7 @@ const SallaSlider = class {
                 : '', this.showControls ?
                 index.h("div", { class: "s-slider-block__title-nav", dir: "rtl" }, index.h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" }, index.h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? keyboard_arrow_right.ArrowRightIcon : keyboard_arrow_right.ArrowLeftIcon })), index.h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" }, index.h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? keyboard_arrow_right.ArrowLeftIcon : keyboard_arrow_right.ArrowRightIcon })))
                 : ''))
-            : '', index.h("div", { key: '384d3224e9e2f9ad08d71093ee4c6f907232c07e', class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, index.h("slot", { key: '578756df5b652d9b7e86d3f0424e4ec886b7a75f' }), index.h("div", { key: '7966a00ec720374a3dac1533d72fdfeb31db8105', class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, index.h("slot", { key: '39f9656cabb053dc4878ae1f2bd94a6efc19f975', name: 'items' })), this.pagination ? index.h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? index.h("div", { class: "s-slider-thumbs" }, index.h("div", { class: "swiper s-slider-thumbs-container", dir: this.getThumbsDirection(), ref: el => this.thumbsSliderContainer = el }, index.h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, index.h("slot", { name: "thumbs" })), this.showThumbsControls ?
+            : '', index.h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, index.h("slot", null), index.h("div", { class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, index.h("slot", { name: 'items' })), this.pagination ? index.h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? index.h("div", { class: "s-slider-thumbs" }, index.h("div", { class: "swiper s-slider-thumbs-container", dir: this.getThumbsDirection(), ref: el => this.thumbsSliderContainer = el }, index.h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, index.h("slot", { name: "thumbs" })), this.showThumbsControls ?
             index.h("div", { class: "s-slider-thumbs-nav", dir: "rtl" }, index.h("button", { "aria-label": "Previous Slide", class: "s-slider-thumbs-prev s-slider-nav-arrow" }, index.h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? keyboard_arrow_right.ArrowRightIcon : keyboard_arrow_right.ArrowLeftIcon })), index.h("button", { "aria-label": "Next Slide", class: "s-slider-thumbs-next s-slider-nav-arrow" }, index.h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? keyboard_arrow_right.ArrowLeftIcon : keyboard_arrow_right.ArrowRightIcon })))
             : null))
             : null));
@@ -10359,25 +10380,43 @@ const SallaSlider = class {
         }
         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"]');
+        // 1. Batch Reads (Get all elements first without modifying DOM)
+        const tasks = [];
+        let _singleSlideMode = false;
+        const prepareFlatten = (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) {
+                // Queue the Write operation
+                tasks.push(() => slotEl.replaceWith(...elements));
+                if (elements.length === 1 && this.enableSingleSlideMode) {
+                    _singleSlideMode = true;
+                    elements[0].classList.add('swiper-slide');
+                }
+            }
+        };
+        prepareFlatten(this.sliderWrapper, 'div[slot="items"]');
         if (this.type == 'thumbs' && this.hasThumbSlot) {
-            this.flattenSlotToElements(this.thumbsSliderWrapper, 'div[slot="thumbs"]');
+            prepareFlatten(this.thumbsSliderWrapper, 'div[slot="thumbs"]');
         }
-        this.initSlider();
+        // 2. Batch Writes (Execute all DOM modifications together)
+        tasks.forEach(task => task());
+        // 3. Init Swiper inside rAF
+        this._rafId = requestAnimationFrame(() => {
+            this.singleSlideMode = _singleSlideMode;
+            if (!_singleSlideMode) {
+                this.initSlider();
+            }
+        });
         this.viewportMediaQuery = window.matchMedia('(min-width: 768px)');
         this.viewportMediaQuery.addEventListener('change', this.onViewportChange);
     }
     disconnectedCallback() {
+        if (this._rafId)
+            cancelAnimationFrame(this._rafId);
         this.viewportMediaQuery?.removeEventListener('change', this.onViewportChange);
         this.lazyObserver?.disconnect();
         this.lazyImageObserver?.disconnect();

package/dist/cjs/salla-social-share.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var anime_es = require('./anime.es-BqW8JHZi.js');
 var facebook = require('./facebook-DbXua6B9.js');
 var mail = require('./mail-CO8cFZH7.js');
@@ -150,7 +150,7 @@ const SallaSocialShare = class {
         window.a2a?.init('page');
     }
     render() {
-        return (index.h("div", { key: 'c4ac8faea4a8ec8aa5ba9f4e744710d508387d78', class: "s-social-share-wrapper" }, index.h("slot", { key: '6c6b54513f67be8818a9a042570286d09b7115f8', name: 'widget' }, index.h("salla-button", { key: '8a57650940dad634cf3576dada4cc35687ed447c', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, index.h("span", { key: '207f2fb0e2f89e7057775153ffcc68eebb069824', innerHTML: this.opened ? cancel.Cancel : ShareAlt }))), index.h("ul", { key: 'fd9b25a483a93efa10994c2a7a876b6741d976c2', ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share", "data-a2a-url": this.url ? this.url : window.location.href, "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
+        return (index.h("div", { key: '05350f69911825a04716569eaac5769c67b07e24', class: "s-social-share-wrapper" }, index.h("slot", { key: 'c9bb03b5907e8d211d1a2bc7d36b0924dd2fa00b', name: 'widget' }, index.h("salla-button", { key: '3120d746deabb24bc2b3994a1088a42e355c2796', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, index.h("span", { key: '7874b8c8aceb1372d061d0142405a3f07e3c0ba3', innerHTML: this.opened ? cancel.Cancel : ShareAlt }))), index.h("ul", { key: 'deaa966a6ae4a91a350361f44316d749f8459cec', ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share", "data-a2a-url": this.url ? this.url : window.location.href, "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
             return (index.h("li", null, index.h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {
                 if (icon.name === platform) {
                     return index.h("span", { class: "s-social-share-icon", innerHTML: icon.icon });

package/dist/cjs/salla-social.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 var facebook = require('./facebook-DbXua6B9.js');
 
 var instagram = `<!-- Generated by IcoMoon.io -->
@@ -57,7 +57,7 @@ const SallaSocial = class {
     }
     render() {
         const linksArray = this.getLinksArray();
-        return (index.h(index.Host, { key: 'a0bcd60fddd2fd8e86f32cd71d484ec76d02cf49' }, index.h("ul", { key: 'b595d8de59199de5081370b9440c8a46cb8c751f', class: "s-social-list" }, linksArray.map((link) => (index.h("li", { class: "s-social-link" }, index.h("div", { id: "social-slot", innerHTML: this.socialSlot
+        return (index.h(index.Host, { key: '20f01d2027bf9ac9fa635c2e814bf9778c5abf8c' }, index.h("ul", { key: '016fc5a496d6efd36cf15dc805dd83ee4d6a9845', class: "s-social-list" }, linksArray.map((link) => (index.h("li", { class: "s-social-link" }, index.h("div", { id: "social-slot", innerHTML: this.socialSlot
                 .replace(/\{icon\}/g, this.iconsList[link.type])
                 .replace(/\{type\}/g, link.type)
                 .replace(/\{link\}/g, link.value.toString()) })))))));

package/dist/cjs/salla-tab-content_3.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 const sallaTabContentCss = "";
 
@@ -33,7 +33,7 @@ const SallaTabContent = class {
             's-tabs-content': true,
             's-tabs-content-selected': this.isSelected
         };
-        return (index.h("div", { key: '6b11ec3a839c759e64e1766de55f9ac1be18931e', class: classes }, index.h("slot", { key: '17300d7a52e068428ea956b2c5d5be6d0ab69fca' })));
+        return (index.h("div", { key: 'dd7c68e402701af152ab5d3d5afb2565f9b4a5cb', class: classes }, index.h("slot", { key: 'f7599dd3d56d04dd06d9d8cce105d0c7b73b6195' })));
     }
 };
 SallaTabContent.style = sallaTabContentCss;
@@ -92,7 +92,7 @@ const SallaTabHeader = class {
             's-tabs-active': this.isSelected,
         };
         return [
-            index.h("div", { key: '08c51c1ad15c6b0efbeb165c89fc7d73748467d0', class: classes, onClick: this.onClick.bind(this) }, index.h("slot", { key: 'ba5045dab7c254eb4533dc64630ab0c1f561701b' })),
+            index.h("div", { key: '70daa4821b240da5f44591c427999d34556a0fed', class: classes, onClick: this.onClick.bind(this) }, index.h("slot", { key: '002eb0a0e48f3a31f272a393bf4fce94bcd0c841' })),
         ];
     }
 };
@@ -145,7 +145,7 @@ const SallaTabs = class {
     }
     render() {
         return [
-            index.h("div", { key: '3195e8954179d52867093b5e861b3c0caa6d7af6', class: "s-tabs" }, index.h("div", { key: 'cf75a77b6cc9b9cd288e963ee56acf19e177029a', class: "s-tabs-header" }, index.h("slot", { key: 'fa345597be2fbb8ff4f1cb420a030c5ec821bc8b', name: "header" })), index.h("div", { key: 'f7fd939608e5341b6d9c1d75e7d9dc909a4d8912', class: "s-tabs-content-wrapper" }, index.h("slot", { key: '86ce2c9bcb3be06264e75369a6be81b2e1361619', name: "content" })))
+            index.h("div", { key: '485e1ff4ea6a556dfdd8a2e7f8166c9e3d721c7d', class: "s-tabs" }, index.h("div", { key: 'a2825df331fdfc01de63eea7800ad62e4814205b', class: "s-tabs-header" }, index.h("slot", { key: 'd9d3c9bdbce261daccd480c0245fd06930b03602', name: "header" })), index.h("div", { key: '9e02ff1a53ffd068f1b1da6cbe5fec7adbc38492', class: "s-tabs-content-wrapper" }, index.h("slot", { key: '222b612d9ef34d936b3ccb1a883a42c135f67661', name: "content" })))
         ];
     }
     get host() { return index.getElement(this); }

package/dist/cjs/salla-tiered-offer.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Ce40E8tZ.js');
+var index = require('./index-DgOViweO.js');
 
 var DiscountType;
 (function (DiscountType) {