@salla.sa/twilight-components 1.0.49 → 1.0.51

package/dist/cjs/{salla-offer.cjs.entry.js → salla-offer-modal.cjs.entry.js}

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
-const sallaOfferCss = "#salla-offer-modal .s-offer-body{-webkit-overflow-scrolling:touch}#salla-offer-modal .s-offer-body::-webkit-scrollbar{display:none}#salla-offer-modal .s-offer-next-btn{background:linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}#salla-offer-modal .s-offer-prev-btn{background:linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}";
+const sallaOfferModalCss = "#salla-offer-modal .s-offer-modal-body{-webkit-overflow-scrolling:touch}#salla-offer-modal .s-offer-modal-body::-webkit-scrollbar{display:none}#salla-offer-modal .s-offer-modal-next-btn{background:linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}#salla-offer-modal .s-offer-modal-prev-btn{background:linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}";
 
-const SallaOffer = class {
+const SallaOfferModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     var _a, _b;
@@ -19,7 +19,7 @@ const SallaOffer = class {
       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.categorySlot = ((_a = Helper.Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="s-offer-modal-badge-icon sicon-tag"></i><span class="s-offer-modal-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🤔
@@ -60,29 +60,29 @@ const SallaOffer = class {
       .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>' +
+    return '<a href={url} class="s-offer-modal-product-image-wrap"><img class="s-offer-modal-product-image" src="{image}" /></a>' +
+      '<div class="s-offer-modal-product-info">' +
+      '   <a href={url} class="s-offer-modal-product-name">{name}</a>' +
+      '   <div class="s-offer-modal-product-price">{price}</div>' +
       '</div>';
   }
   render() {
     var _a, _b;
     return index.h("salla-modal", { id: "salla-offer-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
+      ? [index.h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, index.h("div", { class: "s-offer-modal-body s-offer-modal-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-modal-badge s-offer-modal-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 s-offer-slider-item", 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-modal-product s-offer-modal-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({ 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" }, 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)),
+              ? salla.money(product.price) + '<span class="s-offer-modal-product-old-price">' + salla.money(product.regular_price) + '</span>'
+              : salla.money(product.price)) }, index.h("div", { class: "s-offer-modal-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-modal-slider-nav" }, index.h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" }, index.h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_right" })), index.h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, index.h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_left" })))),
+        index.h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.expiry_date ?
+          index.h("p", { class: "s-offer-modal-expiry" }, this.offer_expires_in, " ", this.offer.expiry_date)
+          : '', index.h("label", { class: "s-offer-modal-remember-label" }, index.h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", this.remember_my_choice)),
       ] : '');
   }
   componentDidRender() {
@@ -91,11 +91,11 @@ const SallaOffer = class {
     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.
+      let sliderWrap = this.host.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = this.host.querySelector('.s-offer-modal-scrolled-slider'), navButtons = this.host.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = this.host.querySelector('.s-offer-modal-next-btn'), prevBtn = this.host.querySelector('.s-offer-modal-prev-btn'), items = this.host.querySelectorAll('.s-offer-modal-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');
+        nexBtn.classList.add('s-offer-modal-btn-is-active');
       window.onresize = function () {
         sliderWrapperSize = sliderWrap.offsetWidth;
         sliderInvisibleSize = sliderSize - sliderWrapperSize;
@@ -105,23 +105,23 @@ const SallaOffer = class {
         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');
+          nexBtn.classList.add('s-offer-modal-btn-is-active');
+          prevBtn.classList.remove('s-offer-modal-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');
+          nexBtn.classList.add('s-offer-modal-btn-is-active');
+          prevBtn.classList.add('s-offer-modal-btn-is-active');
         }
         else if (sliderPosition >= sliderEndOffset) {
-          nexBtn.classList.remove('s-offer-btn-is-active');
-          prevBtn.classList.add('s-offer-btn-is-active');
+          nexBtn.classList.remove('s-offer-modal-btn-is-active');
+          prevBtn.classList.add('s-offer-modal-btn-is-active');
         }
       });
       // Navigation
       navButtons.forEach(btn => {
         btn.addEventListener('click', function () {
-          btn.classList.contains('s-offer-next-btn') ? current++ : current--;
+          btn.classList.contains('s-offer-modal-next-btn') ? current++ : current--;
           slider.scrollTo({
             top: 0,
             left: itemSize * slidesToScroll * current * (isRTL ? -1 : 1),
@@ -133,6 +133,6 @@ const SallaOffer = class {
   }
   get host() { return index.getElement(this); }
 };
-SallaOffer.style = sallaOfferCss;
+SallaOfferModal.style = sallaOfferModalCss;
 
-exports.salla_offer = SallaOffer;
+exports.salla_offer_modal = SallaOfferModal;

package/dist/cjs/{salla-rating.cjs.entry.js → salla-rating-modal.cjs.entry.js}

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
 
-const sallaRatingCss = "#s-rating .unicode{unicode-bidi:plaintext}";
+const sallaRatingModalCss = "#s-rating-modal .unicode{unicode-bidi:plaintext}";
 
-const SallaRating = class {
+const SallaRatingModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.stepsCount = 0;
@@ -60,11 +60,11 @@ const SallaRating = class {
   initiateRating() {
     this.handleWizard();
     this.highlightSelectedStars();
-    salla.document.event.onSubmit('.s-rating-stars-element', function (event) {
+    salla.document.event.onSubmit('.s-rating-modal-stars-element', function (event) {
       // 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.s-rating-hovered');
+      let activeStars = event.target.querySelectorAll('.s-rating-modal-btn-star.s-rating-modal-hovered');
       let selected = activeStars[activeStars.length - 1];
       if (!selected)
         return;
@@ -73,29 +73,29 @@ const SallaRating = class {
       // Get all stars in this form (only search in the form, not the whole document)
       // 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, 's-rating-selected', 's-rating-un-selected', () => index < selectedIndex));
+        .querySelectorAll('.s-rating-modal-btn-star')
+        .forEach((star, index) => Helper.Helper.toggleElement(star, 's-rating-modal-selected', 's-rating-modal-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'));
+      event.target.querySelectorAll('.s-rating-modal-btn-star[aria-pressed="true"]').forEach(star => star.removeAttribute('aria-pressed'));
       // Add aria-pressed role to the selected button
       selected.setAttribute('aria-pressed', '');
     });
   }
   // handle wizard
   handleWizard() {
-    this.steps = this.host.querySelectorAll(".s-rating-step");
-    this.dots = this.host.querySelectorAll(".s-rating-step-dot");
+    this.steps = this.host.querySelectorAll(".s-rating-modal-step");
+    this.dots = this.host.querySelectorAll(".s-rating-modal-step-dot");
     this.showActiveStep();
   }
   showActiveStep(current = null) {
     var _a;
     this.currentTab = current || this.steps[this.currentIndex];
-    Helper.Helper.toggle('.s-rating-step-dot', 's-rating-bg-gray', 's-rating-bg-primary', dot => dot != this.dots[this.currentIndex])
-      .toggle('.s-rating-step', 's-rating-active', 's-rating-hidden', tab => tab == this.currentTab);
+    Helper.Helper.toggle('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
+      .toggle('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
     if (this.currentIndex != 0) {
       // the animation
-      Helper.Helper.toggleElement(this.currentTab, 's-rating-unactive', 's-rating-hidden', () => true);
-      setTimeout(() => Helper.Helper.toggleElement(this.currentTab, 's-rating-active', 's-rating-unactive', () => true), 300);
+      Helper.Helper.toggleElement(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
+      setTimeout(() => Helper.Helper.toggleElement(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
     }
     // Btn text
     let nextType = (_a = this.steps[this.currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.dataset.type;
@@ -104,9 +104,9 @@ const SallaRating = class {
     setTimeout(() => { var _a; return this.body.setAttribute('style', 'height:' + ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 'px'); });
   }
   highlightSelectedStars() {
-    let hover = ['s-rating-hovered'];
-    Helper.Helper.all('.s-rating-stars-element', el => {
-      let starElements = el.querySelectorAll('.s-rating-btn-star');
+    let hover = ['s-rating-modal-hovered'];
+    Helper.Helper.all('.s-rating-modal-stars-element', el => {
+      let starElements = el.querySelectorAll('.s-rating-modal-btn-star');
       // remove hovered state from stars ---
       el.addEventListener('mouseout', () => starElements.forEach(star => star.classList.remove(...hover)));
       starElements.forEach((starElement, index) => {
@@ -127,7 +127,7 @@ const SallaRating = class {
   }
   previousTab() {
     this.currentIndex > 0 && this.currentIndex--;
-    Helper.Helper.toggleElement(this.backBtn, 's-rating-unvisiable', 'block', () => this.currentIndex == 0);
+    Helper.Helper.toggleElement(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
     this.showActiveStep();
   }
   submit() {
@@ -135,10 +135,10 @@ const SallaRating = class {
     salla.config.canLeave = false;
     this.nextBtn.load()
       .then(() => this.submittedBefore() || this.sendFeedback())
-      .then(() => this.currentTab.querySelectorAll('[name],.s-rating-btn-star').forEach(el => el.setAttribute('disabled', '')))
+      .then(() => this.currentTab.querySelectorAll('[name],.s-rating-modal-btn-star').forEach(el => el.setAttribute('disabled', '')))
       .then(() => this.currentIndex < this.stepsCount && this.currentIndex++)
       .then(() => this.showActiveStep())
-      .then(() => Helper.Helper.toggle('#prev-btn', 'block', 's-rating-unvisiable', () => true))
+      .then(() => Helper.Helper.toggle('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
       .finally(() => {
       this.nextBtn.stop();
       salla.config.canLeave = true;
@@ -155,8 +155,8 @@ const SallaRating = class {
     }
     rating = rating || this.currentTab;
     let stars = rating.querySelector('.rating_hidden_input').value;
-    let comment = rating.querySelector('.s-rating-comment');
-    let validationMessage = rating.querySelector('.s-rating-validation-msg');
+    let comment = rating.querySelector('.s-rating-modal-comment');
+    let validationMessage = rating.querySelector('.s-rating-modal-validation-msg');
     if (stars && comment.value && comment.value.length > 3) {
       comment.classList.remove('s-has-error');
       validationMessage.innerHTML = '';
@@ -194,25 +194,25 @@ const SallaRating = class {
       this.thanksTime.remove();
       this.hide().then(() => window.location.reload());
     }, 1000);
-    this.host.querySelector('.s-rating-footer').classList.add('s-rating-unvisiable');
+    this.host.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
     this.showActiveStep(this.thanksTab);
   }
   renderRatingStars(size, name = 'rating') {
-    return (index.h("form", { class: "s-rating-stars-element" }, index.h("input", { type: "hidden", class: "rating_hidden_input", name: name, value: "" }), [1, 2, 3, 4, 5].map(star => index.h("button", { type: "submit", class: `s-rating-btn-star s-rating-btn-star-` + size, "data-star": star }, index.h("i", { class: "sicon-star2" })))));
+    return (index.h("form", { class: "s-rating-modal-stars-element" }, index.h("input", { type: "hidden", class: "rating_hidden_input", name: name, value: "" }), [1, 2, 3, 4, 5].map(star => index.h("button", { type: "submit", class: `s-rating-modal-btn-star s-rating-modal-btn-star-` + size, "data-star": star }, index.h("i", { class: "sicon-star2" })))));
   }
   // render
   render() {
     return (index.h(index.Host, { id: "s-rating" }, index.h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
-      ? [index.h("div", { class: "s-rating-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
-          index.h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden", "data-type": "store" }, index.h("div", { class: "s-rating-rounded-icon" }, index.h("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" })), index.h("h2", { class: "s-rating-title" }, this.rate_the_store), index.h("div", { class: "s-rating-stars-company" }, " ", this.renderRatingStars('large')), index.h("textarea", { id: "storeReview", name: "comment", class: "s-rating-comment", placeholder: this.write_store_rate }), index.h("small", { class: "s-rating-validation-msg" }))
+      ? [index.h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el }, this.order.testimonials_enabled ?
+          index.h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" }, index.h("div", { class: "s-rating-modal-rounded-icon" }, index.h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })), index.h("h2", { class: "s-rating-modal-title" }, this.rate_the_store), index.h("div", { class: "s-rating-modal-stars-company" }, " ", this.renderRatingStars('large')), index.h("textarea", { id: "storeReview", name: "comment", class: "s-rating-modal-comment", placeholder: this.write_store_rate }), index.h("small", { class: "s-rating-modal-validation-msg" }))
           : '', this.order.products_enabled
-          ? index.h("section", { class: "s-rating-step s-rating-hidden", "data-type": "products" }, this.order.products.map((item, index$1) => index.h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": this.rate_product_stars }, index.h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-product-img" }), index.h("div", { class: "s-rating-product-details" }, index.h("h3", { class: "s-rating-product-title" }, " ", item.product.name), index.h("div", { class: "s-rating-stars-product" }, " ", this.renderRatingStars('small', `products[${index$1}][rating]`)), index.h("input", { type: "hidden", name: `products[${index$1}][product_id]`, value: item.product.id }), index.h("textarea", { placeholder: this.write_product_rate, name: `products[${index$1}][comment]`, class: "s-rating-comment" }), index.h("small", { class: "s-rating-validation-msg" })))))
+          ? index.h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products" }, this.order.products.map((item, index$1) => index.h("div", { class: "rating-outer-form s-rating-modal-product", "data-stars-error": this.rate_product_stars }, index.h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-modal-product-img" }), index.h("div", { class: "s-rating-modal-product-details" }, index.h("h3", { class: "s-rating-modal-product-title" }, " ", item.product.name), index.h("div", { class: "s-rating-modal-stars-product" }, " ", this.renderRatingStars('small', `products[${index$1}][rating]`)), index.h("input", { type: "hidden", name: `products[${index$1}][product_id]`, value: item.product.id }), index.h("textarea", { placeholder: this.write_product_rate, name: `products[${index$1}][comment]`, class: "s-rating-modal-comment" }), index.h("small", { class: "s-rating-modal-validation-msg" })))))
           : '', this.order.shipping_enabled
-          ? index.h("div", { class: "rating-outer-form s-rating-step-wrap s-rating-step s-rating-hidden", "data-type": "shipping" }, index.h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo
-            ? index.h("div", { class: "s-rating-rounded-icon" }, index.h("img", { src: this.order.shipping.company.logo, class: "s-rating-shipping-logo", alt: this.order.shipping.company.name }))
-            : index.h("span", { class: "s-rating-icon sicon-shipping-fast" }), index.h("div", { class: "s-rating-title" }, " ", this.rate_shipping + ' ' + this.order.shipping.company.name), index.h("div", { class: "s-rating-stars-company" }, this.renderRatingStars('large')), index.h("textarea", { name: "comment", class: "s-rating-comment", placeholder: this.write_shipping_rate }), index.h("small", { class: "s-rating-validation-msg" }))
-          : '', index.h("div", { class: "s-rating-thanks s-rating-hidden", ref: el => this.thanksTab = el }, index.h("span", { class: "s-rating-icon sicon-check-circle2" }), index.h("h3", { class: "s-rating-thanks-title" }, this.thanks), index.h("div", { class: "s-rating-thanks-msg", innerHTML: this.order.thanks_message }), index.h("time", { class: "s-rating-thanks-time", ref: el => this.thanksTime = el }))),
-        index.h("div", { class: "s-rating-footer" }, index.h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-btn s-rating-unvisiable" }, this.back), this.stepsCount > 1 ? index.h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => index.h("li", { class: 's-rating-bg-gray s-rating-step-dot' }))) : '', index.h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, this.next)),]
+          ? index.h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "shipping" }, index.h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo
+            ? index.h("div", { class: "s-rating-modal-rounded-icon" }, index.h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))
+            : index.h("span", { class: "s-rating-modal-icon sicon-shipping-fast" }), index.h("div", { class: "s-rating-modal-title" }, " ", this.rate_shipping + ' ' + this.order.shipping.company.name), index.h("div", { class: "s-rating-modal-stars-company" }, this.renderRatingStars('large')), index.h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: this.write_shipping_rate }), index.h("small", { class: "s-rating-modal-validation-msg" }))
+          : '', index.h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el }, index.h("span", { class: "s-rating-modal-icon sicon-check-circle2" }), index.h("h3", { class: "s-rating-modal-thanks-title" }, this.thanks), index.h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }), index.h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))),
+        index.h("div", { class: "s-rating-modal-footer" }, index.h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, this.back), this.stepsCount > 1 ? index.h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => index.h("li", { class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '', index.h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, this.next)),]
       : '')));
   }
   componentDidRender() {
@@ -224,6 +224,6 @@ const SallaRating = class {
   }
   get host() { return index.getElement(this); }
 };
-SallaRating.style = sallaRatingCss;
+SallaRatingModal.style = sallaRatingModalCss;
 
-exports.salla_rating = SallaRating;
+exports.salla_rating_modal = SallaRatingModal;

package/dist/cjs/salla-search-99d08b1f.js

@@ -0,0 +1,79 @@
+'use strict';
+
+const index = require('./index-0b5b5867.js');
+const Helper = require('./Helper-98cc9f18.js');
+
+const sallaSearchCss = "#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:50%;transform:translateY(-50%)}";
+
+const SallaSearch = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    var _a;
+    Helper.Helper.setHost(this.host);
+    this.productSlot = ((_a = Helper.Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
+    salla.event.on('search::show', () => this.modal.show());
+    salla.event.on('languages::translations.loaded', () => {
+      this.placeholder = salla.lang.get('blocks.header.search_placeholder');
+      this.noResultsText = salla.lang.get('common.elements.no_options');
+    });
+  }
+  onModalOpen() {
+    this.modal.querySelector('.s-search-input').focus();
+  }
+  onModalClose() {
+    this.modal.querySelector('.s-search-input').value = '';
+    this.results = undefined;
+    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>';
+  }
+  //todo:: reset data when closing
+  search(e) {
+    Helper.Helper.hideElement(this.noResults);
+    if (e.target.value.length === 0) {
+      this.results = undefined;
+      this.afterSearching();
+      return;
+    }
+    if (e.target.value.length <= 2) {
+      return;
+    }
+    //run loading spinner or stop it
+    Helper.Helper.toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
+    salla.search.api.search(e.target.value)
+      .then(response => this.results = response)
+      .catch(err => err !== 'Query Same As Previous!' ? this.results = undefined : null)
+      .finally(() => this.afterSearching(/*isEmpty*/ false));
+  }
+  afterSearching(isEmpty = true) {
+    var _a;
+    this.noResults.style.display = isEmpty || ((_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length) > 0 ? 'none' : 'block';
+    Helper.Helper.toggleElement(this.container, 's-search-container-open', 'no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; })
+      .toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
+    salla.search.api.previousQuery = ''; //avoid having error 'Query Same As Previous' after reopen modal;
+  }
+  render() {
+    var _a;
+    return (index.h("salla-modal", { position: "top", id: "s-search-modal", ref: modal => this.modal = modal }, index.h("div", { class: "s-search-container", ref: container => this.container = container }, index.h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e) }), index.h("span", { class: "s-search-icon" }, index.h("i", { class: "sicon-search", ref: el => this.searchIcon = el })), index.h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
+      _a.data.map(item => index.h("a", { href: item.url, class: "s-search-product", innerHTML: this.productSlot
+          .replace(/\{name\}/g, item.name)
+          .replace(/\{price\}/g, item.price) //todo:: get discounted price too
+          .replace(/\{image\}/g, item.image_url) })), index.h("p", { ref: el => this.noResults = el, class: "s-search-no-results" }, this.noResultsText)))));
+  }
+  /**
+   * Run it one time after load
+   */
+  componentDidLoad() {
+    this.afterSearching();
+  }
+  get host() { return index.getElement(this); }
+};
+SallaSearch.style = sallaSearchCss;
+
+exports.SallaSearch = SallaSearch;