@salla.sa/twilight-components 1.0.22 → 1.0.24

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

@@ -1,26 +1,21 @@
-import { Component, h, Prop, State, Element, Listen } from '@stencil/core';
+import { Component, h, State, Element, Listen } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 export class SallaSearch {
   constructor() {
     var _a;
-    this.results = [];
-    /**
-     * Override search placeholder.
-     */
-    this.placeholder = salla.lang.get('blocks.header.search_placeholder');
-    /**
-     * Override no results error message.
-     */
-    this.noResultsText = salla.lang.get('common.elements.no_options');
     Helper.setHost(this.host);
     this.productSlot = ((_a = Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
+    salla.event.on('languages::translations.loaded', () => {
+      this.placeholder = salla.lang.get('blocks.header.search_placeholder');
+      this.noResultsText = salla.lang.get('common.elements.no_options');
+    });
   }
   onModalOpen() {
     this.modal.querySelector('.s-search-input').focus();
   }
   onModalClose() {
     this.modal.querySelector('.s-search-input').value = '';
-    this.results = [];
+    this.results = undefined;
     this.afterSearching();
   }
   getDefaultProductSlot() {
@@ -35,7 +30,7 @@ export class SallaSearch {
   search(e) {
     Helper.hideElement(this.noResults);
     if (e.target.value.length === 0) {
-      this.results = [];
+      this.results = undefined;
       this.afterSearching();
       return;
     }
@@ -45,13 +40,14 @@ export class SallaSearch {
     //run loading spinner or stop it
     Helper.toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
     salla.search.api.search(e.target.value)
-      .then(response => this.results = response.results)
-      .catch(err => err !== 'Query Same As Previous!' ? this.results = [] : null)
+      .then(response => this.results = response)
+      .catch(err => err !== 'Query Same As Previous!' ? this.results = undefined : null)
       .finally(() => this.afterSearching(/*isEmpty*/ false));
   }
   afterSearching(isEmpty = true) {
-    this.noResults.style.display = isEmpty || this.results.length > 0 ? 'none' : 'block';
-    Helper.toggleElement(this.container, 's-search-container-open', 'no-results', () => this.results.length)
+    var _a;
+    this.noResults.style.display = isEmpty || ((_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length) > 0 ? 'none' : 'block';
+    Helper.toggleElement(this.container, 's-search-container-open', 'no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; })
       .toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
     salla.search.api.previousQuery = ''; //avoid having error 'Query Same As Previous' after reopen modal;
   }
@@ -63,13 +59,10 @@ export class SallaSearch {
         h("span", { class: "s-search-icon" },
           h("i", { class: "sicon-search", ref: el => this.searchIcon = el })),
         h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
-          _a.map(item => {
-            var _a;
-            return h("a", { href: item.url, class: "s-search-product", innerHTML: this.productSlot
-                .replace(/\{name\}/g, item.title)
-                .replace(/\{price\}/g, (_a = item.price) === null || _a === void 0 ? void 0 : _a.after) //todo:: get discounted price too
-                .replace(/\{image\}/g, item.thumb) });
-          }),
+          _a.data.map(item => h("a", { href: item.url, class: "s-search-product", innerHTML: this.productSlot
+              .replace(/\{name\}/g, item.name)
+              .replace(/\{price\}/g, item.price) //todo:: get discounted price too
+              .replace(/\{image\}/g, item.image_url) })),
           h("p", { ref: el => this.noResults = el, class: "s-search-no-results" }, this.noResultsText)))));
   }
   /**
@@ -85,46 +78,10 @@ export class SallaSearch {
   static get styleUrls() { return {
     "$": ["salla-search.css"]
   }; }
-  static get properties() { return {
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Override search placeholder."
-      },
-      "attribute": "placeholder",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('blocks.header.search_placeholder')"
-    },
-    "noResultsText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Override no results error message."
-      },
-      "attribute": "no-results-text",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.no_options')"
-    }
-  }; }
   static get states() { return {
-    "results": {}
+    "results": {},
+    "placeholder": {},
+    "noResultsText": {}
   }; }
   static get elementRef() { return "host"; }
   static get listeners() { return [{

package/dist/collection/components/salla-search/search-response.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/salla-tel-input/salla-tel-input.js

@@ -1,4 +1,4 @@
-import { Element, Component, Host, h, Prop, Method } from '@stencil/core';
+import { Element, Component, Host, h, Prop, Method, Event, State } from '@stencil/core';
 import TelInput from "intl-tel-input";
 import Helper from "../../Helpers/Helper";
 export class SallaTelInput {
@@ -6,6 +6,14 @@ export class SallaTelInput {
     this.countryCode = "SA";
     this.countryKey = "+966";
     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;
@@ -13,11 +21,25 @@ export class SallaTelInput {
     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 = TelInput(intlInput, {
+      this.iti = TelInput(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,
@@ -26,21 +48,39 @@ export class SallaTelInput {
         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 (h(Host, null,
       h("input", { type: "tel", name: "mobile", "data-code": this.countryCode, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control  tel-input s-ltr" }),
+      h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }),
       h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" }),
       h("input", { type: "hidden", name: "country_key", value: this.countryKey, ref: el => this.countryKeyInput = el, class: "country_key" })));
   }
-  componentDidRender() {
+  componentDidLoad() {
     this.initTelInput();
   }
   static get is() { return "salla-tel-input"; }
@@ -99,6 +139,30 @@ export class SallaTelInput {
       "defaultValue": "\"+966\""
     }
   }; }
+  static get states() { return {
+    "invalidNumber": {},
+    "invalidCountryCode": {},
+    "tooShort": {},
+    "tooLong": {},
+    "mobileLabel": {},
+    "mobileRequired": {}
+  }; }
+  static get events() { return [{
+      "method": "enterClicked",
+      "name": "enterClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get methods() { return {
     "getValues": {
       "complexType": {
@@ -115,6 +179,22 @@ export class SallaTelInput {
         "text": "",
         "tags": []
       }
+    },
+    "isValid": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "host"; }

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

@@ -2,7 +2,6 @@ import { Component, Element, Event, h, Method, Prop } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 export class SallaVerify {
   constructor() {
-    this.url = 'profile/verify-mobile';
     this.by = 'sms';
     this.autoReload = true;
     Helper.setHost(this.host);
@@ -10,7 +9,10 @@ export class SallaVerify {
       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() {
@@ -87,9 +89,12 @@ export class SallaVerify {
       .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())
@@ -112,8 +117,9 @@ export class SallaVerify {
           salla.lang.get('blocks.header.resend_after'),
           h("b", { class: "s-verify-timer", ref: el => this.timer = el })),
         h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')),
-        this.backText ?
-          h("a", { href: "#", class: "s-verify-resend", onClick: () => this.backClicked.emit() }, this.backText)
+        this.isShowBack ?
+          h("a", { href: "#", class: "s-verify-back", onClick: () => this.backClicked.emit() },
+            h("i", { class: "sicon-arrow-right" }))
           : '')
     ];
   }
@@ -145,14 +151,13 @@ export class SallaVerify {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
       "attribute": "url",
-      "reflect": false,
-      "defaultValue": "'profile/verify-mobile'"
+      "reflect": true
     },
     "by": {
       "type": "string",
@@ -172,12 +177,12 @@ export class SallaVerify {
       "reflect": false,
       "defaultValue": "'sms'"
     },
-    "backText": {
-      "type": "string",
+    "isShowBack": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
@@ -186,7 +191,7 @@ export class SallaVerify {
         "tags": [],
         "text": ""
       },
-      "attribute": "back-text",
+      "attribute": "is-show-back",
       "reflect": false
     },
     "autoReload": {

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { S as SallaLogin } from './salla-login-dd957742.js';
-export { S as SallaSearch } from './salla-search-5e691ebb.js';
+export { S as SallaLogin } from './salla-login-d08f0d7e.js';
+export { S as SallaSearch } from './salla-search-57bd45eb.js';
 import './index-a1bf769d.js';
 import './Helper-d07ebbc7.js';

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["salla-button_5",[[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",[[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",[[4,"salla-localization",{"languagesTitle":[1,"languages-title"],"currenciesTitle":[1,"currencies-title"],"ok":[1],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer",[[0,"salla-offer",{"offer":[32],"show":[64]}]]],["salla-product-availability",[[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",[[0,"salla-rating",{"order":[32],"show":[64],"hide":[64]}]]],["salla-search",[[0,"salla-search",{"placeholder":[1],"noResultsText":[1,"no-results-text"],"results":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]]]]], options);
+  return bootstrapLazy([["salla-button_5",[[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",[[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",[[4,"salla-localization",{"languagesTitle":[32],"currenciesTitle":[32],"ok":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer",[[0,"salla-offer",{"offer":[32],"show":[64]}]]],["salla-product-availability",[[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",[[0,"salla-rating",{"order":[32],"show":[64],"hide":[64]}]]],["salla-search",[[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]]]]], options);
   });
 };
 

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

@@ -38,6 +38,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();
@@ -59,7 +62,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": "xs", id: "s-branches-modal", class: "hidden" }, h("h4", { class: "s-branches-title" }, 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, 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,
@@ -73,7 +76,7 @@ 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", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, salla.lang.get('common.elements.ok')))
+      h("slot", { name: "footer" }, h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, this.ok))
       : ''));
   }
   componentDidRender() {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-a1bf769d.js';
 import { H as Helper } from './Helper-d07ebbc7.js';
-export { S as salla_login } from './salla-login-dd957742.js';
+export { S as salla_login } from './salla-login-d08f0d7e.js';
 
 const sallaButtonCss = ":host{display:block}";
 
@@ -37,6 +37,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() {
@@ -73,6 +75,8 @@ const SallaButton = class {
 };
 SallaButton.style = sallaButtonCss;
 
+const sallaModalCss = "";
+
 const SallaModal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -152,26 +156,26 @@ const SallaModal = class {
     return (
     //todo:: use suitable class name instead of hidden
     h(Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-wrapper" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width, slot: "body" }, this.isLoading
-      ? h("span", null, "Loading...")
+      ? h("div", { class: "s-modal-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 ?
             h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, h("span", { class: "sicon-cancel" }))
-            : '', this.error || this.success || this.icon
-            ? h("div", { class: {
-                's-modal-icon': true,
-                's-modal-bg-error': this.error,
-                's-modal-bg-success': this.success,
-                's-modal-bg-normal': !this.error && !this.success,
-                's-modal-bg-primary': this.primary
-              } }, h("i", { class: {
-                [this.icon]: true,
-                's-modal-text-error': this.error,
-                's-modal-text-success': this.success,
-              } }))
-            : this.imageIcon ?
-              h("img", { class: "s-modal-header-img", src: this.imageIcon })
-              : '', this.title || this.subTitle ?
-            h("div", { class: "s-modal-header-content" }, h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }), h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }))
+            : '', this.title || this.subTitle ?
+            h("div", { class: "s-modal-header-inner" }, 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 })
+                : '', 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" })
@@ -182,6 +186,7 @@ const SallaModal = class {
     "visible": ["handleVisible"]
   }; }
 };
+SallaModal.style = sallaModalCss;
 
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
@@ -1559,9 +1564,18 @@ var intlTelInput = intlTelInput$1;
 const SallaTelInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.enterClicked = createEvent(this, "enterClicked", 7);
     this.countryCode = "SA";
     this.countryKey = "+966";
     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;
@@ -1569,11 +1583,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,
@@ -1582,18 +1610,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 (h(Host, null, h("input", { type: "tel", name: "mobile", "data-code": this.countryCode, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control  tel-input s-ltr" }), h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" }), h("input", { type: "hidden", name: "country_key", value: this.countryKey, ref: el => this.countryKeyInput = el, class: "country_key" })));
+    return (h(Host, null, h("input", { type: "tel", name: "mobile", "data-code": this.countryCode, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control  tel-input s-ltr" }), h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" }), h("input", { type: "hidden", name: "country_key", value: this.countryKey, ref: el => this.countryKeyInput = el, class: "country_key" })));
   }
-  componentDidRender() {
+  componentDidLoad() {
     this.initTelInput();
   }
   get host() { return getElement(this); }
@@ -1604,7 +1649,6 @@ const SallaVerify = class {
     registerInstance(this, hostRef);
     this.verified = createEvent(this, "verified", 7);
     this.backClicked = createEvent(this, "backClicked", 7);
-    this.url = 'profile/verify-mobile';
     this.by = 'sms';
     this.autoReload = true;
     Helper.setHost(this.host);
@@ -1612,7 +1656,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() {
@@ -1689,9 +1736,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())
@@ -1708,8 +1758,8 @@ const SallaVerify = class {
       // <label class="s-verify-label">{salla.lang.get('pages.profile.verify_placeholder')}</label>,
       h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
       h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))),
-      h("div", { slot: "footer", class: "s-verify-footer" }, h("salla-button", { class: "s-verify-submit", disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')), this.backText ?
-        h("a", { href: "#", class: "s-verify-resend", onClick: () => this.backClicked.emit() }, this.backText)
+      h("div", { slot: "footer", class: "s-verify-footer" }, h("salla-button", { class: "s-verify-submit", disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')), this.isShowBack ?
+        h("a", { href: "#", class: "s-verify-back", onClick: () => this.backClicked.emit() }, h("i", { class: "sicon-arrow-right" }))
         : '')
     ];
   }