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

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

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { Component, h, Element, Method, State } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
 import SpecialDiscountIcon from '../../assets/svg/special-discount.svg';
 import KeyboardArrowRightIcon from "../../assets/svg/keyboard_arrow_right.svg";
 import KeyboardArrowLeftIcon from "../../assets/svg/keyboard_arrow_left.svg";
@@ -18,15 +19,13 @@ export class SallaOfferModal {
     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.');
@@ -40,7 +39,6 @@ export class SallaOfferModal {
    * @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))
@@ -65,54 +63,6 @@ export class SallaOfferModal {
   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
@@ -129,6 +79,7 @@ export class SallaOfferModal {
       '</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" },
@@ -147,7 +98,26 @@ export class SallaOfferModal {
             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" },
+        ? [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'),
@@ -162,9 +132,8 @@ export class SallaOfferModal {
         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;
@@ -220,9 +189,7 @@ export class SallaOfferModal {
     "offer_message": {},
     "hasError": {},
     "errorMessage": {},
-    "productID": {},
-    "translationLoaded": {},
-    "addToCartLabel": {}
+    "translationLoaded": {}
   }; }
   static get methods() { return {
     "open": {

package/dist/collection/components/salla-placeholder/salla-placeholder.js

@@ -7,7 +7,7 @@ export class SallaPlaceholder {
   constructor() {
     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;
     /**
@@ -15,7 +15,7 @@ export class SallaPlaceholder {
      */
     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(() => {
@@ -60,7 +60,7 @@ export class SallaPlaceholder {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Custom icon to display, defaults to [`Inbox`], can be any valid svg icon or inline element with font icon"
+        "text": "Custom icon to display, defaults to [`sicon-inbox`]"
       },
       "attribute": "icon",
       "reflect": false,
@@ -88,15 +88,15 @@ export class SallaPlaceholder {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'",
-        "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxxl\"",
+        "original": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+        "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The size of the icon. Defaults to [`md`] = 45px for font icon & width/height: 3.5rem for svg icon"
+        "text": "The size of the icon. Defaults to [`md`]"
       },
       "attribute": "icon-size",
       "reflect": false,

package/dist/collection/components/salla-product-availability/salla-product-availability.js

@@ -2,11 +2,11 @@
  * Crafted with ❤ by Salla
  */
 import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
-import BellRingIcon from '../../assets/svg/bell-ring.svg';
 import Helper from '../../Helpers/Helper';
+import BellRingIcon from '../../assets/svg/bell-ring.svg';
 export class SallaProductAvailability {
   constructor() {
-    this.isUser = salla.config.isUser();
+    this.isUser = Helper.isUser();
     this.translationLoaded = false;
     /**
      * product id that can visitor subscribe to its availability notification

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

@@ -1,11 +1,12 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Component, State, Method, Element, h } from '@stencil/core';
-import PencilRuler from "../../assets/svg/pencil-ruler.svg";
+import { Component, Host, State, Method, Element, h } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
 export class SallaProductSizeGuide {
   constructor() {
     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');
@@ -45,37 +46,36 @@ export class SallaProductSizeGuide {
       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" },
+    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("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" })));
+            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" }))));
   }
   static get is() { return "salla-product-size-guide"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/salla-quantity-input/salla-quantity-input.js

@@ -2,9 +2,9 @@
  * Crafted with ❤ by Salla
  */
 import { Component, Element, Host, State, Watch, h, Method } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
 import Add from "../../assets/svg/add.svg";
 import Minus from "../../assets/svg/minus.svg";
-import Helper from '../../Helpers/Helper';
 export class SallaQuantityInput {
   constructor() {
     this.hostAttributes = {};

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

@@ -2,10 +2,10 @@
  * Crafted with ❤ by Salla
  */
 import { Component, h, Method, Element, Host, State, Prop } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
 import Star from '../../assets/svg/star.svg';
 import ShippingFast from "../../assets/svg/shipping-fast.svg";
 import CheckCircle2 from "../../assets/svg/check-circle2.svg";
-import Helper from '../../Helpers/Helper';
 export class SallaRatingModal {
   constructor() {
     this.hasError = false;
@@ -17,6 +17,7 @@ export class SallaRatingModal {
      */
     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;
@@ -26,17 +27,22 @@ export class SallaRatingModal {
    * 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);
     });
   }
   /**
@@ -65,7 +71,7 @@ export class SallaRatingModal {
     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--;
@@ -201,7 +207,7 @@ export class SallaRatingModal {
               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);
@@ -242,17 +248,14 @@ export class SallaRatingModal {
   static get methods() { return {
     "open": {
       "complexType": {
-        "signature": "() => Promise<void | NodeJS.Timeout>",
+        "signature": "() => Promise<any>",
         "parameters": [],
         "references": {
           "Promise": {
             "location": "global"
-          },
-          "NodeJS": {
-            "location": "global"
           }
         },
-        "return": "Promise<void | Timeout>"
+        "return": "Promise<any>"
       },
       "docs": {
         "text": "Show the rating modal",

package/dist/collection/components/salla-rating-stars/salla-rating-stars.js

@@ -2,8 +2,8 @@
  * Crafted with ❤ by Salla
  */
 import { Component, Host, h, Prop, Element } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
 import Star2 from "../../assets/svg/star2.svg";
-import Helper from '../../Helpers/Helper';
 export class SallaRatingStars {
   constructor() {
     /**

package/dist/collection/components/salla-search/salla-search.js

@@ -2,8 +2,8 @@
  * Crafted with ❤ by Salla
  */
 import { Component, Prop, h, State, Element, Listen, Watch } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
 import Search from "../../assets/svg/search.svg";
-import Helper from '../../Helpers/Helper';
 /**
  * @slot product - Replaces products card in the results, has replaceable props `{name}`, `{price}`, `{regular_price}`, `{image}`.
  */
@@ -27,7 +27,8 @@ export class SallaSearch {
      * 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;
@@ -77,7 +78,7 @@ export class SallaSearch {
     }
   }
   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/collection/components/salla-swiper/salla-swiper.js

@@ -33,7 +33,6 @@ export class SallaSwiper {
   }
   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/collection/components/salla-tel-input/salla-tel-input.js

@@ -3,6 +3,7 @@
  */
 import { Element, Component, Host, h, Prop, Method, Event, State } from '@stencil/core';
 import TelInput from "intl-tel-input";
+import Helper from "../../Helpers/Helper";
 export class SallaTelInput {
   constructor() {
     /**
@@ -12,7 +13,7 @@ export class SallaTelInput {
     /**
      * 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 });
@@ -20,6 +21,7 @@ export class SallaTelInput {
     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');
@@ -164,7 +166,7 @@ export class SallaTelInput {
       },
       "attribute": "country-code",
       "reflect": false,
-      "defaultValue": "salla.config.get('user.country_code', 'SA') || 'SA'"
+      "defaultValue": "salla.config.get('user.country_code', 'SA')"
     }
   }; }
   static get states() { return {

package/dist/collection/components/salla-verify/salla-verify.js

@@ -2,14 +2,15 @@
  * Crafted with ❤ by Salla
  */
 import { Component, Host, Element, Event, h, Method, Prop, State } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
 import AndroidPhoneIcon from '../../assets/svg/android-phone.svg';
-import MailIcon from '../../assets/svg/mail.svg';
 /**
  * @slot footer - Replaces the footer, by default it contains: verify button, resend, and timer
  * @slot after-footer - placeholder position
  */
 export class SallaVerify {
   constructor() {
+    this.initiated = false;
     this.translationLoaded = false;
     /**
      * Should render component without modal
@@ -32,6 +33,7 @@ export class SallaVerify {
      * 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;
@@ -54,30 +56,6 @@ export class SallaVerify {
       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}
@@ -96,6 +74,30 @@ export class SallaVerify {
     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();
@@ -119,14 +121,12 @@ export class SallaVerify {
     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`;
@@ -145,12 +145,6 @@ export class SallaVerify {
       .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())
@@ -167,19 +161,20 @@ export class SallaVerify {
   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 }),
+        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", { 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("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" })));
   }