@salla.sa/twilight-components 1.0.35 → 1.0.36

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-a1bf769d.js';
 import { H as Helper } from './Helper-7162a06c.js';
-export { S as salla_login, a as salla_search } from './salla-search-90231876.js';
+export { S as salla_login, a as salla_search } from './salla-search-8bb6a0da.js';
 
 const sallaButtonCss = ":host{display:block}";
 
@@ -114,10 +114,11 @@ const SallaLocalization = class {
   constructor(hostRef) {
     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.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
     salla.event.on('languages::translations.loaded', () => {
@@ -142,9 +143,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
@@ -159,37 +161,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 (h("salla-modal", { id: "salla-localization", class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { slot: "header" }, h("slot", { name: "header" })), h("div", { class: "s-localization-inner" }, this.languages.length > 1 ?
-      h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.languagesTitle), h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
-        this.languages.map(lang => h("div", { class: "s-localization-item" }, 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 }), 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) }))) :
-        h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language.code == lang.code }, lang.name)))))
-      : '', this.currencies.length > 1 ?
-      h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.currenciesTitle), h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
-        this.currencies.map(currency => h("div", { class: "s-localization-item" }, 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 }), 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) }))) :
-        h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency.code == currency.code }, currency.name)))))
-      : ''), h("slot", { name: "footer" }, h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.ok')))));
+    return (h("salla-modal", { isLoading: this.isLoading, id: "salla-localization", class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, !this.isLoading ?
+      h("div", { class: "s-localization-inner" }, this.languages.length > 1 ?
+        h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.languagesTitle), h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
+          this.languages.map(lang => h("div", { class: "s-localization-item" }, 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 }), 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) }))) :
+          h("select", { class: "s-localization-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
+        : '', this.currencies.length > 1 ?
+        h("div", { class: "s-localization-section" }, h("label", { class: "s-localization-title" }, this.currenciesTitle), h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
+          this.currencies.map(currency => h("div", { class: "s-localization-item" }, 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 }), 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) }))) :
+          h("select", { class: "s-localization-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
+        : '', 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
@@ -293,7 +298,8 @@ const SallaModal = class {
     return this.host;
   }
   toggleModal(isOpen) {
-    Helper.toggleElement(this.host, 's-modal-entering', 's-modal-leaving', () => isOpen)
+    const body = this.host.querySelector('.s-modal-body');
+    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);
@@ -328,10 +334,11 @@ const SallaModal = class {
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
-    return (h(Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-wrapper" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body s-modal-scroll-y ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, this.isLoading
-      ? h("div", { class: "s-modal-loader-wrap" }, h("span", { class: "s-modal-loader" }))
+    return (h(Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, this.isLoading ?
+      h("div", { class: "s-modal-loader-wrap" }, h("span", { class: "s-modal-loader" }))
       :
-        [h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
+        [
+          h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
             h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, h("span", { class: "sicon-cancel" }))
             : '', this.title || this.subTitle ?
             h("div", { class: "s-modal-header-inner" }, this.error || this.success || this.icon

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

@@ -29,7 +29,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', () => {
@@ -39,7 +39,9 @@ const SallaInfiniteScroll = class {
     });
   }
   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 ?

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

@@ -1,15 +1,22 @@
 import { r as registerInstance, h, g as getElement } from './index-a1bf769d.js';
 import { H as Helper } from './Helper-7162a06c.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) {
     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.setHost(this.host);
-    this.headerSlot = ((_a = 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.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.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.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.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)) {
@@ -25,7 +32,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
@@ -33,6 +41,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) {
@@ -46,7 +56,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>' +
@@ -54,32 +64,71 @@ const SallaOffer = class {
   }
   render() {
     var _a, _b;
-    return h("salla-modal", { ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
-      ? [h("div", { class: "s-offer-header", innerHTML: this.headerSlot
-            .replace(/\{name\}/g, this.offer.name)
-            .replace(/\{message\}/g, this.offer.message) }),
-        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 => h("a", { href: category.urls.customer, class: "s-offer-badge", innerHTML: this.categorySlot
+    return 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
+      ? [h("div", { class: "s-offer-scrolled-slider-wrap" }, 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 => 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 => 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 => 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)) }, 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 })) }, h("div", { class: "s-offer-btn-wrap" }, 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')))))), h("div", { class: "s-offer-slider-nav" }, h("button", { class: "s-offer-nav-btn s-offer-prev-btn" }, h("span", { class: "s-offer-nav-btn-icon sicon-keyboard_arrow_right" })), h("button", { class: "s-offer-nav-btn s-offer-next-btn" }, h("span", { class: "s-offer-nav-btn-icon sicon-keyboard_arrow_left" })))),
         h("div", { class: "s-offer-footer", slot: "footer" }, this.offer.expiry_date ?
-          h("p", { class: "s-offer-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.expiry_date)
-          : '', h("label", { class: "s-offer-remember-label" }, h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-remember-input" }), "\u00A0 ", salla.lang.get('common.remember_my_choice'))),
+          h("p", { class: "s-offer-expiry" }, this.offer_expires_in, " ", this.offer.expiry_date)
+          : '', h("label", { class: "s-offer-remember-label" }, 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 getElement(this); }
 };
+SallaOffer.style = sallaOfferCss;
 
 export { SallaOffer as salla_offer };

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

@@ -26,7 +26,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());
@@ -38,26 +41,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(',');
@@ -81,9 +85,9 @@ const SallaProductAvailability = class {
     field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
   render() {
-    return (h(Host, null, this.isSubscribed
+    return (h(Host, null, this.isSubscribed || this.isVisitorSubscribed
       ? h("div", { class: "s-product-availability-subscribed" }, h("i", { class: "sicon-bell-ring s-product-availability-subs-icon" }), " ", this.subscribedMessage)
-      : h("slot", null, 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()));
+      : h("slot", null, 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 (h("salla-modal", { ref: modal => this.modal = modal, title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", width: "sm" }, h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [

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

@@ -60,7 +60,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;
@@ -70,7 +70,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.toggleElement(star, 'selected', 'un-selected', () => index < selectedIndex));
+        .forEach((star, index) => 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
@@ -95,13 +95,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.all('.s-rating-stars-element', el => {
       let starElements = el.querySelectorAll('.s-rating-btn-star');
       // remove hovered state from stars ---
@@ -155,12 +154,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.toggleElement(comment, 'save', 's-rating-has-error', el => el.value.length > 3);
+    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/esm/{salla-search-90231876.js → salla-search-8bb6a0da.js}

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, g as getElement } from './index-a1bf769d.js';
 import { H as Helper } from './Helper-7162a06c.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) {
@@ -77,14 +77,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');
@@ -93,6 +92,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(() => {
       //
@@ -174,9 +176,9 @@ const SallaLogin = class {
     return (h("salla-modal", { id: "salla-login", icon: "sicon-user", title: this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-wrapper" }, this.isEmailAllowed && this.isMobileAllowed ?
       h("div", { class: "s-login-tab", ref: tab => this.homeTab = tab }, h("p", { class: "s-login-sub-title" }, this.loginTypeTitle), h("slot", { name: "before-login-type" }), h("a", { href: "#", class: "s-login-main-btn", onClick: (evt) => this.showTab(this.mobileTab, evt) }, h("i", { class: "s-login-main-btn-icon sicon-phone" }), h("span", { class: "s-login-main-btn-text" }, this.smsLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), h("a", { href: "#", class: "s-login-main-btn", onClick: (evt) => this.showTab(this.emailTab, evt) }, h("i", { class: "s-login-main-btn-icon sicon-mail" }), h("span", { class: "s-login-main-btn-text" }, this.emailLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), h("slot", { name: "after-login-type" }))
       : '', this.isMobileAllowed ?
-      h("div", { class: "s-login-tab", ref: tab => this.mobileTab = tab }, h("slot", { name: "before-login-mobile" }), h("label", { class: "s-login-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, this.enterText), this.isEmailAllowed ?
+      h("div", { class: "s-login-tab", ref: tab => this.mobileTab = tab }, h("slot", { name: "before-login-mobile" }), h("label", { class: "s-login-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
         h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-link" }, this.byEmailText) : '', h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
-      h("div", { class: "s-login-tab", ref: tab => this.emailTab = tab }, h("slot", { name: "before-login-email" }), h("label", { class: "s-login-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, this.enterText), this.isMobileAllowed ?
+      h("div", { class: "s-login-tab", ref: tab => this.emailTab = tab }, h("slot", { name: "before-login-email" }), h("label", { class: "s-login-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
         h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-link" }, this.bySMSText) : '', h("slot", { name: "after-login-email" })) : '', h("salla-verify", { "without-modal": true, ref: tab => this.verifyTab = tab, autoReload: false }, h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back sicon-arrow-right", slot: "after-footer", href: "#" })), h("div", { ref: tab => this.registrationTab = tab }, h("slot", { name: "before-registration" }), h("label", { class: "s-login-label" }, this.firstNameLabel), h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), h("span", { class: "s-login-error-message" }), h("label", { class: "s-login-label" }, this.lastNameLabel), h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), h("span", { class: "s-login-error-message" }), h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-label" }, this.mobileLabel), h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" })), h("salla-button", { "loader-position": 'center', wide: true, onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), h("slot", { name: "after-registration" })))));
   }
   get host() { return getElement(this); }
@@ -210,7 +212,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/esm/twilight-components.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["salla-button_7",[[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",[[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",[[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",[[0,"salla-offer",{"offer":[32],"show":[64],"showOffer":[64]}]]],["salla-rating",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[4],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
+  return bootstrapLazy([["salla-button_7",[[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",[[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",[[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",[[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",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[4],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
 });

package/dist/twilight-components/index.esm.js

@@ -1 +1 @@
-export{S as SallaLogin,a as SallaSearch}from"./p-2abf9fc5.js";import"./p-6a5be894.js";import"./p-ed1c00c5.js";
+export{S as SallaLogin,a as SallaSearch}from"./p-187bdf52.js";import"./p-6a5be894.js";import"./p-ed1c00c5.js";

package/dist/twilight-components/p-187bdf52.js

@@ -0,0 +1 @@
+import{r as s,h as i,g as t}from"./p-6a5be894.js";import{H as e}from"./p-ed1c00c5.js";const l=class{constructor(i){s(this,i),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=(s,i)=>{const t=s.target.nextElementSibling;s.target.classList.remove("s-has-error"),(null==t?void 0:t.classList.contains("s-login-error-message"))&&(t.innerText=""),"Enter"==s.key&&i()},this.loginBySMS=async()=>{const{mobile:s,countryCode:i}=await this.loginTelInput.getValues();await this.loginTelInput.isValid()&&this.smsBtn.load().then((()=>this.smsBtn.disable())).then((()=>salla.auth.api.login({type:"mobile",phone:s,country_code:i}))).then((()=>this.smsBtn.stop()&&this.smsBtn.enable())).then((()=>this.showTab(this.verifyTab))).then((()=>(this.verifyTab.by="sms")&&(this.verifyTab.url="auth/mobile/verify"))).then((()=>this.verifyTab.show({phone:s,country_code:i})))},this.loginByEmail=()=>{e.isValidEmail(this.loginEmail.value)?this.emailBtn.load().then((()=>this.emailBtn.disable())).then((()=>salla.auth.api.login({type:"email",email:this.loginEmail.value}))).then((()=>this.emailBtn.stop()&&this.emailBtn.enable())).then((()=>this.showTab(this.verifyTab))).then((()=>this.verifyTab.by="email")).then((()=>this.verifyTab.show({email:this.loginEmail.value}))):this.validateField(this.loginEmail,this.emailErrorMsg)},this.newUser=async()=>{var s;const{mobile:i,countryCode:t,countryKey:e}=await this.regTelInput.getValues(),l=this.regEmail.value||(null===(s=this.loginEmail)||void 0===s?void 0:s.value);await this.newUserValidation(),await this.regBtn.load(),await this.regBtn.disable();let a={first_name:this.firstName.value,last_name:this.lastName.value,phone:i||this.loginTelInput.mobile,country_code:t,country_key:e,verified_by:this.regType};l&&(a=Object.assign(Object.assign({},a),{email:l})),this.verifyTab.getCode().then((s=>salla.auth.api.register(Object.assign(Object.assign({},a),{code:s})))).then((()=>window.location.reload())).catch((()=>this.regBtn.stop()&&this.regBtn.enable()))},this.title=this.host.title||salla.lang.get("blocks.header.login"),this.host.removeAttribute("title"),salla.event.on("languages::translations.loaded",(()=>{var s,i,t,e;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.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}),null===(s=this.modal)||void 0===s||s.setTitle(this.title),null===(i=this.smsBtn)||void 0===i||i.setText(salla.lang.get("blocks.header.enter")),null===(t=this.emailBtn)||void 0===t||t.setText(salla.lang.get("blocks.header.enter")),null===(e=this.regBtn)||void 0===e||e.setText(salla.lang.get("blocks.header.register"))})),salla.auth.event.onVerificationFailed((()=>{})),salla.event.on("login::show",(()=>this.show()))}onVerified(s){if(s.detail.case){if("new_customer"===s.detail.case)return this.showTab(this.registrationTab);if("redirect"===salla.auth.event.getTypeActionOnVerified())return s.redirect_url?window.location.href=s.redirect_url:void window.location.reload()}else console.log("verified but without case!")}async show(){return this.isEmailAllowed&&this.isMobileAllowed?this.showTab(this.homeTab):this.isEmailAllowed?this.showTab(this.emailTab):this.isMobileAllowed&&this.showTab(this.mobileTab),this.modal.show()}showTab(s,i){var t,l;null==i||i.preventDefault(),[this.homeTab,this.mobileTab,this.emailTab,this.verifyTab,this.registrationTab].map((i=>e.toggleElement(i,"visible","s-hidden",(()=>i==s)))),setTimeout((()=>{[this.homeTab,this.mobileTab,this.emailTab,this.verifyTab,this.registrationTab].map((i=>e.toggleElement(i,"s-login-active","s-login-unactive",(()=>i==s))))}),200),setTimeout((()=>{this.host.querySelector(".s-login-wrapper").setAttribute("style","height:"+(null==s?void 0:s.scrollHeight)+"px")})),[this.mobileTab,this.emailTab].includes(s)&&(this.regType=s===this.mobileTab?"phone":"email");let a=s==this.registrationTab;return a&&(null===(t=this.firstName)||void 0===t||t.focus()),null===(l=this.modal)||void 0===l||l.setTitle(a?salla.lang.get("common.titles.registration"):this.title),a||e.toggleElement(this.regMobileBlock,"s-hidden","s-block",(()=>"phone"===this.regType)).toggleElement(this.regEmailBlock,"s-hidden","s-block",(()=>"email"===this.regType)),this}async newUserValidation(){const s="phone"==this.regType,i=this.regEmail.value||"email"==this.regType&&this.loginEmail.value,t=e.isValidEmail(i),l=this.firstName.value.length>0,a=this.lastName.value.length>0,o=await this.regTelInput.isValid()||s&&await this.loginTelInput.isValid();if(!((i&&t||!i&&!this.isEmailRequired)&&o&&l&&a))throw!t&&this.validateField(this.regEmail,this.emailErrorMsg),!l&&this.validateField(this.firstName,this.firstNameErrorMsg),!a&&this.validateField(this.lastName,this.lastNameErrorMsg),"Please insert required fields"}validateField(s,i){s.classList.add("s-has-error"),s.nextElementSibling.innerText="* "+i}render(){return i("salla-modal",{id:"salla-login",icon:"sicon-user",title:this.title,ref:s=>this.modal=s,width:"xs"},i("div",{class:"s-login-wrapper"},this.isEmailAllowed&&this.isMobileAllowed?i("div",{class:"s-login-tab",ref:s=>this.homeTab=s},i("p",{class:"s-login-sub-title"},this.loginTypeTitle),i("slot",{name:"before-login-type"}),i("a",{href:"#",class:"s-login-main-btn",onClick:s=>this.showTab(this.mobileTab,s)},i("i",{class:"s-login-main-btn-icon sicon-phone"}),i("span",{class:"s-login-main-btn-text"},this.smsLabel),i("i",{class:"main-btn-arrow sicon-keyboard_arrow_left"})),i("a",{href:"#",class:"s-login-main-btn",onClick:s=>this.showTab(this.emailTab,s)},i("i",{class:"s-login-main-btn-icon sicon-mail"}),i("span",{class:"s-login-main-btn-text"},this.emailLabel),i("i",{class:"main-btn-arrow sicon-keyboard_arrow_left"})),i("slot",{name:"after-login-type"})):"",this.isMobileAllowed?i("div",{class:"s-login-tab",ref:s=>this.mobileTab=s},i("slot",{name:"before-login-mobile"}),i("label",{class:"s-login-label"},this.mobileLabel),i("salla-tel-input",{ref:s=>this.loginTelInput=s,onKeyDown:s=>this.typing(s,this.loginBySMS)}),i("salla-button",{"loader-position":"center",wide:!0,onClick:()=>this.loginBySMS(),ref:s=>this.smsBtn=s},salla.lang.get("blocks.header.enter")),this.isEmailAllowed?i("a",{href:"#",onClick:()=>this.showTab(this.emailTab),class:"s-login-link"},this.byEmailText):"",i("slot",{name:"after-login-mobile"})):"",this.isEmailAllowed?i("div",{class:"s-login-tab",ref:s=>this.emailTab=s},i("slot",{name:"before-login-email"}),i("label",{class:"s-login-label"},this.emailLabel),i("input",{type:"email",ref:s=>this.loginEmail=s,onKeyDown:s=>this.typing(s,this.loginByEmail),placeholder:"your@email.com",class:"s-login-input s-ltr"}),i("span",{class:"s-login-error-message"}),i("salla-button",{"loader-position":"center",wide:!0,onClick:()=>this.loginByEmail(),ref:s=>this.emailBtn=s},salla.lang.get("blocks.header.enter")),this.isMobileAllowed?i("a",{href:"#",onClick:()=>this.showTab(this.mobileTab),class:"s-login-link"},this.bySMSText):"",i("slot",{name:"after-login-email"})):"",i("salla-verify",{"without-modal":!0,ref:s=>this.verifyTab=s,autoReload:!1},i("a",{onClick:()=>this.showTab("phone"==this.regType?this.mobileTab:this.emailTab),class:"s-verify-back sicon-arrow-right",slot:"after-footer",href:"#"})),i("div",{ref:s=>this.registrationTab=s},i("slot",{name:"before-registration"}),i("label",{class:"s-login-label"},this.firstNameLabel),i("input",{type:"text",class:"s-login-input",ref:s=>this.firstName=s,onKeyDown:s=>this.typing(s,this.newUser),placeholder:salla.lang.get("pages.profile.first_name")}),i("span",{class:"s-login-error-message"}),i("label",{class:"s-login-label"},this.lastNameLabel),i("input",{type:"text",class:"s-login-input",ref:s=>this.lastName=s,onKeyDown:s=>this.typing(s,this.newUser),placeholder:salla.lang.get("pages.profile.last_name")}),i("span",{class:"s-login-error-message"}),i("div",{ref:s=>this.regMobileBlock=s,class:"mb-1.5"},i("label",{class:"s-login-label"},this.mobileLabel),i("salla-tel-input",{ref:s=>this.regTelInput=s,onKeyDown:s=>this.typing(s,this.newUser)})),i("div",{ref:s=>this.regEmailBlock=s,class:"mb-1.5"},i("label",{class:"s-login-label"},this.emailLabel),i("input",{type:"email",ref:s=>this.regEmail=s,onKeyDown:s=>this.typing(s,this.newUser),placeholder:"your@email.com",class:"s-login-input s-ltr"}),i("span",{class:"s-login-error-message"})),i("salla-button",{"loader-position":"center",wide:!0,onClick:()=>this.newUser(),ref:s=>this.regBtn=s},salla.lang.get("blocks.header.register")),i("slot",{name:"after-registration"}))))}get host(){return t(this)}};l.style="salla-verify{display:block}";const a=class{constructor(i){var t;s(this,i),e.setHost(this.host),this.productSlot=(null===(t=e.getElement('[slot="product"]'))||void 0===t?void 0:t.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")}))}onModalOpen(){this.modal.querySelector(".s-search-input").focus()}onModalClose(){this.modal.querySelector(".s-search-input").value="",this.results=void 0,this.afterSearching()}getDefaultProductSlot(){return'<div class="s-search-product-image-container">  <img class="s-search-product-image" src="{image}" alt="{name}"/></div><div class="s-search-product-details">  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price}</div></div>'}search(s){if(e.hideElement(this.noResults),0===s.target.value.length)return this.results=void 0,void this.afterSearching();s.target.value.length<=2||(e.toggleElement(this.searchIcon,"s-search-spinner-loader","sicon-search",(()=>!0)),salla.search.api.search(s.target.value).then((s=>this.results=s)).catch((s=>"Query Same As Previous!"!==s?this.results=void 0:null)).finally((()=>this.afterSearching(!1))))}afterSearching(s=!0){var i;this.noResults.style.display=s||(null===(i=this.results)||void 0===i?void 0:i.data.length)>0?"none":"block",e.toggleElement(this.container,"s-search-container-open","no-results",(()=>{var s;return null===(s=this.results)||void 0===s?void 0:s.data.length})).toggleElement(this.searchIcon,"s-search-spinner-loader","sicon-search",(()=>!1)),salla.search.api.previousQuery=""}render(){var s;return i("salla-modal",{position:"top",id:"s-search-modal",ref:s=>this.modal=s},i("div",{class:"s-search-container",ref:s=>this.container=s},i("input",{class:"s-search-input",type:"text",placeholder:this.placeholder,onInput:s=>this.search(s)}),i("span",{class:"s-search-icon"},i("i",{class:"sicon-search",ref:s=>this.searchIcon=s})),i("div",{class:"s-search-results"},null===(s=this.results)||void 0===s?void 0:s.data.map((s=>i("a",{href:s.url,class:"s-search-product",innerHTML:this.productSlot.replace(/\{name\}/g,s.name).replace(/\{price\}/g,s.price).replace(/\{image\}/g,s.image_url)}))),i("p",{ref:s=>this.noResults=s,class:"s-search-no-results"},this.noResultsText))))}componentDidLoad(){this.afterSearching()}get host(){return t(this)}};a.style="#s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}#s-search-modal .s-modal-spacer{display:inline}#s-search-modal .s-modal-body{padding:0;max-width:90%;margin-top:3.2rem;border-radius:0.5rem}#s-search-modal .s-modal-close{top:1rem}";export{l as S,a}

package/dist/twilight-components/p-19a124e9.entry.js

@@ -0,0 +1 @@
+import{r as s,h as t,H as a,g as i}from"./p-6a5be894.js";import{H as r}from"./p-ed1c00c5.js";const e=class{constructor(t){s(this,t),this.stepsCount=0,this.currentIndex=0,this.submitted=[],this.orderId=salla.config.get("page.id"),this.rate_the_store=salla.lang.get("pages.rating.rate_the_store"),this.write_store_rate=salla.lang.get("pages.rating.write_store_rate"),this.rate_product_stars=salla.lang.get("pages.rating.rate_product_stars"),this.write_product_rate=salla.lang.get("pages.rating.write_product_rate"),this.rate_shipping=salla.lang.get("pages.rating.rate_shipping"),this.write_shipping_rate=salla.lang.get("pages.rating.write_shipping_rate"),this.thanks=salla.lang.get("pages.rating.thanks"),this.back=salla.lang.get("common.elements.back"),this.next=salla.lang.get("common.elements.next"),r.setHost(this.host),salla.event.on("rating::show",(()=>this.show())),salla.event.on("languages::translations.loaded",(()=>{this.rate_the_store=salla.lang.get("pages.rating.rate_the_store"),this.write_store_rate=salla.lang.get("pages.rating.write_store_rate"),this.rate_product_stars=salla.lang.get("pages.rating.rate_product_stars"),this.write_product_rate=salla.lang.get("pages.rating.write_product_rate"),this.rate_shipping=salla.lang.get("pages.rating.rate_shipping"),this.write_shipping_rate=salla.lang.get("pages.rating.write_shipping_rate"),this.thanks=salla.lang.get("pages.rating.thanks"),this.back=salla.lang.get("common.elements.back"),this.next=salla.lang.get("common.elements.next")}))}async show(){return this.modal.show().then((()=>this.order||salla.feedback.api.order(this.orderId).then((s=>this.order=s.data)))).then((()=>this.modal.setTitle(salla.lang.get("pages.rating.rate_order")+' <span class="unicode">(#'+this.order.id+")</span>"))).then((()=>this.modal.stopLoading())).then((()=>this.stepsCount=[this.order.testimonials_enabled,this.order.products_enabled,this.order.shipping_enabled].filter((s=>s)).length)).then((()=>setTimeout((()=>this.initiateRating()),100)))}async hide(){return this.modal.hide()}initiateRating(){this.handleWizard(),this.highlightSelectedStars(),salla.document.event.onSubmit(".s-rating-stars-element",(function(s){s.preventDefault();let t=s.target.querySelectorAll(".s-rating-btn-star.s-rating-hovered"),a=t[t.length-1];if(!a)return;let i=parseInt(a.dataset.star,10);s.target.querySelector(".rating_hidden_input").value=i,s.target.querySelectorAll(".s-rating-btn-star").forEach(((s,t)=>r.toggleElement(s,"s-rating-selected","s-rating-un-selected",(()=>t<i)))),s.target.querySelectorAll('.s-rating-btn-star[aria-pressed="true"]').forEach((s=>s.removeAttribute("aria-pressed"))),a.setAttribute("aria-pressed","")}))}handleWizard(){this.steps=this.host.querySelectorAll(".s-rating-step"),this.dots=this.host.querySelectorAll(".s-rating-step-dot"),this.showActiveStep()}showActiveStep(s=null){var t;this.currentTab=s||this.steps[this.currentIndex],r.toggle(".s-rating-step-dot","s-rating-bg-gray","s-rating-bg-primary",(s=>s!=this.dots[this.currentIndex])).toggle(".s-rating-step","s-rating-active","s-rating-hidden",(s=>s==this.currentTab)),0!=this.currentIndex&&(r.toggleElement(this.currentTab,"s-rating-unactive","s-rating-hidden",(()=>!0)),setTimeout((()=>r.toggleElement(this.currentTab,"s-rating-active","s-rating-unactive",(()=>!0))),300));let a=null===(t=this.steps[this.currentIndex+1])||void 0===t?void 0:t.dataset.type;this.nextBtn.setText(a?salla.lang.get("pages.rating.rate")+" "+salla.lang.get("pages.rating."+a):salla.lang.get("pages.rating.send_ratings")),setTimeout((()=>{var s;return this.body.setAttribute("style","height:"+(null===(s=this.currentTab)||void 0===s?void 0:s.scrollHeight)+"px")}))}highlightSelectedStars(){let s=["s-rating-hovered"];r.all(".s-rating-stars-element",(t=>{let a=t.querySelectorAll(".s-rating-btn-star");t.addEventListener("mouseout",(()=>a.forEach((t=>t.classList.remove(...s))))),a.forEach(((t,i)=>{t.addEventListener("mouseover",(()=>{if(t.classList.add(...s),i<=1)"BUTTON"===t.previousElementSibling.tagName&&t.previousElementSibling.classList.add(...s);else for(let t=0;t<i;t++)a[t].classList.add(...s)})),t.addEventListener("mouseout",(()=>t.classList.remove(...s)))}))}))}previousTab(){this.currentIndex>0&&this.currentIndex--,r.toggleElement(this.backBtn,"s-rating-unvisiable","block",(()=>0==this.currentIndex)),this.showActiveStep()}submit(){this.submittedBefore()||this.validate(),salla.config.canLeave=!1,this.nextBtn.load().then((()=>this.submittedBefore()||this.sendFeedback())).then((()=>this.currentTab.querySelectorAll("[name],.s-rating-btn-star").forEach((s=>s.setAttribute("disabled",""))))).then((()=>this.currentIndex<this.stepsCount&&this.currentIndex++)).then((()=>this.showActiveStep())).then((()=>r.toggle("#prev-btn","block","s-rating-unvisiable",(()=>!0)))).finally((()=>{this.nextBtn.stop(),salla.config.canLeave=!0,this.currentIndex==this.stepsCount&&this.showThankYou(),this.modal.isClosable=!1}))}submittedBefore(){return this.submitted.includes(this.currentIndex)}validate(s=null,t=null){if(!s&&"products"==this.currentTab.dataset.type)return this.currentTab.querySelectorAll(".rating-outer-form").forEach((s=>this.validate(s,"product")));let a=(s=s||this.currentTab).querySelector(".rating_hidden_input").value,i=s.querySelector(".s-rating-comment"),e=s.querySelector(".s-rating-validation-msg");if(a&&i.value&&i.value.length>3)return i.classList.remove("s-has-error"),void(e.innerHTML="");throw t=t||s.dataset.type,r.toggleElement(i,"save","s-has-error",(s=>s.value.length>3)),e.innerHTML=a?salla.lang.get("common.errors.not_less_than_chars",{chars:4})+" "+i.getAttribute("placeholder"):salla.lang.get(`pages.rating.rate_${t}_stars`).replace(" (:item)","")}sendFeedback(){let s={};if(this.currentTab.querySelectorAll("[name]").forEach((t=>{let a=salla.helpers.inputData(t.name,t.value,s);s[a.name]=a.value})),0!=Object.keys(s).length)return s.order_id=this.orderId,s.type=this.currentTab.dataset.type,this.submitted.push(this.currentIndex),salla.feedback.api[this.currentTab.dataset.type](s)}showThankYou(){let s=10,t=setInterval((()=>{this.thanksTime.innerHTML="00:0"+s--,s>0||(clearInterval(t),this.thanksTime.remove(),this.hide().then((()=>window.location.reload())))}),1e3);this.host.querySelector(".s-rating-footer").classList.add("s-rating-unvisiable"),this.showActiveStep(this.thanksTab)}renderRatingStars(s,a="rating"){return t("form",{class:"s-rating-stars-element"},t("input",{type:"hidden",class:"rating_hidden_input",name:a,value:""}),[1,2,3,4,5].map((a=>t("button",{type:"submit",class:"s-rating-btn-star s-rating-btn-star-"+s,"data-star":a},t("i",{class:"sicon-star2"})))))}render(){return t(a,null,t("salla-modal",{isLoading:!0,width:"md",ref:s=>this.modal=s},this.order?[t("div",{class:"s-rating-wrapper",ref:s=>this.body=s},this.order.testimonials_enabled?t("div",{class:"rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden","data-type":"store"},t("div",{class:"s-rating-rounded-icon"},t("img",{src:salla.config.get("store.logo","https://assets.salla.sa/cp/assets/images/logo-new.png"),alt:"store name",class:"s-rating-store-logo"})),t("h2",{class:"s-rating-title"},this.rate_the_store),t("div",{class:"s-rating-stars-company"}," ",this.renderRatingStars("large")),t("textarea",{id:"storeReview",name:"comment",class:"s-rating-comment",placeholder:this.write_store_rate}),t("small",{class:"s-rating-validation-msg"})):"",this.order.products_enabled?t("section",{class:"s-rating-step s-rating-hidden","data-type":"products"},this.order.products.map(((s,a)=>t("div",{class:"rating-outer-form s-rating-product","data-stars-error":this.rate_product_stars},t("img",{src:s.product.thumbnail,alt:s.product.name,class:"s-rating-product-img"}),t("div",{class:"s-rating-product-details"},t("h3",{class:"s-rating-product-title"}," ",s.product.name),t("div",{class:"s-rating-stars-product"}," ",this.renderRatingStars("small",`products[${a}][rating]`)),t("input",{type:"hidden",name:`products[${a}][product_id]`,value:s.product.id}),t("textarea",{placeholder:this.write_product_rate,name:`products[${a}][comment]`,class:"s-rating-comment"}),t("small",{class:"s-rating-validation-msg"})))))):"",this.order.shipping_enabled?t("div",{class:"rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden","data-type":"shipping"},t("input",{type:"hidden",name:"shipping_company_id",value:this.order.shipping.company.id}),this.order.shipping.company.logo?t("div",{class:"s-rating-rounded-icon"},t("img",{src:this.order.shipping.company.logo,class:"s-rating-shipping-logo",alt:this.order.shipping.company.name})):t("span",{class:"s-rating-icon sicon-shipping-fast"}),t("div",{class:"s-rating-title"}," ",this.rate_shipping+" "+this.order.shipping.company.name),t("div",{class:"s-rating-stars-company"},this.renderRatingStars("large")),t("textarea",{name:"comment",class:"s-rating-comment",placeholder:this.write_shipping_rate}),t("small",{class:"s-rating-validation-msg"})):"",t("div",{class:"s-rating-thanks s-rating-hidden",ref:s=>this.thanksTab=s},t("span",{class:"s-rating-icon sicon-check-circle2"}),t("h3",{class:"s-rating-thanks-title"},this.thanks),t("div",{class:"s-rating-thanks-msg",innerHTML:this.order.thanks_message}),t("time",{class:"s-rating-thanks-time",ref:s=>this.thanksTime=s}))),t("div",{class:"s-rating-footer"},t("button",{ref:s=>this.backBtn=s,onClick:()=>this.previousTab(),class:"s-rating-btn s-rating-unvisiable"},this.back),this.stepsCount>1?t("ul",{class:"s-rating-dots"},[0,1,2].slice(0,this.stepsCount).map((()=>t("li",{class:"s-rating-bg-gray s-rating-step-dot"})))):"",t("salla-button",{"loader-position":"center",ref:s=>this.nextBtn=s,onClick:()=>this.submit()},this.next))]:""))}componentDidRender(){this.modal.querySelectorAll("[hidden]").forEach((s=>s.removeAttribute("hidden")))}componentDidLoad(){salla.event.dispatch("rating::ready",this)}get host(){return i(this)}};e.style=":host{display:block}.unicode{unicode-bidi:plaintext}";export{e as salla_rating}

package/dist/twilight-components/p-6ccad297.entry.js

@@ -0,0 +1 @@
+import{r as s,h as e,g as r}from"./p-6a5be894.js";import{H as t}from"./p-ed1c00c5.js";const i=class{constructor(e){var r,i;s(this,e),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"),t.setHost(this.host),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=(null===(r=t.getElement('[slot="category"]'))||void 0===r?void 0:r.innerHTML)||'<i class="s-offer-badge-icon sicon-tag"></i><span class="s-offer-badge-text">{name}</span>',this.productSlot=(null===(i=t.getElement('[slot="product"]'))||void 0===i?void 0:i.innerHTML)||this.defaultProductSlot(),salla.offer.event.onExisted((s=>{salla.localData.get("remember-offer-"+s.offer.offer_id)?salla.log("User selected to don't show this offer again."):this.show(s.product_id)}))}async show(s){return salla.api.offer.details(s).then((s=>this.showOffer(s.data[0])))}async showOffer(s){return this.offer=s,this.offer_name=s.name,this.offer_message=s.message,this.modal.show()}rememberMe(s){salla.localData.set("remember-offer-"+this.offer.id,s.target.checked)}addItem(){return this.load(),salla.cart.api.quickAdd(this.dataset.id).finally((()=>this.stop()))}defaultProductSlot(){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></div>'}render(){var s,r;return e("salla-modal",{"sub-title-first":!0,icon:"sicon-special-discount",title:"عروض رائعة في انتظارك، ماذا نتنظر!","sub-title":this.offer_message,ref:s=>this.modal=s,"is-loading":null===this.offer},null!==this.offer?[e("div",{class:"s-offer-scrolled-slider-wrap"},e("div",{class:"s-offer-body s-offer-scrolled-slider"},(null===(s=this.offer.get.categories)||void 0===s?void 0:s.length)>0?this.offer.get.categories.map((s=>e("a",{href:s.urls.customer,class:"s-offer-badge s-offer-slider-item",innerHTML:this.categorySlot.replace(/\{name\}/g,s.name).replace(/\{url\}/g,s.urls.customer)}))):null===(r=this.offer.get.products)||void 0===r?void 0:r.map((s=>e("div",{class:"s-offer-product s-offer-slider-item",id:"product_"+s.id,innerHTML:this.productSlot.replace(/\{name\}/g,s.name).replace(/\{url\}/g,s.url).replace(/\{image\}/g,s.thumbnail).replace(/\{price\}/g,s.has_special_price?salla.money(s.price)+'<span class="s-offer-product-old-price">'+salla.money(s.regular_price)+"</span>":salla.money({amount:s.price,currency:salla.config.get("user").currency_code}))},e("div",{class:"s-offer-btn-wrap"},e("salla-button",{wide:!0,"btn-style":"outline-primary","data-id":s.id,"loader-position":"center",onClick:this.addItem},salla.lang.get("pages.cart.add_to_cart"))))))),e("div",{class:"s-offer-slider-nav"},e("button",{class:"s-offer-nav-btn s-offer-prev-btn"},e("span",{class:"s-offer-nav-btn-icon sicon-keyboard_arrow_right"})),e("button",{class:"s-offer-nav-btn s-offer-next-btn"},e("span",{class:"s-offer-nav-btn-icon sicon-keyboard_arrow_left"})))),e("div",{class:"s-offer-footer",slot:"footer"},this.offer.expiry_date?e("p",{class:"s-offer-expiry"},this.offer_expires_in," ",this.offer.expiry_date):"",e("label",{class:"s-offer-remember-label"},e("input",{type:"checkbox",onChange:s=>this.rememberMe(s),class:"s-offer-remember-input"}),"  ",this.remember_my_choice))]:"")}componentDidRender(){if(this.modal.querySelectorAll("[hidden]").forEach((s=>s.removeAttribute("hidden"))),this.offer&&window.screen.width>639){let s=this.host.querySelector(".s-offer-scrolled-slider-wrap"),e=this.host.querySelector(".s-offer-scrolled-slider"),r=this.host.querySelectorAll(".s-offer-nav-btn"),t=this.host.querySelector(".s-offer-next-btn"),i=this.host.querySelector(".s-offer-prev-btn"),o=this.host.querySelectorAll(".s-offer-slider-item"),a=20,l=0,f=3,n=o[0].offsetWidth,c=o.length*n,d=s.offsetWidth,h=c-d,b=!!document.body.classList.contains("rtl");h>a&&t.classList.add("s-offer-btn-is-active"),window.onresize=function(){d=s.offsetWidth,h=c-d},e.addEventListener("scroll",(function(){let s=Math.abs(e.scrollLeft),r=h-a;s<=a?(t.classList.add("s-offer-btn-is-active"),i.classList.remove("s-offer-btn-is-active")):s<r?(t.classList.add("s-offer-btn-is-active"),i.classList.add("s-offer-btn-is-active")):s>=r&&(t.classList.remove("s-offer-btn-is-active"),i.classList.add("s-offer-btn-is-active"))})),r.forEach((s=>{s.addEventListener("click",(function(){s.classList.contains("s-offer-next-btn")?l++:l--,e.scrollTo({top:0,left:n*f*l*(b?-1:1),behavior:"smooth"})}))}))}}get host(){return r(this)}};i.style=".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%)}";export{i as salla_offer}