@salla.sa/twilight-components 1.0.15 → 1.0.16

package/dist/cjs/index.cjs.js

@@ -1,13 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const sallaLogin = require('./salla-login-6a54572d.js');
-const sallaSearch = require('./salla-search-311c7053.js');
-require('./index-0b5b5867.js');
-require('./Helper-8852feaa.js');
-
-
-
-exports.SallaLogin = sallaLogin.SallaLogin;
-exports.SallaSearch = sallaSearch.SallaSearch;

package/dist/cjs/loader.cjs.js

@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0b5b5867.js');
-
-/*
- Stencil Client Patch Esm v2.8.1 | MIT Licensed | https://stenciljs.com
- */
-const patchEsm = () => {
-    return index.promiseResolve();
-};
-
-const defineCustomElements = (win, options) => {
-  if (typeof window === 'undefined') return Promise.resolve();
-  return patchEsm().then(() => {
-  return index.bootstrapLazy([["salla-button.cjs",[[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"disable":[64],"enable":[64]}]]],["salla-login_2.cjs",[[0,"salla-login"],[4,"salla-modal",{"error":[4],"success":[4],"isClosable":[1028,"is-closable"],"modalWidth":[513,"modal-width"],"visible":[516],"subTitleFirst":[4,"sub-title-first"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"show":[64],"hide":[64],"setTitle":[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.cjs",[[4,"salla-localization",{"languagesTitle":[1,"languages-title"],"currenciesTitle":[1,"currencies-title"],"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"],"subscribeText":[1,"subscribe-text"],"cancelText":[1,"cancel-text"],"subTitle":[1,"sub-title"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"mobilePlaceholder":[1,"mobile-placeholder"],"emailPlaceholder":[1,"email-placeholder"],"productId":[2,"product-id"],"subscribedMessage":[1,"subscribed-message"],"isSubscribed":[1028,"is-subscribed"],"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",[[0,"salla-search",{"placeholder":[1],"noResultsText":[1,"no-results-text"],"results":[32]},[[0,"close","onModalClose"]]]]]], options);
-  });
-};
-
-exports.defineCustomElements = defineCustomElements;

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

@@ -1,92 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0b5b5867.js');
-
-const sallaBranchesCss = ":host{display:block}";
-
-let engine = require('store/src/store-engine');
-let storages = require('store/storages/sessionStorage');
-let sessionStore = engine.createStore(storages);
-const SallaBranches = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.open = false;
-    this.isOpenedBefore = sessionStore.get("branch-choosed-before");
-    this.displayAs = 'default';
-    this.browseProductsFrom = 'all';
-    this.branches = [
-      { id: 1, name: 'فرع الرياض', open: true, available: true, limited: false, tag: 'متوفر' },
-      { id: 2, name: 'فرع جدة', open: false, available: false, limited: false, tag: 'غير متوفر' },
-      { id: 3, name: 'فرع مكة', open: true, available: true, limited: false, tag: 'متوفر' },
-      { id: 4, name: 'فرع المدينة', open: true, available: true, limited: false, tag: 'متوفر' },
-      { id: 5, name: 'فرع جازان', open: true, available: true, limited: true, tag: 'الكمية محدودة' }
-    ];
-    this.current = 1;
-    this.currentBranch = (prop) => {
-      return this.branches.filter((el) => el.id == this.current)[0][prop];
-    };
-    this.statusColor = (branch = null) => {
-      return branch ?
-        branch.limited ? 'text-red-400' : branch.available ? 'text-green-500' : 'text-gray-400'
-        :
-          this.currentBranch('limited') ? 'text-red-400' : this.currentBranch('available') ? 'text-green-500' : 'text-gray-400';
-    };
-    this.isChoiceable = () => {
-      return (this.browseProductsFrom !== 'all' && this.position == 'single') || this.position == 'header';
-    };
-    this.formTitle = () => {
-      return this.isChoiceable() ?
-        'توفر المنتج في الفروع الآخرى'
-        : 'التسوق من فرع آخر';
-    };
-    salla.event.on('branches::show', () => this.show());
-  }
-  async show() {
-    return this.modal.show();
-  }
-  async hide() {
-    return this.modal.hide();
-  }
-  handelChange(event) {
-    this.selected = event.target.value;
-  }
-  handleSubmit() {
-    this.btn.load().then(() => {
-      setTimeout(() => location.reload(), 2000);
-    });
-    sessionStore.set("branch-choosed-before", true);
-    this.show();
-    setTimeout(() => {
-      this.current = this.selected;
-    }, 300);
-  }
-  render() {
-    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", "sub-title-first": true, "is-closable": !this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true', ref: modal => this.modal = modal, "modal-width": "w-116", id: "s-branches-modal", class: "hidden" }, index.h("fieldset", null, index.h("h4", { class: "s-branches-title" }, this.formTitle()), index.h("legend", { class: "s-branches-sr-only" }, this.formTitle()), this.branches.length <= 5 ?
-      index.h("div", { class: "s-branches-space-v" }, this.branches.map((branch) => index.h("div", { class: "s-branches-input-wrap" }, 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: {
-          's-branches-input': true,
-          'opacity-50': !branch.open,
-          'hidden': !this.isChoiceable()
-        }, checked: this.current == branch.id }), index.h("label", { htmlFor: this.position + '_branch_' + branch.id, class: {
-          's-branches-label': true,
-          's-branches-clickable': this.isChoiceable()
-        } }, index.h("span", { class: { 's-branches-is-closed': !branch.open } }, branch.name), this.isChoiceable() ?
-        index.h("small", { class: "s-branches-closed-badge" }, branch.open ? '' : 'مُغلق')
-        :
-          index.h("span", { class: this.statusColor(branch) }, branch.tag)))))
-      :
-        index.h("select", { class: "s-branches-select", 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("slot", { name: "footer" }, index.h("salla-button", { "loader-position": "before", ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit" }, salla.lang.get('common.elements.ok')))
-      : ''));
-  }
-  componentDidRender() {
-    if (!this.isOpenedBefore && this.displayAs == 'popup') {
-      this.show();
-    }
-  }
-  get host() { return index.getElement(this); }
-};
-SallaBranches.style = sallaBranchesCss;
-
-exports.salla_branches = SallaBranches;

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

@@ -1,77 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0b5b5867.js');
-const Helper = require('./Helper-8852feaa.js');
-
-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.wide = false;
-    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 += ' s-button-btn btn--has-loading '
-      + 'btn-' + this.btnStyle
-      + (this.wide ? ' s-button-wide ' : '')
-      + 'loader-' + this.loaderPosition
-      + (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'];
-    if (this.wide) {
-      this.host.classList.add('s-button-wide');
-    }
-  }
-  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;
-
-exports.salla_button = SallaButton;

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

@@ -1,77 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0b5b5867.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;
-    //todo::
-    this.languagesTitle = salla.lang.get('common.titles.language');
-    this.currenciesTitle = 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());
-    /**
-     * 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();
-  }
-  async hide() {
-    return this.modal.hide();
-  }
-  async submit() {
-    let url;
-    this.btn.load()
-      .then(() => {
-      if (this.currency && this.currency.code !== salla.config.currency.code) {
-        url = window.location.href;
-        return salla.currency.api.change(this.currency.code);
-      }
-    }).then(() => {
-      if (this.language && this.language.code !== salla.config.language.code) {
-        url = this.language.url;
-      }
-    }).then(() => this.btn.stop())
-      .then(() => this.hide())
-      .then(() => url && (window.location.href = url));
-  }
-  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" }, this.languagesTitle), index.h("fieldset", { class: "s-localization-fieldset" }, 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" }, this.currenciesTitle), index.h("fieldset", { class: "s-localization-fieldset" }, 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", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, 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); }
-};
-
-exports.salla_localization = SallaLocalization;

package/dist/cjs/salla-login-6a54572d.js

@@ -1,14 +0,0 @@
-'use strict';
-
-const index = require('./index-0b5b5867.js');
-
-const SallaLogin = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("salla-modal", { id: "salla-login", title: "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u0645\u0648\u0642\u0639" }, index.h("div", { id: "showLoginMethods" }, index.h("p", { class: "text-sm text-gray-text mb-5" }, "\u0627\u062E\u062A\u0631 \u0627\u0644\u0648\u0633\u064A\u0644\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629"), index.h("div", { id: "openEmailLogin", class: "mb-2.5 box-content relative rounded-md border border-border-color bg-white py-5 pe-4 ps-5 flex items-center space-s-3 hover:border-gray-200" }, index.h("div", { class: "flex-shrink-0" }, index.h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" }, index.h("i", { class: "sicon-mail" }))), index.h("div", { class: "flex-1 min-w-0" }, index.h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" }, index.h("div", { class: "flex-1" }, index.h("span", { class: "absolute inset-0", "aria-hidden": "true" }), index.h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"), index.h("h6", { class: "font-boldf" }, "\u0627\u0644\u0628\u0631\u064A\u062F \u0627\u0644\u0625\u0644\u0643\u062A\u0631\u0648\u0646\u064A")), index.h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))), index.h("div", { class: "box-content relative rounded-md border border-border-color bg-white py-5 pe-4 ps-5 flex items-center space-s-3 hover:border-gray-200" }, index.h("div", { class: "flex-shrink-0" }, index.h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" }, index.h("i", { class: "sicon-phone" }))), index.h("div", { class: "flex-1 min-w-0" }, index.h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" }, index.h("div", { class: "flex-1" }, index.h("span", { class: "absolute inset-0", "aria-hidden": "true" }), index.h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"), index.h("h6", { class: "font-boldf" }, "\u0627\u0644\u0647\u0627\u062A\u0641")), index.h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))))));
-  }
-};
-
-exports.SallaLogin = SallaLogin;

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

@@ -1,97 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const sallaLogin = require('./salla-login-6a54572d.js');
-const index = require('./index-0b5b5867.js');
-const Helper = require('./Helper-8852feaa.js');
-
-const SallaModal = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ready = index.createEvent(this, "ready", 7);
-    this.close = index.createEvent(this, "close", 7);
-    var _a;
-    this.error = false;
-    this.success = false;
-    this.isClosable = true;
-    this.modalWidth = 'w-96'; //todo use friendly names
-    this.visible = false;
-    this.subTitleFirst = false;
-    this.subTitle = '';
-    this.icon = '';
-    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.title = this.host.title;
-    this.host.removeAttribute('title');
-    (_a = Helper.Helper.getElement('[slot=body]')) === null || _a === void 0 ? void 0 : _a.classList.add('s-modal-body');
-  }
-  handleVisible(newValue) {
-    if (!newValue) {
-      this.toggleModal(false);
-      this.close.emit();
-      return;
-    }
-    this.host.classList.remove('hidden');
-    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
-    this.ready.emit();
-  }
-  async show() {
-    this.host.setAttribute('visible', '');
-    return this.host;
-  }
-  async hide() {
-    this.host.removeAttribute('visible');
-    return this.host;
-  }
-  async setTitle(title) {
-    this.title = title;
-    return this.host;
-  }
-  toggleModal(isOpen) {
-    Helper.Helper.toggleElement(this.host.querySelector('.s-modal-body'), 's-modal-entering', 's-modal-leaving', () => isOpen)
-      .toggleElement(this.host.querySelector('[slot=body]'), 's-modal-entering', 's-modal-leaving', () => isOpen)
-      .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
-      .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
-    if (!isOpen) {
-      setTimeout(() => this.host.classList.add('hidden'), 350);
-    }
-  }
-  closeModal() {
-    if (!this.isClosable) {
-      return;
-    }
-    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", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("span", { class: "s-modal-spacer" }, "\u200B"), index.h("slot", { name: "body" }, index.h("div", { class: 's-modal-body ' + this.modalWidth }, 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 cursor-pointer", onClick: () => this.closeModal(), type: "button" }, index.h("span", { class: "sicon-cancel" }))
-      : '', 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,
-        } }))
-      : this.imageIcon ?
-        index.h("img", { class: "s-modal-header-img", src: this.imageIcon })
-        : '', this.title || this.subTitle ?
-      index.h("div", { class: "s-modal-header-content" }, index.h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }), 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"]
-  }; }
-};
-
-exports.salla_login = sallaLogin.SallaLogin;
-exports.salla_modal = SallaModal;

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

@@ -1,75 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0b5b5867.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.subscribeText = salla.lang.get('common.elements.submit');
-    this.cancelText = 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.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
-    this.isSubscribed = false;
-    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(() => this.isSubscribed = true);
-    }
-    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(() => this.isSubscribed = true) //no need to wait until finishing alert animation
-      .then(() => this.btn.stop())
-      .then(() => this.modal.hide())
-      .catch(() => this.btn.stop() && this.btn.enable());
-  }
-  render() {
-    return (index.h(index.Host, null, this.isSubscribed
-      ? index.h("div", { class: "s-product-availability-subscribed" }, this.subscribedMessage)
-      : index.h("slot", null, index.h("salla-button", { wide: true, onClick: () => this.isUser ? this.submit() : this.modal.show() }, this.buttonText)), this.isUser || this.isSubscribed ? '' : this.renderModal()));
-  }
-  renderModal() {
-    return (index.h("salla-modal", { ref: modal => this.modal = modal, title: this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", modalWidth: "w-96" }, 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: "s-product-availability-footer" }, index.h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.subscribeText), index.h("salla-button", { wide: true, "btn-style": "outline" }, this.cancelText))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "channels": ["channelsWatcher"]
-  }; }
-};
-
-exports.salla_product_availability = SallaProductAvailability;