@salla.sa/twilight-components 2.12.0 → 2.12.1

package/dist/esm/salla-add-product-button_40.entry.js

@@ -19783,7 +19783,7 @@ const SallaGifting = class {
       salla.event.dispatch('login::open');
       return;
     }
-    this.modal.open();
+    await this.modal.open();
     return await salla.api.withoutNotifier(() => salla.product.getGiftDetails(this.productId))
       .then((response) => {
       this.gift = response.data;
@@ -19794,9 +19794,7 @@ const SallaGifting = class {
       this.hasError = true;
       this.errorMessage = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
     })
-      .finally(() => {
-      this.modal.stopLoading();
-    });
+      .finally(() => this.modal.stopLoading());
   }
   /**
    *
@@ -19937,13 +19935,13 @@ const SallaGifting = class {
     return `<div class="s-gifting-filepond-placeholder"><span class="s-gifting-filepond-placeholder-icon">${Images}</span><p class="s-gifting-filepond-placeholder-text">${this.selectImageOrUpload ? this.selectImageOrUpload : ''}</p></div>`;
   }
   setPreview(image) {
-    var _a, _b;
+    var _a, _b, _c;
     (_a = this.uploader) === null || _a === void 0 ? void 0 : _a.classList.add('has-bg');
     var bg = document.querySelector('.filepond-bg') ? document.querySelector('.filepond-bg') : document.createElement('div');
     bg.classList.add('filepond-bg');
     bg.classList.remove('s-hidden');
     bg.style.backgroundImage = "url('" + image.url + "')";
-    (_b = this.uploader) === null || _b === void 0 ? void 0 : _b.querySelector('.filepond--root').appendChild(bg);
+    (_c = (_b = this.uploader) === null || _b === void 0 ? void 0 : _b.querySelector('.filepond--root')) === null || _c === void 0 ? void 0 : _c.appendChild(bg);
     this.uploadedImage = image.url;
     if (!!this.gift && this.gift.gift_images.length) {
       this.setWrapperHeight(1, 150, 0);
@@ -20026,8 +20024,7 @@ const SallaGifting = class {
       }
     };
     return await salla.product.addGiftToCart(this.productId, payload, true).then((resp) => {
-      console.log(resp);
-      this.modal.close();
+      return this.modal.close();
     }).catch((e) => {
       if (e.response.status == 422) {
         this.errors = e.response.data.error.fields;
@@ -21489,7 +21486,6 @@ const SallaMap = class {
    * Open location component
    */
   async open() {
-    var _a;
     // only init google maps on modal open :) to save resources
     if (!this.map)
       this.initGoogleMaps({
@@ -21498,7 +21494,7 @@ const SallaMap = class {
           document.documentElement.lang ||
           'ar',
       }, this.mapElement);
-    return (_a = this.locationModal) === null || _a === void 0 ? void 0 : _a.open();
+    return await this.locationModal.open();
   }
   // rendering functions
   getLocationModal() {
@@ -24932,7 +24928,7 @@ const SallaQuickBuy = class {
         // if (!this.currency) {
         //   this.currency = salla.config.get('user.currency_code');
         // }
-        var _a, _b;
+        var _a, _b, _c;
         if (!this.productId && salla.config.get('page.id')) {
           this.productId = salla.config.get('page.id');
         }
@@ -24957,14 +24953,14 @@ const SallaQuickBuy = class {
           });
         }
         if (salla.url.is_page('product.single')) {
-          salla.product.event.onPriceUpdated(response => {
+          (_a = salla.product.event) === null || _a === void 0 ? void 0 : _a.onPriceUpdated(response => {
             this.amount = response.data.base_currency_price.amount;
             this.currency = response.data.base_currency_price.currency;
           });
         }
         let isNotIframe = window.self === window.top;
-        this.isApplePayActive = isNotIframe && ((_a = window.ApplePaySession) === null || _a === void 0 ? void 0 : _a.canMakePayments())
-          && ((_b = salla.config.get('store.settings.payments')) === null || _b === void 0 ? void 0 : _b.includes('apple_pay'))
+        this.isApplePayActive = isNotIframe && ((_b = window.ApplePaySession) === null || _b === void 0 ? void 0 : _b.canMakePayments())
+          && ((_c = salla.config.get('store.settings.payments')) === null || _c === void 0 ? void 0 : _c.includes('apple_pay'))
           && salla.config.get('store.settings.is_salla_gateway', false);
         let applePaySdk = document.getElementById('apple-pay-sdk');
         if (applePaySdk || !this.isApplePayActive) {
@@ -25763,7 +25759,7 @@ const ArrowLeftIcon = `<!-- Generated by IcoMoon.io -->
 
 const sallaSliderCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA\") format(\"woff\");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0)}.swiper-pointer-events{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-pointer-events.swiper-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height, -webkit-transform;transition-property:height, -webkit-transform;transition-property:transform, height;transition-property:transform, height, -webkit-transform}.swiper-backface-hidden .swiper-slide{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-wrapper,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-cube-shadow{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:\"\";-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:9999;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}:root{}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:300ms opacity;transition:300ms opacity;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none !important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(0.33);transform:scale(0.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(0.33);transform:scale(0.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(0.33);transform:scale(0.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, 0.2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none !important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0px, -50%, 0);transform:translate3d(0px, -50%, 0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:200ms top, 200ms -webkit-transform;transition:200ms top, 200ms -webkit-transform;transition:200ms transform, 200ms top;transition:200ms transform, 200ms top, 200ms -webkit-transform}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms left, 200ms -webkit-transform;transition:200ms left, 200ms -webkit-transform;transition:200ms transform, 200ms left;transition:200ms transform, 200ms left, 200ms -webkit-transform}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms right, 200ms -webkit-transform;transition:200ms right, 200ms -webkit-transform;transition:200ms transform, 200ms right;transition:200ms transform, 200ms right, 200ms -webkit-transform}.swiper-pagination-progressbar{background:rgba(0, 0, 0, 0.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}:root{--swiper-navigation-size:44px;}.swiper-button-prev,.swiper-button-next{position:absolute;top:50%;width:calc(var(--swiper-navigation-size) / 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - var(--swiper-navigation-size) / 2);z-index:10;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{opacity:0.35;cursor:auto;pointer-events:none}.swiper-button-prev.swiper-button-hidden,.swiper-button-next.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-prev,.swiper-navigation-disabled .swiper-button-next{display:none !important}.swiper-button-prev:after,.swiper-button-next:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none !important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:\"prev\"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:\"next\"}.swiper-button-lock{display:none}";
 
-const SallaSwiper = class {
+const SallaSlider = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.afterInit = createEvent(this, "afterInit", 7);
@@ -26049,6 +26045,24 @@ const SallaSwiper = class {
         },
       },
     };
+    let pre_defined_thumbs_config = {
+      freeMode: false,
+      watchSlidesProgress: true,
+      slidesPerView: 4,
+      spaceBetween: 10,
+      watchOverflow: true,
+      watchSlidesVisibility: true,
+      breakpoints: {
+        768: {
+          direction: this.verticalThumbs ? "vertical" : "horizontal",
+          spaceBetween: 16,
+        },
+      },
+      navigation: this.showThumbsControls ? {
+        nextEl: this.host.id ? `#${this.host.id} .s-slider-thumbs-next` : '',
+        prevEl: this.host.id ? `#${this.host.id} .s-slider-thumbs-prev` : ''
+      } : false,
+    };
     this.pre_defined_config.fullscreen.mousewheel = {
       releaseOnEdges: this.host.querySelectorAll('.swiper-slide').length > 1 ? false : true
     },
@@ -26058,25 +26072,16 @@ const SallaSwiper = class {
         //todo:: use `s-slider-slide`
         slide.classList.add('swiper-slide');
       }
+      if (this.hasThumbSlot && this.thumbsConfig) {
+        try {
+          pre_defined_thumbs_config = Object.assign(Object.assign({}, pre_defined_thumbs_config), JSON.parse(this.thumbsConfig));
+        }
+        catch (error) {
+          salla.logger.warn('failed to parse thumbs slider config', error);
+        }
+      }
       // @ts-ignore
-      this.thumbsSlider = new Swiper(this.thumbsSliderContainer, {
-        freeMode: false,
-        watchSlidesProgress: true,
-        slidesPerView: 4,
-        spaceBetween: 10,
-        watchOverflow: true,
-        watchSlidesVisibility: true,
-        breakpoints: {
-          768: {
-            direction: this.verticalThumbs ? "vertical" : "horizontal",
-            spaceBetween: 16,
-          },
-        },
-        navigation: this.showThumbsControls ? {
-          nextEl: this.host.id ? `#${this.host.id} .s-slider-thumbs-next` : '',
-          prevEl: this.host.id ? `#${this.host.id} .s-slider-thumbs-prev` : ''
-        } : false,
-      });
+      this.thumbsSlider = new Swiper(this.thumbsSliderContainer, pre_defined_thumbs_config);
       // @ts-ignore
       pre_defined_config.thumbs = {
         swiper: this.thumbsSlider,
@@ -26165,7 +26170,7 @@ const SallaSwiper = class {
   }
   get host() { return getElement(this); }
 };
-SallaSwiper.style = sallaSliderCss;
+SallaSlider.style = sallaSliderCss;
 
 const facebook = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -28342,6 +28347,6 @@ const SallaVerify = class {
 };
 SallaVerify.style = sallaVerifyCss;
 
-export { SallaAddProductButton as salla_add_product_button, SallaButton as salla_button, SallaCartSummary as salla_cart_summary, SallaColorPicker as salla_color_picker, SallaCountDown as salla_count_down, SallaDatetimePicker as salla_datetime_picker, SallaFileUpload as salla_file_upload, SallaGifting as salla_gifting, SallaInfiniteScroll as salla_infinite_scroll, SallaListTile as salla_list_tile, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaLoyalty as salla_loyalty, SallaMaintenanceAlert as salla_maintenance_alert, SallaMap as salla_map, SallaModal as salla_modal, SallaOfferModal as salla_offer_modal, SallaPlaceholder as salla_placeholder, SallaProductAvailability as salla_product_availability, SallaProductCard as salla_product_card, SallaProductSizeGuide as salla_product_size_guide, SallaProgressBar as salla_progress_bar, SallaQuantityInput as salla_quantity_input, SallaQuickBuy as salla_quick_buy, SallaQuickOrder as salla_quick_order, SallaRatingModal as salla_rating_modal, SallaRatingStars as salla_rating_stars, SallaScopees as salla_scopes, SallaSearch as salla_search, SallaSkeleton as salla_skeleton, SallaSwiper as salla_slider, SallaSocialShare as salla_social_share, SallaTabContent as salla_tab_content, SallaTabHeader as salla_tab_header, SallaTabs as salla_tabs, SallaTelInput as salla_tel_input, SallaUserMenu as salla_user_menu, SallaUserSettings as salla_user_settings, SallaVerify as salla_verify };
+export { SallaAddProductButton as salla_add_product_button, SallaButton as salla_button, SallaCartSummary as salla_cart_summary, SallaColorPicker as salla_color_picker, SallaCountDown as salla_count_down, SallaDatetimePicker as salla_datetime_picker, SallaFileUpload as salla_file_upload, SallaGifting as salla_gifting, SallaInfiniteScroll as salla_infinite_scroll, SallaListTile as salla_list_tile, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaLoyalty as salla_loyalty, SallaMaintenanceAlert as salla_maintenance_alert, SallaMap as salla_map, SallaModal as salla_modal, SallaOfferModal as salla_offer_modal, SallaPlaceholder as salla_placeholder, SallaProductAvailability as salla_product_availability, SallaProductCard as salla_product_card, SallaProductSizeGuide as salla_product_size_guide, SallaProgressBar as salla_progress_bar, SallaQuantityInput as salla_quantity_input, SallaQuickBuy as salla_quick_buy, SallaQuickOrder as salla_quick_order, SallaRatingModal as salla_rating_modal, SallaRatingStars as salla_rating_stars, SallaScopees as salla_scopes, SallaSearch as salla_search, SallaSkeleton as salla_skeleton, SallaSlider as salla_slider, SallaSocialShare as salla_social_share, SallaTabContent as salla_tab_content, SallaTabHeader as salla_tab_header, SallaTabs as salla_tabs, SallaTelInput as salla_tel_input, SallaUserMenu as salla_user_menu, SallaUserSettings as salla_user_settings, SallaVerify as salla_verify };
 
 //# sourceMappingURL=salla-add-product-button_40.entry.js.map