@salla.sa/twilight-components 1.0.19 → 1.0.20

package/dist/{cjs/salla-search-c7aad59a.js → twilight-components/salla-search-30fec1e8.js}

@@ -1,11 +1,9 @@
-'use strict';
-
-const index = require('./index-4b8b3ffe.js');
-const Helper = require('./Helper-fcea994c.js');
+import { r as registerInstance, h, e as Host, g as getElement } from './index-9c087700.js';
+import { H as Helper } from './Helper-d07ebbc7.js';
 
 const SallaSearch = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
+    registerInstance(this, hostRef);
     var _a, _b;
     this.results = [];
     /**
@@ -16,12 +14,12 @@ const SallaSearch = class {
      * Override no results error message.
      */
     this.noResultsText = salla.lang.get('common.elements.no_options');
-    Helper.Helper.setHost(this.host);
-    this.buttonSlot = ((_a = Helper.Helper.getElement('[slot="button"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="sicon-search"></i>';
-    this.productSlot = ((_b = Helper.Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.getDefaultProductSlot();
+    Helper.setHost(this.host);
+    this.buttonSlot = ((_a = Helper.getElement('[slot="button"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="sicon-search"></i>';
+    this.productSlot = ((_b = Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.getDefaultProductSlot();
   }
   onModalClose() {
-    Helper.Helper.getElement('.s-search-input').value = '';
+    Helper.getElement('.s-search-input').value = '';
     this.results = [];
     this.afterSearching();
   }
@@ -35,7 +33,7 @@ const SallaSearch = class {
   }
   //todo:: reset data when closing
   search(e) {
-    Helper.Helper.hideElement(this.noResults);
+    Helper.hideElement(this.noResults);
     if (e.target.value.length === 0) {
       this.results = [];
       this.afterSearching();
@@ -45,7 +43,7 @@ const SallaSearch = class {
       return;
     }
     //run loading spinner or stop it
-    Helper.Helper.toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
+    Helper.toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
     salla.search.api.search(e.target.value)
       .then(response => this.results = response.results)
       .catch(err => err !== 'Query Same As Previous!' ? this.results = [] : null)
@@ -53,21 +51,21 @@ const SallaSearch = class {
   }
   afterSearching(isEmpty = true) {
     this.noResults.style.display = isEmpty || this.results.length > 0 ? 'none' : 'block';
-    Helper.Helper.toggleElement(this.container, 's-search-container-open', 'no-results', () => this.results.length)
+    Helper.toggleElement(this.container, 's-search-container-open', 'no-results', () => this.results.length)
       .toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
     salla.search.api.previousQuery = ''; //avoid having error 'Query Same As Previous' after reopen modal;
   }
   render() {
     var _a;
-    return (index.h(index.Host, { class: "s-search" }, index.h("button", { onClick: () => this.modal.show(), class: "s-search-button", innerHTML: this.buttonSlot }), index.h("salla-modal", { ref: modal => this.modal = modal }, index.h("div", { class: "s-search-container", slot: "body", ref: container => this.container = container }, index.h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e) }), index.h("span", { class: "s-search-icon" }, index.h("i", { class: "sicon-search", ref: el => this.searchIcon = el })), index.h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
+    return (h(Host, { class: "s-search" }, h("button", { onClick: () => this.modal.show(), class: "s-search-button", innerHTML: this.buttonSlot }), h("salla-modal", { ref: modal => this.modal = modal }, h("div", { class: "s-search-container", slot: "body", ref: container => this.container = container }, h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e) }), h("span", { class: "s-search-icon" }, h("i", { class: "sicon-search", ref: el => this.searchIcon = el })), h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
       _a.map(item => {
         var _a;
-        return index.h("div", { class: "s-search-product", innerHTML: this.productSlot
+        return h("div", { class: "s-search-product", innerHTML: this.productSlot
             .replace(/\{name\}/g, item.title)
             .replace(/\{price\}/g, (_a = item.price) === null || _a === void 0 ? void 0 : _a.after) //todo:: get discounted price too
             .replace(/\{url\}/g, item.url)
             .replace(/\{image\}/g, item.thumb) });
-      }), index.h("p", { ref: el => this.noResults = el, class: "s-search-no-results" }, this.noResultsText))))));
+      }), h("p", { ref: el => this.noResults = el, class: "s-search-no-results" }, this.noResultsText))))));
   }
   /**
    * Run it one time after load
@@ -75,7 +73,7 @@ const SallaSearch = class {
   componentDidLoad() {
     this.afterSearching();
   }
-  get host() { return index.getElement(this); }
+  get host() { return getElement(this); }
 };
 
-exports.SallaSearch = SallaSearch;
+export { SallaSearch as S };

package/dist/twilight-components/salla-search.entry.js

@@ -0,0 +1,3 @@
+export { S as salla_search } from './salla-search-30fec1e8.js';
+import './index-9c087700.js';
+import './Helper-d07ebbc7.js';

package/dist/{esm/salla-button_5.entry.js → twilight-components/salla-tel-input.entry.js}

@@ -1,197 +1,44 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-092659c7.js';
-import { H as Helper } from './Helper-d07ebbc7.js';
-export { S as salla_login } from './salla-login-38586400.js';
+import { r as registerInstance, h, e as Host } from './index-9c087700.js';
 
-const sallaButtonCss = ":host{display:block}";
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-const SallaButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.btnStyle = 'primary';
-    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'
-      + ' s-button-' + this.btnStyle
-      + (this.wide ? ' s-button-wide ' : '')
-      + ' loader-' + this.loaderPosition
-      + (this.loaderPosition == 'before' ? ' s-button-loader-after' : '');
-    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.text.classList.add('s-button-hide');
-    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) {
-    //todo::use united styles
-    this.btn.classList.remove('btn-' + oldKind);
-    this.btn.classList.add('btn-' + newKind);
-  }
-  handleLoading(newVal) {
-    //todo::use united styles
-    Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
-  }
-  render() {
-    return (
-    //TODO:: use HOST then fake button behaviours
-    h(Host, { class: "s-button-host-tag" }, h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes), h("span", { class: "s-button-text", ref: el => this.text = el }, h("slot", null)), this.loading ? 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 getElement(this); }
-  static get watchers() { return {
-    "btnStyle": ["handleVisible"],
-    "loading": ["handleLoading"]
-  }; }
-};
-SallaButton.style = sallaButtonCss;
-
-const SallaModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.modalOpened = createEvent(this, "modalOpened", 7);
-    this.modalClosed = createEvent(this, "modalClosed", 7);
-    var _a;
-    //todo:: unite three colors (error, success, primary) in one prop
-    this.error = false;
-    this.success = false;
-    this.primary = false;
-    this.isClosable = true;
-    this.width = 'md';
-    this.visible = false;
-    this.isLoading = false;
-    this.subTitleFirst = false;
-    this.subTitle = '';
-    this.icon = '';
-    this.imageIcon = '';
-    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.getElement('[slot=body]')) === null || _a === void 0 ? void 0 : _a.classList.add('s-modal-body', 's-modal-' + this.width);
-  }
-  handleVisible(newValue) {
-    if (!newValue) {
-      this.toggleModal(false);
-      this.modalClosed.emit();
-      return;
-    }
-    this.host.classList.remove('hidden');
-    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
-    this.modalOpened.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;
-  }
-  async loading() {
-    this.isLoading = true;
-    return this.host;
-  }
-  async stopLoading() {
-    this.isLoading = false;
-    return this.host;
-  }
-  toggleModal(isOpen) {
-    Helper
-      // .toggleElement(this.host.querySelector('.s-modal-body'), 's-modal-entering', 's-modal-leaving', () => isOpen)
-      .toggleElement(this.host.querySelector('[slot=body]') || this.host, '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('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 (
-    //todo:: use suitable class name instead of hidden
-    h(Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-wrapper" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("span", { class: "s-modal-spacer" }, "\u200B"), h("slot", { name: "body" }, h("div", { class: 's-modal-body ' + 's-modal-' + this.width, slot: "body" }, this.isLoading
-      ? h("span", null, "Loading...")
-      : [h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
-          //todo:: remove cursor-pointer
-          h("button", { class: "s-modal-close cursor-pointer", onClick: () => this.closeModal(), type: "button" }, h("span", { class: "sicon-cancel" }))
-          : '', this.error || this.success || this.icon
-          ? 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,
-              's-modal-bg-primary': this.primary
-            } }, h("i", { class: {
-              [this.icon]: true,
-              's-modal-text-error': this.error,
-              's-modal-text-success': this.success,
-            } }))
-          : this.imageIcon ?
-            h("img", { class: "s-modal-header-img", src: this.imageIcon })
-            : '', this.title || this.subTitle ?
-          h("div", { class: "s-modal-header-content" }, h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }), h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }))
-          : ''),
-        h("slot", null),
-        h("slot", { name: "footer" })
-      ])))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "visible": ["handleVisible"]
-  }; }
-};
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
 
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
 		path: basedir,
 		exports: {},
 		require: function (path, base) {
-			return commonjsRequire();
+			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
 		}
 	}, fn(module, module.exports), module.exports;
 }
 
+function getDefaultExportFromNamespaceIfPresent (n) {
+	return n && Object.prototype.hasOwnProperty.call(n, 'default') ? n['default'] : n;
+}
+
+function getDefaultExportFromNamespaceIfNotNamed (n) {
+	return n && Object.prototype.hasOwnProperty.call(n, 'default') && Object.keys(n).length === 1 ? n['default'] : n;
+}
+
+function getAugmentedNamespace(n) {
+	if (n.__esModule) return n;
+	var a = Object.defineProperty({}, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
 function commonjsRequire () {
 	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
@@ -205,8 +52,9 @@ var intlTelInput$1 = createCommonjsModule(function (module) {
 
 // wrap in UMD
 (function(factory) {
-    if (module.exports) module.exports = factory(); else window.intlTelInput = factory();
+    if ('object' === "object" && module.exports) module.exports = factory(); else window.intlTelInput = factory();
 })(function(undefined$1) {
+    "use strict";
     return function() {
         // Array of country objects for the flag dropdown.
         // Here is the criteria for the plugin to support a given country/territory
@@ -234,6 +82,7 @@ var intlTelInput$1 = createCommonjsModule(function (module) {
                 areaCodes: c[4] || null
             };
         }
+        "use strict";
         function _classCallCheck(instance, Constructor) {
             if (!(instance instanceof Constructor)) {
                 throw new TypeError("Cannot call a class as a function");
@@ -1565,114 +1414,4 @@ const SallaTelInput = class {
   }
 };
 
-const SallaVerify = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.verified = createEvent(this, "verified", 7);
-    this.backClicked = createEvent(this, "backClicked", 7);
-    this.url = 'profile/verify-mobile';
-    this.by = 'sms';
-    this.autoReload = true;
-    Helper.setHost(this.host);
-    if (this.withoutModal) {
-      this.modal = { show: () => '', hide: () => '' };
-    }
-    else {
-      salla.event.on('profile::verify.mobile', data => this.show(data));
-    }
-  }
-  async getCode() {
-    return this.code.value;
-  }
-  async show(data) {
-    this.data = data;
-    this.resendTimer();
-    this.otpInputs = document.querySelectorAll('.s-verify-input');
-    this.otpInputs[0].focus();
-    Helper.on('input', '.s-verify-input', e => salla.helpers.digitsOnly(e.target));
-    Helper.onKeyUp('.s-verify-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.on('paste', '.s-verify-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();
-  }
-  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', '');
-  }
-  resendTimer() {
-    Helper.showElement(this.resendMessage).hideElement(this.resend);
-    let resendAfter = 30;
-    let timerId = setInterval(() => {
-      if (resendAfter === -1) {
-        clearTimeout(timerId);
-        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() {
-    return this.btn.load()
-      .then(() => this.btn.disable())
-      .then(() => salla.document.api.request(this.url, Object.assign({ code: this.code.value }, this.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());
-  }
-  render() {
-    return this.withoutModal ? this.myBody() :
-      h("salla-modal", { id: "s-verify", ref: modal => this.modal = modal, title: salla.lang.get('pages.profile.verify_title') }, this.myBody());
-  }
-  myBody() {
-    return [
-      h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
-      // <label class="s-verify-label">{salla.lang.get('pages.profile.verify_placeholder')}</label>,
-      h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
-      h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))),
-      h("div", { slot: "footer", class: "s-verify-footer" }, h("salla-button", { class: "s-verify-submit", disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')), this.backText ?
-        h("a", { href: "#", class: "s-verify-resend", onClick: () => this.backClicked.emit() }, this.backText)
-        : '')
-    ];
-  }
-  get host() { return getElement(this); }
-};
-
-export { SallaButton as salla_button, SallaModal as salla_modal, SallaTelInput as salla_tel_input, SallaVerify as salla_verify };
+export { SallaTelInput as salla_tel_input };

package/dist/twilight-components/salla-verify.entry.js

@@ -0,0 +1,114 @@
+import { r as registerInstance, f as createEvent, h, g as getElement } from './index-9c087700.js';
+import { H as Helper } from './Helper-d07ebbc7.js';
+
+const SallaVerify = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.verified = createEvent(this, "verified", 7);
+    this.backClicked = createEvent(this, "backClicked", 7);
+    this.url = 'profile/verify-mobile';
+    this.by = 'sms';
+    this.autoReload = true;
+    Helper.setHost(this.host);
+    if (this.withoutModal) {
+      this.modal = { show: () => '', hide: () => '' };
+    }
+    else {
+      salla.event.on('profile::verify.mobile', data => this.show(data));
+    }
+  }
+  async getCode() {
+    return this.code.value;
+  }
+  async show(data) {
+    this.data = data;
+    this.resendTimer();
+    this.otpInputs = document.querySelectorAll('.s-verify-input');
+    this.otpInputs[0].focus();
+    Helper.on('input', '.s-verify-input', e => salla.helpers.digitsOnly(e.target));
+    Helper.onKeyUp('.s-verify-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.on('paste', '.s-verify-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();
+  }
+  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', '');
+  }
+  resendTimer() {
+    Helper.showElement(this.resendMessage).hideElement(this.resend);
+    let resendAfter = 30;
+    let timerId = setInterval(() => {
+      if (resendAfter === -1) {
+        clearTimeout(timerId);
+        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() {
+    return this.btn.load()
+      .then(() => this.btn.disable())
+      .then(() => salla.document.api.request(this.url, Object.assign({ code: this.code.value }, this.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());
+  }
+  render() {
+    return this.withoutModal ? this.myBody() :
+      h("salla-modal", { id: "s-verify", ref: modal => this.modal = modal, title: salla.lang.get('pages.profile.verify_title') }, this.myBody());
+  }
+  myBody() {
+    return [
+      h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
+      // <label class="s-verify-label">{salla.lang.get('pages.profile.verify_placeholder')}</label>,
+      h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
+      h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))),
+      h("div", { slot: "footer", class: "s-verify-footer" }, h("salla-button", { class: "s-verify-submit", disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')), this.backText ?
+        h("a", { href: "#", class: "s-verify-resend", onClick: () => this.backClicked.emit() }, this.backText)
+        : '')
+    ];
+  }
+  get host() { return getElement(this); }
+};
+
+export { SallaVerify as salla_verify };