@salla.sa/twilight-components 1.0.26 → 1.0.28

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaLogin = require('./salla-login-bf0972bf.js');
-const sallaSearch = require('./salla-search-eb0112c0.js');
+const sallaLogin = require('./salla-login-15aff630.js');
+const sallaSearch = require('./salla-search-7d0fe40b.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"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[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"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"invalidNumber":[32],"invalidCountryCode":[32],"tooShort":[32],"tooLong":[32],"mobileLabel":[32],"countryCodeLabel":[32],"mobileRequired":[32],"errorMap":[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-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subscribeText":[32],"cancelText":[32],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"buttonText":[32],"emailErrorMsg":[32]}]]],["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-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);
+  return index.bootstrapLazy([["salla-button_5.cjs",[[0,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[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"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"setText":[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"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32]}]]],["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-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"]]]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[4],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
   });
 };
 

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-bf0972bf.js');
+const sallaLogin = require('./salla-login-15aff630.js');
 
 const sallaButtonCss = ":host{display:block}";
 
@@ -39,6 +39,10 @@ const SallaButton = class {
     this.host.setAttribute('loading', '');
     return this.host;
   }
+  async setText(html) {
+    this.text.innerHTML = html;
+    return this.host;
+  }
   async stop() {
     this.host.removeAttribute('loading');
     if (this.loaderPosition == 'center')
@@ -97,6 +101,7 @@ const SallaModal = class {
     this.visible = false;
     this.isLoading = false;
     this.subTitleFirst = false;
+    this.noPadding = false;
     this.subTitle = '';
     this.icon = '';
     this.imageIcon = '';
@@ -159,7 +164,7 @@ const SallaModal = class {
     this.host.id = this.host.id || 'salla-modal';
     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(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-scroll-y ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding'), slot: "body" }, this.isLoading
       ? 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 ?
@@ -1571,6 +1576,13 @@ const SallaTelInput = class {
     this.enterClicked = index.createEvent(this, "enterClicked", 7);
     this.countryCode = "SA";
     this.countryKey = "+966";
+    this.countryCodeLabel = salla.lang.get('common.country_code');
+    this.mobileLabel = salla.lang.get('common.elements.mobile');
+    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.invalidCountryCode = salla.lang.get('common.errors.invalid_value', { attribute: this.countryCodeLabel });
+    this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
+    this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
     Helper.Helper.setHost(this.host);
     salla.event.on('languages::translations.loaded', () => {
       this.mobileLabel = salla.lang.get('common.elements.mobile');
@@ -1625,9 +1637,7 @@ const SallaTelInput = class {
       this.isValid();
     });
     // on keyup / change flag: reset
-    this.phoneInput.addEventListener('keyup', e => {
-      if (e.key == 'Enter')
-        return;
+    this.phoneInput.addEventListener('input', e => {
       salla.helpers.digitsOnly(e.target);
       this.reset();
     });

package/dist/cjs/salla-infinite-scroll.cjs.entry.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-714023c8.js');
+const Helper = require('./Helper-fcea994c.js');
+
+const SallaInfiniteScroll = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Next Page element
+     */
+    this.nextPage = '';
+    this.autoload = false;
+    /**
+     * Class selector to know the container if it's not the host `<salla-infinite-scroll>`
+     */
+    this.container = '.s-infinite-scroll-container';
+    /**
+     * Class selector to know list items
+     */
+    this.item = '.list-block';
+    Helper.Helper.setHost(this.host);
+    this.status = document.createElement('div');
+    this.status.className = 's-infinite-scroll-wrapper';
+    this.status.innerHTML = `<div class="s-infinite-scroll-status" style="display:none">
+        <p class="s-infinite-scroll-last infinite-scroll-last"></p>
+        <p class="s-infinite-scroll-error infinite-scroll-error"></p>
+      </div>
+      <a href="${this.nextPage}" class="s-button-btn btn--has-loading s-button-primary">
+        <span class="s-button-text"></span>
+        <span class="s-button-loader s-button-loader-start" style="display: none"></span>
+      </a>`;
+    this.btnLoader = this.status.querySelector('.s-button-loader');
+    salla.event.on('languages::translations.loaded', () => {
+      this.status.querySelector('.s-button-text').innerHTML = salla.lang.get('common.elements.load_more');
+      this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
+      this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
+    });
+  }
+  loading(isLoading = true) {
+    this.btnLoader.style.display = isLoading ? 'inline-block' : 'none';
+  }
+  render() {
+    return this.nextPage.length > 1 ?
+      index.h(index.Host, { class: "s-infinite-scroll-container" }, index.h("slot", null)) : '';
+  }
+  componentDidLoad() {
+    if (this.nextPage.length === 0) {
+      return;
+    }
+    this.host.insertAdjacentElement('afterend', this.status);
+    let that = this;
+    salla.infiniteScroll.initiate(this.container, {
+      history: this.autoload ? 'push' : false,
+      scrollThreshold: this.autoload ? 400 : false,
+      nextPage: this.nextPage,
+      checkLastPage: 'salla-infinite-scroll[next-page*=":"]',
+      status: '.s-infinite-scroll-status',
+      button: this.status.querySelector('.s-button-btn'),
+      append: this.item,
+      path: function () {
+        return that.nextPage.replace(/page\=(\d)/g, 'page=' + (this.loadCount + 2));
+      },
+    })
+      .on('request', () => this.loading())
+      .on('load', () => this.loading(false))
+      .on('error', () => this.loading(false));
+  }
+  get host() { return index.getElement(this); }
+};
+
+exports.salla_infinite_scroll = SallaInfiniteScroll;

package/dist/cjs/{salla-login-bf0972bf.js → salla-login-15aff630.js}

@@ -8,8 +8,21 @@ const sallaLoginCss = "salla-verify{display:block}#salla-login .s-modal-body{ove
 const SallaLogin = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.isEmailAllowed = true;
     this.regType = 'phone';
+    this.title = salla.lang.get('blocks.header.login');
+    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.emailErrorMsg = 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.firstNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: this.firstNameLabel });
+    this.lastNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: this.lastNameLabel });
     this.typing = (e, submitMethod) => {
       const error = e.target.nextElementSibling;
       e.target.classList.remove('s-has-error');
@@ -43,21 +56,22 @@ const SallaLogin = class {
         .then(() => this.verifyTab.show({ email: this.loginEmail.value }));
     };
     this.newUser = async () => {
-      const { mobile: regPhone, countryCode, countryKey } = await this.regTelInput.getValues();
+      var _a;
+      const { mobile: regPhone, countryCode, countryKey } = await this.regTelInput.getValues(), emailValue = this.regEmail.value || ((_a = this.loginEmail) === null || _a === void 0 ? void 0 : _a.value);
       await this.newUserValidation();
       await this.regBtn.load();
       await this.regBtn.disable();
-      this.verifyTab.getCode()
-        .then(code => salla.auth.api.register({
+      let data = {
         first_name: this.firstName.value,
         last_name: this.lastName.value,
         phone: regPhone || this.loginTelInput.mobile,
-        email: this.regEmail.value || this.loginEmail.value,
         country_code: countryCode,
         country_key: countryKey,
-        code: code,
         verified_by: this.regType,
-      }))
+      };
+      emailValue && (data = Object.assign(Object.assign({}, data), { email: emailValue }));
+      this.verifyTab.getCode()
+        .then(code => salla.auth.api.register(Object.assign(Object.assign({}, data), { code })))
         .then(() => window.location.reload())
         .catch(() => this.regBtn.stop() && this.regBtn.enable());
     };
@@ -65,6 +79,7 @@ const SallaLogin = class {
     this.host.removeAttribute('title');
     salla.event.on('languages::translations.loaded', () => {
       var _a;
+      this.title = salla.lang.get('blocks.header.login');
       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');
@@ -73,14 +88,12 @@ const SallaLogin = class {
       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.emailErrorMsg = 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.firstNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: this.firstNameLabel });
       this.lastNameErrorMsg = salla.lang.get('common.errors.field_required', { attribute: this.lastNameLabel });
       (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title);
-      this.showTab(this.isEmailAllowed ? this.homeTab : this.mobileTab);
     });
     salla.auth.event.onVerificationFailed(() => {
       //
@@ -112,7 +125,15 @@ const SallaLogin = class {
     this.regType == 'phone' ? this.showTab(this.mobileTab) : this.showTab(this.emailTab);
   }
   async show() {
-    this.showTab(this.isEmailAllowed ? this.homeTab : this.mobileTab);
+    if (this.isEmailAllowed && this.isMobileAllowed) {
+      this.showTab(this.homeTab);
+    }
+    else if (this.isEmailAllowed) {
+      this.showTab(this.emailTab);
+    }
+    else if (this.isMobileAllowed) {
+      this.showTab(this.mobileTab);
+    }
     return this.modal.show();
   }
   showTab(tab, evt) {
@@ -138,8 +159,8 @@ const SallaLogin = class {
     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)
+    const isLogByPhone = this.regType == "phone", isLogByEmail = this.regType == "email", emailValue = this.regEmail.value || (isLogByEmail && this.loginEmail.value), isEmailValid = Helper.Helper.isValidEmail(emailValue), isFirstNameValid = this.firstName.value.length > 0, isLastNameValid = this.lastName.value.length > 0, isPhoneValid = await this.regTelInput.isValid() || isLogByPhone && await this.loginTelInput.isValid(), emailValidation = (emailValue && isEmailValid) || (!emailValue && !this.isEmailRequired);
+    if (emailValidation && isPhoneValid && isFirstNameValid && isLastNameValid)
       return;
     !isEmailValid && this.validateField(this.regEmail, this.emailErrorMsg);
     !isFirstNameValid && this.validateField(this.firstName, this.firstNameErrorMsg);
@@ -151,11 +172,13 @@ const SallaLogin = class {
     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 ?
+    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 && this.isMobileAllowed ?
       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", { "loader-position": 'center', 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", { "loader-position": 'center', 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", { 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", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register'))))));
+      : '', this.isMobileAllowed ?
+      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", { "loader-position": 'center', 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", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, this.enterText), this.isMobileAllowed ?
+        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", { 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", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register'))))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/salla-product-availability.cjs.entry.js

@@ -9,7 +9,7 @@ const SallaProductAvailability = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.isUser = Helper.Helper.isUser();
-    this.productId = salla.get('page.id');
+    this.productId = salla.config.get('page.id');
     this.isSubscribed = false;
     // @Method()
     this.submit = async () => {
@@ -20,7 +20,7 @@ const SallaProductAvailability = class {
       let { mobile, countryCode } = await this.mobileInput.getValues(), data = { id: this.productId, country_code: countryCode };
       mobile !== '' && (data['mobile'] = mobile);
       this.email.value !== '' && (data['email'] = this.email.value);
-      await this.validateform({ mobile: mobile, email: this.email.value });
+      await this.validateform();
       return this.btn.load()
         .then(() => this.btn.disable())
         .then(() => salla.api.product.availabilitySubscribe(data))
@@ -43,31 +43,31 @@ const SallaProductAvailability = class {
     this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
     this.host.removeAttribute('title');
     salla.event.on('languages::translations.loaded', () => {
-      var _a;
+      var _a, _b, _c, _d;
       this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
-      this.subscribeText = salla.lang.get('common.elements.submit');
-      this.cancelText = salla.lang.get('common.elements.cancel');
       this.subTitle = salla.lang.get('pages.products.notify_availability_subtitle');
       this.mobileLabel = salla.lang.get('common.elements.mobile');
       this.emailLabel = salla.lang.get('common.elements.email');
       this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder');
       this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
-      this.buttonText = salla.lang.get('pages.products.notify_availability');
       this.emailErrorMsg = salla.lang.get('common.elements.email_is_valid');
       (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title_);
+      (_b = this.btn) === null || _b === void 0 ? void 0 : _b.setText(salla.lang.get('common.elements.submit'));
+      (_c = this.cancelBtn) === null || _c === void 0 ? void 0 : _c.setText(salla.lang.get('common.elements.cancel'));
+      (_d = this.inlineBtn) === null || _d === void 0 ? void 0 : _d.setText(salla.lang.get('pages.products.notify_availability'));
     });
   }
   channelsWatcher(newValue) {
     this.channels_ = newValue.split(',');
   }
-  async validateform(data) {
-    if (this.channels_.includes('email') && !data.mobile) {
+  async validateform() {
+    if (this.channels_.includes('email')) {
       const isEmailValid = Helper.Helper.isValidEmail(this.email.value);
       if (isEmailValid)
         return;
       !isEmailValid && this.validateField(this.email, this.emailErrorMsg);
     }
-    if (this.channels_.includes('sms') && !data.email) {
+    if (this.channels_.includes('sms')) {
       const isPhoneValid = await this.mobileInput.isValid();
       if (isPhoneValid)
         return;
@@ -81,7 +81,7 @@ const SallaProductAvailability = class {
   render() {
     return (index.h(index.Host, null, this.isSubscribed
       ? index.h("div", { class: "s-product-availability-subscribed" }, index.h("i", { class: "sicon-bell-ring s-product-availability-subs-icon" }), " ", this.subscribedMessage)
-      : index.h("slot", null, index.h("salla-button", { wide: true, onClick: () => this.isUser ? this.submit() : this.modal.show() }, this.buttonText)), this.isUser || this.isSubscribed ? '' : this.renderModal()));
+      : index.h("slot", null, index.h("salla-button", { onClick: () => this.isUser ? this.submit() : this.modal.show(), wide: true, ref: btn => this.inlineBtn = btn }, salla.lang.get('pages.products.notify_availability'))), this.isUser || this.isSubscribed ? '' : this.renderModal()));
   }
   renderModal() {
     return (index.h("salla-modal", { ref: modal => this.modal = modal, title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", width: "sm" }, index.h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
@@ -91,7 +91,7 @@ const SallaProductAvailability = class {
     ] : '', this.channels_.includes('sms') ? [
       index.h("label", { class: "s-product-availability-label" }, this.mobileLabel),
       index.h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
-    ] : ''), index.h("div", { slot: "footer", class: "s-product-availability-footer" }, index.h("salla-button", { wide: true, "btn-style": "outline", onClick: () => this.modal.hide() }, this.cancelText), index.h("salla-button", { "loader-position": 'center', wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.subscribeText))));
+    ] : ''), index.h("div", { slot: "footer", class: "s-product-availability-footer" }, index.h("salla-button", { wide: true, "btn-style": "outline", onClick: () => this.modal.hide(), ref: btn => this.cancelBtn = btn }, salla.lang.get('common.elements.cancel')), index.h("salla-button", { "loader-position": 'center', wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/{salla-search-eb0112c0.js → salla-search-7d0fe40b.js}

@@ -11,6 +11,7 @@ const SallaSearch = class {
     var _a;
     Helper.Helper.setHost(this.host);
     this.productSlot = ((_a = Helper.Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
+    salla.event.on('search::show', () => this.modal.show());
     salla.event.on('languages::translations.loaded', () => {
       this.placeholder = salla.lang.get('blocks.header.search_placeholder');
       this.noResultsText = salla.lang.get('common.elements.no_options');

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

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

package/dist/cjs/twilight-components.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(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],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[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"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"invalidNumber":[32],"invalidCountryCode":[32],"tooShort":[32],"tooLong":[32],"mobileLabel":[32],"countryCodeLabel":[32],"mobileRequired":[32],"errorMap":[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-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subscribeText":[32],"cancelText":[32],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"buttonText":[32],"emailErrorMsg":[32]}]]],["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-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);
+  return index.bootstrapLazy([["salla-button_5.cjs",[[0,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[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"],"title":[32],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"setText":[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"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32]}]]],["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-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"]]]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[4],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -4,6 +4,7 @@
     "./components/salla-search/salla-search.js",
     "./components/salla-branches/salla-branches.js",
     "./components/salla-button/salla-button.js",
+    "./components/salla-infinite-scroll/salla-infinite-scroll.js",
     "./components/salla-localization/salla-localization.js",
     "./components/salla-modal/salla-modal.js",
     "./components/salla-offer/salla-offer.js",

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

@@ -30,6 +30,10 @@ export class SallaButton {
     this.host.setAttribute('loading', '');
     return this.host;
   }
+  async setText(html) {
+    this.text.innerHTML = html;
+    return this.host;
+  }
   async stop() {
     this.host.removeAttribute('loading');
     if (this.loaderPosition == 'center')
@@ -185,6 +189,28 @@ export class SallaButton {
         "tags": []
       }
     },
+    "setText": {
+      "complexType": {
+        "signature": "(html: string) => Promise<HTMLElement>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "stop": {
       "complexType": {
         "signature": "() => Promise<HTMLElement>",

package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.js

@@ -0,0 +1,149 @@
+import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+/**
+ */
+export class SallaInfiniteScroll {
+  constructor() {
+    /**
+     * Next Page element
+     */
+    this.nextPage = '';
+    this.autoload = false;
+    /**
+     * Class selector to know the container if it's not the host `<salla-infinite-scroll>`
+     */
+    this.container = '.s-infinite-scroll-container';
+    /**
+     * Class selector to know list items
+     */
+    this.item = '.list-block';
+    Helper.setHost(this.host);
+    this.status = document.createElement('div');
+    this.status.className = 's-infinite-scroll-wrapper';
+    this.status.innerHTML = `<div class="s-infinite-scroll-status" style="display:none">
+        <p class="s-infinite-scroll-last infinite-scroll-last"></p>
+        <p class="s-infinite-scroll-error infinite-scroll-error"></p>
+      </div>
+      <a href="${this.nextPage}" class="s-button-btn btn--has-loading s-button-primary">
+        <span class="s-button-text"></span>
+        <span class="s-button-loader s-button-loader-start" style="display: none"></span>
+      </a>`;
+    this.btnLoader = this.status.querySelector('.s-button-loader');
+    salla.event.on('languages::translations.loaded', () => {
+      this.status.querySelector('.s-button-text').innerHTML = salla.lang.get('common.elements.load_more');
+      this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
+      this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
+    });
+  }
+  loading(isLoading = true) {
+    this.btnLoader.style.display = isLoading ? 'inline-block' : 'none';
+  }
+  render() {
+    return this.nextPage.length > 1 ?
+      h(Host, { class: "s-infinite-scroll-container" },
+        h("slot", null)) : '';
+  }
+  componentDidLoad() {
+    if (this.nextPage.length === 0) {
+      return;
+    }
+    this.host.insertAdjacentElement('afterend', this.status);
+    let that = this;
+    salla.infiniteScroll.initiate(this.container, {
+      history: this.autoload ? 'push' : false,
+      scrollThreshold: this.autoload ? 400 : false,
+      nextPage: this.nextPage,
+      checkLastPage: 'salla-infinite-scroll[next-page*=":"]',
+      status: '.s-infinite-scroll-status',
+      button: this.status.querySelector('.s-button-btn'),
+      append: this.item,
+      path: function () {
+        return that.nextPage.replace(/page\=(\d)/g, 'page=' + (this.loadCount + 2));
+      },
+    })
+      .on('request', () => this.loading())
+      .on('load', () => this.loading(false))
+      .on('error', () => this.loading(false));
+  }
+  static get is() { return "salla-infinite-scroll"; }
+  static get properties() { return {
+    "nextPage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Next Page element"
+      },
+      "attribute": "next-page",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "autoload": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "autoload",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "container": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Class selector to know the container if it's not the host `<salla-infinite-scroll>`"
+      },
+      "attribute": "container",
+      "reflect": false,
+      "defaultValue": "'.s-infinite-scroll-container'"
+    },
+    "item": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Class selector to know list items"
+      },
+      "attribute": "item",
+      "reflect": false,
+      "defaultValue": "'.list-block'"
+    }
+  }; }
+  static get states() { return {
+    "loadMore": {},
+    "noMore": {},
+    "failedToLoad": {}
+  }; }
+  static get elementRef() { return "host"; }
+}