@salla.sa/twilight-components 1.0.13 → 1.0.15

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

@@ -0,0 +1,31 @@
+import { Component, h } from '@stencil/core';
+export class SallaLogin {
+  render() {
+    return (h("salla-modal", { id: "salla-login", title: "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u0645\u0648\u0642\u0639" },
+      h("div", { id: "showLoginMethods" },
+        h("p", { class: "text-sm text-gray-text mb-5" }, "\u0627\u062E\u062A\u0631 \u0627\u0644\u0648\u0633\u064A\u0644\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629"),
+        h("div", { id: "openEmailLogin", class: "mb-2.5 box-content relative rounded-md border border-border-color bg-white py-5 pe-4 ps-5 flex items-center space-s-3 hover:border-gray-200" },
+          h("div", { class: "flex-shrink-0" },
+            h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" },
+              h("i", { class: "sicon-mail" }))),
+          h("div", { class: "flex-1 min-w-0" },
+            h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" },
+              h("div", { class: "flex-1" },
+                h("span", { class: "absolute inset-0", "aria-hidden": "true" }),
+                h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"),
+                h("h6", { class: "font-boldf" }, "\u0627\u0644\u0628\u0631\u064A\u062F \u0627\u0644\u0625\u0644\u0643\u062A\u0631\u0648\u0646\u064A")),
+              h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))),
+        h("div", { class: "box-content relative rounded-md border border-border-color bg-white py-5 pe-4 ps-5 flex items-center space-s-3 hover:border-gray-200" },
+          h("div", { class: "flex-shrink-0" },
+            h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" },
+              h("i", { class: "sicon-phone" }))),
+          h("div", { class: "flex-1 min-w-0" },
+            h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" },
+              h("div", { class: "flex-1" },
+                h("span", { class: "absolute inset-0", "aria-hidden": "true" }),
+                h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"),
+                h("h6", { class: "font-boldf" }, "\u0627\u0644\u0647\u0627\u062A\u0641")),
+              h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))))));
+  }
+  static get is() { return "salla-login"; }
+}

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

@@ -0,0 +1,360 @@
+import { Component, h, Prop, Host, Element, Event, Watch, Method } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+//todo:: button component
+export class SallaModal {
+  constructor() {
+    var _a;
+    this.error = false;
+    this.success = false;
+    this.isClosable = true;
+    this.modalWidth = 'w-96'; //todo use friendly names
+    this.visible = false;
+    this.subTitleFirst = false;
+    this.subTitle = '';
+    this.icon = '';
+    this.imageIcon = '';
+    Helper.setHost(this.host);
+    salla.event.on('modal::open', btn => btn.dataset.target == this.host.id && this.show());
+    salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
+    this.title = this.host.title;
+    this.host.removeAttribute('title');
+    (_a = Helper.getElement('[slot=body]')) === null || _a === void 0 ? void 0 : _a.classList.add('s-modal-body');
+  }
+  handleVisible(newValue) {
+    if (!newValue) {
+      this.toggleModal(false);
+      this.close.emit();
+      return;
+    }
+    this.host.classList.remove('hidden');
+    setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
+    this.ready.emit();
+  }
+  async show() {
+    this.host.setAttribute('visible', '');
+    return this.host;
+  }
+  async hide() {
+    this.host.removeAttribute('visible');
+    return this.host;
+  }
+  async setTitle(title) {
+    this.title = title;
+    return this.host;
+  }
+  toggleModal(isOpen) {
+    Helper.toggleElement(this.host.querySelector('.s-modal-body'), 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElement(this.host.querySelector('[slot=body]'), 's-modal-entering', 's-modal-leaving', () => isOpen)
+      .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
+      .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
+    if (!isOpen) {
+      setTimeout(() => this.host.classList.add('hidden'), 350);
+    }
+  }
+  closeModal() {
+    if (!this.isClosable) {
+      return;
+    }
+    this.host.removeAttribute('visible');
+  }
+  //todo:: pref for each modal
+  render() {
+    this.host.id = this.host.id || 'salla-modal';
+    return (h(Host, { class: 's-modal-container hidden', "aria-modal": "true", role: "dialog" },
+      h("div", { class: "s-modal-wrapper" },
+        h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }),
+        h("span", { class: "s-modal-spacer" }, "\u200B"),
+        h("slot", { name: "body" },
+          h("div", { class: 's-modal-body ' + this.modalWidth },
+            h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } },
+              this.isClosable ?
+                h("button", { class: "s-modal-close cursor-pointer", onClick: () => this.closeModal(), type: "button" },
+                  h("span", { class: "sicon-cancel" }))
+                : '',
+              this.error || this.success || this.icon
+                ? h("div", { class: {
+                    's-modal-icon': true,
+                    's-modal-bg-error': this.error,
+                    's-modal-bg-success': this.success,
+                    's-modal-bg-normal': !this.error && !this.success
+                  } },
+                  h("i", { class: {
+                      [this.icon]: true,
+                      's-modal-text-error': this.error,
+                      's-modal-text-success': this.success,
+                    } }))
+                : this.imageIcon ?
+                  h("img", { class: "s-modal-header-img", src: this.imageIcon })
+                  : '',
+              this.title || this.subTitle ?
+                h("div", { class: "s-modal-header-content" },
+                  h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }),
+                  h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle }))
+                : ''),
+            h("slot", null),
+            h("slot", { name: "footer" }))))));
+  }
+  static get is() { return "salla-modal"; }
+  static get properties() { return {
+    "error": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "error",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "success": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "success",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "isClosable": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-closable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "modalWidth": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "modal-width",
+      "reflect": true,
+      "defaultValue": "'w-96'"
+    },
+    "visible": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "visible",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "subTitleFirst": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sub-title-first",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "subTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sub-title",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "imageIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "image-icon",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get events() { return [{
+      "method": "ready",
+      "name": "ready",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  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": []
+      }
+    },
+    "setTitle": {
+      "complexType": {
+        "signature": "(title: any) => Promise<HTMLElement>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "visible",
+      "methodName": "handleVisible"
+    }]; }
+}