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

package/dist/components/salla-modal2.js

@@ -2,8 +2,8 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as Cancel } from './cancel.js';
 import { H as Helper } from './Helper.js';
+import { C as Cancel } from './cancel.js';
 import { d as defineCustomElement$1 } from './salla-loading2.js';
 
 const AlertEngineIcon = `<!-- Generated by IcoMoon.io -->
@@ -71,9 +71,12 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Set the style of the header icon.
      */
     this.iconStyle = undefined;
+    Helper.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());
   }
   handleVisible(newValue) {
     if (!newValue) {
@@ -85,11 +88,6 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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
    */
@@ -157,15 +155,15 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   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() {
@@ -194,7 +192,7 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "setTitle": [64],
     "loading": [64],
     "stopLoading": [64]
-  }, [[0, "keyup", "handleKeyUp"]]]);
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/salla-offer-modal.js

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { H as Helper } from './Helper.js';
 import { K as KeyboardArrowRightIcon } from './keyboard_arrow_right.js';
 import { d as defineCustomElement$6 } from './salla-button2.js';
 import { d as defineCustomElement$5 } from './salla-loading2.js';
@@ -46,15 +47,13 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     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.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.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.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.');
@@ -68,7 +67,6 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
    * @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))
@@ -93,35 +91,6 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   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
@@ -138,17 +107,28 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       '</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;
@@ -199,9 +179,7 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "offer_message": [32],
     "hasError": [32],
     "errorMessage": [32],
-    "productID": [32],
     "translationLoaded": [32],
-    "addToCartLabel": [32],
     "open": [64],
     "showOffer": [64]
   }]);

package/dist/components/salla-placeholder2.js

@@ -18,7 +18,7 @@ const SallaPlaceholder = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.__registerHost();
     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;
     /**
@@ -26,7 +26,7 @@ const SallaPlaceholder = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
      */
     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(() => {

package/dist/components/salla-product-availability2.js

@@ -21,7 +21,7 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class extends
   constructor() {
     super();
     this.__registerHost();
-    this.isUser = salla.config.isUser();
+    this.isUser = Helper.isUser();
     this.translationLoaded = false;
     /**
      * product id that can visitor subscribe to its availability notification

package/dist/components/salla-product-size-guide.js

@@ -1,7 +1,8 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$8 } from './salla-loading2.js';
 import { d as defineCustomElement$7 } from './salla-modal2.js';
 import { d as defineCustomElement$6 } from './salla-placeholder2.js';
@@ -10,13 +11,6 @@ import { d as defineCustomElement$4 } from './salla-tab-content2.js';
 import { d as defineCustomElement$3 } from './salla-tab-header2.js';
 import { d as defineCustomElement$2 } from './salla-tabs2.js';
 
-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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -24,6 +18,7 @@ const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     super();
     this.__registerHost();
     this.hasError = false;
+    Helper.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');
@@ -61,11 +56,9 @@ const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     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 this; }
   static get style() { return sallaProductSizeGuideCss; }

package/dist/components/salla-rating-modal.js

@@ -2,11 +2,10 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { C as CheckCircle2, d as defineCustomElement$5 } from './salla-modal2.js';
 import { H as Helper } from './Helper.js';
-import { d as defineCustomElement$7 } from './salla-button2.js';
-import { d as defineCustomElement$6 } from './salla-loading2.js';
-import { d as defineCustomElement$4 } from './salla-placeholder2.js';
+import { C as CheckCircle2, d as defineCustomElement$4 } from './salla-modal2.js';
+import { d as defineCustomElement$6 } from './salla-button2.js';
+import { d as defineCustomElement$5 } from './salla-loading2.js';
 import { d as defineCustomElement$3 } from './salla-rating-stars2.js';
 import { d as defineCustomElement$2 } from './salla-skeleton2.js';
 
@@ -39,6 +38,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
      */
     this.orderId = salla.config.get('page.id');
     this.translationLoaded = false;
+    Helper.setHost(document);
     salla.event.on('rating::open', () => this.open());
     salla.lang.onLoaded(() => {
       this.translationLoaded = true;
@@ -48,17 +48,22 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
    * 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);
     });
   }
   /**
@@ -87,7 +92,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     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--;
@@ -173,7 +178,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
             ? 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);
@@ -193,7 +198,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-rating-modal", "salla-button", "salla-loading", "salla-modal", "salla-placeholder", "salla-rating-stars", "salla-skeleton"];
+  const components = ["salla-rating-modal", "salla-button", "salla-loading", "salla-modal", "salla-rating-stars", "salla-skeleton"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-rating-modal":
       if (!customElements.get(tagName)) {
@@ -201,21 +206,16 @@ function defineCustomElement$1() {
       }
       break;
     case "salla-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "salla-loading":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "salla-modal":
+    case "salla-loading":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "salla-placeholder":
+    case "salla-modal":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

package/dist/components/salla-rating-stars2.js

@@ -2,8 +2,8 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { S as Star2 } from './star2.js';
 import { H as Helper } from './Helper.js';
+import { S as Star2 } from './star2.js';
 
 const sallaRatingStarsCss = "";
 

package/dist/components/salla-search.js

@@ -2,8 +2,8 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { S as Search } from './search.js';
 import { H as Helper } from './Helper.js';
+import { S as Search } from './search.js';
 import { d as defineCustomElement$3 } from './salla-loading2.js';
 import { d as defineCustomElement$2 } from './salla-modal2.js';
 
@@ -31,7 +31,8 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * 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.setHost(this.host);
+    this.productSlot = ((_a = Helper.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;
@@ -81,7 +82,7 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   search(val) {
-    this.noResults.style.display = 'none';
+    Helper.hideElement(this.noResults);
     //run loading spinner or stop it
     this.loading = true;
     salla.product.search(val)

package/dist/components/salla-swiper2.js

@@ -4999,7 +4999,6 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1
   }
   initSwiper() {
     for (const slide of this.swiperWrapper.children) {
-      //todo:: use `s-swiper-slide`
       slide.classList.add('swiper-slide');
     }
     this.swiper = new Swiper(this.swiperContainer, {

package/dist/components/salla-tel-input2.js

@@ -3,6 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as createCommonjsModule } from './_commonjsHelpers.js';
+import { H as Helper } from './Helper.js';
 
 var intlTelInput$1 = createCommonjsModule(function (module) {
 /*
@@ -1378,7 +1379,7 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     /**
      * 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 });
@@ -1386,6 +1387,7 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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);
     salla.lang.onLoaded(() => {
       this.mobileLabel = salla.lang.get('common.elements.mobile');
       this.countryCodeLabel = salla.lang.get('common.elements.country_code');

package/dist/components/salla-verify2.js

@@ -2,7 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { e as email } from './mail.js';
+import { H as Helper } from './Helper.js';
 import { d as defineCustomElement$3 } from './salla-button2.js';
 import { d as defineCustomElement$2 } from './salla-loading2.js';
 import { d as defineCustomElement$1 } from './salla-modal2.js';
@@ -21,6 +21,7 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.verified = createEvent(this, "verified", 7);
+    this.initiated = false;
     this.translationLoaded = false;
     /**
      * Should render component without modal
@@ -43,6 +44,7 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * 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;
@@ -65,30 +67,6 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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}
@@ -107,6 +85,30 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.type = this.data.type;
     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 => {
+        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.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();
@@ -130,14 +132,12 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.otpInputs[0].focus();
   }
   resendTimer() {
-    this.resendMessage.style.display = 'block';
-    this.resend.style.display = 'none';
+    Helper.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.hideElement(this.resendMessage).showElement(this.resend);
       }
       else {
         this.timer.innerHTML = `${this.resendAfter >= 10 ? this.resendAfter : '0' + this.resendAfter} : 00`;
@@ -156,12 +156,6 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       .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())
@@ -177,10 +171,10 @@ const SallaVerify = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   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 : email }), 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 this; }
   static get style() { return sallaVerifyCss; }