@salla.sa/twilight-components 1.0.13 → 1.0.15

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

@@ -0,0 +1,99 @@
+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, _c, _d;
+      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();
+        (_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);
+  }
+  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

@@ -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,53 @@
+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

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