@salla.sa/twilight-components 1.0.22 → 1.0.24

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaLogin = require('./salla-login-c438bb35.js');
-const sallaSearch = require('./salla-search-45173394.js');
+const sallaLogin = require('./salla-login-c74587ef.js');
+const sallaSearch = require('./salla-search-eb0112c0.js');
 require('./index-714023c8.js');
 require('./Helper-fcea994c.js');
 

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["salla-button_5.cjs",[[0,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"loginTypeTitle":[1,"login-type-title"],"loginText":[1,"login-text"],"smsLabel":[1,"sms-label"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"enterText":[1,"enter-text"],"bySMSText":[1,"by-s-m-s-text"],"byEmailText":[1,"by-email-text"],"backText":[1,"back-text"],"show":[64]},[[0,"verified","onVerified"],[0,"backClicked","onbackClicked"]]],[0,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[1],"by":[1],"backText":[1,"back-text"],"autoReload":[4,"auto-reload"],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"phone":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"getValues":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-localization.cjs",[[4,"salla-localization",{"languagesTitle":[1,"languages-title"],"currenciesTitle":[1,"currencies-title"],"ok":[1],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"show":[64]}]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"buttonText":[1,"button-text"],"countryCode":[1,"country-code"],"subscribeText":[1,"subscribe-text"],"cancelText":[1,"cancel-text"],"subTitle":[1,"sub-title"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"mobilePlaceholder":[1,"mobile-placeholder"],"emailPlaceholder":[1,"email-placeholder"],"productId":[2,"product-id"],"subscribedMessage":[1,"subscribed-message"],"isSubscribed":[1028,"is-subscribed"],"submit":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"order":[32],"show":[64],"hide":[64]}]]],["salla-search.cjs",[[0,"salla-search",{"placeholder":[1],"noResultsText":[1,"no-results-text"],"results":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]]]]], options);
+  return index.bootstrapLazy([["salla-button_5.cjs",[[0,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"isEmailValid":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameRequired":[32],"lastNameRequired":[32],"show":[64]},[[0,"verified","onVerified"],[0,"backClicked","onbackClicked"]]],[0,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"isShowBack":[4,"is-show-back"],"autoReload":[4,"auto-reload"],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"phone":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"invalidNumber":[32],"invalidCountryCode":[32],"tooShort":[32],"tooLong":[32],"mobileLabel":[32],"mobileRequired":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"ok":[32],"show":[64],"hide":[64]}]]],["salla-localization.cjs",[[4,"salla-localization",{"languagesTitle":[32],"currenciesTitle":[32],"ok":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"show":[64]}]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"buttonText":[1,"button-text"],"countryCode":[1,"country-code"],"subscribeText":[1,"subscribe-text"],"cancelText":[1,"cancel-text"],"subTitle":[1,"sub-title"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"mobilePlaceholder":[1,"mobile-placeholder"],"emailPlaceholder":[1,"email-placeholder"],"productId":[2,"product-id"],"subscribedMessage":[1,"subscribed-message"],"isSubscribed":[1028,"is-subscribed"],"submit":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"order":[32],"show":[64],"hide":[64]}]]],["salla-search.cjs",[[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]]]]], options);
   });
 };
 

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

@@ -42,6 +42,9 @@ const SallaBranches = class {
         : 'التسوق من فرع آخر';
     };
     salla.event.on('branches::show', () => this.show());
+    salla.event.on('languages::translations.loaded', () => {
+      this.ok = salla.lang.get('common.elements.ok');
+    });
   }
   async show() {
     return this.modal.show();
@@ -63,7 +66,7 @@ const SallaBranches = class {
     }, 300);
   }
   render() {
-    return (index.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": "xs", id: "s-branches-modal", class: "hidden" }, index.h("h4", { class: "s-branches-title" }, this.formTitle()), this.branches.length <= 5 ?
+    return (index.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, width: "sm", id: "s-branches-modal", class: "hidden" }, index.h("h4", { class: "s-branches-title" }, this.formTitle()), this.branches.length <= 5 ?
       index.h("div", { class: "s-branches-space-v" }, this.branches.map((branch) => index.h("div", { class: "s-branches-input-wrap" }, index.h("input", { id: this.position + '_branch_' + branch.id, disabled: !branch.open && this.isChoiceable(), name: "lang", type: "radio", value: branch.id, onChange: (event) => this.handelChange(event), class: {
           's-branches-input': true,
           'opacity-50': !branch.open,
@@ -77,7 +80,7 @@ const SallaBranches = class {
           index.h("span", { class: this.statusColor(branch) }, branch.tag)))))
       :
         index.h("select", { class: "s-branches-select", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (index.h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق')))), this.isChoiceable() ?
-      index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, salla.lang.get('common.elements.ok')))
+      index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, this.ok))
       : ''));
   }
   componentDidRender() {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-714023c8.js');
 const Helper = require('./Helper-fcea994c.js');
-const sallaLogin = require('./salla-login-c438bb35.js');
+const sallaLogin = require('./salla-login-c74587ef.js');
 
 const sallaButtonCss = ":host{display:block}";
 
@@ -41,6 +41,8 @@ const SallaButton = class {
   }
   async stop() {
     this.host.removeAttribute('loading');
+    if (this.loaderPosition == 'center')
+      this.text.classList.remove('s-button-hide');
     return this.host;
   }
   async disable() {
@@ -77,6 +79,8 @@ const SallaButton = class {
 };
 SallaButton.style = sallaButtonCss;
 
+const sallaModalCss = "";
+
 const SallaModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -156,26 +160,26 @@ const SallaModal = class {
     return (
     //todo:: use suitable class name instead of hidden
     index.h(index.Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-wrapper" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index.h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width, slot: "body" }, this.isLoading
-      ? index.h("span", null, "Loading...")
+      ? index.h("div", { class: "s-modal-loader-wrap" }, index.h("span", { class: "s-modal-loader" }))
       :
         [index.h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
             index.h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, index.h("span", { class: "sicon-cancel" }))
-            : '', this.error || this.success || this.icon
-            ? index.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
-              } }, index.h("i", { class: {
-                [this.icon]: true,
-                's-modal-text-error': this.error,
-                's-modal-text-success': this.success,
-              } }))
-            : this.imageIcon ?
-              index.h("img", { class: "s-modal-header-img", src: this.imageIcon })
-              : '', this.title || this.subTitle ?
-            index.h("div", { class: "s-modal-header-content" }, index.h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }), index.h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }))
+            : '', this.title || this.subTitle ?
+            index.h("div", { class: "s-modal-header-inner" }, this.error || this.success || this.icon
+              ? index.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
+                } }, index.h("i", { class: {
+                  [this.icon]: true,
+                  's-modal-text-error': this.error,
+                  's-modal-text-success': this.success,
+                } }))
+              : this.imageIcon ?
+                index.h("img", { class: "s-modal-header-img", src: this.imageIcon })
+                : '', index.h("div", { class: "s-modal-header-content" }, index.h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }), index.h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
             : ''),
           index.h("slot", null),
           index.h("slot", { name: "footer" })
@@ -186,6 +190,7 @@ const SallaModal = class {
     "visible": ["handleVisible"]
   }; }
 };
+SallaModal.style = sallaModalCss;
 
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
@@ -1563,9 +1568,18 @@ var intlTelInput = intlTelInput$1;
 const SallaTelInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.enterClicked = index.createEvent(this, "enterClicked", 7);
     this.countryCode = "SA";
     this.countryKey = "+966";
     Helper.Helper.setHost(this.host);
+    salla.event.on('languages::translations.loaded', () => {
+      this.mobileLabel = salla.lang.get('common.elements.mobile');
+      this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
+      this.invalidCountryCode = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
+      this.tooShort = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });
+      this.tooLong = salla.lang.get('common.errors.too_long', { attribute: this.mobileLabel });
+      this.mobileRequired = salla.lang.get('common.errors.field_required', { attribute: this.mobileLabel });
+    });
   }
   async getValues() {
     this.phone = this.phoneInput.value;
@@ -1573,11 +1587,25 @@ const SallaTelInput = class {
     this.countryKey = this.countryKeyInput.value;
     return { phone: this.phoneInput.value, countryCode: this.countryCodeInput.value, countryKey: this.countryKeyInput.value };
   }
+  async isValid() {
+    const errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
+    this.reset();
+    if (this.iti.isValidNumber())
+      return true;
+    if (!this.phoneInput.value.trim()) {
+      this.phoneInput.classList.add("s-has-error");
+      this.errorMsg.innerText = this.mobileRequired || '';
+      return;
+    }
+    this.phoneInput.classList.add("s-has-error");
+    let errorCode = this.iti.getValidationError();
+    this.errorMsg.innerText = errorMap[errorCode] || '';
+    return false;
+  }
   initTelInput() {
-    salla.document.event.onKeyup('.tel-input', event => salla.helpers.digitsOnly(event.target));
-    document.querySelectorAll('.tel-input').forEach((intlInput) => {
+    this.host.querySelectorAll('.tel-input').forEach((intlInput) => {
       salla.helpers.digitsOnly(intlInput);
-      let iti = intlTelInput(intlInput, {
+      this.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,
@@ -1586,18 +1614,35 @@ const SallaTelInput = class {
         utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.min.js',
       });
       intlInput.addEventListener("countrychange", () => {
-        let data = iti.getSelectedCountryData();
+        let data = this.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('++', '+');
         });
       });
+      // on blur: validate
+      intlInput.addEventListener('blur', () => {
+        this.isValid();
+      });
+      // on keyup / change flag: reset
+      // this.phoneInput.addEventListener('change', () => this.reset());
+      salla.document.event.onKeyup('.tel-input', e => {
+        if (e.key == 'Enter')
+          return;
+        salla.helpers.digitsOnly(e.target);
+        this.reset();
+      });
     });
   }
+  reset() {
+    this.phoneInput.classList.remove("s-has-error");
+    this.errorMsg.innerHTML = "";
+  }
+  ;
   render() {
-    return (index.h(index.Host, null, index.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" }), index.h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" }), index.h("input", { type: "hidden", name: "country_key", value: this.countryKey, ref: el => this.countryKeyInput = el, class: "country_key" })));
+    return (index.h(index.Host, null, index.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" }), index.h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), index.h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" }), index.h("input", { type: "hidden", name: "country_key", value: this.countryKey, ref: el => this.countryKeyInput = el, class: "country_key" })));
   }
-  componentDidRender() {
+  componentDidLoad() {
     this.initTelInput();
   }
   get host() { return index.getElement(this); }
@@ -1608,7 +1653,6 @@ const SallaVerify = class {
     index.registerInstance(this, hostRef);
     this.verified = index.createEvent(this, "verified", 7);
     this.backClicked = index.createEvent(this, "backClicked", 7);
-    this.url = 'profile/verify-mobile';
     this.by = 'sms';
     this.autoReload = true;
     Helper.Helper.setHost(this.host);
@@ -1616,7 +1660,10 @@ const SallaVerify = class {
       this.modal = { show: () => '', hide: () => '' };
     }
     else {
-      salla.event.on('profile::verify.mobile', data => this.show(data));
+      salla.event.on('profile::verify.mobile', data => {
+        this.url = 'profile/verify-mobile';
+        this.show(data);
+      });
     }
   }
   async getCode() {
@@ -1693,9 +1740,12 @@ const SallaVerify = class {
       .catch(() => this.resendTimer());
   }
   submit() {
+    let data = Object.assign({ code: this.code.value }, this.data);
     return this.btn.load()
       .then(() => this.btn.disable())
-      .then(() => salla.document.api.request(this.url, Object.assign({ code: this.code.value }, this.data)))
+      .then(() => this.url
+      ? salla.api.auth.request(this.url, data)
+      : salla.api.auth.verify(this.by == 'sms' ? 'mobile' : this.by, data))
       .then(response => this.verified.emit(response))
       .then(() => this.btn.stop() && this.btn.disable())
       .then(() => this.modal.hide())
@@ -1712,8 +1762,8 @@ const SallaVerify = class {
       // <label class="s-verify-label">{salla.lang.get('pages.profile.verify_placeholder')}</label>,
       index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
       index.h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))),
-      index.h("div", { slot: "footer", class: "s-verify-footer" }, index.h("salla-button", { class: "s-verify-submit", disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')), this.backText ?
-        index.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.backClicked.emit() }, this.backText)
+      index.h("div", { slot: "footer", class: "s-verify-footer" }, index.h("salla-button", { class: "s-verify-submit", disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')), this.isShowBack ?
+        index.h("a", { href: "#", class: "s-verify-back", onClick: () => this.backClicked.emit() }, index.h("i", { class: "sicon-arrow-right" }))
         : '')
     ];
   }

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

@@ -11,11 +11,13 @@ const SallaLocalization = class {
     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.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 @@ const SallaLocalization = class {
       .then(() => url && (window.location.href = url));
   }
   render() {
-    return (index.h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, "modal-width": "xs" }, index.h("div", { slot: "header" }, index.h("slot", { name: "header" })), index.h("div", { class: "s-localization-inner" }, this.languages.length > 1 ?
+    return (index.h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, width: "xs" }, index.h("div", { slot: "header" }, index.h("slot", { name: "header" })), index.h("div", { class: "s-localization-inner" }, this.languages.length > 1 ?
       index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.languagesTitle), index.h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
         this.languages.map(lang => index.h("div", { class: "s-localization-item" }, index.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 }), index.h("div", { id: "language-slot", innerHTML: this.languageSlot
             .replace(/\{name\}/g, lang.name)

package/dist/cjs/salla-login-c74587ef.js

@@ -0,0 +1,154 @@
+'use strict';
+
+const index = require('./index-714023c8.js');
+const Helper = require('./Helper-fcea994c.js');
+
+const sallaLoginCss = "salla-verify{display:block}#salla-login .s-modal-body{overflow:inherit}";
+
+const SallaLogin = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isEmailAllowed = true;
+    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.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(() => {
+      //
+    });
+  }
+  /**
+   * @param {CustomEvent|{details:{case:'new_customer'|'authenticated', redirect_url:string|null}}} event
+   */
+  onVerified(event) {
+    if (!event.detail.case) {
+      console.log('verified but without case!');
+      return;
+    }
+    if (event.detail.case === "new_customer") {
+      return this.showTab(this.registrationTab);
+    }
+    //TODO::It looks that is this workaround🤔
+    if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
+      return;
+    }
+    if (event.redirect_url) {
+      return window.location.href = event.redirect_url;
+    }
+    window.location.reload();
+  }
+  // from salla-verify comp
+  onbackClicked() {
+    this.regType == 'phone' ? this.showTab(this.mobileTab) : this.showTab(this.emailTab);
+  }
+  async show() {
+    this.showTab(this.isEmailAllowed ? this.homeTab : this.mobileTab);
+    return this.modal.show();
+  }
+  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.Helper.toggleElement(el, 'visible', 'hidden', () => el == tab));
+    setTimeout(() => { [this.homeTab, this.mobileTab, this.emailTab, this.verifyTab, this.registrationTab].map(el => Helper.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.mobileTab, this.emailTab].includes(tab)) {
+      this.regType = tab === this.mobileTab ? 'phone' : 'email';
+    }
+    let isRegistrationTab = tab == this.registrationTab;
+    isRegistrationTab && this.firstName.focus();
+    this.modal.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
+    if (!isRegistrationTab) {
+      Helper.Helper.toggleElement(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'phone')
+        .toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
+    }
+    return this;
+  }
+  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.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;
+    !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');
+  }
+  validateField(field, errorMsg) {
+    field.classList.add('s-has-error');
+    field.nextElementSibling['innerText'] = '* ' + errorMsg;
+  }
+  render() {
+    return (index.h("salla-modal", { id: "salla-login", icon: "sicon-user", title: this.title, ref: modal => this.modal = modal, width: "xs" }, index.h("div", { class: "s-login-wrapper" }, this.isEmailAllowed ?
+      index.h("div", { class: "s-login-tab", ref: tab => this.homeTab = tab }, index.h("p", { class: "s-login-sub-title" }, this.loginTypeTitle), index.h("a", { href: "#", class: "s-login-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, index.h("i", { class: "s-login-main-btn-icon sicon-phone" }), index.h("span", { class: "s-login-main-btn-text" }, this.smsLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), index.h("a", { href: "#", class: "s-login-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, index.h("i", { class: "s-login-main-btn-icon sicon-mail" }), index.h("span", { class: "s-login-main-btn-text" }, this.emailLabel), index.h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })))
+      : '', index.h("div", { class: "s-login-tab", ref: tab => this.mobileTab = tab }, index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), index.h("salla-button", { wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, this.enterText), this.isEmailAllowed ? index.h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-link" }, this.byEmailText) : ''), this.isEmailAllowed ?
+      index.h("div", { class: "s-login-tab", ref: tab => this.emailTab = tab }, index.h("label", { class: "s-login-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" }), index.h("salla-button", { wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, this.enterText), index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText)) : '', index.h("salla-verify", { "without-modal": true, ref: tab => this.verifyTab = tab, autoReload: false, "is-show-back": true }), index.h("div", { ref: tab => this.registrationTab = tab }, index.h("label", { class: "s-login-label" }, this.firstNameLabel), index.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') }), index.h("span", { class: "s-login-error-message" }), index.h("label", { class: "s-login-label" }, this.lastNameLabel), index.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') }), index.h("span", { class: "s-login-error-message" }), index.h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-label" }, this.mobileLabel), index.h("salla-tel-input", { phone: '', ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-input s-ltr" }), index.h("span", { class: "s-login-error-message" })), index.h("salla-button", { wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register'))))));
+  }
+  get host() { return index.getElement(this); }
+};
+SallaLogin.style = sallaLoginCss;
+
+exports.SallaLogin = SallaLogin;

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

@@ -16,7 +16,7 @@ const SallaOffer = class {
     this.productSlot = ((_c = Helper.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;
       }
@@ -30,7 +30,7 @@ const SallaOffer = class {
       .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

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

@@ -61,11 +61,13 @@ const SallaRating = class {
   showActiveStep(current = null) {
     var _a;
     this.currentTab = current || this.steps[this.currentIndex];
-    Helper.Helper.toggle('.s-rating-step', 's-rating-active', 's-rating-hidden', tab => tab == this.currentTab)
-      .toggle('.s-rating-step-dot', 's-rating-bg-gray', 's-rating-bg-primary', dot => dot != this.dots[this.currentIndex]);
-    // the animation
-    Helper.Helper.toggleElement(this.currentTab, 's-rating-unactive', 's-rating-hidden', () => true);
-    setTimeout(() => Helper.Helper.toggleElement(this.currentTab, 's-rating-active', 's-rating-unactive', () => true), 300);
+    Helper.Helper.toggle('.s-rating-step-dot', 's-rating-bg-gray', 's-rating-bg-primary', dot => dot != this.dots[this.currentIndex])
+      .toggle('.s-rating-step', 's-rating-active', 's-rating-hidden', tab => tab == this.currentTab);
+    if (this.currentIndex != 0) {
+      // the animation
+      Helper.Helper.toggleElement(this.currentTab, 's-rating-unactive', 's-rating-hidden', () => true);
+      setTimeout(() => Helper.Helper.toggleElement(this.currentTab, 's-rating-active', 's-rating-unactive', () => true), 300);
+    }
     // Btn text
     let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
     this.nextBtn.querySelector('.s-button-text').innerHTML = nextType
@@ -113,6 +115,7 @@ const SallaRating = class {
       this.nextBtn.stop();
       salla.config.canLeave = true;
       this.currentIndex == this.stepsCount && this.showThankYou();
+      this.modal.isClosable = false;
     });
   }
   submittedBefore() {
@@ -173,15 +176,15 @@ const SallaRating = class {
   render() {
     return (index.h(index.Host, null, index.h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
       ? [index.h("div", { class: "s-rating-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
-          index.h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step", "data-type": "store" }, index.h("div", { class: "s-rating-rounded-icon" }, index.h("img", { src: salla.get('store.logo'), alt: "store name", class: "s-rating-store-logo" })), index.h("h2", { class: "s-rating-title" }, salla.lang.get('pages.rating.rate_the_store')), index.h("div", { class: "s-rating-stars-company" }, " ", this.renderRatingStars('large')), index.h("textarea", { id: "storeReview", name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), index.h("small", { class: "s-rating-validation-msg" }))
+          index.h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden", "data-type": "store" }, index.h("div", { class: "s-rating-rounded-icon" }, index.h("img", { src: salla.get('store.logo'), alt: "store name", class: "s-rating-store-logo" })), index.h("h2", { class: "s-rating-title" }, salla.lang.get('pages.rating.rate_the_store')), index.h("div", { class: "s-rating-stars-company" }, " ", this.renderRatingStars('large')), index.h("textarea", { id: "storeReview", name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), index.h("small", { class: "s-rating-validation-msg" }))
           : '', this.order.products_enabled
-          ? index.h("section", { class: "s-rating-step", "data-type": "products" }, this.order.products.map((item, index$1) => index.h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, index.h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-product-img" }), index.h("div", { class: "s-rating-product-details" }, index.h("h3", { class: "s-rating-product-title" }, " ", item.product.name), index.h("div", { class: "s-rating-stars-product" }, " ", this.renderRatingStars('small', `products[${index$1}][rating]`)), index.h("input", { type: "hidden", name: `products[${index$1}][product_id]`, value: item.product.id }), index.h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: `products[${index$1}][comment]`, class: "s-rating-comment" }), index.h("small", { class: "s-rating-validation-msg" })))))
+          ? index.h("section", { class: "s-rating-step s-rating-hidden", "data-type": "products" }, this.order.products.map((item, index$1) => index.h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, index.h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-product-img" }), index.h("div", { class: "s-rating-product-details" }, index.h("h3", { class: "s-rating-product-title" }, " ", item.product.name), index.h("div", { class: "s-rating-stars-product" }, " ", this.renderRatingStars('small', `products[${index$1}][rating]`)), index.h("input", { type: "hidden", name: `products[${index$1}][product_id]`, value: item.product.id }), index.h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: `products[${index$1}][comment]`, class: "s-rating-comment" }), index.h("small", { class: "s-rating-validation-msg" })))))
           : '', this.order.shipping_enabled
-          ? index.h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step", "data-type": "shipping" }, index.h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo
+          ? index.h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden", "data-type": "shipping" }, index.h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo
             ? index.h("div", { class: "s-rating-rounded-icon" }, index.h("img", { src: this.order.shipping.company.logo, class: "s-rating-shipping-logo", alt: this.order.shipping.company.name }))
             : index.h("span", { class: "s-rating-icon sicon-shipping-fast" }), index.h("div", { class: "s-rating-title" }, " ", salla.lang.get('pages.rating.rate_shipping') + ' ' + this.order.shipping.company.name), index.h("div", { class: "s-rating-stars-company" }, this.renderRatingStars('large')), index.h("textarea", { name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), index.h("small", { class: "s-rating-validation-msg" }))
           : '', index.h("div", { class: "s-rating-thanks s-rating-hidden", ref: el => this.thanksTab = el }, index.h("span", { class: "s-rating-icon sicon-check-circle2" }), index.h("h3", { class: "s-rating-thanks-title" }, salla.lang.get('pages.rating.thanks')), index.h("div", { class: "s-rating-thanks-msg", innerHTML: this.order.thanks_message }), index.h("time", { class: "s-rating-thanks-time", ref: el => this.thanksTime = el }))),
-        index.h("div", { class: "s-rating-footer" }, index.h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-btn s-rating-unvisiable" }, salla.lang.get('common.elements.back')), this.stepsCount > 1 ? index.h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => index.h("li", { class: 's-rating-bg-gray s-rating-step-dot' }))) : '', index.h("salla-button", { ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next'))),]
+        index.h("div", { class: "s-rating-footer" }, index.h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-btn s-rating-unvisiable" }, salla.lang.get('common.elements.back')), this.stepsCount > 1 ? index.h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => index.h("li", { class: 's-rating-bg-gray s-rating-step-dot' }))) : '', index.h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next'))),]
       : '')));
   }
   componentDidRender() {