@salla.sa/twilight-components 1.0.72 → 1.0.73

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-modal_2.cjs",[[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-product-availability.cjs",[[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[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-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"show":[64],"showOffer":[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"],"nextPageAutoload":[1028,"next-page-autoload"],"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-button.cjs",[[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}]]],["salla-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"type":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-rating-stars.cjs",[[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}]]],["salla-tel-input.cjs",[[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}]]]], options);
+  return index.bootstrapLazy([["salla-add-product-button_6.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"],"disabled":[516]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[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-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"show":[64],"showOffer":[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"],"nextPageAutoload":[1028,"next-page-autoload"],"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-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"type":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-rating-stars.cjs",[[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}]]]], options);
   });
 };
 

package/dist/cjs/{salla-tel-input.cjs.entry.js → salla-add-product-button_6.cjs.entry.js}

@@ -8,6 +8,520 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c0f5bb97.js');
 const Helper = require('./Helper-8ae6a805.js');
 
+const sallaAddProductButtonCss = ":host{display:block}";
+
+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.hasNotText = false;
+    this.channels = null;
+    this.quantity = 1;
+    this.donatingAmount = 0;
+    this.productStatus = 'sale';
+    this.productType = 'product';
+    /**
+     * Is the button currently disabled
+     */
+    this.disabled = false;
+  }
+  getLabel() {
+    if (this.productStatus === 'sale') {
+      return salla.lang.get('pages.cart.add_to_cart');
+    }
+    if (this.productType === 'product') {
+      return salla.lang.get('pages.products.out_of_stock');
+    }
+    // donating
+    return salla.lang.get('pages.products.donation_exceed');
+  }
+  componentWillLoad() {
+    this.hasNotText = !this.host.innerHTML || this.host.innerHTML === "" || this.host.innerHTML.trim().replace(/\s/g, '').localeCompare("<!---->") === 0;
+  }
+  componentDidRender() {
+    if (this.buttonLabel && this.hasNotText) {
+      salla.event.once('languages::translations.loaded', () => {
+        this.buttonLabel.innerHTML = this.getLabel() || 'اضافة للسلة';
+      });
+    }
+  }
+  addProductToCart(event) {
+    event.preventDefault();
+    return salla.cart.addItem({
+      id: this.productId,
+      donating_amount: this.donatingAmount,
+      quantity: this.quantity
+    }).then((response) => this.success.emit(response))
+      .catch((error) => 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;
+  }
+  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({ 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 === 'out' }), index.h("slot", null), index.h("span", { ref: (el) => this.buttonLabel = el }))));
+  }
+  get host() { return index.getElement(this); }
+};
+SallaAddProductButton.style = sallaAddProductButtonCss;
+
+const sallaButtonCss = "salla-button{pointer-events:none}salla-button[type=submit],salla-button[type=button],salla-button[type=reset]{-webkit-appearance:none}salla-button[width=wide]{width:100%}.s-button-wrap[loading]{pointer-events:none}.s-button-wrap[loading] .s-button-element{pointer-events:none !important}.s-button-wrap[loading] .s-button-loader-center .s-button-text{opacity:0}.s-button-wrap .s-button-element[loading]{pointer-events:none !important}.s-button-wrap .s-button-element:not(:disabled){pointer-events:auto}.s-button-wrap .s-button-solid .s-button-loader:before{border-color:#fff #fff rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2)}.s-button-wrap .s-button-outline{border:1px solid currentColor}.s-button-wrap .s-button-outline:hover{border-color:transparent}.s-button-wrap .s-button-outline .s-button-loader:before{border-top-color:currentColor;border-left-color:currentColor}.s-button-wrap .s-button-icon.s-button-large{width:56px;height:56px}.s-button-wrap .s-button-icon.s-button-small{width:24px;height:24px}.s-button-wrap .s-button-icon.s-button-small .s-button-loader:before{width:0.85rem;height:0.85rem}.s-button-wrap .s-button-loader-after .s-button-load{flex-direction:row}.s-button-wrap .s-button-loader-start.s-button-element{padding-left:32px;padding-right:32px}.s-button-wrap .s-button-loader-start .s-button-loader{position:absolute;right:8px}.s-button-wrap .s-button-loader-start .s-button-loader [dir=ltr]{left:8px;right:auto}.s-button-wrap .s-button-loader-end.s-button-element{padding-left:32px;padding-right:32px}.s-button-wrap .s-button-loader-end .s-button-loader{position:absolute;left:8px}.s-button-wrap .s-button-loader-end .s-button-loader [dir=ltr]{right:8px;left:auto}.s-button-wrap .s-button-loader-center .s-button-loader{position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);margin:0 !important}";
+
+const SallaButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.hostAttributes = {};
+    /**
+     * Button Type
+     */
+    this.shape = 'btn';
+    /**
+     * Button Color
+     */
+    this.color = 'primary';
+    /**
+     * Button Fill
+     */
+    this.fill = 'solid';
+    /**
+     * Button Size
+     */
+    this.size = 'medium';
+    /**
+     * Button Width
+     */
+    this.width = 'normal';
+    /**
+     * Is the button currently loading
+     */
+    this.loading = false;
+    /**
+     * Is the button currently disabled
+     */
+    this.disabled = false;
+    /**
+     * If there is need to change loader position, pass the position
+     */
+    this.loaderPosition = 'after';
+    /**
+     * Is the button wide
+     */
+    this.wide = false;
+    if (this.wide) {
+      this.host.classList.add('s-button-wide');
+    }
+  }
+  /**
+   * Run loading animation
+   */
+  async load() {
+    if (this.loaderPosition == 'center')
+      this.text.classList.add('s-button-hide');
+    this.host.setAttribute('loading', '');
+    return this.host;
+  }
+  /**
+   * Stop loading animation
+   */
+  async stop() {
+    this.host.removeAttribute('loading');
+    if (this.loaderPosition == 'center')
+      this.text.classList.remove('s-button-hide');
+    return this.host;
+  }
+  /**
+   * Changing the body of the button
+   * @param html
+   */
+  async setText(html) {
+    this.text.innerHTML = html;
+    return this.host;
+  }
+  /**
+   * Add `disabled` attribute
+   */
+  async disable() {
+    this.host.setAttribute('disabled', '');
+    return this.host;
+  }
+  /**
+   * Remove `disabled` attribute
+   */
+  async enable() {
+    this.host.removeAttribute('disabled');
+    return this.host;
+  }
+  getBtnAttributes() {
+    for (let i = 0; i < this.host.attributes.length; i++) {
+      if (!['color', 'fill', 'size', 'width', 'id', 'loading'].includes(this.host.attributes[i].name)) {
+        this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+      }
+    }
+    this.hostAttributes.type = this.hostAttributes.type || 'button';
+    this.hostAttributes.class +=
+      ' s-button-element s-button-' + this.shape
+        + ' s-button-' + (this.fill == "none" ? 'fill-none' : this.fill)
+        + (this.size != "medium" ? ' s-button-' + this.size : '')
+        + (this.width != "normal" ? ' s-button-' + this.width : '')
+        + (this.shape == "link" ? ' s-button-' + this.color + '-link' : '')
+        + (this.shape != "link" && this.fill != 'outline' ? ' s-button-' + this.color : '')
+        + (this.fill == 'outline' ? ' s-button-' + this.color + '-outline' : '')
+        + (this.disabled ? ' s-button-disabled ' : '')
+        + (this.shape == 'icon' ? ' s-button-loader-center' : ' s-button-loader-' + this.loaderPosition);
+    return this.hostAttributes;
+  }
+  render() {
+    return (index.h(index.Host, { class: "s-button-wrap" }, index.h("button", Object.assign({}, this.getBtnAttributes(), { disabled: this.disabled }), index.h("span", { class: "s-button-text", ref: el => this.text = el }, index.h("slot", null)), this.loading ? index.h("span", { class: "s-button-loader" }) : '')));
+  }
+  get host() { return index.getElement(this); }
+};
+SallaButton.style = sallaButtonCss;
+
+const sallaModalCss = "";
+
+const SallaModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.modalOpened = index.createEvent(this, "modalOpened", 7);
+    this.modalClosed = index.createEvent(this, "modalClosed", 7);
+    this.isClosable = true; //todo::rename unclude
+    /**
+     * The size of the modal
+     */
+    this.width = 'md';
+    /**
+     * The position of the modal
+     */
+    this.position = 'middle';
+    /**
+     * Show the modal on rendering
+     */
+    this.visible = false;
+    /**
+     * Show loading in the middle
+     */
+    this.isLoading = false;
+    this.subTitleFirst = false; //todo:: choose better name
+    this.noPadding = false; //todo:: choose better name
+    this.subTitle = '';
+    /**
+     * Icon css class, default for types `error` is `sicon-alert-engine`, `success` is `sicon-check-circle2`
+     */
+    this.icon = '';
+    this.iconStyle = '';
+    /**
+     * url of an image
+     */
+    this.imageIcon = '';
+    Helper.Helper.setHost(this.host);
+    salla.event.on('modal::open', btn => btn.dataset.target == this.host.id && this.show());
+    salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
+    this.modalTitle = this.host.getAttribute('modal-title');
+  }
+  handleVisible(newValue) {
+    if (!newValue) {
+      this.toggleModal(false);
+      this.modalClosed.emit();
+      return;
+    }
+    this.host.classList.remove('s-hidden');
+    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
+    this.modalOpened.emit();
+  }
+  /**
+   * Show the modal
+   */
+  async show() {
+    this.host.setAttribute('visible', '');
+    return this.host;
+  }
+  /**
+   * hide the modal
+   */
+  async hide() {
+    this.host.removeAttribute('visible');
+    return this.host;
+  }
+  /**
+   * Change the Modal Title
+   * @param {string} modalTitle
+   */
+  async setTitle(modalTitle) {
+    this.modalTitle = modalTitle;
+    return this.host;
+  }
+  /**
+   * Start loading
+   */
+  async loading() {
+    this.isLoading = true;
+    return this.host;
+  }
+  /**
+   * Stop the loading
+   */
+  async stopLoading() {
+    this.isLoading = false;
+    return this.host;
+  }
+  toggleModal(isOpen) {
+    const body = this.host.querySelector('.s-modal-body');
+    Helper.Helper.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElementClassIf(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
+      .toggleElementClassIf(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
+    if (!isOpen) {
+      setTimeout(() => this.host.classList.add('s-hidden'), 350);
+    }
+  }
+  closeModal() {
+    if (!this.isClosable) {
+      return;
+    }
+    this.host.removeAttribute('visible');
+  }
+  iconBlockClasses() {
+    return {
+      's-modal-icon': true,
+      's-modal-bg-error': this.iconStyle == 'error',
+      's-modal-bg-success': this.iconStyle == 'success',
+      's-modal-bg-normal': this.iconStyle != 'error' && this.iconStyle != 'success',
+      's-modal-bg-primary': this.iconStyle == 'primary'
+    };
+  }
+  iconClasses() {
+    return {
+      [this.icon]: true,
+      'sicon-alert-engine': !this.icon && this.iconStyle == 'error' && !this.imageIcon,
+      'sicon-check-circle2': !this.icon && this.iconStyle == 'success' && !this.imageIcon,
+    };
+  }
+  //todo:: pref for each modal
+  render() {
+    this.host.id = this.host.id || 'salla-modal';
+    return (index.h(index.Host, { class: 'salla-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("div", { class: "s-modal-wrapper" }, index.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index.h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, this.isLoading ?
+      index.h("div", { class: "s-modal-loader-wrap" }, index.h("span", { class: "s-modal-loader" }))
+      :
+        [
+          index.h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
+            index.h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, index.h("span", { class: "sicon-cancel" }))
+            : '', this.modalTitle || this.subTitle ?
+            index.h("div", { class: "s-modal-header-inner" }, this.iconStyle || this.icon
+              ? index.h("div", { class: this.iconBlockClasses() }, index.h("i", { class: this.iconClasses() }))
+              : this.imageIcon ? index.h("img", { class: "s-modal-header-img", src: this.imageIcon }) : '', index.h("div", { class: "s-modal-header-content" }, index.h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }), index.h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
+            : ''),
+          index.h("slot", null),
+          index.h("slot", { name: "footer" })
+        ]))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "visible": ["handleVisible"]
+  }; }
+};
+SallaModal.style = sallaModalCss;
+
+const sallaProductAvailabilityCss = "";
+
+const SallaProductAvailability = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isUser = Helper.Helper.isUser();
+    this.mobileLabel = '555555555';
+    this.emailPlaceholder = 'your@email.com';
+    /**
+     * 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 { mobile, countryCode } = await this.mobileInput.getValues(), data = { id: this.productId, country_code: countryCode };
+      mobile !== '' && (data['mobile'] = mobile);
+      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.hide())
+        .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.event.on('languages::translations.loaded', () => {
+      var _a, _b, _c, _d;
+      // console.log('translations:', salla.lang);
+      this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
+      this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+      this.subTitle = salla.lang.get('pages.products.notify_availability_subtitle');
+      this.mobileLabel = salla.lang.get('common.elements.mobile') || '555555555';
+      this.emailLabel = salla.lang.get('common.elements.email');
+      this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder') || 'your@email.com';
+      this.emailErrorMsg = salla.lang.get('common.elements.email_is_valid');
+      (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title_);
+      (_b = this.btn) === null || _b === void 0 ? void 0 : _b.setText(salla.lang.get('common.elements.submit'));
+      (_c = this.cancelBtn) === null || _c === void 0 ? void 0 : _c.setText(salla.lang.get('common.elements.cancel'));
+      (_d = this.inlineBtn) === null || _d === void 0 ? void 0 : _d.setText(salla.lang.get('pages.products.notify_availability'));
+    });
+    if (this.isUser)
+      return;
+    this.channelsWatcher(this.channels);
+    this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+    this.host.removeAttribute('title');
+    this.isVisitorSubscribed = salla.storage.get(`product-${this.productId}-subscribed`);
+  }
+  channelsWatcher(newValue) {
+    this.channels_ = newValue.split(',');
+  }
+  async validateform() {
+    if (this.channels_.includes('email')) {
+      const isEmailValid = Helper.Helper.isValidEmail(this.email.value);
+      if (isEmailValid)
+        return;
+      !isEmailValid && this.validateField(this.email, this.emailErrorMsg);
+    }
+    if (this.channels_.includes('sms')) {
+      const isPhoneValid = await this.mobileInput.isValid();
+      if (isPhoneValid)
+        return;
+    }
+    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("i", { class: "sicon-bell-ring s-product-availability-subs-icon" }), " ", this.subscribedMessage)
+      :
+        index.h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.modal.show(), ref: btn => this.inlineBtn = btn }, 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: this.subTitle, icon: "sicon-bell-ring", width: "sm" }, 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", onKeyDown: e => this.typing(e, this.submit), placeholder: this.emailPlaceholder, 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" }, this.mobileLabel),
+      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", { width: "wide", color: "light", fill: "outline", onClick: () => this.modal.hide(), ref: btn => this.cancelBtn = btn }, salla.lang.get('common.elements.cancel')), index.h("salla-button", { "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 sallaSearchCss = "#s-search-modal .s-search-inline{border:1px solid #eee}#s-search-modal .s-search-no-results .s-search-input,#s-search-modal .s-search-container-open .s-search-input{border-bottom:1px solid #f4f4f5}#s-search-modal .s-search-product-image{font-size:0;position:relative}#s-search-modal .s-search-product-image:before{content:\"\";position:absolute;width:100%;height:100%;left:0;top:0;background:#eee}#s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}#s-search-modal .s-modal-spacer{display:inline}#s-search-modal .s-modal-body{padding:0;max-width:90%;margin-top:3.2rem;border-radius:0.5rem;background:transparent;overflow:visible}#s-search-modal .s-modal-close{top:50%;transform:translateY(-50%)}";
+
+const SallaSearch = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    var _a;
+    this.inputValue = '';
+    this.inline = false;
+    this.oval = false;
+    this.height = 60;
+    Helper.Helper.setHost(this.host);
+    this.productSlot = ((_a = Helper.Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
+    salla.event.on('search::show', () => this.modal.show());
+    salla.event.on('languages::translations.loaded', () => {
+      this.placeholder = salla.lang.get('blocks.header.search_placeholder');
+      this.noResultsText = salla.lang.get('common.elements.no_options');
+    });
+  }
+  onModalOpen() {
+    this.modal.querySelector('.s-search-input').focus();
+  }
+  onModalClose() {
+    this.modal.querySelector('.s-search-input').value = '';
+    this.results = undefined;
+    this.afterSearching();
+    this.container.classList.remove('s-search-no-results');
+  }
+  getDefaultProductSlot() {
+    return '<div class="s-search-product-image-container">' +
+      '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
+      '</div>' +
+      '<div class="s-search-product-details">' +
+      '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
+      '</div>';
+  }
+  search(e) {
+    this.inputValue = e.target.value;
+    Helper.Helper.hideElement(this.noResults);
+    if (e.target.value.length === 0) {
+      this.results = undefined;
+      this.afterSearching();
+      return;
+    }
+    if (e.target.value.length <= 2) {
+      return;
+    }
+    //run loading spinner or stop it
+    Helper.Helper.toggleElementClassIf(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
+    salla.search.api.products(e.target.value)
+      .then(response => this.results = response)
+      .catch(err => err !== 'Query is same as previous one!' ? this.results = undefined : null)
+      .finally(() => this.afterSearching(/*isEmpty*/ false));
+  }
+  afterSearching(isEmpty = true) {
+    var _a;
+    this.noResults.style.display = isEmpty || ((_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length) > 0 ? 'none' : 'block';
+    Helper.Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; })
+      .toggleElementClassIf(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
+    salla.search.api.previousQuery = ''; //avoid having error 'Query is same as previous one!' after reopen modal;
+    this.inputValue.length == 0 ? this.container.classList.remove('s-search-no-results') : '';
+  }
+  render() {
+    var _a;
+    const searchContent = index.h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container, style: this.oval ? { borderRadius: this.height / 2 + 'px' } : {} }, index.h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e), style: { height: this.height + 'px' } }), index.h("span", { class: "s-search-icon-wrap" }, index.h("i", { class: "s-search-icon sicon-search", ref: el => this.searchIcon = el })), index.h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
+      _a.data.map(item => index.h("a", { href: item.url, class: { "s-search-product": true, 's-search-product-not-available': !item.is_available }, innerHTML: this.productSlot
+          .replace(/\{name\}/g, item.name)
+          .replace(/\{price\}/g, salla.money(item.price))
+          .replace(/\{regular_price\}/g, item.has_special_price ? salla.money(item.regular_price) : '')
+          .replace(/\{image\}/g, item.thumbnail) })), index.h("p", { ref: el => this.noResults = el, class: "s-search-no-results-placeholder" }, this.noResultsText)));
+    return (this.inline ?
+      index.h("div", { id: "s-search-modal" }, searchContent)
+      :
+        index.h("salla-modal", { position: "top", id: "s-search-modal", ref: modal => this.modal = modal }, searchContent));
+  }
+  /**
+   * Run it one time after load
+   */
+  componentDidLoad() {
+    this.afterSearching();
+  }
+  get host() { return index.getElement(this); }
+};
+SallaSearch.style = sallaSearchCss;
+
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
 		path: basedir,
@@ -1475,4 +1989,9 @@ const SallaTelInput = class {
 };
 SallaTelInput.style = sallaTelInputCss;
 
+exports.salla_add_product_button = SallaAddProductButton;
+exports.salla_button = SallaButton;
+exports.salla_modal = SallaModal;
+exports.salla_product_availability = SallaProductAvailability;
+exports.salla_search = SallaSearch;
 exports.salla_tel_input = SallaTelInput;

package/dist/cjs/salla-login-modal.cjs.entry.js

@@ -157,7 +157,7 @@ const SallaLoginModal = class {
       this.regType = tab === this.mobileTab ? 'phone' : 'email';
     }
     let isRegistrationTab = tab == this.registrationTab;
-    isRegistrationTab && ((_a = this.firstName) === null || _a === void 0 ? void 0 : _a.focus());
+    (_a = tab.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus(); // focus the first input in tab
     (_b = this.modal) === null || _b === void 0 ? void 0 : _b.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
     if (!isRegistrationTab) {
       Helper.Helper.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-show', () => this.regType === 'phone')

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

@@ -18,5 +18,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-modal_2.cjs",[[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-product-availability.cjs",[[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[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-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"show":[64],"showOffer":[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"],"nextPageAutoload":[1028,"next-page-autoload"],"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-button.cjs",[[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}]]],["salla-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"type":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-rating-stars.cjs",[[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}]]],["salla-tel-input.cjs",[[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}]]]], options);
+  return index.bootstrapLazy([["salla-add-product-button_6.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"],"disabled":[516]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}],[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[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-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"show":[64],"showOffer":[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"],"nextPageAutoload":[1028,"next-page-autoload"],"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-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"type":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-rating-stars.cjs",[[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "./components/salla-add-product-button/salla-add-product-button.js",
     "./components/salla-branches/salla-branches.js",
     "./components/salla-button/salla-button.js",
     "./components/salla-conditional-fields/salla-conditional-fields.js",

package/dist/collection/components/salla-add-product-button/salla-add-product-button.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}