@salla.sa/twilight-components 1.0.0

package/dist/collection/components/modal/modal.css

@@ -0,0 +1,158 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+.wrapper {
+  opacity: 0;
+  visibility: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.42);
+  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
+  transition: opacity 0.5s, visibility 0s 0.5s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1050;
+}
+.wrapper .modal {
+  font-family: Helvetica, sans-serif;
+  font-size: 14px;
+  background-color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0.3rem;
+}
+@media (min-width: 576px) {
+  .wrapper .modal {
+    max-width: 500px;
+  }
+}
+.wrapper .modal .modal-header {
+  display: none;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 1rem 1rem;
+  border-bottom: 1px solid #dee2e6;
+  border-top-left-radius: 0.3rem;
+  border-top-right-radius: 0.3rem;
+}
+.wrapper .modal .modal-header h5 {
+  margin: 0;
+  font-weight: normal;
+}
+.wrapper .modal .modal-header .title {
+  font-size: 1.25rem;
+}
+.wrapper .modal .modal-header button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  color: grey;
+  outline: 0;
+  float: right;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  text-shadow: 0 1px 0 #fff;
+  opacity: 0.5;
+}
+.wrapper .modal .modal-header button.close :hover {
+  color: black;
+  cursor: pointer;
+}
+.wrapper .modal .displayed {
+  display: flex;
+}
+.wrapper .modal .modal-body {
+  position: relative;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 1rem;
+}
+.wrapper .modal .modal-footer {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-top: 1px solid #dee2e6;
+  border-bottom-right-radius: 0.3rem;
+  border-bottom-left-radius: 0.3rem;
+}
+.wrapper .modal .modal-footer .btn-primary {
+  color: #fff;
+  background-color: #007bff;
+  border-color: #007bff;
+  outline: none;
+}
+.wrapper .modal .modal-footer .btn-primary:hover {
+  background-color: #0069d9;
+  border-color: #0062cc;
+  cursor: pointer;
+}
+.wrapper .modal .modal-footer .btn-secondary {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #6c757d;
+  outline: none;
+}
+.wrapper .modal .modal-footer .btn-secondary:hover {
+  background-color: #5a6269;
+  border-color: #5a6269;
+  cursor: pointer;
+}
+.wrapper .modal .modal-footer > :not(:last-child) {
+  margin-right: 0.25rem;
+}
+.wrapper .modal .button-container {
+  text-align: right;
+}
+.wrapper .modal button {
+  display: inline-block;
+  font-weight: 400;
+  color: #212529;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+.wrapper .modal button:hover {
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+
+.visible {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
+}

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

@@ -0,0 +1,180 @@
+import { Component, Event, h, Prop } from '@stencil/core';
+export class Modal {
+  constructor() {
+    /**
+     * The title to display in the modal.
+     */
+    this.modalTitle = 'Modal Title';
+    /**
+     * The text to display in the cancel button.
+     */
+    this.cancelText = 'Cancel';
+    /**
+     * The text to display in the save button.
+     */
+    this.saveText = 'Save';
+    /**
+     * If 'true' will make the modal visible.
+     */
+    this.visible = false;
+    /**
+     * If 'true' will show the modal header.
+     */
+    this.modalHeader = false;
+    this.handleCancelClick = () => {
+      this.visible = false;
+      this.cancel.emit();
+    };
+    this.handleOkClick = () => {
+      this.visible = false;
+      this.ok.emit();
+    };
+    this.handleClose = () => {
+      this.visible = false;
+    };
+  }
+  render() {
+    return (h("div", { class: this.visible ? 'wrapper visible' : 'wrapper' },
+      h("div", { class: "modal" },
+        h("div", { class: this.modalHeader ? 'modal-header displayed' : 'modal-header' },
+          h("h5", { class: "title" }, this.modalTitle),
+          h("button", { type: "button", class: "close", "data-dismiss": "modal", "aria-label": "Close", onClick: this.handleClose },
+            h("span", { "aria-hidden": "true" }, "\u00D7"))),
+        h("div", { class: "modal-body" },
+          h("slot", null)),
+        h("div", { class: "modal-footer" },
+          h("button", { type: "button", class: "btn-secondary", onClick: this.handleCancelClick }, this.cancelText),
+          h("button", { type: "button", class: "btn-primary", onClick: this.handleOkClick }, this.saveText)))));
+  }
+  static get is() { return "salla-modal"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["modal.css"]
+  }; }
+  static get properties() { return {
+    "modalTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The title to display in the modal."
+      },
+      "attribute": "modal-title",
+      "reflect": false,
+      "defaultValue": "'Modal Title'"
+    },
+    "cancelText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The text to display in the cancel button."
+      },
+      "attribute": "cancel-text",
+      "reflect": false,
+      "defaultValue": "'Cancel'"
+    },
+    "saveText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The text to display in the save button."
+      },
+      "attribute": "save-text",
+      "reflect": false,
+      "defaultValue": "'Save'"
+    },
+    "visible": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If 'true' will make the modal visible."
+      },
+      "attribute": "visible",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "modalHeader": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If 'true' will show the modal header."
+      },
+      "attribute": "modal-header",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "ok",
+      "name": "ok",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "cancel",
+      "name": "cancel",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,104 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+.wrapper {
+  opacity: 0;
+  visibility: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: #fcfcfc;
+  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
+  transition: opacity 0.5s, visibility 0s 0.5s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1050;
+}
+.wrapper .modal {
+  font-family: Helvetica, sans-serif;
+  font-size: 14px;
+  background-color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0.3rem;
+}
+@media (min-width: 576px) {
+  .wrapper .modal {
+    max-width: 500px;
+  }
+}
+.wrapper .modal .displayed {
+  display: flex;
+}
+.wrapper .modal .modal-body {
+  position: relative;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 1rem;
+}
+
+.visible {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
+}
+
+.hide {
+  display: none !important;
+}
+
+.show {
+  display: block !important;
+}
+
+.search-box {
+  display: flex;
+}
+.search-box input {
+  width: 100%;
+  padding: 10px;
+  padding-inline-start: 32px;
+}
+.search-box button {
+  background-color: transparent;
+  border: 0;
+  position: absolute;
+  padding: 12px;
+  left: 12px;
+}
+
+.results {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 300px;
+  overflow-y: scroll;
+}
+.results .product-img {
+  width: 50px;
+  margin-inline-end: 10px;
+}
+.results a:first-child {
+  margin-top: 20px;
+}
+.results a {
+  display: flex;
+  border-bottom: 1px solid #ddd;
+}
+.results a h5 {
+  margin-top: 5px;
+}

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

@@ -0,0 +1,113 @@
+import { Component, h, Prop, Listen, State } from '@stencil/core';
+export class SallaLogin {
+  constructor() {
+    this.fetchStatus = '';
+    this.searchIcon = 'Search_Icon.svg';
+    /**
+     * If 'true' will make the modal visible.
+     */
+    this.visible = false;
+    this.handleClose = () => {
+      this.visible = false;
+    };
+  }
+  handleClick(ev) {
+    if (!ev.path.some(x => x.className && x.className.includes('modal-body')) &&
+      ev.target.localName === 'salla-search-modal') {
+      this.visible = false;
+    }
+  }
+  render() {
+    return (h("div", { class: this.visible ? 'wrapper visible' : 'wrapper' },
+      h("div", { class: "modal" },
+        h("div", { class: 'modal-header' },
+          h("h5", { class: "title" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644 \u0625\u0644\u064A \u0627\u0644\u0645\u0648\u0642\u0639"),
+          h("button", { type: "button", class: "close", "data-dismiss": "modal", "aria-label": "Close", onClick: this.handleClose },
+            h("span", { "aria-hidden": "true" }, "\u00D7"))),
+        h("div", { class: "modal-body" },
+          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"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-login.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-login.css"]
+  }; }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() { return {
+    "searchIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "search-icon",
+      "reflect": false,
+      "defaultValue": "'Search_Icon.svg'"
+    },
+    "visible": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If 'true' will make the modal visible."
+      },
+      "attribute": "visible",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "searchTerm": {},
+    "results": {},
+    "fetchStatus": {},
+    "showResult": {}
+  }; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "handleClick",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,126 @@
+import { Component, h, Host, Prop, State } from '@stencil/core';
+export class SearchModal {
+  constructor() {
+    this.fetchStatus = '';
+    this.showModal = false;
+    /**
+     * The text to overwrite search placeholder.
+     */
+    this.searchPlaceholder = 'Search here ...';
+    this.handleChange = event => {
+      this.searchTerm = event.target.value;
+      console.log('this.value', this.searchTerm);
+      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 = () => {
+      console.log('openSearchModal');
+      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.$nextTick(() => { this.$refs.searchInput.focus(); });
+    };
+    this.closeSearch = () => {
+      console.log('closeSearchModal');
+      this.searchTerm = '';
+      this.fetchStatus = '';
+      this.results = [];
+      document.getElementsByTagName('html')[0].style.position = 'static';
+      document.getElementsByTagName('html')[0].style.overflowY = 'auto';
+      this.showModal = false;
+    };
+  }
+  getProduct(item) {
+    var _a;
+    return (h("div", { key: item.id, class: "s-search-modal-results-item" },
+      h("div", { class: "s-search-modal-product" },
+        h("a", { target: "_blank", href: item.url, class: "s-search-modal-product-image-container" },
+          h("img", { class: "s-search-modal-product-image", src: item.thumb })),
+        h("div", { class: "s-search-modal-product-details" },
+          h("div", { class: "s-search-modal-product-title" },
+            h("h3", { class: "s-search-modal-product-title-h3" }, item.title)),
+          h("div", { class: "s-search-modal-product-price" },
+            h("h4", { class: "s-search-modal-product-price-h4" }, (_a = item.price) === null || _a === void 0 ? void 0 : _a.after))))));
+  }
+  render() {
+    return (h(Host, { class: "s-search-modal" },
+      h("button", { type: "button", onClick: this.openSearch, class: "s-search-modal-search-button-icon" },
+        h("i", { class: "sicon-search font-bold" })),
+      this.showModal && (h("div", { class: "s-search-modal-container", style: { backgroundColor: 'rgba(0,0,0,0.5)' } },
+        h("div", { class: "s-search-modal-wrapper", onClick: this.closeSearch },
+          h("div", { class: "s-search-modal-inner" },
+            h("div", { class: "s-search-modal-search-box-container" },
+              h("div", { class: !this.showResult ? 's-search-modal-search-box-inner' : 's-search-modal-search-box-inner-open' },
+                h("input", { onClick: e => {
+                    e.stopPropagation();
+                  }, class: "s-search-modal-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: event => this.handleChange(event) }),
+                this.fetchStatus != 'loading' ? (h("button", { class: "s-search-modal-search-icon" },
+                  h("i", { class: "sicon-search" }))) : (h("span", { class: "s-search-modal-spinner" },
+                  h("span", { class: "s-search-modal-spinner-loader" }))))),
+            h("div", { class: "s-search-modal-search-results" },
+              this.fetchStatus === 'error' && (h("p", { class: "s-search-modal-no-results error p-4 text-sm text-gray-text" }, "\u0644\u0627 \u064A\u0648\u062C\u062F \u0646\u062A\u0627\u0626\u062C")),
+              this.results &&
+                this.results.map(item => {
+                  return this.getProduct(item);
+                }))))))));
+  }
+  static get is() { return "salla-search-modal"; }
+  static get originalStyleUrls() { return {
+    "$": ["search-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["search-modal.css"]
+  }; }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() { return {
+    "searchPlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The text to overwrite search placeholder."
+      },
+      "attribute": "search-placeholder",
+      "reflect": false,
+      "defaultValue": "'Search here ...'"
+    }
+  }; }
+  static get states() { return {
+    "searchTerm": {},
+    "results": {},
+    "fetchStatus": {},
+    "showResult": {},
+    "showModal": {}
+  }; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/interfaces/colors.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/interfaces/index.js

@@ -0,0 +1,2 @@
+export * from './colors';
+export * from './ratio';

package/dist/collection/interfaces/ratio.js

@@ -0,0 +1 @@
+export {};