@salla.sa/twilight-components 1.0.8 → 1.0.10

package/dist/cjs/salla-search-b9403062.js

@@ -1,96 +0,0 @@
-'use strict';
-
-const index = require('./index-23da2c6b.js');
-
-const SallaSearch = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    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 (index.h("div", { class: "s-search-product", innerHTML: product }));
-    }
-    else {
-      return (index.h("div", { class: "s-search-product" }, index.h("a", { target: "_blank", href: item.url, class: "s-search-product-image-container" }, index.h("img", { class: "s-search-product-image", src: item.thumb })), index.h("div", { class: "s-search-product-details" }, index.h("div", { class: "s-search-product-title" }, item.title), index.h("div", { class: "s-search-product-price" }, (_b = item.price) === null || _b === void 0 ? void 0 : _b.after))));
-    }
-  }
-  render() {
-    return (index.h(index.Host, { class: "s-search" }, index.h("button", { type: "button", onClick: this.openSearch, class: "s-search-search-button-icon" }, this.hasSearchIconSlot ? (index.h("slot", { name: "search-icon" })) : (index.h("i", { class: "sicon-search font-bold" }))), this.showModal && (index.h("div", { class: "s-search-container", style: { backgroundColor: 'rgba(0,0,0,0.5)' } }, index.h("div", { class: "s-search-wrapper", onClick: this.closeSearch }, index.h("div", { class: "s-search-inner", onClick: e => {
-        e.stopPropagation();
-      } }, index.h("div", { class: "s-search-search-box-container" }, index.h("div", { class: !this.showResult
-        ? 's-search-search-box-inner'
-        : 's-search-search-box-inner-open' }, index.h("input", { class: "s-search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: event => this.handleChange(event) }), this.fetchStatus != 'loading' ? (index.h("button", { class: "s-search-search-icon" }, index.h("i", { class: "sicon-search" }))) : (index.h("span", { class: "s-search-spinner" }, index.h("span", { class: "s-search-spinner-loader" }))))), index.h("div", { class: "s-search-search-results" }, this.fetchStatus === 'error' && (index.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);
-      }))))))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
-
-exports.SallaSearch = SallaSearch;

package/dist/cjs/salla-search.cjs.entry.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const sallaSearch = require('./salla-search-b9403062.js');
-require('./index-23da2c6b.js');
-
-
-
-exports.salla_search = sallaSearch.SallaSearch;

package/dist/cjs/salla-verify.cjs.entry.js

@@ -1,94 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-23da2c6b.js');
-const Helper = require('./Helper-8c75b6ac.js');
-
-const SallaVerify = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    Helper.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.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.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.Helper.showElement(this.resendMessage).hideElement(this.resend);
-    let resendAfter = 30;
-    let timerId = setInterval(() => {
-      if (resendAfter === -1) {
-        clearTimeout(timerId);
-        Helper.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 (index.h("salla-modal", { id: "s-verify", ref: modal => this.modal = modal, title: salla.lang.get('pages.profile.verify_title') }, index.h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }), index.h("label", { class: "s-verify-label" }, salla.lang.get('pages.profile.verify_placeholder')), index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }), index.h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))), index.h("div", { slot: "footer", class: "s-verify-footer" }, index.h("salla-button", { class: "s-verify-submit", disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')))));
-  }
-  get host() { return index.getElement(this); }
-};
-
-exports.salla_verify = SallaVerify;

package/dist/cjs/twilight-components.cjs.js

@@ -1,19 +0,0 @@
-'use strict';
-
-const index = require('./index-23da2c6b.js');
-
-/*
- Stencil Client Patch Browser v2.8.1 | MIT Licensed | https://stenciljs.com
- */
-const patchBrowser = () => {
-    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('twilight-components.cjs.js', document.baseURI).href));
-    const opts = {};
-    if (importMeta !== '') {
-        opts.resourcesUrl = new URL('.', importMeta).href;
-    }
-    return index.promiseResolve(opts);
-};
-
-patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-localization.cjs",[[4,"salla-localization",{"show":[64],"hide":[64]}]]],["salla-verify.cjs",[[0,"salla-verify"]]],["order-rating.cjs",[[0,"order-rating",{"order":[8]}]]],["salla-search.cjs",[[4,"salla-search",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]],["salla-button.cjs",[[4,"salla-button",{"kind":[513],"loading":[516],"disabled":[516],"load":[64],"stop":[64],"disable":[64],"enable":[64]}]]],["multi-warehouse_3.cjs",[[4,"multi-warehouse",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}],[0,"salla-login"],[4,"salla-modal",{"error":[4],"success":[4],"isClosable":[1028,"is-closable"],"modalWidth":[1,"modal-width"],"visible":[516],"subTitle":[1,"sub-title"],"icon":[1],"show":[64],"hide":[64],"setTitle":[64]}]]]], options);
-});

package/dist/collection/Helpers/Helper.js

@@ -1,16 +0,0 @@
-class Helper extends salla.AppHelpers {
-  setHost(host) {
-    this.host = host;
-  }
-  getElement(selector) {
-    return this.host.querySelector(selector);
-  }
-  getAttribute(selector, attribute) {
-    var _a;
-    return (_a = this.getElement(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(attribute);
-  }
-  val(selector) {
-    return this.getAttribute(selector, 'value');
-  }
-}
-export default new Helper;

package/dist/collection/collection-manifest.json

@@ -1,19 +0,0 @@
-{
-  "entries": [
-    "./components/salla-login/salla-login.js",
-    "./components/salla-search/salla-search.js",
-    "./components/multi-warehouse/multi-warehouse.js",
-    "./components/order-rating/order-rating.js",
-    "./components/salla-button/salla-button.js",
-    "./components/salla-localization/salla-localization.js",
-    "./components/salla-modal/salla-modal.js",
-    "./components/salla-verify/salla-verify.js"
-  ],
-  "compiler": {
-    "name": "@stencil/core",
-    "version": "2.8.1",
-    "typescriptVersion": "4.2.3"
-  },
-  "collections": [],
-  "bundles": []
-}

package/dist/collection/components/generate-summary.js

@@ -1,35 +0,0 @@
-var fs = require('fs'), path = require('path'), util = require('util');
-
-var dirToJSON = function (dir, done) {
-  var results = [];
-
-  function recWalk(d, res) {
-    var list = fs.readdirSync(d);
-    list.forEach((name) => {
-      var file = path.resolve(d, name);
-      var stat = fs.statSync(file);
-      if (stat && stat.isDirectory()) {
-        var title;
-        if (name) {
-          title = 'salla-' + name
-        }
-        res.push({ title: title, file: name + '/readme.md' });
-      }
-    });
-  }
-
-  try {
-    recWalk(dir, results);
-    done(null, results);
-  } catch (err) {
-    done(err);
-  }
-};
-
-dirToJSON("src/components", function (err, results) {
-  if (err) console.log(err);
-  else fs.writeFile('src/components/summary.json', JSON.stringify(results), 'utf8', function (err) {
-    if (err) throw err;
-    console.log('Saved!');
-  });
-});

package/dist/collection/components/multi-warehouse/multi-warehouse.js

@@ -1,239 +0,0 @@
-import { Component, h, Prop, Method, State, Element } from "@stencil/core";
-// import Helper from "../../Helpers/Helper";
-let engine = require('store/src/store-engine');
-let storages = require('store/storages/sessionStorage');
-let sessionStore = engine.createStore(storages);
-export class MultiWarehouse {
-  constructor() {
-    this.open = false;
-    this.isOpenedBefore = sessionStore.get("multi-warehouse-opened-before");
-    this.displayAs = 'default';
-    this.browseProductsFrom = 'all';
-    this.branches = [
-      { id: 1, name: 'فرع الرياض', open: true, available: true, limited: false, tag: 'متوفر' },
-      { id: 2, name: 'فرع جدة', open: false, available: false, limited: false, tag: 'غير متوفر' },
-      { id: 3, name: 'فرع مكة', open: true, available: true, limited: false, tag: 'متوفر' },
-      { id: 4, name: 'فرع المدينة', open: true, available: true, limited: false, tag: 'متوفر' },
-      { id: 5, name: 'فرع جازان', open: true, available: true, limited: true, tag: 'الكمية محدودة' }
-    ];
-    this.current = 1;
-    this.currentBranch = (prop) => {
-      return this.branches.filter((el) => el.id == this.current)[0][prop];
-    };
-    this.statusColor = (branch = null) => {
-      return branch ?
-        branch.limited ? 'text-red-400' : branch.available ? 'text-green-500' : 'text-gray-400'
-        :
-          this.currentBranch('limited') ? 'text-red-400' : this.currentBranch('available') ? 'text-green-500' : 'text-gray-400';
-    };
-    this.isChoiceable = () => {
-      return (this.browseProductsFrom !== 'all' && this.position == 'single') || this.position == 'header';
-    };
-    this.formTitle = () => {
-      return this.isChoiceable() ?
-        'توفر المنتج في الفروع الآخرى'
-        : 'التسوق من فرع آخر';
-    };
-    salla.event.on('branches::show', () => this.show());
-  }
-  async show() {
-    return this.modal.show();
-  }
-  async hide() {
-    return this.modal.hide();
-  }
-  handelChange(event) {
-    this.selected = event.target.value;
-  }
-  handleSubmit() {
-    sessionStore.set("multi-warehouse-opened-before", true);
-    this.show();
-    setTimeout(() => {
-      this.current = this.selected;
-    }, 300);
-  }
-  render() {
-    return (h("salla-modal", { "is-closable": !this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true', ref: modal => this.modal = modal, "modal-width": "w-116", id: "multi-warehouse-modal", class: "hidden" },
-      h("slot", { name: "header" },
-        h("div", { slot: "header" })),
-      h("div", null,
-        h("div", { class: "text-right" },
-          h("div", { class: "flex items-center mb-8" },
-            h("div", { class: "flex-shrink-0 sm:mb-0 me-4" },
-              h("div", { class: "h-16 w-16 border border-gray-200 bg-white text-primary rounded-full flex justify-center items-center" },
-                h("span", { class: "sicon-store-alt" }))),
-            h("div", null,
-              h("p", { class: "mt-1 text-xs text-gray-400" }, "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646"),
-              h("h4", { class: "text-base" }, "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636"))),
-          h("fieldset", { class: "mt-4" },
-            h("h4", { class: "text-sm text-gray-600 mb-6" }, this.formTitle()),
-            h("legend", { class: "sr-only" }, this.formTitle()),
-            this.branches.length <= 5 ?
-              h("div", { class: "space-y-5" }, this.branches.map((branch) => h("div", { class: "flex items-center" },
-                h("input", { id: this.position + '_branch_' + branch.id, disabled: !branch.open && this.isChoiceable(), name: "lang", type: "radio", value: branch.id, onChange: (event) => this.handelChange(event), class: {
-                    'me-3 focus:ring-primary h-4 w-4 text-primary border-gray-300': true,
-                    'opacity-50': !branch.open,
-                    'hidden': !this.isChoiceable()
-                  }, checked: this.current == branch.id }),
-                h("label", { htmlFor: this.position + '_branch_' + branch.id, class: {
-                    'flex items-center justify-between text-sm font-medium text-gray-700 flex-grow': true,
-                    'cursor-pointer': this.isChoiceable()
-                  } },
-                  h("span", { class: { 'opacity-50': !branch.open } }, branch.name),
-                  this.isChoiceable() ?
-                    h("small", { class: "text-red-400" }, branch.open ? '' : 'مُغلق')
-                    :
-                      h("span", { class: this.statusColor(branch) }, branch.tag)))))
-              :
-                h("select", { class: "w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary sm:text-sm border-gray-200 rounded-md appearance-none visibility_condition px-4", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id },
-                  branch.name,
-                  " ",
-                  branch.open ? '' : '- مُغلق'))))))),
-      this.isChoiceable() ?
-        h("p", { slot: "footer" },
-          h("slot", { name: "footer" },
-            h("button", { type: "button", class: "mt-8 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white transition-colors hover:bg-primary-d focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:col-start-2 sm:text-sm", onClick: () => this.handleSubmit() }, salla.lang.get('common.elements.ok'))))
-        : ''));
-  }
-  componentDidRender() {
-    if (!this.isOpenedBefore && this.displayAs == 'popup') {
-      //this.show()
-    }
-  }
-  static get is() { return "multi-warehouse"; }
-  static get properties() { return {
-    "position": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "position",
-      "reflect": false
-    },
-    "displayAs": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "display-as",
-      "reflect": false,
-      "defaultValue": "'default'"
-    },
-    "browseProductsFrom": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "browse-products-from",
-      "reflect": false,
-      "defaultValue": "'all'"
-    },
-    "branches": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "any[]",
-        "resolved": "any[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[\n    {id: 1, name: '\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631'},\n    {id: 2, name: '\u0641\u0631\u0639 \u062C\u062F\u0629', open: false, available: false, limited: false, tag: '\u063A\u064A\u0631 \u0645\u062A\u0648\u0641\u0631'},\n    {id: 3, name: '\u0641\u0631\u0639 \u0645\u0643\u0629', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631'},\n    {id: 4, name: '\u0641\u0631\u0639 \u0627\u0644\u0645\u062F\u064A\u0646\u0629', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631'},\n    {id: 5, name: '\u0641\u0631\u0639 \u062C\u0627\u0632\u0627\u0646', open: true, available: true, limited: true, tag: '\u0627\u0644\u0643\u0645\u064A\u0629 \u0645\u062D\u062F\u0648\u062F\u0629'}\n  ]"
-    },
-    "current": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "current",
-      "reflect": false,
-      "defaultValue": "1"
-    }
-  }; }
-  static get states() { return {
-    "open": {},
-    "selected": {},
-    "isOpenedBefore": {}
-  }; }
-  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": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/order-rating/order-rating.css

@@ -1,3 +0,0 @@
-:host {
-  display: block;
-}