@salla.sa/twilight-components 1.0.1 → 1.0.3

package/dist/cjs/index.cjs.js

@@ -1,2 +1,121 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const searchModal = require('./search-modal-722cccc3.js');
+require('./index-9441fd8e.js');
+
+const utilities = {
+	".s-search-modal-search-button-icon": {
+	"@apply bg-gray-bg2 hover:bg-gray-150 dark:hover:bg-opacity-10 transition duration-300 mx-3 text-sm rounded-full w-9 h-9": {
+	}
+},
+	".s-search-modal-container": {
+	"@apply fixed inset-0 z-50 flex items-top justify-center overflow-auto items-top": {
+	}
+},
+	".s-search-modal-wrapper": {
+	"@apply bg-transparent w-full": {
+	}
+},
+	".s-search-modal-inner": {
+	"@apply mx-auto w-11/12 lg:w-6/12": {
+	}
+},
+	".s-search-modal-search-box-container": {
+	"@apply mt-36 search-box anime-item": {
+	}
+},
+	".s-search-modal-search-box-inner": {
+	"@apply relative bg-white rounded-tiny border border-border-color": {
+	}
+},
+	".s-search-modal-search-box-inner-open": {
+	"@apply relative bg-white rounded-tiny border border-border-color rounded-b-none": {
+	}
+},
+	".s-search-modal-input": {
+	"@apply anime-item bg-transparent border-0 form-input w-full ps-10 pt-6 pb-7 rounded-tiny text-gray-600": {
+	}
+},
+	".s-search-modal-search-icon": {
+	"@apply anime-item flex justify-end items-center absolute top-4 start-4 text-md text-gray-text": {
+	}
+},
+	".s-search-modal-spinner": {
+	"@apply spinner-loader-wrap absolute top-1/2 transform -translate-y-1/2 start-4 w-4 h-4": {
+	}
+},
+	".s-search-modal-spinner-loader": {
+	"@apply  block spinner-loader w-4 h-4 animate-spin border-2 border-gray-300 rounded-full": {
+	}
+},
+	".s-search-modal-search-results": {
+	"@apply m-auto max-h-96  overflow-y-auto bg-white rounded-b-tiny": {
+	}
+},
+	".s-search-modal-no-results": {
+	"@apply error p-4 text-sm text-gray-text": {
+	}
+},
+	".s-search-modal-product": {
+	"@apply h-full transition duration-500 bg-transparent justify-around overflow-hidden flex transition-colors duration-300 hover:bg-gray-bg2 px-4 xs:px-5 py-5 border-t-0": {
+	}
+},
+	".s-search-modal-product-image-container": {
+	"@apply relative overflow-hidden w-20 h-20 sm:w-28 sm:h-28 rounded-md": {
+	}
+},
+	".s-search-modal-product-image": {
+	"@apply h-full w-full object-cover": {
+	}
+},
+	".s-search-modal-product-details": {
+	"@apply flex-1 ps-4 xs:ps-5 pt-1": {
+	}
+},
+	".s-search-modal-product-title": {
+	"@apply flex flex-col justify-start items-baseline text-sm font-bold text-title-color leading-6 mb-2.5": {
+	}
+},
+	".s-search-modal-product-price": {
+	"@apply w-full flex justify-between items-center mb-5 text-primary font-bold text-sm": {
+	}
+}
+};
+
+const componentsClasses = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': utilities
+});
+
+let tailwind=require('tailwindcss/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(componentsClasses);
+  };
+});
+
+exports.SallaLogin = searchModal.SallaLogin;
+exports.SearchModal = searchModal.SearchModal;
+exports.tailwind = tailwind;

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a67728b4.js');
+const index = require('./index-9441fd8e.js');
 
 /*
  Stencil Client Patch Esm v2.8.1 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 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"]]],[0,"salla-search-modal",{"searchPlaceholder":[1,"search-placeholder"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]]], 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/dist/cjs/salla-login_2.cjs.entry.js

@@ -2,109 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a67728b4.js');
+const searchModal = require('./search-modal-722cccc3.js');
+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 ...';
-    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 (index.h("div", { key: item.id, class: "s-search-modal-results-item" }, 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" }, index.h("h3", { class: "s-search-modal-product-title-h3" }, item.title)), index.h("div", { class: "s-search-modal-product-price" }, index.h("h4", { class: "s-search-modal-product-price-h4" }, (_a = item.price) === null || _a === void 0 ? void 0 : _a.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" }, 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" }, 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", { 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' ? (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" }, "\u0644\u0627 \u064A\u0648\u062C\u062F \u0646\u062A\u0627\u0626\u062C")), this.results &&
-      this.results.map(item => {
-        return this.getProduct(item);
-      }))))))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-};
-SearchModal.style = searchModalCss;
-
-exports.salla_login = SallaLogin;
-exports.salla_search_modal = SearchModal;
+exports.salla_login = searchModal.SallaLogin;
+exports.salla_search_modal = searchModal.SearchModal;

package/dist/cjs/search-modal-722cccc3.js

@@ -0,0 +1,129 @@
+'use strict';
+
+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.SallaLogin = SallaLogin;
+exports.SearchModal = SearchModal;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a67728b4.js');
+const index = require('./index-9441fd8e.js');
 
 /*
  Stencil Client Patch Browser v2.8.1 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 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"]]],[0,"salla-search-modal",{"searchPlaceholder":[1,"search-placeholder"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]]], 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/dist/collection/components/search-modal/search-modal.css

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

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

@@ -1,4 +1,4 @@
-import { Component, h, Host, Prop, State } from '@stencil/core';
+import { Component, h, Host, Prop, State, Element } from '@stencil/core';
 export class SearchModal {
   constructor() {
     this.fetchStatus = '';
@@ -7,9 +7,12 @@ export class SearchModal {
      * 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;
-      console.log('this.value', this.searchTerm);
       this.fetchStatus = 'loading';
       this.showResult = false;
       this.results = [];
@@ -34,7 +37,6 @@ export class SearchModal {
       }
     };
     this.openSearch = () => {
-      console.log('openSearchModal');
       this.searchTerm = '';
       this.fetchStatus = '';
       this.results = [];
@@ -42,10 +44,8 @@ export class SearchModal {
       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 = [];
@@ -54,35 +54,51 @@ export class SearchModal {
       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;
-    return (h("div", { key: item.id, class: "s-search-modal-results-item" },
-      h("div", { class: "s-search-modal-product" },
+    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" },
-            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))))));
+          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" },
-        h("i", { class: "sicon-search font-bold" })),
+      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" },
+          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", { onClick: e => {
-                    e.stopPropagation();
-                  }, class: "s-search-modal-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: event => this.handleChange(event) }),
+              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" }, "\u0644\u0627 \u064A\u0648\u062C\u062F \u0646\u062A\u0627\u0626\u062C")),
+              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);
@@ -114,6 +130,24 @@ export class SearchModal {
       "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 {
@@ -123,4 +157,5 @@ export class SearchModal {
     "showResult": {},
     "showModal": {}
   }; }
+  static get elementRef() { return "hostElement"; }
 }

package/dist/collection/index.js

@@ -1 +1,3 @@
-export * from './components';
+export * from './components/salla-login/salla-login';
+export * from './components/search-modal/search-modal';
+export * from './plugins/tailwind-theme/index';

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

@@ -1,8 +1,6 @@
-const plugin = require('tailwindcss/plugin');
-const fs = require('fs');
-const path = require('path');
+import * as componentsClasses from './utilities.json';
 
-module.exports = plugin.withOptions(() => {
+let tailwind=require('tailwindcss/plugin').withOptions(() => {
   return function({addUtilities}) {
     addUtilities({
       // TODO :: find if there are used and defined them here if its.
@@ -10,11 +8,6 @@ module.exports = plugin.withOptions(() => {
       '.text-md': {},
       '.items-top': {},
       '.error': {},
-
-      // wrapper class
-      // todo :: rename it with the statnder
-      '.results__item': {},
-
       '.search-box': {},
       '.spinner-loader-wrap': {}
     });
@@ -30,6 +23,9 @@ module.exports = plugin.withOptions(() => {
       }
     });
 
-    addUtilities(JSON.parse(fs.readFileSync(path.resolve(__dirname, 'utilities.json'), 'UTF-8')));
+    addUtilities(componentsClasses);
   };
 });
+export {
+  tailwind
+};