@salla.sa/twilight-components 1.0.23 → 1.0.24

package/dist/collection/components/salla-localization/salla-localization.js

@@ -1,4 +1,4 @@
-import { Component, Element, h, Method, Prop } from '@stencil/core';
+import { Component, Element, h, Method, State } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 /**
  * @slot header - The top of the modal.
@@ -11,11 +11,13 @@ export class SallaLocalization {
     var _a, _b;
     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');
     Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
+    salla.event.on('languages::translations.loaded', () => {
+      this.languagesTitle = salla.lang.get('common.titles.language');
+      this.currenciesTitle = salla.lang.get('common.titles.currency');
+      this.ok = salla.lang.get('common.elements.ok');
+    });
     /**
      * letting developer to insert his own slot like:
      * <salla-localization>
@@ -53,7 +55,7 @@ export class SallaLocalization {
       .then(() => url && (window.location.href = url));
   }
   render() {
-    return (h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, "modal-width": "xs" },
+    return (h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, width: "xs" },
       h("div", { slot: "header" },
         h("slot", { name: "header" })),
       h("div", { class: "s-localization-inner" },
@@ -92,61 +94,10 @@ export class SallaLocalization {
     this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
   }
   static get is() { return "salla-localization"; }
-  static get properties() { return {
-    "languagesTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "languages-title",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.titles.language')"
-    },
-    "currenciesTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "currencies-title",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.titles.currency')"
-    },
-    "ok": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "ok",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.ok')"
-    }
+  static get states() { return {
+    "languagesTitle": {},
+    "currenciesTitle": {},
+    "ok": {}
   }; }
   static get methods() { return {
     "show": {

package/dist/collection/components/salla-login/salla-login.js

@@ -1,20 +1,78 @@
-import { Component, Element, h, Listen, Method, Prop } from '@stencil/core';
+import { Component, Element, h, Listen, Method, Prop, State } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 export class SallaLogin {
   constructor() {
-    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');
-    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.regType = 'phone';
+    this.typing = (e, submitMethod) => {
+      const error = e.target.nextElementSibling;
+      e.target.classList.remove('s-has-error');
+      (error === null || error === void 0 ? void 0 : error.classList.contains('s-login-error-message')) && (error.innerText = '');
+      e.key == 'Enter' && submitMethod();
+    };
+    this.loginBySMS = async () => {
+      const { phone, countryCode } = await this.loginTelInput.getValues();
+      const isPhoneValid = await this.loginTelInput.isValid();
+      if (!isPhoneValid)
+        return;
+      this.smsBtn.load()
+        .then(() => this.smsBtn.disable())
+        .then(() => salla.auth.api.login({ type: 'mobile', phone: phone, country_code: countryCode }))
+        .then(() => this.smsBtn.stop() && this.smsBtn.enable())
+        .then(() => this.showTab(this.verifyTab))
+        .then(() => this.verifyTab.by = 'sms')
+        .then(() => this.verifyTab.show({ phone: phone, country_code: countryCode }));
+    };
+    this.loginByEmail = () => {
+      if (!Helper.isValidEmail(this.loginEmail.value)) {
+        this.validateField(this.loginEmail, this.isEmailValid);
+        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')
+        .then(() => this.verifyTab.show({ email: this.loginEmail.value }));
+    };
+    this.newUser = async () => {
+      const { phone: regPhone, countryCode, countryKey } = await this.regTelInput.getValues();
+      await this.newUserValidation();
+      await this.regBtn.load();
+      await this.regBtn.disable();
+      this.verifyTab.getCode()
+        .then(code => salla.auth.api.register({
+        first_name: this.firstName.value,
+        last_name: this.lastName.value,
+        phone: regPhone || this.loginTelInput.phone,
+        email: this.regEmail.value || this.loginEmail.value,
+        country_code: countryCode,
+        country_key: countryKey,
+        code: code,
+        verified_by: this.regType,
+      }))
+        .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', () => {
+      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.title = salla.lang.get('blocks.header.login');
+      this.isEmailValid = 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.firstNameRequired = salla.lang.get('common.errors.field_required', { attribute: this.firstNameLabel });
+      this.lastNameRequired = salla.lang.get('common.errors.field_required', { attribute: this.lastNameLabel });
+    });
     salla.auth.event.onVerificationFailed(() => {
       //
     });
@@ -28,7 +86,7 @@ export class SallaLogin {
       return;
     }
     if (event.detail.case === "new_customer") {
-      return this.showTab(this.tab5);
+      return this.showTab(this.registrationTab);
     }
     //TODO::It looks that is this workaround🤔
     if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
@@ -39,21 +97,23 @@ export class SallaLogin {
     }
     window.location.reload();
   }
+  // from salla-verify comp
   onbackClicked() {
-    this.regType == 'phone' ? this.showTab(this.tab2) : this.showTab(this.tab3);
+    this.regType == 'phone' ? this.showTab(this.mobileTab) : this.showTab(this.emailTab);
   }
   async show() {
-    this.showTab(this.isEmailAllowed ? this.tab1 : this.tab2);
+    this.showTab(this.isEmailAllowed ? this.homeTab : this.mobileTab);
     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);
+  showTab(tab, evt) {
+    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+    [this.homeTab, this.mobileTab, this.emailTab, this.verifyTab, this.registrationTab].map(el => Helper.toggleElement(el, 'visible', 'hidden', () => el == tab));
+    setTimeout(() => { [this.homeTab, this.mobileTab, this.emailTab, this.verifyTab, this.registrationTab].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 ? 'phone' : 'email';
+    if ([this.mobileTab, this.emailTab].includes(tab)) {
+      this.regType = tab === this.mobileTab ? 'phone' : 'email';
     }
-    let isRegistrationTab = tab == this.tab5;
+    let isRegistrationTab = tab == this.registrationTab;
     isRegistrationTab && this.firstName.focus();
     this.modal.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
     if (!isRegistrationTab) {
@@ -62,96 +122,62 @@ export class SallaLogin {
     }
     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');
+  async newUserValidation() {
+    const isPhoneReg = this.regType == "phone", isEmailReg = this.regType == "email", isFirstNameValid = this.firstName.value.length > 0, isLastNameValid = this.lastName.value.length > 0, isEmailValid = Helper.isValidEmail(this.regEmail.value || isEmailReg && this.loginEmail.value), isPhoneValid = await this.regTelInput.isValid() || isPhoneReg && await this.loginTelInput.isValid();
+    if (isEmailValid && isPhoneValid && isFirstNameValid && isLastNameValid)
       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 }));
-  }
-  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.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({ phone: phone, country_code: countryCode }));
+    !isEmailValid && this.validateField(this.regEmail, this.isEmailValid);
+    !isFirstNameValid && this.validateField(this.firstName, this.firstNameRequired);
+    !isLastNameValid && this.validateField(this.lastName, this.lastNameRequired);
+    throw ('Please insert required fields');
   }
-  //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 = '';
-  }
-  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: regPhone || this.loginTelInput.phone,
-      email: this.regEmail.value || this.email.value,
-      country_code: countryCode,
-      country_key: countryKey,
-      code: code,
-      verified_by: this.regType,
-    })).then(() => window.location.reload());
+  validateField(field, errorMsg) {
+    field.classList.add('s-has-error');
+    field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
   render() {
-    return (h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" },
+    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-wrapper" },
         this.isEmailAllowed ?
-          h("div", { class: "s-login-tab", ref: tab => this.tab1 = tab },
+          h("div", { class: "s-login-tab", ref: tab => this.homeTab = tab },
             h("p", { class: "s-login-sub-title" }, this.loginTypeTitle),
-            h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab2) },
+            h("a", { href: "#", class: "s-login-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) },
               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("a", { href: "#", class: "s-login-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) },
               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("div", { class: "s-login-tab", ref: tab => this.mobileTab = 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) : ''),
+          h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }),
+          h("salla-button", { wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, this.enterText),
+          this.isEmailAllowed ? h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-link" }, this.byEmailText) : ''),
         this.isEmailAllowed ?
-          h("div", { class: "s-login-tab", ref: tab => this.tab3 = tab },
+          h("div", { class: "s-login-tab", ref: tab => this.emailTab = 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("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), 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("salla-button", { wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, this.enterText),
+            h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText)) : '',
+        h("salla-verify", { "without-modal": true, ref: tab => this.verifyTab = tab, autoReload: false, "is-show-back": true }),
+        h("div", { ref: tab => this.registrationTab = tab },
+          h("label", { class: "s-login-label" }, this.firstNameLabel),
+          h("input", { type: "text", class: "s-login-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-error-message" }),
+          h("label", { class: "s-login-label" }, this.lastNameLabel),
+          h("input", { type: "text", class: "s-login-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-error-message" }),
+          h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" },
             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("salla-tel-input", { phone: '', 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-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("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), 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("salla-button", { wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register'))))));
   }
   static get is() { return "salla-login"; }
   static get originalStyleUrls() { return {
@@ -178,170 +204,24 @@ export class SallaLogin {
       "attribute": "is-email-allowed",
       "reflect": false,
       "defaultValue": "true"
-    },
-    "loginTypeTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "login-type-title",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.select_login_way')"
-    },
-    "loginText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "login-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.login')"
-    },
-    "smsLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "sms-label",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.sms')"
-    },
-    "mobileLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mobile-label",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.mobile')"
-    },
-    "emailLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "email-label",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.email')"
-    },
-    "enterText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "enter-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.enter')"
-    },
-    "bySMSText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "by-s-m-s-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.login_by_sms')"
-    },
-    "byEmailText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "by-email-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.login_by_email')"
-    },
-    "backText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "back-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.back')"
     }
   }; }
+  static get states() { return {
+    "title": {},
+    "loginTypeTitle": {},
+    "loginText": {},
+    "smsLabel": {},
+    "mobileLabel": {},
+    "emailLabel": {},
+    "enterText": {},
+    "bySMSText": {},
+    "byEmailText": {},
+    "isEmailValid": {},
+    "firstNameLabel": {},
+    "lastNameLabel": {},
+    "firstNameRequired": {},
+    "lastNameRequired": {}
+  }; }
   static get methods() { return {
     "show": {
       "complexType": {

package/dist/collection/components/salla-modal/salla-modal.js

@@ -84,7 +84,8 @@ export class SallaModal {
         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-loader-wrap" },
+            h("span", { class: "s-modal-loader" }))
           :
             [h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } },
                 this.isClosable ?
@@ -118,6 +119,12 @@ export class SallaModal {
             ]))));
   }
   static get is() { return "salla-modal"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-modal.css"]
+  }; }
   static get properties() { return {
     "error": {
       "type": "boolean",

package/dist/collection/components/salla-offer/salla-offer.js

@@ -15,7 +15,7 @@ export class SallaOffer {
     this.productSlot = ((_c = Helper.getElement('[slot="product"]')) === null || _c === void 0 ? void 0 : _c.innerHTML) || this.defaultProductSlot();
     salla.offer.event.onExisted(data => {
       //TODO:: use the best, should we hide the offer by product Id or Offer id🤔
-      if (salla.localStore.get('remember-offer-' + data.offer.offer_id)) {
+      if (salla.localData.get('remember-offer-' + data.offer.offer_id)) {
         salla.log('User selected to don\'t show this offer again.');
         return;
       }
@@ -29,7 +29,7 @@ export class SallaOffer {
       .then(response => this.offer = response.data[0]);
   }
   rememberMe(event) {
-    salla.localStore.set('remember-offer-' + this.offer.id, event.target.checked);
+    salla.localData.set('remember-offer-' + this.offer.id, event.target.checked);
   }
   addItem() {
     // this here, is sallaButton