@salla.sa/twilight-components 1.0.72 → 1.0.73

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

@@ -0,0 +1,230 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
+export class SallaAddProductButton {
+  constructor() {
+    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 (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({ 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' }),
+        h("slot", null),
+        h("span", { ref: (el) => this.buttonLabel = el }))));
+  }
+  static get is() { return "salla-add-product-button"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-add-product-button.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-add-product-button.css"]
+  }; }
+  static get properties() { return {
+    "channels": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "channels",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "quantity": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "quantity",
+      "reflect": true,
+      "defaultValue": "1"
+    },
+    "donatingAmount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "donating-amount",
+      "reflect": true,
+      "defaultValue": "0"
+    },
+    "productId": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product-id",
+      "reflect": true
+    },
+    "productStatus": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'sale' | 'out' | 'out-and-notify'",
+        "resolved": "\"out\" | \"out-and-notify\" | \"sale\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product-status",
+      "reflect": true,
+      "defaultValue": "'sale'"
+    },
+    "productType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'product' | 'service' | 'codes' | 'digital' | 'food' | 'donating' | 'group_products'",
+        "resolved": "\"codes\" | \"digital\" | \"donating\" | \"food\" | \"group_products\" | \"product\" | \"service\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product-type",
+      "reflect": true,
+      "defaultValue": "'product'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Is the button currently disabled"
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "success",
+      "name": "success",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "failed",
+      "name": "failed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}

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

@@ -8,7 +8,7 @@
 salla-button {
   pointer-events: none;
 }
-salla-button[type=submit] {
+salla-button[type=submit], salla-button[type=button], salla-button[type=reset] {
   -webkit-appearance: none;
 }
 salla-button[width=wide] {

package/dist/collection/components/salla-login-modal/salla-login-modal.js

@@ -160,7 +160,7 @@ export class SallaLoginModal {
       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.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-show', () => this.regType === 'phone')

package/dist/collection/components/salla-product-availability/salla-product-availability.css

@@ -2,7 +2,7 @@
 * Global flags style [imported from Int-tel-input]
 */
 /*
-* Salla Product Availability Component: popup modal to notify user if the product is available, 
+* Salla Product Availability Component: popup modal to notify user if the product is available,
 * used in the product single page if the product isn't available.
 * You can use these classes to target the elements in the component.
 */

package/dist/collection/components/salla-product-availability/salla-product-availability.js

@@ -6,6 +6,8 @@ import Helper from "../../Helpers/Helper";
 export class SallaProductAvailability {
   constructor() {
     this.isUser = Helper.isUser();
+    this.mobileLabel = '555555555';
+    this.emailPlaceholder = 'your@email.com';
     /**
      * product id that can visitor subscribe to its availability notification
      */
@@ -48,9 +50,9 @@ export class SallaProductAvailability {
       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');
+      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');
+      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'));
@@ -86,7 +88,7 @@ export class SallaProductAvailability {
     field.nextElementSibling['innerText'] = '* ' + errorMsg;
   }
   render() {
-    return (h(Host, { id: "s-product-availability" },
+    return (h(Host, { class: "s-product-availability-wrap" },
       this.isSubscribed || this.isVisitorSubscribed
         ? h("div", { class: "s-product-availability-subscribed" },
           h("i", { class: "sicon-bell-ring s-product-availability-subs-icon" }),

package/dist/components/salla-add-product-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaAddProductButton extends Components.SallaAddProductButton, HTMLElement {}
+export const SallaAddProductButton: {
+  prototype: SallaAddProductButton;
+  new (): SallaAddProductButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-add-product-button.js

@@ -0,0 +1,121 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './salla-button2.js';
+import { d as defineCustomElement$4 } from './salla-modal2.js';
+import { d as defineCustomElement$3 } from './salla-product-availability2.js';
+import { d as defineCustomElement$2 } from './salla-tel-input2.js';
+
+const sallaAddProductButtonCss = ":host{display:block}";
+
+const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.success = createEvent(this, "success", 7);
+    this.failed = 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 (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({ 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' }), h("slot", null), h("span", { ref: (el) => this.buttonLabel = el }))));
+  }
+  get host() { return this; }
+  static get style() { return sallaAddProductButtonCss; }
+}, [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]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-add-product-button", "salla-button", "salla-modal", "salla-product-availability", "salla-tel-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-add-product-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaAddProductButton$1);
+      }
+      break;
+    case "salla-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "salla-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "salla-product-availability":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "salla-tel-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SallaAddProductButton = SallaAddProductButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaAddProductButton, defineCustomElement };

package/dist/components/salla-button2.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const sallaButtonCss = "salla-button{pointer-events:none}salla-button[type=submit]{-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 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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/salla-login-modal.js

@@ -158,7 +158,7 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       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.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-show', () => this.regType === 'phone')

package/dist/components/salla-product-availability.js

@@ -1,161 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { H as Helper } from './Helper.js';
-import { d as defineCustomElement$4 } from './salla-button2.js';
-import { d as defineCustomElement$3 } from './salla-modal2.js';
-import { d as defineCustomElement$2 } from './salla-tel-input2.js';
-
-const sallaProductAvailabilityCss = "";
-
-const SallaProductAvailability$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.isUser = Helper.isUser();
-    /**
-     * 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');
-      this.emailLabel = salla.lang.get('common.elements.email');
-      this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder');
-      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.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 (h(Host, { id: "s-product-availability" }, this.isSubscribed || this.isVisitorSubscribed
-      ? h("div", { class: "s-product-availability-subscribed" }, h("i", { class: "sicon-bell-ring s-product-availability-subs-icon" }), " ", this.subscribedMessage)
-      :
-        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 (h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", width: "sm" }, h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
-      h("label", { class: "s-product-availability-label" }, this.emailLabel),
-      h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e, this.submit), placeholder: this.emailPlaceholder, 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" }, this.mobileLabel),
-      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", { width: "wide", color: "light", fill: "outline", onClick: () => this.modal.hide(), ref: btn => this.cancelBtn = btn }, salla.lang.get('common.elements.cancel')), 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 this; }
-  static get watchers() { return {
-    "channels": ["channelsWatcher"]
-  }; }
-  static get style() { return sallaProductAvailabilityCss; }
-}, [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]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["salla-product-availability", "salla-button", "salla-modal", "salla-tel-input"];
-  components.forEach(tagName => { switch (tagName) {
-    case "salla-product-availability":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SallaProductAvailability$1);
-      }
-      break;
-    case "salla-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "salla-modal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "salla-tel-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { S as SallaProductAvailability$1, d as defineCustomElement$1 } from './salla-product-availability2.js';
 
 const SallaProductAvailability = SallaProductAvailability$1;
 const defineCustomElement = defineCustomElement$1;