@salla.sa/twilight 1.0.0

package/components/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/components/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9441fd8e.js');
+
+/*
+ Stencil Client Patch Esm v2.8.1 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["salla-login_2.cjs",[[1,"salla-login",{"searchIcon":[1,"search-icon"],"visible":[1540],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32]},[[8,"click","handleClick"]]],[4,"salla-search-modal",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/components/dist/cjs/salla-login_2.cjs.entry.js

@@ -0,0 +1,131 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9441fd8e.js');
+
+const sallaLoginCss = ".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}";
+
+const SallaLogin = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 (index.h("div", { class: this.visible ? 'wrapper visible' : 'wrapper' }, index.h("div", { class: "modal" }, index.h("div", { class: 'modal-header' }, index.h("h5", { class: "title" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644 \u0625\u0644\u064A \u0627\u0644\u0645\u0648\u0642\u0639"), index.h("button", { type: "button", class: "close", "data-dismiss": "modal", "aria-label": "Close", onClick: this.handleClose }, index.h("span", { "aria-hidden": "true" }, "\u00D7"))), index.h("div", { class: "modal-body" }, index.h("div", { id: "showLoginMethods" }, index.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"), index.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" }, index.h("div", { class: "flex-shrink-0" }, index.h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" }, index.h("i", { class: "sicon-mail" }))), index.h("div", { class: "flex-1 min-w-0" }, index.h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" }, index.h("div", { class: "flex-1" }, index.h("span", { class: "absolute inset-0", "aria-hidden": "true" }), index.h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"), index.h("h6", { class: "font-boldf" }, "\u0627\u0644\u0628\u0631\u064A\u062F \u0627\u0644\u0625\u0644\u0643\u062A\u0631\u0648\u0646\u064A")), index.h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))), index.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" }, index.h("div", { class: "flex-shrink-0" }, index.h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" }, index.h("i", { class: "sicon-phone" }))), index.h("div", { class: "flex-1 min-w-0" }, index.h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" }, index.h("div", { class: "flex-1" }, index.h("span", { class: "absolute inset-0", "aria-hidden": "true" }), index.h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"), index.h("h6", { class: "font-boldf" }, "\u0627\u0644\u0647\u0627\u062A\u0641")), index.h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))))))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+};
+SallaLogin.style = sallaLoginCss;
+
+const searchModalCss = "";
+
+const SearchModal = 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-modal-product", innerHTML: product }));
+    }
+    else {
+      return (index.h("div", { class: "s-search-modal-product" }, index.h("a", { target: "_blank", href: item.url, class: "s-search-modal-product-image-container" }, index.h("img", { class: "s-search-modal-product-image", src: item.thumb })), index.h("div", { class: "s-search-modal-product-details" }, index.h("div", { class: "s-search-modal-product-title" }, item.title), index.h("div", { class: "s-search-modal-product-price" }, (_b = item.price) === null || _b === void 0 ? void 0 : _b.after))));
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: "s-search-modal" }, index.h("button", { type: "button", onClick: this.openSearch, class: "s-search-modal-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-modal-container", style: { backgroundColor: 'rgba(0,0,0,0.5)' } }, index.h("div", { class: "s-search-modal-wrapper", onClick: this.closeSearch }, index.h("div", { class: "s-search-modal-inner", onClick: e => {
+        e.stopPropagation();
+      } }, index.h("div", { class: "s-search-modal-search-box-container" }, index.h("div", { class: !this.showResult
+        ? 's-search-modal-search-box-inner'
+        : 's-search-modal-search-box-inner-open' }, index.h("input", { class: "s-search-modal-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: event => this.handleChange(event) }), this.fetchStatus != 'loading' ? (index.h("button", { class: "s-search-modal-search-icon" }, index.h("i", { class: "sicon-search" }))) : (index.h("span", { class: "s-search-modal-spinner" }, index.h("span", { class: "s-search-modal-spinner-loader" }))))), index.h("div", { class: "s-search-modal-search-results" }, this.fetchStatus === 'error' && (index.h("p", { class: "s-search-modal-no-results error p-4 text-sm text-gray-text" }, this.noResultsText)), this.results &&
+      this.results.map(item => {
+        return this.getProduct(item);
+      }))))))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get hostElement() { return index.getElement(this); }
+};
+SearchModal.style = searchModalCss;
+
+exports.salla_login = SallaLogin;
+exports.salla_search_modal = SearchModal;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-9441fd8e.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-login_2.cjs",[[1,"salla-login",{"searchIcon":[1,"search-icon"],"visible":[1540],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32]},[[8,"click","handleClick"]]],[4,"salla-search-modal",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]]], options);
+});

package/components/dist/collection/collection-manifest.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    "./components/salla-login/salla-login.js",
+    "./components/search-modal/search-modal.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.8.1",
+    "typescriptVersion": "4.2.3"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,35 @@
+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/components/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/components/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/components/dist/collection/components/search-modal/search-modal.css

@@ -0,0 +1,9 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */

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

@@ -0,0 +1,161 @@
+import { Component, h, Host, Prop, State, Element } from '@stencil/core';
+export class SearchModal {
+  constructor() {
+    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 (h("div", { class: "s-search-modal-product", innerHTML: product }));
+    }
+    else {
+      return (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" }, item.title),
+          h("div", { class: "s-search-modal-product-price" }, (_b = item.price) === null || _b === void 0 ? void 0 : _b.after))));
+    }
+  }
+  render() {
+    return (h(Host, { class: "s-search-modal" },
+      h("button", { type: "button", onClick: this.openSearch, class: "s-search-modal-search-button-icon" }, this.hasSearchIconSlot ? (h("slot", { name: "search-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", onClick: e => {
+              e.stopPropagation();
+            } },
+            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", { 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" }, this.noResultsText)),
+              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 ...'"
+    },
+    "noResultsText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The text to overwrite no results text."
+      },
+      "attribute": "no-results-text",
+      "reflect": false,
+      "defaultValue": "'There are no results at the moment'"
+    }
+  }; }
+  static get states() { return {
+    "searchTerm": {},
+    "results": {},
+    "fetchStatus": {},
+    "showResult": {},
+    "showModal": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/components/dist/collection/index.js

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

package/components/dist/collection/interfaces/colors.js

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

package/components/dist/collection/interfaces/index.js

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

package/components/dist/collection/interfaces/ratio.js

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

package/components/dist/collection/plugins/tailwind-theme/index.js

@@ -0,0 +1,32 @@
+const plugin = require('tailwindcss/plugin');
+const fs = require('fs');
+const path = require('path');
+
+module.exports = plugin.withOptions(() => {
+
+  
+  return function({addUtilities}) {
+    addUtilities({
+      // TODO :: find if there are used and defined them here if its.
+      '.anime-item': {},
+      '.text-md': {},
+      '.items-top': {},
+      '.error': {},
+      '.search-box': {},
+      '.spinner-loader-wrap': {}
+    });
+
+    // todo :: move it to global
+    addUtilities({
+      '.spinner-loader': {
+        'border-right-color': 'var(--main-color) !important',
+        '&.reverse': {
+          'border-right-color': '#9f7171 !important',
+          'background-color': '#f98181'
+        }
+      }
+    });
+
+    addUtilities(JSON.parse(fs.readFileSync(path.resolve(__dirname, 'utilities.json'), 'UTF-8')));
+  };
+});