@salla.sa/twilight-components 1.4.8 → 1.4.10

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

@@ -0,0 +1,229 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Element, Component, Host, h, Prop, Method, Event, State } from '@stencil/core';
+import TelInput from "intl-tel-input";
+import Helper from "../../Helpers/Helper";
+export class SallaTelInput {
+  constructor() {
+    /**
+     * input name
+     */
+    this.name = 'phone';
+    /**
+     * Current country_code
+     */
+    this.countryCode = salla.config.get('user.country_code', 'SA');
+    this.countryCodeLabel = salla.lang.get('common.country_code');
+    this.mobileLabel = salla.lang.get('common.elements.mobile');
+    this.tooShort = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });
+    this.tooLong = salla.lang.get('common.errors.too_long', { attribute: this.mobileLabel });
+    this.invalidCountryCode = salla.lang.get('common.errors.invalid_value', { attribute: this.countryCodeLabel });
+    this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
+    this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
+    Helper.setHost(this.host);
+    salla.lang.onLoaded(() => {
+      this.mobileLabel = salla.lang.get('common.elements.mobile');
+      this.countryCodeLabel = salla.lang.get('common.elements.country_code');
+      this.invalidNumber = salla.lang.get('common.errors.invalid_value', { attribute: this.mobileLabel });
+      this.invalidCountryCode = salla.lang.get('common.errors.invalid_value', { attribute: this.countryCodeLabel });
+      this.tooShort = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });
+      this.tooLong = salla.lang.get('common.errors.too_long', { attribute: this.mobileLabel });
+      this.mobileRequired = salla.lang.get('common.errors.field_required', { attribute: this.mobileLabel });
+      this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
+    });
+  }
+  /**
+   * Get current values
+   * @return {{mobile:number,countryCode:'SA'|string}}
+   */
+  async getValues() {
+    return {
+      [this.name]: this.phone = this.phoneInput.value,
+      countryCode: this.countryCode = this.countryCodeInput.value
+    };
+  }
+  /**
+   * Is current data valid or not
+   * @return {boolean}
+   */
+  async isValid() {
+    this.reset();
+    if (this.iti.isValidNumber())
+      return true;
+    if (!this.phoneInput.value.trim()) {
+      this.phoneInput.classList.add("s-has-error");
+      this.errorMsg.innerText = this.mobileRequired || '';
+      return;
+    }
+    this.phoneInput.classList.add("s-has-error");
+    let errorCode = this.iti.getValidationError();
+    this.errorMsg.innerText = this.errorMap[errorCode] || '';
+    return false;
+  }
+  initTelInput() {
+    salla.helpers.inputDigitsOnly(this.phoneInput);
+    this.iti = TelInput(this.phoneInput, {
+      initialCountry: this.countryCode || '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',
+    });
+    this.phoneInput.addEventListener("countrychange", () => {
+      let data = this.iti.getSelectedCountryData();
+      this.countryCodeInput.value = data.iso2.toUpperCase();
+    });
+    // on blur: validate
+    // this.phoneInput.addEventListener('blur', () => this.isValid());
+    // on keyup / change flag: reset
+    this.phoneInput.addEventListener('input', e => {
+      salla.helpers.inputDigitsOnly(e.target);
+      this.reset();
+    });
+  }
+  reset() {
+    this.phoneInput.classList.remove("s-has-error");
+    this.errorMsg.innerHTML = "";
+  }
+  ;
+  render() {
+    return (h(Host, { id: "s-tel-input" },
+      h("input", { type: "tel", name: this.name, value: this.phone, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }),
+      h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }),
+      h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+  }
+  componentDidLoad() {
+    this.initTelInput();
+  }
+  static get is() { return "salla-tel-input"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-tel-input.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-tel-input.css"]
+  }; }
+  static get properties() { return {
+    "phone": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Current mobile number"
+      },
+      "attribute": "phone",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "input name"
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "'phone'"
+    },
+    "countryCode": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Current country_code"
+      },
+      "attribute": "country-code",
+      "reflect": false,
+      "defaultValue": "salla.config.get('user.country_code', 'SA')"
+    }
+  }; }
+  static get states() { return {
+    "mobileRequired": {},
+    "countryCodeLabel": {},
+    "mobileLabel": {},
+    "tooShort": {},
+    "tooLong": {},
+    "invalidCountryCode": {},
+    "invalidNumber": {},
+    "errorMap": {}
+  }; }
+  static get events() { return [{
+      "method": "enterClicked",
+      "name": "enterClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "getValues": {
+      "complexType": {
+        "signature": "() => Promise<{ [x: string]: string; countryCode: string; }>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<{ [x: string]: string; countryCode: string; }>"
+      },
+      "docs": {
+        "text": "Get current values",
+        "tags": [{
+            "name": "return",
+            "text": undefined
+          }]
+      }
+    },
+    "isValid": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Is current data valid or not",
+        "tags": [{
+            "name": "return",
+            "text": undefined
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,7 @@
+/*
+* Verify Component: verify step in login and register and displays after the user change it's phone number.
+* You can use these classes to target the elements in the component.
+*/
+salla-verify {
+  display: block;
+}

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

@@ -0,0 +1,300 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Host, Element, Event, h, Method, Prop, State } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+/**
+ * @slot footer - Replaces the footer, by default it contains: verify button, resend, and timer
+ * @slot after-footer - placeholder position
+ */
+export class SallaVerify {
+  constructor() {
+    this.initiated = false;
+    /**
+     * Should render component without modal
+     */
+    this.display = 'modal';
+    /**
+     * Verifying method
+     */
+    this.type = 'mobile';
+    /**
+     * should auto reloading the page after success verification
+     */
+    this.autoReload = true;
+    this.resendAfter = 30;
+    /**
+     * to use: `salla.api.auth.verify` or `salla.profile.verify`
+     */
+    this.isProfileVerify = false;
+    // Helper.setHost(this.host);
+    salla.lang.onLoaded(() => {
+      var _a, _b;
+      this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + this.type);
+      (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title);
+      (_b = this.btn) === null || _b === void 0 ? void 0 : _b.setText(salla.lang.get('pages.profile.verify'));
+    });
+    if (this.display == 'inline') {
+      this.modal = { open: () => '', close: () => '', setTitle: () => '' };
+      return;
+    }
+    salla.event.on('profile::verification', data => {
+      var _a;
+      this.isProfileVerify = true;
+      this.open(data);
+      this.title = salla.lang.get('pages.profile.verify_title') + salla.lang.get('common.elements.' + data.type);
+      (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title);
+    });
+    salla.event.on('modalClosed', () => {
+      this.resendAfter = 0;
+      this.timer.innerHTML = '30 : 00';
+    });
+  }
+  /**
+   * Get current code
+   * @return {string}
+   */
+  async getCode() {
+    return this.code.value;
+  }
+  /**
+   * Open verifying modal
+   * @param data
+   */
+  async open(data) {
+    var _a;
+    this.data = data;
+    this.data.type = this.data.type || this.type;
+    this.type = this.data.type;
+    this.resendTimer();
+    this.otpInputs = this.body.querySelectorAll('.s-verify-input');
+    if (!this.initiated) {
+      Helper.on('input', '.s-verify-input', e => salla.helpers.inputDigitsOnly(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 = salla.helpers.number(event.clipboardData.getData('text')).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.open();
+      this.initiated = true;
+    }
+    this.reset();
+    this.display == 'modal' && ((_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title));
+    this.modal.open();
+    // focus the first input after opening the modal
+    setTimeout(() => this.otpInputs[0].focus(), 100);
+  }
+  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);
+    this.resendAfter = 30;
+    let timerId = setInterval(() => {
+      if (this.resendAfter <= 0) {
+        clearInterval(timerId);
+        Helper.hideElement(this.resendMessage).showElement(this.resend);
+      }
+      else {
+        this.timer.innerHTML = `${this.resendAfter >= 10 ? this.resendAfter : '0' + this.resendAfter} : 00`;
+        this.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(this.data))
+      .finally(() => this.resendTimer());
+  }
+  submit() {
+    let data = Object.assign({ code: this.code.value }, this.data);
+    return this.btn.load()
+      .then(() => this.btn.disable())
+      .then(() => this.isProfileVerify ? salla.profile.verify(data) : salla.auth.verify(data, true))
+      .then(response => this.verified.emit(response))
+      .then(() => this.btn.stop() && this.btn.disable())
+      .then(() => this.modal.close())
+      .then(() => this.autoReload && window.location.reload())
+      .catch(() => this.btn.stop() && this.btn.enable() && this.reset());
+  }
+  render() {
+    return this.display == 'inline' ? h(Host, null, this.myBody()) :
+      h("salla-modal", { icon: "sicon-android-phone", width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title }, this.myBody());
+  }
+  myBody() {
+    return (h("div", { class: "s-verify-body", ref: body => this.body = body },
+      h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
+      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", "loader-position": 'center', 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'))),
+      h("slot", { name: "after-footer" })));
+  }
+  static get is() { return "salla-verify"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-verify.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-verify.css"]
+  }; }
+  static get properties() { return {
+    "display": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'inline' | 'modal'",
+        "resolved": "\"inline\" | \"modal\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Should render component without modal"
+      },
+      "attribute": "display",
+      "reflect": false,
+      "defaultValue": "'modal'"
+    },
+    "type": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "'mobile' | 'email'",
+        "resolved": "\"email\" | \"mobile\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Verifying method"
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'mobile'"
+    },
+    "autoReload": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "should auto reloading the page after success verification"
+      },
+      "attribute": "auto-reload",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "title": {},
+    "resendAfter": {},
+    "isProfileVerify": {}
+  }; }
+  static get events() { return [{
+      "method": "verified",
+      "name": "verified",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event when success verification"
+      },
+      "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": "Get current code",
+        "tags": [{
+            "name": "return",
+            "text": undefined
+          }]
+      }
+    },
+    "open": {
+      "complexType": {
+        "signature": "(data: any) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "data"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Open verifying modal",
+        "tags": [{
+            "name": "param",
+            "text": "data"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/global/app.js

@@ -0,0 +1,30 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import "../../example/assets/translations.js";
+import '@salla.sa/twilight/dist/cjs/index';
+export default function () {
+  salla.init({
+    debug: true,
+    language_code: 'en',
+    store: {
+      // stage
+      url: "https://web-26c3cd35add3468fc189c714bd1a1345.salla.group/bayans",
+      api: "https://web-26c3cd35add3468fc189c714bd1a1345.salla.group/api/v1/",
+      id: 693312468,
+      // prod
+      // id: 1305146709,
+      // url: "https://salla.sa",
+    },
+    user: {
+      type: 'user',
+      id: "TEXGNhitwf0E1wjxgVFA4wSDMC2sJsLboHNoLmAL",
+      email: "daniel@salla.sa",
+    },
+  });
+  // this is required to bypass cloudflare in stage
+  salla.api.defaults.headers.common['CF-Access-Client-Id'] = '2db165f2f48c6b43320719d5d17ef7cf.access';
+  salla.api.defaults.headers.common['CF-Access-Client-Secret'] = 'f01a3100d5d93a04bb6f052b73032cce167ca94b5ade49880ccff1f94d03dc9c';
+  salla.api.defaults.headers.common['Store-Identifier'] = '1632654914';
+  salla.api.defaults.headers.common['Authorization'] = `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3dlYi0yNmMzY2QzNWFkZDM0NjhmYzE4OWM3MTRiZDFhMTM0NS5zYWxsYS5ncm91cC9hcGkvdjEvYXV0aC9tb2JpbGUvdmVyaWZ5IiwiaWF0IjoxNjU4MDU4NzQxLCJleHAiOjE2NTg2NjM1NDEsIm5iZiI6MTY1ODA1ODc0MSwianRpIjoic1Zvd1FoMm9iZkx1UzJRRiIsInN1YiI6NTk5NDYsInBydiI6ImRmZWNiMzFmOTExZmYyNTQyNzU5MWI2ZjQ3YWQzOGE5NTE2OWM0ZWMifQ.HGd9aRqwGFi-24cDyYyVK7N6iNJ4hl98vz2LX7oKhfw`;
+}

package/dist/collection/index.js

@@ -0,0 +1,4 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export {};

package/dist/collection/interfaces/colors.js

@@ -0,0 +1,4 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export {};

package/dist/collection/interfaces/index.js

@@ -0,0 +1,5 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export * from './colors';
+export * from './ratio';

package/dist/collection/interfaces/ratio.js

@@ -0,0 +1,4 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export {};

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

@@ -0,0 +1,67 @@
+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': {}},
+  '.s-scrollbar'    : {'@apply styled-scrollbar': {}},
+};
+
+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) {
+    if(typeof value === 'string'){
+      keyUtility = '.s-' + keyComponent + '-' + keyUtility;
+      utilities[keyUtility] = {[`@apply ${value}`]: {}};
+    }else{
+      utilities[keyUtility] = 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 ...');