@salla.sa/twilight-components 1.0.20 → 1.0.21

package/dist/twilight-components/salla-login-663f8d42.js

@@ -1,123 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-799f93d3.js';
-import { H as Helper } from './Helper-d07ebbc7.js';
-
-const sallaLoginCss = "salla-verify{display:block}";
-
-const SallaLogin = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.regType = 'sms';
-    this.isLoginByMail = true;
-    this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
-    this.loginText = salla.lang.get('blocks.header.login');
-    this.smsLabel = salla.lang.get('blocks.header.sms');
-    this.mobileLabel = salla.lang.get('common.elements.mobile');
-    this.emailLabel = salla.lang.get('common.elements.email');
-    this.enterText = salla.lang.get('blocks.header.enter');
-    this.bySMSText = salla.lang.get('blocks.header.login_by_sms');
-    this.byEmailText = salla.lang.get('blocks.header.login_by_email');
-    this.backText = salla.lang.get('common.elements.back');
-    this.title = this.host.title || salla.lang.get('blocks.header.login');
-    this.host.removeAttribute('title');
-    salla.auth.event.onVerificationFailed(() => {
-      //
-    });
-  }
-  /**
-   * @param {CustomEvent|{details:{case:'new_customer'|'authenticated', redirect_url:string|null}}} event
-   */
-  onVerified(event) {
-    if (!event.detail.case) {
-      console.log('verified but without case!');
-      return;
-    }
-    if (event.detail.case === "new_customer") {
-      return this.showTab(this.tab5);
-    }
-    //TODO::It looks that is this workaround🤔
-    if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
-      return;
-    }
-    if (event.redirect_url) {
-      return window.location.href = event.redirect_url;
-    }
-    window.location.reload();
-  }
-  onbackClicked() {
-    this.regType == 'sms' ? this.showTab(this.tab2) : this.showTab(this.tab3);
-  }
-  async show() {
-    this.showTab(this.isLoginByMail ? this.tab1 : this.tab2);
-    return this.modal.show();
-  }
-  showTab(tab) {
-    [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.toggleElement(el, 'visible', 'hidden', () => el == tab));
-    setTimeout(() => { [this.tab1, this.tab2, this.tab3, this.tab4, this.tab5].map(el => Helper.toggleElement(el, 's-login-active', 's-login-unactive', () => el == tab)); }, 200);
-    setTimeout(() => { this.host.querySelector('.s-login-wrapper').setAttribute('style', 'height:' + (tab === null || tab === void 0 ? void 0 : tab.scrollHeight) + 'px'); });
-    if ([this.tab2, this.tab3].includes(tab)) {
-      this.regType = tab === this.tab2 ? 'sms' : 'email';
-    }
-    let isRegistrationTab = tab == this.tab5;
-    this.modal.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
-    if (!isRegistrationTab) {
-      Helper.toggleElement(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'sms')
-        .toggleElement(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
-    }
-    return this;
-  }
-  loginByEmail() {
-    if (!Helper.isValidEmail(this.email.value)) {
-      this.email.classList.add('s-has-error');
-      this.email.nextElementSibling['innerText'] = '* ' + salla.lang.get('common.elements.email_is_valid');
-      return;
-    }
-    this.email.nextElementSibling['innerText'] = '';
-    this.email.classList.remove('s-has-error');
-    salla.auth.api.login({ type: 'email', email: this.email.value })
-      .then(() => this.showTab(this.tab4))
-      .then(() => (this.tab4.by = 'email') && (this.tab4.url = 'auth/email/verify'))
-      .then(() => this.tab4.show({ email: this.email.value }));
-  }
-  loginBySMS() {
-    if (this.mobile.value.length < 6) {
-      this.mobile.classList.add('s-has-error');
-      this.mobile.nextElementSibling['innerText'] = '* ' + salla.lang.get('mobile_app.strings.incorrect_mobile');
-      return;
-    }
-    this.mobile.nextElementSibling['innerText'] = '';
-    this.mobile.classList.remove('s-has-error');
-    salla.auth.api.login({ type: 'sms', mobile: this.mobile.value })
-      .then(() => this.showTab(this.tab4))
-      .then(() => (this.tab4.by = 'sms') && (this.tab4.url = 'auth/mobile/verify'))
-      .then(() => this.tab4.show({ mobile: this.mobile.value, country_code: 'SA' }));
-  }
-  //TODO:: if it's enter, go submit
-  typing({ target }) {
-    target.type === 'tel' && salla.helpers.digitsOnly(target);
-    target.classList.remove('s-has-error');
-    target.nextElementSibling.innerText = '';
-  }
-  newUser() {
-    this.tab4.getCode()
-      .then(code => salla.auth.api.register({
-      first_name: this.firstName.value,
-      last_name: this.lastName.value,
-      phone: this.regMobile.value || this.mobile.value,
-      email: this.regEmail.value || this.email.value,
-      country_code: '',
-      country_key: '',
-      code: code,
-      verified_by: this.regType,
-    }));
-  }
-  render() {
-    return (h("salla-modal", { id: "salla-login", title: this.title, ref: modal => this.modal = modal, width: "xs" }, h("div", { class: "s-login-wrapper" }, this.isLoginByMail ?
-      h("div", { class: "s-login-tab", ref: tab => this.tab1 = tab }, h("p", { class: "s-login-sub-title" }, this.loginTypeTitle), h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab2) }, h("i", { class: "s-login-main-btn-icon sicon-phone" }), h("span", { class: "s-login-main-btn-text" }, this.smsLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })), h("a", { href: "#", class: "s-login-main-btn", onClick: () => this.showTab(this.tab3) }, h("i", { class: "s-login-main-btn-icon sicon-mail" }), h("span", { class: "s-login-main-btn-text" }, this.emailLabel), h("i", { class: "main-btn-arrow sicon-keyboard_arrow_left" })))
-      : '', h("div", { class: "s-login-tab", ref: tab => this.tab2 = tab }, h("label", { class: "s-login-label" }, this.mobileLabel), h("salla-tel-input", null), h("input", { onChange: () => this.loginBySMS(), type: "tel", ref: el => this.mobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input  tel-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginBySMS() }, this.enterText), this.isLoginByMail ? h("a", { href: "#", onClick: () => this.showTab(this.tab3), class: "s-login-link" }, this.byEmailText) : ''), this.isLoginByMail ?
-      h("div", { class: "s-login-tab", ref: tab => this.tab3 = tab }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { onChange: () => this.loginByEmail(), type: "email", ref: el => this.email = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" }), h("salla-button", { wide: true, onClick: () => this.loginByEmail() }, this.enterText), h("a", { href: "#", onClick: () => this.showTab(this.tab2), class: "s-login-link" }, this.bySMSText)) : '', h("salla-verify", { "without-modal": true, ref: tab => this.tab4 = tab, autoReload: false, "back-text": this.backText }), h("div", { ref: tab => this.tab5 = tab }, h("label", { class: "s-login-label" }, salla.lang.get('blocks.header.your_name')), h("input", { type: "text", class: "s-login-input", ref: el => this.firstName = el, placeholder: salla.lang.get('pages.profile.first_name') }), h("label", { class: "s-login-label" }, salla.lang.get('pages.profile.last_name')), h("input", { type: "text", class: "s-login-input", ref: el => this.lastName = el, placeholder: salla.lang.get('pages.profile.last_name') }), h("div", { ref: el => this.regMobileBlock = el }, h("label", { class: "s-login-label" }, this.mobileLabel), h("input", { type: "tel", ref: el => this.regMobile = el, onInput: this.typing, placeholder: "5xx xxx xxx", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" })), h("div", { ref: el => this.regEmailBlock = el }, h("label", { class: "s-login-label" }, this.emailLabel), h("input", { type: "email", ref: el => this.regEmail = el, onInput: this.typing, placeholder: "your@email.com", class: "s-login-input s-ltr" }), h("span", { class: "s-login-error-message" })), h("salla-button", { wide: true, onClick: () => this.newUser() }, salla.lang.get('blocks.header.register'))))));
-  }
-  get host() { return getElement(this); }
-};
-SallaLogin.style = sallaLoginCss;
-
-export { SallaLogin as S };

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

@@ -1,79 +0,0 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-799f93d3.js';
-import { H as Helper } from './Helper-d07ebbc7.js';
-
-const SallaSearch = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    var _a, _b;
-    this.results = [];
-    /**
-     * Override search placeholder.
-     */
-    this.placeholder = salla.lang.get('blocks.header.search_placeholder');
-    /**
-     * Override no results error message.
-     */
-    this.noResultsText = salla.lang.get('common.elements.no_options');
-    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.getElement('.s-search-input').value = '';
-    this.results = [];
-    this.afterSearching();
-  }
-  getDefaultProductSlot() {
-    return '<a target="_blank" href={url} class="s-search-product-image-container">' +
-      '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
-      '</a>' +
-      '<div class="s-search-product-details">' +
-      '  <div class="s-search-product-name">{name}</div> <div class="s-search-product-price">{price}</div>' +
-      '</div>';
-  }
-  //todo:: reset data when closing
-  search(e) {
-    Helper.hideElement(this.noResults);
-    if (e.target.value.length === 0) {
-      this.results = [];
-      this.afterSearching();
-      return;
-    }
-    if (e.target.value.length <= 2) {
-      return;
-    }
-    //run loading spinner or stop it
-    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)
-      .finally(() => this.afterSearching(/*isEmpty*/ false));
-  }
-  afterSearching(isEmpty = true) {
-    this.noResults.style.display = isEmpty || this.results.length > 0 ? 'none' : 'block';
-    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 (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 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) });
-      }), h("p", { ref: el => this.noResults = el, class: "s-search-no-results" }, this.noResultsText))))));
-  }
-  /**
-   * Run it one time after load
-   */
-  componentDidLoad() {
-    this.afterSearching();
-  }
-  get host() { return getElement(this); }
-};
-
-export { SallaSearch as S };