@salla.sa/twilight-components 1.0.21 → 1.0.22

package/dist/{twilight-components/salla-tel-input.entry.js → esm/salla-button_5.entry.js}

@@ -1,44 +1,198 @@
-import { r as registerInstance, h, e as Host } from './index-9c087700.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-a1bf769d.js';
+import { H as Helper } from './Helper-d07ebbc7.js';
+export { S as salla_login } from './salla-login-dd957742.js';
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+const sallaButtonCss = ":host{display:block}";
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
+const SallaButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.btnStyle = 'primary';
+    this.loading = false;
+    this.disabled = false;
+    this.loaderPosition = 'before';
+    this.wide = false;
+    this.hostAttributes = {};
+    //============= Initiate Button Attributes =============//
+    for (let i = 0; i < this.host.attributes.length; i++) {
+      this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+    }
+    this.hostAttributes.type = this.hostAttributes.type || 'button';
+    this.hostAttributes.class += ' s-button-btn btn--has-loading'
+      + ' s-button-' + this.btnStyle
+      + (this.wide ? ' s-button-wide ' : '')
+      + ' loader-' + this.loaderPosition
+      + (this.loaderPosition == 'before' ? ' s-button-loader-after' : '');
+    delete this.hostAttributes['btn-style'];
+    delete this.hostAttributes['id'];
+    if (this.wide) {
+      this.host.classList.add('s-button-wide');
+    }
+  }
+  async load() {
+    if (this.loaderPosition == 'center')
+      this.text.classList.add('s-button-hide');
+    this.host.setAttribute('loading', '');
+    return this.host;
+  }
+  async stop() {
+    this.host.removeAttribute('loading');
+    return this.host;
+  }
+  async disable() {
+    this.host.setAttribute('disabled', '');
+  }
+  async enable() {
+    this.host.removeAttribute('disabled');
+  }
+  handleVisible(newKind, oldKind) {
+    //todo::use united styles
+    this.btn.classList.remove('btn-' + oldKind);
+    this.btn.classList.add('btn-' + newKind);
+  }
+  handleLoading(newVal) {
+    //todo::use united styles
+    Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
+  }
+  render() {
+    return (
+    //TODO:: use HOST then fake button behaviours
+    h(Host, { class: "s-button-host-tag" }, h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), h("span", { class: "s-button-text", ref: el => this.text = el }, h("slot", null)), this.loading ? h("span", { class: {
+        //todo::use united styles
+        's-button-loader': true,
+        's-button-loader-start': this.loaderPosition === 'start',
+        's-button-loader-end': this.loaderPosition === 'end',
+        's-button-loader-center': this.loaderPosition === 'center',
+      } }) : '')));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "btnStyle": ["handleVisible"],
+    "loading": ["handleLoading"]
+  }; }
+};
+SallaButton.style = sallaButtonCss;
+
+const SallaModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.modalOpened = createEvent(this, "modalOpened", 7);
+    this.modalClosed = createEvent(this, "modalClosed", 7);
+    var _a;
+    //todo:: unite three colors (error, success, primary) in one prop
+    this.error = false;
+    this.success = false;
+    this.primary = false;
+    this.isClosable = true;
+    this.width = 'md';
+    this.position = 'middel';
+    this.visible = false;
+    this.isLoading = false;
+    this.subTitleFirst = false;
+    this.subTitle = '';
+    this.icon = '';
+    this.imageIcon = '';
+    Helper.setHost(this.host);
+    salla.event.on('modal::open', btn => btn.dataset.target == this.host.id && this.show());
+    salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
+    this.title = this.host.title;
+    this.host.removeAttribute('title');
+    (_a = Helper.getElement('[slot=body]')) === null || _a === void 0 ? void 0 : _a.classList.add('s-modal-body', 's-modal-' + this.width);
+  }
+  handleVisible(newValue) {
+    if (!newValue) {
+      this.toggleModal(false);
+      this.modalClosed.emit();
+      return;
+    }
+    this.host.classList.remove('hidden');
+    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
+    this.modalOpened.emit();
+  }
+  async show() {
+    this.host.setAttribute('visible', '');
+    return this.host;
+  }
+  async hide() {
+    this.host.removeAttribute('visible');
+    return this.host;
+  }
+  async setTitle(title) {
+    this.title = title;
+    return this.host;
+  }
+  async loading() {
+    this.isLoading = true;
+    return this.host;
+  }
+  async stopLoading() {
+    this.isLoading = false;
+    return this.host;
+  }
+  toggleModal(isOpen) {
+    Helper
+      // .toggleElement(this.host.querySelector('.s-modal-body'), 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElement(this.host.querySelector('[slot=body]') || this.host, 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
+      //todo:: use united class names
+      .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
+    if (!isOpen) {
+      setTimeout(() => this.host.classList.add('hidden'), 350);
+    }
+  }
+  closeModal() {
+    if (!this.isClosable) {
+      return;
+    }
+    this.host.removeAttribute('visible');
+  }
+  //todo:: pref for each modal
+  render() {
+    this.host.id = this.host.id || 'salla-modal';
+    return (
+    //todo:: use suitable class name instead of hidden
+    h(Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-wrapper" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width, slot: "body" }, this.isLoading
+      ? h("span", null, "Loading...")
+      :
+        [h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
+            h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, h("span", { class: "sicon-cancel" }))
+            : '', this.error || this.success || this.icon
+            ? h("div", { class: {
+                's-modal-icon': true,
+                's-modal-bg-error': this.error,
+                's-modal-bg-success': this.success,
+                's-modal-bg-normal': !this.error && !this.success,
+                's-modal-bg-primary': this.primary
+              } }, h("i", { class: {
+                [this.icon]: true,
+                's-modal-text-error': this.error,
+                's-modal-text-success': this.success,
+              } }))
+            : this.imageIcon ?
+              h("img", { class: "s-modal-header-img", src: this.imageIcon })
+              : '', this.title || this.subTitle ?
+            h("div", { class: "s-modal-header-content" }, h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }), h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }))
+            : ''),
+          h("slot", null),
+          h("slot", { name: "footer" })
+        ]))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "visible": ["handleVisible"]
+  }; }
+};
 
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
 		path: basedir,
 		exports: {},
 		require: function (path, base) {
-			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
+			return commonjsRequire();
 		}
 	}, fn(module, module.exports), module.exports;
 }
 
-function getDefaultExportFromNamespaceIfPresent (n) {
-	return n && Object.prototype.hasOwnProperty.call(n, 'default') ? n['default'] : n;
-}
-
-function getDefaultExportFromNamespaceIfNotNamed (n) {
-	return n && Object.prototype.hasOwnProperty.call(n, 'default') && Object.keys(n).length === 1 ? n['default'] : n;
-}
-
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
 function commonjsRequire () {
 	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
@@ -52,9 +206,8 @@ var intlTelInput$1 = createCommonjsModule(function (module) {
 
 // wrap in UMD
 (function(factory) {
-    if ('object' === "object" && module.exports) module.exports = factory(); else window.intlTelInput = factory();
+    if (module.exports) module.exports = factory(); else window.intlTelInput = factory();
 })(function(undefined$1) {
-    "use strict";
     return function() {
         // Array of country objects for the flag dropdown.
         // Here is the criteria for the plugin to support a given country/territory
@@ -82,7 +235,6 @@ var intlTelInput$1 = createCommonjsModule(function (module) {
                 areaCodes: c[4] || null
             };
         }
-        "use strict";
         function _classCallCheck(instance, Constructor) {
             if (!(instance instanceof Constructor)) {
                 throw new TypeError("Cannot call a class as a function");
@@ -1407,11 +1559,161 @@ var intlTelInput = intlTelInput$1;
 const SallaTelInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    console.log(intlTelInput);
+    this.countryCode = "SA";
+    this.countryKey = "+966";
+    Helper.setHost(this.host);
+  }
+  async getValues() {
+    this.phone = this.phoneInput.value;
+    this.countryCode = this.countryCodeInput.value;
+    this.countryKey = this.countryKeyInput.value;
+    return { phone: this.phoneInput.value, countryCode: this.countryCodeInput.value, countryKey: this.countryKeyInput.value };
+  }
+  initTelInput() {
+    salla.document.event.onKeyup('.tel-input', event => salla.helpers.digitsOnly(event.target));
+    document.querySelectorAll('.tel-input').forEach((intlInput) => {
+      salla.helpers.digitsOnly(intlInput);
+      let iti = intlTelInput(intlInput, {
+        initialCountry: intlInput.dataset.code || 'sa',
+        preferredCountries: ['sa', 'ae', 'kw', 'bh', 'qa', 'iq', 'om', 'ye', 'eg', 'jo', 'sy', 'ps', 'sd', 'lb', 'dz', 'tn', 'ma', 'ly'],
+        formatOnDisplay: false,
+        separateDialCode: true,
+        autoPlaceholder: 'aggressive',
+        utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.min.js',
+      });
+      intlInput.addEventListener("countrychange", () => {
+        let data = iti.getSelectedCountryData();
+        this.host.querySelectorAll('.country_code').forEach((input) => input.value = data.iso2.toUpperCase());
+        this.host.querySelectorAll('.country_key').forEach((input) => {
+          input.value = ('+' + data.dialCode).replace('++', '+');
+        });
+      });
+    });
+  }
+  render() {
+    return (h(Host, null, h("input", { type: "tel", name: "mobile", "data-code": this.countryCode, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control  tel-input s-ltr" }), h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" }), h("input", { type: "hidden", name: "country_key", value: this.countryKey, ref: el => this.countryKeyInput = el, class: "country_key" })));
+  }
+  componentDidRender() {
+    this.initTelInput();
+  }
+  get host() { return getElement(this); }
+};
+
+const SallaVerify = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.verified = createEvent(this, "verified", 7);
+    this.backClicked = createEvent(this, "backClicked", 7);
+    this.url = 'profile/verify-mobile';
+    this.by = 'sms';
+    this.autoReload = true;
+    Helper.setHost(this.host);
+    if (this.withoutModal) {
+      this.modal = { show: () => '', hide: () => '' };
+    }
+    else {
+      salla.event.on('profile::verify.mobile', data => this.show(data));
+    }
+  }
+  async getCode() {
+    return this.code.value;
+  }
+  componentDidLoad() {
+    Helper.on('input', '.s-verify-input', e => salla.helpers.digitsOnly(e.target));
+    Helper.onKeyUp('.s-verify-input', event => {
+      var _a, _b, _c, _d;
+      let key = event.keyCode || event.charCode;
+      if (event.target.value) {
+        (_a = event.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = event.target.nextElementSibling) === null || _b === void 0 ? void 0 : _b.select();
+      }
+      else if ([8, 46].includes(key)) {
+        (_c = event.target.previousElementSibling) === null || _c === void 0 ? void 0 : _c.focus();
+        (_d = event.target.previousElementSibling) === null || _d === void 0 ? void 0 : _d.select();
+      }
+      this.toggleOTPSubmit();
+    });
+    Helper.on('paste', '.s-verify-input', event => {
+      let text = event.clipboardData.getData('text').toArabicDigits().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.show();
+  }
+  async show(data) {
+    this.data = data;
+    this.resendTimer();
+    this.otpInputs = document.querySelectorAll('.s-verify-input');
+    this.reset();
+  }
+  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.showElement(this.resendMessage).hideElement(this.resend);
+    let resendAfter = 30;
+    let timerId = setInterval(() => {
+      if (resendAfter === -1) {
+        clearTimeout(timerId);
+        Helper.hideElement(this.resendMessage).showElement(this.resend);
+      }
+      else {
+        this.timer.innerHTML = `${resendAfter >= 10 ? resendAfter : '0' + resendAfter} : 00`;
+        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(Object.assign({ resend_by: this.by }, this.data)))
+      .then(() => this.resendTimer())
+      .catch(() => this.resendTimer());
+  }
+  submit() {
+    return this.btn.load()
+      .then(() => this.btn.disable())
+      .then(() => salla.document.api.request(this.url, Object.assign({ code: this.code.value }, this.data)))
+      .then(response => this.verified.emit(response))
+      .then(() => this.btn.stop() && this.btn.disable())
+      .then(() => this.modal.hide())
+      .then(() => this.autoReload && window.location.reload())
+      .catch(() => this.btn.stop() && this.btn.enable() && this.reset());
   }
   render() {
-    return (h(Host, null, h("slot", null, h("h1", null, "Test Tel Input"))));
+    return this.withoutModal ? this.myBody() :
+      h("salla-modal", { id: "s-verify", ref: modal => this.modal = modal, title: salla.lang.get('pages.profile.verify_title') }, this.myBody());
+  }
+  myBody() {
+    return [
+      h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
+      // <label class="s-verify-label">{salla.lang.get('pages.profile.verify_placeholder')}</label>,
+      h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
+      h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))),
+      h("div", { slot: "footer", class: "s-verify-footer" }, h("salla-button", { class: "s-verify-submit", disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')), this.backText ?
+        h("a", { href: "#", class: "s-verify-resend", onClick: () => this.backClicked.emit() }, this.backText)
+        : '')
+    ];
   }
+  get host() { return getElement(this); }
 };
 
-export { SallaTelInput as salla_tel_input };
+export { SallaButton as salla_button, SallaModal as salla_modal, SallaTelInput as salla_tel_input, SallaVerify as salla_verify };

package/dist/{twilight-components → esm}/salla-localization.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-9c087700.js';
+import { r as registerInstance, h, g as getElement } from './index-a1bf769d.js';
 import { H as Helper } from './Helper-d07ebbc7.js';
 
 const SallaLocalization = class {

package/dist/{twilight-components/salla-login-57b18c2c.js → esm/salla-login-dd957742.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-9c087700.js';
+import { r as registerInstance, h, g as getElement } from './index-a1bf769d.js';
 import { H as Helper } from './Helper-d07ebbc7.js';
 
 const sallaLoginCss = "salla-verify{display:block}";
@@ -6,8 +6,8 @@ const sallaLoginCss = "salla-verify{display:block}";
 const SallaLogin = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.regType = 'sms';
-    this.isLoginByMail = true;
+    this.regType = 'phone';
+    this.isEmailAllowed = true;
     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');
@@ -44,10 +44,10 @@ const SallaLogin = class {
     window.location.reload();
   }
   onbackClicked() {
-    this.regType == 'sms' ? this.showTab(this.tab2) : this.showTab(this.tab3);
+    this.regType == 'phone' ? this.showTab(this.tab2) : this.showTab(this.tab3);
   }
   async show() {
-    this.showTab(this.isLoginByMail ? this.tab1 : this.tab2);
+    this.showTab(this.isEmailAllowed ? this.tab1 : this.tab2);
     return this.modal.show();
   }
   showTab(tab) {
@@ -55,12 +55,13 @@ const SallaLogin = class {
     setTimeout(() => { [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.toggleElement(el, 's-login-active', 's-login-unactive', () => el == tab)); }, 200);
     setTimeout(() => { this.host.querySelector('.s-login-wrapper').setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
     if ([this.tab2, this.tab3].includes(tab)) {
-      this.regType = tab === this.tab2 ? 'sms' : 'email';
+      this.regType = tab === this.tab2 ? 'phone' : 'email';
     }
     let isRegistrationTab = tab == this.tab5;
+    isRegistrationTab && this.firstName.focus();
     this.modal.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
     if (!isRegistrationTab) {
-      Helper.toggleElement(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'sms')
+      Helper.toggleElement(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'phone')
         .toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
     }
     return this;
@@ -78,18 +79,19 @@ const SallaLogin = class {
       .then(() => (this.tab4.by = 'email') && (this.tab4.url = 'auth/email/verify'))
       .then(() => this.tab4.show({ email: this.email.value }));
   }
-  loginBySMS() {
-    if (this.mobile.value.length < 6) {
-      this.mobile.classList.add('s-has-error');
-      this.mobile.nextElementSibling['innerText'] = '* ' + salla.lang.get('mobile_app.strings.incorrect_mobile');
+  async loginBySMS() {
+    const { phone, countryCode } = await this.loginTelInput.getValues();
+    if (phone.length < 6) {
+      this.loginTelInput.classList.add('s-has-error');
+      this.loginTelInput.nextElementSibling['innerText'] = '* ' + salla.lang.get('mobile_app.strings.incorrect_mobile');
       return;
     }
-    this.mobile.nextElementSibling['innerText'] = '';
-    this.mobile.classList.remove('s-has-error');
-    salla.auth.api.login({ type: 'sms', mobile: this.mobile.value })
+    this.loginTelInput.nextElementSibling['innerText'] = '';
+    this.loginTelInput.classList.remove('s-has-error');
+    salla.auth.api.login({ type: 'mobile', phone: phone, country_code: countryCode })
       .then(() => this.showTab(this.tab4))
       .then(() => (this.tab4.by = 'sms') && (this.tab4.url = 'auth/mobile/verify'))
-      .then(() => this.tab4.show({ mobile: this.mobile.value, country_code: 'SA' }));
+      .then(() => this.tab4.show({ phone: phone, country_code: countryCode }));
   }
   //TODO:: if it's enter, go submit
   typing({ target }) {
@@ -97,24 +99,25 @@ const SallaLogin = class {
     target.classList.remove('s-has-error');
     target.nextElementSibling.innerText = '';
   }
-  newUser() {
+  async newUser() {
+    const { phone: regPhone, countryCode, countryKey } = await this.regTelInput.getValues();
     this.tab4.getCode()
       .then(code => salla.auth.api.register({
       first_name: this.firstName.value,
       last_name: this.lastName.value,
-      phone: this.regMobile.value || this.mobile.value,
+      phone: regPhone || this.loginTelInput.phone,
       email: this.regEmail.value || this.email.value,
-      country_code: '',
-      country_key: '',
+      country_code: countryCode,
+      country_key: countryKey,
       code: code,
       verified_by: this.regType,
-    }));
+    })).then(() => window.location.reload());
   }
   render() {
-    return (h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-wrapper" }, this.isLoginByMail ?
+    return (h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-wrapper" }, this.isEmailAllowed ?
       h("div", { class: "s-login-tab", ref: tab => this.tab1 = tab }, h("p", { class: "s-login-sub-title" }, this.loginTypeTitle), h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab2) }, h("i", { class: "s-login-main-btn-icon sicon-phone" }), h("span", { class: "s-login-main-btn-text" }, this.smsLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab3) }, h("i", { class: "s-login-main-btn-icon sicon-mail" }), h("span", { class: "s-login-main-btn-text" }, this.emailLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })))
-      : '', h("div", { class: "s-login-tab", ref: tab => this.tab2 = tab }, h("label", { class: "s-login-label" }, this.mobileLabel), h("salla-tel-input", null), h("input", { onChange: () => this.loginBySMS(), type: "tel", ref: el => this.mobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input  tel-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText), this.isLoginByMail ? h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText) : ''), this.isLoginByMail ?
-      h("div", { class: "s-login-tab", ref: tab => this.tab3 = tab }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { onChange: () => this.loginByEmail(), type: "email", ref: el => this.email = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginByEmail() }, this.enterText), h("a", { href: "#", onClick: () => this.showTab(this.tab2), class: "s-login-link" }, this.bySMSText)) : '', h("salla-verify", { "without-modal": true, ref: tab => this.tab4 = tab, autoReload: false, "back-text": this.backText }), h("div", { ref: tab => this.tab5 = tab }, h("label", { class: "s-login-label" }, salla.lang.get('blocks.header.your_name')), h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, placeholder: salla.lang.get('pages.profile.first_name') }), h("label", { class: "s-login-label" }, salla.lang.get('pages.profile.last_name')), h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, placeholder: salla.lang.get('pages.profile.last_name') }), h("div", { ref: el => this.regMobileBlock = el }, h("label", { class: "s-login-label" }, this.mobileLabel), h("input", { type: "tel", ref: el => this.regMobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" })), h("div", { ref: el => this.regEmailBlock = el }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.regEmail = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" })), h("salla-button", { wide: true, onClick: () => this.newUser() }, salla.lang.get('blocks.header.register'))))));
+      : '', h("div", { class: "s-login-tab", ref: tab => this.tab2 = tab }, h("label", { class: "s-login-label" }, this.mobileLabel), h("salla-tel-input", { phone: '', ref: el => this.loginTelInput = el }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText), this.isEmailAllowed ? h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText) : ''), this.isEmailAllowed ?
+      h("div", { class: "s-login-tab", ref: tab => this.tab3 = tab }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { onChange: () => this.loginByEmail(), type: "email", ref: el => this.email = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginByEmail() }, this.enterText), h("a", { href: "#", onClick: () => this.showTab(this.tab2), class: "s-login-link" }, this.bySMSText)) : '', h("salla-verify", { "without-modal": true, ref: tab => this.tab4 = tab, autoReload: false, "back-text": this.backText }), h("div", { ref: tab => this.tab5 = tab }, h("label", { class: "s-login-label" }, salla.lang.get('blocks.header.your_name')), h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, placeholder: salla.lang.get('pages.profile.first_name') }), h("label", { class: "s-login-label" }, salla.lang.get('pages.profile.last_name')), h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, placeholder: salla.lang.get('pages.profile.last_name') }), h("div", { ref: el => this.regMobileBlock = el }, h("label", { class: "s-login-label" }, this.mobileLabel), h("salla-tel-input", { phone: '', ref: el => this.regTelInput = el }), h("span", { class: "s-login-error-message" })), h("div", { ref: el => this.regEmailBlock = el }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.regEmail = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" })), h("salla-button", { wide: true, onClick: () => this.newUser() }, salla.lang.get('blocks.header.register'))))));
   }
   get host() { return getElement(this); }
 };

package/dist/{twilight-components → esm}/salla-offer.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-9c087700.js';
+import { r as registerInstance, h, g as getElement } from './index-a1bf769d.js';
 import { H as Helper } from './Helper-d07ebbc7.js';
 
 const SallaOffer = class {

package/dist/{twilight-components → esm}/salla-product-availability.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-9c087700.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a1bf769d.js';
 import { H as Helper } from './Helper-d07ebbc7.js';
 
 const SallaProductAvailability = class {