@salla.sa/twilight-components 1.6.1 → 1.6.2

package/dist/esm/{salla-add-product-button_13.entry.js → salla-button_10.entry.js}

@@ -1,109 +1,14 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4e30ffd0.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-4e30ffd0.js';
 import { H as Helper } from './Helper-e1d414a5.js';
 import { e as email } from './mail-9d5204c6.js';
 import { A as ArrowRightIcon } from './arrow-right-1c3e04f2.js';
 import { C as Cancel } from './cancel-41a92070.js';
 import { C as CheckCircle2 } from './check-circle2-f6e5f685.js';
-import { S as Star2 } from './star2-b134fc74.js';
 import { S as Search } from './search-19ea3313.js';
 
-const sallaAddProductButtonCss = ":host{display:block}salla-add-product-button[width=wide]{width:100%}";
-
-const SallaAddProductButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.success = createEvent(this, "success", 7);
-    this.failed = createEvent(this, "failed", 7);
-    this.hostAttributes = {};
-    this.hasLabel = false;
-    /**
-     * Channels.
-     */
-    this.channels = null;
-    /**
-     * Product Quantity
-     */
-    this.quantity = 0;
-    /**
-     * Donating amount.
-     */
-    this.donatingAmount = 0;
-    /**
-     *  Product Status.Defaults to `sale`
-     */
-    this.productStatus = 'sale';
-    /**
-     * Product type. Defaults to `product`
-     */
-    this.productType = 'product';
-  }
-  getLabel() {
-    if (this.productStatus === 'sale') {
-      return salla.lang.get('pages.cart.add_to_cart');
-    }
-    if (this.productType !== 'donating') {
-      return salla.lang.get('pages.products.out_of_stock');
-    }
-    // donating
-    return salla.lang.get('pages.products.donation_exceed');
-  }
-  addProductToCart(event) {
-    // we want to ignore the click action when the type of button is submit a form
-    if (this.hostAttributes['type'] === 'submit') {
-      return false;
-    }
-    event.preventDefault();
-    /**
-     * by default the quick add is just an alias for add item function
-     * but its work only when the id is the only value is passed via the object
-     * so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
-     */
-    const data = Object.entries({
-      id: this.productId,
-      donating_amount: this.donatingAmount,
-      quantity: this.quantity
-    }).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {});
-    return salla.cart.quickAdd(data)
-      .then((response) => {
-      return this.success.emit(response);
-    })
-      .catch((error) => {
-      return this.failed.emit(error);
-    });
-  }
-  getBtnAttributes() {
-    for (let i = 0; i < this.host.attributes.length; i++) {
-      if (!['id', 'class'].includes(this.host.attributes[i].name)) {
-        this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
-      }
-    }
-    return this.hostAttributes;
-  }
-  componentWillLoad() {
-    this.hasLabel = !!this.host.innerHTML.replace('<!---->', '').trim();
-  }
-  render() {
-    return (h(Host, null, this.productStatus === 'out-and-notify' && this.channels ?
-      h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), h("slot", null)) :
-      h("salla-button", Object.assign({ ref: el => this.btn = el, onClick: event => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }), h("slot", null))));
-  }
-  componentDidRender() {
-    //if label not passed, get label
-    if (this.hasLabel) {
-      return;
-    }
-    this.btn.setText(this.getLabel() || 'اضافة للسلة');
-    salla.lang.onLoaded(() => {
-      this.btn.setText(this.getLabel() || 'اضافة للسلة');
-    });
-  }
-  get host() { return getElement(this); }
-};
-SallaAddProductButton.style = sallaAddProductButtonCss;
-
 const sallaButtonCss = "";
 
 const SallaButton = class {
@@ -879,194 +784,6 @@ const SallaOfferModal = class {
 };
 SallaOfferModal.style = sallaOfferModalCss;
 
-const BellRingIcon = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>bell-ring</title>
-<path d="M2.667 13.333v-4c0-2.592 0.748-5.107 2.161-7.271 0.404-0.616 0.231-1.443-0.387-1.845-0.616-0.401-1.443-0.228-1.845 0.388-1.699 2.599-2.596 5.617-2.596 8.728v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333zM25.333 15.647v-6.313c0-5.147-4.188-9.333-9.333-9.333s-9.333 4.187-9.333 9.333v6.312l-5.157 9.027c-0.236 0.413-0.235 0.92 0.004 1.331 0.239 0.412 0.679 0.664 1.153 0.664h8c0 2.941 2.392 5.333 5.333 5.333s5.333-2.392 5.333-5.333h8c0.475 0 0.915-0.252 1.153-0.664 0.239-0.411 0.24-0.917 0.004-1.331zM16 29.333c-1.471 0-2.667-1.196-2.667-2.667h5.333c0 1.472-1.196 2.667-2.667 2.667zM4.965 24l4.193-7.339c0.113-0.2 0.175-0.429 0.175-0.661v-6.667c0-3.676 2.991-6.667 6.667-6.667s6.667 2.991 6.667 6.667v6.667c0 0.232 0.061 0.46 0.176 0.661l4.192 7.339zM29.403 0.603c-0.403-0.616-1.232-0.789-1.845-0.387-0.617 0.403-0.791 1.229-0.387 1.845 1.415 2.165 2.163 4.68 2.163 7.272v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-4c0-3.112-0.899-6.132-2.597-8.731z"></path>
-</svg>
-`;
-
-const sallaProductAvailabilityCss = "";
-
-const SallaProductAvailability = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.isUser = Helper.isUser();
-    this.translationLoaded = false;
-    /**
-     * product id that can visitor subscribe to its availability notification
-     */
-    this.productId = salla.config.get('page.id');
-    /**
-     * is current user already subscribed
-     */
-    this.isSubscribed = false;
-    // @Method()
-    this.submit = async () => {
-      if (this.isUser) {
-        return salla.api.product.availabilitySubscribe(this.productId)
-          .then(() => this.isSubscribed = true);
-      }
-      let data = { id: this.productId };
-      if (this.channels_.includes('sms')) {
-        let { phone, countryCode } = await this.mobileInput.getValues();
-        data['country_code'] = countryCode;
-        data['phone'] = phone;
-      }
-      if (this.channels_.includes('email')) {
-        this.email.value !== '' && (data['email'] = this.email.value);
-      }
-      await this.validateform();
-      return this.btn.load()
-        .then(() => this.btn.disable())
-        .then(() => salla.api.product.availabilitySubscribe(data))
-        .then(() => {
-        this.isSubscribed = true;
-        salla.storage.set(`product-${this.productId}-subscribed`, true);
-      }) //no need to wait until finishing alert animation
-        .then(() => this.btn.stop())
-        .then(() => this.modal.close())
-        .catch(() => this.btn.stop() && this.btn.enable());
-    };
-    // helpers
-    this.typing = (e, submitMethod) => {
-      const error = e.target.nextElementSibling;
-      e.target.classList.remove('s-has-error');
-      (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
-      e.key == 'Enter' && submitMethod();
-    };
-    salla.lang.onLoaded(() => {
-      var _a;
-      this.translationLoaded = true;
-      this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
-      (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title_);
-    });
-    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.storage.get(`product-${this.productId}-subscribed`);
-  }
-  channelsWatcher(newValue) {
-    this.channels_ = !!newValue ? newValue.split(',') : [];
-  }
-  async validateform() {
-    try {
-      if (this.channels_.includes('email')) {
-        const isEmailValid = Helper.isValidEmail(this.email.value);
-        if (isEmailValid)
-          return;
-        !isEmailValid && this.validateField(this.email, salla.lang.get('common.elements.email_is_valid'));
-      }
-      if (this.channels_.includes('sms')) {
-        const isPhoneValid = await this.mobileInput.isValid();
-        if (isPhoneValid)
-          return;
-      }
-    }
-    catch (error) {
-      throw ('Please insert required fields');
-    }
-  }
-  validateField(field, errorMsg) {
-    field.classList.add('s-has-error');
-    field.nextElementSibling['innerText'] = '* ' + errorMsg;
-  }
-  render() {
-    return (h(Host, { class: "s-product-availability-wrap" }, this.isSubscribed || this.isVisitorSubscribed
-      ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRingIcon, class: "s-product-availability-subs-icon" }), " ", salla.lang.get('pages.products.notify_availability_success'))
-      :
-        h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.modal.open() }, 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, "modal-title": this.title_, subTitle: salla.lang.get('pages.products.notify_availability_subtitle'), width: "sm" }, h("span", { slot: 'icon', innerHTML: BellRingIcon }), h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
-      h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
-      h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e, this.submit), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
-      h("span", { class: "s-product-availability-error-msg" })
-    ] : '', this.channels_.includes('sms') ? [
-      h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
-      h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
-    ] : ''), h("div", { slot: "footer", class: "s-product-availability-footer" }, h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')), h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "channels": ["channelsWatcher"]
-  }; }
-};
-SallaProductAvailability.style = sallaProductAvailabilityCss;
-
-const sallaRatingStarsCss = "";
-
-const SallaRatingStars = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Sets input name.
-     */
-    this.name = 'rating';
-    /**
-     * Sets the height and width of the component. Defaults to medium.
-     */
-    this.size = 'medium';
-  }
-  initiateRating() {
-    this.host.addEventListener('click', () => {
-      if (!this.startsElem)
-        return;
-      // Get the selected star - activeElement is not supported in safari
-      let activeStars = this.startsElem.querySelectorAll('.s-rating-stars-hovered');
-      let selected = activeStars[activeStars.length - 1];
-      if (!selected)
-        return;
-      let selectedIndex = selected.getAttribute('data-star');
-      this.startsElem.querySelector('.rating_hidden_input').value = selectedIndex;
-      // Loop through each star, and add or remove the `.selected` class to toggle highlighting
-      this.startsElem.querySelectorAll('.s-rating-stars-btn-star')
-        .forEach((star, index) => Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
-      // update aria-pressed attr status
-      this.startsElem.querySelectorAll('[aria-pressed]').forEach(star => star.removeAttribute('aria-pressed'));
-      selected.setAttribute('aria-pressed', 'true');
-    });
-  }
-  highlightSelectedStars() {
-    var _a, _b;
-    let hoveredClass = 's-rating-stars-hovered', stars = (_a = this.startsElem) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.s-rating-stars-btn-star');
-    stars === null || stars === void 0 ? void 0 : stars.forEach((star, index) => {
-      star.addEventListener('mouseover', () => {
-        for (let i = 0; i <= index; i++) {
-          stars[i].classList.add(hoveredClass);
-        }
-      });
-      star.addEventListener('mouseout', () => star.classList.remove(hoveredClass));
-    });
-    (_b = this.startsElem) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', () => stars.forEach(star => star.classList.remove(hoveredClass)));
-  }
-  createStars(n) {
-    let stars = [];
-    for (let i = 0; i < 5; i++) {
-      stars.push(h("span", { class: {
-          's-rating-stars-btn-star': true,
-          ['s-rating-stars-' + this.size]: true,
-          's-rating-stars-selected': i < n
-        }, innerHTML: Star2 }));
-    }
-    return stars;
-  }
-  render() {
-    return (h(Host, null, this.value ?
-      h("div", { class: "s-rating-stars-wrapper" }, " ", this.createStars(this.value), " ")
-      :
-        h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el }, h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, h("span", { innerHTML: Star2 }))))));
-  }
-  componentDidLoad() {
-    this.initiateRating();
-    this.highlightSelectedStars();
-  }
-  get host() { return getElement(this); }
-};
-SallaRatingStars.style = sallaRatingStarsCss;
-
 const sallaSearchCss = "";
 
 const SallaSearch = class {
@@ -2845,10 +2562,10 @@ const SallaVerify = class {
       h("salla-modal", { width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, h("span", { slot: 'icon', innerHTML: AndroidPhoneIcon }), this.myBody());
   }
   myBody() {
-    return (h("div", { class: "s-verify-body", ref: body => this.body = body }, h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))), h("div", { slot: "footer", class: "s-verify-footer" }, h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el }), "          "), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), h("slot", { name: "after-footer" })));
+    return (h("div", { class: "s-verify-body", ref: body => this.body = body }, h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "number", maxlength: "1", class: "s-verify-input", required: true }))), h("div", { slot: "footer", class: "s-verify-footer" }, h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el }), "          "), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), h("slot", { name: "after-footer" })));
   }
   get host() { return getElement(this); }
 };
 SallaVerify.style = sallaVerifyCss;
 
-export { SallaAddProductButton as salla_add_product_button, SallaButton as salla_button, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaModal as salla_modal, SallaOfferModal as salla_offer_modal, SallaProductAvailability as salla_product_availability, SallaRatingStars as salla_rating_stars, SallaSearch as salla_search, SallaSkeleton as salla_skeleton, SallaTelInput as salla_tel_input, SallaVerify as salla_verify };
+export { SallaButton as salla_button, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaModal as salla_modal, SallaOfferModal as salla_offer_modal, SallaSearch as salla_search, SallaSkeleton as salla_skeleton, SallaTelInput as salla_tel_input, SallaVerify as salla_verify };

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

@@ -0,0 +1,124 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4e30ffd0.js';
+import { H as Helper } from './Helper-e1d414a5.js';
+
+const BellRingIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bell-ring</title>
+<path d="M2.667 13.333v-4c0-2.592 0.748-5.107 2.161-7.271 0.404-0.616 0.231-1.443-0.387-1.845-0.616-0.401-1.443-0.228-1.845 0.388-1.699 2.599-2.596 5.617-2.596 8.728v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333zM25.333 15.647v-6.313c0-5.147-4.188-9.333-9.333-9.333s-9.333 4.187-9.333 9.333v6.312l-5.157 9.027c-0.236 0.413-0.235 0.92 0.004 1.331 0.239 0.412 0.679 0.664 1.153 0.664h8c0 2.941 2.392 5.333 5.333 5.333s5.333-2.392 5.333-5.333h8c0.475 0 0.915-0.252 1.153-0.664 0.239-0.411 0.24-0.917 0.004-1.331zM16 29.333c-1.471 0-2.667-1.196-2.667-2.667h5.333c0 1.472-1.196 2.667-2.667 2.667zM4.965 24l4.193-7.339c0.113-0.2 0.175-0.429 0.175-0.661v-6.667c0-3.676 2.991-6.667 6.667-6.667s6.667 2.991 6.667 6.667v6.667c0 0.232 0.061 0.46 0.176 0.661l4.192 7.339zM29.403 0.603c-0.403-0.616-1.232-0.789-1.845-0.387-0.617 0.403-0.791 1.229-0.387 1.845 1.415 2.165 2.163 4.68 2.163 7.272v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-4c0-3.112-0.899-6.132-2.597-8.731z"></path>
+</svg>
+`;
+
+const sallaProductAvailabilityCss = "";
+
+const SallaProductAvailability = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isUser = Helper.isUser();
+    this.translationLoaded = false;
+    /**
+     * product id that can visitor subscribe to its availability notification
+     */
+    this.productId = salla.config.get('page.id');
+    /**
+     * is current user already subscribed
+     */
+    this.isSubscribed = false;
+    // @Method()
+    this.submit = async () => {
+      if (this.isUser) {
+        return salla.api.product.availabilitySubscribe(this.productId)
+          .then(() => this.isSubscribed = true);
+      }
+      let data = { id: this.productId };
+      if (this.channels_.includes('sms')) {
+        let { phone, countryCode } = await this.mobileInput.getValues();
+        data['country_code'] = countryCode;
+        data['phone'] = phone;
+      }
+      if (this.channels_.includes('email')) {
+        this.email.value !== '' && (data['email'] = this.email.value);
+      }
+      await this.validateform();
+      return this.btn.load()
+        .then(() => this.btn.disable())
+        .then(() => salla.api.product.availabilitySubscribe(data))
+        .then(() => {
+        this.isSubscribed = true;
+        salla.storage.set(`product-${this.productId}-subscribed`, true);
+      }) //no need to wait until finishing alert animation
+        .then(() => this.btn.stop())
+        .then(() => this.modal.close())
+        .catch(() => this.btn.stop() && this.btn.enable());
+    };
+    // helpers
+    this.typing = (e, submitMethod) => {
+      const error = e.target.nextElementSibling;
+      e.target.classList.remove('s-has-error');
+      (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
+      e.key == 'Enter' && submitMethod();
+    };
+    salla.lang.onLoaded(() => {
+      var _a;
+      this.translationLoaded = true;
+      this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+      (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title_);
+    });
+    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.storage.get(`product-${this.productId}-subscribed`);
+  }
+  channelsWatcher(newValue) {
+    this.channels_ = !!newValue ? newValue.split(',') : [];
+  }
+  async validateform() {
+    try {
+      if (this.channels_.includes('email')) {
+        const isEmailValid = Helper.isValidEmail(this.email.value);
+        if (isEmailValid)
+          return;
+        !isEmailValid && this.validateField(this.email, salla.lang.get('common.elements.email_is_valid'));
+      }
+      if (this.channels_.includes('sms')) {
+        const isPhoneValid = await this.mobileInput.isValid();
+        if (isPhoneValid)
+          return;
+      }
+    }
+    catch (error) {
+      throw ('Please insert required fields');
+    }
+  }
+  validateField(field, errorMsg) {
+    field.classList.add('s-has-error');
+    field.nextElementSibling['innerText'] = '* ' + errorMsg;
+  }
+  render() {
+    return (h(Host, { class: "s-product-availability-wrap" }, this.isSubscribed || this.isVisitorSubscribed
+      ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRingIcon, class: "s-product-availability-subs-icon" }), " ", salla.lang.get('pages.products.notify_availability_success'))
+      :
+        h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.modal.open() }, 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, "modal-title": this.title_, subTitle: salla.lang.get('pages.products.notify_availability_subtitle'), width: "sm" }, h("span", { slot: 'icon', innerHTML: BellRingIcon }), h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
+      h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
+      h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e, this.submit), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
+      h("span", { class: "s-product-availability-error-msg" })
+    ] : '', this.channels_.includes('sms') ? [
+      h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
+      h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
+    ] : ''), h("div", { slot: "footer", class: "s-product-availability-footer" }, h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')), h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "channels": ["channelsWatcher"]
+  }; }
+};
+SallaProductAvailability.style = sallaProductAvailabilityCss;
+
+export { SallaProductAvailability as salla_product_availability };

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

@@ -0,0 +1,79 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4e30ffd0.js';
+import { H as Helper } from './Helper-e1d414a5.js';
+import { S as Star2 } from './star2-b134fc74.js';
+
+const sallaRatingStarsCss = "";
+
+const SallaRatingStars = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Sets input name.
+     */
+    this.name = 'rating';
+    /**
+     * Sets the height and width of the component. Defaults to medium.
+     */
+    this.size = 'medium';
+  }
+  initiateRating() {
+    this.host.addEventListener('click', () => {
+      if (!this.startsElem)
+        return;
+      // Get the selected star - activeElement is not supported in safari
+      let activeStars = this.startsElem.querySelectorAll('.s-rating-stars-hovered');
+      let selected = activeStars[activeStars.length - 1];
+      if (!selected)
+        return;
+      let selectedIndex = selected.getAttribute('data-star');
+      this.startsElem.querySelector('.rating_hidden_input').value = selectedIndex;
+      // Loop through each star, and add or remove the `.selected` class to toggle highlighting
+      this.startsElem.querySelectorAll('.s-rating-stars-btn-star')
+        .forEach((star, index) => Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < parseInt(selectedIndex)));
+      // update aria-pressed attr status
+      this.startsElem.querySelectorAll('[aria-pressed]').forEach(star => star.removeAttribute('aria-pressed'));
+      selected.setAttribute('aria-pressed', 'true');
+    });
+  }
+  highlightSelectedStars() {
+    var _a, _b;
+    let hoveredClass = 's-rating-stars-hovered', stars = (_a = this.startsElem) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.s-rating-stars-btn-star');
+    stars === null || stars === void 0 ? void 0 : stars.forEach((star, index) => {
+      star.addEventListener('mouseover', () => {
+        for (let i = 0; i <= index; i++) {
+          stars[i].classList.add(hoveredClass);
+        }
+      });
+      star.addEventListener('mouseout', () => star.classList.remove(hoveredClass));
+    });
+    (_b = this.startsElem) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', () => stars.forEach(star => star.classList.remove(hoveredClass)));
+  }
+  createStars(n) {
+    let stars = [];
+    for (let i = 0; i < 5; i++) {
+      stars.push(h("span", { class: {
+          's-rating-stars-btn-star': true,
+          ['s-rating-stars-' + this.size]: true,
+          's-rating-stars-selected': i < n
+        }, innerHTML: Star2 }));
+    }
+    return stars;
+  }
+  render() {
+    return (h(Host, null, this.value ?
+      h("div", { class: "s-rating-stars-wrapper" }, " ", this.createStars(this.value), " ")
+      :
+        h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el }, h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, h("span", { innerHTML: Star2 }))))));
+  }
+  componentDidLoad() {
+    this.initiateRating();
+    this.highlightSelectedStars();
+  }
+  get host() { return getElement(this); }
+};
+SallaRatingStars.style = sallaRatingStarsCss;
+
+export { SallaRatingStars as salla_rating_stars };

package/dist/esm/twilight-components.js

@@ -16,5 +16,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["salla-loyalty",[[4,"salla-loyalty",{"prizePoints":[8,"prize-points"],"customerPoints":[2,"customer-points"],"prizeTitle":[1,"prize-title"],"allowEmail":[4,"allow-email"],"allowMobile":[4,"allow-mobile"],"requireEmail":[4,"require-email"],"guestMessage":[1,"guest-message"],"loyaltyProgram":[32],"buttonLoading":[32],"selectedItem":[32],"askConfirmation":[32],"is_loggedin":[32],"translationLoaded":[32],"open":[64],"close":[64],"resetExchange":[64],"exchangeLoyaltyPoint":[64]}]]],["salla-product-size-guide",[[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}]]],["salla-scopes",[[4,"salla-scopes",{"selection":[1],"searchDisplayLimit":[2,"search-display-limit"],"translationLoaded":[32],"mode":[32],"current_scope":[32],"scopes":[32],"originalScopesList":[32],"selected_scope":[32],"isOpenedBefore":[32],"close":[64],"open":[64],"handleSubmit":[64]}]]],["salla-rating-modal",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"translationLoaded":[32],"open":[64],"close":[64]}]]],["salla-social-share",[[4,"salla-social-share",{"url":[513],"urlName":[513,"url-name"],"platforms":[16],"opened":[32],"allPlatforms":[32],"platformIcons":[32],"open":[64]}]]],["salla-conditional-fields",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-infinite-scroll",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-installment",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]],["salla-tab-content_3",[[4,"salla-tab-content",{"name":[1],"isSelected":[32],"getChild":[64]}],[4,"salla-tab-header",{"name":[1],"activeClass":[1,"active-class"],"height":[8],"centered":[4],"isSelected":[32],"getChild":[64]}],[4,"salla-tabs",{"backgroundColor":[1,"background-color"],"vertical":[4]},[[0,"tabSelected","onSelectedTab"]]]]],["salla-add-product-button_13",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}],[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"translationLoaded":[32],"title":[32],"emailErrorMsg":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"open":[64]},[[8,"verified","onVerified"]]],[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"translationLoaded":[32],"languages":[32],"currencies":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"translationLoaded":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"translationLoaded":[32],"results":[32],"loading":[32],"typing":[32],"debounce":[32],"search_term":[32]},[[0,"keydown","handleKeyDown"]]],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"translationLoaded":[32],"title_":[32],"isVisitorSubscribed":[32]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"translationLoaded":[32],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"hasSkeleton":[516,"has-skeleton"],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"centered":[4],"iconStyle":[1,"icon-style"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[0,"salla-loading",{"size":[8],"width":[8],"color":[1],"bgColor":[1,"bg-color"]}]]],["salla-swiper",[[4,"salla-swiper",{"loop":[4],"speed":[2],"itemPerView":[8,"item-per-view"],"spaceBetweenItems":[2,"space-between-items"],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}]]],["salla-list-tile_2",[[4,"salla-list-tile",{"href":[1],"target":[1]}],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"translationLoaded":[32]}]]]], options);
+  return bootstrapLazy([["salla-button_10",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"translationLoaded":[32],"title":[32],"emailErrorMsg":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"open":[64]},[[8,"verified","onVerified"]]],[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"translationLoaded":[32],"languages":[32],"currencies":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"translationLoaded":[32],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"translationLoaded":[32],"results":[32],"loading":[32],"typing":[32],"debounce":[32],"search_term":[32]},[[0,"keydown","handleKeyDown"]]],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"translationLoaded":[32],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[0,"salla-skeleton",{"type":[1],"width":[1],"height":[1]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"hasSkeleton":[516,"has-skeleton"],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"centered":[4],"iconStyle":[1,"icon-style"],"modalTitle":[32],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[0,"salla-loading",{"size":[8],"width":[8],"color":[1],"bgColor":[1,"bg-color"]}]]],["salla-loyalty",[[4,"salla-loyalty",{"prizePoints":[8,"prize-points"],"customerPoints":[2,"customer-points"],"prizeTitle":[1,"prize-title"],"allowEmail":[4,"allow-email"],"allowMobile":[4,"allow-mobile"],"requireEmail":[4,"require-email"],"guestMessage":[1,"guest-message"],"loyaltyProgram":[32],"buttonLoading":[32],"selectedItem":[32],"askConfirmation":[32],"is_loggedin":[32],"translationLoaded":[32],"open":[64],"close":[64],"resetExchange":[64],"exchangeLoyaltyPoint":[64]}]]],["salla-product-size-guide",[[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}]]],["salla-scopes",[[4,"salla-scopes",{"selection":[1],"searchDisplayLimit":[2,"search-display-limit"],"translationLoaded":[32],"mode":[32],"current_scope":[32],"scopes":[32],"originalScopesList":[32],"selected_scope":[32],"isOpenedBefore":[32],"close":[64],"open":[64],"handleSubmit":[64]}]]],["salla-add-product-button",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-rating-modal",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"translationLoaded":[32],"open":[64],"close":[64]}]]],["salla-social-share",[[4,"salla-social-share",{"url":[513],"urlName":[513,"url-name"],"platforms":[16],"opened":[32],"allPlatforms":[32],"platformIcons":[32],"open":[64]}]]],["salla-conditional-fields",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-infinite-scroll",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-installment",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]],["salla-product-availability",[[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"translationLoaded":[32],"title_":[32],"isVisitorSubscribed":[32]}]]],["salla-swiper",[[4,"salla-swiper",{"loop":[4],"speed":[2],"itemPerView":[8,"item-per-view"],"spaceBetweenItems":[2,"space-between-items"],"currentIndex":[32],"isLastSlideItem":[32],"isFirstSlideItem":[32]}]]],["salla-rating-stars",[[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}]]],["salla-list-tile_2",[[4,"salla-list-tile",{"href":[1],"target":[1]}],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"translationLoaded":[32]}]]],["salla-tab-content_3",[[4,"salla-tab-content",{"name":[1],"isSelected":[32],"getChild":[64]}],[4,"salla-tab-header",{"name":[1],"activeClass":[1,"active-class"],"height":[8],"centered":[4],"isSelected":[32],"getChild":[64]}],[4,"salla-tabs",{"backgroundColor":[1,"background-color"],"vertical":[4]},[[0,"tabSelected","onSelectedTab"]]]]]], options);
 });

package/dist/twilight-components/p-0d498694.entry.js

@@ -0,0 +1,4 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import{r as s,h as t,H as i,g as a}from"./p-1503d976.js";import{H as l}from"./p-9d2ca9c8.js";const e='\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>bell-ring</title>\n<path d="M2.667 13.333v-4c0-2.592 0.748-5.107 2.161-7.271 0.404-0.616 0.231-1.443-0.387-1.845-0.616-0.401-1.443-0.228-1.845 0.388-1.699 2.599-2.596 5.617-2.596 8.728v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333zM25.333 15.647v-6.313c0-5.147-4.188-9.333-9.333-9.333s-9.333 4.187-9.333 9.333v6.312l-5.157 9.027c-0.236 0.413-0.235 0.92 0.004 1.331 0.239 0.412 0.679 0.664 1.153 0.664h8c0 2.941 2.392 5.333 5.333 5.333s5.333-2.392 5.333-5.333h8c0.475 0 0.915-0.252 1.153-0.664 0.239-0.411 0.24-0.917 0.004-1.331zM16 29.333c-1.471 0-2.667-1.196-2.667-2.667h5.333c0 1.472-1.196 2.667-2.667 2.667zM4.965 24l4.193-7.339c0.113-0.2 0.175-0.429 0.175-0.661v-6.667c0-3.676 2.991-6.667 6.667-6.667s6.667 2.991 6.667 6.667v6.667c0 0.232 0.061 0.46 0.176 0.661l4.192 7.339zM29.403 0.603c-0.403-0.616-1.232-0.789-1.845-0.387-0.617 0.403-0.791 1.229-0.387 1.845 1.415 2.165 2.163 4.68 2.163 7.272v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-4c0-3.112-0.899-6.132-2.597-8.731z"></path>\n</svg>\n',o=class{constructor(t){s(this,t),this.isUser=l.isUser(),this.translationLoaded=!1,this.productId=salla.config.get("page.id"),this.isSubscribed=!1,this.submit=async()=>{if(this.isUser)return salla.api.product.availabilitySubscribe(this.productId).then((()=>this.isSubscribed=!0));let s={id:this.productId};if(this.channels_.includes("sms")){let{phone:t,countryCode:i}=await this.mobileInput.getValues();s.country_code=i,s.phone=t}return this.channels_.includes("email")&&""!==this.email.value&&(s.email=this.email.value),await this.validateform(),this.btn.load().then((()=>this.btn.disable())).then((()=>salla.api.product.availabilitySubscribe(s))).then((()=>{this.isSubscribed=!0,salla.storage.set(`product-${this.productId}-subscribed`,!0)})).then((()=>this.btn.stop())).then((()=>this.modal.close())).catch((()=>this.btn.stop()&&this.btn.enable()))},this.typing=(s,t)=>{const i=s.target.nextElementSibling;s.target.classList.remove("s-has-error"),(null==i?void 0:i.classList.contains("s-product-availability-error-msg"))&&(i.innerText=""),"Enter"==s.key&&t()},salla.lang.onLoaded((()=>{var s;this.translationLoaded=!0,this.title_=this.host.title||salla.lang.get("pages.products.notify_availability_title"),null===(s=this.modal)||void 0===s||s.setTitle(this.title_)})),this.isUser||(this.channelsWatcher(this.channels),this.title_=this.host.title||salla.lang.get("pages.products.notify_availability_title"),this.host.removeAttribute("title"),this.isVisitorSubscribed=salla.storage.get(`product-${this.productId}-subscribed`))}channelsWatcher(s){this.channels_=s?s.split(","):[]}async validateform(){try{if(this.channels_.includes("email")){const s=l.isValidEmail(this.email.value);if(s)return;!s&&this.validateField(this.email,salla.lang.get("common.elements.email_is_valid"))}if(this.channels_.includes("sms")&&await this.mobileInput.isValid())return}catch(s){throw"Please insert required fields"}}validateField(s,t){s.classList.add("s-has-error"),s.nextElementSibling.innerText="* "+t}render(){return t(i,{class:"s-product-availability-wrap"},this.isSubscribed||this.isVisitorSubscribed?t("div",{class:"s-product-availability-subscribed"},t("span",{innerHTML:e,class:"s-product-availability-subs-icon"})," ",salla.lang.get("pages.products.notify_availability_success")):t("salla-button",{width:"wide",onClick:()=>this.isUser?this.submit():this.modal.open()},salla.lang.get("pages.products.notify_availability")),this.isUser||this.isSubscribed||this.isVisitorSubscribed?"":this.renderModal())}renderModal(){return t("salla-modal",{ref:s=>this.modal=s,"modal-title":this.title_,subTitle:salla.lang.get("pages.products.notify_availability_subtitle"),width:"sm"},t("span",{slot:"icon",innerHTML:e}),t("div",{class:"s-product-availability-body"},this.channels_.includes("email")?[t("label",{class:"s-product-availability-label"},salla.lang.get("common.elements.email")),t("input",{class:"s-product-availability-input",onKeyDown:s=>this.typing(s,this.submit),placeholder:salla.lang.get("common.elements.email_placeholder")||"your@email.com",ref:s=>this.email=s,type:"email"}),t("span",{class:"s-product-availability-error-msg"})]:"",this.channels_.includes("sms")?[t("label",{class:"s-product-availability-label"},salla.lang.get("common.elements.mobile")),t("salla-tel-input",{ref:s=>this.mobileInput=s,onKeyDown:s=>this.typing(s,this.submit)})]:""),t("div",{slot:"footer",class:"s-product-availability-footer"},t("salla-button",{class:"modal-cancel-btn",width:"wide",color:"light",fill:"outline",onClick:()=>this.modal.close()},salla.lang.get("common.elements.cancel")),t("salla-button",{class:"submit-btn","loader-position":"center",width:"wide",ref:s=>this.btn=s,onClick:()=>this.submit()},salla.lang.get("common.elements.submit"))))}get host(){return a(this)}static get watchers(){return{channels:["channelsWatcher"]}}};o.style="";export{o as salla_product_availability}