@salla.sa/twilight-components 1.0.9 → 1.0.11

package/dist/cjs/{Helper-8c75b6ac.js → Helper-8852feaa.js}

@@ -14,6 +14,9 @@ class Helper extends salla.AppHelpers {
   val(selector) {
     return this.getAttribute(selector, 'value');
   }
+  isUser() {
+    return !!salla.config.is_user;
+  }
 }
 const Helper$1 = new Helper;
 

package/dist/cjs/index.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const sallaLogin = require('./salla-login-476fb312.js');
-const sallaSearch = require('./salla-search-b9403062.js');
+const sallaSearch = require('./salla-search-f9e00be9.js');
 require('./index-23da2c6b.js');
 
 

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["salla-localization.cjs",[[4,"salla-localization",{"show":[64],"hide":[64]}]]],["salla-verify.cjs",[[0,"salla-verify"]]],["order-rating.cjs",[[0,"order-rating",{"order":[8]}]]],["salla-search.cjs",[[4,"salla-search",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]],["salla-button.cjs",[[4,"salla-button",{"kind":[513],"loading":[516],"disabled":[516],"load":[64],"stop":[64],"disable":[64],"enable":[64]}]]],["multi-warehouse_3.cjs",[[4,"multi-warehouse",{"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]}],[0,"salla-login"],[4,"salla-modal",{"error":[4],"success":[4],"isClosable":[1028,"is-closable"],"modalWidth":[1,"modal-width"],"visible":[516],"subTitle":[1,"sub-title"],"icon":[1],"show":[64],"hide":[64],"setTitle":[64]}]]]], options);
+  return index.bootstrapLazy([["multi-warehouse_4.cjs",[[4,"multi-warehouse",{"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]}],[0,"salla-login"],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"load":[64],"stop":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"isClosable":[1028,"is-closable"],"modalWidth":[513,"modal-width"],"visible":[516],"subTitle":[1,"sub-title"],"icon":[1],"show":[64],"hide":[64],"setTitle":[64]}]]],["salla-localization.cjs",[[4,"salla-localization",{"languages":[1],"currencies":[1],"ok":[1],"show":[64],"hide":[64],"submit":[64]}]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"buttonText":[1,"button-text"],"countryCode":[1,"country-code"],"title_":[1],"subscribe":[1],"cancel":[1],"subTitle":[1,"sub-title"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"mobilePlaceholder":[1,"mobile-placeholder"],"emailPlaceholder":[1,"email-placeholder"],"productId":[2,"product-id"],"subscribed":[1],"submit":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"thanksMsg":[1,"thanks-msg"],"isStoreRating":[4,"is-store-rating"],"isProductsRating":[4,"is-products-rating"],"isShippingRating":[4,"is-shipping-rating"],"show":[64],"hide":[64]}]]],["salla-verify.cjs",[[0,"salla-verify"]]],["salla-search.cjs",[[4,"salla-search",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]]], options);
   });
 };
 

package/dist/cjs/{multi-warehouse_3.cjs.entry.js → multi-warehouse_4.cjs.entry.js}

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-23da2c6b.js');
+const Helper = require('./Helper-8852feaa.js');
 const sallaLogin = require('./salla-login-476fb312.js');
-const Helper = require('./Helper-8c75b6ac.js');
+
+const multiWarehouseCss = "#s-multi-warehouse-modal .s-modal-header{display:flex;flex-direction:column;margin-bottom:40px}#s-multi-warehouse-modal .s-modal-sub-title{margin:0}#s-multi-warehouse-modal .s-modal-title{order:10}";
 
 // import Helper from "../../Helpers/Helper";
 let engine = require('store/src/store-engine');
@@ -54,6 +56,9 @@ const MultiWarehouse = class {
     this.selected = event.target.value;
   }
   handleSubmit() {
+    this.btn.load().then(() => {
+      setTimeout(() => location.reload(), 2000);
+    });
     sessionStore.set("multi-warehouse-opened-before", true);
     this.show();
     setTimeout(() => {
@@ -61,7 +66,7 @@ const MultiWarehouse = class {
     }, 300);
   }
   render() {
-    return (index.h("salla-modal", { "is-closable": !this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true', ref: modal => this.modal = modal, "modal-width": "w-116", id: "multi-warehouse-modal", class: "hidden" }, index.h("slot", { name: "header" }, index.h("div", { slot: "header" })), index.h("div", null, index.h("div", { class: "text-right" }, index.h("div", { class: "flex items-center mb-8" }, index.h("div", { class: "flex-shrink-0 sm:mb-0 me-4" }, index.h("div", { class: "h-16 w-16 border border-gray-200 bg-white text-primary rounded-full flex justify-center items-center" }, index.h("span", { class: "sicon-store-alt" }))), index.h("div", null, index.h("p", { class: "mt-1 text-xs text-gray-400" }, "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646"), index.h("h4", { class: "text-base" }, "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636"))), index.h("fieldset", { class: "mt-4" }, index.h("h4", { class: "text-sm text-gray-600 mb-6" }, this.formTitle()), index.h("legend", { class: "sr-only" }, this.formTitle()), this.branches.length <= 5 ?
+    return (index.h("salla-modal", { icon: "sicon-store-alt", title: "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636", "sub-title": "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646", "is-closable": !this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true', ref: modal => this.modal = modal, "modal-width": "w-116", id: "s-multi-warehouse-modal", class: "hidden" }, index.h("div", { class: "text-right" }, index.h("fieldset", { class: "mt-4" }, index.h("h4", { class: "text-sm text-gray-600 mb-6" }, this.formTitle()), index.h("legend", { class: "sr-only" }, this.formTitle()), this.branches.length <= 5 ?
       index.h("div", { class: "space-y-5" }, this.branches.map((branch) => index.h("div", { class: "flex items-center" }, index.h("input", { id: this.position + '_branch_' + branch.id, disabled: !branch.open && this.isChoiceable(), name: "lang", type: "radio", value: branch.id, onChange: (event) => this.handelChange(event), class: {
           'me-3 focus:ring-primary h-4 w-4 text-primary border-gray-300': true,
           'opacity-50': !branch.open,
@@ -74,14 +79,81 @@ const MultiWarehouse = class {
         :
           index.h("span", { class: this.statusColor(branch) }, branch.tag)))))
       :
-        index.h("select", { class: "w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary sm:text-sm border-gray-200 rounded-md appearance-none visibility_condition px-4", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (index.h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق'))))))), this.isChoiceable() ?
-      index.h("p", { slot: "footer" }, index.h("slot", { name: "footer" }, index.h("button", { type: "button", class: "mt-8 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white transition-colors hover:bg-primary-d focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:col-start-2 sm:text-sm", onClick: () => this.handleSubmit() }, salla.lang.get('common.elements.ok'))))
+        index.h("select", { class: "w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary sm:text-sm border-gray-200 rounded-md appearance-none visibility_condition px-4", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (index.h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق')))))), this.isChoiceable() ?
+      index.h("div", { slot: "footer", class: "mt-6" }, index.h("slot", { name: "footer" }, index.h("salla-button", { "loader-position": "before", ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "w-full" }, salla.lang.get('common.elements.ok'))))
       : ''));
   }
   componentDidRender() {
+    if (!this.isOpenedBefore && this.displayAs == 'popup') {
+      this.show();
+    }
+  }
+  get host() { return index.getElement(this); }
+};
+MultiWarehouse.style = multiWarehouseCss;
+
+const sallaButtonCss = ":host{display:block}";
+
+const SallaButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.btnStyle = 'primary'; // outline, outline-primary ,danger
+    this.loading = false;
+    this.disabled = false;
+    this.loaderPosition = 'before';
+    this.hostAttributes = {};
+    //============= Initiate Button Attributes =============//
+    for (let i = 0; i < this.host.attributes.length; i++) {
+      this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+    }
+    this.hostAttributes.type = this.hostAttributes.type || 'button';
+    this.hostAttributes.class = (this.hostAttributes.class || '') +
+      ' s-button-btn btn--has-loading btn-' + this.btnStyle + ' loader-' + this.loaderPosition;
+    this.hostAttributes.class += this.loaderPosition == 'before' ? ' flex-row-reverse' : '';
+    // if(this.hostAttributes.onclick){
+    //   this.hostAttributes.onclick=eval(this.hostAttributes.onclick);
+    // }
+    delete this.hostAttributes['btn-style'];
+    delete this.hostAttributes['id'];
+  }
+  async load() {
+    if (this.loaderPosition == 'center')
+      this.host.querySelector('.btn-text').classList.add('opacity-0');
+    this.host.setAttribute('loading', '');
+    return this.host;
+  }
+  async stop() {
+    this.host.removeAttribute('loading');
+    return this.host;
+  }
+  async disable() {
+    this.host.setAttribute('disabled', '');
+  }
+  async enable() {
+    this.host.removeAttribute('disabled');
+  }
+  handleVisible(newKind, oldKind) {
+    this.btn.classList.remove('btn-' + oldKind);
+    this.btn.classList.add('btn-' + newKind);
+  }
+  handleLoading(newVal) {
+    Helper.Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
+  }
+  render() {
+    return (index.h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), index.h("span", { class: "btn-text transition-opacity duration-300" }, index.h("slot", null)), this.loading ? index.h("span", { class: {
+        'loader loader--small s-button-loader': true,
+        'absolute right-2': this.loaderPosition === 'start',
+        'absolute left-2': this.loaderPosition === 'end',
+        'absolute top-1/2 left-1/2 !-translate-x-1/2 !-translate-y-1/2 !m-0': this.loaderPosition === 'center',
+      } }) : ''));
   }
   get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "btnStyle": ["handleVisible"],
+    "loading": ["handleLoading"]
+  }; }
 };
+SallaButton.style = sallaButtonCss;
 
 const SallaModal = class {
   constructor(hostRef) {
@@ -94,7 +166,7 @@ const SallaModal = class {
     this.modalWidth = 'w-96'; //todo use friendly names
     this.visible = false;
     this.subTitle = '';
-    this.icon = 'sicon-cancel';
+    this.icon = '';
     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.title = this.host.title;
@@ -123,6 +195,7 @@ const SallaModal = class {
     return this.host;
   }
   toggleModal(isOpen) {
+    //todo:: use ref
     Helper.Helper.toggleElement(this.host.querySelector('.s-modal-overlay'), 'ease-out duration-300 opacity-100', 'opacity-0', () => isOpen)
       .toggleElement(this.host.querySelector('.s-modal-body'), 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100', //add these classes
     'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95', //remove these classes
@@ -138,17 +211,24 @@ const SallaModal = class {
     }
     this.host.removeAttribute('visible');
   }
+  //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
-    return (index.h(index.Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-wrapper" }, index.h("div", { class: "s-modal-overlay", onClick: () => this.closeModal() }), index.h("span", { class: "s-modal-spacer" }, "\u200B"), index.h("div", { class: 's-modal-body ' + this.modalWidth }, index.h("slot", { name: "header" }, index.h("div", { class: "s-modal-header" }, this.isClosable ?
+    return (index.h(index.Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-wrapper" }, index.h("div", { class: "s-modal-overlay", onClick: () => this.closeModal() }), index.h("span", { class: "s-modal-spacer" }, "\u200B"), index.h("div", { class: 's-modal-body ' + this.modalWidth }, index.h("div", { class: { 's-modal-header': true,
+        'text-center': this.icon != '' } }, this.isClosable ?
       index.h("button", { class: "s-modal-close cursor-pointer", onClick: () => this.closeModal(), type: "button" }, index.h("span", { class: "sicon-cancel" }))
-      : '', this.error || this.success
-      ? index.h("div", { class: { 's-modal-icon': true, 's-modal-bg-error': this.error, 's-modal-bg-success': this.success } }, index.h("i", { class: {
+      : '', this.error || this.success || this.icon
+      ? index.h("div", { class: {
+          's-modal-icon': true,
+          's-modal-bg-error': this.error,
+          's-modal-bg-success': this.success,
+          's-modal-bg-normal': !this.error && !this.success
+        } }, index.h("i", { class: {
           [this.icon]: true,
           's-modal-text-error': this.error,
-          's-modal-text-success': this.success
+          's-modal-text-success': this.success,
         } }))
-      : '', index.h("div", { class: "s-modal-title", innerHTML: this.title }), index.h("p", { class: "s-modal-sub-title", innerHTML: this.subTitle }))), index.h("slot", null), index.h("slot", { name: "footer" })))));
+      : '', index.h("div", { class: "s-modal-title", innerHTML: this.title }), index.h("p", { class: "s-modal-sub-title", innerHTML: this.subTitle })), index.h("slot", null), index.h("slot", { name: "footer" })))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
@@ -158,4 +238,5 @@ const SallaModal = class {
 
 exports.salla_login = sallaLogin.SallaLogin;
 exports.multi_warehouse = MultiWarehouse;
+exports.salla_button = SallaButton;
 exports.salla_modal = SallaModal;

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

@@ -3,19 +3,30 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-23da2c6b.js');
-const Helper = require('./Helper-8c75b6ac.js');
+const Helper = require('./Helper-8852feaa.js');
 
 const SallaLocalization = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    var _a, _b;
+    this.language = salla.config.language;
+    this.currency = salla.config.currency;
+    this.languages = salla.lang.get('common.titles.language');
+    this.currencies = salla.lang.get('common.titles.currency');
+    this.ok = salla.lang.get('common.elements.ok');
     Helper.Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
-  }
-  setCurrentLanguage(language) {
-    this.language = language;
-  }
-  setCurrentCurrency(currency) {
-    this.currency = currency;
+    /**
+     * letting developer to insert his own slot like:
+     * <salla-localization>
+     *   <div slot="language">...{name}....</div>
+     *   <div slot="currency">...{name}....</div>
+     * </salla-localization>
+     * Because scoped templates not supported in stencil );
+     * we made a workaround to pass language & currency attributes, then replace names in rendering
+     */
+    this.languageSlot = ((_a = Helper.Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-label" for"lang-{code}"><span>{name}</span><div class="s-localization-flag flag iti__flag iti__{country_code}"></div></label>';
+    this.currencySlot = ((_b = Helper.Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-label" for="currency-{code}"><span>{name}</span><small class="s-localization-currency">{code}</small></label>';
   }
   async show() {
     return this.modal.show();
@@ -23,7 +34,7 @@ const SallaLocalization = class {
   async hide() {
     return this.modal.hide();
   }
-  submit() {
+  async submit() {
     let url;
     this.btn.load()
       .then(() => {
@@ -41,10 +52,23 @@ const SallaLocalization = class {
   }
   render() {
     return (index.h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal }, index.h("slot", { name: "header" }, index.h("div", { slot: "header" })), index.h("div", { class: "s-localization-inner" }, salla.config.languages
-      ? index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, salla.lang.get('common.titles.language')), index.h("fieldset", { class: "s-localization-fieldset" }, index.h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_language')), index.h("div", { class: "s-localization-section-inner" }, salla.config.languages.map(lang => index.h("div", { class: "flex items-center" }, index.h("input", { class: "s-localization-input", checked: salla.config.language.code == lang.code, onChange: () => this.setCurrentLanguage(lang), id: 'lang-' + lang.code.toLowerCase(), name: "language", type: "radio", value: lang.code }), index.h("label", { htmlFor: 'lang-' + lang.code.toLowerCase(), class: "s-localization-label" }, index.h("span", null, lang.name), index.h("div", { class: 's-localization-flag flag iti__flag iti__' + lang.country_code })))))))
+      ? index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.languages), index.h("fieldset", { class: "s-localization-fieldset" }, index.h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_language')), index.h("div", { class: "s-localization-section-inner" }, salla.config.languages.map(lang => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", type: "radio", checked: this.language.code == lang.code, onChange: () => this.language = lang, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), index.h("div", { id: "language-slot", innerHTML: this.languageSlot
+          .replace(/\{name\}/g, lang.name)
+          .replace(/\{code\}/g, lang.code)
+          .replace(/\{country_code\}/g, lang.country_code) }))))))
       : '', salla.config.currencies
-      ? index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, salla.lang.get('common.titles.currency')), index.h("fieldset", { class: "s-localization-fieldset" }, index.h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_currency')), index.h("div", { class: "s-localization-section-inner" }, salla.config.currencies.map(currency => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", checked: salla.config.currency.code == currency.code, onChange: () => this.setCurrentCurrency(currency), id: 'currency-' + currency.code, name: "currency", type: "radio", value: currency.code }), index.h("label", { class: "s-localization-label", htmlFor: 'currency-' + currency.code }, index.h("span", null, currency.name), index.h("small", { class: "s-localization-currency" }, currency.code)))))))
-      : ''), index.h("p", { slot: "footer" }, index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.submit(), class: "w-full" }, salla.lang.get('common.elements.ok'))))));
+      ? index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.currencies), index.h("fieldset", { class: "s-localization-fieldset" }, index.h("legend", { class: "sr-only" }, salla.lang.get('blocks.header.change_currency')), index.h("div", { class: "s-localization-section-inner" }, salla.config.currencies.map(currency => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency.code == currency.code, onChange: () => this.currency = currency, id: 'currency-' + currency.code, value: currency.code }), index.h("div", { id: "currency-slot", innerHTML: this.currencySlot
+          .replace(/\{name\}/g, currency.name)
+          .replace(/\{code\}/g, currency.code)
+          .replace(/\{country_code\}/g, currency.country_code) }))))))
+      : ''), index.h("p", { slot: "footer" }, index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.submit(), class: "w-full" }, this.ok)))));
+  }
+  /**
+   * to reduce dom levels we will move slot data into the parent dom
+   */
+  componentDidRender() {
+    this.host.querySelectorAll('#currency-slot').forEach(el => el.replaceWith(el.firstChild));
+    this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
   }
   get host() { return index.getElement(this); }
 };

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

@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-23da2c6b.js');
+const Helper = require('./Helper-8852feaa.js');
+
+const SallaProductAvailability = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isUser = Helper.Helper.isUser();
+    this.buttonText = salla.lang.get('pages.products.notify_availability');
+    this.countryCode = salla.config.country_code || 'SA';
+    this.subscribe = salla.lang.get('common.elements.submit');
+    this.cancel = salla.lang.get('common.elements.cancel');
+    this.subTitle = salla.lang.get('pages.products.notify_availability_subtitle');
+    this.mobileLabel = salla.lang.get('common.elements.mobile');
+    this.emailLabel = salla.lang.get('common.elements.email');
+    this.mobilePlaceholder = salla.lang.get('common.elements.mobile_placeholder');
+    this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder');
+    this.productId = salla.config.page.id;
+    this.subscribed = salla.lang.get('pages.products.notify_availability_success');
+    if (this.isUser) {
+      return;
+    }
+    this.channelsWatcher(this.channels);
+    this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+    this.host.removeAttribute('title');
+  }
+  channelsWatcher(newValue) {
+    this.channels_ = newValue.split(',');
+  }
+  async submit() {
+    if (this.isUser) {
+      return salla.api.product.availabilitySubscribe(this.productId)
+        .then(() => {
+        salla.success(this.subscribed);
+      }) //no need to wait until finishing alert animation
+        .then(() => this.host.remove());
+    }
+    let data = { id: this.productId, country_code: this.countryCode };
+    if (this.mobile.value !== '') {
+      data['mobile'] = this.mobile.value;
+    }
+    if (this.email.value !== '') {
+      data['email'] = this.email.value;
+    }
+    return this.btn.load()
+      .then(() => this.btn.disable())
+      .then(() => salla.api.product.availabilitySubscribe(data))
+      .then(() => {
+      salla.success(this.subscribed);
+    }) //no need to wait until finishing alert animation
+      .then(() => this.btn.stop())
+      .then(() => this.modal.hide())
+      .then(() => this.host.remove())
+      .catch(() => this.btn.stop() && this.btn.enable());
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null, index.h("salla-button", { onClick: () => this.isUser ? this.submit() : this.modal.show() }, this.buttonText)), this.isUser ? '' : this.renderModal()));
+  }
+  renderModal() {
+    return (index.h("salla-modal", { ref: modal => this.modal = modal, id: "product-availability-modal", title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", modalWidth: "w-full" }, index.h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
+      index.h("label", { class: "s-product-availability-label" }, this.emailLabel),
+      index.h("input", { class: "s-product-availability-input", placeholder: this.emailPlaceholder, ref: el => this.email = el, type: "email" })
+    ] : '', this.channels_.includes('sms') ? [
+      index.h("label", { class: "s-product-availability-label" }, this.mobileLabel),
+      index.h("input", { class: "s-product-availability-input", placeholder: this.mobilePlaceholder, ref: el => this.mobile = el, type: "text" }),
+      index.h("input", { type: "hidden", value: this.countryCode }),
+    ] : ''), index.h("div", { slot: "footer", class: "common-anime flex justify-between space-s-4" }, index.h("salla-button", { ref: btn => this.btn = btn, class: "w-full", onClick: () => this.submit() }, this.subscribe), index.h("salla-button", { class: "w-full", color: "outline" }, this.cancel))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "channels": ["channelsWatcher"]
+  }; }
+};
+
+exports.salla_product_availability = SallaProductAvailability;