@salla.sa/twilight-components 1.0.35 → 1.0.36

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaSearch = require('./salla-search-6738ec5e.js');
+const sallaSearch = require('./salla-search-f95dcd0c.js');
 require('./index-714023c8.js');
 require('./Helper-98cc9f18.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_7.cjs",[[4,"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"]]],[4,"salla-localization",{"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"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],"stop":[64],"setText":[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],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"show":[64],"showOffer":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["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);
+  return index.bootstrapLazy([["salla-button_7.cjs",[[4,"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,"salla-localization",{"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"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],"stop":[64],"setText":[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],"isVisitorSubscribed":[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],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"show":[64],"showOffer":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["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_7.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-714023c8.js');
 const Helper = require('./Helper-98cc9f18.js');
-const sallaSearch = require('./salla-search-6738ec5e.js');
+const sallaSearch = require('./salla-search-f95dcd0c.js');
 
 const sallaButtonCss = ":host{display:block}";
 
@@ -118,10 +118,11 @@ const SallaLocalization = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     var _a, _b;
-    this.language = salla.config.get('language', {});
-    this.currency = salla.config.get('currency', {});
+    this.language = salla.config.get('user.language_code');
+    this.currency = salla.config.get('user.currency_code');
     this.languages = [];
     this.currencies = [];
+    this.isLoading = true;
     Helper.Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
     salla.event.on('languages::translations.loaded', () => {
@@ -146,9 +147,10 @@ const SallaLocalization = class {
    * Show the component
    */
   async show() {
-    return this.getLanguages()
+    return this.modal.show()
+      .then(() => this.getLanguages())
       .then(() => this.getCurrencies())
-      .then(() => this.modal.show());
+      .then(() => this.isLoading = false);
   }
   /**
    * Hide the component
@@ -163,37 +165,40 @@ const SallaLocalization = class {
     return this.currencies.length > 1 ? null : await salla.config.currencies().then(data => this.currencies = data);
   }
   onChangeCurrency(event) {
-    this.currency = salla.config.get('currencies.' + event.target.value);
+    this.currency = event.target.value;
+    console.log("🚀 ~ file: salla-localization.tsx ~ line 78 ~ SallaLocalization ~ onChangeCurrency ~ this.currency", this.currency);
   }
   onChangeLanguage(event) {
-    this.language = salla.config.get('languages.' + event.target.value);
+    this.language = event.target.value;
+    console.log("🚀 ~ file: salla-localization.tsx ~ line 83 ~ SallaLocalization ~ onChangeLanguage ~ this.language", this.language);
   }
   async submit() {
     let url;
-    console.log('this.currency.code::::', this.currency, this.currency.code); //todo:: remove it
     this.btn.load()
-      .then(() => this.currency.code === salla.config.get('user.currency_code', 'SAR') || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
-      .then(() => this.language.code === salla.config.get('user.language_code', 'ar') || (url = this.language.url))
+      .then(() => this.currency === salla.config.get('user.currency_code', 'SAR') || ((url = window.location.href) && salla.currency.api.change(this.currency)))
+      .then(() => this.language === salla.config.get('user.language_code', 'ar') || (url = this.language.url))
       .then(() => this.btn.stop())
       .then(() => this.hide())
       .then(() => url && (window.location.href = url));
   }
   render() {
-    return (index.h("salla-modal", { id: "salla-localization", class: "s-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)
-            .replace(/\{code\}/g, lang.code)
-            .replace(/\{country_code\}/g, lang.country_code) }))) :
-        index.h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => index.h("option", { value: lang.code, selected: this.language.code == lang.code }, lang.name)))))
-      : '', this.currencies.length > 1 ?
-      index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.currenciesTitle), index.h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
-        this.currencies.map(currency => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency.code == currency.code, onChange: () => this.currency = currency, id: 'currency-' + currency.code, value: currency.code }), index.h("div", { id: "currency-slot", innerHTML: this.currencySlot
-            .replace(/\{name\}/g, currency.name)
-            .replace(/\{code\}/g, currency.code)
-            .replace(/\{country_code\}/g, currency.country_code) }))) :
-        index.h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => index.h("option", { value: currency.code, selected: this.currency.code == currency.code }, currency.name)))))
-      : ''), index.h("slot", { name: "footer" }, index.h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))));
+    return (index.h("salla-modal", { isLoading: this.isLoading, id: "salla-localization", class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, !this.isLoading ?
+      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 == lang.iso_code, onChange: () => this.language = lang.iso_code, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), index.h("div", { id: "language-slot", innerHTML: this.languageSlot
+              .replace(/\{name\}/g, lang.name)
+              .replace(/\{code\}/g, lang.code)
+              .replace(/\{country_code\}/g, lang.country_code) }))) :
+          index.h("select", { class: "s-localization-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => index.h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
+        : '', this.currencies.length > 1 ?
+        index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.currenciesTitle), index.h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
+          this.currencies.map(currency => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, id: 'currency-' + currency.code, value: currency.code }), index.h("div", { id: "currency-slot", innerHTML: this.currencySlot
+              .replace(/\{name\}/g, currency.name)
+              .replace(/\{code\}/g, currency.code)
+              .replace(/\{country_code\}/g, currency.country_code) }))) :
+          index.h("select", { class: "s-localization-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => index.h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
+        : '', index.h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))
+      : ''));
   }
   /**
    * to reduce dom levels we will move slot data into the parent dom
@@ -297,7 +302,8 @@ const SallaModal = class {
     return this.host;
   }
   toggleModal(isOpen) {
-    Helper.Helper.toggleElement(this.host, 's-modal-entering', 's-modal-leaving', () => isOpen)
+    const body = this.host.querySelector('.s-modal-body');
+    Helper.Helper.toggleElement(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
       .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
       //todo:: use united class names
       .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
@@ -332,10 +338,11 @@ const SallaModal = class {
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
-    return (index.h(index.Host, { class: 's-modal-container s-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') }, this.isLoading
-      ? index.h("div", { class: "s-modal-loader-wrap" }, index.h("span", { class: "s-modal-loader" }))
+    return (index.h(index.Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("div", { class: "s-modal-wrapper" }, 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 + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, 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 ?
+        [
+          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.title || this.subTitle ?
             index.h("div", { class: "s-modal-header-inner" }, this.error || this.success || this.icon

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

@@ -33,7 +33,7 @@ const SallaInfiniteScroll = class {
       </div>
       <a href="${this.nextPage}" class="s-button-btn btn--has-loading s-button-primary">
         <span class="s-button-text">${salla.lang.get('common.elements.load_more')}</span>
-        <span class="s-button-loader s-button-loader-start" style="display: none"></span>
+        <span class="s-button-loader s-button-loader-center" style="display: none"></span>
       </a>`;
     this.btnLoader = this.status.querySelector('.s-button-loader');
     salla.event.on('languages::translations.loaded', () => {
@@ -43,7 +43,9 @@ const SallaInfiniteScroll = class {
     });
   }
   loading(isLoading = true) {
-    this.btnLoader.style.display = isLoading ? 'inline-block' : 'none';
+    let btnText = this.status.querySelector('.s-button-text');
+    Helper.Helper.toggleElement(btnText, 's-button-hide', 's-button-show', () => isLoading);
+    this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
   }
   render() {
     return this.nextPage.length > 1 ?

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

@@ -5,15 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-714023c8.js');
 const Helper = require('./Helper-98cc9f18.js');
 
+const sallaOfferCss = ".s-offer-body{-webkit-overflow-scrolling:touch}.s-offer-body::-webkit-scrollbar{display:none}.s-offer-next-btn{background:linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}.s-offer-prev-btn{background:linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}";
+
 const SallaOffer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    var _a, _b, _c;
+    var _a, _b;
     this.offer = null;
+    this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
+    this.remember_my_choice = salla.lang.get('commone.remember_my_choice');
     Helper.Helper.setHost(this.host);
-    this.headerSlot = ((_a = Helper.Helper.getElement('[slot="header"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<b class="s-offer-title">{name}</b><h3 class="s-offer-subtitle">{message}</h3>';
-    this.categorySlot = ((_b = Helper.Helper.getElement('[slot="category"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<i class="s-offer-badge-icon sicon-tag"></i><span class="s-offer-badge-text">{name}</span>';
-    this.productSlot = ((_c = Helper.Helper.getElement('[slot="product"]')) === null || _c === void 0 ? void 0 : _c.innerHTML) || this.defaultProductSlot();
+    salla.event.on('languages::translations.loaded', () => {
+      this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
+      this.remember_my_choice = salla.lang.get('common.remember_my_choice');
+    });
+    this.categorySlot = ((_a = Helper.Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="s-offer-badge-icon sicon-tag"></i><span class="s-offer-badge-text">{name}</span>';
+    this.productSlot = ((_b = Helper.Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.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.localData.get('remember-offer-' + data.offer.offer_id)) {
@@ -29,7 +36,8 @@ const SallaOffer = class {
    */
   async show(product_id) {
     //TODO:: make sure there is only one offer
-    return salla.api.offer.details(product_id).then(response => this.offer = response.data[0]);
+    return salla.api.offer.details(product_id)
+      .then(response => this.showOffer(response.data[0]));
   }
   /**
    * Show offer details
@@ -37,6 +45,8 @@ const SallaOffer = class {
    */
   async showOffer(offer) {
     this.offer = offer;
+    this.offer_name = offer.name;
+    this.offer_message = offer.message;
     return this.modal.show();
   }
   rememberMe(event) {
@@ -50,7 +60,7 @@ const SallaOffer = class {
       .finally(() => this['stop']());
   }
   defaultProductSlot() {
-    return '<a href={url} class="s-offer-product-image"><img class="s-offer-product-img" src="{image}" /></a>' +
+    return '<a href={url} class="s-offer-product-image-wrap"><img class="s-offer-product-image" src="{image}" /></a>' +
       '<div class="s-offer-product-info">' +
       '   <a href={url} class="s-offer-product-name">{name}</a>' +
       '   <div class="s-offer-product-price">{price}</div>' +
@@ -58,32 +68,71 @@ const SallaOffer = class {
   }
   render() {
     var _a, _b;
-    return index.h("salla-modal", { ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
-      ? [index.h("div", { class: "s-offer-header", innerHTML: this.headerSlot
-            .replace(/\{name\}/g, this.offer.name)
-            .replace(/\{message\}/g, this.offer.message) }),
-        index.h("div", { class: "s-offer-body" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
-          ? this.offer.get.categories.map(category => index.h("a", { href: category.urls.customer, class: "s-offer-badge", innerHTML: this.categorySlot
+    return index.h("salla-modal", { "sub-title-first": true, icon: "sicon-special-discount", title: "\u0639\u0631\u0648\u0636 \u0631\u0627\u0626\u0639\u0629 \u0641\u064A \u0627\u0646\u062A\u0638\u0627\u0631\u0643\u060C \u0645\u0627\u0630\u0627 \u0646\u062A\u0646\u0638\u0631!", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+      ? [index.h("div", { class: "s-offer-scrolled-slider-wrap" }, index.h("div", { class: "s-offer-body s-offer-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
+          ? this.offer.get.categories.map(category => index.h("a", { href: category.urls.customer, class: "s-offer-badge s-offer-slider-item", innerHTML: this.categorySlot
               .replace(/\{name\}/g, category.name)
               .replace(/\{url\}/g, category.urls.customer) }))
-          : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => index.h("div", { class: "s-offer-product", id: 'product_' + product.id, innerHTML: this.productSlot
+          : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => index.h("div", { class: "s-offer-product s-offer-slider-item", id: 'product_' + product.id, innerHTML: this.productSlot
               .replace(/\{name\}/g, product.name)
               .replace(/\{url\}/g, product.url)
               .replace(/\{image\}/g, product.thumbnail)
               .replace(/\{price\}/g, product.has_special_price
               ? salla.money(product.price) + '<span class="s-offer-product-old-price">' + salla.money(product.regular_price) + '</span>'
-              : salla.money(product.price)) }, index.h("salla-button", { "btn-style": 'outline-primary', "data-id": product.id, onClick: this.addItem }, salla.lang.get('pages.cart.add_to_cart'))))),
+              : salla.money({ amount: product.price, currency: salla.config.get('user').currency_code })) }, index.h("div", { class: "s-offer-btn-wrap" }, index.h("salla-button", { wide: true, "btn-style": 'outline-primary', "data-id": product.id, "loader-position": "center", onClick: this.addItem }, salla.lang.get('pages.cart.add_to_cart')))))), index.h("div", { class: "s-offer-slider-nav" }, index.h("button", { class: "s-offer-nav-btn s-offer-prev-btn" }, index.h("span", { class: "s-offer-nav-btn-icon sicon-keyboard_arrow_right" })), index.h("button", { class: "s-offer-nav-btn s-offer-next-btn" }, index.h("span", { class: "s-offer-nav-btn-icon sicon-keyboard_arrow_left" })))),
         index.h("div", { class: "s-offer-footer", slot: "footer" }, this.offer.expiry_date ?
-          index.h("p", { class: "s-offer-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.expiry_date)
-          : '', index.h("label", { class: "s-offer-remember-label" }, index.h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-remember-input" }), "\u00A0 ", salla.lang.get('common.remember_my_choice'))),
+          index.h("p", { class: "s-offer-expiry" }, this.offer_expires_in, " ", this.offer.expiry_date)
+          : '', index.h("label", { class: "s-offer-remember-label" }, index.h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-remember-input" }), "\u00A0 ", this.remember_my_choice)),
       ] : '');
   }
   componentDidRender() {
     //todo:: know from where there is hidden attributes to the doms🤔
     //todo:: add animation
     this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
+    // Sooo mini Slider
+    if (this.offer && window.screen.width > 639) {
+      let sliderWrap = this.host.querySelector('.s-offer-scrolled-slider-wrap'), slider = this.host.querySelector('.s-offer-scrolled-slider'), navButtons = this.host.querySelectorAll('.s-offer-nav-btn'), nexBtn = this.host.querySelector('.s-offer-next-btn'), prevBtn = this.host.querySelector('.s-offer-prev-btn'), items = this.host.querySelectorAll('.s-offer-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
+      current = 0, // current slide
+      slidesToScroll = 3, itemsLength = items.length, itemSize = items[0].offsetWidth, sliderSize = itemsLength * itemSize, sliderWrapperSize = sliderWrap.offsetWidth, sliderInvisibleSize = sliderSize - sliderWrapperSize, isRTL = document.body.classList.contains('rtl') ? true : false;
+      if (sliderInvisibleSize > sliderNavMargin)
+        nexBtn.classList.add('s-offer-btn-is-active');
+      window.onresize = function () {
+        sliderWrapperSize = sliderWrap.offsetWidth;
+        sliderInvisibleSize = sliderSize - sliderWrapperSize;
+      };
+      slider.addEventListener('scroll', function () {
+        let sliderPosition = Math.abs(slider.scrollLeft);
+        let sliderEndOffset = sliderInvisibleSize - sliderNavMargin;
+        // show & hide the navigation btns depending on scroll position
+        if (sliderPosition <= sliderNavMargin) {
+          nexBtn.classList.add('s-offer-btn-is-active');
+          prevBtn.classList.remove('s-offer-btn-is-active');
+        }
+        else if (sliderPosition < sliderEndOffset) {
+          // show both btns in the middle
+          nexBtn.classList.add('s-offer-btn-is-active');
+          prevBtn.classList.add('s-offer-btn-is-active');
+        }
+        else if (sliderPosition >= sliderEndOffset) {
+          nexBtn.classList.remove('s-offer-btn-is-active');
+          prevBtn.classList.add('s-offer-btn-is-active');
+        }
+      });
+      // Navigation
+      navButtons.forEach(btn => {
+        btn.addEventListener('click', function () {
+          btn.classList.contains('s-offer-next-btn') ? current++ : current--;
+          slider.scrollTo({
+            top: 0,
+            left: itemSize * slidesToScroll * current * (isRTL ? -1 : 1),
+            behavior: 'smooth'
+          });
+        });
+      });
+    }
   }
   get host() { return index.getElement(this); }
 };
+SallaOffer.style = sallaOfferCss;
 
 exports.salla_offer = SallaOffer;

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

@@ -30,7 +30,10 @@ const SallaProductAvailability = class {
       return this.btn.load()
         .then(() => this.btn.disable())
         .then(() => salla.api.product.availabilitySubscribe(data))
-        .then(() => this.isSubscribed = true) //no need to wait until finishing alert animation
+        .then(() => {
+        this.isSubscribed = true;
+        salla.localData.set(`product-${this.productId}-subscribed`, true);
+      }) //no need to wait until finishing alert animation
         .then(() => this.btn.stop())
         .then(() => this.modal.hide())
         .catch(() => this.btn.stop() && this.btn.enable());
@@ -42,26 +45,27 @@ const SallaProductAvailability = class {
       (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
       e.key == 'Enter' && submitMethod();
     };
-    if (this.isUser) {
-      return;
-    }
-    this.channelsWatcher(this.channels);
-    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, _b, _c, _d;
+      // console.log('translations:', salla.lang);
+      this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
       this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
       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.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'));
     });
+    if (this.isUser)
+      return;
+    this.channelsWatcher(this.channels);
+    this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+    this.host.removeAttribute('title');
+    this.isVisitorSubscribed = salla.localData.get(`product-${this.productId}-subscribed`);
   }
   channelsWatcher(newValue) {
     this.channels_ = newValue.split(',');
@@ -85,9 +89,9 @@ const SallaProductAvailability = class {
     field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
   render() {
-    return (index.h(index.Host, null, this.isSubscribed
+    return (index.h(index.Host, null, this.isSubscribed || this.isVisitorSubscribed
       ? 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", { 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()));
+      : 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.isVisitorSubscribed ? '' : 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') ? [

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

@@ -64,7 +64,7 @@ const SallaRating = class {
       // Prevent form from submitting
       event.preventDefault();
       // Get the selected star - activeElement is not supported in safari
-      let activeStars = event.target.querySelectorAll('.s-rating-btn-star.hovered');
+      let activeStars = event.target.querySelectorAll('.s-rating-btn-star.s-rating-hovered');
       let selected = activeStars[activeStars.length - 1];
       if (!selected)
         return;
@@ -74,7 +74,7 @@ const SallaRating = class {
       // Loop through each star, and add or remove the `.selected` class to toggle highlighting
       event.target
         .querySelectorAll('.s-rating-btn-star')
-        .forEach((star, index) => Helper.Helper.toggleElement(star, 'selected', 'un-selected', () => index < selectedIndex));
+        .forEach((star, index) => Helper.Helper.toggleElement(star, 's-rating-selected', 's-rating-un-selected', () => index < selectedIndex));
       // Remove aria-pressed from any previously selected star
       event.target.querySelectorAll('.s-rating-btn-star[aria-pressed="true"]').forEach(star => star.removeAttribute('aria-pressed'));
       // Add aria-pressed role to the selected button
@@ -99,13 +99,12 @@ const SallaRating = class {
     }
     // 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
-      ? salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.' + nextType)
-      : salla.lang.get('pages.rating.send_ratings');
+    this.nextBtn.setText(nextType ? salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.' + nextType)
+      : salla.lang.get('pages.rating.send_ratings'));
     setTimeout(() => { var _a; return this.body.setAttribute('style', 'height:' + ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 'px'); });
   }
   highlightSelectedStars() {
-    let hover = ['hovered'];
+    let hover = ['s-rating-hovered'];
     Helper.Helper.all('.s-rating-stars-element', el => {
       let starElements = el.querySelectorAll('.s-rating-btn-star');
       // remove hovered state from stars ---
@@ -159,12 +158,12 @@ const SallaRating = class {
     let comment = rating.querySelector('.s-rating-comment');
     let validationMessage = rating.querySelector('.s-rating-validation-msg');
     if (stars && comment.value && comment.value.length > 3) {
-      comment.classList.remove('s-rating-has-error');
+      comment.classList.remove('s-has-error');
       validationMessage.innerHTML = '';
       return;
     }
     type = type || rating['dataset'].type;
-    Helper.Helper.toggleElement(comment, 'save', 's-rating-has-error', el => el.value.length > 3);
+    Helper.Helper.toggleElement(comment, 'save', 's-has-error', el => el.value.length > 3);
     throw validationMessage.innerHTML = stars
       ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + comment.getAttribute('placeholder'))
       : salla.lang.get(`pages.rating.rate_${type}_stars`).replace(' (:item)', '');

package/dist/cjs/{salla-search-6738ec5e.js → salla-search-f95dcd0c.js}

@@ -3,7 +3,7 @@
 const index = require('./index-714023c8.js');
 const Helper = require('./Helper-98cc9f18.js');
 
-const sallaLoginCss = "salla-verify{display:block}#salla-login .s-modal-body{overflow:inherit}";
+const sallaLoginCss = "salla-verify{display:block}";
 
 const SallaLogin = class {
   constructor(hostRef) {
@@ -79,14 +79,13 @@ const SallaLogin = class {
     this.title = this.host.title || salla.lang.get('blocks.header.login');
     this.host.removeAttribute('title');
     salla.event.on('languages::translations.loaded', () => {
-      var _a;
+      var _a, _b, _c, _d;
       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');
@@ -95,6 +94,9 @@ const SallaLogin = class {
       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);
+      (_b = this.smsBtn) === null || _b === void 0 ? void 0 : _b.setText(salla.lang.get('blocks.header.enter'));
+      (_c = this.emailBtn) === null || _c === void 0 ? void 0 : _c.setText(salla.lang.get('blocks.header.enter'));
+      (_d = this.regBtn) === null || _d === void 0 ? void 0 : _d.setText(salla.lang.get('blocks.header.register'));
     });
     salla.auth.event.onVerificationFailed(() => {
       //
@@ -176,9 +178,9 @@ const SallaLogin = class {
     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("slot", { name: "before-login-type" }), 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("slot", { name: "after-login-type" }))
       : '', this.isMobileAllowed ?
-      index.h("div", { class: "s-login-tab", ref: tab => this.mobileTab = tab }, index.h("slot", { name: "before-login-mobile" }), 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("div", { class: "s-login-tab", ref: tab => this.mobileTab = tab }, index.h("slot", { name: "before-login-mobile" }), 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 }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
         index.h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-link" }, this.byEmailText) : '', index.h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
-      index.h("div", { class: "s-login-tab", ref: tab => this.emailTab = tab }, index.h("slot", { name: "before-login-email" }), 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("div", { class: "s-login-tab", ref: tab => this.emailTab = tab }, index.h("slot", { name: "before-login-email" }), 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 }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
         index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText) : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify", { "without-modal": true, ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back sicon-arrow-right", slot: "after-footer", href: "#" })), index.h("div", { ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), 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')), index.h("slot", { name: "after-registration" })))));
   }
   get host() { return index.getElement(this); }
@@ -212,7 +214,7 @@ const SallaSearch = class {
       '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
       '</div>' +
       '<div class="s-search-product-details">' +
-      '  <div class="s-search-product-name">{name}</div> <div class="s-search-product-price">{price}</div>' +
+      '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price}</div>' +
       '</div>';
   }
   //todo:: reset data when closing

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-button_7.cjs",[[4,"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"]]],[4,"salla-localization",{"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"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],"stop":[64],"setText":[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],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"show":[64],"showOffer":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["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);
+  return index.bootstrapLazy([["salla-button_7.cjs",[[4,"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,"salla-localization",{"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"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],"stop":[64],"setText":[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],"isVisitorSubscribed":[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],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"show":[64],"showOffer":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["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/components/salla-infinite-scroll/salla-infinite-scroll.js

@@ -29,7 +29,7 @@ export class SallaInfiniteScroll {
       </div>
       <a href="${this.nextPage}" class="s-button-btn btn--has-loading s-button-primary">
         <span class="s-button-text">${salla.lang.get('common.elements.load_more')}</span>
-        <span class="s-button-loader s-button-loader-start" style="display: none"></span>
+        <span class="s-button-loader s-button-loader-center" style="display: none"></span>
       </a>`;
     this.btnLoader = this.status.querySelector('.s-button-loader');
     salla.event.on('languages::translations.loaded', () => {
@@ -39,7 +39,9 @@ export class SallaInfiniteScroll {
     });
   }
   loading(isLoading = true) {
-    this.btnLoader.style.display = isLoading ? 'inline-block' : 'none';
+    let btnText = this.status.querySelector('.s-button-text');
+    Helper.toggleElement(btnText, 's-button-hide', 's-button-show', () => isLoading);
+    this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
   }
   render() {
     return this.nextPage.length > 1 ?