@salla.sa/twilight-components 1.0.17 → 1.0.18

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

@@ -1,233 +0,0 @@
-import { Component, h, Prop, Method, State, Element } from "@stencil/core";
-let engine = require('store/src/store-engine');
-let storages = require('store/storages/sessionStorage');
-let sessionStore = engine.createStore(storages);
-export class SallaBranches {
-  constructor() {
-    this.open = false;
-    this.isOpenedBefore = sessionStore.get("branch-choosed-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 ? 's-branches-color-red' : branch.available ? 's-branches-color-green' : 's-branches-color-gray'
-        :
-          this.currentBranch('limited') ? 's-branches-color-red' : this.currentBranch('available') ? 's-branches-color-green' : 's-branches-color-gray';
-    };
-    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() {
-    this.btn.load().then(() => {
-      setTimeout(() => location.reload(), 2000);
-    });
-    sessionStore.set("branch-choosed-before", true);
-    this.show();
-    setTimeout(() => {
-      this.current = this.selected;
-    }, 300);
-  }
-  render() {
-    return (h("salla-modal", { icon: "sicon-store-alt", title: "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636", "sub-title": "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646", "sub-title-first": true, "is-closable": !this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true', ref: modal => this.modal = modal, "modal-width": "sm", id: "s-branches-modal", class: "hidden" },
-      h("h4", { class: "s-branches-title" }, this.formTitle()),
-      this.branches.length <= 5 ?
-        h("div", { class: "s-branches-space-v" }, this.branches.map((branch) => h("div", { class: "s-branches-input-wrap" },
-          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: {
-              's-branches-input': true,
-              'opacity-50': !branch.open,
-              'hidden': !this.isChoiceable()
-            }, checked: this.current == branch.id }),
-          h("label", { htmlFor: this.position + '_branch_' + branch.id, class: {
-              's-branches-label': true,
-              's-branches-clickable': this.isChoiceable()
-            } },
-            h("span", { class: { 's-branches-is-closed': !branch.open } }, branch.name),
-            this.isChoiceable() ?
-              h("small", { class: "s-branches-closed-badge" }, branch.open ? '' : 'مُغلق')
-              :
-                h("span", { class: this.statusColor(branch) }, branch.tag)))))
-        :
-          h("select", { class: "s-branches-select", 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("slot", { name: "footer" },
-          h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, salla.lang.get('common.elements.ok')))
-        : ''));
-  }
-  componentDidRender() {
-    if (!this.isOpenedBefore && this.displayAs == 'popup') {
-      this.show();
-    }
-  }
-  static get is() { return "salla-branches"; }
-  static get originalStyleUrls() { return {
-    "$": ["salla-branches.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["salla-branches.css"]
-  }; }
-  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/salla-button/salla-button.css

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

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

@@ -1,246 +0,0 @@
-import { Component, Element, h, Method, Prop, Watch, Host } from '@stencil/core';
-import Helper from "../../Helpers/Helper";
-export class SallaButton {
-  constructor() {
-    this.btnStyle = 'primary';
-    this.loading = false;
-    this.disabled = false;
-    this.loaderPosition = 'before';
-    this.wide = false;
-    this.hostAttributes = {};
-    //============= Initiate Button Attributes =============//
-    for (let i = 0; i < this.host.attributes.length; i++) {
-      this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
-    }
-    this.hostAttributes.type = this.hostAttributes.type || 'button';
-    this.hostAttributes.class += ' s-button-btn btn--has-loading'
-      + ' s-button-' + this.btnStyle
-      + (this.wide ? ' s-button-wide ' : '')
-      + ' loader-' + this.loaderPosition
-      + (this.loaderPosition == 'before' ? ' s-button-loader-after' : '');
-    delete this.hostAttributes['btn-style'];
-    delete this.hostAttributes['id'];
-    if (this.wide) {
-      this.host.classList.add('s-button-wide');
-    }
-  }
-  async load() {
-    if (this.loaderPosition == 'center')
-      this.text.classList.add('s-button-hide');
-    this.host.setAttribute('loading', '');
-    return this.host;
-  }
-  async stop() {
-    this.host.removeAttribute('loading');
-    return this.host;
-  }
-  async disable() {
-    this.host.setAttribute('disabled', '');
-  }
-  async enable() {
-    this.host.removeAttribute('disabled');
-  }
-  handleVisible(newKind, oldKind) {
-    //todo::use united styles
-    this.btn.classList.remove('btn-' + oldKind);
-    this.btn.classList.add('btn-' + newKind);
-  }
-  handleLoading(newVal) {
-    //todo::use united styles
-    Helper.toggleElement(this.btn, 'btn--is-loading', 'btn--no-loading', () => newVal);
-  }
-  render() {
-    return (
-    //TODO:: use HOST then fake button behaviours
-    h(Host, { class: "s-button-host-tag" },
-      h("button", Object.assign({ ref: btn => this.btn = btn, disabled: this.disabled }, this.hostAttributes),
-        h("span", { class: "s-button-text", ref: el => this.text = el },
-          h("slot", null)),
-        this.loading ? h("span", { class: {
-            //todo::use united styles
-            's-button-loader': true,
-            's-button-loader-start': this.loaderPosition === 'start',
-            's-button-loader-end': this.loaderPosition === 'end',
-            's-button-loader-center': this.loaderPosition === 'center',
-          } }) : '')));
-  }
-  static get is() { return "salla-button"; }
-  static get originalStyleUrls() { return {
-    "$": ["salla-button.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["salla-button.css"]
-  }; }
-  static get properties() { return {
-    "btnStyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'primary' | 'outline' | 'outline-primary' | 'danger'",
-        "resolved": "\"danger\" | \"outline\" | \"outline-primary\" | \"primary\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "btn-style",
-      "reflect": true,
-      "defaultValue": "'primary'"
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "loading",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "loaderPosition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'start' | 'end' | 'center' | 'before'",
-        "resolved": "\"before\" | \"center\" | \"end\" | \"start\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "loader-position",
-      "reflect": false,
-      "defaultValue": "'before'"
-    },
-    "wide": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "wide",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get methods() { return {
-    "load": {
-      "complexType": {
-        "signature": "() => Promise<HTMLElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "stop": {
-      "complexType": {
-        "signature": "() => Promise<HTMLElement>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<HTMLElement>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "disable": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "enable": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "btnStyle",
-      "methodName": "handleVisible"
-    }, {
-      "propName": "loading",
-      "methodName": "handleLoading"
-    }]; }
-}

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

@@ -1,206 +0,0 @@
-import { Component, Element, h, Method, Prop } from '@stencil/core';
-import Helper from "../../Helpers/Helper";
-/**
- * @slot header - The top of the modal.
- * @slot footer - Replaces the bottom button.
- * @slot language - Replaces language label, has replaceable props `{name}`, `{code}`, `{country_code}`.
- * @slot currency - Replaces currency label, has replaceable props `{name}`, `{code}`, `{country_code}`.
- */
-export class SallaLocalization {
-  constructor() {
-    var _a, _b;
-    this.language = salla.config.language || {};
-    this.currency = salla.config.currency || {};
-    this.languagesTitle = salla.lang.get('common.titles.language');
-    this.currenciesTitle = salla.lang.get('common.titles.currency');
-    this.ok = salla.lang.get('common.elements.ok');
-    Helper.setHost(this.host);
-    salla.event.on('localization::show', () => this.show());
-    /**
-     * letting developer to insert his own slot like:
-     * <salla-localization>
-     *   <div slot="language">...{name}....</div>
-     *   <div slot="currency">...{name}....</div>
-     * </salla-localization>
-     * Because scoped templates not supported in stencil );
-     * we made a workaround to pass language & currency attributes, then replace names in rendering
-     */
-    this.languageSlot = ((_a = Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-label" for="lang-{code}"><span>{name}</span><div class="s-localization-flag flag iti__flag iti__{country_code}"></div></label>';
-    this.currencySlot = ((_b = Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-label" for="currency-{code}"><span>{name}</span><small class="s-localization-currency">{code}</small></label>';
-  }
-  async show() {
-    return this.modal.show();
-  }
-  async hide() {
-    return this.modal.hide();
-  }
-  onChangeCurrency(event) {
-    this.currency = salla.config.currencies.filter(currency => currency.code == event.target.value)[0];
-  }
-  onChangeLanguage(event) {
-    this.language = salla.config.languages.filter(lang => lang.code == event.target.value)[0];
-  }
-  async submit() {
-    let url;
-    console.log('this.currency.code::::', this.currency, this.currency.code);
-    this.btn.load()
-      .then(() => (this.currency.code === salla.config.currency.code) || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
-      .then(() => (this.language.code === salla.config.language.code) || (url = this.language.url))
-      .then(() => this.btn.stop())
-      .then(() => this.hide())
-      .then(() => url && (window.location.href = url));
-  }
-  render() {
-    return (h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, "modal-width": "xs" },
-      h("div", { slot: "header" },
-        h("slot", { name: "header" })),
-      h("div", { class: "s-localization-inner" },
-        salla.config.languages ?
-          h("div", { class: "s-localization-section" },
-            h("label", { class: "s-localization-title" }, this.languagesTitle),
-            h("div", { class: "s-localization-section-inner" }, salla.config.languages.length < 6 ?
-              salla.config.languages.map(lang => h("div", { class: "s-localization-item" },
-                h("input", { class: "s-localization-input", type: "radio", checked: this.language.code == lang.code, onChange: () => this.language = lang, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }),
-                h("div", { id: "language-slot", innerHTML: this.languageSlot
-                    .replace(/\{name\}/g, lang.name)
-                    .replace(/\{code\}/g, lang.code)
-                    .replace(/\{country_code\}/g, lang.country_code) }))) :
-              h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, salla.config.languages.map(lang => h("option", { value: lang.code, selected: this.language.code == lang.code }, lang.name)))))
-          : '',
-        salla.config.currencies ?
-          h("div", { class: "s-localization-section" },
-            h("label", { class: "s-localization-title" }, this.currenciesTitle),
-            h("div", { class: "s-localization-section-inner" }, salla.config.currencies.length < 6 ?
-              salla.config.currencies.map(currency => h("div", { class: "s-localization-item" },
-                h("input", { class: "s-localization-input", type: "radio", name: "currency", checked: this.currency.code == currency.code, onChange: () => this.currency = currency, id: 'currency-' + currency.code, value: currency.code }),
-                h("div", { id: "currency-slot", innerHTML: this.currencySlot
-                    .replace(/\{name\}/g, currency.name)
-                    .replace(/\{code\}/g, currency.code)
-                    .replace(/\{country_code\}/g, currency.country_code) }))) :
-              h("select", { class: "s-branches-select", name: "currency", onChange: e => this.onChangeCurrency(e) }, salla.config.currencies.map(currency => h("option", { value: currency.code, selected: this.currency.code == currency.code }, currency.name)))))
-          : ''),
-      h("slot", { name: "footer" },
-        h("salla-button", { wide: true, ref: btn => this.btn = btn, onClick: () => this.submit() }, this.ok))));
-  }
-  /**
-   * to reduce dom levels we will move slot data into the parent dom
-   */
-  componentDidRender() {
-    this.host.querySelectorAll('#currency-slot').forEach(el => el.replaceWith(el.firstChild));
-    this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
-  }
-  static get is() { return "salla-localization"; }
-  static get properties() { return {
-    "languagesTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "languages-title",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.titles.language')"
-    },
-    "currenciesTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "currencies-title",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.titles.currency')"
-    },
-    "ok": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "ok",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.ok')"
-    }
-  }; }
-  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": []
-      }
-    },
-    "submit": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-}