@salla.sa/twilight-components 1.0.21 → 1.0.22

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

@@ -0,0 +1,143 @@
+import { Component, h, Prop, State, Element, Listen } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+export class SallaSearch {
+  constructor() {
+    var _a;
+    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.productSlot = ((_a = Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
+  }
+  onModalOpen() {
+    this.modal.querySelector('.s-search-input').focus();
+  }
+  onModalClose() {
+    this.modal.querySelector('.s-search-input').value = '';
+    this.results = [];
+    this.afterSearching();
+  }
+  getDefaultProductSlot() {
+    return '<div class="s-search-product-image-container">' +
+      '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
+      '</div>' +
+      '<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("salla-modal", { position: "top", id: "s-search-modal", ref: modal => this.modal = modal },
+      h("div", { class: "s-search-container", 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("a", { href: item.url, 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(/\{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();
+  }
+  static get is() { return "salla-search"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-search.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-search.css"]
+  }; }
+  static get properties() { return {
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Override search placeholder."
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('blocks.header.search_placeholder')"
+    },
+    "noResultsText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Override no results error message."
+      },
+      "attribute": "no-results-text",
+      "reflect": false,
+      "defaultValue": "salla.lang.get('common.elements.no_options')"
+    }
+  }; }
+  static get states() { return {
+    "results": {}
+  }; }
+  static get elementRef() { return "host"; }
+  static get listeners() { return [{
+      "name": "modalOpened",
+      "method": "onModalOpen",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "modalClosed",
+      "method": "onModalClose",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/salla-tel-input/salla-tel-input.js

@@ -0,0 +1,121 @@
+import { Element, Component, Host, h, Prop, Method } from '@stencil/core';
+import TelInput from "intl-tel-input";
+import Helper from "../../Helpers/Helper";
+export class SallaTelInput {
+  constructor() {
+    this.countryCode = "SA";
+    this.countryKey = "+966";
+    Helper.setHost(this.host);
+  }
+  async getValues() {
+    this.phone = this.phoneInput.value;
+    this.countryCode = this.countryCodeInput.value;
+    this.countryKey = this.countryKeyInput.value;
+    return { phone: this.phoneInput.value, countryCode: this.countryCodeInput.value, countryKey: this.countryKeyInput.value };
+  }
+  initTelInput() {
+    salla.document.event.onKeyup('.tel-input', event => salla.helpers.digitsOnly(event.target));
+    document.querySelectorAll('.tel-input').forEach((intlInput) => {
+      salla.helpers.digitsOnly(intlInput);
+      let iti = TelInput(intlInput, {
+        initialCountry: intlInput.dataset.code || 'sa',
+        preferredCountries: ['sa', 'ae', 'kw', 'bh', 'qa', 'iq', 'om', 'ye', 'eg', 'jo', 'sy', 'ps', 'sd', 'lb', 'dz', 'tn', 'ma', 'ly'],
+        formatOnDisplay: false,
+        separateDialCode: true,
+        autoPlaceholder: 'aggressive',
+        utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.min.js',
+      });
+      intlInput.addEventListener("countrychange", () => {
+        let data = iti.getSelectedCountryData();
+        this.host.querySelectorAll('.country_code').forEach((input) => input.value = data.iso2.toUpperCase());
+        this.host.querySelectorAll('.country_key').forEach((input) => {
+          input.value = ('+' + data.dialCode).replace('++', '+');
+        });
+      });
+    });
+  }
+  render() {
+    return (h(Host, null,
+      h("input", { type: "tel", name: "mobile", "data-code": this.countryCode, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control  tel-input s-ltr" }),
+      h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" }),
+      h("input", { type: "hidden", name: "country_key", value: this.countryKey, ref: el => this.countryKeyInput = el, class: "country_key" })));
+  }
+  componentDidRender() {
+    this.initTelInput();
+  }
+  static get is() { return "salla-tel-input"; }
+  static get properties() { return {
+    "phone": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "phone",
+      "reflect": false
+    },
+    "countryCode": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "country-code",
+      "reflect": false,
+      "defaultValue": "\"SA\""
+    },
+    "countryKey": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "country-key",
+      "reflect": false,
+      "defaultValue": "\"+966\""
+    }
+  }; }
+  static get methods() { return {
+    "getValues": {
+      "complexType": {
+        "signature": "() => Promise<{ phone: string; countryCode: string; countryKey: string; }>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<{ phone: string; countryCode: string; countryKey: string; }>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,280 @@
+import { Component, Element, Event, h, Method, Prop } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+export class SallaVerify {
+  constructor() {
+    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;
+  }
+  componentDidLoad() {
+    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();
+  }
+  async show(data) {
+    this.data = data;
+    this.resendTimer();
+    this.otpInputs = document.querySelectorAll('.s-verify-input');
+    this.reset();
+  }
+  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.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() && this.reset());
+  }
+  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)
+          : '')
+    ];
+  }
+  static get is() { return "salla-verify"; }
+  static get properties() { return {
+    "withoutModal": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Should render component without modal"
+      },
+      "attribute": "without-modal",
+      "reflect": false
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "url",
+      "reflect": false,
+      "defaultValue": "'profile/verify-mobile'"
+    },
+    "by": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "by",
+      "reflect": false,
+      "defaultValue": "'sms'"
+    },
+    "backText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "back-text",
+      "reflect": false
+    },
+    "autoReload": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "auto-reload",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get events() { return [{
+      "method": "verified",
+      "name": "verified",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "backClicked",
+      "name": "backClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "getCode": {
+      "complexType": {
+        "signature": "() => Promise<string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "show": {
+      "complexType": {
+        "signature": "(data: any) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/index.js

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

package/dist/collection/interfaces/colors.js

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

package/dist/collection/interfaces/index.js

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

package/dist/collection/interfaces/ratio.js

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

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

@@ -0,0 +1,62 @@
+var fs = require('fs');
+var path = require('path');
+var _ = require('lodash');
+var components = {};
+var componentsPath = path.resolve(__dirname, '../../components');
+
+//==================== Global Salla Components Styles ====================//
+var utilities = {
+  '.s-has-error': {'@apply !border-red-500 !text-red-500': {}},
+  '.s-ltr'      : {direction: 'ltr'},
+  '.s-input'    : {'@apply appearance-none form-input': {}},
+  '.s-hidden'   : {'@apply hidden': {}},
+  '.s-block'    : {'@apply block': {}},
+};
+
+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
+    }
+  });
+
+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

@@ -0,0 +1,26 @@
+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(--color-main) !important',
+        '&.reverse': {
+          'border-right-color': '#9f7171 !important',
+          'background-color'  : '#f98181'
+        }
+      }
+    });
+
+    addUtilities(require('./utilities.json'));
+  };
+});