@salla.sa/twilight-components 1.0.100 → 1.0.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "1.0.100",
+  "version": "1.0.107",
   "license": "MIT",
   "author": "Salla Team <support@salla.dev> (https://salla.dev)",
   "bugs": {
@@ -36,7 +36,10 @@
     "build": "stencil build",
     "docs": "stencil build --docs",
     "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
+    "watch": "npm run start",
+    "test": "stencil test --spec --coverage -- salla-verify",
+    "test.spec": "stencil test --spec",
+    "test.e2e": "stencil test --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "lint": "eslint src/**/*{.ts,.tsx}",
@@ -46,35 +49,35 @@
     "ci:build": "stencil build --ci",
     "ci:test": "stencil test --spec",
     "prerender": "stencil build --prerender",
-    "prepublishOnly": "npm run build && node ./publish.js",
-    "tailwind": "node src/plugins/tailwind-theme/generator.js"
+    "prepublishOnly": "npm run build && npm run tailwind && node ./publish.js",
+    "tailwind": "node src/plugins/tailwind-theme/generator.js && tailwindcss -i ./src/global/app.scss -o ./example/assets/tailwind.css"
   },
   "devDependencies": {
     "@compodoc/compodoc": "^1.1.14",
     "@stencil/core": "^2.13.0",
-    "@stencil/eslint-plugin": "^0.3.1",
+    "@stencil/postcss": "^2.1.0",
     "@stencil/react-output-target": "^0.1.0",
     "@stencil/sass": "1.4.1",
     "@stencil/vue-output-target": "^0.5.1",
     "@types/jest": "^27.0.3",
+    "@types/puppeteer": "3.0.2",
     "jest": "^27.4.5",
     "jest-cli": "^27.4.5",
-    "puppeteer": "^10.0.0",
-    "@types/puppeteer": "3.0.2",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-react": "^7.26.0",
     "lodash": "^4.17.21",
     "prettier": "^2.4.1",
     "promisify-child-process": "^3.1.4",
-    "tailwindcss": "^2.2.19",
+    "puppeteer": "^10.0.0",
+    "rollup-plugin-node-polyfills": "^0.2.1",
+    "stencil-tailwind-plugin": "^1.4.1",
+    "tailwindcss": "^3.0.0",
+    "tailwindcss-rtl": "^0.9.0",
     "typescript": "^4.4.3"
   },
   "dependencies": {
-    "@salla.sa/twilight": "^2.0.162",
+    "@salla.sa/twilight": "~2.0",
+    "@salla.sa/twilight-tailwind-theme": "^1.0.122",
     "@stencil/core": "^2.13.0",
+    "form-data": "^4.0.0",
     "intl-tel-input": "^17.0.13",
     "module-alias": "^2.2.2",
     "store": "^2.0.12"

package/dist/cjs/salla-branches.cjs.entry.js

@@ -1,94 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-3771e52a.js');
-
-const sallaBranchesCss = "";
-
-const SallaBranches = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.open = false;
-    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')); });
-  }
-  //todo:: add description for all @methods
-  async show() {
-    return this.modal.open();
-  }
-  async hide() {
-    return this.modal.close();
-  }
-  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("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 (!this.isOpenedBefore && this.displayAs == 'popup') {
-      this.show();
-    }
-  }
-  get host() { return index.getElement(this); }
-};
-SallaBranches.style = sallaBranchesCss;
-
-exports.salla_branches = SallaBranches;

package/dist/cjs/salla-infinite-scroll.cjs.entry.js

@@ -1,93 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-3771e52a.js');
-const Helper = require('./Helper-8ae6a805.js');
-
-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;
-
-exports.salla_infinite_scroll = SallaInfiniteScroll;

package/dist/cjs/salla-localization-modal.cjs.entry.js

@@ -1,120 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-3771e52a.js');
-const Helper = require('./Helper-8ae6a805.js');
-
-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://intl-tel-input.com/node_modules/intl-tel-input/build/img/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://intl-tel-input.com/node_modules/intl-tel-input/build/img/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() {
-    return 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: "currency", 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;
-
-exports.salla_localization_modal = SallaLocalizationModal;

package/dist/cjs/salla-login-modal.cjs.entry.js

@@ -1,196 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-3771e52a.js');
-const Helper = require('./Helper-8ae6a805.js');
-
-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', () => this.open());
-    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
-   */
-  async open() {
-    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-modal-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;
-
-exports.salla_login_modal = SallaLoginModal;