@salla.sa/twilight-components 1.0.16 → 1.0.17

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

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0b5b5867.js');
+const Helper = require('./Helper-8852feaa.js');
+
+const SallaProductAvailability = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isUser = Helper.Helper.isUser();
+    this.buttonText = salla.lang.get('pages.products.notify_availability');
+    this.countryCode = salla.config.country_code || 'SA';
+    this.subscribeText = salla.lang.get('common.elements.submit');
+    this.cancelText = salla.lang.get('common.elements.cancel');
+    this.subTitle = salla.lang.get('pages.products.notify_availability_subtitle');
+    this.mobileLabel = salla.lang.get('common.elements.mobile');
+    this.emailLabel = salla.lang.get('common.elements.email');
+    this.mobilePlaceholder = salla.lang.get('common.elements.mobile_placeholder');
+    this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder');
+    this.productId = salla.config.page.id;
+    this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
+    this.isSubscribed = false;
+    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');
+  }
+  channelsWatcher(newValue) {
+    this.channels_ = newValue.split(',');
+  }
+  async submit() {
+    if (this.isUser) {
+      return salla.api.product.availabilitySubscribe(this.productId)
+        .then(() => this.isSubscribed = true);
+    }
+    let data = { id: this.productId, country_code: this.countryCode };
+    if (this.mobile.value !== '') {
+      data['mobile'] = this.mobile.value;
+    }
+    if (this.email.value !== '') {
+      data['email'] = this.email.value;
+    }
+    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.btn.stop())
+      .then(() => this.modal.hide())
+      .catch(() => this.btn.stop() && this.btn.enable());
+  }
+  render() {
+    return (index.h(index.Host, null, this.isSubscribed
+      ? index.h("div", { class: "s-product-availability-subscribed" }, this.subscribedMessage)
+      : index.h("slot", null, index.h("salla-button", { wide: true, onClick: () => this.isUser ? this.submit() : this.modal.show() }, this.buttonText)), this.isUser || this.isSubscribed ? '' : this.renderModal()));
+  }
+  renderModal() {
+    return (index.h("salla-modal", { ref: modal => this.modal = modal, title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", width: "md" }, index.h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
+      index.h("label", { class: "s-product-availability-label" }, this.emailLabel),
+      index.h("input", { class: "s-product-availability-input", placeholder: this.emailPlaceholder, ref: el => this.email = el, type: "email" })
+    ] : '', this.channels_.includes('sms') ? [
+      index.h("label", { class: "s-product-availability-label" }, this.mobileLabel),
+      index.h("input", { class: "s-product-availability-input", placeholder: this.mobilePlaceholder, ref: el => this.mobile = el, type: "text" }),
+      index.h("input", { type: "hidden", value: this.countryCode }),
+    ] : ''), index.h("div", { slot: "footer", class: "s-product-availability-footer" }, index.h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.subscribeText), index.h("salla-button", { wide: true, "btn-style": "outline" }, this.cancelText))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "channels": ["channelsWatcher"]
+  }; }
+};
+
+exports.salla_product_availability = SallaProductAvailability;

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

@@ -0,0 +1,300 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0b5b5867.js');
+const Helper = require('./Helper-8852feaa.js');
+
+const sallaRatingCss = ":host{display:block}.unicode{unicode-bidi:plaintext}";
+
+const SallaRating = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.order = {
+      shipping: { id: 5622 },
+      products: [
+        {
+          "title": "ميكروفون عالى الجودة",
+          "image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/pMdEEyMVpZFj4L1Hrdm2g48AuiSx0TrKULBiOnPo.jpg",
+          "price": "‏10,978.00 ر.س",
+          "qty": "‏2",
+          "totalBefore": "‏1120 ر.س",
+          "discount": "-5%",
+          "total": "‏1064 ر.س",
+          "id": "2314513454",
+          "getOptimusRouteKey": "7351233357"
+        },
+        {
+          "title": "ميكروفون عالى الجودة",
+          "image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/pMdEEyMVpZFj4L1Hrdm2g48AuiSx0TrKULBiOnPo.jpg",
+          "price": "‏10,978.00 ر.س",
+          "qty": "‏2",
+          "totalBefore": "‏1120 ر.س",
+          "discount": "-5%",
+          "total": "‏1064 ر.س",
+          "id": "2314513454",
+          "getOptimusRouteKey": "7351233357"
+        },
+        {
+          "title": "ساعة ذكية بنظام اندرويد",
+          "image": "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/T4kTqYNuPAZmPMLw1bx92RnjVMZyFszVXOUZQsFJ.jpg",
+          "price": "‏10,978.00 ر.س",
+          "qty": "‏2",
+          "totalBefore": "‏1120 ر.س",
+          "discount": "-5%",
+          "total": "‏1064 ر.س",
+          "id": "679822376",
+          "getOptimusRouteKey": "73233357"
+        }
+      ],
+      storeLogo: "https://salla-dev.s3.eu-central-1.amazonaws.com/Mvyk/X3NKcY7nhaFQlR7kBBHvfDpMY48cerunKrmDA1gi.png",
+      shippingLogo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScPt4R6KaKDldrXb-9pUljFwL3m6A72BhN6p1qZJKprwC6VbCWC_8ASZgiJAoL_l7DepM&usqp=CAU"
+    };
+    /**
+     * Set to true to display store rating step
+    */
+    this.isStoreRating = false;
+    /**
+     * Set to true to display products rating step
+    */
+    this.isProductsRating = false;
+    /**
+     * Set to true to display shipping rating step
+    */
+    this.isShippingRating = false;
+    this.ratingChain = Promise.resolve();
+    this.stepsCount = 0;
+    Helper.Helper.setHost(this.host);
+  }
+  async show() {
+    return this.modal.show();
+  }
+  async hide() {
+    return this.modal.hide();
+  }
+  componentWillLoad() {
+    this.stepsCount = [this.isStoreRating, this.isProductsRating, this.isShippingRating].filter(item => item).length;
+    // this.getData();
+  }
+  componentDidRender() {
+    this.show();
+    this.initiateRating();
+  }
+  initiateRating() {
+    this.handleWizard();
+    this.handleSubmitRating();
+    this.starsRating();
+    this.highlightSelectedStars();
+  }
+  // getdata
+  // private getData() {
+  //   salla.api.order.endpointsMethods.details = 'get'
+  //   salla.order.api.details(salla.config.page.id).then(data => console.log(''));
+  // }
+  // handle wizard
+  handleWizard() {
+    let index = 0, steps = this.host.querySelectorAll(".s-rating-step"), dots = this.host.querySelectorAll(".s-rating-step-dot"), nextBtnText = this.host.querySelector('#next-btn .s-button-text');
+    this.setModalHeight(steps[0]);
+    this.showActiveStep(steps, dots, index, nextBtnText);
+    Helper.Helper.onClick("#prev-btn", () => {
+      index > 0 && index--;
+      this.showActiveStep(steps, dots, index, nextBtnText);
+      index == 0 && Helper.Helper.toggle('#prev-btn', 's-rating-unvisiable', 'block', () => true);
+    });
+    Helper.Helper.onClick("#next-btn", () => {
+      this.ratingValidation();
+      if (index == this.stepsCount - 1) {
+        salla.event.dispatch("submit::order-rating");
+      }
+      else {
+        index < this.stepsCount - 1 && index++;
+        this.showActiveStep(steps, dots, index, nextBtnText);
+        Helper.Helper.toggle('#prev-btn', 'block', 's-rating-unvisiable', () => true);
+      }
+    });
+  }
+  showActiveStep(steps, dots, index, nextBtnText) {
+    var _a;
+    // Active step
+    Helper.Helper.toggle('.s-rating-step', 's-rating-hidden', 's-rating-active', () => true);
+    Helper.Helper.toggleElement(steps[index], 's-rating-unactive', 's-rating-hidden', () => true);
+    setTimeout(() => Helper.Helper.toggleElement(steps[index], 's-rating-active', 's-rating-unactive', () => true), 200);
+    // Hanle dots
+    Helper.Helper.toggle('.s-rating-step-dot', 's-rating-bg-gray', 's-rating-bg-primary', () => true);
+    this.stepsCount > 1 && Helper.Helper.toggleElement(dots[index], 's-rating-bg-primary', 's-rating-bg-gray', () => true);
+    // Btn text
+    nextBtnText.innerHTML = ((_a = steps[index + 1]) === null || _a === void 0 ? void 0 : _a.dataset.stepName) || salla.lang.get('pages.rating.send_ratings');
+    this.setModalHeight(steps[index]);
+  }
+  setModalHeight(current) {
+    const wrapper = this.host.querySelector('.s-rating-wrapper');
+    setTimeout(() => wrapper === null || wrapper === void 0 ? void 0 : wrapper.setAttribute('style', 'height:' + (current === null || current === void 0 ? void 0 : current.scrollHeight) + 'px'));
+  }
+  // Listen to submit::order-rating event used in handleWizard()
+  handleSubmitRating() {
+    salla.event.on('submit::order-rating', () => this.sendRating().then(() => {
+      // Handle timer
+      let thankYouView = this.host.querySelector('.s-rating-thanks'), seconds = 10;
+      let timeToClose = setInterval(() => {
+        seconds--;
+        this.host.querySelector('.s-rating-thanks-time').innerHTML = `00:0${seconds}`;
+        if (seconds == 0) {
+          this.hide();
+          clearInterval(timeToClose);
+        }
+      }, 1000);
+      // Hide steps and show thanks msg 
+      Helper.Helper.toggle('.s-rating-step', 's-rating-hidden', 's-rating-active', () => true);
+      this.host.querySelector('.s-rating-footer').classList.add('s-rating-unvisiable');
+      Helper.Helper.toggleElement(thankYouView, 's-rating-unactive', 's-rating-hidden', () => true);
+      setTimeout(() => Helper.Helper.toggleElement(thankYouView, 's-rating-active', 's-rating-unactive', () => true), 200);
+      this.setModalHeight(thankYouView);
+    }));
+  }
+  // handle star rating 
+  starsRating() {
+    let selectedClasses = ['selected'];
+    // Listen for form submissions
+    salla.document.event.onSubmit('.s-rating-stars-element', function (event) {
+      // Prevent form from submitting
+      event.preventDefault();
+      // Get the selected star - activeElement is not supported in safari
+      var activeStars = event.target.querySelectorAll('.s-rating-btn-star.hovered');
+      var selected = activeStars[activeStars.length - 1];
+      if (!selected)
+        return;
+      var selectedIndex = parseInt(selected.dataset.star, 10);
+      event.target.querySelector('.rating_hidden_input').value = selectedIndex;
+      // 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(function (star, index) {
+        if (index < selectedIndex) {
+          // Selected star or before it, Add highlighting
+          star.classList.add(...selectedClasses);
+          return;
+        }
+        // After selected star, Remove highlight
+        star.classList.remove(...selectedClasses);
+      });
+      // Remove aria-pressed from any previously selected star
+      var previousRating = event.target.querySelector('.s-rating-btn-star[aria-pressed="true"]');
+      if (previousRating) {
+        previousRating.removeAttribute('aria-pressed');
+      }
+      // Add aria-pressed role to the selected button
+      selected.setAttribute('aria-pressed', true);
+    });
+  }
+  highlightSelectedStars() {
+    let hover = ['hovered'];
+    Helper.Helper.all('.s-rating-stars-element', el => {
+      let starElements = el.querySelectorAll('.s-rating-btn-star');
+      // remove hovered state from stars ---
+      el.addEventListener('mouseout', () => starElements.forEach(star => star.classList.remove(...hover)));
+      starElements.forEach((starElement, index) => {
+        starElement.addEventListener('mouseover', () => {
+          starElement.classList.add(...hover);
+          if (index <= 1) {
+            starElement.previousElementSibling.tagName === 'BUTTON' ? starElement.previousElementSibling.classList.add(...hover) : null;
+          }
+          else {
+            for (let i = 0; i < index; i++) {
+              starElements[i].classList.add(...hover);
+            }
+          }
+        });
+        starElement.addEventListener('mouseout', () => {
+          starElement.classList.contains(...hover) ? starElement.classList.remove(...hover) : null;
+        });
+      });
+    });
+  }
+  // send feedback rating and validation
+  sendRating() {
+    Helper.Helper.all('.s-rating-step', ratingStep => {
+      let type = ratingStep.dataset.type;
+      let formsData = [];
+      ratingStep.querySelectorAll('.rating-outer-form')
+        .forEach((form) => {
+        let formData = {};
+        form.querySelectorAll('[name]')
+          .forEach(function (input) {
+          let inputData = salla.helpers.inputData(input.name, input.value, formData);
+          formData[inputData.name] = inputData.value;
+        });
+        formsData = [];
+        formsData.push(formData);
+        this.sendFeedback(type, formsData);
+      });
+    });
+    return this.ratingChain;
+  }
+  sendFeedback(type, formsData) {
+    if (!formsData || formsData.length == 0) {
+      return;
+    }
+    this.nextBtn.load();
+    salla.config.canLeave = false;
+    this.ratingChain = salla.feedback.api[type](formsData[0])
+      .then(function () {
+      salla.config.canLeave = true;
+    }).catch(() => salla.config.canLeave = true);
+  }
+  ratingValidation() {
+    let errorMsg = '';
+    document.querySelectorAll('.s-rating-step.s-rating-active')
+      .forEach((ratingSection) => {
+      ratingSection.querySelectorAll('.rating-outer-form')
+        .forEach((rating) => {
+        let ratingInput = rating.querySelector('.rating_hidden_input');
+        let commentInput = rating.querySelector('.s-rating-comment');
+        let validationMessage = rating.querySelector('.s-rating-validation-msg');
+        if (ratingInput.value && commentInput.value && commentInput.value.length > 3) {
+          commentInput.classList.remove('s-rating-has-error');
+          validationMessage.innerHTML = '';
+          return;
+        }
+        else if (commentInput.value && commentInput.value.length > 3) {
+          commentInput.classList.remove('s-rating-has-error');
+        }
+        else {
+          commentInput.classList.add('s-rating-has-error');
+        }
+        errorMsg = ratingInput.value
+          ? (salla.lang.get('common.errors.not_less_than_chars', { chars: 4 }) + ' ' + commentInput.getAttribute('placeholder'))
+          : (rating.dataset.starsError || salla.lang.get('pages.rating.rate_store_stars'));
+        validationMessage.innerHTML = errorMsg;
+      });
+    });
+    //Fire error to prevent going to next step
+    if (errorMsg) {
+      throw new Error(errorMsg);
+    }
+  }
+  // render
+  render() {
+    return (index.h(index.Host, null, index.h("salla-modal", { class: "hidden", "modal-width": "w-[800px]", ref: modal => this.modal = modal, title: salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.orderId + ')</span>' }, index.h("div", { class: "s-rating-wrapper " }, this.isStoreRating && this.renderStoreRating(), this.isProductsRating && this.renderProductsRating(), this.isShippingRating && this.renderShippingRating(), this.renderThanksView()), index.h("div", { class: "s-rating-footer" }, index.h("button", { id: "prev-btn", class: "s-rating-btn s-rating-unvisiable" }, salla.lang.get('pages.order.rating_prev')), this.stepsCount > 1 ?
+      index.h("ul", { class: "s-rating-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(index$1 => index.h("li", { class: `${index$1 == 0 ? 's-rating-bg-primary' : 's-rating-bg-gray'} s-rating-step-dot` }))) : '', index.h("salla-button", { id: "next-btn", ref: nextBtn => this.nextBtn = nextBtn }, "\u0627\u0644\u062A\u0627\u0644\u064A")))));
+  }
+  renderStoreRating() {
+    return (index.h("section", { class: "s-rating-step", "data-type": "store", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.store') }, index.h("div", { class: "rating-outer-form s-rating-step-wrap", "data-stars-error": salla.lang.get('pages.rating.rate_store_stars') }, index.h("input", { type: "hidden", name: "order_id", value: this.orderId }), index.h("input", { type: "hidden", name: "type", value: "store" }), index.h("div", { class: "s-rating-rounded-icon" }, index.h("img", { src: this.order.storeLogo, alt: "store name", class: "s-rating-store-logo" })), index.h("h2", { class: "s-rating-title" }, salla.lang.get('pages.rating.rate_the_store')), index.h("div", { class: "s-rating-stars-company" }, " ", this.getStarsRating('large')), index.h("textarea", { id: "storeReview", name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), index.h("small", { class: "s-rating-validation-msg" }))));
+  }
+  renderShippingRating() {
+    return (index.h("section", { class: "s-rating-step", "data-type": "shipping", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.shipping') }, index.h("div", { class: "rating-outer-form s-rating-step-wrap", "data-stars-error": salla.lang.get('pages.rating.rate_shipping_stars') }, index.h("input", { type: "hidden", name: "order_id", value: this.orderId }), index.h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.id }), index.h("input", { type: "hidden", name: "type", value: "shipping" }), index.h("div", { class: "s-rating-rounded-icon" }, index.h("img", { src: this.order.shippingLogo, alt: "company name", class: "s-rating-shipping-logo" })), index.h("h2", { class: "s-rating-title" }, " ", salla.lang.get('pages.rating.rate_shipping'), " \u0627\u0631\u0627\u0645\u0643\u0633"), index.h("div", { class: "s-rating-stars-company" }, " ", this.getStarsRating('large')), index.h("textarea", { id: "shippingReview", name: "comment", class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), index.h("small", { class: "s-rating-validation-msg" }))));
+  }
+  renderProductsRating() {
+    return (index.h("section", { class: "s-rating-step", "data-type": "product", "data-step-name": salla.lang.get('pages.rating.rate') + ' ' + salla.lang.get('pages.rating.products') }, this.order.products.map((item, index$1) => index.h("div", { class: "rating-outer-form s-rating-product", "data-stars-error": salla.lang.get('pages.order.rate_product_stars') }, index.h("img", { src: item.image, alt: item.title, class: "s-rating-product-img" }), index.h("div", { class: "s-rating-product-details" }, index.h("h3", { class: "s-rating-product-title" }, " ", item.title), index.h("div", { class: "s-rating-stars-product" }, " ", this.getStarsRating('small')), index.h("input", { type: "hidden", name: "order_id", value: this.orderId }), index.h("input", { type: "hidden", name: `products[${index$1}][product_id]`, value: item.getOptimusRouteKey }), index.h("input", { type: "hidden", name: "type", value: "products" }), index.h("textarea", { "data-product-id": item.id, name: `products[${index$1}][comment]`, id: `productReview_${item.id}`, class: "s-rating-comment", placeholder: salla.lang.get('pages.rating.write_product_rate') }), index.h("small", { class: "s-rating-validation-msg" }))))));
+  }
+  renderThanksView() {
+    return (index.h("div", { class: "s-rating-thanks s-rating-hidden" }, index.h("span", { class: "s-rating-thanks-icon sicon-check-circle2" }), index.h("h3", { class: "s-rating-thanks-title" }, salla.lang.get('pages.rating.thanks')), index.h("div", { class: "s-rating-thanks-msg", innerHTML: this.thanksMsg }), index.h("a", { href: "#!", onClick: () => this.hide(), class: "s-rating-thanks-btn" }, "\u0639\u0648\u062F\u0629 \u0625\u0644\u064A \u062A\u0641\u0627\u0635\u064A\u0644 \u0627\u0644\u0637\u0644\u0628"), index.h("time", { class: "s-rating-thanks-time" })));
+  }
+  getStarsRating(size) {
+    return (index.h("form", { class: "s-rating-stars-element" }, index.h("input", { type: "hidden", class: "rating_hidden_input", name: "rating", 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" })))));
+  }
+  get host() { return index.getElement(this); }
+};
+SallaRating.style = sallaRatingCss;
+
+exports.salla_rating = SallaRating;

package/dist/cjs/salla-search-28da4616.js

@@ -0,0 +1,81 @@
+'use strict';
+
+const index = require('./index-0b5b5867.js');
+const Helper = require('./Helper-8852feaa.js');
+
+const SallaSearch = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    var _a, _b;
+    this.results = [];
+    /**
+     * Override search placeholder.
+     */
+    this.placeholder = salla.lang.get('blocks.header.search_placeholder');
+    /**
+     * Override no results error message.
+     */
+    this.noResultsText = salla.lang.get('common.elements.no_options');
+    Helper.Helper.setHost(this.host);
+    this.buttonSlot = ((_a = Helper.Helper.getElement('[slot="button"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="sicon-search"></i>';
+    this.productSlot = ((_b = Helper.Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.getDefaultProductSlot();
+  }
+  onModalClose() {
+    Helper.Helper.getElement('.s-search-input').value = '';
+    this.results = [];
+    this.afterSearching();
+  }
+  getDefaultProductSlot() {
+    return '<a target="_blank" href={url} class="s-search-product-image-container">' +
+      '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
+      '</a>' +
+      '<div class="s-search-product-details">' +
+      '  <div class="s-search-product-name">{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 = [];
+      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.results)
+      .catch(err => err !== 'Query Same As Previous!' ? this.results = [] : null)
+      .finally(() => this.afterSearching(/*isEmpty*/ false));
+  }
+  afterSearching(isEmpty = true) {
+    this.noResults.style.display = isEmpty || this.results.length > 0 ? 'none' : 'block';
+    Helper.Helper.toggleElement(this.container, 's-search-container-open', 'no-results', () => this.results.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(index.Host, { class: "s-search" }, index.h("button", { onClick: () => this.modal.show(), class: "s-search-button", innerHTML: this.buttonSlot }), index.h("salla-modal", { ref: modal => this.modal = modal }, index.h("div", { class: "s-search-container", slot: "body", 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.map(item => {
+        var _a;
+        return index.h("div", { class: "s-search-product", innerHTML: this.productSlot
+            .replace(/\{name\}/g, item.title)
+            .replace(/\{price\}/g, (_a = item.price) === null || _a === void 0 ? void 0 : _a.after) //todo:: get discounted price too
+            .replace(/\{url\}/g, item.url)
+            .replace(/\{image\}/g, item.thumb) });
+      }), 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); }
+};
+
+exports.SallaSearch = SallaSearch;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const sallaSearch = require('./salla-search-28da4616.js');
+require('./index-0b5b5867.js');
+require('./Helper-8852feaa.js');
+
+
+
+exports.salla_search = sallaSearch.SallaSearch;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-0b5b5867.js');
+
+/*
+ Stencil Client Patch Browser v2.8.1 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('twilight-components.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["salla-button_4.cjs",[[0,"salla-login",{"loginTypeTitle":[1,"login-type-title"],"loginText":[1,"login-text"],"smsLabel":[1,"sms-label"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"enterText":[1,"enter-text"],"bySMSText":[1,"by-s-m-s-text"],"byEmailText":[1,"by-email-text"],"backText":[1,"back-text"],"show":[64]},[[0,"verified","onVerified"],[0,"modalClosed","onModalClose"]]],[0,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[1],"by":[1],"autoReload":[4,"auto-reload"],"getCode":[64],"show":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"isClosable":[1028,"is-closable"],"width":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-localization.cjs",[[4,"salla-localization",{"languagesTitle":[1,"languages-title"],"currenciesTitle":[1,"currencies-title"],"ok":[1],"show":[64],"hide":[64],"submit":[64]}]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"buttonText":[1,"button-text"],"countryCode":[1,"country-code"],"subscribeText":[1,"subscribe-text"],"cancelText":[1,"cancel-text"],"subTitle":[1,"sub-title"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"mobilePlaceholder":[1,"mobile-placeholder"],"emailPlaceholder":[1,"email-placeholder"],"productId":[2,"product-id"],"subscribedMessage":[1,"subscribed-message"],"isSubscribed":[1028,"is-subscribed"],"submit":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"thanksMsg":[1,"thanks-msg"],"isStoreRating":[4,"is-store-rating"],"isProductsRating":[4,"is-products-rating"],"isShippingRating":[4,"is-shipping-rating"],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[4,"salla-offer",{"show":[64]}]]],["salla-search.cjs",[[0,"salla-search",{"placeholder":[1],"noResultsText":[1,"no-results-text"],"results":[32]},[[0,"modalClosed","onModalClose"]]]]]], options);
+});

package/dist/collection/Helpers/Helper.js

@@ -0,0 +1,19 @@
+class Helper extends salla.AppHelpers {
+  setHost(host) {
+    this.host = host;
+  }
+  getElement(selector) {
+    return this.host.querySelector(selector);
+  }
+  getAttribute(selector, attribute) {
+    var _a;
+    return (_a = this.getElement(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(attribute);
+  }
+  val(selector) {
+    return this.getAttribute(selector, 'value');
+  }
+  isUser() {
+    return !!salla.config.is_user;
+  }
+}
+export default new Helper;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,21 @@
+{
+  "entries": [
+    "./components/salla-login/salla-login.js",
+    "./components/salla-search/salla-search.js",
+    "./components/salla-branches/salla-branches.js",
+    "./components/salla-button/salla-button.js",
+    "./components/salla-localization/salla-localization.js",
+    "./components/salla-modal/salla-modal.js",
+    "./components/salla-offer/salla-offer.js",
+    "./components/salla-product-availability/salla-product-availability.js",
+    "./components/salla-rating/salla-rating.js",
+    "./components/salla-verify/salla-verify.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.8.1",
+    "typescriptVersion": "4.2.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/generate-summary.js

@@ -0,0 +1,35 @@
+var fs = require('fs'), path = require('path'), util = require('util');
+
+var dirToJSON = function (dir, done) {
+  var results = [];
+
+  function recWalk(d, res) {
+    var list = fs.readdirSync(d);
+    list.forEach((name) => {
+      var file = path.resolve(d, name);
+      var stat = fs.statSync(file);
+      if (stat && stat.isDirectory()) {
+        var title;
+        if (name) {
+          title = 'salla-' + name
+        }
+        res.push({ title: title, file: name + '/readme.md' });
+      }
+    });
+  }
+
+  try {
+    recWalk(dir, results);
+    done(null, results);
+  } catch (err) {
+    done(err);
+  }
+};
+
+dirToJSON("src/components", function (err, results) {
+  if (err) console.log(err);
+  else fs.writeFile('src/components/summary.json', JSON.stringify(results), 'utf8', function (err) {
+    if (err) throw err;
+    console.log('Saved!');
+  });
+});

package/dist/collection/components/salla-branches/salla-branches.css

@@ -0,0 +1,12 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+:host {
+  display: block;
+}