@salla.sa/twilight-components 1.0.21 → 1.0.22

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

@@ -0,0 +1,246 @@
+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

@@ -0,0 +1,208 @@
+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.get('language', {});
+    this.currency = salla.config.get('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>';
+    this.languages = Object.values(salla.config.get('languages', {}));
+    this.currencies = Object.values(salla.config.get('currencies', {}));
+  }
+  async show() {
+    return this.modal.show();
+  }
+  async hide() {
+    return this.modal.hide();
+  }
+  onChangeCurrency(event) {
+    this.currency = salla.config.get('currencies.' + event.target.value);
+  }
+  onChangeLanguage(event) {
+    this.language = salla.config.get('languages.' + event.target.value);
+  }
+  async submit() {
+    let url;
+    console.log('this.currency.code::::', this.currency, this.currency.code);
+    this.btn.load()
+      .then(() => this.currency.code === salla.config.get('user.currency') || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
+      .then(() => this.language.code === salla.config.get('user.language') || (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" },
+        this.languages.length > 1 ?
+          h("div", { class: "s-localization-section" },
+            h("label", { class: "s-localization-title" }, this.languagesTitle),
+            h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
+              this.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) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language.code == lang.code }, lang.name)))))
+          : '',
+        this.currencies.length > 1 ?
+          h("div", { class: "s-localization-section" },
+            h("label", { class: "s-localization-title" }, this.currenciesTitle),
+            h("div", { class: "s-localization-section-inner" }, this.currencies.length < 6 ?
+              this.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) }, this.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"; }
+}

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

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