@salla.sa/twilight-components 1.6.15-alpha.20 → 1.6.15-alpha.4

package/dist/esm/{salla-button_29.entry.js → salla-button_27.entry.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-03197930.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-0ce70ad2.js';
 import { a as createCommonjsModule, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-1415ffd3.js';
 import { S as Search } from './search-19ea3313.js';
 
@@ -114,31 +114,6 @@ const SallaButton = class {
 };
 SallaButton.style = sallaButtonCss;
 
-const CartIcon = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32">
-<title>cart</title>
-<path d="M15.426 28.084c0-1.412-0.85-2.684-2.156-3.226-1.305-0.54-2.807-0.241-3.805 0.758-0.999 0.998-1.298 2.5-0.758 3.805 0.54 1.303 1.815 2.155 3.226 2.155 1.928-0.003 3.49-1.564 3.492-3.492h0.001zM10.597 28.084h0.001c0-0.54 0.326-1.027 0.825-1.235 0.498-0.206 1.074-0.091 1.455 0.29 0.383 0.382 0.497 0.957 0.29 1.456-0.208 0.5-0.695 0.825-1.235 0.825-0.355 0-0.695-0.142-0.944-0.391-0.251-0.251-0.392-0.591-0.392-0.946h-0.001l0.001 0.001zM28.23 28.084c0-1.412-0.85-2.684-2.155-3.226-1.305-0.54-2.807-0.241-3.806 0.758s-1.297 2.5-0.756 3.805c0.54 1.303 1.813 2.155 3.226 2.155 1.927-0.003 3.49-1.564 3.491-3.492zM23.401 28.084c0-0.54 0.326-1.027 0.825-1.235 0.5-0.206 1.075-0.091 1.457 0.29s0.497 0.957 0.289 1.456c-0.206 0.5-0.693 0.825-1.233 0.825-0.738 0-1.337-0.599-1.337-1.337l-0.001 0.001zM1.953 0.234l-0.342-0.059c-0.29-0.064-0.594-0.004-0.839 0.166-0.247 0.169-0.414 0.436-0.463 0.734-0.050 0.3 0.023 0.607 0.201 0.85s0.444 0.402 0.738 0.44l0.341 0.059c1.825 0.324 3.248 1.794 3.548 3.662l1.981 12.369h-0.001c0.218 1.387 0.913 2.651 1.96 3.563s2.379 1.412 3.754 1.41h14.242c0.601 0 1.088-0.498 1.088-1.112s-0.487-1.112-1.088-1.112h-14.242c-1.679-0.001-3.139-1.183-3.525-2.854h11.463c1.614 0.004 3.188-0.518 4.493-1.49 1.305-0.973 2.271-2.346 2.762-3.918l1.298-4.136c0.145-0.455 0.065-0.953-0.213-1.336-0.278-0.385-0.72-0.608-1.187-0.602h-20.467l-0.181-1.141c-0.218-1.367-0.849-2.631-1.802-3.615-0.954-0.983-2.184-1.64-3.518-1.878h-0.001zM26.946 9.096l-0.993 3.169v-0.001c-0.353 1.122-1.044 2.101-1.975 2.796s-2.056 1.067-3.208 1.067h-11.833l-1.125-7.042 19.134 0.011z"></path>
-</svg>
-`;
-
-const sallaCartSummaryCss = ":host{display:block}";
-
-const SallaCartSummary = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.cartSummaryCount = 0;
-    this.cartSummaryTotal = 0;
-    salla.cart.event.onUpdated(() => {
-      this.cartSummaryCount = salla.storage.get('cart.summary.count');
-      this.cartSummaryCount = salla.storage.get('cart.summary.total');
-    });
-  }
-  render() {
-    return (h(Host, null, h("a", { class: "s-cart-summary", href: salla.url.get('cart') }, h("slot", { name: "icon" }, h("i", { class: "s-cart-summary-icon", innerHTML: CartIcon })), h("span", { class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("b", { class: "s-cart-summary-total" }, salla.money(this.cartSummaryTotal)))));
-  }
-};
-SallaCartSummary.style = sallaCartSummaryCss;
-
 var HOOKS = [
     "onChange",
     "onClose",
@@ -18876,10 +18851,6 @@ const SallaGifting = class {
    * Show the gifting modal window
    */
   async open() {
-    if (salla.config.isGuest()) {
-      salla.event.dispatch('login::open');
-      return;
-    }
     this.modal.open();
     return await salla.api.withoutNotifier(() => salla.product.getGiftDetails(this.productId))
       .then((response) => {
@@ -18888,7 +18859,7 @@ const SallaGifting = class {
     })
       .catch(e => {
       var _a, _b, _c, _d;
-      this.hasError = true;
+      this.hasError = false;
       this.errorMessage = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
     })
       .finally(() => this.modal.stopLoading());
@@ -19156,12 +19127,12 @@ const SallaGifting = class {
     var _a, _b;
     return [
       h("div", null, h("salla-list-tile", { class: "s-gifting-widget" }, h("div", { slot: "title" }, h("h3", null, this.sectionTitle)), h("div", { slot: "subtitle" }, h("div", null, this.sectionSubtitle)), h("div", { slot: "action" }, h("salla-button", { class: "s-gifting-widget-action", color: "gray", onClick: () => this.open() }, h("span", { innerHTML: GiftSharing }), " \u00A0", h("span", null, this.sectionBtnText)))), h("salla-modal", { id: 'salla-gifting-modal', isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-gifting-skeleton" }, h("div", { class: "s-gifting-modal-header" }, h("salla-skeleton", { type: 'circle', height: '5rem', width: '5rem' }), h("h2", { class: "s-gifting-modal-title" }, h("div", { class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { height: '15px', width: '150px' })))), h("div", { class: "s-gifting-skeleton-content" }, h("salla-skeleton", { height: '10px', width: '150px' }), h("salla-skeleton", { height: '230px' }), h("salla-skeleton", { height: '10px', width: '150px' }), h("salla-skeleton", { height: '30px' }), h("salla-skeleton", { height: '40px' })))), h("slot", { name: "header" }), !!this.hasError ?
-        h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
+        h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage))
         :
           [
             h("div", { class: "s-gifting-modal-header" }, h("span", { class: "s-gifting-modal-icon" }, h("span", { innerHTML: GiftSharing })), h("h2", { class: "s-gifting-modal-title" }, h("div", { class: "s-gifting-modal-badge-wrapper" }, h("div", { class: "s-gifting-modal-badge" }, h("span", null, h("span", null, this.currentStep), "/2")), h("span", null, this.giftDetails)))),
             h("div", { class: "s-gifting-steps-wrapper steps-wrapper" }, h("div", { class: "s-gifting-step-one gift-step-1" }, h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift), h("div", { class: "s-gifting-modal-uploader anime-item" }, h("span", { class: "s-gifting-remove-preview", onClick: () => this.removePreview(), innerHTML: Cancel }), this.selectImageOrUpload && h("salla-file-upload", { "instant-upload": true, labelIdle: this.getFilepondPlaceholder(), serverConfig: this.getServerConfig(), onRemove: () => this.handleRemoveImage() }, " ")), h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && this.gift.gift_images.length > 0 ?
-              h("salla-swiper", { "space-between-items": "10" }, (_a = this.gift) === null || _a === void 0 ? void 0 : _a.gift_images.map((item) => h("img", { class: "s-gifting-image s-gifting-clickable", src: item.url, onClick: () => this.setPreview(item), alt: `${item.id}` })))
+              h("salla-swiper", { "space-between-items": "10", "item-per-view": "4" }, (_a = this.gift) === null || _a === void 0 ? void 0 : _a.gift_images.map((item) => h("img", { class: "s-gifting-image s-gifting-clickable", src: item.url, onClick: () => this.setPreview(item), alt: `${item.id}` })))
               : ""), h("div", { class: "anime-item" }, h("div", { class: "s-form-group s-gifting-selectText" }, h("label", { htmlFor: "gift-text-selection", class: "s-form-label" }, this.selectGiftMessage), h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, h("option", { "data-id": null, selected: true }, this.selectGiftMessage), (_b = this.gift) === null || _b === void 0 ? void 0 :
               _b.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)), h("option", { "data-id": "custom" }, this.giftCustomText))), h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide" }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, 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" })))), h("div", { class: "anime-item" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, h("span", null, this.nextStep)))), h("div", { class: "s-gifting-step-two gift-step-2" }, 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" }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), 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'] ? h("span", { class: "text-danger text-xs" }, this.errors['sender_name']) : ''), 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" }, h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), 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'] ? h("span", { class: "text-danger text-xs" }, this.errors['receiver.name']) : ''), 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" }, h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), 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'] ? h("span", { class: "text-danger text-xs" }, this.errors['receiver.mobile']) : ''), h("div", { class: "anime-item opacity-0" }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: "schedule" }, h("input", { type: "checkbox", name: 'schedule', id: 'schedule', onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses() }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), 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) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: "s-gifting-step-two-footer anime-item opacity-0" }, h("a", { href: "#!", innerHTML: this.currentLang == 'ar' ? ArrowRightIcon : ArrowLeftIcon, onClick: () => this.goToStep1() }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
           ], h("slot", { name: "footer" })))
@@ -19170,31 +19141,24 @@ const SallaGifting = class {
 };
 SallaGifting.style = sallaGiftingCss;
 
-//TODO::check why there are too much listeners for languages::translations.loaded
-salla.event.setMaxListeners(20);
-class Helper {
-  toggleElementClassIf(element, classes1, classes2, callback) {
-    classes1 = Array.isArray(classes1) ? classes1 : classes1.split(' ');
-    classes2 = Array.isArray(classes2) ? classes2 : classes2.split(' ');
-    let isClasses1 = callback(element);
-    element === null || element === void 0 ? void 0 : element.classList.remove(...(isClasses1 ? classes2 : classes1));
-    element === null || element === void 0 ? void 0 : element.classList.add(...(isClasses1 ? classes1 : classes2));
-    return this;
+class Helper extends salla.AppHelpers {
+  setHost(host) {
+    // @ts-ignore
+    this.host = host;
   }
-  toggleClassIf(selector, classes1, classes2, callback) {
-    document.querySelectorAll(selector).forEach(element => this.toggleElementClassIf(element, classes1, classes2, callback));
-    return this;
+  getElement(selector) {
+    // @ts-ignore
+    return this.host.querySelector(selector);
   }
-  isValidEmail(email) {
-    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-    return re.test(String(email).toLowerCase());
+  getAttribute(selector, attribute) {
+    var _a;
+    return (_a = this.getElement(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(attribute);
   }
-  debounce(fn, ...data) {
-    if (!this.debounce_) {
-      this.debounce_ = Salla.helpers.debounce((callback, ...innerData) => callback(...innerData), 500);
-    }
-    //@ts-ignore
-    return this.debounce_(fn, ...data);
+  val(selector) {
+    return this.getAttribute(selector, 'value');
+  }
+  isUser() {
+    return salla.config.get('user.type') === 'user';
   }
 }
 const Helper$1 = new Helper;
@@ -19220,6 +19184,7 @@ const SallaInfiniteScroll = class {
      * Class selector to know list items
      */
     this.item = 'salla-infinite-scroll > *';
+    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">
@@ -19352,6 +19317,7 @@ const SallaLocalizationModal = class {
      * Current currency (existing or newly selected)
      */
     this.currency = salla.config.get('user.currency_code');
+    Helper$1.setHost(this.host);
     salla.event.on('localization::open', () => this.open());
     salla.lang.onLoaded(() => {
       this.translationLoaded = true;
@@ -19365,8 +19331,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 = this.host.querySelector('[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 = this.host.querySelector('[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
@@ -19469,7 +19435,7 @@ const PhoneIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const MailIcon = `<!-- Generated by IcoMoon.io -->
+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>
@@ -19691,7 +19657,7 @@ const SallaLoginModal = class {
     // @ts-ignore
     // @ts-ignore
     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: this.generateTabClasses('home'), "data-name": "home", ref: tab => this.homeTab = tab }, h("p", { class: "s-login-modal-sub-title" }, salla.lang.get('blocks.header.select_login_way')), 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" }, salla.lang.get('blocks.header.sms')), 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: MailIcon }), h("span", { class: "s-login-modal-main-btn-text" }, salla.lang.get('common.elements.email')), h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: KeyboardArrowRightIcon })), h("slot", { name: "after-login-type" }))
+      h("div", { class: this.generateTabClasses('home'), "data-name": "home", ref: tab => this.homeTab = tab }, h("p", { class: "s-login-modal-sub-title" }, salla.lang.get('blocks.header.select_login_way')), 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" }, salla.lang.get('blocks.header.sms')), 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" }, salla.lang.get('common.elements.email')), h("span", { class: "s-login-modal-main-btn-arrow", innerHTML: KeyboardArrowRightIcon })), h("slot", { name: "after-login-type" }))
       : '', this.isMobileAllowed ?
       h("div", { class: this.generateTabClasses('login-phone'), "data-name": "login-phone", ref: tab => this.mobileTab = tab }, h("slot", { name: "before-login-mobile" }), h("form", { onSubmit: () => this.loginBySMS(event), method: "POST" }, h("label", { class: "s-login-modal-label" }, salla.lang.get('common.elements.mobile')), h("salla-tel-input", { tabindex: "0", ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), h("salla-button", { type: "submit", "loader-position": 'center', width: "wide", 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" }, salla.lang.get('blocks.header.login_by_email')) : '', h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
@@ -20000,9 +19966,12 @@ const SallaModal = class {
      * Set the style of the header icon.
      */
     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$1.onKeyUp(document.body, e => e.keyCode === 27 && this.closeModal());
   }
   handleVisible(newValue) {
     if (!newValue) {
@@ -20014,11 +19983,6 @@ const SallaModal = class {
     this.host.classList.remove('s-hidden');
     setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
   }
-  handleKeyUp(ev) {
-    if (ev.key === "KeyUp") {
-      this.closeModal();
-    }
-  }
   /**
    * Open the modal
    */
@@ -20086,15 +20050,15 @@ const SallaModal = class {
   render() {
     this.host.id = this.host.id || 'salla-modal';
     if (this.isLoading) {
-      return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog", onKeyUp: e => this.handleKeyUp(e) }, 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("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.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" }, h("slot", { name: 'icon' }, !!this.iconStyle ?
         h("div", { class: this.iconBlockClasses(), innerHTML: this.iconStyle == 'error' ? AlertEngineIcon : CheckCircle2 })
-        : ''), h("div", { class: "s-modal-header-content" }, this.modalTitle ? h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }) : '', this.subTitle ? h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }) : ''))
-      : ''), h("slot", null), h("slot", { name: "footer" })))));
+        : ''), 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
   componentDidLoad() {
@@ -20143,15 +20107,13 @@ const SallaOfferModal = class {
     this.offer = null;
     this.hasError = false;
     this.translationLoaded = false;
-    this.addToCartLabel = salla.lang.get("pages.cart.add_to_cart");
-    salla.event.on('offer-modal::open', product_id => this.open(product_id));
+    Helper$1.setHost(this.host);
+    salla.event.on('offer-modal::open', (product_id) => this.open(product_id));
     salla.lang.onLoaded(() => {
-      this.addToCartLabel = salla.lang.get("pages.cart.add_to_cart");
       this.translationLoaded = true;
     });
-    this.categorySlot = ((_a = this.host.querySelector('[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 = this.host.querySelector('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.defaultProductSlot();
-    salla.event.on('offer-modal::open', product_id => this.open(product_id));
+    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.');
@@ -20165,7 +20127,6 @@ const SallaOfferModal = class {
    * @param product_id
    */
   async open(product_id) {
-    this.productID = product_id;
     //TODO:: make sure there is only one offer
     this.modal.open();
     return salla.api.withoutNotifier(() => salla.product.offers(product_id))
@@ -20190,35 +20151,6 @@ const SallaOfferModal = class {
   rememberMe(event) {
     salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);
   }
-  addToCart(qty) {
-    //todo:: add enhancement, to cover the previous quantity, because if the discount to add two, user already added one before.
-    salla.api.withoutNotifier(() => salla.cart.quickAdd(this.productID, qty)).then(() => this.modal.close());
-  }
-  getOfferContent() {
-    var _a, _b, _c, _d;
-    if ((_a = this.offer.get.products) === null || _a === void 0 ? void 0 : _a.length) {
-      return h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, (_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
-          .replace(/\{name\}/g, product.name)
-          .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>'
-          : 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 ? salla.lang.get('pages.cart.add_to_cart') : salla.lang.get('pages.products.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 }))));
-    }
-    else if ((_c = this.offer.get.categories) === null || _c === void 0 ? void 0 : _c.length) {
-      return h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, 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) }))), 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 }))));
-    }
-    else if (this.offer.get.discounts_table) {
-      return h("div", { class: "s-offer-modal-discount-table" }, h("table", null, h("tbody", null, (_d = this.offer.get.discounts_table) === null || _d === void 0 ? void 0 : _d.map(discount => h("tr", null, h("td", null, discount.text), h("td", { class: "s-offer-modal-discount-table-cell" }, h("salla-button", { fill: "outline", shape: "btn", color: "primary", size: "medium", width: "normal", onClick: () => this.addToCart(discount.quantity) }, this.addToCartLabel)))))));
-    }
-  }
   //todo:: pass event then use sallaButton from it
   addItem() {
     // this here, is sallaButton
@@ -20235,17 +20167,28 @@ const SallaOfferModal = class {
       '</div>';
   }
   render() {
+    var _a, _b;
     return h("salla-modal", { "sub-title-first": true, "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true }, h("div", { slot: 'loading' }, h("div", { class: "s-offer-modal-skeleton" }, h("div", { class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { height: '15px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '30%' })), h("div", { class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: Cart2 }))))), h("div", { class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { height: '15px', width: '50%' }), h("salla-skeleton", { height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
-      ? [h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), this.getOfferContent(), h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
+      ? [h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), 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
+              .replace(/\{name\}/g, product.name)
+              .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>'
+              : 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 ? salla.lang.get('pages.cart.add_to_cart') : salla.lang.get('pages.products.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" }, salla.lang.get('pages.products.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 ", salla.lang.get('common.elements.remember_my_choice'))),
       ] :
       h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" }, !!this.errorMessage ? h("span", { slot: "description" }, this.errorMessage) : ''));
   }
   componentDidRender() {
-    var _a, _b;
     // Sooo mini Slider
-    if (this.offer && (((_a = this.offer.get.products) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.offer.get.categories) === null || _b === void 0 ? void 0 : _b.length)) && window.screen.width > 639) {
+    if (this.offer && window.screen.width > 639) {
       let sliderWrap = this.modal.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = this.modal.querySelector('.s-offer-modal-scrolled-slider'), navButtons = this.modal.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = this.modal.querySelector('.s-offer-modal-next-btn'), prevBtn = this.modal.querySelector('.s-offer-modal-prev-btn'), items = this.modal.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
       current = 0, // current slide
       slidesToScroll = 3, itemsLength = items.length;
@@ -20306,7 +20249,7 @@ const SallaPlaceholder = class {
     registerInstance(this, hostRef);
     this.translationLoaded = false;
     /**
-     * Custom icon to display, defaults to [`Inbox`], can be any valid svg icon or inline element with font icon
+     * Custom icon to display, defaults to [`sicon-inbox`]
      */
     this.icon = Inbox;
     /**
@@ -20314,7 +20257,7 @@ const SallaPlaceholder = class {
      */
     this.alignment = 'left';
     /**
-      * The size of the icon. Defaults to [`md`] = 45px for font icon & width/height: 3.5rem for svg icon
+      * The size of the icon. Defaults to [`md`]
       */
     this.iconSize = 'md';
     salla.lang.onLoaded(() => {
@@ -20347,7 +20290,7 @@ const sallaProductAvailabilityCss = "";
 const SallaProductAvailability = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.isUser = salla.config.isUser();
+    this.isUser = Helper$1.isUser();
     this.translationLoaded = false;
     /**
      * product id that can visitor subscribe to its availability notification
@@ -20452,19 +20395,13 @@ const SallaProductAvailability = class {
 };
 SallaProductAvailability.style = sallaProductAvailabilityCss;
 
-const PencilRuler = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>pencil-ruler</title>
-<path d="M3.057 11.609c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l6.667-6.667c0.521-0.521 0.521-1.364 0-1.885l-1.285-1.285c-1.143-1.143-2.661-1.772-4.276-1.772-1.616 0-3.135 0.629-4.276 1.772-1.143 1.141-1.772 2.66-1.772 4.276 0 1.615 0.629 3.135 1.772 4.276zM3.657 3.657c1.277-1.277 3.504-1.277 4.781 0l0.343 0.343-4.781 4.781-0.343-0.343c-0.639-0.639-0.991-1.488-0.991-2.391s0.352-1.752 0.991-2.391zM29.317 20.972c-0.2-0.707-0.932-1.119-1.645-0.921-0.709 0.2-1.121 0.937-0.921 1.645l1.987 7.041-7.041-1.987c-0.707-0.195-1.444 0.213-1.645 0.921-0.2 0.708 0.212 1.445 0.921 1.645l9.333 2.633c0.119 0.032 0.24 0.049 0.361 0.049 0.349 0 0.689-0.137 0.943-0.391 0.341-0.341 0.472-0.84 0.34-1.305zM31.609 8.772l-8.381-8.381c-0.5-0.5-1.385-0.5-1.885 0l-8.171 8.171s-0.001 0-0.001 0.001 0 0.001-0.001 0.001l-4.607 4.607s0 0-0.001 0 0 0 0 0.001l-8.171 8.171c-0.251 0.249-0.391 0.588-0.391 0.943 0 0.353 0.14 0.693 0.391 0.943l8.381 8.381c0.249 0.251 0.589 0.391 0.943 0.391s0.693-0.14 0.943-0.391l20.952-20.952c0.521-0.521 0.521-1.365 0-1.885zM9.715 28.781l-6.495-6.496 1.676-1.676 1.851 1.851c0.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.885l-1.851-1.851 2.724-2.724 3.008 3.008c0.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.885l-3.008-3.008 2.724-2.724 1.851 1.851c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.52 0.521-1.364 0-1.885l-1.851-1.851 2.724-2.724 3.008 3.008c0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391c0.521-0.521 0.521-1.365 0-1.885l-3.008-3.008 1.677-1.677 6.496 6.496z"></path>
-</svg>
-`;
-
 const sallaProductSizeGuideCss = "";
 
 const SallaProductSizeGuide = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.hasError = false;
+    Helper$1.setHost(document);
     salla.event.on('size-guide::open', (product_id) => this.open(product_id));
     salla.lang.onLoaded(() => {
       this.placeholder_title = salla.lang.get('pages.products.size_guide_placeholder');
@@ -20502,11 +20439,9 @@ const SallaProductSizeGuide = class {
     return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
   }
   render() {
-    return (h("salla-modal", { class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { slot: "loading" }, h("div", { class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { height: '15px', width: '25%' }), h("div", { class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' })), h("div", { class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { height: '15px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '75%' }), h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '75%' }), h("salla-skeleton", { height: '10px', width: '100%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '60%' }), h("salla-skeleton", { height: '10px', width: '45%' }), h("salla-skeleton", { height: '10px', width: '30%' })))), h("slot", { name: "header" }), !this.hasError && !!this.guides ?
-      [
-        h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description }))))
-      ]
-      : this.showPlaceholder(), h("slot", { name: "footer" })));
+    return (h(Host, { class: "s-product-size-guide-block" }, h("salla-modal", { id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { height: '15px', width: '25%' }), h("div", { class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' }), h("salla-skeleton", { height: '40px' })), h("div", { class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { height: '15px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '75%' }), h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '75%' }), h("salla-skeleton", { height: '10px', width: '100%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '60%' }), h("salla-skeleton", { height: '10px', width: '45%' }), h("salla-skeleton", { height: '10px', width: '30%' })))), h("slot", { name: "header" }), !this.hasError && !!this.guides ?
+      [h("div", { class: "container px-8" }, h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description })))))]
+      : this.showPlaceholder(), h("slot", { name: "footer" }))));
   }
   get host() { return getElement(this); }
 };
@@ -20630,6 +20565,7 @@ const SallaRatingModal = class {
      */
     this.orderId = salla.config.get('page.id');
     this.translationLoaded = false;
+    Helper$1.setHost(document);
     salla.event.on('rating::open', () => this.open());
     salla.lang.onLoaded(() => {
       this.translationLoaded = true;
@@ -20639,17 +20575,22 @@ const SallaRatingModal = class {
    * Show the rating modal
    */
   async open() {
-    return this.modal.open()
-      .then(() => this.order || salla.api.withoutNotifier(() => salla.rating.api.order(this.orderId)).then(res => this.order = res.data))
-      .then(() => this.modal.setTitle(salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.order.id + ')</span>'))
-      .then(() => this.modal.stopLoading())
-      .then(() => this.stepsCount = [this.order.testimonials_enabled, this.order.products_enabled, this.order.shipping_enabled].filter(enabled => enabled).length)
-      .then(() => setTimeout(() => this.handleWizard(), 100))
+    this.modal.open();
+    return await salla.api.withoutNotifier(() => salla.rating.api.order(this.orderId))
+      .then(res => this.order = res.data)
       .catch(e => {
       var _a, _b, _c, _d;
       this.hasError = true;
       this.errorMessage = ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.message) || ((_d = e.response) === null || _d === void 0 ? void 0 : _d.data);
-      this.modal.stopLoading();
+    })
+      .finally(() => {
+      var _a, _b, _c;
+      this.modal.setTitle(`${salla.lang.get('pages.rating.rate_order')} <span class="unicode">${!!this.order ? `(#${this.order.id})` : ''}</span>`);
+      this.stepsCount = [(_a = this.order) === null || _a === void 0 ? void 0 : _a.testimonials_enabled, (_b = this.order) === null || _b === void 0 ? void 0 : _b.products_enabled, (_c = this.order) === null || _c === void 0 ? void 0 : _c.shipping_enabled].filter(enabled => enabled).length;
+      setTimeout(() => this.handleWizard(), 100);
+      setTimeout(() => {
+        this.modal.stopLoading();
+      }, 1000);
     });
   }
   /**
@@ -20678,7 +20619,7 @@ const SallaRatingModal = class {
     let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
     (_b = this.nextBtn) === null || _b === void 0 ? void 0 : _b.setText(nextType ? salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.' + nextType)
       : salla.lang.get('pages.rating.send_ratings'));
-    setTimeout(() => { var _a, _b; return (_a = this.body) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'height:' + ((_b = this.currentTab) === null || _b === void 0 ? void 0 : _b.offsetHeight) + 'px'); });
+    setTimeout(() => { var _a, _b; return (_a = this.body) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'height:' + ((_b = this.currentTab) === null || _b === void 0 ? void 0 : _b.scrollHeight) + 'px'); });
   }
   previousTab() {
     this.currentIndex > 0 && this.currentIndex--;
@@ -20764,7 +20705,7 @@ const SallaRatingModal = class {
             ? 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", innerHTML: ShippingFast }), h("div", { class: "s-rating-modal-title" }, " ", salla.lang.get('pages.rating.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: salla.lang.get('pages.rating.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" }, salla.lang.get('pages.rating.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" }, salla.lang.get('common.elements.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() }, salla.lang.get('common.elements.next'))),]
-      : h("salla-placeholder", { alignment: "center" }))));
+      : '')));
   }
   componentDidLoad() {
     salla.event.dispatch('rating::ready', this);
@@ -20867,7 +20808,8 @@ const SallaSearch = class {
      * Sets the height of the input
      */
     this.height = 60;
-    this.productSlot = ((_a = this.host.querySelector('[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.translationLoaded = true;
@@ -20917,7 +20859,7 @@ const SallaSearch = class {
     }
   }
   search(val) {
-    this.noResults.style.display = 'none';
+    Helper$1.hideElement(this.noResults);
     //run loading spinner or stop it
     this.loading = true;
     salla.product.search(val)
@@ -21038,7 +20980,7 @@ const SallaSocialShare = class {
     registerInstance(this, hostRef);
     this.opened = false;
     this.allPlatforms = [Socials.WHATSAPP, Socials.FACEBOOK, Socials.TWITTER, Socials.EMAIL, Socials.COPY_LINK];
-    this.platformIcons = [{ icon: whatsapp, name: Socials.WHATSAPP }, { icon: facebook, name: Socials.FACEBOOK }, { icon: twitter, name: Socials.TWITTER }, { icon: MailIcon, name: Socials.EMAIL }, { icon: copy_link, name: Socials.COPY_LINK }];
+    this.platformIcons = [{ icon: whatsapp, name: Socials.WHATSAPP }, { icon: facebook, name: Socials.FACEBOOK }, { icon: twitter, name: Socials.TWITTER }, { icon: email, name: Socials.EMAIL }, { icon: copy_link, name: Socials.COPY_LINK }];
     /**
      * page url that will be shared custom | current page url
      */
@@ -26098,7 +26040,6 @@ const SallaSwiper = class {
   }
   initSwiper() {
     for (const slide of this.swiperWrapper.children) {
-      //todo:: use `s-swiper-slide`
       slide.classList.add('swiper-slide');
     }
     this.swiper = new Swiper(this.swiperContainer, {
@@ -27638,7 +27579,7 @@ const SallaTelInput = class {
     /**
      * Current country_code
      */
-    this.countryCode = salla.config.get('user.country_code', 'SA') || 'SA';
+    this.countryCode = salla.config.get('user.country_code', 'SA');
     this.countryCodeLabel = salla.lang.get('common.country_code');
     this.mobileLabel = salla.lang.get('common.elements.mobile');
     this.tooShort = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });
@@ -27646,6 +27587,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$1.setHost(this.host);
     salla.lang.onLoaded(() => {
       this.mobileLabel = salla.lang.get('common.elements.mobile');
       this.countryCodeLabel = salla.lang.get('common.elements.country_code');
@@ -27732,64 +27674,6 @@ const SallaTelInput = class {
 };
 SallaTelInput.style = sallaTelInputCss;
 
-const Bullhorn = `<!-- 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>bullhorn</title>
-<path d="M30.129 0.264c-0.339-0.252-0.776-0.328-1.179-0.208l-24.951 7.485v-0.216c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v14.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-0.112l3.448 1.207-0.595 1.704c-0.321 1.019-0.227 2.103 0.267 3.051s1.327 1.647 2.345 1.968l6.359 2.004c0.399 0.127 0.804 0.187 1.201 0.187 1.699 0 3.277-1.091 3.812-2.785l0.423-1.295 7.633 2.672c0.143 0.049 0.292 0.075 0.44 0.075 0.273 0 0.543-0.084 0.772-0.247 0.352-0.249 0.561-0.655 0.561-1.087v-28c0-0.421-0.199-0.819-0.537-1.069zM18.297 28.4c-0.221 0.701-0.973 1.089-1.673 0.871l-6.357-2.004c-0.34-0.108-0.617-0.34-0.781-0.656s-0.196-0.676-0.101-0.977l0.581-1.665 8.777 3.072zM28 27.453l-24-8.4v-8.728l24-7.2z"></path>
-</svg>
-`;
-
-const UserOff = `<!-- 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-off</title>
-<path d="M10.837 19.309c-4.963 1.284-8.171 4.303-8.171 7.691v3.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-3.667c0-2.101 2.48-4.155 6.172-5.109 0.713-0.184 1.141-0.912 0.957-1.625-0.184-0.711-0.908-1.137-1.625-0.956zM12.859 3.715c0.933-0.685 2.020-1.048 3.141-1.048 2.941 0 5.333 2.392 5.333 5.333 0 1.121-0.363 2.208-1.048 3.141-0.436 0.593-0.308 1.428 0.284 1.864 0.239 0.175 0.515 0.259 0.788 0.259 0.411 0 0.815-0.188 1.076-0.544 1.025-1.393 1.567-3.025 1.567-4.72 0-4.412-3.588-8-8-8-1.695 0-3.327 0.541-4.721 1.567-0.592 0.435-0.72 1.269-0.284 1.864 0.436 0.593 1.269 0.721 1.864 0.284zM31.609 29.724l-29.333-29.333c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l29.333 29.333c0.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>
-</svg>
-`;
-
-const sallaUserSettingsCss = "";
-
-const SallaUserSettings = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    // Texts
-    this.deactivateAccount = salla.lang.get('pages.profile.deactivate_account');
-    this.promotionalMsgs = salla.lang.get('pages.profile.promotional_messages');
-    this.deactivateDesc = salla.lang.get('pages.profile.deactivate_account_description');
-    this.promotionalMsgsDesc = salla.lang.get('pages.profile.promotional_messages_description');
-    this.sorryForLeavingText = salla.lang.get('pages.profile.warning_for_deactivate');
-    this.warningText = salla.lang.get('pages.profile.sorry_for_leaving');
-    this.keepAccount = salla.lang.get('pages.profile.keep_account');
-    this.buttonLoading = false;
-    this.isNotifiable = false;
-    salla.lang.onLoaded(() => {
-      this.deactivateAccount = salla.lang.get('pages.profile.deactivate_account');
-      this.promotionalMsgs = salla.lang.get('pages.profile.promotional_messages');
-      this.deactivateDesc = salla.lang.get('pages.profile.deactivate_account_description');
-      this.promotionalMsgsDesc = salla.lang.get('pages.profile.promotional_messages_description');
-      this.warningText = salla.lang.get('pages.profile.warning_for_deactivate');
-      this.sorryForLeavingText = salla.lang.get('pages.profile.sorry_for_leaving');
-      this.keepAccount = salla.lang.get('pages.profile.keep_account');
-    });
-  }
-  toggleNotification(event) {
-    salla.profile.updateSettings({ is_notifiable: event.target.checked });
-  }
-  capitalizeText(str) {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-  }
-  openDeactivateModal() {
-    this.confirmationModal.setTitle(this.capitalizeText(this.deactivateAccount));
-    this.confirmationModal.open();
-  }
-  async deleteAccount() {
-    await salla.profile.delete().finally(() => this.confirmationModal.close());
-  }
-  render() {
-    return (h(Host, { class: "s-user-settings-wrapper" }, h("div", { class: "s-user-settings-section" }, h("salla-list-tile", null, h("div", { slot: "icon", class: "s-user-settings-section-icon" }, h("span", { innerHTML: Bullhorn })), h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { slot: 'action', class: "s-user-settings-section-action" }, h("label", { class: "s-toggle" }, h("input", { class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleNotification(e), type: "checkbox" }), h("div", { class: "s-toggle-switcher" }))))), h("div", { class: "s-user-settings-section" }, h("salla-list-tile", null, h("div", { slot: "icon", class: "s-user-settings-section-icon" }, h("span", { innerHTML: UserOff })), h("div", { slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { class: "s-user-settings-confirmation" }, h("div", { class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { class: "s-user-settings-confirmation-actions" }, h("salla-button", { width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
-  }
-};
-SallaUserSettings.style = sallaUserSettingsCss;
-
 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>
@@ -27803,6 +27687,7 @@ const SallaVerify = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.verified = createEvent(this, "verified", 7);
+    this.initiated = false;
     this.translationLoaded = false;
     /**
      * Should render component without modal
@@ -27825,6 +27710,7 @@ const SallaVerify = class {
      * to use: `salla.api.auth.verify` or `salla.profile.verify`
      */
     this.isProfileVerify = false;
+    // Helper.setHost(this.host);
     salla.lang.onLoaded(() => {
       var _a;
       this.translationLoaded = true;
@@ -27847,30 +27733,6 @@ const SallaVerify = class {
       this.timer.innerHTML = '30 : 00';
     });
   }
-  handleKeyUp(ev) {
-    var _a, _b, _c, _d;
-    if (['Alt', 'Shift', 'Control', 'AltGraph', 'Ctrl'].includes(ev.key)) {
-      return;
-    }
-    let key = ev.keyCode || ev.charCode;
-    if (ev.target.value) {
-      (_a = ev.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
-      (_b = ev.target.nextElementSibling) === null || _b === void 0 ? void 0 : _b.select();
-    }
-    else if ([8, 46].includes(key)) {
-      (_c = ev.target.previousElementSibling) === null || _c === void 0 ? void 0 : _c.focus();
-      (_d = ev.target.previousElementSibling) === null || _d === void 0 ? void 0 : _d.select();
-    }
-    this.toggleOTPSubmit();
-  }
-  handlePaste(ev) {
-    let text = salla.helpers.number(ev.clipboardData.getData('text'))
-      .replace(/[^0-9.]/g, '')
-      .replace('..', '.');
-    this.otpInputs.forEach((input, i) => input.value = text[i] || '');
-    this.toggleOTPSubmit();
-    setTimeout(() => this.otpInputs[3].focus(), 100);
-  }
   /**
    * Get current code
    * @return {string}
@@ -27889,6 +27751,30 @@ const SallaVerify = class {
     this.type = this.data.type;
     this.resendTimer();
     this.otpInputs = this.body.querySelectorAll('.s-verify-input');
+    if (!this.initiated) {
+      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) {
+          (_a = event.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+          (_b = event.target.nextElementSibling) === null || _b === void 0 ? void 0 : _b.select();
+        }
+        else if ([8, 46].includes(key)) {
+          (_c = event.target.previousElementSibling) === null || _c === void 0 ? void 0 : _c.focus();
+          (_d = event.target.previousElementSibling) === null || _d === void 0 ? void 0 : _d.select();
+        }
+        this.toggleOTPSubmit();
+      });
+      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();
+        setTimeout(() => this.otpInputs[3].focus(), 100);
+      });
+      // return this.modal.open();
+      this.initiated = true;
+    }
     this.reset();
     this.display == 'modal' && ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title));
     this.modal.open();
@@ -27912,14 +27798,12 @@ const SallaVerify = class {
     this.otpInputs[0].focus();
   }
   resendTimer() {
-    this.resendMessage.style.display = 'block';
-    this.resend.style.display = 'none';
+    Helper$1.showElement(this.resendMessage).hideElement(this.resend);
     this.resendAfter = 30;
     let timerId = setInterval(() => {
       if (this.resendAfter <= 0) {
         clearInterval(timerId);
-        this.resend.style.display = 'block';
-        this.resendMessage.style.display = 'none';
+        Helper$1.hideElement(this.resendMessage).showElement(this.resend);
       }
       else {
         this.timer.innerHTML = `${this.resendAfter >= 10 ? this.resendAfter : '0' + this.resendAfter} : 00`;
@@ -27938,12 +27822,6 @@ const SallaVerify = class {
       .finally(() => this.resendTimer());
   }
   submit() {
-    //if code not 4 digits, focus on the after filled input,
-    if (this.code.value.length < 4) {
-      this.otpInputs[this.code.value.length].focus();
-      salla.log('Trying to submit without 4 digits!');
-      return;
-    }
     let data = Object.assign({ code: this.code.value }, this.data);
     return this.btn.load()
       .then(() => this.btn.disable())
@@ -27959,13 +27837,13 @@ const SallaVerify = class {
   }
   render() {
     return this.display == 'inline' ? h(Host, null, this.myBody()) :
-      h("salla-modal", { width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, h("span", { slot: 'icon', innerHTML: this.type == "mobile" ? AndroidPhoneIcon : MailIcon }), 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: "tel", autocomplete: "one-time-code", pattern: "[0-9]*", inputmode: "numeric", maxlength: "1", class: "s-verify-input", onInput: e => salla.helpers.inputDigitsOnly(e.target), onPaste: e => this.handlePaste(e), onKeyUp: e => this.handleKeyUp(e), 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" })));
+    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: "tel", autocomplete: "one-time-code", pattern: "[0-9]*", inputmode: "numeric", 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" })));
   }
   get host() { return getElement(this); }
 };
 SallaVerify.style = sallaVerifyCss;
 
-export { SallaButton as salla_button, SallaCartSummary as salla_cart_summary, SallaDatetimePicker as salla_datetime_picker, SallaFileUpload as salla_file_upload, SallaGifting as salla_gifting, SallaInfiniteScroll as salla_infinite_scroll, SallaListTile as salla_list_tile, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaLoyalty as salla_loyalty, 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, SallaUserSettings as salla_user_settings, SallaVerify as salla_verify };
+export { SallaButton as salla_button, SallaDatetimePicker as salla_datetime_picker, SallaFileUpload as salla_file_upload, SallaGifting as salla_gifting, SallaInfiniteScroll as salla_infinite_scroll, SallaListTile as salla_list_tile, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaLoyalty as salla_loyalty, 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 };