@salla.sa/twilight-components 1.6.15-alpha.0 → 1.6.15-alpha.1

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

@@ -0,0 +1,259 @@
+/*!
+ * 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 || 'The mobile is required';
+      return;
+    }
+    this.phoneInput.classList.add("s-has-error");
+    let errorCode = this.iti.getValidationError();
+    this.errorMsg.innerText = this.errorMap[errorCode] || '';
+    salla.logger.info('Phone number (' + this.countryCode + ' - ' + this.phone + ') is not valid, error code ' + 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();
+      let value = data.iso2.toUpperCase();
+      this.countryCodeInput.value = value;
+      this.countryCode = value;
+      this.phoneEntered.emit({ number: this.phone, country_code: value });
+    });
+    // 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();
+      this.phoneEntered.emit({ number: e.target.value, country_code: this.countryCode });
+    });
+  }
+  reset() {
+    this.phoneInput.classList.remove("s-has-error");
+    this.errorMsg.innerHTML = "";
+  }
+  ;
+  handleCountryInput(event) {
+    if (!!this.phone) {
+      this.phoneEntered.emit({ number: event.target.value, country_code: this.countryCode });
+    }
+  }
+  render() {
+    return (h(Host, { class: "s-tel-input" },
+      h("input", { type: "tel", name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", 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": "Event Emitter"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "phoneEntered",
+      "name": "phoneEntered",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Phone",
+        "resolved": "Phone",
+        "references": {
+          "Phone": {
+            "location": "import",
+            "path": "./interfaces"
+          }
+        }
+      }
+    }]; }
+  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,331 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Host, Element, Event, h, Method, Prop, State } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+import AndroidPhoneIcon from '../../assets/svg/android-phone.svg';
+/**
+ * @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;
+    this.translationLoaded = 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;
+    /**
+     * Once the api verify success, it will be login the customer in web pages
+     */
+    this.supportWebAuth = 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;
+      this.translationLoaded = true;
+      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);
+    });
+    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.disable();
+      this.btn.click();
+      return;
+    }
+    this.btn.enable();
+  }
+  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, this.supportWebAuth))
+      .then(response => this.verified.emit(response))
+      .then(() => this.btn.stop() && this.btn.disable())
+      .then(() => this.modal.close())
+      .then(() => this.autoReload && window.location.reload())
+      .catch((error) => {
+      salla.logger.error(error);
+      this.btn.stop() && this.btn.enable() && this.reset();
+    });
+  }
+  render() {
+    return this.display == 'inline' ? h(Host, null, this.myBody()) :
+      h("salla-modal", { width: "xs", class: "s-verify", ref: modal => this.modal = modal, "modal-title": this.title },
+        h("span", { slot: 'icon', innerHTML: AndroidPhoneIcon }),
+        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: "tel", autocomplete: "one-time-code", pattern: "[0-9]*", inputmode: "numeric", 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"
+    },
+    "supportWebAuth": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Once the api verify success, it will be login the customer in web pages"
+      },
+      "attribute": "support-web-auth",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "translationLoaded": {},
+    "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-dev.js

@@ -0,0 +1,35 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import './app';
+salla.event.setMaxListeners(100);
+export default function () {
+  salla.init({
+    debug: true,
+    store: {
+      url: process.env.URL,
+      api: process.env.API,
+      id: process.env.STORE_ID,
+      logo: "https://salla-dev.s3.eu-central-1.amazonaws.com/logo/logo-fashion.jpg",
+    },
+    user: {
+      // todo :: read the user data from storage
+      // "id": process.env.USER_ID,
+      "type": "guest",
+      // "email": "demo@demo.com",
+      // "mobile": "+966555555555",
+      // "currency_code": "SAR",
+      // "country_code": "SA",
+      language_code: document.documentElement.lang,
+    }
+  });
+  // this is required to bypass cloudflare in stage
+  if (salla.api.axios) {
+    salla.api.axios.defaults.headers.common['CF-Access-Client-Id'] = process.env.CF_ACCESS_ID;
+    salla.api.axios.defaults.headers.common['CF-Access-Client-Secret'] = process.env.CF_ACCESS_SECRET;
+  }
+  else {
+    salla.api.defaults.headers.common['CF-Access-Client-Id'] = process.env.CF_ACCESS_ID;
+    salla.api.defaults.headers.common['CF-Access-Client-Secret'] = process.env.CF_ACCESS_SECRET;
+  }
+}

package/dist/collection/global/app.js

@@ -0,0 +1,10 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+/**
+ * if there are a failed with ts build because twilight use the final bundle temporary
+ * import '@salla.sa/twilight/dist/@salla.sa/twilight.min'
+ */
+import '@salla.sa/twilight';
+export default function () {
+}

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 {};