@salla.sa/twilight-components 1.0.50 → 1.0.51

package/dist/cjs/{salla-button_7.cjs.entry.js → salla-tel-input.cjs.entry.js}

@@ -4,369 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0b5b5867.js');
 const Helper = require('./Helper-98cc9f18.js');
-const sallaSearch = require('./salla-search-a7147639.js');
-
-const sallaButtonCss = "";
-
-const SallaButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Button Style
-     */
-    this.btnStyle = 'primary';
-    /**
-     * 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;
-    this.hostAttributes = {};
-    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'
-      + ' s-button-' + this.btnStyle
-      + (this.wide ? ' s-button-wide ' : '')
-      + ' s-button-btn-loader-' + this.loaderPosition //todo:: it looks there is no need for this class🤔
-      + (this.loaderPosition == 'after' ? ' s-button-loader-after' : '');
-    delete this.hostAttributes['btn-style'];
-    delete this.hostAttributes['id'];
-    delete this.hostAttributes['data-on-click'];
-    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', '');
-  }
-  /**
-   * Remove `disabled` attribute
-   */
-  async enable() {
-    this.host.removeAttribute('disabled');
-  }
-  handleVisible(newKind, oldKind) {
-    //todo::use united styles
-    this.btn.classList.remove('btn-' + oldKind);
-    this.btn.classList.add('btn-' + newKind);
-  }
-  handleLoading(newVal) {
-    //todo::use united styles
-    Helper.Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
-  }
-  render() {
-    return (
-    //TODO:: use HOST then fake button behaviours
-    index.h(index.Host, { class: "s-button-wrap" }, index.h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), index.h("span", { class: { 's-button-text': true, 's-button-hide': this.loaderPosition == 'center' && this.loading }, ref: el => this.text = el }, index.h("slot", null)), this.loading ? index.h("span", { class: {
-        //todo::use united styles
-        's-button-loader': true,
-        's-button-loader-start': this.loaderPosition === 'start',
-        's-button-loader-end': this.loaderPosition === 'end',
-        's-button-loader-center': this.loaderPosition === 'center',
-      } }) : '')));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "btnStyle": ["handleVisible"],
-    "loading": ["handleLoading"]
-  }; }
-};
-SallaButton.style = sallaButtonCss;
-
-const sallaLocalizationCss = "";
-
-const SallaLocalization = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    var _a, _b;
-    this.languages = [];
-    this.currencies = [];
-    this.isLoading = true;
-    this.language = salla.config.get('user.language_code');
-    this.currency = salla.config.get('user.currency_code');
-    Helper.Helper.setHost(this.host);
-    salla.event.on('localization::show', () => this.show());
-    salla.event.on('languages::translations.loaded', () => {
-      var _a;
-      this.languagesTitle = salla.lang.get('common.titles.language');
-      this.currenciesTitle = salla.lang.get('common.titles.currency');
-      (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok'));
-    });
-    /**
-     * 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>';
-  }
-  /**
-   * Show the component
-   */
-  async show() {
-    return this.modal.show()
-      .then(() => this.getLanguages())
-      .then(() => this.getCurrencies())
-      .then(() => this.isLoading = false);
-  }
-  /**
-   * Hide the component
-   */
-  async hide() {
-    return this.modal.hide();
-  }
-  async getLanguages() {
-    this.language = this.language || salla.config.get('user.language_code');
-    return this.languages.length > 1 ? null : await salla.config.languages().then(data => this.languages = data);
-  }
-  async getCurrencies() {
-    this.currency = this.currency || salla.config.get('user.currency_code');
-    return this.currencies.length > 1 ? null : await salla.config.currencies().then(data => this.currencies = data);
-  }
-  onChangeCurrency(event) {
-    this.currency = event.target.value;
-  }
-  onChangeLanguage(event) {
-    this.language = event.target.value;
-  }
-  async submit() {
-    let url;
-    this.btn.load()
-      .then(() => {
-      if (!this.currency) {
-        salla.log('There is no currency!');
-        return;
-      }
-      if (this.currency === salla.config.get('user.currency_code', 'SAR')) {
-        return;
-      }
-      url = window.location.href;
-      return salla.currency.api.change(this.currency);
-    })
-      .then(() => this.language === salla.config.get('user.language_code', 'ar') || (url = salla.helpers.addParamToUrl('lang', this.language)))
-      .then(() => this.btn.stop())
-      .then(() => this.hide())
-      .then(() => url && (window.location.href = url));
-  }
-  render() {
-    return (index.h("salla-modal", { isLoading: this.isLoading, id: "salla-localization", class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, !this.isLoading ?
-      index.h("div", { class: "s-localization-inner" }, this.languages.length > 1 ?
-        index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.languagesTitle), index.h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
-          this.languages.map(lang => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", type: "radio", checked: this.language == lang.iso_code, onChange: () => this.language = lang.iso_code, 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) }))) :
-          index.h("select", { class: "s-localization-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => index.h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
-        : '', this.currencies.length > 1 ?
-        index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.currenciesTitle), index.h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
-          this.currencies.map(currency => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency == currency.code, onChange: () => this.currency = currency.code, 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("select", { class: "s-localization-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, this.currencies.map(currency => index.h("option", { value: currency.code, selected: this.currency == currency.code }, currency.name)))))
-        : '', index.h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.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); }
-};
-SallaLocalization.style = sallaLocalizationCss;
-
-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.title = this.host.title;
-    this.host.removeAttribute('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 title
-   * @param {string} title
-   */
-  async setTitle(title) {
-    this.title = title;
-    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.toggleElement(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
-      .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
-      //todo:: use united class names
-      .toggleElement(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.title || 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.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"]
-  }; }
-};
-SallaModal.style = sallaModalCss;
 
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
@@ -1840,150 +1477,4 @@ const SallaTelInput = class {
 };
 SallaTelInput.style = sallaTelInputCss;
 
-const sallaVerifyModalCss = "salla-verify-modal{display:block}";
-
-const SallaVerifyModal = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.verified = index.createEvent(this, "verified", 7);
-    this.initiated = false;
-    /**
-     * Verifying method
-     */
-    this.by = 'sms';
-    /**
-     * should auto reloading the page after success verification
-     */
-    this.autoReload = true;
-    Helper.Helper.setHost(this.host);
-    if (this.withoutModal) {
-      this.modal = { show: () => '', hide: () => '' };
-    }
-    else {
-      salla.event.on('profile::verify.mobile', data => {
-        this.url = 'profile/verify-mobile';
-        this.show(data);
-      });
-    }
-    salla.event.on('languages::translations.loaded', () => {
-      var _a;
-      this.title = salla.lang.get('pages.profile.verify_title');
-      (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('pages.profile.verify'));
-    });
-  }
-  /**
-   * Get current code
-   * @return {string}
-   */
-  async getCode() {
-    return this.code.value;
-  }
-  /**
-   * Show verifying modal
-   * @param data
-   */
-  async show(data) {
-    var _a;
-    this.data = data;
-    this.resendTimer();
-    this.otpInputs = this.host.querySelectorAll('.s-verify-modal-input');
-    if (!this.initiated) {
-      Helper.Helper.on('input', '.s-verify-modal-input', e => salla.helpers.digitsOnly(e.target));
-      Helper.Helper.onKeyUp('.s-verify-modal-input', event => {
-        var _a, _b, _c, _d;
-        let key = event.keyCode || event.charCode;
-        if (event.target.value) {
-          (_a = event.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
-          (_b = event.target.nextElementSibling) === null || _b === void 0 ? void 0 : _b.select();
-        }
-        else if ([8, 46].includes(key)) {
-          (_c = event.target.previousElementSibling) === null || _c === void 0 ? void 0 : _c.focus();
-          (_d = event.target.previousElementSibling) === null || _d === void 0 ? void 0 : _d.select();
-        }
-        this.toggleOTPSubmit();
-      });
-      Helper.Helper.on('paste', '.s-verify-modal-input', event => {
-        let text = event.clipboardData.getData('text').toArabicDigits().replace(/[^0-9.]/g, '').replace('..', '.');
-        this.otpInputs.forEach((input, i) => input.value = text[i] || '');
-        this.toggleOTPSubmit();
-        setTimeout(() => this.otpInputs[3].focus(), 100);
-      });
-      // return this.modal.show();
-      this.initiated = true;
-    }
-    this.reset();
-    !this.withoutModal && ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title));
-    this.modal.show();
-  }
-  toggleOTPSubmit() {
-    let otp = [];
-    this.otpInputs.forEach(input => input.value && otp.push(input.value));
-    this.code.value = otp.join('');
-    if (otp.length === 4) {
-      this.btn.removeAttribute('disabled');
-      this.btn.click();
-      return;
-    }
-    this.btn.setAttribute('disabled', '');
-  }
-  reset() {
-    this.otpInputs.forEach((input) => input.value = '');
-    this.code.value = '';
-    this.otpInputs[0].focus();
-  }
-  resendTimer() {
-    Helper.Helper.showElement(this.resendMessage).hideElement(this.resend);
-    let resendAfter = 30;
-    let timerId = setInterval(() => {
-      if (resendAfter === -1) {
-        clearTimeout(timerId);
-        Helper.Helper.hideElement(this.resendMessage).showElement(this.resend);
-      }
-      else {
-        this.timer.innerHTML = `${resendAfter >= 10 ? resendAfter : '0' + resendAfter} : 00`;
-        resendAfter--;
-      }
-    }, 1000);
-  }
-  resendCode() {
-    return this.btn.stop()
-      .then(() => this.btn.disable())
-      .then(() => {
-      this.otpInputs.forEach(input => input.value = '');
-      this.otpInputs[0].focus();
-    })
-      .then(() => salla.api.auth.resend(Object.assign({ resend_by: this.by }, this.data)))
-      .then(() => this.resendTimer())
-      .catch(() => this.resendTimer());
-  }
-  submit() {
-    let data = Object.assign({ code: this.code.value }, this.data);
-    return this.btn.load()
-      .then(() => this.btn.disable())
-      .then(() => this.url
-      ? salla.api.auth.request(this.url, data)
-      : salla.api.auth.verify(this.by == 'sms' ? 'mobile' : this.by, data))
-      .then(response => this.verified.emit(response))
-      .then(() => this.btn.stop() && this.btn.disable())
-      .then(() => this.modal.hide())
-      .then(() => this.autoReload && window.location.reload())
-      .catch(() => this.btn.stop() && this.btn.enable() && this.reset());
-  }
-  render() {
-    return this.withoutModal ? this.myBody() :
-      index.h("salla-modal", { icon: "sicon-android-phone", width: "xs", id: "s-verify-modal", ref: modal => this.modal = modal, title: this.title }, this.myBody());
-  }
-  myBody() {
-    return (index.h(index.Host, { id: "s-verify-modal" }, index.h("div", { class: "s-verify-modal-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), index.h("div", { class: "s-verify-modal-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-modal-input", required: true }))), index.h("div", { slot: "footer", class: "s-verify-modal-footer" }, index.h("salla-button", { class: "s-verify-modal-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index.h("p", { class: "s-verify-modal-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-modal-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-modal-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), index.h("slot", { name: "after-footer" })));
-  }
-  get host() { return index.getElement(this); }
-};
-SallaVerifyModal.style = sallaVerifyModalCss;
-
-exports.salla_login = sallaSearch.SallaLogin;
-exports.salla_search = sallaSearch.SallaSearch;
-exports.salla_button = SallaButton;
-exports.salla_localization = SallaLocalization;
-exports.salla_modal = SallaModal;
 exports.salla_tel_input = SallaTelInput;
-exports.salla_verify_modal = SallaVerifyModal;

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

@@ -0,0 +1,148 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0b5b5867.js');
+const Helper = require('./Helper-98cc9f18.js');
+
+const sallaVerifyModalCss = "salla-verify-modal{display:block}";
+
+const SallaVerifyModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.verified = index.createEvent(this, "verified", 7);
+    this.initiated = false;
+    /**
+     * Verifying method
+     */
+    this.by = 'sms';
+    /**
+     * should auto reloading the page after success verification
+     */
+    this.autoReload = true;
+    Helper.Helper.setHost(this.host);
+    if (this.withoutModal) {
+      this.modal = { show: () => '', hide: () => '' };
+    }
+    else {
+      salla.event.on('profile::verify.mobile', data => {
+        this.url = 'profile/verify-mobile';
+        this.show(data);
+      });
+    }
+    salla.event.on('languages::translations.loaded', () => {
+      var _a;
+      this.title = salla.lang.get('pages.profile.verify_title');
+      (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('pages.profile.verify'));
+    });
+  }
+  /**
+   * Get current code
+   * @return {string}
+   */
+  async getCode() {
+    return this.code.value;
+  }
+  /**
+   * Show verifying modal
+   * @param data
+   */
+  async show(data) {
+    var _a;
+    this.data = data;
+    this.resendTimer();
+    this.otpInputs = this.host.querySelectorAll('.s-verify-modal-input');
+    if (!this.initiated) {
+      Helper.Helper.on('input', '.s-verify-modal-input', e => salla.helpers.digitsOnly(e.target));
+      Helper.Helper.onKeyUp('.s-verify-modal-input', event => {
+        var _a, _b, _c, _d;
+        let key = event.keyCode || event.charCode;
+        if (event.target.value) {
+          (_a = event.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+          (_b = event.target.nextElementSibling) === null || _b === void 0 ? void 0 : _b.select();
+        }
+        else if ([8, 46].includes(key)) {
+          (_c = event.target.previousElementSibling) === null || _c === void 0 ? void 0 : _c.focus();
+          (_d = event.target.previousElementSibling) === null || _d === void 0 ? void 0 : _d.select();
+        }
+        this.toggleOTPSubmit();
+      });
+      Helper.Helper.on('paste', '.s-verify-modal-input', event => {
+        let text = event.clipboardData.getData('text').toArabicDigits().replace(/[^0-9.]/g, '').replace('..', '.');
+        this.otpInputs.forEach((input, i) => input.value = text[i] || '');
+        this.toggleOTPSubmit();
+        setTimeout(() => this.otpInputs[3].focus(), 100);
+      });
+      // return this.modal.show();
+      this.initiated = true;
+    }
+    this.reset();
+    !this.withoutModal && ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title));
+    this.modal.show();
+  }
+  toggleOTPSubmit() {
+    let otp = [];
+    this.otpInputs.forEach(input => input.value && otp.push(input.value));
+    this.code.value = otp.join('');
+    if (otp.length === 4) {
+      this.btn.removeAttribute('disabled');
+      this.btn.click();
+      return;
+    }
+    this.btn.setAttribute('disabled', '');
+  }
+  reset() {
+    this.otpInputs.forEach((input) => input.value = '');
+    this.code.value = '';
+    this.otpInputs[0].focus();
+  }
+  resendTimer() {
+    Helper.Helper.showElement(this.resendMessage).hideElement(this.resend);
+    let resendAfter = 30;
+    let timerId = setInterval(() => {
+      if (resendAfter === -1) {
+        clearTimeout(timerId);
+        Helper.Helper.hideElement(this.resendMessage).showElement(this.resend);
+      }
+      else {
+        this.timer.innerHTML = `${resendAfter >= 10 ? resendAfter : '0' + resendAfter} : 00`;
+        resendAfter--;
+      }
+    }, 1000);
+  }
+  resendCode() {
+    return this.btn.stop()
+      .then(() => this.btn.disable())
+      .then(() => {
+      this.otpInputs.forEach(input => input.value = '');
+      this.otpInputs[0].focus();
+    })
+      .then(() => salla.api.auth.resend(Object.assign({ resend_by: this.by }, this.data)))
+      .then(() => this.resendTimer())
+      .catch(() => this.resendTimer());
+  }
+  submit() {
+    let data = Object.assign({ code: this.code.value }, this.data);
+    return this.btn.load()
+      .then(() => this.btn.disable())
+      .then(() => this.url
+      ? salla.api.auth.request(this.url, data)
+      : salla.api.auth.verify(this.by == 'sms' ? 'mobile' : this.by, data))
+      .then(response => this.verified.emit(response))
+      .then(() => this.btn.stop() && this.btn.disable())
+      .then(() => this.modal.hide())
+      .then(() => this.autoReload && window.location.reload())
+      .catch(() => this.btn.stop() && this.btn.enable() && this.reset());
+  }
+  render() {
+    return this.withoutModal ? this.myBody() :
+      index.h("salla-modal", { icon: "sicon-android-phone", width: "xs", id: "s-verify-modal", ref: modal => this.modal = modal, title: this.title }, this.myBody());
+  }
+  myBody() {
+    return (index.h(index.Host, { id: "s-verify-modal" }, index.h("div", { class: "s-verify-modal-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), index.h("div", { class: "s-verify-modal-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-modal-input", required: true }))), index.h("div", { slot: "footer", class: "s-verify-modal-footer" }, index.h("salla-button", { class: "s-verify-modal-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index.h("p", { class: "s-verify-modal-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-modal-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-modal-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))), index.h("slot", { name: "after-footer" })));
+  }
+  get host() { return index.getElement(this); }
+};
+SallaVerifyModal.style = sallaVerifyModalCss;
+
+exports.salla_verify_modal = SallaVerifyModal;