@salla.sa/twilight-components 1.0.104 → 1.0.107

package/dist/cjs/{salla-add-product-button_6.cjs.entry.js → salla-branches_13.cjs.entry.js}

@@ -8,80 +8,93 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b4140db0.js');
 const Helper = require('./Helper-8ae6a805.js');
 
-const sallaAddProductButtonCss = ":host{display:block}salla-add-product-button[width=wide]{width:100%}";
+const sallaBranchesCss = "";
 
-const SallaAddProductButton = class {
+const SallaBranches = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.success = index.createEvent(this, "success", 7);
-    this.failed = index.createEvent(this, "failed", 7);
-    this.hostAttributes = {};
-    this.hasLabel = false;
-    this.channels = null;
-    this.quantity = 0;
-    this.donatingAmount = 0;
-    this.productStatus = 'sale';
-    this.productType = 'product';
-  }
-  getLabel() {
-    if (this.productStatus === 'sale') {
-      return salla.lang.get('pages.cart.add_to_cart');
-    }
-    if (this.productType !== 'donating') {
-      return salla.lang.get('pages.products.out_of_stock');
-    }
-    // donating
-    return salla.lang.get('pages.products.donation_exceed');
+    this.open = true;
+    this.isOpenedBefore = salla.storage.get("branch-choosed-before");
+    this.displayAs = 'default'; //todo:: change it to boolean, isPopup default false
+    this.browseProductsFrom = 'all'; //todo:: get better name
+    this.branches = [
+      { id: 1, name: 'فرع الرياض', open: true, available: true, limited: false, tag: 'متوفر' },
+      { id: 2, name: 'فرع جدة', open: false, available: false, limited: false, tag: 'غير متوفر' },
+      { id: 3, name: 'فرع مكة', open: true, available: true, limited: false, tag: 'متوفر' },
+      { id: 4, name: 'فرع المدينة', open: true, available: true, limited: false, tag: 'متوفر' },
+      { id: 5, name: 'فرع جازان', open: true, available: true, limited: true, tag: 'الكمية محدودة' }
+    ];
+    this.current = 1;
+    this.currentBranch = (prop) => {
+      return this.branches.filter((el) => el.id == this.current)[0][prop];
+    };
+    this.statusColor = (branch = null) => {
+      return branch ?
+        branch.limited ? 's-branches-color-red' : branch.available ? 's-branches-color-green' : 's-branches-color-gray'
+        :
+          this.currentBranch('limited') ? 's-branches-color-red' : this.currentBranch('available') ? 's-branches-color-green' : 's-branches-color-gray';
+    };
+    this.isChoiceable = () => {
+      return (this.browseProductsFrom !== 'all' && this.position == 'single') || this.position == 'header';
+    };
+    this.formTitle = () => {
+      return this.isChoiceable() ?
+        'توفر المنتج في الفروع الآخرى'
+        : 'التسوق من فرع آخر';
+    };
+    salla.event.on('branches::show', btn => btn.dataset.target == this.host.id && this.show());
+    salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
   }
-  addProductToCart(event) {
-    // we want to ignore the click action when the type of button is submit a form
-    if (this.hostAttributes['type'] === 'submit') {
-      return false;
-    }
-    event.preventDefault();
-    /**
-     * by default the quick add is just an alias for add item function
-     * but its work only when the id is the only value is passed via the object
-     * so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
-     */
-    const data = Object.entries({
-      id: this.productId,
-      donating_amount: this.donatingAmount,
-      quantity: this.quantity
-    }).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {});
-    return salla.cart.quickAdd(data)
-      .then((response) => {
-      console.log("🚀 ~ file: salla-add-product-button.tsx ~ line 67 ~ SallaAddProductButton ~ .then ~ response", response);
-      return this.success.emit(response);
-    })
-      .catch((error) => {
-      console.log("🚀 ~ file: salla-add-product-button.tsx ~ line 70 ~ SallaAddProductButton ~ addProductToCart ~ error", error);
-      return this.failed.emit(error);
-    });
+  //todo:: add description for all @methods
+  async show() {
+    var _a;
+    return (_a = this.modal) === null || _a === void 0 ? void 0 : _a.open();
   }
-  getBtnAttributes() {
-    for (let i = 0; i < this.host.attributes.length; i++) {
-      if (!['id', 'class'].includes(this.host.attributes[i].name)) {
-        this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
-      }
-    }
-    return this.hostAttributes;
+  async hide() {
+    var _a;
+    return (_a = this.modal) === null || _a === void 0 ? void 0 : _a.close();
   }
-  componentWillLoad() {
-    this.hasLabel = !!this.host.innerHTML.replace('<!---->', '').trim();
+  handelChange(event) {
+    this.selected = event.target.value;
+  }
+  handleSubmit() {
+    this.btn.load().then(() => {
+      setTimeout(() => location.reload(), 2000);
+    });
+    salla.storage.set("branch-choosed-before", true);
+    this.show();
+    setTimeout(() => {
+      this.current = this.selected;
+    }, 300);
   }
   render() {
-    return (index.h(index.Host, null, this.productStatus === 'out-and-notify' && this.channels ?
-      index.h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), index.h("slot", null)) :
-      index.h("salla-button", Object.assign({ ref: el => this.btn = el, onClick: event => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }), index.h("slot", null))));
+    return (index.h("salla-modal", { icon: "sicon-store-alt", "modal-title": "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636", "sub-title": "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646", "sub-title-first": true,
+      // is-closable={!this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true'}
+      ref: (modal) => this.modal = modal, width: "sm", id: "s-branches-modal", class: "s-hidden" }, index.h("h4", { class: "s-branches-title" }, this.formTitle()), this.branches.length <= 5 ?
+      index.h("div", { class: "s-branches-space-v" }, this.branches.map((branch) => index.h("div", { class: "s-branches-input-wrap" }, index.h("input", { id: this.position + '_branch_' + branch.id, disabled: !branch.open && this.isChoiceable(), name: "lang", type: "radio", value: branch.id, onChange: (event) => this.handelChange(event), class: {
+          's-branches-input': true,
+          'opacity-50': !branch.open,
+          's-hidden': !this.isChoiceable()
+        }, checked: this.current == branch.id }), index.h("label", { htmlFor: this.position + '_branch_' + branch.id, class: {
+          's-branches-label': true,
+          's-branches-clickable': this.isChoiceable()
+        } }, index.h("span", { class: { 's-branches-is-closed': !branch.open } }, branch.name), this.isChoiceable() ?
+        index.h("small", { class: "s-branches-closed-badge" }, branch.open ? '' : 'مُغلق')
+        :
+          index.h("span", { class: this.statusColor(branch) }, branch.tag)))))
+      :
+        index.h("select", { class: "s-branches-select", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (index.h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق')))), this.isChoiceable() ?
+      index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", width: "wide" }, salla.lang.get('common.elements.ok')))
+      : ''));
   }
   componentDidRender() {
-    //if label not passed, get label
-    this.hasLabel || salla.event.on('languages::translations.loaded', () => this.btn.setText(this.getLabel() || 'اضافة للسلة'));
+    if (!this.isOpenedBefore && this.displayAs == 'popup') {
+      this.show();
+    }
   }
   get host() { return index.getElement(this); }
 };
-SallaAddProductButton.style = sallaAddProductButtonCss;
+SallaBranches.style = sallaBranchesCss;
 
 const sallaButtonCss = "";
 
@@ -192,6 +205,391 @@ const SallaButton = class {
 };
 SallaButton.style = sallaButtonCss;
 
+const sallaInfiniteScrollCss = "";
+
+const SallaInfiniteScroll = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Next Page element
+     */
+    this.nextPage = '';
+    /**
+     * Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`
+     */
+    this.autoload = false;
+    /**
+     * Class selector to know the container if it's not the host `<salla-infinite-scroll>`
+     */
+    this.container = 'salla-infinite-scroll';
+    /**
+     * Class selector to know list items
+     */
+    this.item = 'salla-infinite-scroll > *';
+    Helper.Helper.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">
+        <p class="s-infinite-scroll-last infinite-scroll-last"></p>
+        <p class="s-infinite-scroll-error infinite-scroll-error"></p>
+      </div>
+      <a href="${this.nextPage}" class="s-infinite-scroll-btn s-button-btn btn--has-loading s-button-primary">
+        <span class="s-button-text s-infinite-scroll-btn-text">${salla.lang.get('common.elements.load_more')}</span>
+        <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
+      </a>`;
+    this.btnLoader = this.status.querySelector('.s-button-loader');
+    salla.lang.onLoaded(() => {
+      this.status.querySelector('.s-button-text').innerHTML = salla.lang.get('common.elements.load_more');
+      this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
+      this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
+    });
+  }
+  loading(isLoading = true) {
+    let btnText = this.status.querySelector('.s-button-text');
+    Helper.Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
+    this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
+  }
+  render() {
+    return this.nextPage.length > 1 ?
+      index.h(index.Host, { class: "s-infinite-scroll-container" }, index.h("slot", null)) : '';
+  }
+  componentDidLoad() {
+    if (this.nextPage.length === 0) {
+      return;
+    }
+    this.host.insertAdjacentElement('afterend', this.status);
+    let that = this;
+    let infScroll = salla.infiniteScroll.initiate(this.container, {
+      history: this.autoload ? 'push' : false,
+      scrollThreshold: this.autoload ? 400 : false,
+      nextPage: this.nextPage,
+      checkLastPage: 'salla-infinite-scroll[next-page*=":"],salla-infinite-scroll[next-page*="."]',
+      status: '.s-infinite-scroll-status',
+      button: this.status.querySelector('.s-button-btn'),
+      append: this.item,
+      path: function () {
+        return that.nextPage.replace(/page\=(\d)/g, 'page=' + (this.loadCount + 2));
+      },
+    })
+      .on('request', () => this.loading())
+      .on('load', () => {
+      this.loading(false);
+      if (infScroll.pageIndex == 2) {
+        infScroll.option({ loadOnScroll: false });
+      }
+      if (infScroll.pageIndex == 3) {
+        infScroll.option({ loadOnScroll: true });
+      }
+    })
+      .on('error', () => this.loading(false));
+  }
+  get host() { return index.getElement(this); }
+};
+SallaInfiniteScroll.style = sallaInfiniteScrollCss;
+
+const sallaLocalizationModalCss = ".iti__flag{width:20px}.iti__flag.iti__be{width:18px}.iti__flag.iti__ch{width:15px}.iti__flag.iti__mc{width:19px}.iti__flag.iti__ne{width:18px}.iti__flag.iti__np{width:13px}.iti__flag.iti__va{width:15px}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-size:5652px 15px}}.iti__flag.iti__ac{height:10px;background-position:0px 0px}.iti__flag.iti__ad{height:14px;background-position:-22px 0px}.iti__flag.iti__ae{height:10px;background-position:-44px 0px}.iti__flag.iti__af{height:14px;background-position:-66px 0px}.iti__flag.iti__ag{height:14px;background-position:-88px 0px}.iti__flag.iti__ai{height:10px;background-position:-110px 0px}.iti__flag.iti__al{height:15px;background-position:-132px 0px}.iti__flag.iti__am{height:10px;background-position:-154px 0px}.iti__flag.iti__ao{height:14px;background-position:-176px 0px}.iti__flag.iti__aq{height:14px;background-position:-198px 0px}.iti__flag.iti__ar{height:13px;background-position:-220px 0px}.iti__flag.iti__as{height:10px;background-position:-242px 0px}.iti__flag.iti__at{height:14px;background-position:-264px 0px}.iti__flag.iti__au{height:10px;background-position:-286px 0px}.iti__flag.iti__aw{height:14px;background-position:-308px 0px}.iti__flag.iti__ax{height:13px;background-position:-330px 0px}.iti__flag.iti__az{height:10px;background-position:-352px 0px}.iti__flag.iti__ba{height:10px;background-position:-374px 0px}.iti__flag.iti__bb{height:14px;background-position:-396px 0px}.iti__flag.iti__bd{height:12px;background-position:-418px 0px}.iti__flag.iti__be{height:15px;background-position:-440px 0px}.iti__flag.iti__bf{height:14px;background-position:-460px 0px}.iti__flag.iti__bg{height:12px;background-position:-482px 0px}.iti__flag.iti__bh{height:12px;background-position:-504px 0px}.iti__flag.iti__bi{height:12px;background-position:-526px 0px}.iti__flag.iti__bj{height:14px;background-position:-548px 0px}.iti__flag.iti__bl{height:14px;background-position:-570px 0px}.iti__flag.iti__bm{height:10px;background-position:-592px 0px}.iti__flag.iti__bn{height:10px;background-position:-614px 0px}.iti__flag.iti__bo{height:14px;background-position:-636px 0px}.iti__flag.iti__bq{height:14px;background-position:-658px 0px}.iti__flag.iti__br{height:14px;background-position:-680px 0px}.iti__flag.iti__bs{height:10px;background-position:-702px 0px}.iti__flag.iti__bt{height:14px;background-position:-724px 0px}.iti__flag.iti__bv{height:15px;background-position:-746px 0px}.iti__flag.iti__bw{height:14px;background-position:-768px 0px}.iti__flag.iti__by{height:10px;background-position:-790px 0px}.iti__flag.iti__bz{height:14px;background-position:-812px 0px}.iti__flag.iti__ca{height:10px;background-position:-834px 0px}.iti__flag.iti__cc{height:10px;background-position:-856px 0px}.iti__flag.iti__cd{height:15px;background-position:-878px 0px}.iti__flag.iti__cf{height:14px;background-position:-900px 0px}.iti__flag.iti__cg{height:14px;background-position:-922px 0px}.iti__flag.iti__ch{height:15px;background-position:-944px 0px}.iti__flag.iti__ci{height:14px;background-position:-961px 0px}.iti__flag.iti__ck{height:10px;background-position:-983px 0px}.iti__flag.iti__cl{height:14px;background-position:-1005px 0px}.iti__flag.iti__cm{height:14px;background-position:-1027px 0px}.iti__flag.iti__cn{height:14px;background-position:-1049px 0px}.iti__flag.iti__co{height:14px;background-position:-1071px 0px}.iti__flag.iti__cp{height:14px;background-position:-1093px 0px}.iti__flag.iti__cr{height:12px;background-position:-1115px 0px}.iti__flag.iti__cu{height:10px;background-position:-1137px 0px}.iti__flag.iti__cv{height:12px;background-position:-1159px 0px}.iti__flag.iti__cw{height:14px;background-position:-1181px 0px}.iti__flag.iti__cx{height:10px;background-position:-1203px 0px}.iti__flag.iti__cy{height:14px;background-position:-1225px 0px}.iti__flag.iti__cz{height:14px;background-position:-1247px 0px}.iti__flag.iti__de{height:12px;background-position:-1269px 0px}.iti__flag.iti__dg{height:10px;background-position:-1291px 0px}.iti__flag.iti__dj{height:14px;background-position:-1313px 0px}.iti__flag.iti__dk{height:15px;background-position:-1335px 0px}.iti__flag.iti__dm{height:10px;background-position:-1357px 0px}.iti__flag.iti__do{height:14px;background-position:-1379px 0px}.iti__flag.iti__dz{height:14px;background-position:-1401px 0px}.iti__flag.iti__ea{height:14px;background-position:-1423px 0px}.iti__flag.iti__ec{height:14px;background-position:-1445px 0px}.iti__flag.iti__ee{height:13px;background-position:-1467px 0px}.iti__flag.iti__eg{height:14px;background-position:-1489px 0px}.iti__flag.iti__eh{height:10px;background-position:-1511px 0px}.iti__flag.iti__er{height:10px;background-position:-1533px 0px}.iti__flag.iti__es{height:14px;background-position:-1555px 0px}.iti__flag.iti__et{height:10px;background-position:-1577px 0px}.iti__flag.iti__eu{height:14px;background-position:-1599px 0px}.iti__flag.iti__fi{height:12px;background-position:-1621px 0px}.iti__flag.iti__fj{height:10px;background-position:-1643px 0px}.iti__flag.iti__fk{height:10px;background-position:-1665px 0px}.iti__flag.iti__fm{height:11px;background-position:-1687px 0px}.iti__flag.iti__fo{height:15px;background-position:-1709px 0px}.iti__flag.iti__fr{height:14px;background-position:-1731px 0px}.iti__flag.iti__ga{height:15px;background-position:-1753px 0px}.iti__flag.iti__gb{height:10px;background-position:-1775px 0px}.iti__flag.iti__gd{height:12px;background-position:-1797px 0px}.iti__flag.iti__ge{height:14px;background-position:-1819px 0px}.iti__flag.iti__gf{height:14px;background-position:-1841px 0px}.iti__flag.iti__gg{height:14px;background-position:-1863px 0px}.iti__flag.iti__gh{height:14px;background-position:-1885px 0px}.iti__flag.iti__gi{height:10px;background-position:-1907px 0px}.iti__flag.iti__gl{height:14px;background-position:-1929px 0px}.iti__flag.iti__gm{height:14px;background-position:-1951px 0px}.iti__flag.iti__gn{height:14px;background-position:-1973px 0px}.iti__flag.iti__gp{height:14px;background-position:-1995px 0px}.iti__flag.iti__gq{height:14px;background-position:-2017px 0px}.iti__flag.iti__gr{height:14px;background-position:-2039px 0px}.iti__flag.iti__gs{height:10px;background-position:-2061px 0px}.iti__flag.iti__gt{height:13px;background-position:-2083px 0px}.iti__flag.iti__gu{height:11px;background-position:-2105px 0px}.iti__flag.iti__gw{height:10px;background-position:-2127px 0px}.iti__flag.iti__gy{height:12px;background-position:-2149px 0px}.iti__flag.iti__hk{height:14px;background-position:-2171px 0px}.iti__flag.iti__hm{height:10px;background-position:-2193px 0px}.iti__flag.iti__hn{height:10px;background-position:-2215px 0px}.iti__flag.iti__hr{height:10px;background-position:-2237px 0px}.iti__flag.iti__ht{height:12px;background-position:-2259px 0px}.iti__flag.iti__hu{height:10px;background-position:-2281px 0px}.iti__flag.iti__ic{height:14px;background-position:-2303px 0px}.iti__flag.iti__id{height:14px;background-position:-2325px 0px}.iti__flag.iti__ie{height:10px;background-position:-2347px 0px}.iti__flag.iti__il{height:15px;background-position:-2369px 0px}.iti__flag.iti__im{height:10px;background-position:-2391px 0px}.iti__flag.iti__in{height:14px;background-position:-2413px 0px}.iti__flag.iti__io{height:10px;background-position:-2435px 0px}.iti__flag.iti__iq{height:14px;background-position:-2457px 0px}.iti__flag.iti__ir{height:12px;background-position:-2479px 0px}.iti__flag.iti__is{height:15px;background-position:-2501px 0px}.iti__flag.iti__it{height:14px;background-position:-2523px 0px}.iti__flag.iti__je{height:12px;background-position:-2545px 0px}.iti__flag.iti__jm{height:10px;background-position:-2567px 0px}.iti__flag.iti__jo{height:10px;background-position:-2589px 0px}.iti__flag.iti__jp{height:14px;background-position:-2611px 0px}.iti__flag.iti__ke{height:14px;background-position:-2633px 0px}.iti__flag.iti__kg{height:12px;background-position:-2655px 0px}.iti__flag.iti__kh{height:13px;background-position:-2677px 0px}.iti__flag.iti__ki{height:10px;background-position:-2699px 0px}.iti__flag.iti__km{height:12px;background-position:-2721px 0px}.iti__flag.iti__kn{height:14px;background-position:-2743px 0px}.iti__flag.iti__kp{height:10px;background-position:-2765px 0px}.iti__flag.iti__kr{height:14px;background-position:-2787px 0px}.iti__flag.iti__kw{height:10px;background-position:-2809px 0px}.iti__flag.iti__ky{height:10px;background-position:-2831px 0px}.iti__flag.iti__kz{height:10px;background-position:-2853px 0px}.iti__flag.iti__la{height:14px;background-position:-2875px 0px}.iti__flag.iti__lb{height:14px;background-position:-2897px 0px}.iti__flag.iti__lc{height:10px;background-position:-2919px 0px}.iti__flag.iti__li{height:12px;background-position:-2941px 0px}.iti__flag.iti__lk{height:10px;background-position:-2963px 0px}.iti__flag.iti__lr{height:11px;background-position:-2985px 0px}.iti__flag.iti__ls{height:14px;background-position:-3007px 0px}.iti__flag.iti__lt{height:12px;background-position:-3029px 0px}.iti__flag.iti__lu{height:12px;background-position:-3051px 0px}.iti__flag.iti__lv{height:10px;background-position:-3073px 0px}.iti__flag.iti__ly{height:10px;background-position:-3095px 0px}.iti__flag.iti__ma{height:14px;background-position:-3117px 0px}.iti__flag.iti__mc{height:15px;background-position:-3139px 0px}.iti__flag.iti__md{height:10px;background-position:-3160px 0px}.iti__flag.iti__me{height:10px;background-position:-3182px 0px}.iti__flag.iti__mf{height:14px;background-position:-3204px 0px}.iti__flag.iti__mg{height:14px;background-position:-3226px 0px}.iti__flag.iti__mh{height:11px;background-position:-3248px 0px}.iti__flag.iti__mk{height:10px;background-position:-3270px 0px}.iti__flag.iti__ml{height:14px;background-position:-3292px 0px}.iti__flag.iti__mm{height:14px;background-position:-3314px 0px}.iti__flag.iti__mn{height:10px;background-position:-3336px 0px}.iti__flag.iti__mo{height:14px;background-position:-3358px 0px}.iti__flag.iti__mp{height:10px;background-position:-3380px 0px}.iti__flag.iti__mq{height:14px;background-position:-3402px 0px}.iti__flag.iti__mr{height:14px;background-position:-3424px 0px}.iti__flag.iti__ms{height:10px;background-position:-3446px 0px}.iti__flag.iti__mt{height:14px;background-position:-3468px 0px}.iti__flag.iti__mu{height:14px;background-position:-3490px 0px}.iti__flag.iti__mv{height:14px;background-position:-3512px 0px}.iti__flag.iti__mw{height:14px;background-position:-3534px 0px}.iti__flag.iti__mx{height:12px;background-position:-3556px 0px}.iti__flag.iti__my{height:10px;background-position:-3578px 0px}.iti__flag.iti__mz{height:14px;background-position:-3600px 0px}.iti__flag.iti__na{height:14px;background-position:-3622px 0px}.iti__flag.iti__nc{height:10px;background-position:-3644px 0px}.iti__flag.iti__ne{height:15px;background-position:-3666px 0px}.iti__flag.iti__nf{height:10px;background-position:-3686px 0px}.iti__flag.iti__ng{height:10px;background-position:-3708px 0px}.iti__flag.iti__ni{height:12px;background-position:-3730px 0px}.iti__flag.iti__nl{height:14px;background-position:-3752px 0px}.iti__flag.iti__no{height:15px;background-position:-3774px 0px}.iti__flag.iti__np{height:15px;background-position:-3796px 0px}.iti__flag.iti__nr{height:10px;background-position:-3811px 0px}.iti__flag.iti__nu{height:10px;background-position:-3833px 0px}.iti__flag.iti__nz{height:10px;background-position:-3855px 0px}.iti__flag.iti__om{height:10px;background-position:-3877px 0px}.iti__flag.iti__pa{height:14px;background-position:-3899px 0px}.iti__flag.iti__pe{height:14px;background-position:-3921px 0px}.iti__flag.iti__pf{height:14px;background-position:-3943px 0px}.iti__flag.iti__pg{height:15px;background-position:-3965px 0px}.iti__flag.iti__ph{height:10px;background-position:-3987px 0px}.iti__flag.iti__pk{height:14px;background-position:-4009px 0px}.iti__flag.iti__pl{height:13px;background-position:-4031px 0px}.iti__flag.iti__pm{height:14px;background-position:-4053px 0px}.iti__flag.iti__pn{height:10px;background-position:-4075px 0px}.iti__flag.iti__pr{height:14px;background-position:-4097px 0px}.iti__flag.iti__ps{height:10px;background-position:-4119px 0px}.iti__flag.iti__pt{height:14px;background-position:-4141px 0px}.iti__flag.iti__pw{height:13px;background-position:-4163px 0px}.iti__flag.iti__py{height:11px;background-position:-4185px 0px}.iti__flag.iti__qa{height:8px;background-position:-4207px 0px}.iti__flag.iti__re{height:14px;background-position:-4229px 0px}.iti__flag.iti__ro{height:14px;background-position:-4251px 0px}.iti__flag.iti__rs{height:14px;background-position:-4273px 0px}.iti__flag.iti__ru{height:14px;background-position:-4295px 0px}.iti__flag.iti__rw{height:14px;background-position:-4317px 0px}.iti__flag.iti__sa{height:14px;background-position:-4339px 0px}.iti__flag.iti__sb{height:10px;background-position:-4361px 0px}.iti__flag.iti__sc{height:10px;background-position:-4383px 0px}.iti__flag.iti__sd{height:10px;background-position:-4405px 0px}.iti__flag.iti__se{height:13px;background-position:-4427px 0px}.iti__flag.iti__sg{height:14px;background-position:-4449px 0px}.iti__flag.iti__sh{height:10px;background-position:-4471px 0px}.iti__flag.iti__si{height:10px;background-position:-4493px 0px}.iti__flag.iti__sj{height:15px;background-position:-4515px 0px}.iti__flag.iti__sk{height:14px;background-position:-4537px 0px}.iti__flag.iti__sl{height:14px;background-position:-4559px 0px}.iti__flag.iti__sm{height:15px;background-position:-4581px 0px}.iti__flag.iti__sn{height:14px;background-position:-4603px 0px}.iti__flag.iti__so{height:14px;background-position:-4625px 0px}.iti__flag.iti__sr{height:14px;background-position:-4647px 0px}.iti__flag.iti__ss{height:10px;background-position:-4669px 0px}.iti__flag.iti__st{height:10px;background-position:-4691px 0px}.iti__flag.iti__sv{height:12px;background-position:-4713px 0px}.iti__flag.iti__sx{height:14px;background-position:-4735px 0px}.iti__flag.iti__sy{height:14px;background-position:-4757px 0px}.iti__flag.iti__sz{height:14px;background-position:-4779px 0px}.iti__flag.iti__ta{height:10px;background-position:-4801px 0px}.iti__flag.iti__tc{height:10px;background-position:-4823px 0px}.iti__flag.iti__td{height:14px;background-position:-4845px 0px}.iti__flag.iti__tf{height:14px;background-position:-4867px 0px}.iti__flag.iti__tg{height:13px;background-position:-4889px 0px}.iti__flag.iti__th{height:14px;background-position:-4911px 0px}.iti__flag.iti__tj{height:10px;background-position:-4933px 0px}.iti__flag.iti__tk{height:10px;background-position:-4955px 0px}.iti__flag.iti__tl{height:10px;background-position:-4977px 0px}.iti__flag.iti__tm{height:14px;background-position:-4999px 0px}.iti__flag.iti__tn{height:14px;background-position:-5021px 0px}.iti__flag.iti__to{height:10px;background-position:-5043px 0px}.iti__flag.iti__tr{height:14px;background-position:-5065px 0px}.iti__flag.iti__tt{height:12px;background-position:-5087px 0px}.iti__flag.iti__tv{height:10px;background-position:-5109px 0px}.iti__flag.iti__tw{height:14px;background-position:-5131px 0px}.iti__flag.iti__tz{height:14px;background-position:-5153px 0px}.iti__flag.iti__ua{height:14px;background-position:-5175px 0px}.iti__flag.iti__ug{height:14px;background-position:-5197px 0px}.iti__flag.iti__um{height:11px;background-position:-5219px 0px}.iti__flag.iti__un{height:14px;background-position:-5241px 0px}.iti__flag.iti__us{height:11px;background-position:-5263px 0px}.iti__flag.iti__uy{height:14px;background-position:-5285px 0px}.iti__flag.iti__uz{height:10px;background-position:-5307px 0px}.iti__flag.iti__va{height:15px;background-position:-5329px 0px}.iti__flag.iti__vc{height:14px;background-position:-5346px 0px}.iti__flag.iti__ve{height:14px;background-position:-5368px 0px}.iti__flag.iti__vg{height:10px;background-position:-5390px 0px}.iti__flag.iti__vi{height:14px;background-position:-5412px 0px}.iti__flag.iti__vn{height:14px;background-position:-5434px 0px}.iti__flag.iti__vu{height:12px;background-position:-5456px 0px}.iti__flag.iti__wf{height:14px;background-position:-5478px 0px}.iti__flag.iti__ws{height:10px;background-position:-5500px 0px}.iti__flag.iti__xk{height:15px;background-position:-5522px 0px}.iti__flag.iti__ye{height:14px;background-position:-5544px 0px}.iti__flag.iti__yt{height:14px;background-position:-5566px 0px}.iti__flag.iti__za{height:14px;background-position:-5588px 0px}.iti__flag.iti__zm{height:14px;background-position:-5610px 0px}.iti__flag.iti__zw{height:10px;background-position:-5632px 0px}.iti__flag{height:15px;box-shadow:0px 0px 1px 0px #888;background-image:url(\"https://cdn.salla.network/images/flags.png\");background-repeat:no-repeat;background-color:#f5f7f9;background-position:20px 0}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){.iti__flag{background-image:url(\"https://cdn.salla.network/images/flags@2x.png\")}}.iti__flag.iti__np{background-color:transparent}";
+
+const SallaLocalizationModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    var _a, _b;
+    this.languages = [];
+    this.currencies = [];
+    this.isLoading = true;
+    this.language = salla.config.get('user.language_code');
+    this.currency = salla.config.get('user.currency_code');
+    Helper.Helper.setHost(this.host);
+    salla.event.on('localization::open', () => this.open());
+    salla.lang.onLoaded(() => {
+      var _a;
+      this.languagesTitle = salla.lang.get('common.titles.language');
+      this.currenciesTitle = salla.lang.get('common.titles.currency');
+      (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok'));
+    });
+    /**
+     * letting developer to insert his own slot like:
+     * <salla-localization>
+     *   <div slot="language">...{name}....</div>
+     *   <div slot="currency">...{name}....</div>
+     * </salla-localization>
+     * Because scoped templates not supported in stencil );
+     * we made a workaround to pass language & currency attributes, then replace names in rendering
+     */
+    this.languageSlot = ((_a = Helper.Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-modal-label" for="lang-{code}"><span>{name}</span><div class="s-localization-modal-flag flag iti__flag iti__{country_code}"></div></label>';
+    this.currencySlot = ((_b = Helper.Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-modal-label" for="currency-{code}"><span>{name}</span><small class="s-localization-modal-currency">{code}</small></label>';
+  }
+  /**
+   * open the component
+   */
+  async open() {
+    console.log("🚀 ~ file: salla-localization-modal.tsx ~ line 59 ~ SallaLocalizationModal ~ open ~ this.modal", this.modal);
+    return await this.modal.open()
+      .then(() => this.getLanguages())
+      .then(() => this.getCurrencies())
+      .then(() => this.isLoading = false);
+  }
+  /**
+   * Hide the component
+   */
+  async close() {
+    return this.modal.close();
+  }
+  async getLanguages() {
+    this.language = this.language || salla.config.get('user.language_code');
+    return this.languages.length > 1 ? null : await salla.config.languages().then(data => this.languages = data);
+  }
+  async getCurrencies() {
+    this.currency = this.currency || salla.config.get('user.currency_code');
+    return this.currencies.length > 1 ? null : await salla.config.currencies().then(data => this.currencies = Object.values(data || {}));
+  }
+  onChangeCurrency(event) {
+    this.currency = event.target.value;
+  }
+  onChangeLanguage(event) {
+    this.language = event.target.value;
+  }
+  async submit() {
+    let url;
+    this.btn.load()
+      .then(() => {
+      if (!this.currency) {
+        salla.log('There is no currency!');
+        return;
+      }
+      if (this.currency === salla.config.get('user.currency_code', 'SAR')) {
+        return;
+      }
+      url = window.location.href;
+      return salla.currency.api.change(this.currency);
+    })
+      .then(() => this.language === salla.config.get('user.language_code', 'ar') || (url = salla.helpers.addParamToUrl('lang', this.language)))
+      .then(() => this.btn.stop())
+      .then(() => this.close())
+      .then(() => url && (window.location.href = url));
+  }
+  render() {
+    return (index.h("salla-modal", { isLoading: this.isLoading, id: "salla-localization", class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, !this.isLoading ?
+      index.h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
+        index.h("div", { class: "s-localization-modal-section" }, index.h("label", { class: "s-localization-modal-title" }, this.languagesTitle), index.h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?
+          this.languages.map(lang => index.h("div", { class: "s-localization-modal-item" }, index.h("input", { class: "s-localization-modal-input", type: "radio", checked: this.language == lang.iso_code, onChange: () => this.language = lang.iso_code, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), index.h("div", { class: "s-localization-modal-label-slot", id: "language-slot", innerHTML: this.languageSlot
+              .replace(/\{name\}/g, lang.name)
+              .replace(/\{code\}/g, lang.code)
+              .replace(/\{country_code\}/g, lang.country_code) }))) :
+          index.h("select", { class: "s-localization-modal-select", name: "language", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => index.h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
+        : '', this.currencies.length > 1 ?
+        index.h("div", { class: "s-localization-modal-section" }, index.h("label", { class: "s-localization-modal-title" }, this.currenciesTitle), index.h("div", { class: "s-localization-modal-section-inner" }, this.currencies.length < 6 ?
+          this.currencies.map(currency => index.h("div", { class: "s-localization-modal-item" }, index.h("input", { class: "s-localization-modal-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, id: 'currency-' + currency.code, value: currency.code }), index.h("div", { class: "s-localization-modal-label-slot", id: "currency-slot", innerHTML: this.currencySlot
+              .replace(/\{name\}/g, currency.name)
+              .replace(/\{code\}/g, currency.code)
+              .replace(/\{country_code\}/g, currency.country_code) }))) :
+          index.h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => index.h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
+        : '', index.h("salla-button", { width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))
+      : ''));
+  }
+  /**
+   * to reduce dom levels we will move slot data into the parent dom
+   */
+  componentDidRender() {
+    this.host.querySelectorAll('#currency-slot').forEach(el => el.replaceWith(el.firstChild));
+    this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
+  }
+  get host() { return index.getElement(this); }
+};
+SallaLocalizationModal.style = sallaLocalizationModalCss;
+
+const sallaLoginModalCss = "";
+
+const SallaLoginModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Does the merchant allow to login using email
+     */
+    this.isEmailAllowed = salla.config.get('store.settings.auth.email_allowed', true);
+    /**
+     * Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
+     */
+    this.isMobileAllowed = salla.config.get('store.settings.auth.mobile_allowed', true);
+    /**
+     * Does the merchant require registration with email & mobile
+     */
+    this.isEmailRequired = salla.config.get('store.settings.auth.is_email_required', false);
+    this.regType = 'phone';
+    this.typing = (e, submitMethod) => {
+      const error = e.target.nextElementSibling;
+      e.target.classList.remove('s-has-error');
+      (error === null || error === void 0 ? void 0 : error.classList.contains('s-login-modal-error-message')) && (error.innerText = '');
+      e.key == 'Enter' && submitMethod();
+    };
+    this.loginBySMS = async () => {
+      const { phone, countryCode } = await this.loginTelInput.getValues();
+      const isPhoneValid = await this.loginTelInput.isValid();
+      if (!isPhoneValid)
+        return;
+      this.login(this.smsBtn, { type: 'mobile', phone: phone, country_code: countryCode });
+    };
+    this.loginByEmail = () => {
+      if (!Helper.Helper.isValidEmail(this.loginEmail.value)) {
+        this.validateField(this.loginEmail, this.emailErrorMsg);
+        return;
+      }
+      this.login(this.emailBtn, { type: 'email', email: this.loginEmail.value });
+    };
+    this.newUser = async () => {
+      var _a;
+      const { phone: regPhone, countryCode } = this.regType == "email" ? await this.regTelInput.getValues() : await this.loginTelInput.getValues(), emailValue = this.regEmail.value || ((_a = this.loginEmail) === null || _a === void 0 ? void 0 : _a.value);
+      await this.newUserValidation();
+      await this.regBtn.load();
+      await this.regBtn.disable();
+      let data = {
+        first_name: this.firstName.value,
+        last_name: this.lastName.value,
+        phone: regPhone || this.loginTelInput.phone,
+        country_code: countryCode,
+        verified_by: this.regType,
+      };
+      emailValue && (data = Object.assign(Object.assign({}, data), { email: emailValue }));
+      this.verifyTab.getCode()
+        .then(code => salla.auth.api.register(Object.assign(Object.assign({}, data), { code })))
+        .then(() => salla.auth.canRedirect && window.location.reload())
+        .catch(() => this.regBtn.stop() && this.regBtn.enable());
+    };
+    this.title = this.host.title || salla.lang.get('blocks.header.login');
+    this.host.removeAttribute('title');
+    salla.lang.onLoaded(() => {
+      var _a, _b, _c, _d;
+      this.title = salla.lang.get('blocks.header.login');
+      this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
+      this.loginText = salla.lang.get('blocks.header.login');
+      this.smsLabel = salla.lang.get('blocks.header.sms');
+      this.mobileLabel = salla.lang.get('common.elements.mobile');
+      this.emailLabel = salla.lang.get('common.elements.email');
+      this.bySMSText = salla.lang.get('blocks.header.login_by_sms');
+      this.byEmailText = salla.lang.get('blocks.header.login_by_email');
+      this.emailErrorMsg = salla.lang.get('common.elements.email_is_valid');
+      this.firstNameLabel = salla.lang.get('blocks.header.your_name');
+      this.lastNameLabel = salla.lang.get('pages.profile.last_name');
+      this.firstNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: this.firstNameLabel });
+      this.lastNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: this.lastNameLabel });
+      (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title);
+      (_b = this.smsBtn) === null || _b === void 0 ? void 0 : _b.setText(salla.lang.get('blocks.header.enter'));
+      (_c = this.emailBtn) === null || _c === void 0 ? void 0 : _c.setText(salla.lang.get('blocks.header.enter'));
+      (_d = this.regBtn) === null || _d === void 0 ? void 0 : _d.setText(salla.lang.get('blocks.header.register'));
+    });
+    salla.auth.event.onVerificationFailed(() => {
+      //
+    });
+    salla.event.on('login::open', (event) => this.open(event));
+    salla.event.on('twilight::initiated', () => {
+      this.isEmailAllowed = salla.config.get('store.settings.auth.email_allowed', !!this.isEmailAllowed);
+      this.isMobileAllowed = salla.config.get('store.settings.auth.mobile_allowed', !!this.isMobileAllowed);
+      this.isEmailRequired = salla.config.get('store.settings.auth.is_email_required', !!this.isEmailRequired);
+    });
+  }
+  /**
+   * @param {CustomEvent|{details:{case:'new_customer'|'authenticated', redirect_url:string|null}}} event
+   */
+  onVerified(event) {
+    var _a, _b;
+    salla.log('verified', event);
+    //there is a case when force login is activated & is new user, it will return case inside error key., so cover it.
+    let verifyCase = ((_a = event.detail) === null || _a === void 0 ? void 0 : _a.data.case) || ((_b = event.detail) === null || _b === void 0 ? void 0 : _b.error.case);
+    if (!verifyCase) {
+      salla.log('verified but without case!');
+      return;
+    }
+    if (verifyCase === "new_customer") {
+      return this.showTab(this.registrationTab);
+    }
+    if (!salla.auth.canRedirect()) {
+      salla.log('Will not auto redirect or reload, due to `salla.auth.canRedirect()`');
+      return;
+    }
+    if (event.detail.data.redirect_url) {
+      return window.location.href = event.data.redirect_url;
+    }
+    window.location.reload();
+  }
+  /**
+   * Open login component
+   */
+  // @ts-ignore
+  async open(event = null) {
+    // if(event && event.hasOwnProperty('isEmailAllowed')){
+    //   this.isEmailAllowed = event?.isEmailAllowed;
+    // }
+    //
+    // if(event && event.hasOwnProperty('isMobileAllowed')){
+    //   this.isMobileAllowed = event?.isMobileAllowed;
+    // }
+    if (this.isEmailAllowed && this.isMobileAllowed) {
+      this.showTab(this.homeTab);
+    }
+    else if (this.isEmailAllowed) {
+      this.showTab(this.emailTab);
+    }
+    else if (this.isMobileAllowed) {
+      this.showTab(this.mobileTab);
+    }
+    return this.modal.open();
+  }
+  showTab(tab, evt) {
+    var _a, _b;
+    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+    let tabs = [this.homeTab, this.mobileTab, this.emailTab, this.verifyTab, this.registrationTab];
+    tabs.map(el => Helper.Helper.toggleElementClassIf(el, 'visible', 's-hidden', () => el == tab));
+    setTimeout(() => tabs.map(el => Helper.Helper.toggleElementClassIf(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
+    //we should have only one salla-login, so it's okay to get it from document
+    //todo:: use better way for resize the modal
+    setTimeout(() => { var _a; return (_a = this.modal.querySelector('.s-login-modal-wrapper')) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
+    if ([this.mobileTab, this.emailTab].includes(tab)) {
+      this.regType = tab === this.mobileTab ? 'phone' : 'email';
+    }
+    let isRegistrationTab = tab == this.registrationTab;
+    (_a = tab.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus(); // focus the first input in tab
+    (_b = this.modal) === null || _b === void 0 ? void 0 : _b.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
+    if (!isRegistrationTab) {
+      Helper.Helper.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-show', () => this.regType === 'phone')
+        .toggleElementClassIf(this.regEmailBlock, 's-hidden', 's-show', () => this.regType === 'email');
+    }
+    return this;
+  }
+  login(btn, data) {
+    btn.load()
+      .then(() => btn.disable())
+      .then(() => salla.auth.api.login(data))
+      .then(() => this.showTab(this.verifyTab))
+      .then(() => this.verifyTab.open(data))
+      .finally(() => btn.stop() && btn.enable());
+  }
+  async newUserValidation() {
+    const isLogByPhone = this.regType == "phone", isLogByEmail = this.regType == "email", emailValue = this.regEmail.value || (isLogByEmail && this.loginEmail.value), isEmailValid = Helper.Helper.isValidEmail(emailValue), isFirstNameValid = this.firstName.value.length > 0, isLastNameValid = this.lastName.value.length > 0, isPhoneValid = await this.regTelInput.isValid() || isLogByPhone && await this.loginTelInput.isValid(), emailValidation = (emailValue && isEmailValid) || (!emailValue && !this.isEmailRequired);
+    if (emailValidation && isPhoneValid && isFirstNameValid && isLastNameValid)
+      return;
+    !isEmailValid && this.validateField(this.regEmail, this.emailErrorMsg);
+    !isFirstNameValid && this.validateField(this.firstName, this.firstNameErrorMsg);
+    !isLastNameValid && this.validateField(this.lastName, this.lastNameErrorMsg);
+    throw ('Please insert required fields');
+  }
+  // eslint-disable-next-line @stencil/own-methods-must-be-private
+  validateField(field, errorMsg) {
+    field.classList.add('s-has-error');
+    field.nextElementSibling['innerText'] = '* ' + errorMsg;
+  }
+  render() {
+    return (index.h("salla-modal", { id: "salla-login", icon: "sicon-user", "modal-title": this.title, ref: modal => this.modal = modal, width: "xs" }, index.h("div", { class: "s-login-modal-wrapper" }, this.isEmailAllowed && this.isMobileAllowed ?
+      index.h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab }, index.h("p", { class: "s-login-modal-sub-title" }, this.loginTypeTitle), index.h("slot", { name: "before-login-type" }), index.h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, index.h("i", { class: "s-login-modal-main-btn-icon sicon-phone" }), index.h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel), index.h("i", { class: "sicon-keyboard_arrow_left arrow" })), index.h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, index.h("i", { class: "s-login-modal-main-btn-icon sicon-mail" }), index.h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel), index.h("i", { class: "sicon-keyboard_arrow_left arrow" })), index.h("slot", { name: "after-login-type" }))
+      : '', this.isMobileAllowed ?
+      index.h("div", { class: "s-login-modal-tab", ref: tab => this.mobileTab = tab }, index.h("slot", { name: "before-login-mobile" }), index.h("label", { class: "s-login-modal-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
+        index.h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, this.byEmailText) : '', index.h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
+      index.h("div", { class: "s-login-modal-tab", ref: tab => this.emailTab = tab }, index.h("slot", { name: "before-login-email" }), index.h("label", { class: "s-login-modal-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" }), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
+        index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, this.bySMSText)
+        : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify", { display: "inline", ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back sicon-arrow-right", slot: "after-footer", href: "#" })), index.h("div", { ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("div", null, index.h("label", { class: "s-login-modal-label" }, this.firstNameLabel), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), index.h("span", { class: "s-login-modal-error-message" })), index.h("div", null, index.h("label", { class: "s-login-modal-label" }, this.lastNameLabel), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), index.h("span", { class: "s-login-modal-error-message" })), index.h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-modal-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-modal-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" })), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
+  }
+  get host() { return index.getElement(this); }
+};
+SallaLoginModal.style = sallaLoginModalCss;
+
 const sallaModalCss = "";
 
 const SallaModal = class {
@@ -339,6 +737,140 @@ const SallaModal = class {
 };
 SallaModal.style = sallaModalCss;
 
+const sallaOfferModalCss = "";
+
+const SallaOfferModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    var _a, _b;
+    this.offer = null;
+    this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
+    this.remember_my_choice = salla.lang.get('commone.remember_my_choice');
+    this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
+    this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
+    Helper.Helper.setHost(this.host);
+    salla.lang.onLoaded(() => {
+      this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
+      this.remember_my_choice = salla.lang.get('common.elements.remember_my_choice');
+      this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
+      this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
+    });
+    this.categorySlot = ((_a = Helper.Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="s-offer-modal-badge-icon sicon-tag"></i><span class="s-offer-modal-badge-text">{name}</span>';
+    this.productSlot = ((_b = Helper.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.');
+        return;
+      }
+      this.open(offer.product_id);
+    });
+  }
+  /**
+   * Show the available offers for the product
+   * @param product_id
+   */
+  async open(product_id) {
+    //TODO:: make sure there is only one offer
+    return salla.product.offers(product_id)
+      .then(response => this.showOffer(response.data[0]));
+  }
+  /**
+   * Show offer details
+   * @param {Offer} offer
+   */
+  async showOffer(offer) {
+    this.offer = offer;
+    this.offer_name = offer.name;
+    this.offer_message = offer.message;
+    this.modal.setTitle(this.offer_name);
+    return this.modal.open();
+  }
+  rememberMe(event) {
+    console.log("🚀 ~ file: salla-offer-modal.tsx ~ line 75 ~ SallaOfferModal ~ rememberMe ~ rememberMe", event);
+    salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);
+  }
+  //todo:: pass event then use sallaButton from it
+  addItem() {
+    // this here, is sallaButton
+    this['load']();
+    return salla.cart.api
+      .quickAdd(this['dataset'].id)
+      .finally(() => this['stop']());
+  }
+  defaultProductSlot() {
+    return '<a href={url} class="s-offer-modal-product-image-wrap"><img class="s-offer-modal-product-image" src="{image}" /></a>' +
+      '<div class="s-offer-modal-product-info">' +
+      '   <a href={url} class="s-offer-modal-product-name">{name}</a>' +
+      '   <div class="s-offer-modal-product-price">{price}</div>' +
+      '</div>';
+  }
+  render() {
+    var _a, _b;
+    return index.h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+      ? [index.h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, index.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 => index.h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot
+              .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 => index.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)) }, index.h("div", { class: "s-offer-modal-btn-wrap" }, index.h("salla-button", { width: "wide", fill: 'outline', "data-id": product.id, disabled: !product.is_available, "loader-position": "center", onClick: this.addItem }, product.is_available ? this.add_to_cart : this.out_of_stock))))), index.h("div", { class: "s-offer-modal-slider-nav" }, index.h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" }, index.h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_left" })), index.h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, index.h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_right" })))), index.h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
+          index.h("p", { class: "s-offer-modal-expiry" }, this.offer_expires_in, " ", this.offer.formatted_date)
+          : '', index.h("label", { class: "s-offer-modal-remember-label" }, index.h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", this.remember_my_choice)),
+      ] : '');
+  }
+  componentDidRender() {
+    // Sooo mini Slider
+    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;
+      console.log('items[0]:', items[0]);
+      let itemSize = items[0].offsetWidth, sliderSize = itemsLength * itemSize, sliderWrapperSize = sliderWrap.offsetWidth, sliderInvisibleSize = sliderSize - sliderWrapperSize, isRTL = document.body.classList.contains('rtl') ? true : false;
+      if (sliderInvisibleSize > sliderNavMargin)
+        nexBtn.classList.add('s-offer-modal-btn-is-active');
+      window.onresize = function () {
+        sliderWrapperSize = sliderWrap.offsetWidth;
+        sliderInvisibleSize = sliderSize - sliderWrapperSize;
+      };
+      slider.addEventListener('scroll', function () {
+        let sliderPosition = Math.abs(slider.scrollLeft);
+        let sliderEndOffset = sliderInvisibleSize - sliderNavMargin;
+        // show & hide the navigation btns depending on scroll position
+        if (sliderPosition <= sliderNavMargin) {
+          nexBtn.classList.add('s-offer-modal-btn-is-active');
+          prevBtn.classList.remove('s-offer-modal-btn-is-active');
+        }
+        else if (sliderPosition < sliderEndOffset) {
+          // show both btns in the middle
+          nexBtn.classList.add('s-offer-modal-btn-is-active');
+          prevBtn.classList.add('s-offer-modal-btn-is-active');
+        }
+        else if (sliderPosition >= sliderEndOffset) {
+          nexBtn.classList.remove('s-offer-modal-btn-is-active');
+          prevBtn.classList.add('s-offer-modal-btn-is-active');
+        }
+      });
+      // Navigation
+      navButtons.forEach(btn => {
+        btn.addEventListener('click', function () {
+          btn.classList.contains('s-offer-modal-next-btn') ? current++ : current--;
+          slider.scrollTo({
+            top: 0,
+            left: itemSize * slidesToScroll * current * (isRTL ? -1 : 1),
+            behavior: 'smooth'
+          });
+        });
+      });
+    }
+  }
+  get host() { return index.getElement(this); }
+};
+SallaOfferModal.style = sallaOfferModalCss;
+
 const sallaProductAvailabilityCss = "";
 
 const SallaProductAvailability = class {
@@ -459,6 +991,237 @@ const SallaProductAvailability = class {
 };
 SallaProductAvailability.style = sallaProductAvailabilityCss;
 
+const sallaRatingModalCss = "";
+
+const SallaRatingModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stepsCount = 0;
+    this.currentIndex = 0;
+    this.submitted = [];
+    /**
+     * The order id, to rate on its products & shipping
+     */
+    this.orderId = salla.config.get('page.id');
+    this.rate_the_store = salla.lang.get('pages.rating.rate_the_store');
+    this.write_store_rate = salla.lang.get('pages.rating.write_store_rate');
+    this.rate_product_stars = salla.lang.get('pages.rating.rate_product_stars');
+    this.write_product_rate = salla.lang.get('pages.rating.write_product_rate');
+    this.rate_shipping = salla.lang.get('pages.rating.rate_shipping');
+    this.write_shipping_rate = salla.lang.get('pages.rating.write_shipping_rate');
+    this.thanks = salla.lang.get('pages.rating.thanks');
+    this.back = salla.lang.get('common.elements.back');
+    this.next = salla.lang.get('common.elements.next');
+    Helper.Helper.setHost(document);
+    salla.event.on('rating::open', () => this.open());
+    salla.lang.onLoaded(() => {
+      this.rate_the_store = salla.lang.get('pages.rating.rate_the_store');
+      this.write_store_rate = salla.lang.get('pages.rating.write_store_rate');
+      this.rate_product_stars = salla.lang.get('pages.rating.rate_product_stars');
+      this.write_product_rate = salla.lang.get('pages.rating.write_product_rate');
+      this.rate_shipping = salla.lang.get('pages.rating.rate_shipping');
+      this.write_shipping_rate = salla.lang.get('pages.rating.write_shipping_rate');
+      this.thanks = salla.lang.get('pages.rating.thanks');
+      this.back = salla.lang.get('common.elements.back');
+      this.next = salla.lang.get('common.elements.next');
+    });
+  }
+  /**
+   * Show the rating modal
+   */
+  async open() {
+    return this.modal.open()
+      .then(() => this.order || 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));
+  }
+  /**
+   * Show the rating modal
+   */
+  async close() {
+    return this.modal.close();
+  }
+  // handle wizard
+  handleWizard() {
+    this.steps = this.modal.querySelectorAll(".s-rating-modal-step");
+    this.dots = this.modal.querySelectorAll(".s-rating-modal-step-dot");
+    this.showActiveStep();
+  }
+  showActiveStep(current = null) {
+    var _a;
+    this.currentTab = current || this.steps[this.currentIndex];
+    Helper.Helper.toggleClassIf('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
+      .toggleClassIf('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
+    if (this.currentIndex != 0) {
+      // the animation
+      Helper.Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
+      setTimeout(() => Helper.Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
+    }
+    // Btn text
+    let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
+    this.nextBtn.setText(nextType ? salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.' + nextType)
+      : salla.lang.get('pages.rating.send_ratings'));
+    setTimeout(() => { var _a; return this.body.setAttribute('style', 'height:' + ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 'px'); });
+  }
+  previousTab() {
+    this.currentIndex > 0 && this.currentIndex--;
+    Helper.Helper.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
+    this.showActiveStep();
+  }
+  submit() {
+    this.submittedBefore() || this.validate();
+    salla.config.canLeave = false;
+    this.nextBtn.load()
+      .then(() => this.submittedBefore() || this.sendFeedback())
+      .then(() => this.currentTab.querySelectorAll('[name],.s-rating-modal-btn-star').forEach(el => el.setAttribute('disabled', '')))
+      .then(() => this.currentIndex < this.stepsCount && this.currentIndex++)
+      .then(() => this.showActiveStep())
+      .then(() => Helper.Helper.toggleClassIf('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
+      .finally(() => {
+      this.nextBtn.stop();
+      salla.config.canLeave = true;
+      this.currentIndex == this.stepsCount && this.showThankYou();
+      this.modal.isClosable = false;
+    });
+  }
+  submittedBefore() {
+    return this.submitted.includes(this.currentIndex);
+  }
+  validate(rating = null, type = null) {
+    if (!rating && this.currentTab.dataset.type == 'products') {
+      return this.currentTab.querySelectorAll('.rating-outer-form').forEach(rating => this.validate(rating, 'product'));
+    }
+    rating = rating || this.currentTab;
+    let stars = rating.querySelector('.rating_hidden_input').value;
+    let comment = rating.querySelector('.s-rating-modal-comment');
+    let validationMessage = rating.querySelector('.s-rating-modal-validation-msg');
+    if (stars && comment.value && comment.value.length > 3) {
+      comment.classList.remove('s-has-error');
+      validationMessage.innerHTML = '';
+      return;
+    }
+    type = type || rating['dataset'].type;
+    Helper.Helper.toggleElementClassIf(comment, 'save', 's-has-error', el => el.value.length > 3);
+    throw validationMessage.innerHTML = stars
+      ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + comment.getAttribute('placeholder'))
+      : salla.lang.get(`pages.rating.rate_${type}_stars`).replace(' (:item)', '');
+  }
+  sendFeedback() {
+    let data = {};
+    this.currentTab.querySelectorAll('[name]').forEach((input) => {
+      //decode names like `<input name="jamal[inner]" value="hi">` to be {name:jamal, value: {inner:"hi"}}
+      let inputData = salla.helpers.inputData(input.name, input.value, data);
+      data[inputData.name] = inputData.value;
+    });
+    if (Object.keys(data).length == 0) {
+      return;
+    }
+    data['order_id'] = this.orderId;
+    data['type'] = this.currentTab.dataset.type;
+    this.submitted.push(this.currentIndex);
+    return salla.rating.api[this.currentTab.dataset.type](data);
+  }
+  showThankYou() {
+    let seconds = 10;
+    let timeToClose = setInterval(() => {
+      this.thanksTime.innerHTML = '00:0' + (seconds--);
+      if (seconds > 0) {
+        return;
+      }
+      clearInterval(timeToClose);
+      this.thanksTime.remove();
+      this.close().then(() => window.location.reload());
+    }, 1000);
+    this.modal.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
+    this.showActiveStep(this.thanksTab);
+  }
+  render() {
+    return (index.h(index.Host, { id: "s-rating" }, index.h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
+      ? [index.h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
+          index.h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" }, index.h("div", { class: "s-rating-modal-rounded-icon" }, index.h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })), index.h("h2", { class: "s-rating-modal-title" }, this.rate_the_store), index.h("div", { class: "s-rating-modal-stars-company" }, index.h("salla-rating-stars", { size: "large" })), index.h("textarea", { id: "storeReview", name: "comment", class: "s-rating-modal-comment", placeholder: this.write_store_rate }), index.h("small", { class: "s-rating-modal-validation-msg" }))
+          : '', this.order.products_enabled
+          ? index.h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products" }, this.order.products.map((item, index$1) => index.h("div", { class: "rating-outer-form s-rating-modal-product", "data-stars-error": this.rate_product_stars }, index.h("div", { class: "s-rating-modal-product-img-wrap" }, index.h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-modal-product-img" })), index.h("div", { class: "s-rating-modal-product-details" }, index.h("h3", { class: "s-rating-modal-product-title" }, " ", item.product.name), index.h("div", { class: "s-rating-modal-stars-product" }, index.h("salla-rating-stars", { size: "small", name: `products[${index$1}][rating]` })), index.h("input", { type: "hidden", name: `products[${index$1}][product_id]`, value: item.product.id }), index.h("textarea", { placeholder: this.write_product_rate, name: `products[${index$1}][comment]`, class: "s-rating-modal-comment" }), index.h("small", { class: "s-rating-modal-validation-msg" })))))
+          : '', this.order.shipping_enabled
+          ? index.h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "shipping" }, index.h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo
+            ? index.h("div", { class: "s-rating-modal-rounded-icon" }, index.h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))
+            : index.h("span", { class: "s-rating-modal-icon sicon-shipping-fast" }), index.h("div", { class: "s-rating-modal-title" }, " ", this.rate_shipping + ' ' + this.order.shipping.company.name), index.h("div", { class: "s-rating-modal-stars-company" }, index.h("salla-rating-stars", { size: "large" })), index.h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: this.write_shipping_rate }), index.h("small", { class: "s-rating-modal-validation-msg" }))
+          : '', index.h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el }, index.h("span", { class: "s-rating-modal-icon sicon-check-circle2" }), index.h("h3", { class: "s-rating-modal-thanks-title" }, this.thanks), index.h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }), index.h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))), index.h("div", { class: "s-rating-modal-footer" }, index.h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, this.back), this.stepsCount > 1 ? index.h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => index.h("li", { class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '', index.h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, this.next)),]
+      : '')));
+  }
+  componentDidLoad() {
+    salla.event.dispatch('rating::ready', this);
+  }
+  get host() { return index.getElement(this); }
+};
+SallaRatingModal.style = sallaRatingModalCss;
+
+const sallaRatingStarsCss = "";
+
+const SallaRatingStars = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.name = 'rating';
+    this.size = 'medium';
+  }
+  initiateRating() {
+    this.host.addEventListener('click', () => {
+      if (!this.startsElem)
+        return;
+      // Get the selected star - activeElement is not supported in safari
+      let activeStars = this.startsElem.querySelectorAll('.s-rating-stars-hovered');
+      let selected = activeStars[activeStars.length - 1];
+      if (!selected)
+        return;
+      let selectedIndex = selected.getAttribute('data-star');
+      this.startsElem.querySelector('.rating_hidden_input').value = selectedIndex;
+      // Loop through each star, and add or remove the `.selected` class to toggle highlighting
+      this.startsElem.querySelectorAll('.s-rating-stars-btn-star')
+        .forEach((star, index) => Helper.Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
+      // update aria-pressed attr status
+      this.startsElem.querySelectorAll('[aria-pressed]').forEach(star => star.removeAttribute('aria-pressed'));
+      selected.setAttribute('aria-pressed', 'true');
+    });
+  }
+  highlightSelectedStars() {
+    var _a, _b;
+    let hoveredClass = 's-rating-stars-hovered', stars = (_a = this.startsElem) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.s-rating-stars-btn-star');
+    stars === null || stars === void 0 ? void 0 : stars.forEach((star, index) => {
+      star.addEventListener('mouseover', () => {
+        for (let i = 0; i <= index; i++) {
+          stars[i].classList.add(hoveredClass);
+        }
+      });
+      star.addEventListener('mouseout', () => star.classList.remove(hoveredClass));
+    });
+    (_b = this.startsElem) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', () => stars.forEach(star => star.classList.remove(hoveredClass)));
+  }
+  createStars(n) {
+    let stars = [];
+    for (let i = 0; i < 5; i++) {
+      stars.push(index.h("span", { class: {
+          's-rating-stars-btn-star sicon-star2': true,
+          ['s-rating-stars-' + this.size]: true,
+          's-rating-stars-selected': i < n
+        } }));
+    }
+    return stars;
+  }
+  render() {
+    return (index.h(index.Host, null, this.value ?
+      index.h("div", { class: "s-rating-stars-wrapper" }, " ", this.createStars(this.value), " ")
+      :
+        index.h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el }, index.h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => index.h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, index.h("i", { class: "sicon-star2" }))))));
+  }
+  componentDidLoad() {
+    this.initiateRating();
+    this.highlightSelectedStars();
+  }
+  get host() { return index.getElement(this); }
+};
+SallaRatingStars.style = sallaRatingStarsCss;
+
 const sallaSearchCss = "";
 
 const SallaSearch = class {
@@ -2031,9 +2794,173 @@ const SallaTelInput = class {
 };
 SallaTelInput.style = sallaTelInputCss;
 
-exports.salla_add_product_button = SallaAddProductButton;
+const sallaVerifyCss = "salla-verify{display:block}";
+
+const SallaVerify = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.verified = index.createEvent(this, "verified", 7);
+    this.initiated = false;
+    /**
+     * Should render component without modal
+     */
+    this.display = 'modal';
+    /**
+     * Verifying method
+     */
+    this.type = 'mobile';
+    /**
+     * should auto reloading the page after success verification
+     */
+    this.autoReload = true;
+    this.resendAfter = 30;
+    /**
+     * to use: `salla.api.auth.verify` or `salla.profile.verify`
+     */
+    this.isProfileVerify = false;
+    // Helper.setHost(this.host);
+    salla.lang.onLoaded(() => {
+      var _a, _b;
+      this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + this.type);
+      (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title);
+      (_b = this.btn) === null || _b === void 0 ? void 0 : _b.setText(salla.lang.get('pages.profile.verify'));
+    });
+    if (this.display == 'inline') {
+      this.modal = { open: () => '', close: () => '', setTitle: () => '' };
+      return;
+    }
+    salla.event.on('profile::verification', data => {
+      var _a;
+      this.isProfileVerify = true;
+      this.open(data);
+      this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + data.type);
+      (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title);
+    });
+    salla.event.on('modalClosed', () => {
+      this.resendAfter = 0;
+      this.timer.innerHTML = '30 : 00';
+    });
+  }
+  /**
+   * Get current code
+   * @return {string}
+   */
+  async getCode() {
+    return this.code.value;
+  }
+  /**
+   * Open verifying modal
+   * @param data
+   */
+  async open(data) {
+    var _a;
+    this.data = data;
+    this.data.type = this.data.type || this.type;
+    this.type = this.data.type;
+    this.resendTimer();
+    this.otpInputs = this.body.querySelectorAll('.s-verify-input');
+    if (!this.initiated) {
+      Helper.Helper.on('input', '.s-verify-input', e => salla.helpers.inputDigitsOnly(e.target));
+      Helper.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.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();
+    // focus the first input after opening the modal
+    setTimeout(() => this.otpInputs[0].focus(), 100);
+  }
+  toggleOTPSubmit() {
+    let otp = [];
+    this.otpInputs.forEach(input => input.value && otp.push(input.value));
+    this.code.value = otp.join('');
+    if (otp.length === 4) {
+      this.btn.removeAttribute('disabled');
+      this.btn.click();
+      return;
+    }
+    this.btn.setAttribute('disabled', '');
+  }
+  reset() {
+    this.otpInputs.forEach((input) => input.value = '');
+    this.code.value = '';
+    this.otpInputs[0].focus();
+  }
+  resendTimer() {
+    Helper.Helper.showElement(this.resendMessage).hideElement(this.resend);
+    this.resendAfter = 30;
+    let timerId = setInterval(() => {
+      if (this.resendAfter <= 0) {
+        clearInterval(timerId);
+        Helper.Helper.hideElement(this.resendMessage).showElement(this.resend);
+      }
+      else {
+        this.timer.innerHTML = `${this.resendAfter >= 10 ? this.resendAfter : '0' + this.resendAfter} : 00`;
+        this.resendAfter--;
+      }
+    }, 1000);
+  }
+  resendCode() {
+    return this.btn.stop()
+      .then(() => this.btn.disable())
+      .then(() => {
+      this.otpInputs.forEach(input => input.value = '');
+      this.otpInputs[0].focus();
+    })
+      .then(() => salla.api.auth.resend(this.data))
+      .finally(() => this.resendTimer());
+  }
+  submit() {
+    let data = Object.assign({ code: this.code.value }, this.data);
+    return this.btn.load()
+      .then(() => this.btn.disable())
+      .then(() => this.isProfileVerify ? salla.profile.verify(data) : salla.auth.verify(data, true))
+      .then(response => this.verified.emit(response))
+      .then(() => this.btn.stop() && this.btn.disable())
+      .then(() => this.modal.close())
+      .then(() => this.autoReload && window.location.reload())
+      .catch(() => this.btn.stop() && this.btn.enable() && this.reset());
+  }
+  render() {
+    return this.display == 'inline' ? index.h(index.Host, null, this.myBody()) :
+      index.h("salla-modal", { icon: "sicon-android-phone", width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, this.myBody());
+  }
+  myBody() {
+    return (index.h("div", { class: "s-verify-body", ref: body => this.body = body }, index.h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), index.h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))), index.h("div", { slot: "footer", class: "s-verify-footer" }, index.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')), index.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), index.h("slot", { name: "after-footer" })));
+  }
+  get host() { return index.getElement(this); }
+};
+SallaVerify.style = sallaVerifyCss;
+
+exports.salla_branches = SallaBranches;
 exports.salla_button = SallaButton;
+exports.salla_infinite_scroll = SallaInfiniteScroll;
+exports.salla_localization_modal = SallaLocalizationModal;
+exports.salla_login_modal = SallaLoginModal;
 exports.salla_modal = SallaModal;
+exports.salla_offer_modal = SallaOfferModal;
 exports.salla_product_availability = SallaProductAvailability;
+exports.salla_rating_modal = SallaRatingModal;
+exports.salla_rating_stars = SallaRatingStars;
 exports.salla_search = SallaSearch;
 exports.salla_tel_input = SallaTelInput;
+exports.salla_verify = SallaVerify;