@salla.sa/twilight-components 1.6.1 → 1.6.2

package/dist/cjs/loader.cjs.js

@@ -17,7 +17,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["salla-loyalty.cjs",[[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.cjs",[[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}]]],["salla-scopes.cjs",[[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.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"translationLoaded":[32],"open":[64],"close":[64]}]]],["salla-social-share.cjs",[[4,"salla-social-share",{"url":[513],"urlName":[513,"url-name"],"platforms":[16],"opened":[32],"allPlatforms":[32],"platformIcons":[32],"open":[64]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]],["salla-tab-content_3.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[4,"salla-list-tile",{"href":[1],"target":[1]}],[4,"salla-placeholder",{"icon":[1],"alignment":[1],"iconSize":[1,"icon-size"],"translationLoaded":[32]}]]]], options);
+  return index.bootstrapLazy([["salla-button_10.cjs",[[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.cjs",[[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.cjs",[[4,"salla-product-size-guide",{"guides":[32],"productId":[32],"open":[64],"close":[64]}]]],["salla-scopes.cjs",[[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.cjs",[[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.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"translationLoaded":[32],"open":[64],"close":[64]}]]],["salla-social-share.cjs",[[4,"salla-social-share",{"url":[513],"urlName":[513,"url-name"],"platforms":[16],"opened":[32],"allPlatforms":[32],"platformIcons":[32],"open":[64]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]],["salla-product-availability.cjs",[[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"translationLoaded":[32],"title_":[32],"isVisitorSubscribed":[32]}]]],["salla-swiper.cjs",[[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.cjs",[[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}]]],["salla-list-tile_2.cjs",[[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.cjs",[[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/cjs/salla-add-product-button.cjs.entry.js

@@ -0,0 +1,104 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0d0167d5.js');
+
+const sallaAddProductButtonCss = ":host{display:block}salla-add-product-button[width=wide]{width:100%}";
+
+const SallaAddProductButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.success = index.createEvent(this, "success", 7);
+    this.failed = index.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 (index.h(index.Host, null, this.productStatus === 'out-and-notify' && this.channels ?
+      index.h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), index.h("slot", null)) :
+      index.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' }), index.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 index.getElement(this); }
+};
+SallaAddProductButton.style = sallaAddProductButtonCss;
+
+exports.salla_add_product_button = SallaAddProductButton;

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

@@ -11,103 +11,8 @@ const mail = require('./mail-2db058ee.js');
 const arrowRight = require('./arrow-right-3d137e4c.js');
 const cancel = require('./cancel-ae668d91.js');
 const checkCircle2 = require('./check-circle2-1aac98d1.js');
-const star2 = require('./star2-8288e6e1.js');
 const search = require('./search-b487cc49.js');
 
-const sallaAddProductButtonCss = ":host{display:block}salla-add-product-button[width=wide]{width:100%}";
-
-const SallaAddProductButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.success = index.createEvent(this, "success", 7);
-    this.failed = index.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 (index.h(index.Host, null, this.productStatus === 'out-and-notify' && this.channels ?
-      index.h("salla-product-availability", Object.assign({}, this.getBtnAttributes()), index.h("slot", null)) :
-      index.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' }), index.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 index.getElement(this); }
-};
-SallaAddProductButton.style = sallaAddProductButtonCss;
-
 const sallaButtonCss = "";
 
 const SallaButton = class {
@@ -883,194 +788,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) {
-    index.registerInstance(this, hostRef);
-    this.isUser = Helper.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.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 (index.h(index.Host, { class: "s-product-availability-wrap" }, this.isSubscribed || this.isVisitorSubscribed
-      ? index.h("div", { class: "s-product-availability-subscribed" }, index.h("span", { innerHTML: BellRingIcon, class: "s-product-availability-subs-icon" }), " ", salla.lang.get('pages.products.notify_availability_success'))
-      :
-        index.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 (index.h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: salla.lang.get('pages.products.notify_availability_subtitle'), width: "sm" }, index.h("span", { slot: 'icon', innerHTML: BellRingIcon }), index.h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
-      index.h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
-      index.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" }),
-      index.h("span", { class: "s-product-availability-error-msg" })
-    ] : '', this.channels_.includes('sms') ? [
-      index.h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
-      index.h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
-    ] : ''), index.h("div", { slot: "footer", class: "s-product-availability-footer" }, index.h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')), index.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 index.getElement(this); }
-  static get watchers() { return {
-    "channels": ["channelsWatcher"]
-  }; }
-};
-SallaProductAvailability.style = sallaProductAvailabilityCss;
-
-const sallaRatingStarsCss = "";
-
-const SallaRatingStars = class {
-  constructor(hostRef) {
-    index.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.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(index.h("span", { class: {
-          's-rating-stars-btn-star': true,
-          ['s-rating-stars-' + this.size]: true,
-          's-rating-stars-selected': i < n
-        }, innerHTML: star2.Star2 }));
-    }
-    return stars;
-  }
-  render() {
-    return (index.h(index.Host, null, this.value ?
-      index.h("div", { class: "s-rating-stars-wrapper" }, " ", this.createStars(this.value), " ")
-      :
-        index.h("div", { class: "s-rating-stars-element", ref: (el) => this.startsElem = el }, index.h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => index.h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, index.h("span", { innerHTML: star2.Star2 }))))));
-  }
-  componentDidLoad() {
-    this.initiateRating();
-    this.highlightSelectedStars();
-  }
-  get host() { return index.getElement(this); }
-};
-SallaRatingStars.style = sallaRatingStarsCss;
-
 const sallaSearchCss = "";
 
 const SallaSearch = class {
@@ -2849,21 +2566,18 @@ const SallaVerify = class {
       index.h("salla-modal", { width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, index.h("span", { slot: 'icon', innerHTML: AndroidPhoneIcon }), this.myBody());
   }
   myBody() {
-    return (index.h("div", { class: "s-verify-body", ref: body => this.body = body }, index.h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), index.h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))), index.h("div", { slot: "footer", class: "s-verify-footer" }, index.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')), index.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-timer", ref: el => this.timer = el }), "          "), index.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), index.h("slot", { name: "after-footer" })));
+    return (index.h("div", { class: "s-verify-body", ref: body => this.body = body }, index.h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), index.h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "number", maxlength: "1", class: "s-verify-input", required: true }))), index.h("div", { slot: "footer", class: "s-verify-footer" }, index.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')), index.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-timer", ref: el => this.timer = el }), "          "), index.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), index.h("slot", { name: "after-footer" })));
   }
   get host() { return index.getElement(this); }
 };
 SallaVerify.style = sallaVerifyCss;
 
-exports.salla_add_product_button = SallaAddProductButton;
 exports.salla_button = SallaButton;
 exports.salla_loading = SallaLoading;
 exports.salla_localization_modal = SallaLocalizationModal;
 exports.salla_login_modal = SallaLoginModal;
 exports.salla_modal = SallaModal;
 exports.salla_offer_modal = SallaOfferModal;
-exports.salla_product_availability = SallaProductAvailability;
-exports.salla_rating_stars = SallaRatingStars;
 exports.salla_search = SallaSearch;
 exports.salla_skeleton = SallaSkeleton;
 exports.salla_tel_input = SallaTelInput;

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

@@ -0,0 +1,128 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0d0167d5.js');
+const Helper = require('./Helper-8ae6a805.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) {
+    index.registerInstance(this, hostRef);
+    this.isUser = Helper.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.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 (index.h(index.Host, { class: "s-product-availability-wrap" }, this.isSubscribed || this.isVisitorSubscribed
+      ? index.h("div", { class: "s-product-availability-subscribed" }, index.h("span", { innerHTML: BellRingIcon, class: "s-product-availability-subs-icon" }), " ", salla.lang.get('pages.products.notify_availability_success'))
+      :
+        index.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 (index.h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: salla.lang.get('pages.products.notify_availability_subtitle'), width: "sm" }, index.h("span", { slot: 'icon', innerHTML: BellRingIcon }), index.h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
+      index.h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
+      index.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" }),
+      index.h("span", { class: "s-product-availability-error-msg" })
+    ] : '', this.channels_.includes('sms') ? [
+      index.h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
+      index.h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
+    ] : ''), index.h("div", { slot: "footer", class: "s-product-availability-footer" }, index.h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')), index.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 index.getElement(this); }
+  static get watchers() { return {
+    "channels": ["channelsWatcher"]
+  }; }
+};
+SallaProductAvailability.style = sallaProductAvailabilityCss;
+
+exports.salla_product_availability = SallaProductAvailability;