@salla.sa/twilight-components 1.0.16 → 1.0.18

package/dist/twilight-components/{Helper-81ac9a8c.js → Helper-d07ebbc7.js}

@@ -13,7 +13,7 @@ class Helper extends salla.AppHelpers {
     return this.getAttribute(selector, 'value');
   }
   isUser() {
-    return !!salla.config.is_user;
+    return salla.config.get('user.type') === 'user';
   }
 }
 const Helper$1 = new Helper;

package/dist/twilight-components/index.esm.js

@@ -1,4 +1,4 @@
-export { S as SallaLogin } from './salla-login-4d620368.js';
-export { S as SallaSearch } from './salla-search-5338c0a1.js';
+export { S as SallaLogin } from './salla-login-b92c73dc.js';
+export { S as SallaSearch } from './salla-search-69f2d9c1.js';
 import './index-8966d27f.js';
-import './Helper-81ac9a8c.js';
+import './Helper-d07ebbc7.js';

package/dist/twilight-components/salla-branches.entry.js

@@ -25,9 +25,9 @@ const SallaBranches = class {
     };
     this.statusColor = (branch = null) => {
       return branch ?
-        branch.limited ? 'text-red-400' : branch.available ? 'text-green-500' : 'text-gray-400'
+        branch.limited ? 's-branches-color-red' : branch.available ? 's-branches-color-green' : 's-branches-color-gray'
         :
-          this.currentBranch('limited') ? 'text-red-400' : this.currentBranch('available') ? 'text-green-500' : 'text-gray-400';
+          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';
@@ -59,7 +59,7 @@ const SallaBranches = class {
     }, 300);
   }
   render() {
-    return (h("salla-modal", { icon: "sicon-store-alt", 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, "modal-width": "w-116", id: "s-branches-modal", class: "hidden" }, h("fieldset", null, h("h4", { class: "s-branches-title" }, this.formTitle()), h("legend", { class: "s-branches-sr-only" }, this.formTitle()), this.branches.length <= 5 ?
+    return (h("salla-modal", { icon: "sicon-store-alt", 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, "modal-width": "sm", id: "s-branches-modal", class: "hidden" }, h("h4", { class: "s-branches-title" }, this.formTitle()), this.branches.length <= 5 ?
       h("div", { class: "s-branches-space-v" }, this.branches.map((branch) => h("div", { class: "s-branches-input-wrap" }, 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,
@@ -72,8 +72,8 @@ const SallaBranches = class {
         :
           h("span", { class: this.statusColor(branch) }, branch.tag)))))
       :
-        h("select", { class: "s-branches-select", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق'))))), this.isChoiceable() ?
-      h("slot", { name: "footer" }, h("salla-button", { "loader-position": "before", ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit" }, salla.lang.get('common.elements.ok')))
+        h("select", { class: "s-branches-select", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق')))), this.isChoiceable() ?
+      h("slot", { name: "footer" }, h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, salla.lang.get('common.elements.ok')))
       : ''));
   }
   componentDidRender() {

package/dist/twilight-components/salla-button.entry.js

@@ -1,12 +1,12 @@
-import { r as registerInstance, h, g as getElement } from './index-8966d27f.js';
-import { H as Helper } from './Helper-81ac9a8c.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-8966d27f.js';
+import { H as Helper } from './Helper-d07ebbc7.js';
 
 const sallaButtonCss = ":host{display:block}";
 
 const SallaButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.btnStyle = 'primary'; // outline, outline-primary ,danger
+    this.btnStyle = 'primary';
     this.loading = false;
     this.disabled = false;
     this.loaderPosition = 'before';
@@ -17,14 +17,11 @@ const SallaButton = class {
       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 '
-      + 'btn-' + this.btnStyle
+    this.hostAttributes.class += ' s-button-btn btn--has-loading'
+      + ' s-button-' + this.btnStyle
       + (this.wide ? ' s-button-wide ' : '')
-      + 'loader-' + this.loaderPosition
+      + ' loader-' + this.loaderPosition
       + (this.loaderPosition == 'before' ? ' s-button-loader-after' : '');
-    // if(this.hostAttributes.onclick){
-    //   this.hostAttributes.onclick=eval(this.hostAttributes.onclick);
-    // }
     delete this.hostAttributes['btn-style'];
     delete this.hostAttributes['id'];
     if (this.wide) {
@@ -33,7 +30,7 @@ const SallaButton = class {
   }
   async load() {
     if (this.loaderPosition == 'center')
-      this.host.querySelector('.s-button-text').classList.add('s-button-hide');
+      this.text.classList.add('s-button-hide');
     this.host.setAttribute('loading', '');
     return this.host;
   }
@@ -48,19 +45,24 @@ const SallaButton = class {
     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 (h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), h("span", { class: "s-button-text" }, h("slot", null)), this.loading ? h("span", { class: {
-        'loader loader--small s-button-loader': true,
+    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-buton-loader-center': this.loaderPosition === 'center',
-      } }) : ''));
+        's-button-loader-center': this.loaderPosition === 'center',
+      } }) : '')));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/twilight-components/salla-localization.entry.js

@@ -1,13 +1,12 @@
 import { r as registerInstance, h, g as getElement } from './index-8966d27f.js';
-import { H as Helper } from './Helper-81ac9a8c.js';
+import { H as Helper } from './Helper-d07ebbc7.js';
 
 const SallaLocalization = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     var _a, _b;
-    this.language = salla.config.language;
-    this.currency = salla.config.currency;
-    //todo::
+    this.language = salla.config.get('language', {});
+    this.currency = salla.config.get('currency', {});
     this.languagesTitle = salla.lang.get('common.titles.language');
     this.currenciesTitle = salla.lang.get('common.titles.currency');
     this.ok = salla.lang.get('common.elements.ok');
@@ -24,6 +23,8 @@ const SallaLocalization = class {
      */
     this.languageSlot = ((_a = Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-label" for="lang-{code}"><span>{name}</span><div class="s-localization-flag flag iti__flag iti__{country_code}"></div></label>';
     this.currencySlot = ((_b = Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-label" for="currency-{code}"><span>{name}</span><small class="s-localization-currency">{code}</small></label>';
+    this.languages = Object.values(salla.config.get('languages', {}));
+    this.currencies = Object.values(salla.config.get('currencies', {}));
   }
   async show() {
     return this.modal.show();
@@ -31,34 +32,38 @@ const SallaLocalization = class {
   async hide() {
     return this.modal.hide();
   }
+  onChangeCurrency(event) {
+    this.currency = salla.config.get('currencies.' + event.target.value);
+  }
+  onChangeLanguage(event) {
+    this.language = salla.config.get('languages.' + event.target.value);
+  }
   async submit() {
     let url;
+    console.log('this.currency.code::::', this.currency, this.currency.code);
     this.btn.load()
-      .then(() => {
-      if (this.currency && this.currency.code !== salla.config.currency.code) {
-        url = window.location.href;
-        return salla.currency.api.change(this.currency.code);
-      }
-    }).then(() => {
-      if (this.language && this.language.code !== salla.config.language.code) {
-        url = this.language.url;
-      }
-    }).then(() => this.btn.stop())
+      .then(() => this.currency.code === salla.config.get('user.currency') || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
+      .then(() => this.language.code === salla.config.get('user.language') || (url = this.language.url))
+      .then(() => this.btn.stop())
       .then(() => this.hide())
       .then(() => url && (window.location.href = url));
   }
   render() {
-    return (h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal }, h("slot", { name: "header" }, h("div", { slot: "header" })), h("div", { class: "s-localization-inner" }, salla.config.languages
-      ? h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.languagesTitle), h("fieldset", { class: "s-localization-fieldset" }, h("div", { class: "s-localization-section-inner" }, salla.config.languages.map(lang => h("div", { class: "s-localization-item" }, h("input", { class: "s-localization-input", type: "radio", checked: this.language.code == lang.code, onChange: () => this.language = lang, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), h("div", { id: "language-slot", innerHTML: this.languageSlot
-          .replace(/\{name\}/g, lang.name)
-          .replace(/\{code\}/g, lang.code)
-          .replace(/\{country_code\}/g, lang.country_code) }))))))
-      : '', salla.config.currencies
-      ? h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.currenciesTitle), h("fieldset", { class: "s-localization-fieldset" }, h("div", { class: "s-localization-section-inner" }, salla.config.currencies.map(currency => h("div", { class: "s-localization-item" }, h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency.code == currency.code, onChange: () => this.currency = currency, id: 'currency-' + currency.code, value: currency.code }), h("div", { id: "currency-slot", innerHTML: this.currencySlot
-          .replace(/\{name\}/g, currency.name)
-          .replace(/\{code\}/g, currency.code)
-          .replace(/\{country_code\}/g, currency.country_code) }))))))
-      : ''), h("p", { slot: "footer" }, h("slot", { name: "footer" }, h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.ok)))));
+    return (h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, "modal-width": "xs" }, h("div", { slot: "header" }, h("slot", { name: "header" })), h("div", { class: "s-localization-inner" }, this.languages.length > 1 ?
+      h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.languagesTitle), h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
+        this.languages.map(lang => h("div", { class: "s-localization-item" }, h("input", { class: "s-localization-input", type: "radio", checked: this.language.code == lang.code, onChange: () => this.language = lang, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), h("div", { id: "language-slot", innerHTML: this.languageSlot
+            .replace(/\{name\}/g, lang.name)
+            .replace(/\{code\}/g, lang.code)
+            .replace(/\{country_code\}/g, lang.country_code) }))) :
+        h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language.code == lang.code }, lang.name)))))
+      : '', this.currencies.length > 1 ?
+      h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.currenciesTitle), h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
+        this.currencies.map(currency => h("div", { class: "s-localization-item" }, h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency.code == currency.code, onChange: () => this.currency = currency, id: 'currency-' + currency.code, value: currency.code }), h("div", { id: "currency-slot", innerHTML: this.currencySlot
+            .replace(/\{name\}/g, currency.name)
+            .replace(/\{code\}/g, currency.code)
+            .replace(/\{country_code\}/g, currency.country_code) }))) :
+        h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency.code == currency.code }, currency.name)))))
+      : ''), h("slot", { name: "footer" }, h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.ok))));
   }
   /**
    * to reduce dom levels we will move slot data into the parent dom

package/dist/twilight-components/salla-login-7c25f64b.js

@@ -0,0 +1,116 @@
+import { r as registerInstance, h, g as getElement } from './index-8966d27f.js';
+import { H as Helper } from './Helper-d07ebbc7.js';
+
+const SallaLogin = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.regType = 'sms';
+    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.backText = salla.lang.get('common.elements.back');
+    this.title = this.host.title || salla.lang.get('blocks.header.login');
+    this.host.removeAttribute('title');
+    salla.auth.event.onVerificationFailed(() => {
+      //
+    });
+  }
+  /**
+   * @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.tab5);
+    }
+    //TODO::It looks that is this workaround🤔
+    if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
+      return;
+    }
+    if (event.redirect_url) {
+      return window.location.href = event.redirect_url;
+    }
+    window.location.reload();
+  }
+  onModalClose() {
+    this.showTab(this.tab1);
+  }
+  async show() {
+    return this.modal.show();
+  }
+  showTab(tab) {
+    [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.toggleElement(el, 'visible', 'hidden', () => el == tab));
+    if ([this.tab2, this.tab3].includes(tab)) {
+      this.regType = tab === this.tab2 ? 'sms' : 'email';
+    }
+    let isRegistrationTab = tab == this.tab5;
+    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')
+        .toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
+    }
+    return this;
+  }
+  loginByEmail() {
+    if (!Helper.isValidEmail(this.email.value)) {
+      this.email.classList.add('s-has-error');
+      this.email.nextElementSibling['innerText'] = '* ' + salla.lang.get('common.elements.email_is_valid');
+      return;
+    }
+    this.email.nextElementSibling['innerText'] = '';
+    this.email.classList.remove('s-has-error');
+    salla.auth.api.login({ type: 'email', email: this.email.value })
+      .then(() => this.showTab(this.tab4))
+      .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');
+      return;
+    }
+    this.mobile.nextElementSibling['innerText'] = '';
+    this.mobile.classList.remove('s-has-error');
+    salla.auth.api.login({ type: 'sms', mobile: this.mobile.value })
+      .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' }));
+  }
+  //TODO:: if it's enter, go submit
+  typing({ target }) {
+    target.type === 'tel' && salla.helpers.digitsOnly(target);
+    target.classList.remove('s-has-error');
+    target.nextElementSibling.innerText = '';
+  }
+  newUser() {
+    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,
+      email: this.regEmail.value || this.email.value,
+      country_code: '',
+      country_key: '',
+      code: code,
+      verified_by: this.regType,
+    }));
+  }
+  render() {
+    return (h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" }, 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("input", { type: "tel", ref: el => this.mobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText), h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText)), h("div", { class: "s-login-tab", ref: tab => this.tab3 = tab }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { 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 }), h("div", { ref: tab => this.tab5 = tab }, h("label", { class: "s-login-label" }, salla.lang.get('blocks.header.your_name')), h("div", { class: "s-login-input-group" }, h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, placeholder: salla.lang.get('pages.profile.first_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')))));
+  }
+  componentDidRender() {
+    this.showTab(this.tab1);
+  }
+  get host() { return getElement(this); }
+};
+
+export { SallaLogin as S };

package/dist/twilight-components/salla-login-b92c73dc.js

@@ -0,0 +1,127 @@
+import { r as registerInstance, h, g as getElement } from './index-8966d27f.js';
+import { H as Helper } from './Helper-d07ebbc7.js';
+
+const sallaLoginCss = "salla-verify{display:block}";
+
+const SallaLogin = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.inputChanged = (event) => {
+      console.log('input changed: ', event.target.value);
+    };
+    this.regType = 'sms';
+    this.isLoginByMail = 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');
+    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.backText = salla.lang.get('common.elements.back');
+    this.title = this.host.title || salla.lang.get('blocks.header.login');
+    this.host.removeAttribute('title');
+    salla.auth.event.onVerificationFailed(() => {
+      //
+    });
+  }
+  /**
+   * @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.tab5);
+    }
+    //TODO::It looks that is this workaround🤔
+    if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
+      return;
+    }
+    if (event.redirect_url) {
+      return window.location.href = event.redirect_url;
+    }
+    window.location.reload();
+  }
+  onbackClicked() {
+    this.regType == 'sms' ? this.showTab(this.tab2) : this.showTab(this.tab3);
+  }
+  async show() {
+    this.showTab(this.isLoginByMail ? this.tab1 : this.tab2);
+    return this.modal.show();
+  }
+  showTab(tab) {
+    [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.toggleElement(el, 'visible', 'hidden', () => el == tab));
+    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.backText = this.regType == 'sms' ? 'تغيير رقم الهاتف' : 'تغيير البريد';
+    }
+    let isRegistrationTab = tab == this.tab5;
+    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')
+        .toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
+    }
+    return this;
+  }
+  loginByEmail() {
+    if (!Helper.isValidEmail(this.email.value)) {
+      this.email.classList.add('s-has-error');
+      this.email.nextElementSibling['innerText'] = '* ' + salla.lang.get('common.elements.email_is_valid');
+      return;
+    }
+    this.email.nextElementSibling['innerText'] = '';
+    this.email.classList.remove('s-has-error');
+    salla.auth.api.login({ type: 'email', email: this.email.value })
+      .then(() => this.showTab(this.tab4))
+      .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');
+      return;
+    }
+    this.mobile.nextElementSibling['innerText'] = '';
+    this.mobile.classList.remove('s-has-error');
+    salla.auth.api.login({ type: 'sms', mobile: this.mobile.value })
+      .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' }));
+  }
+  //TODO:: if it's enter, go submit
+  typing({ target }) {
+    target.type === 'tel' && salla.helpers.digitsOnly(target);
+    target.classList.remove('s-has-error');
+    target.nextElementSibling.innerText = '';
+  }
+  newUser() {
+    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,
+      email: this.regEmail.value || this.email.value,
+      country_code: '',
+      country_key: '',
+      code: code,
+      verified_by: this.regType,
+    }));
+  }
+  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 ?
+      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("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'))))));
+  }
+  get host() { return getElement(this); }
+};
+SallaLogin.style = sallaLoginCss;
+
+export { SallaLogin as S };

package/dist/twilight-components/salla-login.entry.js

@@ -1,2 +1,3 @@
-export { S as salla_login } from './salla-login-4d620368.js';
+export { S as salla_login } from './salla-login-b92c73dc.js';
 import './index-8966d27f.js';
+import './Helper-d07ebbc7.js';

package/dist/twilight-components/salla-modal.entry.js

@@ -1,17 +1,20 @@
 import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-8966d27f.js';
-import { H as Helper } from './Helper-81ac9a8c.js';
+import { H as Helper } from './Helper-d07ebbc7.js';
 
 const SallaModal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.ready = createEvent(this, "ready", 7);
-    this.close = createEvent(this, "close", 7);
+    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.modalWidth = 'w-96'; //todo use friendly names
+    this.width = 'md';
     this.visible = false;
+    this.isLoading = false;
     this.subTitleFirst = false;
     this.subTitle = '';
     this.icon = '';
@@ -21,17 +24,17 @@ const SallaModal = class {
     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');
+    (_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.close.emit();
+      this.modalClosed.emit();
       return;
     }
     this.host.classList.remove('hidden');
     setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
-    this.ready.emit();
+    this.modalOpened.emit();
   }
   async show() {
     this.host.setAttribute('visible', '');
@@ -45,10 +48,20 @@ const SallaModal = class {
     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]'), 's-modal-entering', 's-modal-leaving', () => 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);
@@ -63,24 +76,33 @@ const SallaModal = class {
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
-    return (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" }, "\u200B"), h("slot", { name: "body" }, h("div", { class: 's-modal-body ' + this.modalWidth }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
-      h("button", { class: "s-modal-close cursor-pointer", 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
-        } }, 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" }))))));
+    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" }, "\u200B"), h("slot", { name: "body" }, h("div", { class: 's-modal-body ' + '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 ?
+          //todo:: remove cursor-pointer
+          h("button", { class: "s-modal-close cursor-pointer", 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 {