@salla.sa/twilight-components 1.0.58 → 1.0.61

package/package.json

@@ -1,22 +1,27 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "1.0.58",
+  "version": "1.0.61",
   "license": "MIT",
+  "author": "Salla Team <support@salla.dev> (https://salla.dev)",
+  "bugs": {
+    "url": "https://github.com/sallaapp/twilight-components",
+    "email": "support@salla.dev"
+  },
   "keywords": [
     "twilight",
     "Salla",
-    "Salla-web-component",
-    "Salla app"
+    "Salla theme",
+    "Salla-web-component"
   ],
   "description": "Salla Web Component",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
   "es2017": "dist/esm/index.mjs",
-  "types": "dist/types/index.d.ts",
+  "types": "dist/types/components.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/atoms/atoms.js",
+  "unpkg": "dist/twilight-components/twilight-components.esm.js",
   "files": [
     "dist/",
     "loader/",
@@ -46,30 +51,32 @@
   },
   "devDependencies": {
     "@compodoc/compodoc": "^1.1.14",
-    "@stencil/core": "2.8.1",
+    "@stencil/core": "^2.13.0",
     "@stencil/eslint-plugin": "^0.3.1",
     "@stencil/react-output-target": "^0.1.0",
     "@stencil/sass": "1.4.1",
     "@stencil/vue-output-target": "^0.5.1",
-    "@types/jest": "26.0.15",
+    "@types/jest": "^27.0.3",
+    "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",
-    "jest": "26.6.1",
-    "jest-cli": "26.6.1",
     "lodash": "^4.17.21",
     "prettier": "^2.4.1",
     "promisify-child-process": "^3.1.4",
-    "puppeteer": "^5.4.1",
     "tailwindcss": "^2.2.19",
     "typescript": "^4.4.3"
   },
   "dependencies": {
     "@salla.sa/twilight": "^2.0.162",
+    "@stencil/core": "^2.13.0",
     "intl-tel-input": "^17.0.13",
+    "module-alias": "^2.2.2",
     "store": "^2.0.12"
   }
 }

package/dist/cjs/salla-login-modal-02e4e65e.js

@@ -1,204 +0,0 @@
-'use strict';
-
-const index = require('./index-0b5b5867.js');
-const Helper = require('./Helper-98cc9f18.js');
-
-const sallaLoginModalCss = "[dir=ltr] #salla-login .s-login-modal-main-btn .arrow{display:inline-block;transform:scale(-1)}";
-
-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';
-    //TODO:: any salla-button, text should updated by this.btn?.setText(newText)
-    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.enterText = salla.lang.get('blocks.header.enter');
-    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 });
-    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 { mobile, countryCode } = await this.loginTelInput.getValues();
-      const isPhoneValid = await this.loginTelInput.isValid();
-      if (!isPhoneValid)
-        return;
-      this.smsBtn.load()
-        .then(() => this.smsBtn.disable())
-        .then(() => salla.auth.api.login({ type: 'mobile', phone: mobile, country_code: countryCode }))
-        .then(() => this.smsBtn.stop() && this.smsBtn.enable())
-        .then(() => this.showTab(this.verifyTab))
-        .then(() => (this.verifyTab.by = 'sms') && (this.verifyTab.url = 'auth/mobile/verify'))
-        .then(() => this.verifyTab.show({ phone: mobile, country_code: countryCode }));
-    };
-    this.loginByEmail = () => {
-      if (!Helper.Helper.isValidEmail(this.loginEmail.value)) {
-        this.validateField(this.loginEmail, this.emailErrorMsg);
-        return;
-      }
-      this.emailBtn.load()
-        .then(() => this.emailBtn.disable())
-        .then(() => salla.auth.api.login({ type: 'email', email: this.loginEmail.value }))
-        .then(() => this.emailBtn.stop() && this.emailBtn.enable())
-        .then(() => this.showTab(this.verifyTab))
-        .then(() => (this.verifyTab.by = 'email') && (this.verifyTab.url = 'auth/email/verify'))
-        .then(() => this.verifyTab.show({ email: this.loginEmail.value }));
-    };
-    this.newUser = async () => {
-      var _a;
-      const { mobile: regPhone, countryCode, countryKey } = 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.mobile,
-        country_code: countryCode,
-        country_key: countryKey,
-        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(() => 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.event.on('languages::translations.loaded', () => {
-      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::show', () => this.show());
-    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) {
-    if (!event.detail.case) {
-      console.log('verified but without case!');
-      return;
-    }
-    if (event.detail.case === "new_customer") {
-      return this.showTab(this.registrationTab);
-    }
-    //TODO::It looks that this is a workaround for something, so needs to be enhanced🤔
-    if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
-      return;
-    }
-    if (event.redirect_url) {
-      return window.location.href = event.redirect_url;
-    }
-    window.location.reload();
-  }
-  /**
-   * Show login component
-   */
-  async show() {
-    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.show();
-  }
-  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);
-    setTimeout(() => this.host.querySelector('.s-login-modal-wrapper').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;
-    isRegistrationTab && ((_a = this.firstName) === null || _a === void 0 ? void 0 : _a.focus());
-    (_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-block', () => this.regType === 'phone')
-        .toggleElementClassIf(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
-    }
-    return this;
-  }
-  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", 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-modal", { withoutModal: true, 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("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("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.SallaLoginModal = SallaLoginModal;

package/dist/cjs/salla-search-9d17eb96.js

@@ -1,90 +0,0 @@
-'use strict';
-
-const index = require('./index-0b5b5867.js');
-const Helper = require('./Helper-98cc9f18.js');
-
-const sallaSearchCss = "#s-search-modal .s-search-inline{border:1px solid #eee}#s-search-modal .s-search-no-results .s-search-input,#s-search-modal .s-search-container-open .s-search-input{border-bottom:1px solid #f4f4f5}#s-search-modal .s-search-product-image[src=null]{opacity:0}#s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}#s-search-modal .s-modal-spacer{display:inline}#s-search-modal .s-modal-body{padding:0;max-width:90%;margin-top:3.2rem;border-radius:0.5rem;background:transparent;overflow:visible}#s-search-modal .s-modal-close{top:50%;transform:translateY(-50%)}";
-
-const SallaSearch = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    var _a;
-    this.inputValue = '';
-    this.inline = false;
-    this.oval = false;
-    this.height = 60;
-    Helper.Helper.setHost(this.host);
-    this.productSlot = ((_a = Helper.Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
-    salla.event.on('search::show', () => this.modal.show());
-    salla.event.on('languages::translations.loaded', () => {
-      this.placeholder = salla.lang.get('blocks.header.search_placeholder');
-      this.noResultsText = salla.lang.get('common.elements.no_options');
-    });
-  }
-  onModalOpen() {
-    this.modal.querySelector('.s-search-input').focus();
-  }
-  onModalClose() {
-    this.modal.querySelector('.s-search-input').value = '';
-    this.results = undefined;
-    this.afterSearching();
-    this.container.classList.remove('s-search-no-results');
-  }
-  getDefaultProductSlot() {
-    return '<div class="s-search-product-image-container">' +
-      '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
-      '</div>' +
-      '<div class="s-search-product-details">' +
-      '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price}</div>' +
-      '</div>';
-  }
-  //todo:: reset data when closing
-  search(e) {
-    this.inputValue = e.target.value;
-    Helper.Helper.hideElement(this.noResults);
-    if (e.target.value.length === 0) {
-      this.results = undefined;
-      this.afterSearching();
-      return;
-    }
-    if (e.target.value.length <= 2) {
-      return;
-    }
-    //run loading spinner or stop it
-    Helper.Helper.toggleElementClassIf(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
-    salla.search.api.search(e.target.value)
-      .then(response => this.results = response)
-      .catch(err => err !== 'Query Same As Previous!' ? this.results = undefined : null)
-      .finally(() => this.afterSearching(/*isEmpty*/ false));
-  }
-  afterSearching(isEmpty = true) {
-    var _a;
-    this.noResults.style.display = isEmpty || ((_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length) > 0 ? 'none' : 'block';
-    Helper.Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; })
-      .toggleElementClassIf(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
-    salla.search.api.previousQuery = ''; //avoid having error 'Query Same As Previous' after reopen modal;
-    this.inputValue.length == 0 ? this.container.classList.remove('s-search-no-results') : '';
-  }
-  render() {
-    var _a;
-    const searchContent = index.h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container, style: this.oval ? { borderRadius: this.height / 2 + 'px' } : {} }, index.h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e), style: { height: this.height + 'px' } }), index.h("span", { class: "s-search-icon-wrap" }, index.h("i", { class: "s-search-icon sicon-search", ref: el => this.searchIcon = el })), index.h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
-      _a.data.map(item => index.h("a", { href: item.url, class: "s-search-product", innerHTML: this.productSlot
-          .replace(/\{name\}/g, item.name)
-          .replace(/\{price\}/g, item.price) //todo:: get discounted price too
-          .replace(/\{image\}/g, item.image_url) })), index.h("p", { ref: el => this.noResults = el, class: "s-search-no-results-placeholder" }, this.noResultsText)));
-    return (this.inline ?
-      index.h("div", { id: "s-search-modal" }, searchContent)
-      :
-        index.h("salla-modal", { position: "top", id: "s-search-modal", ref: modal => this.modal = modal }, searchContent));
-  }
-  /**
-   * Run it one time after load
-   */
-  componentDidLoad() {
-    this.afterSearching();
-  }
-  get host() { return index.getElement(this); }
-};
-SallaSearch.style = sallaSearchCss;
-
-exports.SallaSearch = SallaSearch;

package/dist/esm/salla-login-modal-7ad386c8.js

@@ -1,202 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-8b97d225.js';
-import { H as Helper } from './Helper-7162a06c.js';
-
-const sallaLoginModalCss = "[dir=ltr] #salla-login .s-login-modal-main-btn .arrow{display:inline-block;transform:scale(-1)}";
-
-const SallaLoginModal = class {
-  constructor(hostRef) {
-    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';
-    //TODO:: any salla-button, text should updated by this.btn?.setText(newText)
-    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.enterText = salla.lang.get('blocks.header.enter');
-    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 });
-    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 { mobile, countryCode } = await this.loginTelInput.getValues();
-      const isPhoneValid = await this.loginTelInput.isValid();
-      if (!isPhoneValid)
-        return;
-      this.smsBtn.load()
-        .then(() => this.smsBtn.disable())
-        .then(() => salla.auth.api.login({ type: 'mobile', phone: mobile, country_code: countryCode }))
-        .then(() => this.smsBtn.stop() && this.smsBtn.enable())
-        .then(() => this.showTab(this.verifyTab))
-        .then(() => (this.verifyTab.by = 'sms') && (this.verifyTab.url = 'auth/mobile/verify'))
-        .then(() => this.verifyTab.show({ phone: mobile, country_code: countryCode }));
-    };
-    this.loginByEmail = () => {
-      if (!Helper.isValidEmail(this.loginEmail.value)) {
-        this.validateField(this.loginEmail, this.emailErrorMsg);
-        return;
-      }
-      this.emailBtn.load()
-        .then(() => this.emailBtn.disable())
-        .then(() => salla.auth.api.login({ type: 'email', email: this.loginEmail.value }))
-        .then(() => this.emailBtn.stop() && this.emailBtn.enable())
-        .then(() => this.showTab(this.verifyTab))
-        .then(() => (this.verifyTab.by = 'email') && (this.verifyTab.url = 'auth/email/verify'))
-        .then(() => this.verifyTab.show({ email: this.loginEmail.value }));
-    };
-    this.newUser = async () => {
-      var _a;
-      const { mobile: regPhone, countryCode, countryKey } = 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.mobile,
-        country_code: countryCode,
-        country_key: countryKey,
-        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(() => 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.event.on('languages::translations.loaded', () => {
-      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::show', () => this.show());
-    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) {
-    if (!event.detail.case) {
-      console.log('verified but without case!');
-      return;
-    }
-    if (event.detail.case === "new_customer") {
-      return this.showTab(this.registrationTab);
-    }
-    //TODO::It looks that this is a workaround for something, so needs to be enhanced🤔
-    if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
-      return;
-    }
-    if (event.redirect_url) {
-      return window.location.href = event.redirect_url;
-    }
-    window.location.reload();
-  }
-  /**
-   * Show login component
-   */
-  async show() {
-    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.show();
-  }
-  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.toggleElementClassIf(el, 'visible', 's-hidden', () => el == tab));
-    setTimeout(() => tabs.map(el => Helper.toggleElementClassIf(el, 's-login-modal-active', 's-login-modal-unactive', () => el == tab)), 200);
-    setTimeout(() => this.host.querySelector('.s-login-modal-wrapper').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;
-    isRegistrationTab && ((_a = this.firstName) === null || _a === void 0 ? void 0 : _a.focus());
-    (_b = this.modal) === null || _b === void 0 ? void 0 : _b.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
-    if (!isRegistrationTab) {
-      Helper.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'phone')
-        .toggleElementClassIf(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
-    }
-    return this;
-  }
-  async newUserValidation() {
-    const isLogByPhone = this.regType == "phone", isLogByEmail = this.regType == "email", emailValue = this.regEmail.value || (isLogByEmail && this.loginEmail.value), isEmailValid = 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 (h("salla-modal", { id: "salla-login", icon: "sicon-user", title: this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-modal-wrapper" }, this.isEmailAllowed && this.isMobileAllowed ?
-      h("div", { class: "s-login-modal-tab", ref: tab => this.homeTab = tab }, h("p", { class: "s-login-modal-sub-title" }, this.loginTypeTitle), h("slot", { name: "before-login-type" }), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, h("i", { class: "s-login-modal-main-btn-icon sicon-phone" }), h("span", { class: "s-login-modal-main-btn-text" }, this.smsLabel), h("i", { class: "sicon-keyboard_arrow_left arrow" })), h("a", { href: "#", class: "s-login-modal-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, h("i", { class: "s-login-modal-main-btn-icon sicon-mail" }), h("span", { class: "s-login-modal-main-btn-text" }, this.emailLabel), h("i", { class: "sicon-keyboard_arrow_left arrow" })), h("slot", { name: "after-login-type" }))
-      : '', this.isMobileAllowed ?
-      h("div", { class: "s-login-modal-tab", ref: tab => this.mobileTab = tab }, h("slot", { name: "before-login-mobile" }), h("label", { class: "s-login-modal-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
-        h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, this.byEmailText) : '', h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
-      h("div", { class: "s-login-modal-tab", ref: tab => this.emailTab = tab }, h("slot", { name: "before-login-email" }), h("label", { class: "s-login-modal-label" }, this.emailLabel), 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" }), h("span", { class: "s-login-modal-error-message" }), h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
-        h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, this.bySMSText) : '', h("slot", { name: "after-login-email" })) : '', h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false }, h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })), h("div", { ref: tab => this.registrationTab = tab }, h("slot", { name: "before-registration" }), h("label", { class: "s-login-modal-label" }, this.firstNameLabel), 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') }), h("span", { class: "s-login-modal-error-message" }), h("label", { class: "s-login-modal-label" }, this.lastNameLabel), 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') }), h("span", { class: "s-login-modal-error-message" }), h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-modal-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-modal-label" }, this.emailLabel), 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" }), h("span", { class: "s-login-modal-error-message" })), h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), h("slot", { name: "after-registration" })))));
-  }
-  get host() { return getElement(this); }
-};
-SallaLoginModal.style = sallaLoginModalCss;
-
-export { SallaLoginModal as S };