@salla.sa/twilight-components 1.0.5 → 1.0.6

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

@@ -0,0 +1,154 @@
+import { Component, h, Host, Prop, State, Element } from '@stencil/core';
+export class SallaSearch {
+  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"; }
+  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/dist/collection/index.js

@@ -0,0 +1,2 @@
+export * from './components/login/salla-login';
+export * from './components/search/salla-search';

package/dist/collection/interfaces/index.js

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

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

@@ -0,0 +1,53 @@
+var fs = require('fs');
+var path = require('path');
+var _ = require('lodash');
+var components = {};
+let componentsPath=path.resolve(__dirname,'../../components');
+fs.readdirSync(componentsPath, {withFileTypes: true})
+  .filter(parent => parent.isDirectory())
+  .forEach(directory => {
+  try {
+    components[directory.name] = require(path.resolve(componentsPath  , directory.name, 'utilities.json'));
+  } catch (e) {
+    // ignore
+  }
+});
+var utilities = {};
+
+for (const [keyComponent, value] of Object.entries(components)) {
+  console.log('> Processing ' + keyComponent + ' ...');
+  _.forEach(value, function(value, keyUtility) {
+    keyUtility = '.s-' + keyComponent + '-' + keyUtility;
+    utilities[keyUtility] = {[`@apply ${value}`]: {}};
+  });
+  console.log('✓ Processed ' + keyComponent + '');
+}
+
+// write the utilities for the plugin
+console.log('> Write utilities ...');
+fs.writeFileSync(
+  path.resolve(__dirname, 'utilities.json'),
+  JSON.stringify(utilities),
+  function(err) {
+    if (err) {
+      return console.log(err);
+    }
+    console.log('The file was saved!');
+  }
+);
+
+
+// write the save list css
+console.log('> Write safe-list-css ...');
+fs.writeFileSync(
+  path.resolve(__dirname, 'safe-list-css.txt'),
+  Object.keys(utilities).map((name) => name.replace('.','')).join('\n'),
+  function(err) {
+    if (err) {
+      return console.log(err);
+    }
+    console.log('The file was saved!');
+  }
+);
+
+console.log('✓ Done ...');

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

@@ -0,0 +1,26 @@
+module.exports = 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(require('./utilities.json'));
+  };
+});

package/dist/esm/Helper-23b2de40.js

@@ -0,0 +1,18 @@
+class Helper extends salla.AppHelpers {
+  setHost(host) {
+    this.host = host;
+  }
+  getElement(selector) {
+    return this.host.querySelector(selector);
+  }
+  getAttribute(selector, attribute) {
+    var _a;
+    return (_a = this.getElement(selector)) === null || _a === void 0 ? void 0 : _a.getAttribute(attribute);
+  }
+  val(selector) {
+    return this.getAttribute(selector, 'value');
+  }
+}
+const Helper$1 = new Helper;
+
+export { Helper$1 as H };