@salla.sa/twilight-components 1.5.0 → 1.5.2

package/dist/esm/salla-button_24.entry.js

@@ -2,7 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-4e30ffd0.js';
-import { H as Helper } from './Helper-e1d414a5.js';
+import { S as Search } from './search-19ea3313.js';
 
 const sallaButtonCss = "";
 
@@ -113,6 +113,28 @@ const SallaButton = class {
 };
 SallaButton.style = sallaButtonCss;
 
+//TODO::check why there are too much listeners for languages::translations.loaded
+salla.event.setMaxListeners(20);
+class Helper extends salla.AppHelpers {
+  setHost(host) {
+    this.host = host;
+  }
+  getElement(selector) {
+    return this.host.querySelector(selector);
+  }
+  getAttribute(selector, attribute) {
+    var _a;
+    return (_a = this.getElement(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(attribute);
+  }
+  val(selector) {
+    return this.getAttribute(selector, 'value');
+  }
+  isUser() {
+    return salla.config.get('user.type') === 'user';
+  }
+}
+const Helper$1 = new Helper;
+
 const sallaInfiniteScrollCss = "";
 
 const SallaInfiniteScroll = class {
@@ -134,7 +156,7 @@ const SallaInfiniteScroll = class {
      * Class selector to know list items
      */
     this.item = 'salla-infinite-scroll > *';
-    Helper.setHost(this.host);
+    Helper$1.setHost(this.host);
     this.status = document.createElement('div');
     this.status.className = 's-infinite-scroll-wrapper';
     this.status.innerHTML = `<div class="s-infinite-scroll-status" style="display:none">
@@ -154,7 +176,7 @@ const SallaInfiniteScroll = class {
   }
   loading(isLoading = true) {
     let btnText = this.status.querySelector('.s-button-text');
-    Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
+    Helper$1.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
     this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
   }
   render() {
@@ -254,7 +276,7 @@ const SallaLocalizationModal = class {
     this.isLoading = true;
     this.language = salla.config.get('user.language_code');
     this.currency = salla.config.get('user.currency_code');
-    Helper.setHost(this.host);
+    Helper$1.setHost(this.host);
     salla.event.on('localization::open', () => this.open());
     salla.lang.onLoaded(() => {
       var _a;
@@ -271,8 +293,8 @@ const SallaLocalizationModal = class {
      * Because scoped templates not supported in stencil );
      * we made a workaround to pass language & currency attributes, then replace names in rendering
      */
-    this.languageSlot = ((_a = Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-modal-label" for="lang-{code}"><span>{name}</span><div class="s-localization-modal-flag flag iti__flag iti__{country_code}"></div></label>';
-    this.currencySlot = ((_b = Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-modal-label" for="currency-{code}"><span>{name}</span><small class="s-localization-modal-currency">{code}</small></label>';
+    this.languageSlot = ((_a = Helper$1.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-modal-label" for="lang-{code}"><span>{name}</span><div class="s-localization-modal-flag flag iti__flag iti__{country_code}"></div></label>';
+    this.currencySlot = ((_b = Helper$1.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-modal-label" for="currency-{code}"><span>{name}</span><small class="s-localization-modal-currency">{code}</small></label>';
   }
   /**
    * open the component
@@ -352,6 +374,41 @@ const SallaLocalizationModal = class {
 };
 SallaLocalizationModal.style = sallaLocalizationModalCss;
 
+const UserIcon = `<!-- 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>user</title>
+<path d="M16 16c4.412 0 8-3.588 8-8s-3.588-8-8-8-8 3.588-8 8 3.588 8 8 8zM16 2.667c2.941 0 5.333 2.392 5.333 5.333s-2.392 5.333-5.333 5.333-5.333-2.392-5.333-5.333 2.392-5.333 5.333-5.333zM16 18.667c-7.476 0-13.333 3.66-13.333 8.333v3.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-3.667c0-3.019 4.984-5.667 10.667-5.667s10.667 2.648 10.667 5.667v3.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-3.667c0-4.673-5.857-8.333-13.333-8.333z"></path>
+</svg>
+`;
+
+const PhoneIcon = `<!-- 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>phone</title>
+<path d="M30.823 21.713l-3.883-3.883c-1.569-1.568-4.12-1.568-5.689 0l-2.568 2.568c-3.063-1.499-5.583-4.019-7.081-7.083l2.568-2.567c0.759-0.76 1.177-1.771 1.177-2.845s-0.419-2.084-1.179-2.844l-3.881-3.881c-1.52-1.521-4.171-1.521-5.689 0l-1.845 1.847c-2.22 2.219-3.183 5.407-2.573 8.527 1.98 10.144 10.125 18.292 20.269 20.271 0.616 0.121 1.236 0.18 1.849 0.18 2.492 0 4.896-0.972 6.677-2.752l1.847-1.847c1.568-1.571 1.568-4.121 0.001-5.691zM28.936 25.517l-1.845 1.847c-1.592 1.592-3.883 2.283-6.132 1.841-9.089-1.776-16.388-9.075-18.163-18.165-0.439-2.247 0.249-4.539 1.841-6.129l1.847-1.847c0.256-0.257 0.596-0.397 0.959-0.397s0.703 0.14 0.959 0.397l3.883 3.883c0.256 0.256 0.397 0.596 0.397 0.959s-0.141 0.703-0.397 0.96l-3.22 3.217c-0.383 0.384-0.496 0.959-0.287 1.457 1.813 4.339 5.343 7.868 9.683 9.684 0.497 0.207 1.073 0.095 1.457-0.288l3.22-3.22c0.529-0.529 1.389-0.528 1.917 0l3.881 3.883c0.528 0.529 0.528 1.389 0 1.919z"></path>
+</svg>
+`;
+
+const email = `<!-- 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>mail</title>
+<path d="M28 2.667h-24c-2.205 0-4 1.795-4 4v18.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-18.667c0-2.205-1.795-4-4-4zM29.333 25.333c0 0.735-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.599-1.333-1.333v-12.685l10.54 4.865c0.888 0.409 1.84 0.613 2.793 0.613s1.907-0.204 2.793-0.615l10.54-4.864zM29.333 9.711l-11.657 5.38c-1.065 0.492-2.288 0.492-3.353 0l-11.656-5.38v-3.044c0-0.735 0.599-1.333 1.333-1.333h24c0.735 0 1.333 0.599 1.333 1.333z"></path>
+</svg>
+`;
+
+const KeyboardArrowRightIcon = `<!-- 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_right</title>
+<path d="M11.438 22.479l6.125-6.125-6.125-6.125 1.875-1.875 8 8-8 8z"></path>
+</svg>
+`;
+
+const ArrowRightIcon = `<!-- 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 sallaLoginModalCss = "";
 
 const SallaLoginModal = class {
@@ -384,7 +441,7 @@ const SallaLoginModal = class {
       this.login(this.smsBtn, { type: 'mobile', phone: phone, country_code: countryCode });
     };
     this.loginByEmail = () => {
-      if (!Helper.isValidEmail(this.loginEmail.value)) {
+      if (!Helper$1.isValidEmail(this.loginEmail.value)) {
         this.validateField(this.loginEmail, this.emailErrorMsg);
         return;
       }
@@ -493,8 +550,8 @@ const SallaLoginModal = class {
     var _a, _b;
     evt === null || evt === void 0 ? void 0 : evt.preventDefault();
     let tabs = [this.homeTab, this.mobileTab, this.emailTab, this.verifyTab, this.registrationTab];
-    tabs.map(el => Helper.toggleElementClassIf(el, 'visible', 's-hidden', () => el == tab));
-    setTimeout(() => tabs.map(el => Helper.toggleElementClassIf(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
+    tabs.map(el => Helper$1.toggleElementClassIf(el, 'visible', 's-hidden', () => el == tab));
+    setTimeout(() => tabs.map(el => Helper$1.toggleElementClassIf(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
     //we should have only one salla-login, so it's okay to get it from document
     //todo:: use better way for resize the modal
     setTimeout(() => { var _a; return (_a = this.modal.querySelector('.s-login-modal-wrapper')) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
@@ -505,7 +562,7 @@ const SallaLoginModal = class {
     (_a = tab.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus(); // focus the first input in tab
     (_b = this.modal) === null || _b === void 0 ? void 0 : _b.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
     if (!isRegistrationTab) {
-      Helper.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-show', () => this.regType === 'phone')
+      Helper$1.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-show', () => this.regType === 'phone')
         .toggleElementClassIf(this.regEmailBlock, 's-hidden', 's-show', () => this.regType === 'email');
     }
     return this;
@@ -519,7 +576,7 @@ const SallaLoginModal = class {
       .finally(() => btn.stop() && btn.enable());
   }
   async newUserValidation() {
-    const isLogByPhone = this.regType == "phone", isLogByEmail = this.regType == "email", emailValue = this.regEmail.value || (isLogByEmail && this.loginEmail.value), isEmailValid = Helper.isValidEmail(emailValue), isFirstNameValid = this.firstName.value.length > 0, isLastNameValid = this.lastName.value.length > 0, isPhoneValid = await this.regTelInput.isValid() || isLogByPhone && await this.loginTelInput.isValid(), emailValidation = (emailValue && isEmailValid) || (!emailValue && !this.isEmailRequired);
+    const isLogByPhone = this.regType == "phone", isLogByEmail = this.regType == "email", emailValue = this.regEmail.value || (isLogByEmail && this.loginEmail.value), isEmailValid = Helper$1.isValidEmail(emailValue), isFirstNameValid = this.firstName.value.length > 0, isLastNameValid = this.lastName.value.length > 0, isPhoneValid = await this.regTelInput.isValid() || isLogByPhone && await this.loginTelInput.isValid(), emailValidation = (emailValue && isEmailValid) || (!emailValue && !this.isEmailRequired);
     if (emailValidation && isPhoneValid && isFirstNameValid && isLastNameValid)
       return;
     !isEmailValid && this.validateField(this.regEmail, this.emailErrorMsg);
@@ -533,14 +590,14 @@ const SallaLoginModal = class {
     field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
   render() {
-    return (h("salla-modal", { id: "salla-login", icon: "sicon-user", "modal-title": this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-modal-wrapper" }, this.isEmailAllowed && this.isMobileAllowed ?
-      h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab }, h("p", { class: "s-login-modal-sub-title" }, this.loginTypeTitle), h("slot", { name: "before-login-type" }), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, h("i", { class: "s-login-modal-main-btn-icon sicon-phone" }), h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel), h("i", { class: "sicon-keyboard_arrow_left arrow" })), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, h("i", { class: "s-login-modal-main-btn-icon sicon-mail" }), h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel), h("i", { class: "sicon-keyboard_arrow_left arrow" })), h("slot", { name: "after-login-type" }))
+    return (h("salla-modal", { class: "s-login-modal", "modal-title": this.title, ref: modal => this.modal = modal, width: "xs" }, h("span", { slot: 'icon', class: "s-login-modal-header-icon", innerHTML: UserIcon }), h("div", { class: "s-login-modal-wrapper" }, this.isEmailAllowed && this.isMobileAllowed ?
+      h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab }, h("p", { class: "s-login-modal-sub-title" }, this.loginTypeTitle), h("slot", { name: "before-login-type" }), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, h("span", { class: "s-login-modal-main-btn-icon", innerHTML: PhoneIcon }), h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel), h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: KeyboardArrowRightIcon })), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, h("span", { class: "s-login-modal-main-btn-icon", innerHTML: email }), h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel), h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: KeyboardArrowRightIcon })), h("slot", { name: "after-login-type" }))
       : '', this.isMobileAllowed ?
       h("div", { class: "s-login-modal-tab", ref: tab => this.mobileTab = tab }, h("slot", { name: "before-login-mobile" }), h("label", { class: "s-login-modal-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
         h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, this.byEmailText) : '', h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
       h("div", { class: "s-login-modal-tab", ref: tab => this.emailTab = tab }, h("slot", { name: "before-login-email" }), h("label", { class: "s-login-modal-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), h("span", { class: "s-login-modal-error-message" }), h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
         h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, this.bySMSText)
-        : '', h("slot", { name: "after-login-email" })) : '', h("salla-verify", { display: "inline", ref: tab => this.verifyTab = tab, autoReload: false }, h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back sicon-arrow-right", slot: "after-footer", href: "#" })), h("div", { ref: tab => this.registrationTab = tab }, h("slot", { name: "before-registration" }), h("div", null, h("label", { class: "s-login-modal-label" }, this.firstNameLabel), 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') }), h("span", { class: "s-login-modal-error-message" })), h("div", null, h("label", { class: "s-login-modal-label" }, this.lastNameLabel), 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') }), h("span", { class: "s-login-modal-error-message" })), h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-modal-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-modal-label" }, this.emailLabel), 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" }), h("span", { class: "s-login-modal-error-message" })), h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), h("slot", { name: "after-registration" })))));
+        : '', h("slot", { name: "after-login-email" })) : '', h("salla-verify", { display: "inline", ref: tab => this.verifyTab = tab, autoReload: false }, h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back", innerHTML: ArrowRightIcon, slot: "after-footer", href: "#" })), h("div", { ref: tab => this.registrationTab = tab }, h("slot", { name: "before-registration" }), h("div", null, h("label", { class: "s-login-modal-label" }, this.firstNameLabel), 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') }), h("span", { class: "s-login-modal-error-message" })), h("div", null, h("label", { class: "s-login-modal-label" }, this.lastNameLabel), 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') }), h("span", { class: "s-login-modal-error-message" })), h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-modal-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-modal-label" }, this.emailLabel), 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" }), h("span", { class: "s-login-modal-error-message" })), h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), h("slot", { name: "after-registration" })))));
   }
   get host() { return getElement(this); }
 };
@@ -603,7 +660,7 @@ const Star3 = `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" vi
 </svg>
 `;
 
-const CancelIcon = `<!-- Generated by IcoMoon.io -->
+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>
 <path d="M17.885 16l7.057-7.057c0.521-0.521 0.521-1.364 0-1.885s-1.364-0.521-1.885 0l-7.057 7.057-7.057-7.057c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l7.057 7.057-7.057 7.057c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l7.057-7.057 7.057 7.057c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885z"></path>
@@ -694,7 +751,7 @@ const SallaLoyalty = class {
     ];
   }
   getAfterExchangeUI() {
-    return h("slot", { name: 'points-applied-widget' }, h("salla-list-tile", { class: "s-loyalty-after-exchange" }, h("div", { slot: "title", class: "s-loyalty-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints), h("div", { slot: 'action', class: "s-loyalty-after-exchange-action" }, h("salla-button", { class: "s-loyalty-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => this.resetExchange() }, h("span", { innerHTML: CancelIcon })))));
+    return h("slot", { name: 'points-applied-widget' }, h("salla-list-tile", { class: "s-loyalty-after-exchange" }, h("div", { slot: "title", class: "s-loyalty-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints), h("div", { slot: 'action', class: "s-loyalty-after-exchange-action" }, h("salla-button", { class: "s-loyalty-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => this.resetExchange() }, h("span", { innerHTML: Cancel })))));
   }
   /**
    * Show loyalty modal
@@ -788,6 +845,20 @@ const SallaLoyalty = class {
 };
 SallaLoyalty.style = sallaLoyaltyCss;
 
+const AlertEngineIcon = `<!-- 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>alert-engine</title>
+<path d="M16 18.673c-0.736 0-1.333 0.604-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.597 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM2.667 16c0-3.092 1.083-6.105 3.047-8.484 0.469-0.568 0.389-1.408-0.179-1.877-0.568-0.468-1.408-0.388-1.877 0.179-2.359 2.857-3.657 6.473-3.657 10.183s1.299 7.325 3.657 10.183c0.264 0.319 0.645 0.484 1.029 0.484 0.299 0 0.6-0.1 0.848-0.305 0.568-0.469 0.648-1.309 0.179-1.877-1.964-2.379-3.047-5.392-3.047-8.484zM16 10.667c-0.736 0-1.333 0.597-1.333 1.333v4c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-4c0-0.736-0.597-1.333-1.333-1.333zM16 5.333c-5.881 0-10.667 4.785-10.667 10.667s4.785 10.667 10.667 10.667 10.667-4.785 10.667-10.667-4.785-10.667-10.667-10.667zM16 24c-4.412 0-8-3.588-8-8s3.588-8 8-8 8 3.588 8 8-3.588 8-8 8zM28.343 5.817c-0.469-0.567-1.307-0.647-1.877-0.179-0.568 0.469-0.648 1.309-0.179 1.877 1.964 2.379 3.047 5.392 3.047 8.484s-1.083 6.105-3.047 8.484c-0.469 0.568-0.389 1.408 0.179 1.877 0.249 0.205 0.549 0.305 0.848 0.305 0.384 0 0.765-0.165 1.028-0.484 2.36-2.857 3.659-6.473 3.659-10.183s-1.299-7.325-3.657-10.183z"></path>
+</svg>
+`;
+
+const CheckCircle2 = `<!-- 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>check-circle2</title>
+<path d="M29.333 14.133c-0.8 0-1.333 0.533-1.333 1.333v1.2c0 6.667-5.333 12-12 12 0 0 0 0 0 0-6.667 0-12-5.333-12-12s5.333-12 12-12c0 0 0 0 0 0 1.733 0 3.333 0.4 4.933 1.067 0.667 0.267 1.467 0 1.733-0.667s0-1.467-0.667-1.733c-1.867-0.8-3.867-1.333-6-1.333 0 0 0 0 0 0-8.133 0-14.667 6.533-14.667 14.667s6.533 14.667 14.667 14.667c0 0 0 0 0 0 8.133 0 14.667-6.533 14.667-14.667v-1.2c0-0.8-0.533-1.333-1.333-1.333zM12.933 14.4c-0.533-0.533-1.333-0.533-1.867 0s-0.533 1.333 0 1.867l4 4c0.267 0.267 0.533 0.4 0.933 0.4s0.667-0.133 0.933-0.4l13.333-13.333c0.533-0.533 0.533-1.333 0-1.867s-1.333-0.533-1.867 0l-12.4 12.4-3.067-3.067z"></path>
+</svg>
+`;
+
 const sallaModalCss = "";
 
 const SallaModal = class {
@@ -817,21 +888,14 @@ const SallaModal = class {
     this.subTitleFirst = false; //todo:: choose better name
     this.noPadding = false; //todo:: choose better name
     this.subTitle = '';
-    /**
-     * Icon css class, default for types `error` is `sicon-alert-engine`, `success` is `sicon-check-circle2`
-     */
-    this.icon = '';
-    this.iconStyle = '';
-    /**
-     * url of an image
-     */
-    this.imageIcon = '';
-    Helper.setHost(this.host);
+    this.centered = false;
+    this.iconStyle = undefined;
+    Helper$1.setHost(this.host);
     salla.event.on('modal::open', target => target == this.host.id && this.open());
     salla.event.on('modal::close', target => target == this.host.id && this.close());
     this.modalTitle = this.host.getAttribute('modal-title');
     // close modal on Escape button clicked
-    Helper.onKeyUp(document.body, e => e.keyCode === 27 && this.closeModal());
+    Helper$1.onKeyUp(document.body, e => e.keyCode === 27 && this.closeModal());
   }
   handleVisible(newValue) {
     if (!newValue) {
@@ -881,7 +945,7 @@ const SallaModal = class {
   }
   toggleModal(isOpen) {
     const body = this.host.querySelector('.s-modal-body');
-    Helper.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
+    Helper$1.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
       .toggleElementClassIf(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
       .toggleElementClassIf(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
     if (!isOpen) {
@@ -899,17 +963,10 @@ const SallaModal = class {
       's-modal-icon': true,
       's-modal-bg-error': this.iconStyle == 'error',
       's-modal-bg-success': this.iconStyle == 'success',
-      's-modal-bg-normal': this.iconStyle != 'error' && this.iconStyle != 'success',
+      's-modal-bg-normal': !this.iconStyle,
       's-modal-bg-primary': this.iconStyle == 'primary'
     };
   }
-  iconClasses() {
-    return {
-      [this.icon]: true,
-      'sicon-alert-engine': !this.icon && this.iconStyle == 'error' && !this.imageIcon,
-      'sicon-check-circle2': !this.icon && this.iconStyle == 'success' && !this.imageIcon,
-    };
-  }
   getWidth() {
     return this.isLoading ? (this.hasSkeleton ? 'md' : 'xs') : this.width;
   }
@@ -919,12 +976,12 @@ const SallaModal = class {
     if (this.isLoading) {
       return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("slot", { name: "loading" }, h("salla-loading", null)), h("div", { class: "s-hidden" }, h("slot", null))))));
     }
-    return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
-      h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, h("span", { class: "sicon-cancel" }))
+    return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.centered } }, this.isClosable ?
+      h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, h("span", { innerHTML: Cancel }))
       : '', this.modalTitle || this.subTitle ?
-      h("div", { class: "s-modal-header-inner" }, this.iconStyle || this.icon
-        ? h("div", { class: this.iconBlockClasses() }, h("i", { class: this.iconClasses() }))
-        : this.imageIcon ? h("img", { class: "s-modal-header-img", src: this.imageIcon }) : '', h("div", { class: "s-modal-header-content" }, h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }), h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
+      h("div", { class: "s-modal-header-inner" }, h("slot", { name: 'icon' }, !!this.iconStyle ?
+        h("div", { class: this.iconBlockClasses(), innerHTML: this.iconStyle == 'error' ? AlertEngineIcon : CheckCircle2 })
+        : ''), h("div", { class: "s-modal-header-content" }, h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }), h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
       : ""), h("slot", null), h("slot", { name: "footer" })))));
   }
   //move the modal as root dom, because we need the model to be outside the forms
@@ -938,6 +995,26 @@ const SallaModal = class {
 };
 SallaModal.style = sallaModalCss;
 
+const SpecialDiscountIcon = `<!-- 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>special-discount</title>
+<path d="M20.667 19.333c-0.737 0-1.333 0.596-1.333 1.333v0.013c0 0.737 0.596 1.327 1.333 1.327s1.333-0.603 1.333-1.34-0.596-1.333-1.333-1.333zM11.333 12.673c0.737 0 1.333-0.603 1.333-1.34s-0.596-1.333-1.333-1.333-1.333 0.596-1.333 1.333v0.013c0 0.736 0.596 1.327 1.333 1.327zM30.307 16l0.947-4.244c0.107-0.473-0.055-0.969-0.417-1.291l-3.259-2.876-1.732-3.987c-0.193-0.444-0.612-0.749-1.095-0.796l-4.327-0.417-3.748-2.204c-0.416-0.248-0.933-0.248-1.353 0l-3.744 2.204-4.329 0.417c-0.483 0.047-0.901 0.352-1.095 0.796l-1.732 3.987-3.259 2.877c-0.363 0.321-0.525 0.816-0.417 1.289l0.947 4.244-0.947 4.244c-0.107 0.473 0.055 0.969 0.417 1.291l3.259 2.876 1.732 3.987c0.193 0.444 0.612 0.749 1.095 0.796l4.325 0.416 3.749 2.207c0.208 0.123 0.441 0.184 0.676 0.184s0.468-0.061 0.676-0.185l3.747-2.205 4.328-0.416c0.483-0.045 0.903-0.351 1.095-0.796l1.732-3.985 3.259-2.877c0.363-0.321 0.525-0.816 0.417-1.291zM28.48 20.056l-2.892 2.552c-0.145 0.131-0.261 0.291-0.34 0.469l-1.536 3.536-3.84 0.369c-0.195 0.019-0.381 0.080-0.551 0.179l-3.321 1.959-3.324-1.959c-0.168-0.099-0.356-0.16-0.549-0.179l-3.839-0.369-1.536-3.537c-0.077-0.18-0.195-0.339-0.34-0.469l-2.892-2.551 0.84-3.765c0.043-0.192 0.043-0.389 0-0.581l-0.84-3.765 2.892-2.551c0.145-0.131 0.263-0.289 0.34-0.469l1.536-3.539 3.84-0.369c0.195-0.019 0.381-0.080 0.549-0.179l3.323-1.957 3.325 1.957c0.167 0.099 0.355 0.16 0.548 0.179l3.839 0.369 1.536 3.539c0.077 0.18 0.195 0.339 0.34 0.469l2.892 2.551-0.84 3.765c-0.043 0.192-0.043 0.389 0 0.581zM20.391 9.724l-10.667 10.667c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l10.667-10.667c0.521-0.521 0.521-1.364 0-1.885s-1.364-0.521-1.885 0z"></path>
+</svg>
+`;
+
+const KeyboardArrowLeftIcon = `<!-- 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 Tag = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>tag</title>
+<path d="M28 0h-9.344c-1.059 0-2.056 0.411-2.809 1.153l-14.673 14.456c-1.56 1.56-1.561 4.097-0.001 5.657l9.56 9.56c0.755 0.755 1.76 1.172 2.828 1.173h0.003c1.068 0 2.072-0.416 2.833-1.179l14.451-14.668c0.743-0.753 1.153-1.751 1.153-2.809v-9.344c0-2.205-1.795-4-4-4zM29.333 13.344c0 0.353-0.137 0.685-0.385 0.937l-14.444 14.661c-0.252 0.252-0.587 0.391-0.941 0.391-0.001 0-0.001 0-0.001 0-0.356-0.001-0.691-0.139-0.943-0.392l-9.561-9.56c-0.52-0.52-0.52-1.365-0.005-1.88l14.667-14.449c0.253-0.248 0.585-0.385 0.937-0.385h9.344c0.736 0 1.333 0.597 1.333 1.333zM24 6.673c-0.737 0-1.333 0.604-1.333 1.341s0.596 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.015c0-0.737-0.596-1.327-1.333-1.327z"></path>
+</svg>
+`;
+
 const sallaOfferModalCss = "";
 
 const SallaOfferModal = class {
@@ -949,15 +1026,15 @@ const SallaOfferModal = class {
     this.remember_my_choice = salla.lang.get('commone.remember_my_choice');
     this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
     this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
-    Helper.setHost(this.host);
+    Helper$1.setHost(this.host);
     salla.lang.onLoaded(() => {
       this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
       this.remember_my_choice = salla.lang.get('common.elements.remember_my_choice');
       this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
       this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
     });
-    this.categorySlot = ((_a = Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="s-offer-modal-badge-icon sicon-tag"></i><span class="s-offer-modal-badge-text">{name}</span>';
-    this.productSlot = ((_b = Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.defaultProductSlot();
+    this.categorySlot = ((_a = Helper$1.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || `<span class="s-offer-modal-badge-icon">{tagIcon}</span><span class="s-offer-modal-badge-text">{name}</span>`;
+    this.productSlot = ((_b = Helper$1.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.defaultProductSlot();
     salla.product.event.onOfferExisted(offer => {
       if (salla.storage.get('remember-offer-' + offer.id)) {
         salla.log('User selected to don\'t show this offer again.');
@@ -1006,9 +1083,10 @@ const SallaOfferModal = class {
   }
   render() {
     var _a, _b;
-    return h("salla-modal", { "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+    return h("salla-modal", { "sub-title-first": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), this.offer !== null
       ? [h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
           ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot
+              .replace(/\{tagIcon\}/g, Tag)
               .replace(/\{name\}/g, category.name)
               .replace(/\{url\}/g, category.urls.customer) }))
           : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: { "s-offer-modal-product": true, "s-offer-modal-slider-item": true, "s-offer-modal-not-available": !product.is_available }, id: 'product_' + product.id, innerHTML: this.productSlot
@@ -1017,7 +1095,7 @@ const SallaOfferModal = class {
               .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>'
-              : salla.money(product.price)) }, h("div", { class: "s-offer-modal-btn-wrap" }, h("salla-button", { width: "wide", fill: 'outline', "data-id": product.id, disabled: !product.is_available, "loader-position": "center", onClick: this.addItem }, product.is_available ? this.add_to_cart : this.out_of_stock))))), h("div", { class: "s-offer-modal-slider-nav" }, h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_left" })), h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_right" })))), h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
+              : salla.money(product.price)) }, h("div", { class: "s-offer-modal-btn-wrap" }, h("salla-button", { width: "wide", fill: 'outline', "data-id": product.id, disabled: !product.is_available, "loader-position": "center", onClick: this.addItem }, product.is_available ? this.add_to_cart : this.out_of_stock))))), h("div", { class: "s-offer-modal-slider-nav" }, h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon", innerHTML: KeyboardArrowLeftIcon })), h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon", innerHTML: KeyboardArrowRightIcon })))), h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
           h("p", { class: "s-offer-modal-expiry" }, this.offer_expires_in, " ", this.offer.formatted_date)
           : '', h("label", { class: "s-offer-modal-remember-label" }, h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", this.remember_my_choice)),
       ] : '');
@@ -1114,12 +1192,19 @@ const SallaPlaceholder = class {
 };
 SallaPlaceholder.style = sallaPlaceholderCss;
 
+const BellRingIcon = `<!-- 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>bell-ring</title>
+<path d="M2.667 13.333v-4c0-2.592 0.748-5.107 2.161-7.271 0.404-0.616 0.231-1.443-0.387-1.845-0.616-0.401-1.443-0.228-1.845 0.388-1.699 2.599-2.596 5.617-2.596 8.728v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333zM25.333 15.647v-6.313c0-5.147-4.188-9.333-9.333-9.333s-9.333 4.187-9.333 9.333v6.312l-5.157 9.027c-0.236 0.413-0.235 0.92 0.004 1.331 0.239 0.412 0.679 0.664 1.153 0.664h8c0 2.941 2.392 5.333 5.333 5.333s5.333-2.392 5.333-5.333h8c0.475 0 0.915-0.252 1.153-0.664 0.239-0.411 0.24-0.917 0.004-1.331zM16 29.333c-1.471 0-2.667-1.196-2.667-2.667h5.333c0 1.472-1.196 2.667-2.667 2.667zM4.965 24l4.193-7.339c0.113-0.2 0.175-0.429 0.175-0.661v-6.667c0-3.676 2.991-6.667 6.667-6.667s6.667 2.991 6.667 6.667v6.667c0 0.232 0.061 0.46 0.176 0.661l4.192 7.339zM29.403 0.603c-0.403-0.616-1.232-0.789-1.845-0.387-0.617 0.403-0.791 1.229-0.387 1.845 1.415 2.165 2.163 4.68 2.163 7.272v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-4c0-3.112-0.899-6.132-2.597-8.731z"></path>
+</svg>
+`;
+
 const sallaProductAvailabilityCss = "";
 
 const SallaProductAvailability = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.isUser = Helper.isUser();
+    this.isUser = Helper$1.isUser();
     this.emailPlaceholder = 'your@email.com';
     /**
      * product id that can visitor subscribe to its availability notification
@@ -1191,7 +1276,7 @@ const SallaProductAvailability = class {
   async validateform() {
     try {
       if (this.channels_.includes('email')) {
-        const isEmailValid = Helper.isValidEmail(this.email.value);
+        const isEmailValid = Helper$1.isValidEmail(this.email.value);
         if (isEmailValid)
           return;
         !isEmailValid && this.validateField(this.email, this.emailErrorMsg);
@@ -1212,12 +1297,12 @@ const SallaProductAvailability = class {
   }
   render() {
     return (h(Host, { class: "s-product-availability-wrap" }, this.isSubscribed || this.isVisitorSubscribed
-      ? h("div", { class: "s-product-availability-subscribed" }, h("i", { class: "sicon-bell-ring s-product-availability-subs-icon" }), " ", this.subscribedMessage)
+      ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRingIcon, class: "s-product-availability-subs-icon" }), " ", this.subscribedMessage)
       :
         h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.modal.open(), ref: btn => this.inlineBtn = btn }, salla.lang.get('pages.products.notify_availability')), this.isUser || this.isSubscribed || this.isVisitorSubscribed ? '' : this.renderModal()));
   }
   renderModal() {
-    return (h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", width: "sm" }, h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
+    return (h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: this.subTitle, width: "sm" }, h("span", { slot: 'icon', innerHTML: BellRingIcon }), h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
       h("label", { class: "s-product-availability-label" }, this.emailLabel),
       h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e, this.submit), placeholder: this.emailPlaceholder, ref: el => this.email = el, type: "email" }),
       h("span", { class: "s-product-availability-error-msg" })
@@ -1238,7 +1323,7 @@ const sallaProductSizeGuideCss = "";
 const SallaProductSizeGuide = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    Helper.setHost(document);
+    Helper$1.setHost(document);
     salla.event.on('size-guide::open', (product_id) => this.open(product_id));
   }
   /**
@@ -1274,6 +1359,103 @@ const SallaProductSizeGuide = class {
 };
 SallaProductSizeGuide.style = sallaProductSizeGuideCss;
 
+const Add = `<!-- 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>add</title>
+<path d="M26.667 14.667h-9.333v-9.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v9.333h-9.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h9.333v9.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-9.333h9.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333z"></path>
+</svg>
+`;
+
+const Minus = `<!-- 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>minus</title>
+<path d="M26.667 14.667h-21.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h21.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333z"></path>
+</svg>
+`;
+
+const sallaQuantityInputCss = "";
+
+const SallaQuantityInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hostAttributes = {};
+    this.hasIncrementSlot = false;
+    this.hasDecrementSlot = false;
+    this.didLoaded = false;
+    this.quantity = 1;
+  }
+  /**
+   * Workaround to fire change event for the input.
+   */
+  watchPropHandler() {
+    if (!this.didLoaded) {
+      return;
+    }
+    Helper$1.debounce(() => salla.document.event.fireEvent(this.textInput, 'change', { 'bubbles': true }));
+  }
+  componentWillLoad() {
+    this.quantity = parseInt(this.host.getAttribute('value')) || 1;
+    this.hasIncrementSlot = !!this.host.querySelector('[slot="increment-button"]');
+    this.hasDecrementSlot = !!this.host.querySelector('[slot="decrement-button"]');
+  }
+  componentDidLoad() {
+    this.didLoaded = true;
+    this.textInput.addEventListener('input', (event) => salla.helpers.inputDigitsOnly(event.target));
+  }
+  getInputAttributes() {
+    for (let i = 0; i < this.host.attributes.length; i++) {
+      if (!['id', 'value', 'min', 'class'].includes(this.host.attributes[i].name)) {
+        this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+      }
+    }
+    return this.hostAttributes;
+  }
+  /**
+   * decrease quantity by one.
+   * @return HTMLSallaQuantityInputElement
+   */
+  async decrease() {
+    return this.setValue(this.quantity - 1);
+  }
+  /**
+   * increase quantity by one.
+   * @return HTMLSallaQuantityInputElement
+   */
+  async increase() {
+    return this.setValue(Number(this.quantity) + 1);
+  }
+  /**
+   * set quantity by one.
+   * @return HTMLSallaQuantityInputElement
+   */
+  async setValue(value) {
+    let maxQuantity = parseInt(this.host.getAttribute('max'));
+    if (maxQuantity && value > maxQuantity) {
+      value = maxQuantity;
+    }
+    if (value <= 1) {
+      value = 1;
+    }
+    this.quantity = value;
+    return this.host;
+  }
+  render() {
+    return (h(Host, { class: "s-quantity-input" }, h("div", { class: "s-quantity-input-container" }, h("button", { onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button" }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { name: "increment-button" })), h("input", Object.assign({ class: "s-quantity-input-input" }, this.getInputAttributes(), { ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity })), h("button", { class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button" }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { name: "decrement-button" })))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "quantity": ["watchPropHandler"]
+  }; }
+};
+SallaQuantityInput.style = sallaQuantityInputCss;
+
+const ShippingFast = `<!-- 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>shipping-fast</title>
+<path d="M10.667 14.667c0-0.737-0.597-1.333-1.333-1.333h-8c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h8c0.736 0 1.333-0.596 1.333-1.333zM9.333 18.667c-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333 5.333-2.392 5.333-5.333-2.392-5.333-5.333-5.333zM9.333 26.667c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667zM1.333 10.667h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333zM31.123 13.103l-3.147-3.935c-1.273-1.589-3.171-2.501-5.205-2.501h-1.437c0-2.205-1.795-4-4-4h-13.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h13.333c0.735 0 1.333 0.597 1.333 1.333v1.333c0 0.248 0.087 0.468 0.204 0.667-0.117 0.199-0.204 0.419-0.204 0.667v5.333c0 0.737 0.597 1.333 1.333 1.333h9.333v6.667h-1.333c-0.063 0-0.117 0.028-0.179 0.036-0.583-2.313-2.664-4.036-5.155-4.036-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333c2.491 0 4.572-1.723 5.155-4.036 0.061 0.008 0.116 0.036 0.179 0.036h2.667c0.736 0 1.333-0.596 1.333-1.333v-8.399c0-0.905-0.311-1.792-0.877-2.499zM21.333 13.333v-4h1.437c1.221 0 2.36 0.547 3.124 1.501l1.997 2.499zM22.667 26.667c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667z"></path>
+</svg>
+`;
+
 const sallaRatingModalCss = "";
 
 const SallaRatingModal = class {
@@ -1295,7 +1477,7 @@ const SallaRatingModal = class {
     this.thanks = salla.lang.get('pages.rating.thanks');
     this.back = salla.lang.get('common.elements.back');
     this.next = salla.lang.get('common.elements.next');
-    Helper.setHost(document);
+    Helper$1.setHost(document);
     salla.event.on('rating::open', () => this.open());
     salla.lang.onLoaded(() => {
       this.rate_the_store = salla.lang.get('pages.rating.rate_the_store');
@@ -1335,12 +1517,12 @@ const SallaRatingModal = class {
   showActiveStep(current = null) {
     var _a;
     this.currentTab = current || this.steps[this.currentIndex];
-    Helper.toggleClassIf('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
+    Helper$1.toggleClassIf('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
       .toggleClassIf('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
     if (this.currentIndex != 0) {
       // the animation
-      Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
-      setTimeout(() => Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
+      Helper$1.toggleElementClassIf(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
+      setTimeout(() => Helper$1.toggleElementClassIf(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
     }
     // Btn text
     let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
@@ -1350,7 +1532,7 @@ const SallaRatingModal = class {
   }
   previousTab() {
     this.currentIndex > 0 && this.currentIndex--;
-    Helper.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
+    Helper$1.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
     this.showActiveStep();
   }
   submit() {
@@ -1361,7 +1543,7 @@ const SallaRatingModal = class {
       .then(() => this.currentTab.querySelectorAll('[name],.s-rating-modal-btn-star').forEach(el => el.setAttribute('disabled', '')))
       .then(() => this.currentIndex < this.stepsCount && this.currentIndex++)
       .then(() => this.showActiveStep())
-      .then(() => Helper.toggleClassIf('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
+      .then(() => Helper$1.toggleClassIf('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
       .finally(() => {
       this.nextBtn.stop();
       salla.config.canLeave = true;
@@ -1386,7 +1568,7 @@ const SallaRatingModal = class {
       return;
     }
     type = type || rating['dataset'].type;
-    Helper.toggleElementClassIf(comment, 'save', 's-has-error', el => el.value.length > 3);
+    Helper$1.toggleElementClassIf(comment, 'save', 's-has-error', el => el.value.length > 3);
     throw validationMessage.innerHTML = stars
       ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + comment.getAttribute('placeholder'))
       : salla.lang.get(`pages.rating.rate_${type}_stars`).replace(' (:item)', '');
@@ -1429,8 +1611,8 @@ const SallaRatingModal = class {
           : '', this.order.shipping_enabled
           ? h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "shipping" }, h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo
             ? h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))
-            : h("span", { class: "s-rating-modal-icon sicon-shipping-fast" }), h("div", { class: "s-rating-modal-title" }, " ", this.rate_shipping + ' ' + this.order.shipping.company.name), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { size: "large" })), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: this.write_shipping_rate }), h("small", { class: "s-rating-modal-validation-msg" }))
-          : '', h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el }, h("span", { class: "s-rating-modal-icon sicon-check-circle2" }), h("h3", { class: "s-rating-modal-thanks-title" }, this.thanks), h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }), h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))), h("div", { class: "s-rating-modal-footer" }, h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, this.back), this.stepsCount > 1 ? h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => h("li", { class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '', h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, this.next)),]
+            : h("span", { class: "s-rating-modal-icon", innerHTML: ShippingFast }), h("div", { class: "s-rating-modal-title" }, " ", this.rate_shipping + ' ' + this.order.shipping.company.name), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { size: "large" })), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: this.write_shipping_rate }), h("small", { class: "s-rating-modal-validation-msg" }))
+          : '', h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el }, h("span", { class: "s-rating-modal-icon", innerHTML: CheckCircle2 }), h("h3", { class: "s-rating-modal-thanks-title" }, this.thanks), h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }), h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))), h("div", { class: "s-rating-modal-footer" }, h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, this.back), this.stepsCount > 1 ? h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => h("li", { class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '', h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, this.next)),]
       : '')));
   }
   componentDidLoad() {
@@ -1461,7 +1643,7 @@ const SallaRatingStars = class {
       this.startsElem.querySelector('.rating_hidden_input').value = selectedIndex;
       // Loop through each star, and add or remove the `.selected` class to toggle highlighting
       this.startsElem.querySelectorAll('.s-rating-stars-btn-star')
-        .forEach((star, index) => Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
+        .forEach((star, index) => Helper$1.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
       // update aria-pressed attr status
       this.startsElem.querySelectorAll('[aria-pressed]').forEach(star => star.removeAttribute('aria-pressed'));
       selected.setAttribute('aria-pressed', 'true');
@@ -1484,10 +1666,10 @@ const SallaRatingStars = class {
     let stars = [];
     for (let i = 0; i < 5; i++) {
       stars.push(h("span", { class: {
-          's-rating-stars-btn-star sicon-star2': true,
+          's-rating-stars-btn-star': true,
           ['s-rating-stars-' + this.size]: true,
           's-rating-stars-selected': i < n
-        } }));
+        }, innerHTML: Star2 }));
     }
     return stars;
   }
@@ -1495,7 +1677,7 @@ const SallaRatingStars = class {
     return (h(Host, null, this.value ?
       h("div", { class: "s-rating-stars-wrapper" }, " ", this.createStars(this.value), " ")
       :
-        h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el }, h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, h("i", { class: "sicon-star2" }))))));
+        h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el }, h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, h("span", { innerHTML: Star2 }))))));
   }
   componentDidLoad() {
     this.initiateRating();
@@ -1505,158 +1687,6 @@ const SallaRatingStars = class {
 };
 SallaRatingStars.style = sallaRatingStarsCss;
 
-const StoreAlt = `<!-- 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>store-alt</title>
-<path d="M6.667 24h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333zM31.86 10.071l-4-8c-0.227-0.452-0.688-0.737-1.193-0.737h-21.333c-0.505 0-0.967 0.285-1.193 0.737l-4 8c-0.092 0.184-0.14 0.389-0.14 0.596v18.667c0 0.737 0.597 1.333 1.333 1.333h29.333c0.736 0 1.333-0.596 1.333-1.333v-18.667c0-0.207-0.048-0.412-0.14-0.596zM6.157 4h19.685l3.333 6.667h-26.352zM24 28h-5.333v-9.333h5.333zM29.333 28h-2.667v-10.667c0-0.737-0.597-1.333-1.333-1.333h-8c-0.736 0-1.333 0.596-1.333 1.333v10.667h-13.333v-14.667h26.667zM6.667 18.667h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333z"></path>
-</svg>
-`;
-
-const Search = `<!-- 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>search</title>
-<path d="M30.276 28.391l-7.576-7.576c1.644-2.053 2.633-4.652 2.633-7.481 0-6.616-5.384-12-12-12s-12 5.384-12 12 5.384 12 12 12c2.829 0 5.428-0.989 7.481-2.633l7.576 7.576c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.364 0-1.885zM13.333 22.667c-5.147 0-9.333-4.187-9.333-9.333s4.187-9.333 9.333-9.333 9.333 4.187 9.333 9.333-4.187 9.333-9.333 9.333z"></path>
-</svg>
-`;
-
-var ModeType;
-(function (ModeType) {
-  ModeType["DEFAULT"] = "default";
-  ModeType["AVAILABILITY"] = "availability";
-})(ModeType || (ModeType = {}));
-
-const sallaScopesCss = ".s-scopes-availability-content{display:flex;justify-content:center;align-items:center}.s-scopes-placeholder{flex:0 0 85%}";
-
-const SallaScopees = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.mode = ModeType.DEFAULT;
-    this.scopes = [];
-    this.originalScopesList = [];
-    this.isOpenedBefore = salla.storage.get("branch-choosed-before");
-    /**
-     * Optionally open the modal or enforce the pop-up to the viewer
-     */
-    this.selection = 'optional';
-    /**
-     * Dictates when to show the search field
-     */
-    this.searchDisplayLimit = 6;
-    this.getFormTitle = () => {
-      var _a;
-      if (((_a = this.originalScopesList) === null || _a === void 0 ? void 0 : _a.length) < 2)
-        return "";
-      return this.mode === ModeType.DEFAULT ?
-        this.shoppingFromAnotherBranch :
-        this.searchForAvailabilityInOtherBranch;
-    };
-    salla.event.on('scopes::open', ({ mode = null, product_id = null }) => {
-      this.open(mode, product_id);
-    });
-    salla.lang.onLoaded(() => {
-      this.branchNotFound = salla.lang.get("blocks.scope.branch_looking_for_not_found");
-      this.ourServiceIsNotFound = salla.lang.get("blocks.scope.our_services_not_available_in_this_branch");
-      this.searchForAvailabilityInOtherBranch = salla.lang.get('blocks.scope.search_for_availability_in_other_branches');
-      this.shoppingFromAnotherBranch = salla.lang.get("blocks.scope.shopping_from_another_branch");
-      this.nowBrowsingFrom = salla.lang.get('blocks.scope.you_are_browse_store_from');
-      this.confirmButton = salla.lang.get('common.elements.confirm');
-      this.scopeSearchPlaceholder = salla.lang.get('blocks.scope.searching_for_a_branch');
-    });
-  }
-  async close() {
-    var _a;
-    return await ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.close());
-  }
-  async open(mode = ModeType.DEFAULT, product_id = null) {
-    this.setScopeValues([]);
-    if (typeof mode !== 'undefined' && [ModeType.AVAILABILITY, ModeType.DEFAULT].includes(mode)) {
-      this.mode = mode;
-    }
-    else {
-      this.mode = ModeType.DEFAULT;
-    }
-    this.modal.loading();
-    this.modal.open();
-    return await (mode == ModeType.AVAILABILITY ? salla.scope.getProductAvailability(product_id) : salla.scope.get())
-      .then((resp) => {
-      if (mode == ModeType.AVAILABILITY) {
-        this.setScopeValues(resp.data);
-      }
-      else {
-        this.setScopeValues(resp.data.scopes);
-      }
-    }).catch(e => console.log(e))
-      .finally(() => {
-      this.modal.stopLoading();
-    });
-  }
-  async handleSubmit() {
-    let payload = { 'scope_id': this.current_scope.id };
-    this.changeBtn.load();
-    return await salla.scope.change(payload)
-      .then(() => {
-      salla.storage.set("branch-choosed-before", true);
-      salla.storage.set("scope", this.current_scope.id);
-      window.location.search += "&scope=" + this.current_scope.id;
-    }).catch(e => console.log(e))
-      .finally(() => {
-      this.changeBtn.stop();
-    });
-  }
-  setScopeValues(value) {
-    this.scopes = value;
-    this.originalScopesList = value;
-    if (value.length == 1) {
-      this.current_scope = value[0];
-      this.selected_scope = value[0];
-    }
-    else {
-      this.current_scope = value.find(scope => scope.selected);
-      this.selected_scope = value.find(scope => scope.selected);
-    }
-  }
-  handleSearchFieldTyping(e) {
-    let value = e.target.value.toLocaleLowerCase();
-    if (!!value) {
-      this.scopes = this.originalScopesList.filter(scope => scope.name.toLowerCase().includes(value));
-    }
-    else {
-      this.scopes = this.originalScopesList;
-    }
-  }
-  handleScopeSelection(event) {
-    this.current_scope = this.scopes.find(scope => scope.id == event.target.value);
-  }
-  placeholderContent() {
-    return h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" }, h("span", { slot: "title" }, this.branchNotFound), h("span", { slot: "description" }, this.ourServiceIsNotFound));
-  }
-  defaultContent() {
-    return [h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, h("input", { id: `${this.selection} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), h("label", { htmlFor: `${this.selection} + '_scope_' + ${scope.id}`, class: "s-scopes-label s-scopes-clickable" }, h("span", null, scope.name))))), this.footerContent()];
-  }
-  availabilityContent() {
-    return h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => {
-      var _a, _b, _c, _d, _e, _f;
-      return h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, h("h2", { class: { "s-scopes-label": true, "s-scopes-clickable": this.mode === ModeType.DEFAULT } }, h("span", null, scope.name)), h("h2", { style: { 'color': (_b = (_a = scope) === null || _a === void 0 ? void 0 : _a.availability) === null || _b === void 0 ? void 0 : _b.color }, class: `s-scopes-${(_d = (_c = scope) === null || _c === void 0 ? void 0 : _c.availability) === null || _d === void 0 ? void 0 : _d.key}` }, (_f = (_e = scope) === null || _e === void 0 ? void 0 : _e.availability) === null || _f === void 0 ? void 0 : _f.label));
-    }));
-  }
-  footerContent() {
-    return h("div", { class: "s-scopes-footer" }, h("slot", { name: "footer" }, h("salla-button", { ref: btn => this.changeBtn = btn, disabled: !this.current_scope, onClick: () => this.handleSubmit(), class: "s-scopes-submit", "loader-position": "center", width: "wide" }, this.confirmButton)));
-  }
-  render() {
-    return (h(Host, null, h("salla-modal", { ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true, "has-skeleton": true }, h("div", { slot: "loading" }, h("div", { class: "s-scopes-skeleton" }, h("salla-list-tile", { class: "s-scopes-header" }, h("div", { slot: "icon", class: "s-scopes-header-icon" }, h("salla-skeleton", { type: "circle" })), h("div", { slot: "title", class: "s-scopes-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-scopes-skeleton-search" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '30px', width: '100%' })), h("div", { class: "s-scopes-skeleton-scopes" }, h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-scopes-skeleton-btn" }, h("salla-skeleton", { height: '40px', width: '100%' })))), h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), h("div", { slot: "title", class: "s-scopes-header-title" }, this.nowBrowsingFrom), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
-      h("div", { class: "s-scopes-search-wrapper" }, h("div", { class: "s-scopes-search-icon", innerHTML: Search }), h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), placeholder: this.scopeSearchPlaceholder }))
-      : "", this.scopes.length < 2 ?
-      this.placeholderContent()
-      : this.mode === ModeType.DEFAULT ? this.defaultContent() : this.availabilityContent()))));
-  }
-  componentDidLoad() {
-    if (!this.isOpenedBefore && this.selection == 'mandatory') {
-      this.open();
-    }
-  }
-};
-SallaScopees.style = sallaScopesCss;
-
 const sallaSearchCss = "";
 
 const SallaSearch = class {
@@ -1664,13 +1694,14 @@ const SallaSearch = class {
     registerInstance(this, hostRef);
     var _a;
     this.inputValue = '';
+    this.loading = false;
     this.typing = false;
     this.debounce = setTimeout(() => '', 1000);
     this.inline = false;
     this.oval = false;
     this.height = 60;
-    Helper.setHost(this.host);
-    this.productSlot = ((_a = Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
+    Helper$1.setHost(this.host);
+    this.productSlot = ((_a = Helper$1.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
     salla.event.on('search::open', () => this.open());
     salla.lang.onLoaded(() => {
       this.placeholder = salla.lang.get('blocks.header.search_placeholder');
@@ -1716,9 +1747,9 @@ const SallaSearch = class {
     }
   }
   search(val) {
-    Helper.hideElement(this.noResults);
+    Helper$1.hideElement(this.noResults);
     //run loading spinner or stop it
-    Helper.toggleElementClassIf(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
+    this.loading = true;
     salla.product.search(val)
       .then(response => this.results = response)
       .catch(err => err !== 'Query is same as previous one!' ? this.results = undefined : null)
@@ -1727,14 +1758,14 @@ const SallaSearch = class {
   afterSearching(isEmpty = true) {
     var _a;
     this.noResults.style.display = isEmpty || ((_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length) > 0 ? 'none' : 'block';
-    Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; })
-      .toggleElementClassIf(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
+    Helper$1.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; });
+    this.loading = false;
     salla.product.api.previousQuery = ''; //avoid having error 'Query is same as previous one!' after reopen modal;
     this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
   }
   render() {
     var _a;
-    const searchContent = h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container }, h("input", { type: "text", autocomplete: "off", class: "s-search-input", placeholder: this.placeholder, onInput: e => this.debounceSearch(e), ref: input => this.searchInput = input, style: { height: this.height + 'px', borderRadius: this.oval ? this.height / 2 + 'px' : '' } }), h("span", { class: "s-search-icon-wrap" }, h("i", { class: "s-search-icon sicon-search", ref: el => this.searchIcon = el })), h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
+    const searchContent = h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container }, h("input", { type: "text", autocomplete: "off", class: "s-search-input", placeholder: this.placeholder, onInput: e => this.debounceSearch(e), ref: input => this.searchInput = input, style: { height: this.height + 'px', borderRadius: this.oval ? this.height / 2 + 'px' : '' } }), h("span", { class: "s-search-icon-wrap" }, h("span", { class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"></i>' : Search })), h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
       _a.data.map(item => h("a", { href: item.url, class: { "s-search-product": true, 's-search-product-not-available': !item.is_available }, innerHTML: this.productSlot
           .replace(/\{name\}/g, item.name)
           .replace(/\{price\}/g, salla.money(item.price))
@@ -3115,13 +3146,6 @@ const copy_link = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const email = `<!-- 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>mail</title>
-<path d="M28 2.667h-24c-2.205 0-4 1.795-4 4v18.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-18.667c0-2.205-1.795-4-4-4zM29.333 25.333c0 0.735-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.599-1.333-1.333v-12.685l10.54 4.865c0.888 0.409 1.84 0.613 2.793 0.613s1.907-0.204 2.793-0.615l10.54-4.864zM29.333 9.711l-11.657 5.38c-1.065 0.492-2.288 0.492-3.353 0l-11.656-5.38v-3.044c0-0.735 0.599-1.333 1.333-1.333h24c0.735 0 1.333 0.599 1.333 1.333z"></path>
-</svg>
-`;
-
 const whatsapp = `<!-- 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>whatsapp</title>
@@ -3138,6 +3162,13 @@ var Socials;
   Socials["COPY_LINK"] = "copy_link";
 })(Socials || (Socials = {}));
 
+const ShareAlt = `<!-- 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>share-alt</title>
+<path d="M26.667 21.333c-1.699 0-3.196 0.812-4.173 2.052l-11.912-5.211c0.044-0.276 0.085-0.553 0.085-0.841 0-0.472-0.081-0.923-0.197-1.359l12.361-6.952c0.971 1.009 2.328 1.644 3.836 1.644 2.941 0 5.333-2.392 5.333-5.333s-2.392-5.333-5.333-5.333-5.333 2.392-5.333 5.333c0 0.472 0.081 0.923 0.197 1.359l-12.361 6.952c-0.971-1.009-2.328-1.644-3.836-1.644-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333c1.699 0 3.196-0.812 4.173-2.052l11.912 5.211c-0.044 0.276-0.085 0.553-0.085 0.841 0 2.941 2.392 5.333 5.333 5.333s5.333-2.392 5.333-5.333-2.392-5.333-5.333-5.333zM26.667 2.667c1.471 0 2.667 1.196 2.667 2.667s-1.196 2.667-2.667 2.667-2.667-1.196-2.667-2.667 1.196-2.667 2.667-2.667zM5.333 20c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667zM26.667 29.333c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667z"></path>
+</svg>
+`;
+
 const sallaSocialShareCss = "";
 
 const SallaSocialShare = class {
@@ -3208,7 +3239,7 @@ const SallaSocialShare = class {
     }, '-=200');
   }
   render() {
-    return (h("div", { class: "s-social-share-wrapper" }, h("slot", { name: 'widget' }, h("salla-button", { "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("i", { class: this.opened ? "sicon-cancel" : "sicon-share-alt" }))), h("ul", { ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share" }, this.platforms.map(platform => {
+    return (h("div", { class: "s-social-share-wrapper" }, h("slot", { name: 'widget' }, h("salla-button", { "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share" }, this.platforms.map(platform => {
       return (h("li", { ref: el => this.platformItem = el }, h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {
         if (icon.name === platform) {
           return h("span", { class: "s-social-share-icon", innerHTML: icon.icon });
@@ -8179,7 +8210,14 @@ Object.keys(prototypes).forEach(prototypeGroup => {
 });
 Swiper.use([Resize, Observer]);
 
-const sallaSwiperCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, 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\") 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{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px, 0, 0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform, height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{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{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:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{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:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{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{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:\"\";flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{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{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}.s-swiper{position:relative}.s-swiper-container{padding-top:5px}.s-swiper-button-next{right:-25px !important}.s-swiper-button-prev{left:-25px !important}.s-swiper-button-prev,.s-swiper-button-next{position:absolute;top:50%;z-index:3}.s-swiper-button-icon{color:black !important}";
+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>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 sallaSwiperCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, 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\") 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{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px, 0, 0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform, height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{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{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:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{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:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{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{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:\"\";flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{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{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}.s-swiper{position:relative}";
 
 const SallaSwiper = class {
   constructor(hostRef) {
@@ -8214,7 +8252,7 @@ const SallaSwiper = class {
   }
   render() {
     var _a, _b;
-    return (h("div", { class: "s-swiper", dir: this.direction }, h("div", { class: "s-swiper-button-prev" }, h("salla-button", { disabled: (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.isBeginning, shape: "icon", color: "light", onClick: () => this.swiper.slidePrev() }, h("i", { class: "sicon-arrow-left s-swiper-button-icon" }))), h("div", { class: "s-swiper-button-next" }, h("salla-button", { disabled: (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.isEnd, shape: "icon", color: "light", onClick: () => this.swiper.slideNext() }, h("i", { class: "sicon-arrow-right s-swiper-button-icon" }))), h("div", { class: "swiper" }, h("div", { class: "swiper-container s-swiper-container", ref: el => this.swiperContainer = el }, h("div", { class: "swiper-wrapper s-swiper-wrapper", ref: el => this.swiperWrapper = el }, h("slot", null))))));
+    return (h("div", { class: "s-swiper", dir: this.direction }, h("div", { class: "s-swiper-button-prev" }, h("salla-button", { disabled: (_a = this.swiper) === null || _a === void 0 ? void 0 : _a.isBeginning, shape: "icon", color: "light", onClick: () => this.swiper.slidePrev() }, h("span", { class: "s-swiper-button-icon", innerHTML: ArrowLeftIcon }))), h("div", { class: "s-swiper-button-next" }, h("salla-button", { disabled: (_b = this.swiper) === null || _b === void 0 ? void 0 : _b.isEnd, shape: "icon", color: "light", onClick: () => this.swiper.slideNext() }, h("span", { class: "s-swiper-button-icon", innerHTML: ArrowRightIcon }))), h("div", { class: "swiper" }, h("div", { class: "swiper-container s-swiper-container", ref: el => this.swiperContainer = el }, h("div", { class: "swiper-wrapper s-swiper-wrapper", ref: el => this.swiperWrapper = el }, h("slot", null))))));
   }
 };
 SallaSwiper.style = sallaSwiperCss;
@@ -9754,7 +9792,7 @@ const SallaTelInput = class {
     this.invalidCountryCode = salla.lang.get('common.errors.invalid_value', { attribute: this.countryCodeLabel });
     this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
     this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
-    Helper.setHost(this.host);
+    Helper$1.setHost(this.host);
     salla.lang.onLoaded(() => {
       this.mobileLabel = salla.lang.get('common.elements.mobile');
       this.countryCodeLabel = salla.lang.get('common.elements.country_code');
@@ -9831,6 +9869,13 @@ const SallaTelInput = class {
 };
 SallaTelInput.style = sallaTelInputCss;
 
+const AndroidPhoneIcon = `<!-- 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>android-phone</title>
+<path d="M22.667 0h-13.333c-2.941 0-5.333 2.392-5.333 5.333v21.333c0 2.941 2.392 5.333 5.333 5.333h13.333c2.941 0 5.333-2.392 5.333-5.333v-21.333c0-2.941-2.392-5.333-5.333-5.333zM25.333 26.667c0 1.471-1.196 2.667-2.667 2.667h-13.333c-1.471 0-2.667-1.196-2.667-2.667v-2.667h18.667zM25.333 21.333h-18.667v-16c0-1.471 1.196-2.667 2.667-2.667h13.333c1.471 0 2.667 1.196 2.667 2.667zM13.333 28h5.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333z"></path>
+</svg>
+`;
+
 const sallaVerifyCss = "salla-verify{display:block}";
 
 const SallaVerify = class {
@@ -9897,8 +9942,8 @@ const SallaVerify = class {
     this.resendTimer();
     this.otpInputs = this.body.querySelectorAll('.s-verify-input');
     if (!this.initiated) {
-      Helper.on('input', '.s-verify-input', e => salla.helpers.inputDigitsOnly(e.target));
-      Helper.onKeyUp('.s-verify-input', event => {
+      Helper$1.on('input', '.s-verify-input', e => salla.helpers.inputDigitsOnly(e.target));
+      Helper$1.onKeyUp('.s-verify-input', event => {
         var _a, _b, _c, _d;
         let key = event.keyCode || event.charCode;
         if (event.target.value) {
@@ -9911,7 +9956,7 @@ const SallaVerify = class {
         }
         this.toggleOTPSubmit();
       });
-      Helper.on('paste', '.s-verify-input', event => {
+      Helper$1.on('paste', '.s-verify-input', event => {
         let text = salla.helpers.number(event.clipboardData.getData('text')).replace(/[^0-9.]/g, '').replace('..', '.');
         this.otpInputs.forEach((input, i) => input.value = text[i] || '');
         this.toggleOTPSubmit();
@@ -9943,12 +9988,12 @@ const SallaVerify = class {
     this.otpInputs[0].focus();
   }
   resendTimer() {
-    Helper.showElement(this.resendMessage).hideElement(this.resend);
+    Helper$1.showElement(this.resendMessage).hideElement(this.resend);
     this.resendAfter = 30;
     let timerId = setInterval(() => {
       if (this.resendAfter <= 0) {
         clearInterval(timerId);
-        Helper.hideElement(this.resendMessage).showElement(this.resend);
+        Helper$1.hideElement(this.resendMessage).showElement(this.resend);
       }
       else {
         this.timer.innerHTML = `${this.resendAfter >= 10 ? this.resendAfter : '0' + this.resendAfter} : 00`;
@@ -9979,7 +10024,7 @@ const SallaVerify = class {
   }
   render() {
     return this.display == 'inline' ? h(Host, null, this.myBody()) :
-      h("salla-modal", { icon: "sicon-android-phone", width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, this.myBody());
+      h("salla-modal", { width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, h("span", { slot: 'icon', innerHTML: AndroidPhoneIcon }), this.myBody());
   }
   myBody() {
     return (h("div", { class: "s-verify-body", ref: body => this.body = body }, h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))), h("div", { slot: "footer", class: "s-verify-footer" }, h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), h("slot", { name: "after-footer" })));
@@ -9988,4 +10033,4 @@ const SallaVerify = class {
 };
 SallaVerify.style = sallaVerifyCss;
 
-export { SallaButton as salla_button, SallaInfiniteScroll as salla_infinite_scroll, SallaListTile as salla_list_tile, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaLoyalty as salla_loyalty, SallaModal as salla_modal, SallaOfferModal as salla_offer_modal, SallaPlaceholder as salla_placeholder, SallaProductAvailability as salla_product_availability, SallaProductSizeGuide as salla_product_size_guide, SallaRatingModal as salla_rating_modal, SallaRatingStars as salla_rating_stars, SallaScopees as salla_scopes, SallaSearch as salla_search, SallaSkeleton as salla_skeleton, SallaSocialShare as salla_social_share, SallaSwiper as salla_swiper, SallaTabContent as salla_tab_content, SallaTabHeader as salla_tab_header, SallaTabs as salla_tabs, SallaTelInput as salla_tel_input, SallaVerify as salla_verify };
+export { SallaButton as salla_button, SallaInfiniteScroll as salla_infinite_scroll, SallaListTile as salla_list_tile, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaLoyalty as salla_loyalty, SallaModal as salla_modal, SallaOfferModal as salla_offer_modal, SallaPlaceholder as salla_placeholder, SallaProductAvailability as salla_product_availability, SallaProductSizeGuide as salla_product_size_guide, SallaQuantityInput as salla_quantity_input, SallaRatingModal as salla_rating_modal, SallaRatingStars as salla_rating_stars, SallaSearch as salla_search, SallaSkeleton as salla_skeleton, SallaSocialShare as salla_social_share, SallaSwiper as salla_swiper, SallaTabContent as salla_tab_content, SallaTabHeader as salla_tab_header, SallaTabs as salla_tabs, SallaTelInput as salla_tel_input, SallaVerify as salla_verify };