@salla.sa/twilight-components 1.0.8 → 1.0.10

package/dist/collection/components/salla-modal/salla-modal.js

@@ -1,309 +0,0 @@
-import { Component, h, Prop, Host, Element, Event, Watch, Method } from '@stencil/core';
-import Helper from "../../Helpers/Helper";
-//todo:: button component
-export class SallaModal {
-  constructor() {
-    this.error = false;
-    this.success = false;
-    this.isClosable = true;
-    this.modalWidth = 'w-96'; //todo use friendly names
-    this.visible = false;
-    this.subTitle = '';
-    this.icon = 'sicon-cancel';
-    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.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.toggleElement(this.host.querySelector('.s-modal-overlay'), 'ease-out duration-300 opacity-100', 'opacity-0', () => isOpen)
-      .toggleElement(this.host.querySelector('.s-modal-body'), 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100', //add these classes
-    'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95', //remove these classes
-    () => 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');
-  }
-  render() {
-    this.host.id = this.host.id || 'salla-modal';
-    return (h(Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" },
-      h("div", { class: "s-modal-wrapper" },
-        h("div", { class: "s-modal-overlay", onClick: () => this.closeModal() }),
-        h("span", { class: "s-modal-spacer" }, "\u200B"),
-        h("div", { class: 's-modal-body ' + this.modalWidth },
-          h("slot", { name: "header" },
-            h("div", { class: "s-modal-header" },
-              this.isClosable ?
-                h("button", { class: "s-modal-close cursor-pointer", onClick: () => this.closeModal(), type: "button" },
-                  h("span", { class: "sicon-cancel" }))
-                : '',
-              this.error || this.success
-                ? h("div", { class: { 's-modal-icon': true, 's-modal-bg-error': this.error, 's-modal-bg-success': this.success } },
-                  h("i", { class: {
-                      [this.icon]: true,
-                      's-modal-text-error': this.error,
-                      's-modal-text-success': this.success
-                    } }))
-                : '',
-              h("div", { class: "s-modal-title", innerHTML: this.title }),
-              h("p", { class: "s-modal-sub-title", innerHTML: this.subTitle }))),
-          h("slot", null),
-          h("slot", { name: "footer" })))));
-  }
-  static get is() { return "salla-modal"; }
-  static get properties() { return {
-    "error": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "error",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "success": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "success",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "isClosable": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-closable",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "modalWidth": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "modal-width",
-      "reflect": false,
-      "defaultValue": "'w-96'"
-    },
-    "visible": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "visible",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "subTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "sub-title",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "'sicon-cancel'"
-    }
-  }; }
-  static get events() { return [{
-      "method": "ready",
-      "name": "ready",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "close",
-      "name": "close",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<HTMLElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "hide": {
-      "complexType": {
-        "signature": "() => Promise<HTMLElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "setTitle": {
-      "complexType": {
-        "signature": "(title: any) => Promise<HTMLElement>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "visible",
-      "methodName": "handleVisible"
-    }]; }
-}

package/dist/collection/components/salla-search/salla-search.js

@@ -1,154 +0,0 @@
-import { Component, h, Host, Prop, State, Element } from '@stencil/core';
-export class SallaSearch {
-  constructor() {
-    this.fetchStatus = '';
-    this.showModal = false;
-    /**
-     * The text to overwrite search placeholder.
-     */
-    this.searchPlaceholder = 'Search here ...';
-    /**
-     * The text to overwrite no results text.
-     */
-    this.noResultsText = 'There are no results at the moment';
-    this.handleChange = event => {
-      this.searchTerm = event.target.value;
-      this.fetchStatus = 'loading';
-      this.showResult = false;
-      this.results = [];
-      if (this.searchTerm.length > 2) {
-        window.salla.search.api
-          .search(this.searchTerm)
-          .then(response => response)
-          .then(response => {
-          console.log('response', response);
-          this.fetchStatus = 'idle';
-          this.results = response.results;
-          this.showResult = true;
-          if (this.results.length < 1) {
-            this.fetchStatus = 'error';
-          }
-        })
-          .catch(err => {
-          this.showResult = true;
-          this.fetchStatus = 'error';
-          console.log(err);
-        });
-      }
-    };
-    this.openSearch = () => {
-      this.searchTerm = '';
-      this.fetchStatus = '';
-      this.results = [];
-      this.showModal = true;
-      window.scrollTo(0, 0);
-      document.getElementsByTagName('html')[0].style.position = 'fixed';
-      document.getElementsByTagName('html')[0].style.overflowY = 'scroll';
-    };
-    this.closeSearch = () => {
-      this.searchTerm = '';
-      this.fetchStatus = '';
-      this.results = [];
-      document.getElementsByTagName('html')[0].style.position = 'static';
-      document.getElementsByTagName('html')[0].style.overflowY = 'auto';
-      this.showModal = false;
-    };
-  }
-  componentWillLoad() {
-    this.hasSearchIconSlot = !!this.hostElement.querySelector('[slot="search-icon"]');
-    this.hasProductTemplateSlot = !!this.hostElement.querySelector('[slot="product-template"]');
-    if (this.hasProductTemplateSlot) {
-      this.productTemplateHtml = this.hostElement.querySelector('[slot="product-template"]').innerHTML;
-    }
-  }
-  getProduct(item) {
-    var _a, _b;
-    // todo use art-template  https://aui.github.io/art-template/docs/.
-    if (this.hasProductTemplateSlot) {
-      let product = this.productTemplateHtml
-        .replace("{title}", item.title)
-        .replace("{price}", (_a = item.price) === null || _a === void 0 ? void 0 : _a.after)
-        .replace("{url}", item.url)
-        .replace("{thumb}", item.thumb);
-      return (h("div", { class: "s-search-product", innerHTML: product }));
-    }
-    else {
-      return (h("div", { class: "s-search-product" },
-        h("a", { target: "_blank", href: item.url, class: "s-search-product-image-container" },
-          h("img", { class: "s-search-product-image", src: item.thumb })),
-        h("div", { class: "s-search-product-details" },
-          h("div", { class: "s-search-product-title" }, item.title),
-          h("div", { class: "s-search-product-price" }, (_b = item.price) === null || _b === void 0 ? void 0 : _b.after))));
-    }
-  }
-  render() {
-    return (h(Host, { class: "s-search" },
-      h("button", { type: "button", onClick: this.openSearch, class: "s-search-search-button-icon" }, this.hasSearchIconSlot ? (h("slot", { name: "search-icon" })) : (h("i", { class: "sicon-search font-bold" }))),
-      this.showModal && (h("div", { class: "s-search-container", style: { backgroundColor: 'rgba(0,0,0,0.5)' } },
-        h("div", { class: "s-search-wrapper", onClick: this.closeSearch },
-          h("div", { class: "s-search-inner", onClick: e => {
-              e.stopPropagation();
-            } },
-            h("div", { class: "s-search-search-box-container" },
-              h("div", { class: !this.showResult
-                  ? 's-search-search-box-inner'
-                  : 's-search-search-box-inner-open' },
-                h("input", { class: "s-search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: event => this.handleChange(event) }),
-                this.fetchStatus != 'loading' ? (h("button", { class: "s-search-search-icon" },
-                  h("i", { class: "sicon-search" }))) : (h("span", { class: "s-search-spinner" },
-                  h("span", { class: "s-search-spinner-loader" }))))),
-            h("div", { class: "s-search-search-results" },
-              this.fetchStatus === 'error' && (h("p", { class: "s-search-no-results error p-4 text-sm text-gray-text" }, this.noResultsText)),
-              this.results &&
-                this.results.map(item => {
-                  return this.getProduct(item);
-                }))))))));
-  }
-  static get is() { return "salla-search"; }
-  static get properties() { return {
-    "searchPlaceholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The text to overwrite search placeholder."
-      },
-      "attribute": "search-placeholder",
-      "reflect": false,
-      "defaultValue": "'Search here ...'"
-    },
-    "noResultsText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The text to overwrite no results text."
-      },
-      "attribute": "no-results-text",
-      "reflect": false,
-      "defaultValue": "'There are no results at the moment'"
-    }
-  }; }
-  static get states() { return {
-    "searchTerm": {},
-    "results": {},
-    "fetchStatus": {},
-    "showResult": {},
-    "showModal": {}
-  }; }
-  static get elementRef() { return "hostElement"; }
-}

package/dist/collection/components/salla-verify/salla-verify.js

@@ -1,97 +0,0 @@
-import { Component, Element, h } from '@stencil/core';
-import Helper from "../../Helpers/Helper";
-export class SallaVerify {
-  constructor() {
-    Helper.setHost(this.host);
-    salla.event.on('profile::verify.mobile', data => this.show(data));
-  }
-  show({ international_mobile: mobile, _country_iso2: country_code }) {
-    this.mobile = mobile;
-    this.country_code = country_code;
-    this.resendTimer();
-    this.otpInputs = document.querySelectorAll('.s-verify-input');
-    this.otpInputs[0].focus();
-    Helper.onKeyUp('.s-verify-input', event => {
-      var _a, _b;
-      let key = event.keyCode || event.charCode;
-      salla.helpers.digitsOnly(event.target);
-      if (event.target.value) {
-        (_a = event.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
-      }
-      else if ([8, 46].includes(key)) {
-        (_b = event.target.previousElementSibling) === null || _b === void 0 ? void 0 : _b.focus();
-      }
-      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);
-  }
-  submit() {
-    return this.btn.load()
-      .then(() => this.btn.disable())
-      .then(() => salla.document.api.request('profile/verify-mobile', {
-      mobile: this.mobile,
-      country_code: this.country_code,
-      code: this.code.value
-    })).then(() => this.btn.stop() && this.btn.disable())
-      .then(() => this.modal.hide())
-      .then(() => window.location.reload())
-      .catch(() => this.btn.stop() && this.btn.enable());
-  }
-  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({ phone: this.mobile, country_code: this.country_code }))
-      .then(() => this.resendTimer())
-      .catch(() => this.resendTimer());
-  }
-  render() {
-    return (h("salla-modal", { id: "s-verify", ref: modal => this.modal = modal, title: salla.lang.get('pages.profile.verify_title') },
-      h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
-      h("label", { class: "s-verify-label" }, salla.lang.get('pages.profile.verify_placeholder')),
-      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')))));
-  }
-  static get is() { return "salla-verify"; }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/index.js

@@ -1,2 +0,0 @@
-export * from './components/salla-login/salla-login';
-export * from './components/salla-search/salla-search';

package/dist/collection/interfaces/colors.js

@@ -1 +0,0 @@
-export {};

package/dist/collection/interfaces/index.js

@@ -1,2 +0,0 @@
-export * from './colors';
-export * from './ratio';

package/dist/collection/interfaces/ratio.js

@@ -1 +0,0 @@
-export {};

package/dist/collection/plugins/tailwind-theme/generator.js

@@ -1,53 +0,0 @@
-var fs = require('fs');
-var path = require('path');
-var _ = require('lodash');
-var components = {};
-let componentsPath=path.resolve(__dirname,'../../components');
-fs.readdirSync(componentsPath, {withFileTypes: true})
-  .filter(parent => parent.isDirectory())
-  .forEach(directory => {
-  try {
-    components[directory.name.replace('salla-','')] = require(path.resolve(componentsPath  , directory.name, 'utilities.json'));
-  } catch (e) {
-    // ignore
-  }
-});
-var utilities = {};
-
-for (const [keyComponent, value] of Object.entries(components)) {
-  console.log('> Processing ' + keyComponent + ' ...');
-  _.forEach(value, function(value, keyUtility) {
-    keyUtility = '.s-' + keyComponent + '-' + keyUtility;
-    utilities[keyUtility] = {[`@apply ${value}`]: {}};
-  });
-  console.log('✓ Processed ' + keyComponent + '');
-}
-
-// write the utilities for the plugin
-console.log('> Write utilities ...');
-fs.writeFileSync(
-  path.resolve(__dirname, 'utilities.json'),
-  JSON.stringify(utilities),
-  function(err) {
-    if (err) {
-      return console.log(err);
-    }
-    console.log('The file was saved!');
-  }
-);
-
-
-// write the save list css
-console.log('> Write safe-list-css ...');
-fs.writeFileSync(
-  path.resolve(__dirname, 'safe-list-css.txt'),
-  Object.keys(utilities).map((name) => name.replace('.','')).join('\n'),
-  function(err) {
-    if (err) {
-      return console.log(err);
-    }
-    console.log('The file was saved!');
-  }
-);
-
-console.log('✓ Done ...');

package/dist/collection/plugins/tailwind-theme/index.js

@@ -1,26 +0,0 @@
-module.exports = require('tailwindcss/plugin').withOptions(() => {
-  return function({addUtilities}) {
-    addUtilities({
-      // TODO :: find if there are used and defined them here if its.
-      '.anime-item': {},
-      '.text-md': {},
-      '.items-top': {},
-      '.error': {},
-      '.search-box': {},
-      '.spinner-loader-wrap': {}
-    });
-
-    // todo :: move it to global
-    addUtilities({
-      '.spinner-loader': {
-        'border-right-color': 'var(--main-color) !important',
-        '&.reverse': {
-          'border-right-color': '#9f7171 !important',
-          'background-color': '#f98181'
-        }
-      }
-    });
-
-    addUtilities(require('./utilities.json'));
-  };
-});