@salla.sa/twilight-components 2.9.49 → 2.10.0

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1d2b3370.js');
 const _commonjsHelpers = require('./_commonjsHelpers-691dd63b.js');
-const core = require('./core-c7a9fb22.js');
 
 const sallaButtonCss = "";
 
@@ -112,7 +111,11 @@ const SallaButton = class {
     return (index.h("button", Object.assign({}, this.getBtnAttributes(), { disabled: this.disabled }), index.h("span", { class: "s-button-text", ref: el => this.text = el }, index.h("slot", null)), this.loading ? index.h("span", { class: "s-button-loader" }) : ''));
   }
   render() {
-    return (index.h(index.Host, { class: "s-button-wrap" }, this.href ? index.h("a", { href: this.href }, this.button()) : this.button()));
+    var _a;
+    //TODO:: find a better fix, this is a patch for issue that duplicates the buttons twice @see the screenshot inside this folder
+    return ((_a = this.host.closest('.swiper-slide')) === null || _a === void 0 ? void 0 : _a.classList.contains('swiper-slide-duplicate'))
+      ? ''
+      : (index.h(index.Host, { class: "s-button-wrap" }, this.href ? index.h("a", { href: this.href }, this.button()) : this.button()));
   }
   get host() { return index.getElement(this); }
 };
@@ -19692,6 +19695,252 @@ var filepondPluginImageEdit = _commonjsHelpers.createCommonjsModule(function (mo
 });
 });
 
+var filepondPluginFileValidateType = _commonjsHelpers.createCommonjsModule(function (module, exports) {
+/*!
+ * FilePondPluginFileValidateType 1.2.8
+ * Licensed under MIT, https://opensource.org/licenses/MIT/
+ * Please visit https://pqina.nl/filepond/ for details.
+ */
+
+/* eslint-disable */
+
+(function(global, factory) {
+  (module.exports = factory())
+    ;
+})(_commonjsHelpers.commonjsGlobal, function() {
+
+  var plugin = function plugin(_ref) {
+    var addFilter = _ref.addFilter,
+      utils = _ref.utils;
+    // get quick reference to Type utils
+    var Type = utils.Type,
+      isString = utils.isString,
+      replaceInString = utils.replaceInString,
+      guesstimateMimeType = utils.guesstimateMimeType,
+      getExtensionFromFilename = utils.getExtensionFromFilename,
+      getFilenameFromURL = utils.getFilenameFromURL;
+
+    var mimeTypeMatchesWildCard = function mimeTypeMatchesWildCard(
+      mimeType,
+      wildcard
+    ) {
+      var mimeTypeGroup = (/^[^/]+/.exec(mimeType) || []).pop(); // image/png -> image
+      var wildcardGroup = wildcard.slice(0, -2); // image/* -> image
+      return mimeTypeGroup === wildcardGroup;
+    };
+
+    var isValidMimeType = function isValidMimeType(
+      acceptedTypes,
+      userInputType
+    ) {
+      return acceptedTypes.some(function(acceptedType) {
+        // accepted is wildcard mime type
+        if (/\*$/.test(acceptedType)) {
+          return mimeTypeMatchesWildCard(userInputType, acceptedType);
+        }
+
+        // is normal mime type
+        return acceptedType === userInputType;
+      });
+    };
+
+    var getItemType = function getItemType(item) {
+      // if the item is a url we guess the mime type by the extension
+      var type = '';
+      if (isString(item)) {
+        var filename = getFilenameFromURL(item);
+        var extension = getExtensionFromFilename(filename);
+        if (extension) {
+          type = guesstimateMimeType(extension);
+        }
+      } else {
+        type = item.type;
+      }
+
+      return type;
+    };
+
+    var validateFile = function validateFile(
+      item,
+      acceptedFileTypes,
+      typeDetector
+    ) {
+      // no types defined, everything is allowed \o/
+      if (acceptedFileTypes.length === 0) {
+        return true;
+      }
+
+      // gets the item type
+      var type = getItemType(item);
+
+      // no type detector, test now
+      if (!typeDetector) {
+        return isValidMimeType(acceptedFileTypes, type);
+      }
+
+      // use type detector
+      return new Promise(function(resolve, reject) {
+        typeDetector(item, type)
+          .then(function(detectedType) {
+            if (isValidMimeType(acceptedFileTypes, detectedType)) {
+              resolve();
+            } else {
+              reject();
+            }
+          })
+          .catch(reject);
+      });
+    };
+
+    var applyMimeTypeMap = function applyMimeTypeMap(map) {
+      return function(acceptedFileType) {
+        return map[acceptedFileType] === null
+          ? false
+          : map[acceptedFileType] || acceptedFileType;
+      };
+    };
+
+    // setup attribute mapping for accept
+    addFilter('SET_ATTRIBUTE_TO_OPTION_MAP', function(map) {
+      return Object.assign(map, {
+        accept: 'acceptedFileTypes'
+      });
+    });
+
+    // filtering if an item is allowed in hopper
+    addFilter('ALLOW_HOPPER_ITEM', function(file, _ref2) {
+      var query = _ref2.query;
+      // if we are not doing file type validation exit
+      if (!query('GET_ALLOW_FILE_TYPE_VALIDATION')) {
+        return true;
+      }
+
+      // we validate the file against the accepted file types
+      return validateFile(file, query('GET_ACCEPTED_FILE_TYPES'));
+    });
+
+    // called for each file that is loaded
+    // right before it is set to the item state
+    // should return a promise
+    addFilter('LOAD_FILE', function(file, _ref3) {
+      var query = _ref3.query;
+      return new Promise(function(resolve, reject) {
+        if (!query('GET_ALLOW_FILE_TYPE_VALIDATION')) {
+          resolve(file);
+          return;
+        }
+
+        var acceptedFileTypes = query('GET_ACCEPTED_FILE_TYPES');
+
+        // custom type detector method
+        var typeDetector = query('GET_FILE_VALIDATE_TYPE_DETECT_TYPE');
+
+        // if invalid, exit here
+        var validationResult = validateFile(
+          file,
+          acceptedFileTypes,
+          typeDetector
+        );
+
+        var handleRejection = function handleRejection() {
+          var acceptedFileTypesMapped = acceptedFileTypes
+            .map(
+              applyMimeTypeMap(
+                query('GET_FILE_VALIDATE_TYPE_LABEL_EXPECTED_TYPES_MAP')
+              )
+            )
+            .filter(function(label) {
+              return label !== false;
+            });
+
+          var acceptedFileTypesMapped_unique = acceptedFileTypesMapped.filter(
+            function(item, index) {
+              return acceptedFileTypesMapped.indexOf(item) === index;
+            }
+          );
+
+          reject({
+            status: {
+              main: query('GET_LABEL_FILE_TYPE_NOT_ALLOWED'),
+              sub: replaceInString(
+                query('GET_FILE_VALIDATE_TYPE_LABEL_EXPECTED_TYPES'),
+                {
+                  allTypes: acceptedFileTypesMapped_unique.join(', '),
+                  allButLastType: acceptedFileTypesMapped_unique
+                    .slice(0, -1)
+                    .join(', '),
+                  lastType:
+                    acceptedFileTypesMapped_unique[
+                      acceptedFileTypesMapped.length - 1
+                    ]
+                }
+              )
+            }
+          });
+        };
+
+        // has returned new filename immidiately
+        if (typeof validationResult === 'boolean') {
+          if (!validationResult) {
+            return handleRejection();
+          }
+          return resolve(file);
+        }
+
+        // is promise
+        validationResult
+          .then(function() {
+            resolve(file);
+          })
+          .catch(handleRejection);
+      });
+    });
+
+    // expose plugin
+    return {
+      // default options
+      options: {
+        // Enable or disable file type validation
+        allowFileTypeValidation: [true, Type.BOOLEAN],
+
+        // What file types to accept
+        acceptedFileTypes: [[], Type.ARRAY],
+        // - must be comma separated
+        // - mime types: image/png, image/jpeg, image/gif
+        // - extensions: .png, .jpg, .jpeg ( not enabled yet )
+        // - wildcards: image/*
+
+        // label to show when a type is not allowed
+        labelFileTypeNotAllowed: ['File is of invalid type', Type.STRING],
+
+        // nicer label
+        fileValidateTypeLabelExpectedTypes: [
+          'Expects {allButLastType} or {lastType}',
+          Type.STRING
+        ],
+
+        // map mime types to extensions
+        fileValidateTypeLabelExpectedTypesMap: [{}, Type.OBJECT],
+
+        // Custom function to detect type of file
+        fileValidateTypeDetectType: [null, Type.FUNCTION]
+      }
+    };
+  };
+
+  // fire pluginloaded event if running in browser, this allows registering the plugin when using async script tags
+  var isBrowser =
+    typeof window !== 'undefined' && typeof window.document !== 'undefined';
+  if (isBrowser) {
+    document.dispatchEvent(
+      new CustomEvent('FilePond:pluginloaded', { detail: plugin })
+    );
+  }
+
+  return plugin;
+});
+});
+
 const sallaFileUploadCss = "/*!\n * FilePond 4.30.4\n * Licensed under MIT, https://opensource.org/licenses/MIT/\n * Please visit https://pqina.nl/filepond/ for details.\n */.filepond--assistant{position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.filepond--browser.filepond--browser{position:absolute;margin:0;padding:0;left:1em;top:1.75em;width:calc(100% - 2em);opacity:0;font-size:0}.filepond--data{position:absolute;width:0;height:0;padding:0;margin:0;border:none;visibility:hidden;pointer-events:none;contain:strict}.filepond--drip{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;opacity:.1;pointer-events:none;border-radius:.5em;background:rgba(0,0,0,.01)}.filepond--drip-blob{-webkit-transform-origin:center center;transform-origin:center center;width:8em;height:8em;margin-left:-4em;margin-top:-4em;background:#292625;border-radius:50%}.filepond--drip-blob,.filepond--drop-label{position:absolute;top:0;left:0;will-change:transform,opacity}.filepond--drop-label{right:0;margin:0;color:#4f4f4f;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.filepond--drop-label.filepond--drop-label label{display:block;margin:0;padding:.5em}.filepond--drop-label label{cursor:default;font-size:.875em;font-weight:400;text-align:center;line-height:1.5}.filepond--label-action{text-decoration:underline;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;-webkit-text-decoration-color:#a7a4a4;text-decoration-color:#a7a4a4;cursor:pointer}.filepond--root[data-disabled] .filepond--drop-label label{opacity:.5}.filepond--file-action-button.filepond--file-action-button{font-size:1em;width:1.625em;height:1.625em;font-family:inherit;line-height:inherit;margin:0;padding:0;border:none;outline:none;will-change:transform,opacity}.filepond--file-action-button.filepond--file-action-button span{position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.filepond--file-action-button.filepond--file-action-button svg{width:100%;height:100%}.filepond--file-action-button.filepond--file-action-button:after{position:absolute;left:-.75em;right:-.75em;top:-.75em;bottom:-.75em;content:\"\"}.filepond--file-action-button{cursor:auto;color:#fff;border-radius:50%;background-color:rgba(0,0,0,.5);background-image:none;-webkit-box-shadow:0 0 0 0 hsla(0,0%,100%,0);box-shadow:0 0 0 0 hsla(0,0%,100%,0);-webkit-transition:-webkit-box-shadow .25s ease-in;transition:-webkit-box-shadow .25s ease-in;transition:box-shadow .25s ease-in;transition:box-shadow .25s ease-in, -webkit-box-shadow .25s ease-in}.filepond--file-action-button:focus,.filepond--file-action-button:hover{-webkit-box-shadow:0 0 0 .125em hsla(0,0%,100%,.9);box-shadow:0 0 0 .125em hsla(0,0%,100%,.9)}.filepond--file-action-button[disabled]{color:hsla(0,0%,100%,.5);background-color:rgba(0,0,0,.25)}.filepond--file-action-button[hidden]{display:none}.filepond--action-edit-item.filepond--action-edit-item{width:2em;height:2em;padding:.1875em}.filepond--action-edit-item.filepond--action-edit-item[data-align*=center]{margin-left:-.1875em}.filepond--action-edit-item.filepond--action-edit-item[data-align*=bottom]{margin-bottom:-.1875em}.filepond--action-edit-item-alt{border:none;line-height:inherit;background:transparent;font-family:inherit;color:inherit;outline:none;padding:0;margin:0 0 0 .25em;pointer-events:all;position:absolute}.filepond--action-edit-item-alt svg{width:1.3125em;height:1.3125em}.filepond--action-edit-item-alt span{font-size:0;opacity:0}.filepond--file-info{position:static;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex:1;flex:1;margin:0 .5em 0 0;min-width:0;will-change:transform,opacity;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.filepond--file-info *{margin:0}.filepond--file-info .filepond--file-info-main{font-size:.75em;line-height:1.2;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}.filepond--file-info .filepond--file-info-sub{font-size:.625em;opacity:.5;-webkit-transition:opacity .25s ease-in-out;transition:opacity .25s ease-in-out;white-space:nowrap}.filepond--file-info .filepond--file-info-sub:empty{display:none}.filepond--file-status{position:static;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;margin:0;min-width:2.25em;text-align:right;will-change:transform,opacity;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.filepond--file-status *{margin:0;white-space:nowrap}.filepond--file-status .filepond--file-status-main{font-size:.75em;line-height:1.2}.filepond--file-status .filepond--file-status-sub{font-size:.625em;opacity:.5;-webkit-transition:opacity .25s ease-in-out;transition:opacity .25s ease-in-out}.filepond--file-wrapper.filepond--file-wrapper{border:none;margin:0;padding:0;min-width:0;height:100%}.filepond--file-wrapper.filepond--file-wrapper>legend{position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.filepond--file{position:static;display:-ms-flexbox;display:flex;height:100%;-ms-flex-align:start;align-items:flex-start;padding:.5625em;color:#fff;border-radius:.5em}.filepond--file .filepond--file-status{margin-left:auto;margin-right:2.25em}.filepond--file .filepond--processing-complete-indicator{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:3}.filepond--file .filepond--file-action-button,.filepond--file .filepond--processing-complete-indicator,.filepond--file .filepond--progress-indicator{position:absolute}.filepond--file [data-align*=left]{left:.5625em}.filepond--file [data-align*=right]{right:.5625em}.filepond--file [data-align*=center]{left:calc(50% - .8125em)}.filepond--file [data-align*=bottom]{bottom:1.125em}.filepond--file [data-align=center]{top:calc(50% - .8125em)}.filepond--file .filepond--progress-indicator{margin-top:.1875em}.filepond--file .filepond--progress-indicator[data-align*=right]{margin-right:.1875em}.filepond--file .filepond--progress-indicator[data-align*=left]{margin-left:.1875em}[data-filepond-item-state*=error] .filepond--file-info,[data-filepond-item-state*=invalid] .filepond--file-info,[data-filepond-item-state=cancelled] .filepond--file-info{margin-right:2.25em}[data-filepond-item-state~=processing] .filepond--file-status-sub{opacity:0}[data-filepond-item-state~=processing] .filepond--action-abort-item-processing~.filepond--file-status .filepond--file-status-sub{opacity:.5}[data-filepond-item-state=processing-error] .filepond--file-status-sub{opacity:0}[data-filepond-item-state=processing-error] .filepond--action-retry-item-processing~.filepond--file-status .filepond--file-status-sub{opacity:.5}[data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing svg{-webkit-animation:fall .5s linear .125s both;animation:fall .5s linear .125s both}[data-filepond-item-state=processing-complete] .filepond--file-status-sub{opacity:.5}[data-filepond-item-state=processing-complete] .filepond--file-info-sub,[data-filepond-item-state=processing-complete] .filepond--processing-complete-indicator:not([style*=hidden])~.filepond--file-status .filepond--file-status-sub{opacity:0}[data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing~.filepond--file-info .filepond--file-info-sub{opacity:.5}[data-filepond-item-state*=error] .filepond--file-wrapper,[data-filepond-item-state*=error] .filepond--panel,[data-filepond-item-state*=invalid] .filepond--file-wrapper,[data-filepond-item-state*=invalid] .filepond--panel{-webkit-animation:shake .65s linear both;animation:shake .65s linear both}[data-filepond-item-state*=busy] .filepond--progress-indicator svg{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes shake{10%,90%{-webkit-transform:translateX(-.0625em);transform:translateX(-.0625em)}20%,80%{-webkit-transform:translateX(.125em);transform:translateX(.125em)}30%,50%,70%{-webkit-transform:translateX(-.25em);transform:translateX(-.25em)}40%,60%{-webkit-transform:translateX(.25em);transform:translateX(.25em)}}@keyframes shake{10%,90%{-webkit-transform:translateX(-.0625em);transform:translateX(-.0625em)}20%,80%{-webkit-transform:translateX(.125em);transform:translateX(.125em)}30%,50%,70%{-webkit-transform:translateX(-.25em);transform:translateX(-.25em)}40%,60%{-webkit-transform:translateX(.25em);transform:translateX(.25em)}}@-webkit-keyframes fall{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}70%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}to{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes fall{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}70%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}to{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.filepond--hopper[data-hopper-state=drag-over]>*{pointer-events:none}.filepond--hopper[data-hopper-state=drag-over]:after{content:\"\";position:absolute;left:0;top:0;right:0;bottom:0;z-index:100}.filepond--progress-indicator{z-index:103}.filepond--file-action-button{z-index:102}.filepond--file-status{z-index:101}.filepond--file-info{z-index:100}.filepond--item{position:absolute;top:0;left:0;right:0;z-index:1;padding:0;margin:.25em;will-change:transform,opacity}.filepond--item>.filepond--panel{z-index:-1}.filepond--item>.filepond--panel .filepond--panel-bottom{-webkit-box-shadow:0 .0625em .125em -.0625em rgba(0,0,0,.25);box-shadow:0 .0625em .125em -.0625em rgba(0,0,0,.25)}.filepond--item>.filepond--file-wrapper,.filepond--item>.filepond--panel{-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}.filepond--item[data-drag-state]{cursor:-webkit-grab;cursor:grab}.filepond--item[data-drag-state]>.filepond--panel{-webkit-transition:-webkit-box-shadow .125s ease-in-out;transition:-webkit-box-shadow .125s ease-in-out;transition:box-shadow .125s ease-in-out;transition:box-shadow .125s ease-in-out, -webkit-box-shadow .125s ease-in-out;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent}.filepond--item[data-drag-state=drag]{cursor:-webkit-grabbing;cursor:grabbing}.filepond--item[data-drag-state=drag]>.filepond--panel{-webkit-box-shadow:0 .125em .3125em rgba(0,0,0,.325);box-shadow:0 .125em .3125em rgba(0,0,0,.325)}.filepond--item[data-drag-state]:not([data-drag-state=idle]){z-index:2}.filepond--item-panel{background-color:#64605e}[data-filepond-item-state=processing-complete] .filepond--item-panel{background-color:#369763}[data-filepond-item-state*=error] .filepond--item-panel,[data-filepond-item-state*=invalid] .filepond--item-panel{background-color:#c44e47}.filepond--item-panel{border-radius:.5em;-webkit-transition:background-color .25s;transition:background-color .25s}.filepond--list-scroller{position:absolute;top:0;left:0;right:0;margin:0;will-change:transform}.filepond--list-scroller[data-state=overflow] .filepond--list{bottom:0;right:0}.filepond--list-scroller[data-state=overflow]{overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;-webkit-mask:-webkit-gradient(linear,left top, left bottom,from(#000),to(transparent));-webkit-mask:linear-gradient(180deg,#000 calc(100% - .5em),transparent);mask:-webkit-gradient(linear,left top, left bottom,from(#000),to(transparent));mask:linear-gradient(180deg,#000 calc(100% - .5em),transparent)}.filepond--list-scroller::-webkit-scrollbar{background:transparent}.filepond--list-scroller::-webkit-scrollbar:vertical{width:1em}.filepond--list-scroller::-webkit-scrollbar:horizontal{height:0}.filepond--list-scroller::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3);border-radius:99999px;border:.3125em solid transparent;background-clip:content-box}.filepond--list.filepond--list{position:absolute;top:0;margin:0;padding:0;list-style-type:none;will-change:transform}.filepond--list{left:.75em;right:.75em}.filepond--root[data-style-panel-layout~=integrated]{width:100%;height:100%;max-width:none;margin:0}.filepond--root[data-style-panel-layout~=circle] .filepond--panel-root,.filepond--root[data-style-panel-layout~=integrated] .filepond--panel-root{border-radius:0}.filepond--root[data-style-panel-layout~=circle] .filepond--panel-root>*,.filepond--root[data-style-panel-layout~=integrated] .filepond--panel-root>*{display:none}.filepond--root[data-style-panel-layout~=circle] .filepond--drop-label,.filepond--root[data-style-panel-layout~=integrated] .filepond--drop-label{bottom:0;height:auto;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;z-index:7}.filepond--root[data-style-panel-layout~=circle] .filepond--item-panel,.filepond--root[data-style-panel-layout~=integrated] .filepond--item-panel{display:none}.filepond--root[data-style-panel-layout~=compact] .filepond--list-scroller,.filepond--root[data-style-panel-layout~=integrated] .filepond--list-scroller{overflow:hidden;height:100%;margin-top:0;margin-bottom:0}.filepond--root[data-style-panel-layout~=compact] .filepond--list,.filepond--root[data-style-panel-layout~=integrated] .filepond--list{left:0;right:0;height:100%}.filepond--root[data-style-panel-layout~=compact] .filepond--item,.filepond--root[data-style-panel-layout~=integrated] .filepond--item{margin:0}.filepond--root[data-style-panel-layout~=compact] .filepond--file-wrapper,.filepond--root[data-style-panel-layout~=integrated] .filepond--file-wrapper{height:100%}.filepond--root[data-style-panel-layout~=compact] .filepond--drop-label,.filepond--root[data-style-panel-layout~=integrated] .filepond--drop-label{z-index:7}.filepond--root[data-style-panel-layout~=circle]{border-radius:99999rem;overflow:hidden}.filepond--root[data-style-panel-layout~=circle]>.filepond--panel{border-radius:inherit}.filepond--root[data-style-panel-layout~=circle]>.filepond--panel>*{display:none}.filepond--root[data-style-panel-layout~=circle] .filepond--file-info,.filepond--root[data-style-panel-layout~=circle] .filepond--file-status{display:none}.filepond--root[data-style-panel-layout~=circle] .filepond--action-edit-item{opacity:1!important;visibility:visible!important}@media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){.filepond--root[data-style-panel-layout~=circle]{will-change:transform}}}.filepond--panel-root{border-radius:.5em;background-color:#f1f0ef}.filepond--panel{position:absolute;left:0;top:0;right:0;margin:0;height:100%!important;pointer-events:none}.filepond-panel:not([data-scalable=false]){height:auto!important}.filepond--panel[data-scalable=false]>div{display:none}.filepond--panel[data-scalable=true]{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;background-color:transparent!important;border:none!important}.filepond--panel-bottom,.filepond--panel-center,.filepond--panel-top{position:absolute;left:0;top:0;right:0;margin:0;padding:0}.filepond--panel-bottom,.filepond--panel-top{height:.5em}.filepond--panel-top{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;border-bottom:none!important}.filepond--panel-top:after{content:\"\";position:absolute;height:2px;left:0;right:0;bottom:-1px;background-color:inherit}.filepond--panel-bottom,.filepond--panel-center{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:translate3d(0,.5em,0);transform:translate3d(0,.5em,0)}.filepond--panel-bottom{border-top-left-radius:0!important;border-top-right-radius:0!important;border-top:none!important}.filepond--panel-bottom:before{content:\"\";position:absolute;height:2px;left:0;right:0;top:-1px;background-color:inherit}.filepond--panel-center{height:100px!important;border-top:none!important;border-bottom:none!important;border-radius:0!important}.filepond--panel-center:not([style]){visibility:hidden}.filepond--progress-indicator{position:static;width:1.25em;height:1.25em;color:#fff;margin:0;pointer-events:none;will-change:transform,opacity}.filepond--progress-indicator svg{width:100%;height:100%;vertical-align:top;transform-box:fill-box}.filepond--progress-indicator path{fill:none;stroke:currentColor}.filepond--list-scroller{z-index:6}.filepond--drop-label{z-index:5}.filepond--drip{z-index:3}.filepond--root>.filepond--panel{z-index:2}.filepond--browser{z-index:1}.filepond--root{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;margin-bottom:1em;font-size:1rem;line-height:normal;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:450;text-align:left;text-rendering:optimizeLegibility;direction:ltr;contain:layout style size}.filepond--root *{-webkit-box-sizing:inherit;box-sizing:inherit;line-height:inherit}.filepond--root :not(text){font-size:inherit}.filepond--root[data-disabled]{pointer-events:none}.filepond--root[data-disabled] .filepond--list-scroller{pointer-events:all}.filepond--root[data-disabled] .filepond--list{pointer-events:none}.filepond--root .filepond--drop-label{min-height:4.75em}.filepond--root .filepond--list-scroller{margin-top:1em;margin-bottom:1em}.filepond--root .filepond--credits{position:absolute;right:0;opacity:.175;line-height:.85;font-size:11px;color:inherit;text-decoration:none;z-index:3;bottom:-14px}.filepond--root .filepond--credits[style]{top:0;bottom:auto;margin-top:14px}/*!\n * FilePondPluginImagePreview 4.6.11\n * Licensed under MIT, https://opensource.org/licenses/MIT/\n * Please visit https://pqina.nl/filepond/ for details.\n */.filepond--image-preview-markup{position:absolute;left:0;top:0}.filepond--image-preview-wrapper{z-index:2}.filepond--image-preview-overlay{display:block;position:absolute;left:0;top:0;width:100%;min-height:5rem;max-height:7rem;margin:0;opacity:0;z-index:2;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.filepond--image-preview-overlay svg{width:100%;height:auto;color:inherit;max-height:inherit}.filepond--image-preview-overlay-idle{mix-blend-mode:multiply;color:rgba(40, 40, 40, 0.85)}.filepond--image-preview-overlay-success{mix-blend-mode:normal;color:rgba(54, 151, 99, 1)}.filepond--image-preview-overlay-failure{mix-blend-mode:normal;color:rgba(196, 78, 71, 1)}@supports (-webkit-marquee-repetition: infinite) and\n  ((-o-object-fit: fill) or (object-fit: fill)){.filepond--image-preview-overlay-idle{mix-blend-mode:normal}}.filepond--image-preview-wrapper{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;left:0;top:0;right:0;height:100%;margin:0;border-radius:0.45em;overflow:hidden;background:rgba(0, 0, 0, 0.01)}.filepond--image-preview{position:absolute;left:0;top:0;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%;width:100%;pointer-events:none;background:#222;will-change:transform, opacity}.filepond--image-clip{position:relative;overflow:hidden;margin:0 auto;}.filepond--image-clip[data-transparency-indicator='grid'] img,.filepond--image-clip[data-transparency-indicator='grid'] canvas{background-color:#fff;background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' fill='%23eee'%3E%3Cpath d='M0 0 H50 V50 H0'/%3E%3Cpath d='M50 50 H100 V100 H50'/%3E%3C/svg%3E\");background-size:1.25em 1.25em}.filepond--image-bitmap,.filepond--image-vector{position:absolute;left:0;top:0;will-change:transform}.filepond--root[data-style-panel-layout~='integrated'] .filepond--image-preview-wrapper{border-radius:0}.filepond--root[data-style-panel-layout~='integrated'] .filepond--image-preview{height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.filepond--root[data-style-panel-layout~='circle'] .filepond--image-preview-wrapper{border-radius:99999rem}.filepond--root[data-style-panel-layout~='circle'] .filepond--image-preview-overlay{top:auto;bottom:0;-webkit-transform:scaleY(-1);transform:scaleY(-1)}.filepond--root[data-style-panel-layout~='circle'] .filepond--file .filepond--file-action-button[data-align*='bottom']:not([data-align*='center']){margin-bottom:0.325em}.filepond--root[data-style-panel-layout~='circle'] .filepond--file [data-align*='left']{left:calc(50% - 3em)}.filepond--root[data-style-panel-layout~='circle'] .filepond--file [data-align*='right']{right:calc(50% - 3em)}.filepond--root[data-style-panel-layout~='circle'] .filepond--progress-indicator[data-align*='bottom'][data-align*='left'],.filepond--root[data-style-panel-layout~='circle'] .filepond--progress-indicator[data-align*='bottom'][data-align*='right']{margin-bottom:calc(0.325em + 0.1875em)}.filepond--root[data-style-panel-layout~='circle'] .filepond--progress-indicator[data-align*='bottom'][data-align*='center']{margin-top:0;margin-bottom:0.1875em;margin-left:0.1875em}/*!\n * FilePondPluginImageEdit 1.6.3\n * Licensed under MIT, https://opensource.org/licenses/MIT/\n * Please visit https://pqina.nl/filepond/ for details.\n */.filepond--action-edit-item.filepond--action-edit-item{width:2em;height:2em;padding:0.1875em}.filepond--action-edit-item.filepond--action-edit-item[data-align*='center']{margin-left:-0.1875em}.filepond--action-edit-item.filepond--action-edit-item[data-align*='bottom']{margin-bottom:-0.1875em}.filepond--action-edit-item-alt{border:none;line-height:inherit;background:transparent;font-family:inherit;color:inherit;outline:none;padding:0;margin:0 0 0 0.25em;pointer-events:all;position:absolute}.filepond--action-edit-item-alt svg{width:1.3125em;height:1.3125em}.filepond--action-edit-item-alt span{font-size:0;opacity:0}.filepond--root[data-style-panel-layout~='circle'] .filepond--action-edit-item{opacity:1 !important;visibility:visible !important}";
 
 const SallaFileUpload = class {
@@ -19944,7 +20193,6 @@ const SallaFileUpload = class {
      */
     this.files = [];
   }
-  ;
   /**
    * Append intial file
    */
@@ -19955,7 +20203,7 @@ const SallaFileUpload = class {
     this.pond = this.intiFilePond();
   }
   intiFilePond() {
-    filepond.registerPlugin(FilePondPluginImagePreview, filepondPluginImageExifOrientation, filepondPluginFileValidateSize, filepondPluginImageEdit);
+    filepond.registerPlugin(FilePondPluginImagePreview, filepondPluginImageExifOrientation, filepondPluginFileValidateSize, filepondPluginImageEdit, filepondPluginFileValidateType);
     return filepond.create(document.querySelector('.s-file-upload-input'), {
       files: this.files,
       required: this.required,
@@ -19989,6 +20237,7 @@ const SallaFileUpload = class {
       labelDecimalSeparator: this.labelDecimalSeparator,
       labelThousandsSeparator: this.labelThousandsSeparator,
       labelIdle: this.labelIdle,
+      acceptedFileTypes: ['image/jpg', 'image/png', 'image/jpeg', 'image/gif', 'video/*'],
       labelInvalidField: this.labelInvalidField,
       labelFileWaitingForSize: this.labelFileWaitingForSize,
       beforeRemoveFile: (file_deleted) => new Promise((resolve) => {
@@ -19998,7 +20247,7 @@ const SallaFileUpload = class {
     });
   }
   render() {
-    return (index.h(index.Host, { class: "s-file-upload" }, index.h("input", { type: "file", class: "s-file-upload-wrapper s-file-upload-input", name: "filepond" })));
+    return (index.h(index.Host, { class: "s-file-upload" }, index.h("input", { type: "file", class: "s-file-upload-wrapper s-file-upload-input", name: "filepond", accept: "image/png, image/jpeg, image/jpg, image/gif" })));
   }
 };
 SallaFileUpload.style = sallaFileUploadCss;
@@ -20009,6 +20258,20 @@ const Images = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32"
 </svg>
 `;
 
+const ArrowRightIcon$1 = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>arrow-right</title>
+<path d="M29.217 15.465c-0.019-0.044-0.056-0.077-0.080-0.119-0.067-0.116-0.139-0.227-0.236-0.317-0.011-0.009-0.013-0.024-0.024-0.033l-10.667-9.333c-0.553-0.484-1.396-0.429-1.881 0.125-0.484 0.555-0.428 1.396 0.127 1.881l7.996 6.997h-20.452c-0.737 0-1.333 0.597-1.333 1.333s0.596 1.333 1.333 1.333h20.452l-7.996 6.997c-0.555 0.485-0.611 1.327-0.127 1.881 0.264 0.3 0.633 0.455 1.004 0.455 0.312 0 0.625-0.109 0.877-0.331l10.667-9.333c0.011-0.009 0.015-0.024 0.024-0.033 0.097-0.091 0.169-0.201 0.236-0.317 0.024-0.041 0.060-0.075 0.080-0.119 0.073-0.163 0.116-0.343 0.116-0.533s-0.043-0.371-0.116-0.535z"></path>
+</svg>
+`;
+
+const LeftArrow = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>arrow-left</title>
+<path d="M28 14.667h-20.452l7.996-6.997c0.555-0.485 0.611-1.327 0.125-1.881-0.485-0.553-1.327-0.611-1.881-0.125l-10.667 9.333c-0.011 0.009-0.015 0.024-0.025 0.033-0.096 0.089-0.167 0.199-0.232 0.313-0.025 0.043-0.063 0.076-0.081 0.121-0.073 0.165-0.116 0.345-0.116 0.536s0.043 0.371 0.116 0.535c0.020 0.045 0.057 0.079 0.081 0.121 0.067 0.115 0.136 0.224 0.232 0.313 0.011 0.009 0.015 0.024 0.025 0.033l10.667 9.333c0.253 0.221 0.567 0.331 0.879 0.331 0.371 0 0.74-0.155 1.004-0.455 0.485-0.555 0.429-1.396-0.125-1.881l-7.997-6.997h20.452c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333z"></path>
+</svg>
+`;
+
 const Cancel = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>cancel</title>
@@ -20124,7 +20387,8 @@ const SallaGifting = class {
     this.setWrapperHeight(2, 150, 0);
   }
   toggleGiftText(event) {
-    this.textSelect.classList.remove('s-form-has-error');
+    var _a;
+    (_a = this.textSelect) === null || _a === void 0 ? void 0 : _a.classList.remove('s-form-has-error');
     let dataID = event.target.children[event.target.selectedIndex].getAttribute('data-id');
     let customID = dataID == "custom";
     this.showGiftText = customID;
@@ -20146,19 +20410,20 @@ const SallaGifting = class {
   * Go to the step 2
   */
   async goToStep2() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (!this.selectedGiftTextOption) {
-      this.textSelect.classList.add('s-form-has-error');
-      this.customTextArea.classList.remove('s-form-has-error');
+      (_a = this.textSelect) === null || _a === void 0 ? void 0 : _a.classList.add('s-form-has-error');
+      (_b = this.customTextArea) === null || _b === void 0 ? void 0 : _b.classList.remove('s-form-has-error');
       return;
     }
     else if (this.selectedGiftTextOption == 'custom' && !this.selectedText) {
-      this.textSelect.classList.remove('s-form-has-error');
-      this.customTextArea.classList.add('s-form-has-error');
+      (_c = this.textSelect) === null || _c === void 0 ? void 0 : _c.classList.remove('s-form-has-error');
+      (_d = this.customTextArea) === null || _d === void 0 ? void 0 : _d.classList.add('s-form-has-error');
       return;
     }
     else {
-      this.textSelect.classList.remove('s-form-has-error');
-      this.customTextArea.classList.remove('s-form-has-error');
+      (_e = this.textSelect) === null || _e === void 0 ? void 0 : _e.classList.remove('s-form-has-error');
+      (_f = this.customTextArea) === null || _f === void 0 ? void 0 : _f.classList.remove('s-form-has-error');
     }
     this.setWrapperHeight(2, 600, 0);
     let stepNextAnime = new anime.timeline();
@@ -20189,14 +20454,15 @@ const SallaGifting = class {
       }
     }, '-=1200');
     this.currentStep = 2;
-    this.stepsWrapper.classList.remove('is-current-step-1', 'is-current-step-2');
-    this.stepsWrapper.classList.add(`is-current-step-${this.currentStep}`);
+    (_g = this.stepsWrapper) === null || _g === void 0 ? void 0 : _g.classList.remove('is-current-step-1', 'is-current-step-2');
+    (_h = this.stepsWrapper) === null || _h === void 0 ? void 0 : _h.classList.add(`is-current-step-${this.currentStep}`);
   }
   /**
     *
     * Go to the step 1
     */
   goToStep1() {
+    var _a, _b;
     let stepBackAnime = new anime.timeline({
       autoplay: false,
     });
@@ -20229,19 +20495,20 @@ const SallaGifting = class {
     stepBackAnime.play();
     this.setWrapperHeight(1, 600, 0);
     this.currentStep = 1;
-    this.stepsWrapper.classList.remove('is-current-step-1', 'is-current-step-2');
-    this.stepsWrapper.classList.add(`is-current-step-${this.currentStep}`);
+    (_a = this.stepsWrapper) === null || _a === void 0 ? void 0 : _a.classList.remove('is-current-step-1', 'is-current-step-2');
+    (_b = this.stepsWrapper) === null || _b === void 0 ? void 0 : _b.classList.add(`is-current-step-${this.currentStep}`);
   }
   getFilepondPlaceholder() {
     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) {
-    this.imageCover.classList.add('has-bg');
+    var _a, _b;
+    (_a = this.imageCover) === 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 + "')";
-    this.imageCover.querySelector('.filepond--root').appendChild(bg);
+    (_b = this.imageCover) === null || _b === void 0 ? void 0 : _b.querySelector('.filepond--root').appendChild(bg);
     this.uploadedImage = image.url;
     if (!!this.gift && this.gift.gift_images.length) {
       this.setWrapperHeight(1, 150, 0);
@@ -20364,9 +20631,9 @@ const SallaGifting = class {
           [
             index.h("div", { class: "s-gifting-modal-header" }, index.h("span", { class: "s-gifting-modal-icon" }, index.h("span", { innerHTML: GiftSharing })), index.h("h2", { class: "s-gifting-modal-title" }, index.h("div", { class: "s-gifting-modal-badge-wrapper" }, index.h("div", { class: "s-gifting-modal-badge" }, index.h("span", null, index.h("span", null, this.currentStep), "/2")), index.h("span", null, this.giftDetails)))),
             index.h("div", { class: "s-gifting-steps-wrapper steps-wrapper" }, index.h("div", { class: "s-gifting-step-one gift-step-1" }, index.h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift), index.h("div", { class: "s-gifting-modal-uploader anime-item" }, index.h("span", { class: "s-gifting-remove-preview", onClick: () => this.removePreview(), innerHTML: Cancel }), this.selectImageOrUpload && index.h("salla-file-upload", { "instant-upload": true, labelIdle: this.getFilepondPlaceholder(), serverConfig: this.getServerConfig(), onRemove: () => this.handleRemoveImage() }, " ")), index.h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && this.gift.gift_images.length > 0 ?
-              index.h("salla-slider", { type: "carousel" }, index.h("div", { slot: "items" }, (_a = this.gift) === null || _a === void 0 ? void 0 : _a.gift_images.map((item) => index.h("img", { class: "s-gifting-image s-gifting-clickable", src: item.url, onClick: () => this.setPreview(item), alt: `${item.id}` }))))
+              index.h("salla-slider", { id: "gifting-slider", loop: false, "controls-outer": true, class: "s-gifting-slider", type: "carousel" }, index.h("div", { slot: "items" }, (_a = this.gift) === null || _a === void 0 ? void 0 : _a.gift_images.map((item) => index.h("img", { class: "s-gifting-image s-gifting-clickable", src: item.url, onClick: () => this.setPreview(item), alt: `${item.id}` }))))
               : ""), index.h("div", { class: "anime-item" }, index.h("div", { class: "s-form-group s-gifting-selectText" }, index.h("label", { htmlFor: "gift-text-selection", class: "s-form-label" }, this.selectGiftMessage), index.h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, index.h("option", { "data-id": null, selected: true }, this.selectGiftMessage), (_b = this.gift) === null || _b === void 0 ? void 0 :
-              _b.gift_texts.map((txt) => index.h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)), index.h("option", { "data-id": "custom" }, this.giftCustomText))), index.h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide" }, index.h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), index.h("div", { class: "mt-1" }, index.h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))), index.h("div", { class: "anime-item" }, index.h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, index.h("span", null, this.nextStep)))), index.h("div", { class: "s-gifting-step-two gift-step-2" }, index.h("div", { class: this.errors && this.errors['sender_name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, index.h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), index.h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ? index.h("span", { class: "text-danger text-xs" }, this.errors['sender_name']) : ''), index.h("div", { class: this.errors && this.errors['receiver.name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, index.h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), index.h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }), this.errors && this.errors['receiver.name'] ? index.h("span", { class: "text-danger text-xs" }, this.errors['receiver.name']) : ''), index.h("div", { class: this.errors && this.errors['receiver.mobile'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, index.h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), index.h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ? index.h("span", { class: "text-danger text-xs" }, this.errors['receiver.mobile']) : ''), index.h("div", { class: "anime-item opacity-0" }, index.h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: "schedule" }, index.h("input", { type: "checkbox", name: 'schedule', id: 'schedule', onChange: () => this.toggleCalendar(), class: "s-checkbox" }), index.h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), index.h("div", { class: this.getCalendarClasses() }, index.h("label", { class: "s-form-label" }, this.selectSendDateAndTime), index.h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), index.h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), index.h("div", { class: "s-gifting-step-two-footer anime-item opacity-0" }, index.h("a", { href: "#!", innerHTML: this.currentLang == 'ar' ? core.ArrowRightIcon : core.ArrowLeftIcon, onClick: () => this.goToStep1() }), index.h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, index.h("span", null, this.sendGift)))))
+              _b.gift_texts.map((txt) => index.h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)), index.h("option", { "data-id": "custom" }, this.giftCustomText))), index.h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide" }, index.h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), index.h("div", { class: "mt-1" }, index.h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))), index.h("div", { class: "anime-item" }, index.h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, index.h("span", null, this.nextStep)))), index.h("div", { class: "s-gifting-step-two gift-step-2" }, index.h("div", { class: this.errors && this.errors['sender_name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, index.h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), index.h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ? index.h("span", { class: "text-danger text-xs" }, this.errors['sender_name']) : ''), index.h("div", { class: this.errors && this.errors['receiver.name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, index.h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), index.h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }), this.errors && this.errors['receiver.name'] ? index.h("span", { class: "text-danger text-xs" }, this.errors['receiver.name']) : ''), index.h("div", { class: this.errors && this.errors['receiver.mobile'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, index.h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), index.h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ? index.h("span", { class: "text-danger text-xs" }, this.errors['receiver.mobile']) : ''), index.h("div", { class: "anime-item opacity-0" }, index.h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: "schedule" }, index.h("input", { type: "checkbox", name: 'schedule', id: 'schedule', onChange: () => this.toggleCalendar(), class: "s-checkbox" }), index.h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), index.h("div", { class: this.getCalendarClasses() }, index.h("label", { class: "s-form-label" }, this.selectSendDateAndTime), index.h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), index.h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), index.h("div", { class: "s-gifting-step-two-footer anime-item opacity-0" }, index.h("a", { href: "#!", innerHTML: this.currentLang == 'ar' ? ArrowRightIcon$1 : LeftArrow, onClick: () => this.goToStep1() }), index.h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, index.h("span", null, this.sendGift)))))
           ], index.h("slot", { name: "footer" })))
     ];
   }
@@ -20905,7 +21172,7 @@ const SallaLoginModal = class {
         index.h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, salla.lang.get('blocks.header.login_by_email')) : '', index.h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
       index.h("div", { class: this.generateTabClasses('login-email'), "data-name": "login-email", ref: tab => this.emailTab = tab }, index.h("slot", { name: "before-login-email" }), index.h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')), index.h("form", { onSubmit: () => this.loginByEmail(event), method: "POST" }, index.h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e), placeholder: "your@email.com", enterkeyhint: "next", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" }), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter'))), this.isMobileAllowed ?
         index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, salla.lang.get('blocks.header.login_by_sms'))
-        : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify", { display: "inline", "support-web-auth": this.supportWebAuth ? 'true' : 'false', class: this.generateTabClasses('otp'), "data-name": "otp", ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back", innerHTML: core.ArrowRightIcon, slot: "after-footer", href: "#" })), index.h("div", { "data-name": "registration", class: this.generateTabClasses('registration'), ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("div", null, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('blocks.header.your_name')), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), index.h("span", { class: "s-login-modal-error-message" })), index.h("div", null, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('pages.profile.last_name')), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), index.h("span", { class: "s-login-modal-error-message" })), index.h("div", { class: this.generateRegClasses('phone') }, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { class: this.generateRegClasses('email') }, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')), index.h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" })), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
+        : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify", { display: "inline", "support-web-auth": this.supportWebAuth ? 'true' : 'false', class: this.generateTabClasses('otp'), "data-name": "otp", ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back", innerHTML: ArrowRightIcon$1, slot: "after-footer", href: "#" })), index.h("div", { "data-name": "registration", class: this.generateTabClasses('registration'), ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("div", null, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('blocks.header.your_name')), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), index.h("span", { class: "s-login-modal-error-message" })), index.h("div", null, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('pages.profile.last_name')), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), index.h("span", { class: "s-login-modal-error-message" })), index.h("div", { class: this.generateRegClasses('phone') }, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { class: this.generateRegClasses('email') }, index.h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.email')), index.h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" })), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
   }
   get host() { return index.getElement(this); }
 };
@@ -21039,7 +21306,7 @@ const SallaLoyalty = class {
   getConfirmationModal() {
     var _a, _b;
     return [
-      index.h("salla-placeholder", { alignment: "center", icon: Star3, class: "s-loyalty-confirmation-modal-content" }, index.h("div", { slot: "title", class: "s-loyalty-confirmation-title" }, salla.lang.get('pages.loyalty_program.exchange_points')), index.h("div", { slot: "description" }, salla.lang.get('pages.loyalty_program.are_you_sure_to_exchange'), " ( ", index.h("strong", null, (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.cost_points), " ) ", salla.lang.get('pages.loyalty_program.for'), " ( ", index.h("strong", null, (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.name), " )")),
+      index.h("salla-placeholder", { alignment: "center", icon: Star3, class: "s-loyalty-confirmation-modal-content" }, index.h("div", { slot: "title", class: "s-loyalty-confirmation-title" }, salla.lang.get('pages.loyalty_program.exchange_points')), index.h("div", { slot: "description" }, salla.lang.get('pages.loyalty_program.are_you_sure_to_exchange'), " ( ", index.h("strong", null, (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.cost_points), " ", salla.lang.get('pages.loyalty_program.point'), " ) ", salla.lang.get('pages.loyalty_program.for'), " ( ", index.h("strong", null, (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.name), " )")),
       index.h("div", { class: "s-loyalty-confirmation-actions" }, index.h("salla-button", { fill: 'outline', width: "wide", onClick: () => this.cancelProcess() }, salla.lang.get('pages.loyalty_program.cancellation')), index.h("salla-button", { loading: this.buttonLoading, width: "wide", onClick: () => this.exchangeLoyaltyPoint() }, salla.lang.get('pages.loyalty_program.confirm')))
     ];
   }
@@ -21129,10 +21396,10 @@ const SallaLoyalty = class {
         index.h("salla-list-tile", { class: 's-loyalty-widget' }, index.h("div", { slot: "icon", class: "s-loyalty-widget-icon", innerHTML: Rate }), index.h("div", { slot: "subtitle" }, this.is_loggedin ? salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": this.customerPoints }) : (this.guestMessage || salla.lang.get('pages.loyalty_program.guest_message')), index.h("salla-button", { shape: "link", color: "primary", onClick: () => salla.event.dispatch("loyalty::open") }, this.is_loggedin ? salla.lang.get('pages.loyalty_program.cart_point_exchange_now') : salla.lang.get('blocks.header.login')))) :
         ''),
       index.h("salla-modal", { noPadding: true, width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
-      index.h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, index.h("div", { slot: "loading" }, index.h("div", { class: "s-loyalty-skeleton" }, index.h("salla-list-tile", { class: "s-loyalty-header" }, index.h("div", { slot: "icon", class: "s-loyalty-header-icon" }, index.h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })), index.h("div", { slot: "title", class: "s-loyalty-header-title mb-5" }, index.h("salla-skeleton", { height: '15px', width: '50%' })), index.h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, index.h("salla-skeleton", { height: '10px' }), index.h("salla-skeleton", { height: '10px', width: '75%' }))), index.h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => index.h("div", { class: "s-loyalty-prize-item" }, index.h("salla-skeleton", { height: '9rem' }), index.h("div", { class: "s-loyalty-prize-item-title" }, index.h("salla-skeleton", { height: '15px', width: '75%' })), index.h("div", { class: "s-loyalty-prize-item-subtitle" }, index.h("salla-skeleton", { height: '10px', width: '50%' }), index.h("salla-skeleton", { height: '10px', width: '25%' })), index.h("div", { class: "s-loyalty-prize-item-points" }, index.h("salla-skeleton", { height: '15px', width: '100px' }), index.h("div", { class: "s-loyalty-prize-item-check" }, index.h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))), !this.hasError && !!this.loyaltyProgram ?
+      index.h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, index.h("div", { slot: "loading" }, index.h("div", { class: "s-loyalty-skeleton" }, index.h("salla-list-tile", { class: "s-loyalty-header" }, index.h("div", { slot: "icon", class: "s-loyalty-header-icon" }, index.h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })), index.h("div", { slot: "title", class: "s-loyalty-header-title mb-5" }, index.h("salla-skeleton", { height: '15px', width: '50%' })), index.h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, index.h("salla-skeleton", { height: '10px' }), index.h("salla-skeleton", { height: '10px', width: '75%' }))), index.h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => index.h("div", { class: "s-loyalty-prize-item swiper-slide" }, index.h("salla-skeleton", { height: '9rem' }), index.h("div", { class: "s-loyalty-prize-item-title" }, index.h("salla-skeleton", { height: '15px', width: '75%' })), index.h("div", { class: "s-loyalty-prize-item-subtitle" }, index.h("salla-skeleton", { height: '10px', width: '50%' }), index.h("salla-skeleton", { height: '10px', width: '25%' })), index.h("div", { class: "s-loyalty-prize-item-points" }, index.h("salla-skeleton", { height: '15px', width: '100px' }), index.h("div", { class: "s-loyalty-prize-item-check" }, index.h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))), !this.hasError && !!this.loyaltyProgram ?
         [
           index.h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, index.h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }), index.h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title), index.h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
-          index.h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => index.h("salla-tab-header", { slot: "header", name: prize.title }, index.h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize) => index.h("salla-tab-content", { slot: "content", name: prize.title }, index.h("salla-slider", { class: "s-loyalty-slider", type: "carousel" }, index.h("div", { slot: 'items' }, prize.items.map((item) => this.prizeItem(item))))))),
+          index.h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => index.h("salla-tab-header", { slot: "header", name: prize.title }, index.h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize, index$1) => index.h("salla-tab-content", { slot: "content", name: prize.title }, index.h("salla-slider", { class: "s-loyalty-slider", loop: false, "controls-outer": true, id: 'loyalty-popup-slider-' + index$1, type: "carousel" }, index.h("div", { slot: 'items' }, prize.items.map((item) => this.prizeItem(item))))))),
           index.h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, salla.lang.get('pages.loyalty_program.exchange_points')),
         ]
         : index.h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" }, !!this.errorMessage ? index.h("span", { slot: "description" }, this.errorMessage) : '')),
@@ -21981,6 +22248,7 @@ const SallaOfferModal = class {
   async open(product_id) {
     this.productID = product_id;
     //TODO:: make sure there is only one offer
+    this.hasError = false;
     this.modal.open();
     return await salla.api.withoutNotifier(() => salla.product.offers(product_id))
       .then(response => this.showOffer(response.data[0]))
@@ -22011,7 +22279,7 @@ const SallaOfferModal = class {
   getOfferContent() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     if ((_a = this.offer.get.products) === null || _a === void 0 ? void 0 : _a.length) {
-      return index.h("salla-slider", { type: "carousel", class: { "s-offer-modal-slider-centered": ((_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.length) <= 2, "s-offer-modal-slider": true }, "show-controls": ((_c = this.offer.get.products) === null || _c === void 0 ? void 0 : _c.length) <= 2 ? 'false' : 'true' }, index.h("div", { slot: 'items' }, (_d = this.offer.get.products) === null || _d === void 0 ? void 0 : _d.map(product => index.h("div", { class: {
+      return index.h("salla-slider", { type: "carousel", class: { "s-offer-modal-slider-centered": ((_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.length) <= 2, "s-offer-modal-slider": true }, id: "offer-modal-slider", "controls-outer": true, "show-controls": ((_c = this.offer.get.products) === null || _c === void 0 ? void 0 : _c.length) <= 2 ? 'false' : 'true' }, index.h("div", { slot: 'items' }, (_d = this.offer.get.products) === null || _d === void 0 ? void 0 : _d.map(product => index.h("div", { class: {
           "s-offer-modal-product": true,
           "s-offer-modal-slider-item": true,
           "s-offer-modal-not-available": !product.is_available
@@ -22020,11 +22288,11 @@ const SallaOfferModal = class {
           .replace(/\{url\}/g, product.url)
           .replace(/\{image\}/g, product.thumbnail)
           .replace(/\{price\}/g, product.has_special_price
-          ? salla.money(product.price) + '<span class="s-offer-modal-product-old-price">' + salla.money(product.regular_price) + '</span>'
+          ? '<span class="s-offer-modal-product-sale-price">' + salla.money(product.price) + '</span><span class="s-offer-modal-product-old-price">' + salla.money(product.regular_price) + '</span>'
           : salla.money(product.price)) }, index.h("div", { class: "s-offer-modal-btn-wrap" }, index.h("salla-button", { width: "wide", fill: 'outline', "data-id": product.id, disabled: !product.is_available, "loader-position": "center", onClick: this.addItem }, product.is_available ? salla.lang.get('pages.cart.add_to_cart') : salla.lang.get('pages.products.out_of_stock')))))));
     }
     else if ((_e = this.offer.get.categories) === null || _e === void 0 ? void 0 : _e.length) {
-      return index.h("salla-slider", { type: "carousel", class: { "s-offer-modal-slider-centered": ((_f = this.offer.get.categories) === null || _f === void 0 ? void 0 : _f.length) <= 2, "s-offer-modal-slider": true }, "show-controls": ((_g = this.offer.get.categories) === null || _g === void 0 ? void 0 : _g.length) <= 2 ? 'false' : 'true' }, index.h("div", { slot: 'items' }, this.offer.get.categories.map(category => index.h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot
+      return index.h("salla-slider", { type: "carousel", class: { "s-offer-modal-slider-centered": ((_f = this.offer.get.categories) === null || _f === void 0 ? void 0 : _f.length) <= 2, "s-offer-modal-slider": true }, id: "offer-modal-slider", "controls-outer": true, "show-controls": ((_g = this.offer.get.categories) === null || _g === void 0 ? void 0 : _g.length) <= 2 ? 'false' : 'true' }, index.h("div", { slot: 'items' }, this.offer.get.categories.map(category => index.h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item s-offer-modal-cat-item", innerHTML: this.categorySlot
           .replace(/\{tagIcon\}/g, Tag)
           .replace(/\{name\}/g, category.name)
           .replace(/\{url\}/g, category.urls.customer) }))));
@@ -22049,7 +22317,7 @@ const SallaOfferModal = class {
       '</div>';
   }
   render() {
-    return index.h("salla-modal", { "sub-title-first": true, "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true }, index.h("div", { slot: 'loading' }, index.h("div", { class: "s-offer-modal-skeleton" }, index.h("div", { class: "s-offer-modal-skeleton-header" }, index.h("salla-skeleton", { type: 'circle', height: '80px', width: '80px' }), index.h("salla-skeleton", { height: '15px', width: '50%' }), index.h("salla-skeleton", { height: '10px', width: '30%' })), index.h("div", { class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => index.h("div", { class: "s-offer-modal-skeleton-item" }, index.h("salla-skeleton", { height: '9rem' }), index.h("div", { class: "s-offer-modal-skeleton-item-title" }, index.h("salla-skeleton", { height: '15px', width: '100%' })), index.h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, index.h("salla-skeleton", { height: '9px', width: '50%' }), index.h("div", { innerHTML: Cart2 }))))), index.h("div", { class: "s-offer-modal-skeleton-footer" }, index.h("salla-skeleton", { height: '15px', width: '50%' }), index.h("salla-skeleton", { height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
+    return index.h("salla-modal", { "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true }, index.h("div", { slot: 'loading' }, index.h("div", { class: "s-offer-modal-skeleton" }, index.h("div", { class: "s-offer-modal-skeleton-header" }, index.h("salla-skeleton", { type: 'circle', height: '80px', width: '80px' }), index.h("salla-skeleton", { height: '15px', width: '50%' }), index.h("salla-skeleton", { height: '10px', width: '30%' })), index.h("div", { class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => index.h("div", { class: "s-offer-modal-skeleton-item" }, index.h("salla-skeleton", { height: '9rem' }), index.h("div", { class: "s-offer-modal-skeleton-item-title" }, index.h("salla-skeleton", { height: '15px', width: '100%' })), index.h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, index.h("salla-skeleton", { height: '9px', width: '50%' }), index.h("div", { innerHTML: Cart2 }))))), index.h("div", { class: "s-offer-modal-skeleton-footer" }, index.h("salla-skeleton", { height: '15px', width: '50%' }), index.h("salla-skeleton", { height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
       ? [index.h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), this.getOfferContent(), index.h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
           index.h("p", { class: "s-offer-modal-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.formatted_date)
           : '', index.h("label", { class: "s-offer-modal-remember-label" }, index.h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", salla.lang.get('common.elements.remember_my_choice'))),
@@ -22816,10 +23084,14 @@ const SallaRatingStars = class {
     return stars;
   }
   render() {
-    return (index.h(index.Host, null, this.value || this.value == 0 ?
-      index.h("div", { class: "s-rating-stars-wrapper" }, " ", this.createStars(this.value), " ")
-      :
-        index.h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el }, index.h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => index.h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, index.h("span", { innerHTML: Rate }))))));
+    var _a;
+    //TODO:: find a better fix, this is a patch for issue that duplicates the stars twice @see the screenshot inside this folder
+    return ((_a = this.host.closest('.swiper-slide')) === null || _a === void 0 ? void 0 : _a.classList.contains('swiper-slide-duplicate'))
+      ? ''
+      : (index.h(index.Host, null, this.value || this.value == 0 ?
+        index.h("div", { class: "s-rating-stars-wrapper" }, " ", this.createStars(this.value), " ")
+        :
+          index.h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el }, index.h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => index.h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, index.h("span", { innerHTML: Rate }))))));
   }
   componentDidLoad() {
     this.initiateRating();
@@ -23153,1806 +23425,163 @@ const SallaSkeleton = class {
 };
 SallaSkeleton.style = sallaSkeletonCss;
 
-function createElementIfNotDefined(swiper, originalParams, params, checkProps) {
-  const document = core.getDocument();
+const ArrowLeftIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>keyboard_arrow_left</title>
+<path d="M20.563 22.104l-1.875 1.875-8-8 8-8 1.875 1.875-6.125 6.125z"></path>
+</svg>
+`;
 
-  if (swiper.params.createElements) {
-    Object.keys(checkProps).forEach(key => {
-      if (!params[key] && params.auto === true) {
-        let element = swiper.$el.children(`.${checkProps[key]}`)[0];
+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}";
 
-        if (!element) {
-          element = document.createElement('div');
-          element.className = checkProps[key];
-          swiper.$el.append(element);
+const SallaSwiper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.slideChange = index.createEvent(this, "slideChange", 7);
+    this.reachBeginning = index.createEvent(this, "reachBeginning", 7);
+    this.reachEnd = index.createEvent(this, "reachEnd", 7);
+    this.slideChangeTransitionEnd = index.createEvent(this, "slideChangeTransitionEnd", 7);
+    this.slideChangeTransitionStart = index.createEvent(this, "slideChangeTransitionStart", 7);
+    this.slideNextTransitionEnd = index.createEvent(this, "slideNextTransitionEnd", 7);
+    this.slideNextTransitionStart = index.createEvent(this, "slideNextTransitionStart", 7);
+    this.slidePrevTransitionEnd = index.createEvent(this, "slidePrevTransitionEnd", 7);
+    this.slidePrevTransitionStart = index.createEvent(this, "slidePrevTransitionStart", 7);
+    this.sliderMove = index.createEvent(this, "sliderMove", 7);
+    this.touchSliderEnd = index.createEvent(this, "touchSliderEnd", 7);
+    this.touchSliderMove = index.createEvent(this, "touchSliderMove", 7);
+    this.touchSliderStart = index.createEvent(this, "touchSliderStart", 7);
+    this.sliderTransitionEnd = index.createEvent(this, "sliderTransitionEnd", 7);
+    this.sliderTransitionStart = index.createEvent(this, "sliderTransitionStart", 7);
+    /**
+     * Show/hide slider block title
+     */
+    this.blockTitle = '';
+    /**
+     * Show/hide slider block sub title
+     */
+    this.blockSubtitle = '';
+    /**
+     * Show/hide display all button beside arrows
+     */
+    this.displayAllUrl = '';
+    /**
+     * Show/hide arrows
+     */
+    this.showControls = true;
+    /**
+     * Show/hide arrows
+     */
+    this.controlsOuter = false;
+    /**
+     * Show/hide thumbs slider arrows
+     */
+    this.showThumbsControls = true;
+    /**
+     * Enable autoplay  - working with `type="carousel" only`
+     */
+    this.autoPlay = false;
+    /**
+     * Enable pagination
+     */
+    this.pagination = false;
+    /**
+     * Enable center mode  - working with `type="carousel" only`
+     */
+    this.centered = false;
+    /**
+     * Run slider in loop, Don't use it for slides with custom components inside it, because it may cause re-render issue
+     */
+    this.loop = false;
+    /**
+     * Set the type of the slider
+     * Default: ''
+     */
+    this.type = '';
+    /**
+     * Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object
+     * @example
+     * let slider = document.querySelector('salla-slider');
+     *  slider.sliderConfig = {
+     *  slidesPerView: 1,
+     *  spaceBetween : 30,
+     *  lazy: true,
+     * }
+     *
+     */
+    this.sliderConfig = {};
+    /**
+     * Thumbs Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object
+     * @example
+     * let slider = document.querySelector('salla-slider');
+     *  slider.thumbsConfig = {
+     *  slidesPerView: 1,
+     *  spaceBetween : 30,
+     *  lazy: true,
+     * }
+     *
+     */
+    this.thumbsConfig = {};
+    // States
+    this.currentIndex = undefined;
+    this.isEnd = false;
+    this.isBeginning = true;
+    this.isRTL = document.documentElement.dir === 'rtl';
+    this.pre_defined_config = {
+      carousel: {
+        speed: 300,
+        slidesPerView: 'auto',
+        spaceBetween: 0,
+      },
+      fullscreen: {
+        speed: 750,
+        parallax: true,
+        autoplay: {
+          delay: 5000,
+        },
+      },
+      testimonials: {
+        draggable: true,
+        centeredSlides: true,
+        slidesPerView: 1,
+        breakpoints: { 1024: { slidesPerView: 2 } }
+      },
+      blog: {
+        slidesPerView: 1,
+        centeredSlides: true,
+        spaceBetween: 30,
+        effect: "fade",
+        breakpoints: {
+          320: { spaceBetween: 10 },
+          768: { spaceBetween: 15 },
+          980: { paceBetween: 30 },
         }
-
-        params[key] = element;
-        originalParams[key] = element;
+      },
+      thumbs: {
+        slidesPerView: 1,
+        spaceBetween: 30
       }
-    });
+    };
   }
-
-  return params;
-}
-
-function Navigation(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on,
-    emit
-  } = _ref;
-  extendParams({
-    navigation: {
-      nextEl: null,
-      prevEl: null,
-      hideOnClick: false,
-      disabledClass: 'swiper-button-disabled',
-      hiddenClass: 'swiper-button-hidden',
-      lockClass: 'swiper-button-lock',
-      navigationDisabledClass: 'swiper-navigation-disabled'
-    }
-  });
-  swiper.navigation = {
-    nextEl: null,
-    $nextEl: null,
-    prevEl: null,
-    $prevEl: null
-  };
-
-  function getEl(el) {
-    let $el;
-
-    if (el) {
-      $el = core.$(el);
-
-      if (swiper.params.uniqueNavElements && typeof el === 'string' && $el.length > 1 && swiper.$el.find(el).length === 1) {
-        $el = swiper.$el.find(el);
-      }
-    }
-
-    return $el;
+  // Methods
+  /**
+   * Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.
+   *
+   * @param {number} index - Index number of slide.
+   * @param {number} speed - Transition duration (in ms).
+   * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
+   * **/
+  async slideTo(index, speed, runCallbacks) {
+    return this.slider.slideTo(index, speed, runCallbacks);
   }
-
-  function toggleEl($el, disabled) {
-    const params = swiper.params.navigation;
-
-    if ($el && $el.length > 0) {
-      $el[disabled ? 'addClass' : 'removeClass'](params.disabledClass);
-      if ($el[0] && $el[0].tagName === 'BUTTON') $el[0].disabled = disabled;
-
-      if (swiper.params.watchOverflow && swiper.enabled) {
-        $el[swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass);
-      }
-    }
-  }
-
-  function update() {
-    // Update Navigation Buttons
-    if (swiper.params.loop) return;
-    const {
-      $nextEl,
-      $prevEl
-    } = swiper.navigation;
-    toggleEl($prevEl, swiper.isBeginning && !swiper.params.rewind);
-    toggleEl($nextEl, swiper.isEnd && !swiper.params.rewind);
-  }
-
-  function onPrevClick(e) {
-    e.preventDefault();
-    if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;
-    swiper.slidePrev();
-    emit('navigationPrev');
-  }
-
-  function onNextClick(e) {
-    e.preventDefault();
-    if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;
-    swiper.slideNext();
-    emit('navigationNext');
-  }
-
-  function init() {
-    const params = swiper.params.navigation;
-    swiper.params.navigation = createElementIfNotDefined(swiper, swiper.originalParams.navigation, swiper.params.navigation, {
-      nextEl: 'swiper-button-next',
-      prevEl: 'swiper-button-prev'
-    });
-    if (!(params.nextEl || params.prevEl)) return;
-    const $nextEl = getEl(params.nextEl);
-    const $prevEl = getEl(params.prevEl);
-
-    if ($nextEl && $nextEl.length > 0) {
-      $nextEl.on('click', onNextClick);
-    }
-
-    if ($prevEl && $prevEl.length > 0) {
-      $prevEl.on('click', onPrevClick);
-    }
-
-    Object.assign(swiper.navigation, {
-      $nextEl,
-      nextEl: $nextEl && $nextEl[0],
-      $prevEl,
-      prevEl: $prevEl && $prevEl[0]
-    });
-
-    if (!swiper.enabled) {
-      if ($nextEl) $nextEl.addClass(params.lockClass);
-      if ($prevEl) $prevEl.addClass(params.lockClass);
-    }
-  }
-
-  function destroy() {
-    const {
-      $nextEl,
-      $prevEl
-    } = swiper.navigation;
-
-    if ($nextEl && $nextEl.length) {
-      $nextEl.off('click', onNextClick);
-      $nextEl.removeClass(swiper.params.navigation.disabledClass);
-    }
-
-    if ($prevEl && $prevEl.length) {
-      $prevEl.off('click', onPrevClick);
-      $prevEl.removeClass(swiper.params.navigation.disabledClass);
-    }
-  }
-
-  on('init', () => {
-    if (swiper.params.navigation.enabled === false) {
-      // eslint-disable-next-line
-      disable();
-    } else {
-      init();
-      update();
-    }
-  });
-  on('toEdge fromEdge lock unlock', () => {
-    update();
-  });
-  on('destroy', () => {
-    destroy();
-  });
-  on('enable disable', () => {
-    const {
-      $nextEl,
-      $prevEl
-    } = swiper.navigation;
-
-    if ($nextEl) {
-      $nextEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
-    }
-
-    if ($prevEl) {
-      $prevEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
-    }
-  });
-  on('click', (_s, e) => {
-    const {
-      $nextEl,
-      $prevEl
-    } = swiper.navigation;
-    const targetEl = e.target;
-
-    if (swiper.params.navigation.hideOnClick && !core.$(targetEl).is($prevEl) && !core.$(targetEl).is($nextEl)) {
-      if (swiper.pagination && swiper.params.pagination && swiper.params.pagination.clickable && (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))) return;
-      let isHidden;
-
-      if ($nextEl) {
-        isHidden = $nextEl.hasClass(swiper.params.navigation.hiddenClass);
-      } else if ($prevEl) {
-        isHidden = $prevEl.hasClass(swiper.params.navigation.hiddenClass);
-      }
-
-      if (isHidden === true) {
-        emit('navigationShow');
-      } else {
-        emit('navigationHide');
-      }
-
-      if ($nextEl) {
-        $nextEl.toggleClass(swiper.params.navigation.hiddenClass);
-      }
-
-      if ($prevEl) {
-        $prevEl.toggleClass(swiper.params.navigation.hiddenClass);
-      }
-    }
-  });
-
-  const enable = () => {
-    swiper.$el.removeClass(swiper.params.navigation.navigationDisabledClass);
-    init();
-    update();
-  };
-
-  const disable = () => {
-    swiper.$el.addClass(swiper.params.navigation.navigationDisabledClass);
-    destroy();
-  };
-
-  Object.assign(swiper.navigation, {
-    enable,
-    disable,
-    update,
-    init,
-    destroy
-  });
-}
-
-function classesToSelector(classes) {
-  if (classes === void 0) {
-    classes = '';
-  }
-
-  return `.${classes.trim().replace(/([\.:!\/])/g, '\\$1') // eslint-disable-line
-  .replace(/ /g, '.')}`;
-}
-
-function Pagination(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on,
-    emit
-  } = _ref;
-  const pfx = 'swiper-pagination';
-  extendParams({
-    pagination: {
-      el: null,
-      bulletElement: 'span',
-      clickable: false,
-      hideOnClick: false,
-      renderBullet: null,
-      renderProgressbar: null,
-      renderFraction: null,
-      renderCustom: null,
-      progressbarOpposite: false,
-      type: 'bullets',
-      // 'bullets' or 'progressbar' or 'fraction' or 'custom'
-      dynamicBullets: false,
-      dynamicMainBullets: 1,
-      formatFractionCurrent: number => number,
-      formatFractionTotal: number => number,
-      bulletClass: `${pfx}-bullet`,
-      bulletActiveClass: `${pfx}-bullet-active`,
-      modifierClass: `${pfx}-`,
-      currentClass: `${pfx}-current`,
-      totalClass: `${pfx}-total`,
-      hiddenClass: `${pfx}-hidden`,
-      progressbarFillClass: `${pfx}-progressbar-fill`,
-      progressbarOppositeClass: `${pfx}-progressbar-opposite`,
-      clickableClass: `${pfx}-clickable`,
-      lockClass: `${pfx}-lock`,
-      horizontalClass: `${pfx}-horizontal`,
-      verticalClass: `${pfx}-vertical`,
-      paginationDisabledClass: `${pfx}-disabled`
-    }
-  });
-  swiper.pagination = {
-    el: null,
-    $el: null,
-    bullets: []
-  };
-  let bulletSize;
-  let dynamicBulletIndex = 0;
-
-  function isPaginationDisabled() {
-    return !swiper.params.pagination.el || !swiper.pagination.el || !swiper.pagination.$el || swiper.pagination.$el.length === 0;
-  }
-
-  function setSideBullets($bulletEl, position) {
-    const {
-      bulletActiveClass
-    } = swiper.params.pagination;
-    $bulletEl[position]().addClass(`${bulletActiveClass}-${position}`)[position]().addClass(`${bulletActiveClass}-${position}-${position}`);
-  }
-
-  function update() {
-    // Render || Update Pagination bullets/items
-    const rtl = swiper.rtl;
-    const params = swiper.params.pagination;
-    if (isPaginationDisabled()) return;
-    const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.slides.length;
-    const $el = swiper.pagination.$el; // Current/Total
-
-    let current;
-    const total = swiper.params.loop ? Math.ceil((slidesLength - swiper.loopedSlides * 2) / swiper.params.slidesPerGroup) : swiper.snapGrid.length;
-
-    if (swiper.params.loop) {
-      current = Math.ceil((swiper.activeIndex - swiper.loopedSlides) / swiper.params.slidesPerGroup);
-
-      if (current > slidesLength - 1 - swiper.loopedSlides * 2) {
-        current -= slidesLength - swiper.loopedSlides * 2;
-      }
-
-      if (current > total - 1) current -= total;
-      if (current < 0 && swiper.params.paginationType !== 'bullets') current = total + current;
-    } else if (typeof swiper.snapIndex !== 'undefined') {
-      current = swiper.snapIndex;
-    } else {
-      current = swiper.activeIndex || 0;
-    } // Types
-
-
-    if (params.type === 'bullets' && swiper.pagination.bullets && swiper.pagination.bullets.length > 0) {
-      const bullets = swiper.pagination.bullets;
-      let firstIndex;
-      let lastIndex;
-      let midIndex;
-
-      if (params.dynamicBullets) {
-        bulletSize = bullets.eq(0)[swiper.isHorizontal() ? 'outerWidth' : 'outerHeight'](true);
-        $el.css(swiper.isHorizontal() ? 'width' : 'height', `${bulletSize * (params.dynamicMainBullets + 4)}px`);
-
-        if (params.dynamicMainBullets > 1 && swiper.previousIndex !== undefined) {
-          dynamicBulletIndex += current - (swiper.previousIndex - swiper.loopedSlides || 0);
-
-          if (dynamicBulletIndex > params.dynamicMainBullets - 1) {
-            dynamicBulletIndex = params.dynamicMainBullets - 1;
-          } else if (dynamicBulletIndex < 0) {
-            dynamicBulletIndex = 0;
-          }
-        }
-
-        firstIndex = Math.max(current - dynamicBulletIndex, 0);
-        lastIndex = firstIndex + (Math.min(bullets.length, params.dynamicMainBullets) - 1);
-        midIndex = (lastIndex + firstIndex) / 2;
-      }
-
-      bullets.removeClass(['', '-next', '-next-next', '-prev', '-prev-prev', '-main'].map(suffix => `${params.bulletActiveClass}${suffix}`).join(' '));
-
-      if ($el.length > 1) {
-        bullets.each(bullet => {
-          const $bullet = core.$(bullet);
-          const bulletIndex = $bullet.index();
-
-          if (bulletIndex === current) {
-            $bullet.addClass(params.bulletActiveClass);
-          }
-
-          if (params.dynamicBullets) {
-            if (bulletIndex >= firstIndex && bulletIndex <= lastIndex) {
-              $bullet.addClass(`${params.bulletActiveClass}-main`);
-            }
-
-            if (bulletIndex === firstIndex) {
-              setSideBullets($bullet, 'prev');
-            }
-
-            if (bulletIndex === lastIndex) {
-              setSideBullets($bullet, 'next');
-            }
-          }
-        });
-      } else {
-        const $bullet = bullets.eq(current);
-        const bulletIndex = $bullet.index();
-        $bullet.addClass(params.bulletActiveClass);
-
-        if (params.dynamicBullets) {
-          const $firstDisplayedBullet = bullets.eq(firstIndex);
-          const $lastDisplayedBullet = bullets.eq(lastIndex);
-
-          for (let i = firstIndex; i <= lastIndex; i += 1) {
-            bullets.eq(i).addClass(`${params.bulletActiveClass}-main`);
-          }
-
-          if (swiper.params.loop) {
-            if (bulletIndex >= bullets.length) {
-              for (let i = params.dynamicMainBullets; i >= 0; i -= 1) {
-                bullets.eq(bullets.length - i).addClass(`${params.bulletActiveClass}-main`);
-              }
-
-              bullets.eq(bullets.length - params.dynamicMainBullets - 1).addClass(`${params.bulletActiveClass}-prev`);
-            } else {
-              setSideBullets($firstDisplayedBullet, 'prev');
-              setSideBullets($lastDisplayedBullet, 'next');
-            }
-          } else {
-            setSideBullets($firstDisplayedBullet, 'prev');
-            setSideBullets($lastDisplayedBullet, 'next');
-          }
-        }
-      }
-
-      if (params.dynamicBullets) {
-        const dynamicBulletsLength = Math.min(bullets.length, params.dynamicMainBullets + 4);
-        const bulletsOffset = (bulletSize * dynamicBulletsLength - bulletSize) / 2 - midIndex * bulletSize;
-        const offsetProp = rtl ? 'right' : 'left';
-        bullets.css(swiper.isHorizontal() ? offsetProp : 'top', `${bulletsOffset}px`);
-      }
-    }
-
-    if (params.type === 'fraction') {
-      $el.find(classesToSelector(params.currentClass)).text(params.formatFractionCurrent(current + 1));
-      $el.find(classesToSelector(params.totalClass)).text(params.formatFractionTotal(total));
-    }
-
-    if (params.type === 'progressbar') {
-      let progressbarDirection;
-
-      if (params.progressbarOpposite) {
-        progressbarDirection = swiper.isHorizontal() ? 'vertical' : 'horizontal';
-      } else {
-        progressbarDirection = swiper.isHorizontal() ? 'horizontal' : 'vertical';
-      }
-
-      const scale = (current + 1) / total;
-      let scaleX = 1;
-      let scaleY = 1;
-
-      if (progressbarDirection === 'horizontal') {
-        scaleX = scale;
-      } else {
-        scaleY = scale;
-      }
-
-      $el.find(classesToSelector(params.progressbarFillClass)).transform(`translate3d(0,0,0) scaleX(${scaleX}) scaleY(${scaleY})`).transition(swiper.params.speed);
-    }
-
-    if (params.type === 'custom' && params.renderCustom) {
-      $el.html(params.renderCustom(swiper, current + 1, total));
-      emit('paginationRender', $el[0]);
-    } else {
-      emit('paginationUpdate', $el[0]);
-    }
-
-    if (swiper.params.watchOverflow && swiper.enabled) {
-      $el[swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass);
-    }
-  }
-
-  function render() {
-    // Render Container
-    const params = swiper.params.pagination;
-    if (isPaginationDisabled()) return;
-    const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : swiper.slides.length;
-    const $el = swiper.pagination.$el;
-    let paginationHTML = '';
-
-    if (params.type === 'bullets') {
-      let numberOfBullets = swiper.params.loop ? Math.ceil((slidesLength - swiper.loopedSlides * 2) / swiper.params.slidesPerGroup) : swiper.snapGrid.length;
-
-      if (swiper.params.freeMode && swiper.params.freeMode.enabled && !swiper.params.loop && numberOfBullets > slidesLength) {
-        numberOfBullets = slidesLength;
-      }
-
-      for (let i = 0; i < numberOfBullets; i += 1) {
-        if (params.renderBullet) {
-          paginationHTML += params.renderBullet.call(swiper, i, params.bulletClass);
-        } else {
-          paginationHTML += `<${params.bulletElement} class="${params.bulletClass}"></${params.bulletElement}>`;
-        }
-      }
-
-      $el.html(paginationHTML);
-      swiper.pagination.bullets = $el.find(classesToSelector(params.bulletClass));
-    }
-
-    if (params.type === 'fraction') {
-      if (params.renderFraction) {
-        paginationHTML = params.renderFraction.call(swiper, params.currentClass, params.totalClass);
-      } else {
-        paginationHTML = `<span class="${params.currentClass}"></span>` + ' / ' + `<span class="${params.totalClass}"></span>`;
-      }
-
-      $el.html(paginationHTML);
-    }
-
-    if (params.type === 'progressbar') {
-      if (params.renderProgressbar) {
-        paginationHTML = params.renderProgressbar.call(swiper, params.progressbarFillClass);
-      } else {
-        paginationHTML = `<span class="${params.progressbarFillClass}"></span>`;
-      }
-
-      $el.html(paginationHTML);
-    }
-
-    if (params.type !== 'custom') {
-      emit('paginationRender', swiper.pagination.$el[0]);
-    }
-  }
-
-  function init() {
-    swiper.params.pagination = createElementIfNotDefined(swiper, swiper.originalParams.pagination, swiper.params.pagination, {
-      el: 'swiper-pagination'
-    });
-    const params = swiper.params.pagination;
-    if (!params.el) return;
-    let $el = core.$(params.el);
-    if ($el.length === 0) return;
-
-    if (swiper.params.uniqueNavElements && typeof params.el === 'string' && $el.length > 1) {
-      $el = swiper.$el.find(params.el); // check if it belongs to another nested Swiper
-
-      if ($el.length > 1) {
-        $el = $el.filter(el => {
-          if (core.$(el).parents('.swiper')[0] !== swiper.el) return false;
-          return true;
-        });
-      }
-    }
-
-    if (params.type === 'bullets' && params.clickable) {
-      $el.addClass(params.clickableClass);
-    }
-
-    $el.addClass(params.modifierClass + params.type);
-    $el.addClass(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
-
-    if (params.type === 'bullets' && params.dynamicBullets) {
-      $el.addClass(`${params.modifierClass}${params.type}-dynamic`);
-      dynamicBulletIndex = 0;
-
-      if (params.dynamicMainBullets < 1) {
-        params.dynamicMainBullets = 1;
-      }
-    }
-
-    if (params.type === 'progressbar' && params.progressbarOpposite) {
-      $el.addClass(params.progressbarOppositeClass);
-    }
-
-    if (params.clickable) {
-      $el.on('click', classesToSelector(params.bulletClass), function onClick(e) {
-        e.preventDefault();
-        let index = core.$(this).index() * swiper.params.slidesPerGroup;
-        if (swiper.params.loop) index += swiper.loopedSlides;
-        swiper.slideTo(index);
-      });
-    }
-
-    Object.assign(swiper.pagination, {
-      $el,
-      el: $el[0]
-    });
-
-    if (!swiper.enabled) {
-      $el.addClass(params.lockClass);
-    }
-  }
-
-  function destroy() {
-    const params = swiper.params.pagination;
-    if (isPaginationDisabled()) return;
-    const $el = swiper.pagination.$el;
-    $el.removeClass(params.hiddenClass);
-    $el.removeClass(params.modifierClass + params.type);
-    $el.removeClass(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
-    if (swiper.pagination.bullets && swiper.pagination.bullets.removeClass) swiper.pagination.bullets.removeClass(params.bulletActiveClass);
-
-    if (params.clickable) {
-      $el.off('click', classesToSelector(params.bulletClass));
-    }
-  }
-
-  on('init', () => {
-    if (swiper.params.pagination.enabled === false) {
-      // eslint-disable-next-line
-      disable();
-    } else {
-      init();
-      render();
-      update();
-    }
-  });
-  on('activeIndexChange', () => {
-    if (swiper.params.loop) {
-      update();
-    } else if (typeof swiper.snapIndex === 'undefined') {
-      update();
-    }
-  });
-  on('snapIndexChange', () => {
-    if (!swiper.params.loop) {
-      update();
-    }
-  });
-  on('slidesLengthChange', () => {
-    if (swiper.params.loop) {
-      render();
-      update();
-    }
-  });
-  on('snapGridLengthChange', () => {
-    if (!swiper.params.loop) {
-      render();
-      update();
-    }
-  });
-  on('destroy', () => {
-    destroy();
-  });
-  on('enable disable', () => {
-    const {
-      $el
-    } = swiper.pagination;
-
-    if ($el) {
-      $el[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.pagination.lockClass);
-    }
-  });
-  on('lock unlock', () => {
-    update();
-  });
-  on('click', (_s, e) => {
-    const targetEl = e.target;
-    const {
-      $el
-    } = swiper.pagination;
-
-    if (swiper.params.pagination.el && swiper.params.pagination.hideOnClick && $el && $el.length > 0 && !core.$(targetEl).hasClass(swiper.params.pagination.bulletClass)) {
-      if (swiper.navigation && (swiper.navigation.nextEl && targetEl === swiper.navigation.nextEl || swiper.navigation.prevEl && targetEl === swiper.navigation.prevEl)) return;
-      const isHidden = $el.hasClass(swiper.params.pagination.hiddenClass);
-
-      if (isHidden === true) {
-        emit('paginationShow');
-      } else {
-        emit('paginationHide');
-      }
-
-      $el.toggleClass(swiper.params.pagination.hiddenClass);
-    }
-  });
-
-  const enable = () => {
-    swiper.$el.removeClass(swiper.params.pagination.paginationDisabledClass);
-
-    if (swiper.pagination.$el) {
-      swiper.pagination.$el.removeClass(swiper.params.pagination.paginationDisabledClass);
-    }
-
-    init();
-    render();
-    update();
-  };
-
-  const disable = () => {
-    swiper.$el.addClass(swiper.params.pagination.paginationDisabledClass);
-
-    if (swiper.pagination.$el) {
-      swiper.pagination.$el.addClass(swiper.params.pagination.paginationDisabledClass);
-    }
-
-    destroy();
-  };
-
-  Object.assign(swiper.pagination, {
-    enable,
-    disable,
-    render,
-    update,
-    init,
-    destroy
-  });
-}
-
-function Parallax(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on
-  } = _ref;
-  extendParams({
-    parallax: {
-      enabled: false
-    }
-  });
-
-  const setTransform = (el, progress) => {
-    const {
-      rtl
-    } = swiper;
-    const $el = core.$(el);
-    const rtlFactor = rtl ? -1 : 1;
-    const p = $el.attr('data-swiper-parallax') || '0';
-    let x = $el.attr('data-swiper-parallax-x');
-    let y = $el.attr('data-swiper-parallax-y');
-    const scale = $el.attr('data-swiper-parallax-scale');
-    const opacity = $el.attr('data-swiper-parallax-opacity');
-
-    if (x || y) {
-      x = x || '0';
-      y = y || '0';
-    } else if (swiper.isHorizontal()) {
-      x = p;
-      y = '0';
-    } else {
-      y = p;
-      x = '0';
-    }
-
-    if (x.indexOf('%') >= 0) {
-      x = `${parseInt(x, 10) * progress * rtlFactor}%`;
-    } else {
-      x = `${x * progress * rtlFactor}px`;
-    }
-
-    if (y.indexOf('%') >= 0) {
-      y = `${parseInt(y, 10) * progress}%`;
-    } else {
-      y = `${y * progress}px`;
-    }
-
-    if (typeof opacity !== 'undefined' && opacity !== null) {
-      const currentOpacity = opacity - (opacity - 1) * (1 - Math.abs(progress));
-      $el[0].style.opacity = currentOpacity;
-    }
-
-    if (typeof scale === 'undefined' || scale === null) {
-      $el.transform(`translate3d(${x}, ${y}, 0px)`);
-    } else {
-      const currentScale = scale - (scale - 1) * (1 - Math.abs(progress));
-      $el.transform(`translate3d(${x}, ${y}, 0px) scale(${currentScale})`);
-    }
-  };
-
-  const setTranslate = () => {
-    const {
-      $el,
-      slides,
-      progress,
-      snapGrid
-    } = swiper;
-    $el.children('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]').each(el => {
-      setTransform(el, progress);
-    });
-    slides.each((slideEl, slideIndex) => {
-      let slideProgress = slideEl.progress;
-
-      if (swiper.params.slidesPerGroup > 1 && swiper.params.slidesPerView !== 'auto') {
-        slideProgress += Math.ceil(slideIndex / 2) - progress * (snapGrid.length - 1);
-      }
-
-      slideProgress = Math.min(Math.max(slideProgress, -1), 1);
-      core.$(slideEl).find('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]').each(el => {
-        setTransform(el, slideProgress);
-      });
-    });
-  };
-
-  const setTransition = function (duration) {
-    if (duration === void 0) {
-      duration = swiper.params.speed;
-    }
-
-    const {
-      $el
-    } = swiper;
-    $el.find('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]').each(parallaxEl => {
-      const $parallaxEl = core.$(parallaxEl);
-      let parallaxDuration = parseInt($parallaxEl.attr('data-swiper-parallax-duration'), 10) || duration;
-      if (duration === 0) parallaxDuration = 0;
-      $parallaxEl.transition(parallaxDuration);
-    });
-  };
-
-  on('beforeInit', () => {
-    if (!swiper.params.parallax.enabled) return;
-    swiper.params.watchSlidesProgress = true;
-    swiper.originalParams.watchSlidesProgress = true;
-  });
-  on('init', () => {
-    if (!swiper.params.parallax.enabled) return;
-    setTranslate();
-  });
-  on('setTranslate', () => {
-    if (!swiper.params.parallax.enabled) return;
-    setTranslate();
-  });
-  on('setTransition', (_swiper, duration) => {
-    if (!swiper.params.parallax.enabled) return;
-    setTransition(duration);
-  });
-}
-
-function Lazy(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on,
-    emit
-  } = _ref;
-  extendParams({
-    lazy: {
-      checkInView: false,
-      enabled: false,
-      loadPrevNext: false,
-      loadPrevNextAmount: 1,
-      loadOnTransitionStart: false,
-      scrollingElement: '',
-      elementClass: 'swiper-lazy',
-      loadingClass: 'swiper-lazy-loading',
-      loadedClass: 'swiper-lazy-loaded',
-      preloaderClass: 'swiper-lazy-preloader'
-    }
-  });
-  swiper.lazy = {};
-  let scrollHandlerAttached = false;
-  let initialImageLoaded = false;
-
-  function loadInSlide(index, loadInDuplicate) {
-    if (loadInDuplicate === void 0) {
-      loadInDuplicate = true;
-    }
-
-    const params = swiper.params.lazy;
-    if (typeof index === 'undefined') return;
-    if (swiper.slides.length === 0) return;
-    const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
-    const $slideEl = isVirtual ? swiper.$wrapperEl.children(`.${swiper.params.slideClass}[data-swiper-slide-index="${index}"]`) : swiper.slides.eq(index);
-    const $images = $slideEl.find(`.${params.elementClass}:not(.${params.loadedClass}):not(.${params.loadingClass})`);
-
-    if ($slideEl.hasClass(params.elementClass) && !$slideEl.hasClass(params.loadedClass) && !$slideEl.hasClass(params.loadingClass)) {
-      $images.push($slideEl[0]);
-    }
-
-    if ($images.length === 0) return;
-    $images.each(imageEl => {
-      const $imageEl = core.$(imageEl);
-      $imageEl.addClass(params.loadingClass);
-      const background = $imageEl.attr('data-background');
-      const src = $imageEl.attr('data-src');
-      const srcset = $imageEl.attr('data-srcset');
-      const sizes = $imageEl.attr('data-sizes');
-      const $pictureEl = $imageEl.parent('picture');
-      swiper.loadImage($imageEl[0], src || background, srcset, sizes, false, () => {
-        if (typeof swiper === 'undefined' || swiper === null || !swiper || swiper && !swiper.params || swiper.destroyed) return;
-
-        if (background) {
-          $imageEl.css('background-image', `url("${background}")`);
-          $imageEl.removeAttr('data-background');
-        } else {
-          if (srcset) {
-            $imageEl.attr('srcset', srcset);
-            $imageEl.removeAttr('data-srcset');
-          }
-
-          if (sizes) {
-            $imageEl.attr('sizes', sizes);
-            $imageEl.removeAttr('data-sizes');
-          }
-
-          if ($pictureEl.length) {
-            $pictureEl.children('source').each(sourceEl => {
-              const $source = core.$(sourceEl);
-
-              if ($source.attr('data-srcset')) {
-                $source.attr('srcset', $source.attr('data-srcset'));
-                $source.removeAttr('data-srcset');
-              }
-            });
-          }
-
-          if (src) {
-            $imageEl.attr('src', src);
-            $imageEl.removeAttr('data-src');
-          }
-        }
-
-        $imageEl.addClass(params.loadedClass).removeClass(params.loadingClass);
-        $slideEl.find(`.${params.preloaderClass}`).remove();
-
-        if (swiper.params.loop && loadInDuplicate) {
-          const slideOriginalIndex = $slideEl.attr('data-swiper-slide-index');
-
-          if ($slideEl.hasClass(swiper.params.slideDuplicateClass)) {
-            const originalSlide = swiper.$wrapperEl.children(`[data-swiper-slide-index="${slideOriginalIndex}"]:not(.${swiper.params.slideDuplicateClass})`);
-            loadInSlide(originalSlide.index(), false);
-          } else {
-            const duplicatedSlide = swiper.$wrapperEl.children(`.${swiper.params.slideDuplicateClass}[data-swiper-slide-index="${slideOriginalIndex}"]`);
-            loadInSlide(duplicatedSlide.index(), false);
-          }
-        }
-
-        emit('lazyImageReady', $slideEl[0], $imageEl[0]);
-
-        if (swiper.params.autoHeight) {
-          swiper.updateAutoHeight();
-        }
-      });
-      emit('lazyImageLoad', $slideEl[0], $imageEl[0]);
-    });
-  }
-
-  function load() {
-    const {
-      $wrapperEl,
-      params: swiperParams,
-      slides,
-      activeIndex
-    } = swiper;
-    const isVirtual = swiper.virtual && swiperParams.virtual.enabled;
-    const params = swiperParams.lazy;
-    let slidesPerView = swiperParams.slidesPerView;
-
-    if (slidesPerView === 'auto') {
-      slidesPerView = 0;
-    }
-
-    function slideExist(index) {
-      if (isVirtual) {
-        if ($wrapperEl.children(`.${swiperParams.slideClass}[data-swiper-slide-index="${index}"]`).length) {
-          return true;
-        }
-      } else if (slides[index]) return true;
-
-      return false;
-    }
-
-    function slideIndex(slideEl) {
-      if (isVirtual) {
-        return core.$(slideEl).attr('data-swiper-slide-index');
-      }
-
-      return core.$(slideEl).index();
-    }
-
-    if (!initialImageLoaded) initialImageLoaded = true;
-
-    if (swiper.params.watchSlidesProgress) {
-      $wrapperEl.children(`.${swiperParams.slideVisibleClass}`).each(slideEl => {
-        const index = isVirtual ? core.$(slideEl).attr('data-swiper-slide-index') : core.$(slideEl).index();
-        loadInSlide(index);
-      });
-    } else if (slidesPerView > 1) {
-      for (let i = activeIndex; i < activeIndex + slidesPerView; i += 1) {
-        if (slideExist(i)) loadInSlide(i);
-      }
-    } else {
-      loadInSlide(activeIndex);
-    }
-
-    if (params.loadPrevNext) {
-      if (slidesPerView > 1 || params.loadPrevNextAmount && params.loadPrevNextAmount > 1) {
-        const amount = params.loadPrevNextAmount;
-        const spv = Math.ceil(slidesPerView);
-        const maxIndex = Math.min(activeIndex + spv + Math.max(amount, spv), slides.length);
-        const minIndex = Math.max(activeIndex - Math.max(spv, amount), 0); // Next Slides
-
-        for (let i = activeIndex + spv; i < maxIndex; i += 1) {
-          if (slideExist(i)) loadInSlide(i);
-        } // Prev Slides
-
-
-        for (let i = minIndex; i < activeIndex; i += 1) {
-          if (slideExist(i)) loadInSlide(i);
-        }
-      } else {
-        const nextSlide = $wrapperEl.children(`.${swiperParams.slideNextClass}`);
-        if (nextSlide.length > 0) loadInSlide(slideIndex(nextSlide));
-        const prevSlide = $wrapperEl.children(`.${swiperParams.slidePrevClass}`);
-        if (prevSlide.length > 0) loadInSlide(slideIndex(prevSlide));
-      }
-    }
-  }
-
-  function checkInViewOnLoad() {
-    const window = core.getWindow();
-    if (!swiper || swiper.destroyed) return;
-    const $scrollElement = swiper.params.lazy.scrollingElement ? core.$(swiper.params.lazy.scrollingElement) : core.$(window);
-    const isWindow = $scrollElement[0] === window;
-    const scrollElementWidth = isWindow ? window.innerWidth : $scrollElement[0].offsetWidth;
-    const scrollElementHeight = isWindow ? window.innerHeight : $scrollElement[0].offsetHeight;
-    const swiperOffset = swiper.$el.offset();
-    const {
-      rtlTranslate: rtl
-    } = swiper;
-    let inView = false;
-    if (rtl) swiperOffset.left -= swiper.$el[0].scrollLeft;
-    const swiperCoord = [[swiperOffset.left, swiperOffset.top], [swiperOffset.left + swiper.width, swiperOffset.top], [swiperOffset.left, swiperOffset.top + swiper.height], [swiperOffset.left + swiper.width, swiperOffset.top + swiper.height]];
-
-    for (let i = 0; i < swiperCoord.length; i += 1) {
-      const point = swiperCoord[i];
-
-      if (point[0] >= 0 && point[0] <= scrollElementWidth && point[1] >= 0 && point[1] <= scrollElementHeight) {
-        if (point[0] === 0 && point[1] === 0) continue; // eslint-disable-line
-
-        inView = true;
-      }
-    }
-
-    const passiveListener = swiper.touchEvents.start === 'touchstart' && swiper.support.passiveListener && swiper.params.passiveListeners ? {
-      passive: true,
-      capture: false
-    } : false;
-
-    if (inView) {
-      load();
-      $scrollElement.off('scroll', checkInViewOnLoad, passiveListener);
-    } else if (!scrollHandlerAttached) {
-      scrollHandlerAttached = true;
-      $scrollElement.on('scroll', checkInViewOnLoad, passiveListener);
-    }
-  }
-
-  on('beforeInit', () => {
-    if (swiper.params.lazy.enabled && swiper.params.preloadImages) {
-      swiper.params.preloadImages = false;
-    }
-  });
-  on('init', () => {
-    if (swiper.params.lazy.enabled) {
-      if (swiper.params.lazy.checkInView) {
-        checkInViewOnLoad();
-      } else {
-        load();
-      }
-    }
-  });
-  on('scroll', () => {
-    if (swiper.params.freeMode && swiper.params.freeMode.enabled && !swiper.params.freeMode.sticky) {
-      load();
-    }
-  });
-  on('scrollbarDragMove resize _freeModeNoMomentumRelease', () => {
-    if (swiper.params.lazy.enabled) {
-      if (swiper.params.lazy.checkInView) {
-        checkInViewOnLoad();
-      } else {
-        load();
-      }
-    }
-  });
-  on('transitionStart', () => {
-    if (swiper.params.lazy.enabled) {
-      if (swiper.params.lazy.loadOnTransitionStart || !swiper.params.lazy.loadOnTransitionStart && !initialImageLoaded) {
-        if (swiper.params.lazy.checkInView) {
-          checkInViewOnLoad();
-        } else {
-          load();
-        }
-      }
-    }
-  });
-  on('transitionEnd', () => {
-    if (swiper.params.lazy.enabled && !swiper.params.lazy.loadOnTransitionStart) {
-      if (swiper.params.lazy.checkInView) {
-        checkInViewOnLoad();
-      } else {
-        load();
-      }
-    }
-  });
-  on('slideChange', () => {
-    const {
-      lazy,
-      cssMode,
-      watchSlidesProgress,
-      touchReleaseOnEdges,
-      resistanceRatio
-    } = swiper.params;
-
-    if (lazy.enabled && (cssMode || watchSlidesProgress && (touchReleaseOnEdges || resistanceRatio === 0))) {
-      load();
-    }
-  });
-  on('destroy', () => {
-    if (!swiper.$el) return;
-    swiper.$el.find(`.${swiper.params.lazy.loadingClass}`).removeClass(swiper.params.lazy.loadingClass);
-  });
-  Object.assign(swiper.lazy, {
-    load,
-    loadInSlide
-  });
-}
-
-/* eslint no-bitwise: ["error", { "allow": [">>"] }] */
-function Controller(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on
-  } = _ref;
-  extendParams({
-    controller: {
-      control: undefined,
-      inverse: false,
-      by: 'slide' // or 'container'
-
-    }
-  });
-  swiper.controller = {
-    control: undefined
-  };
-
-  function LinearSpline(x, y) {
-    const binarySearch = function search() {
-      let maxIndex;
-      let minIndex;
-      let guess;
-      return (array, val) => {
-        minIndex = -1;
-        maxIndex = array.length;
-
-        while (maxIndex - minIndex > 1) {
-          guess = maxIndex + minIndex >> 1;
-
-          if (array[guess] <= val) {
-            minIndex = guess;
-          } else {
-            maxIndex = guess;
-          }
-        }
-
-        return maxIndex;
-      };
-    }();
-
-    this.x = x;
-    this.y = y;
-    this.lastIndex = x.length - 1; // Given an x value (x2), return the expected y2 value:
-    // (x1,y1) is the known point before given value,
-    // (x3,y3) is the known point after given value.
-
-    let i1;
-    let i3;
-
-    this.interpolate = function interpolate(x2) {
-      if (!x2) return 0; // Get the indexes of x1 and x3 (the array indexes before and after given x2):
-
-      i3 = binarySearch(this.x, x2);
-      i1 = i3 - 1; // We have our indexes i1 & i3, so we can calculate already:
-      // y2 := ((x2−x1) × (y3−y1)) ÷ (x3−x1) + y1
-
-      return (x2 - this.x[i1]) * (this.y[i3] - this.y[i1]) / (this.x[i3] - this.x[i1]) + this.y[i1];
-    };
-
-    return this;
-  } // xxx: for now i will just save one spline function to to
-
-
-  function getInterpolateFunction(c) {
-    if (!swiper.controller.spline) {
-      swiper.controller.spline = swiper.params.loop ? new LinearSpline(swiper.slidesGrid, c.slidesGrid) : new LinearSpline(swiper.snapGrid, c.snapGrid);
-    }
-  }
-
-  function setTranslate(_t, byController) {
-    const controlled = swiper.controller.control;
-    let multiplier;
-    let controlledTranslate;
-    const Swiper = swiper.constructor;
-
-    function setControlledTranslate(c) {
-      // this will create an Interpolate function based on the snapGrids
-      // x is the Grid of the scrolled scroller and y will be the controlled scroller
-      // it makes sense to create this only once and recall it for the interpolation
-      // the function does a lot of value caching for performance
-      const translate = swiper.rtlTranslate ? -swiper.translate : swiper.translate;
-
-      if (swiper.params.controller.by === 'slide') {
-        getInterpolateFunction(c); // i am not sure why the values have to be multiplicated this way, tried to invert the snapGrid
-        // but it did not work out
-
-        controlledTranslate = -swiper.controller.spline.interpolate(-translate);
-      }
-
-      if (!controlledTranslate || swiper.params.controller.by === 'container') {
-        multiplier = (c.maxTranslate() - c.minTranslate()) / (swiper.maxTranslate() - swiper.minTranslate());
-        controlledTranslate = (translate - swiper.minTranslate()) * multiplier + c.minTranslate();
-      }
-
-      if (swiper.params.controller.inverse) {
-        controlledTranslate = c.maxTranslate() - controlledTranslate;
-      }
-
-      c.updateProgress(controlledTranslate);
-      c.setTranslate(controlledTranslate, swiper);
-      c.updateActiveIndex();
-      c.updateSlidesClasses();
-    }
-
-    if (Array.isArray(controlled)) {
-      for (let i = 0; i < controlled.length; i += 1) {
-        if (controlled[i] !== byController && controlled[i] instanceof Swiper) {
-          setControlledTranslate(controlled[i]);
-        }
-      }
-    } else if (controlled instanceof Swiper && byController !== controlled) {
-      setControlledTranslate(controlled);
-    }
-  }
-
-  function setTransition(duration, byController) {
-    const Swiper = swiper.constructor;
-    const controlled = swiper.controller.control;
-    let i;
-
-    function setControlledTransition(c) {
-      c.setTransition(duration, swiper);
-
-      if (duration !== 0) {
-        c.transitionStart();
-
-        if (c.params.autoHeight) {
-          core.nextTick(() => {
-            c.updateAutoHeight();
-          });
-        }
-
-        c.$wrapperEl.transitionEnd(() => {
-          if (!controlled) return;
-
-          if (c.params.loop && swiper.params.controller.by === 'slide') {
-            c.loopFix();
-          }
-
-          c.transitionEnd();
-        });
-      }
-    }
-
-    if (Array.isArray(controlled)) {
-      for (i = 0; i < controlled.length; i += 1) {
-        if (controlled[i] !== byController && controlled[i] instanceof Swiper) {
-          setControlledTransition(controlled[i]);
-        }
-      }
-    } else if (controlled instanceof Swiper && byController !== controlled) {
-      setControlledTransition(controlled);
-    }
-  }
-
-  function removeSpline() {
-    if (!swiper.controller.control) return;
-
-    if (swiper.controller.spline) {
-      swiper.controller.spline = undefined;
-      delete swiper.controller.spline;
-    }
-  }
-
-  on('beforeInit', () => {
-    swiper.controller.control = swiper.params.controller.control;
-  });
-  on('update', () => {
-    removeSpline();
-  });
-  on('resize', () => {
-    removeSpline();
-  });
-  on('observerUpdate', () => {
-    removeSpline();
-  });
-  on('setTranslate', (_s, translate, byController) => {
-    if (!swiper.controller.control) return;
-    swiper.controller.setTranslate(translate, byController);
-  });
-  on('setTransition', (_s, duration, byController) => {
-    if (!swiper.controller.control) return;
-    swiper.controller.setTransition(duration, byController);
-  });
-  Object.assign(swiper.controller, {
-    setTranslate,
-    setTransition
-  });
-}
-
-/* eslint no-underscore-dangle: "off" */
-function Autoplay(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on,
-    emit
-  } = _ref;
-  let timeout;
-  swiper.autoplay = {
-    running: false,
-    paused: false
-  };
-  extendParams({
-    autoplay: {
-      enabled: false,
-      delay: 3000,
-      waitForTransition: true,
-      disableOnInteraction: true,
-      stopOnLastSlide: false,
-      reverseDirection: false,
-      pauseOnMouseEnter: false
-    }
-  });
-
-  function run() {
-    if (!swiper.size) {
-      swiper.autoplay.running = false;
-      swiper.autoplay.paused = false;
-      return;
-    }
-
-    const $activeSlideEl = swiper.slides.eq(swiper.activeIndex);
-    let delay = swiper.params.autoplay.delay;
-
-    if ($activeSlideEl.attr('data-swiper-autoplay')) {
-      delay = $activeSlideEl.attr('data-swiper-autoplay') || swiper.params.autoplay.delay;
-    }
-
-    clearTimeout(timeout);
-    timeout = core.nextTick(() => {
-      let autoplayResult;
-
-      if (swiper.params.autoplay.reverseDirection) {
-        if (swiper.params.loop) {
-          swiper.loopFix();
-          autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
-          emit('autoplay');
-        } else if (!swiper.isBeginning) {
-          autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
-          emit('autoplay');
-        } else if (!swiper.params.autoplay.stopOnLastSlide) {
-          autoplayResult = swiper.slideTo(swiper.slides.length - 1, swiper.params.speed, true, true);
-          emit('autoplay');
-        } else {
-          stop();
-        }
-      } else if (swiper.params.loop) {
-        swiper.loopFix();
-        autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
-        emit('autoplay');
-      } else if (!swiper.isEnd) {
-        autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
-        emit('autoplay');
-      } else if (!swiper.params.autoplay.stopOnLastSlide) {
-        autoplayResult = swiper.slideTo(0, swiper.params.speed, true, true);
-        emit('autoplay');
-      } else {
-        stop();
-      }
-
-      if (swiper.params.cssMode && swiper.autoplay.running) run();else if (autoplayResult === false) {
-        run();
-      }
-    }, delay);
-  }
-
-  function start() {
-    if (typeof timeout !== 'undefined') return false;
-    if (swiper.autoplay.running) return false;
-    swiper.autoplay.running = true;
-    emit('autoplayStart');
-    run();
-    return true;
-  }
-
-  function stop() {
-    if (!swiper.autoplay.running) return false;
-    if (typeof timeout === 'undefined') return false;
-
-    if (timeout) {
-      clearTimeout(timeout);
-      timeout = undefined;
-    }
-
-    swiper.autoplay.running = false;
-    emit('autoplayStop');
-    return true;
-  }
-
-  function pause(speed) {
-    if (!swiper.autoplay.running) return;
-    if (swiper.autoplay.paused) return;
-    if (timeout) clearTimeout(timeout);
-    swiper.autoplay.paused = true;
-
-    if (speed === 0 || !swiper.params.autoplay.waitForTransition) {
-      swiper.autoplay.paused = false;
-      run();
-    } else {
-      ['transitionend', 'webkitTransitionEnd'].forEach(event => {
-        swiper.$wrapperEl[0].addEventListener(event, onTransitionEnd);
-      });
-    }
-  }
-
-  function onVisibilityChange() {
-    const document = core.getDocument();
-
-    if (document.visibilityState === 'hidden' && swiper.autoplay.running) {
-      pause();
-    }
-
-    if (document.visibilityState === 'visible' && swiper.autoplay.paused) {
-      run();
-      swiper.autoplay.paused = false;
-    }
-  }
-
-  function onTransitionEnd(e) {
-    if (!swiper || swiper.destroyed || !swiper.$wrapperEl) return;
-    if (e.target !== swiper.$wrapperEl[0]) return;
-    ['transitionend', 'webkitTransitionEnd'].forEach(event => {
-      swiper.$wrapperEl[0].removeEventListener(event, onTransitionEnd);
-    });
-    swiper.autoplay.paused = false;
-
-    if (!swiper.autoplay.running) {
-      stop();
-    } else {
-      run();
-    }
-  }
-
-  function onMouseEnter() {
-    if (swiper.params.autoplay.disableOnInteraction) {
-      stop();
-    } else {
-      emit('autoplayPause');
-      pause();
-    }
-
-    ['transitionend', 'webkitTransitionEnd'].forEach(event => {
-      swiper.$wrapperEl[0].removeEventListener(event, onTransitionEnd);
-    });
-  }
-
-  function onMouseLeave() {
-    if (swiper.params.autoplay.disableOnInteraction) {
-      return;
-    }
-
-    swiper.autoplay.paused = false;
-    emit('autoplayResume');
-    run();
-  }
-
-  function attachMouseEvents() {
-    if (swiper.params.autoplay.pauseOnMouseEnter) {
-      swiper.$el.on('mouseenter', onMouseEnter);
-      swiper.$el.on('mouseleave', onMouseLeave);
-    }
-  }
-
-  function detachMouseEvents() {
-    swiper.$el.off('mouseenter', onMouseEnter);
-    swiper.$el.off('mouseleave', onMouseLeave);
-  }
-
-  on('init', () => {
-    if (swiper.params.autoplay.enabled) {
-      start();
-      const document = core.getDocument();
-      document.addEventListener('visibilitychange', onVisibilityChange);
-      attachMouseEvents();
-    }
-  });
-  on('beforeTransitionStart', (_s, speed, internal) => {
-    if (swiper.autoplay.running) {
-      if (internal || !swiper.params.autoplay.disableOnInteraction) {
-        swiper.autoplay.pause(speed);
-      } else {
-        stop();
-      }
-    }
-  });
-  on('sliderFirstMove', () => {
-    if (swiper.autoplay.running) {
-      if (swiper.params.autoplay.disableOnInteraction) {
-        stop();
-      } else {
-        pause();
-      }
-    }
-  });
-  on('touchEnd', () => {
-    if (swiper.params.cssMode && swiper.autoplay.paused && !swiper.params.autoplay.disableOnInteraction) {
-      run();
-    }
-  });
-  on('destroy', () => {
-    detachMouseEvents();
-
-    if (swiper.autoplay.running) {
-      stop();
-    }
-
-    const document = core.getDocument();
-    document.removeEventListener('visibilitychange', onVisibilityChange);
-  });
-  Object.assign(swiper.autoplay, {
-    pause,
-    run,
-    start,
-    stop
-  });
-}
-
-function Thumb(_ref) {
-  let {
-    swiper,
-    extendParams,
-    on
-  } = _ref;
-  extendParams({
-    thumbs: {
-      swiper: null,
-      multipleActiveThumbs: true,
-      autoScrollOffset: 0,
-      slideThumbActiveClass: 'swiper-slide-thumb-active',
-      thumbsContainerClass: 'swiper-thumbs'
-    }
-  });
-  let initialized = false;
-  let swiperCreated = false;
-  swiper.thumbs = {
-    swiper: null
-  };
-
-  function onThumbClick() {
-    const thumbsSwiper = swiper.thumbs.swiper;
-    if (!thumbsSwiper || thumbsSwiper.destroyed) return;
-    const clickedIndex = thumbsSwiper.clickedIndex;
-    const clickedSlide = thumbsSwiper.clickedSlide;
-    if (clickedSlide && core.$(clickedSlide).hasClass(swiper.params.thumbs.slideThumbActiveClass)) return;
-    if (typeof clickedIndex === 'undefined' || clickedIndex === null) return;
-    let slideToIndex;
-
-    if (thumbsSwiper.params.loop) {
-      slideToIndex = parseInt(core.$(thumbsSwiper.clickedSlide).attr('data-swiper-slide-index'), 10);
-    } else {
-      slideToIndex = clickedIndex;
-    }
-
-    if (swiper.params.loop) {
-      let currentIndex = swiper.activeIndex;
-
-      if (swiper.slides.eq(currentIndex).hasClass(swiper.params.slideDuplicateClass)) {
-        swiper.loopFix(); // eslint-disable-next-line
-
-        swiper._clientLeft = swiper.$wrapperEl[0].clientLeft;
-        currentIndex = swiper.activeIndex;
-      }
-
-      const prevIndex = swiper.slides.eq(currentIndex).prevAll(`[data-swiper-slide-index="${slideToIndex}"]`).eq(0).index();
-      const nextIndex = swiper.slides.eq(currentIndex).nextAll(`[data-swiper-slide-index="${slideToIndex}"]`).eq(0).index();
-      if (typeof prevIndex === 'undefined') slideToIndex = nextIndex;else if (typeof nextIndex === 'undefined') slideToIndex = prevIndex;else if (nextIndex - currentIndex < currentIndex - prevIndex) slideToIndex = nextIndex;else slideToIndex = prevIndex;
-    }
-
-    swiper.slideTo(slideToIndex);
-  }
-
-  function init() {
-    const {
-      thumbs: thumbsParams
-    } = swiper.params;
-    if (initialized) return false;
-    initialized = true;
-    const SwiperClass = swiper.constructor;
-
-    if (thumbsParams.swiper instanceof SwiperClass) {
-      swiper.thumbs.swiper = thumbsParams.swiper;
-      Object.assign(swiper.thumbs.swiper.originalParams, {
-        watchSlidesProgress: true,
-        slideToClickedSlide: false
-      });
-      Object.assign(swiper.thumbs.swiper.params, {
-        watchSlidesProgress: true,
-        slideToClickedSlide: false
-      });
-    } else if (core.isObject(thumbsParams.swiper)) {
-      const thumbsSwiperParams = Object.assign({}, thumbsParams.swiper);
-      Object.assign(thumbsSwiperParams, {
-        watchSlidesProgress: true,
-        slideToClickedSlide: false
-      });
-      swiper.thumbs.swiper = new SwiperClass(thumbsSwiperParams);
-      swiperCreated = true;
-    }
-
-    swiper.thumbs.swiper.$el.addClass(swiper.params.thumbs.thumbsContainerClass);
-    swiper.thumbs.swiper.on('tap', onThumbClick);
-    return true;
-  }
-
-  function update(initial) {
-    const thumbsSwiper = swiper.thumbs.swiper;
-    if (!thumbsSwiper || thumbsSwiper.destroyed) return;
-    const slidesPerView = thumbsSwiper.params.slidesPerView === 'auto' ? thumbsSwiper.slidesPerViewDynamic() : thumbsSwiper.params.slidesPerView; // Activate thumbs
-
-    let thumbsToActivate = 1;
-    const thumbActiveClass = swiper.params.thumbs.slideThumbActiveClass;
-
-    if (swiper.params.slidesPerView > 1 && !swiper.params.centeredSlides) {
-      thumbsToActivate = swiper.params.slidesPerView;
-    }
-
-    if (!swiper.params.thumbs.multipleActiveThumbs) {
-      thumbsToActivate = 1;
-    }
-
-    thumbsToActivate = Math.floor(thumbsToActivate);
-    thumbsSwiper.slides.removeClass(thumbActiveClass);
-
-    if (thumbsSwiper.params.loop || thumbsSwiper.params.virtual && thumbsSwiper.params.virtual.enabled) {
-      for (let i = 0; i < thumbsToActivate; i += 1) {
-        thumbsSwiper.$wrapperEl.children(`[data-swiper-slide-index="${swiper.realIndex + i}"]`).addClass(thumbActiveClass);
-      }
-    } else {
-      for (let i = 0; i < thumbsToActivate; i += 1) {
-        thumbsSwiper.slides.eq(swiper.realIndex + i).addClass(thumbActiveClass);
-      }
-    }
-
-    const autoScrollOffset = swiper.params.thumbs.autoScrollOffset;
-    const useOffset = autoScrollOffset && !thumbsSwiper.params.loop;
-
-    if (swiper.realIndex !== thumbsSwiper.realIndex || useOffset) {
-      let currentThumbsIndex = thumbsSwiper.activeIndex;
-      let newThumbsIndex;
-      let direction;
-
-      if (thumbsSwiper.params.loop) {
-        if (thumbsSwiper.slides.eq(currentThumbsIndex).hasClass(thumbsSwiper.params.slideDuplicateClass)) {
-          thumbsSwiper.loopFix(); // eslint-disable-next-line
-
-          thumbsSwiper._clientLeft = thumbsSwiper.$wrapperEl[0].clientLeft;
-          currentThumbsIndex = thumbsSwiper.activeIndex;
-        } // Find actual thumbs index to slide to
-
-
-        const prevThumbsIndex = thumbsSwiper.slides.eq(currentThumbsIndex).prevAll(`[data-swiper-slide-index="${swiper.realIndex}"]`).eq(0).index();
-        const nextThumbsIndex = thumbsSwiper.slides.eq(currentThumbsIndex).nextAll(`[data-swiper-slide-index="${swiper.realIndex}"]`).eq(0).index();
-
-        if (typeof prevThumbsIndex === 'undefined') {
-          newThumbsIndex = nextThumbsIndex;
-        } else if (typeof nextThumbsIndex === 'undefined') {
-          newThumbsIndex = prevThumbsIndex;
-        } else if (nextThumbsIndex - currentThumbsIndex === currentThumbsIndex - prevThumbsIndex) {
-          newThumbsIndex = thumbsSwiper.params.slidesPerGroup > 1 ? nextThumbsIndex : currentThumbsIndex;
-        } else if (nextThumbsIndex - currentThumbsIndex < currentThumbsIndex - prevThumbsIndex) {
-          newThumbsIndex = nextThumbsIndex;
-        } else {
-          newThumbsIndex = prevThumbsIndex;
-        }
-
-        direction = swiper.activeIndex > swiper.previousIndex ? 'next' : 'prev';
-      } else {
-        newThumbsIndex = swiper.realIndex;
-        direction = newThumbsIndex > swiper.previousIndex ? 'next' : 'prev';
-      }
-
-      if (useOffset) {
-        newThumbsIndex += direction === 'next' ? autoScrollOffset : -1 * autoScrollOffset;
-      }
-
-      if (thumbsSwiper.visibleSlidesIndexes && thumbsSwiper.visibleSlidesIndexes.indexOf(newThumbsIndex) < 0) {
-        if (thumbsSwiper.params.centeredSlides) {
-          if (newThumbsIndex > currentThumbsIndex) {
-            newThumbsIndex = newThumbsIndex - Math.floor(slidesPerView / 2) + 1;
-          } else {
-            newThumbsIndex = newThumbsIndex + Math.floor(slidesPerView / 2) - 1;
-          }
-        }
-
-        thumbsSwiper.slideTo(newThumbsIndex, initial ? 0 : undefined);
-      }
-    }
-  }
-
-  on('beforeInit', () => {
-    const {
-      thumbs
-    } = swiper.params;
-    if (!thumbs || !thumbs.swiper) return;
-    init();
-    update(true);
-  });
-  on('slideChange update resize observerUpdate', () => {
-    update();
-  });
-  on('setTransition', (_s, duration) => {
-    const thumbsSwiper = swiper.thumbs.swiper;
-    if (!thumbsSwiper || thumbsSwiper.destroyed) return;
-    thumbsSwiper.setTransition(duration);
-  });
-  on('beforeDestroy', () => {
-    const thumbsSwiper = swiper.thumbs.swiper;
-    if (!thumbsSwiper || thumbsSwiper.destroyed) return;
-
-    if (swiperCreated) {
-      thumbsSwiper.destroy();
-    }
-  });
-  Object.assign(swiper.thumbs, {
-    init,
-    update
-  });
-}
-
-const ArrowLeftIcon = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>keyboard_arrow_left</title>
-<path d="M20.563 22.104l-1.875 1.875-8-8 8-8 1.875 1.875-6.125 6.125z"></path>
-</svg>
-`;
-
-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}";
-
-const SallaSwiper = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.slideChange = index.createEvent(this, "slideChange", 7);
-    this.reachBeginning = index.createEvent(this, "reachBeginning", 7);
-    this.reachEnd = index.createEvent(this, "reachEnd", 7);
-    this.slideChangeTransitionEnd = index.createEvent(this, "slideChangeTransitionEnd", 7);
-    this.slideChangeTransitionStart = index.createEvent(this, "slideChangeTransitionStart", 7);
-    this.slideNextTransitionEnd = index.createEvent(this, "slideNextTransitionEnd", 7);
-    this.slideNextTransitionStart = index.createEvent(this, "slideNextTransitionStart", 7);
-    this.slidePrevTransitionEnd = index.createEvent(this, "slidePrevTransitionEnd", 7);
-    this.slidePrevTransitionStart = index.createEvent(this, "slidePrevTransitionStart", 7);
-    this.sliderMove = index.createEvent(this, "sliderMove", 7);
-    this.touchSliderEnd = index.createEvent(this, "touchSliderEnd", 7);
-    this.touchSliderMove = index.createEvent(this, "touchSliderMove", 7);
-    this.touchSliderStart = index.createEvent(this, "touchSliderStart", 7);
-    this.sliderTransitionEnd = index.createEvent(this, "sliderTransitionEnd", 7);
-    this.sliderTransitionStart = index.createEvent(this, "sliderTransitionStart", 7);
-    /**
-     * Show/hide arrows
-     */
-    this.showControls = true;
-    /**
-     * Show/hide thumbs slider arrows
-     */
-    this.showThumbsControls = true;
-    /**
-     * Set the type of the slider
-     * Default: ''
-     */
-    this.type = '';
-    /**
-     * Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object
-     * @example
-     * let slider = document.querySelector('salla-slider');
-     *  slider.sliderConfig = {
-     *  slidesPerView: 1,
-     *  spaceBetween : 30,
-     *  lazy: true,
-     * }
-     *
-     */
-    this.sliderConfig = {};
-    /**
-    * Thumbs Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object
-    * @example
-    * let slider = document.querySelector('salla-slider');
-    *  slider.thumbsConfig = {
-    *  slidesPerView: 1,
-    *  spaceBetween : 30,
-    *  lazy: true,
-    * }
-    *
-    */
-    this.thumbsConfig = {};
-    // States
-    this.currentIndex = undefined;
-    this.isEnd = false;
-    this.isBeginning = true;
-    this.isRTL = document.documentElement.dir === 'rtl';
-  }
-  // Methods
-  /**
-   * Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.
-   *
-   * @param {number} index - Index number of slide.
-   * @param {number} speed - Transition duration (in ms).
-   * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
-   * **/
-  async slideTo(index, speed, runCallbacks) {
-    this.slider.slideTo(index, speed, runCallbacks);
-  }
-  /**
-   * Run transition to the next slide.
-   *
-   * @param {number} speed - Transition duration (in ms).
-   * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
-   * **/
-  async slideNext(speed, runCallbacks) {
-    this.slider.slideNext(speed, runCallbacks);
+  /**
+   * Run transition to the next slide.
+   *
+   * @param {number} speed - Transition duration (in ms).
+   * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
+   * **/
+  async slideNext(speed, runCallbacks) {
+    var _a;
+    (_a = this.slider) === null || _a === void 0 ? void 0 : _a.slideNext(speed, runCallbacks);
   }
   /**
    * Run transition to the previous slide.
@@ -24961,7 +23590,8 @@ const SallaSwiper = class {
    * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
    * **/
   async slidePrev(speed, runCallbacks) {
-    this.slider.slidePrev(speed, runCallbacks);
+    var _a;
+    (_a = this.slider) === null || _a === void 0 ? void 0 : _a.slidePrev(speed, runCallbacks);
   }
   /**
    * Does the same as .slideTo but for the case when used with enabled loop. So this method will slide to slides with realIndex matching to passed index
@@ -25008,7 +23638,7 @@ const SallaSwiper = class {
     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:
+   *  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();
@@ -25038,102 +23668,157 @@ const SallaSwiper = class {
   async updateSlidesClasses() {
     this.slider.updateSlidesClasses();
   }
-  componentDidLoad() {
-    let itemsSlot = this.sliderWrapper.querySelector('div[slot="items"]');
-    !!itemsSlot ? itemsSlot.replaceWith(...itemsSlot.children) : null;
-    if (this.type == 'thumbs') {
-      let thumbsSlot = this.thumbsSliderWrapper.querySelector('div[slot="thumbs"]');
-      !!thumbsSlot ? thumbsSlot.replaceWith(...thumbsSlot.children) : null;
-    }
-    this.initSlider();
+  /**
+   * Get slider slides
+   * **/
+  async getSlides() {
+    var _a;
+    return await ((_a = this.slider) === null || _a === void 0 ? void 0 : _a.slides);
   }
-  initSlider() {
-    core.Swiper.use([Controller, Navigation, Pagination, Lazy, Thumb, Parallax, Autoplay]);
-    for (const slide of this.sliderWrapper.children) {
-      //todo:: use `s-slider-slide`
-      slide.classList.add('swiper-slide');
-    }
-    if (this.type == 'carousel') {
-      this.slider = new core.Swiper(this.sliderContainer, {
-        loop: false,
-        speed: 300,
-        slidesPerView: 'auto',
-        spaceBetween: 10,
-      });
-    }
-    else if (this.type == 'thumbs') {
-      this.thumbsSlider = new core.Swiper(this.thumbsSliderContainer, Object.assign({}, this.thumbsConfig));
+  componentWillLoad() {
+    salla.lang.onLoaded(() => {
+      this.displayAllTitle = salla.lang.get('blocks.home.display_all');
+    });
+    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.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js';
+        this.swiperScript.setAttribute('id', 'swiper-script');
+        document.body.appendChild(this.swiperScript);
+      }
+    });
+  }
+  getSwiperConfig() {
+    let pre_defined_config = {
+      loop: this.loop,
+      autoplay: this.autoPlay,
+      centeredSlides: this.centered,
+      lazy: true,
+      on: {
+        // todo:: find better way for this workaround to show lazyLoad for duplicated slides, for some reason they are loaded but class not added.
+        afterInit: (slider) => this.loop && slider.slides.map(slide => {
+          var _a;
+          (_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update();
+          if (!slide.classList.contains('swiper-slide-duplicate')) {
+            return;
+          }
+          slide.querySelectorAll('img.lazy:not(.loaded)').forEach(img => img.classList.add('loaded'));
+        }),
+      },
+      pagination: this.pagination ? {
+        el: this.host.id ? `#${this.host.id} .swiper-pagination` : '',
+        clickable: true,
+      } : false,
+      navigation: this.showControls ? {
+        nextEl: this.host.id ? `#${this.host.id} .s-slider-next` : '',
+        prevEl: this.host.id ? `#${this.host.id} .s-slider-prev` : ''
+      } : false,
+    };
+    pre_defined_config = Object.assign(Object.assign({}, pre_defined_config), (this.pre_defined_config[this.type] || {}));
+    if (this.type == 'thumbs') {
       for (const slide of this.thumbsSliderWrapper.children) {
         //todo:: use `s-slider-slide`
         slide.classList.add('swiper-slide');
       }
-      this.slider = new core.Swiper(this.sliderContainer, {
-        slidesPerView: 1,
-        spaceBetween: 30,
-        lazy: true,
-        thumbs: {
-          swiper: this.thumbsSlider,
-        },
+      // @ts-ignore
+      this.thumbsSlider = new Swiper(this.thumbsSliderContainer, {
+        freeMode: false,
+        watchSlidesProgress: true,
+        slidesPerView: 'auto',
       });
+      // @ts-ignore
+      pre_defined_config.thumbs = {
+        swiper: this.thumbsSlider,
+      };
     }
-    else {
-      this.slider = new core.Swiper(this.sliderContainer, Object.assign({}, this.sliderConfig));
+    pre_defined_config = Object.assign(Object.assign({}, pre_defined_config), this.sliderConfig);
+    return pre_defined_config;
+  }
+  initSlider() {
+    for (const slide of this.sliderWrapper.children) {
+      //todo:: use `s-slider-slide`
+      slide.classList.add('swiper-slide');
     }
+    // @ts-ignore
+    this.slider = new Swiper(this.sliderContainer, this.getSwiperConfig());
     // Expose slider events
     this.slider.on('slideChange', (slider) => {
+      //todo:: it doesn't change when loop is active, always will be false
       this.isBeginning = slider.isBeginning;
       this.isEnd = slider.isEnd;
       this.slideChange.emit(slider);
     });
-    this.slider.on('reachBeginning', (slider) => {
-      // this.isBeginning = true;
-      this.reachBeginning.emit(slider);
-    });
-    this.slider.on('reachEnd', (slider) => {
-      // this.isEnd = true;
-      this.reachEnd.emit(slider);
-    });
-    this.slider.on('slideChangeTransitionEnd', (slider) => {
-      this.slideChangeTransitionEnd.emit(slider);
-    });
-    this.slider.on('slideChangeTransitionStart', (slider) => {
-      this.slideChangeTransitionStart.emit(slider);
-    });
-    this.slider.on('slideNextTransitionEnd', (slider) => {
-      this.slideNextTransitionEnd.emit(slider);
-    });
-    this.slider.on('slideNextTransitionStart', (slider) => {
-      this.slideNextTransitionStart.emit(slider);
-    });
-    this.slider.on('slidePrevTransitionEnd', (slider) => {
-      this.slidePrevTransitionEnd.emit(slider);
-    });
-    this.slider.on('slidePrevTransitionStart', (slider) => {
-      this.slidePrevTransitionStart.emit(slider);
-    });
-    this.slider.on('sliderMove', (slider) => {
-      this.sliderMove.emit(slider);
-    });
-    this.slider.on('touchEnd', (slider) => {
-      this.touchSliderEnd.emit(slider);
-    });
-    this.slider.on('touchMove', (slider) => {
-      this.touchSliderMove.emit(slider);
-    });
-    this.slider.on('touchStart', (slider) => {
-      this.touchSliderStart.emit(slider);
-    });
-    this.slider.on('transitionEnd', (slider) => {
-      this.sliderTransitionEnd.emit(slider);
-    });
-    this.slider.on('transitionStart', (slider) => {
-      this.sliderTransitionStart.emit(slider);
-    });
+    this.slider.on('reachBeginning', (slider) => this.reachBeginning.emit(slider));
+    this.slider.on('reachEnd', (slider) => this.reachEnd.emit(slider));
+    this.slider.on('slideChangeTransitionEnd', (slider) => this.slideChangeTransitionEnd.emit(slider));
+    this.slider.on('slideChangeTransitionStart', (slider) => this.slideChangeTransitionStart.emit(slider));
+    this.slider.on('slideNextTransitionEnd', (slider) => this.slideNextTransitionEnd.emit(slider));
+    this.slider.on('slideNextTransitionStart', (slider) => this.slideNextTransitionStart.emit(slider));
+    this.slider.on('slidePrevTransitionEnd', (slider) => this.slidePrevTransitionEnd.emit(slider));
+    this.slider.on('slidePrevTransitionStart', (slider) => this.slidePrevTransitionStart.emit(slider));
+    this.slider.on('sliderMove', (slider) => this.sliderMove.emit(slider));
+    this.slider.on('touchEnd', (slider) => this.touchSliderEnd.emit(slider));
+    this.slider.on('touchMove', (slider) => this.touchSliderMove.emit(slider));
+    this.slider.on('touchStart', (slider) => this.touchSliderStart.emit(slider));
+    this.slider.on('transitionEnd', (slider) => this.sliderTransitionEnd.emit(slider));
+    this.slider.on('transitionStart', (slider) => this.sliderTransitionStart.emit(slider));
   }
   render() {
     var _a, _b, _c, _d;
-    return (index.h(index.Host, { class: "s-slider-wrapper" }, index.h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el }, index.h("div", { class: "swiper-wrapper", ref: el => this.sliderWrapper = el }, index.h("slot", { name: 'items' })), this.showControls ? [index.h("div", { class: "s-slider-button-prev" }, index.h("salla-button", { shape: "icon", disabled: this.isRTL ? this.isEnd : this.isBeginning, color: "light", onClick: () => this.isRTL ? this.slideNext() : this.slidePrev() }, index.h("span", { class: "s-slider-button-icon", innerHTML: ArrowLeftIcon }))), index.h("div", { class: "s-slider-button-next" }, index.h("salla-button", { disabled: this.isRTL ? this.isBeginning : this.isEnd, shape: "icon", color: "light", onClick: () => this.isRTL ? this.slidePrev() : this.slideNext() }, index.h("span", { class: "s-slider-button-icon", innerHTML: ArrowRightIcon })))] : ''), this.type == 'thumbs' ? index.h("div", { class: "s-slider-thumbs" }, index.h("div", { class: "swiper s-slider-thumbs-container", ref: el => this.thumbsSliderContainer = el }, index.h("div", { class: "swiper-wrapper", ref: el => this.thumbsSliderWrapper = el }, index.h("slot", { name: "thumbs" })), this.showThumbsControls ? [index.h("div", { class: "s-slider-button-prev" }, index.h("salla-button", { disabled: this.isRTL ? (_a = this.thumbsSlider) === null || _a === void 0 ? void 0 : _a.isEnd : (_b = this.thumbsSlider) === null || _b === void 0 ? void 0 : _b.isBeginning, shape: "icon", color: "light", onClick: () => this.isRTL ? this.thumbsSlider.slideNext() : this.thumbsSlider.slidePrev() }, index.h("span", { class: "s-slider-button-icon", innerHTML: ArrowLeftIcon }))), index.h("div", { class: "s-slider-button-next" }, index.h("salla-button", { disabled: this.isRTL ? (_c = this.thumbsSlider) === null || _c === void 0 ? void 0 : _c.isBeginning : (_d = this.thumbsSlider) === null || _d === void 0 ? void 0 : _d.isEnd, shape: "icon", color: "light", onClick: () => this.isRTL ? this.thumbsSlider.slidePrev() : this.thumbsSlider.slideNext() }, index.h("span", { class: "s-slider-button-icon", innerHTML: ArrowRightIcon })))] : '')) : ''));
+    let classes = this.type ? this.type + '-slider ' : '';
+    classes += this.controlsOuter ? ' s-slider-controls-outer ' : '';
+    classes += this.blockTitle == '' ? ' s-slider-has-notitle ' : '';
+    classes += this.blockTitle == '' || this.type == 'testimonials' ? ' s-slider-v-centered ' : '';
+    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 ?
+        index.h("a", { href: this.displayAllUrl, class: "s-slider-block__display-all" }, this.displayAllTitle)
+        : '', 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.isRTL ? ArrowRightIcon : 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.isRTL ? ArrowLeftIcon : ArrowRightIcon })))
+        : ''))
+      : '', index.h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el }, 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' ? index.h("div", { class: "s-slider-thumbs" }, index.h("div", { class: "swiper s-slider-thumbs-container", ref: el => this.thumbsSliderContainer = el }, index.h("div", { class: "s-slider-swiper-wrapper swiper-wrapper", ref: el => this.thumbsSliderWrapper = el }, index.h("slot", { name: "thumbs" })), this.showThumbsControls ? [index.h("div", { class: "s-slider-button s-slider-button-prev" }, index.h("salla-button", { disabled: this.isRTL ? (_a = this.thumbsSlider) === null || _a === void 0 ? void 0 : _a.isEnd : (_b = this.thumbsSlider) === null || _b === void 0 ? void 0 : _b.isBeginning, shape: "icon", color: "light", onClick: () => this.isRTL ? this.thumbsSlider.slideNext() : this.thumbsSlider.slidePrev() }, index.h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? ArrowLeftIcon : ArrowRightIcon }))), index.h("div", { class: "s-slider-button s-slider-button-next" }, index.h("salla-button", { disabled: this.isRTL ? (_c = this.thumbsSlider) === null || _c === void 0 ? void 0 : _c.isBeginning : (_d = this.thumbsSlider) === null || _d === void 0 ? void 0 : _d.isEnd, shape: "icon", color: "light", onClick: () => this.isRTL ? this.thumbsSlider.slidePrev() : this.thumbsSlider.slideNext() }, index.h("span", { class: "s-slider-button-icon", innerHTML: salla.config.get('theme.is_rtl') ? ArrowRightIcon : ArrowLeftIcon })))] : '')) : ''));
+  }
+  componentDidLoad() {
+    let itemsSlot = this.sliderWrapper.querySelector('div[slot="items"]');
+    !!itemsSlot ? itemsSlot.replaceWith(...itemsSlot.children) : null;
+    if (this.type == 'thumbs') {
+      let thumbsSlot = this.thumbsSliderWrapper.querySelector('div[slot="thumbs"]');
+      !!thumbsSlot ? thumbsSlot.replaceWith(...thumbsSlot.children) : null;
+    }
+    // if swiper is not loaded, lets relay on event
+    // @ts-ignore
+    if (typeof Swiper === 'undefined') {
+      salla.event.once('swiper::loaded', () => this.initSlider());
+    }
+    else { // if swiper is loaded lets init our slider
+      this.initSlider();
+    }
   }
+  get host() { return index.getElement(this); }
 };
 SallaSwiper.style = sallaSliderCss;