@salla.sa/twilight-components 1.0.0

package/dist/cjs/index.cjs.js

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

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6ea83d19.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-alert_3.cjs",[[6,"salla-alert",{"color":[1],"autoClose":[4,"auto-close"],"closeSecs":[2,"close-secs"],"closeable":[4],"closeText":[1,"close-text"],"rounded":[4],"countDownTimerId":[32]}],[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]}]]],["salla-modal.cjs",[[6,"salla-modal",{"modalTitle":[1,"modal-title"],"cancelText":[1,"cancel-text"],"saveText":[1,"save-text"],"visible":[1540],"modalHeader":[516,"modal-header"]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/salla-alert_3.cjs.entry.js

@@ -0,0 +1,171 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6ea83d19.js');
+
+const alertCss = ".sc-salla-alert-h{-webkit-font-smoothing:antialiased;padding:var(--padding-top, 8px) var(--padding-right, 16px) var(--padding-bottom, 8px) var(--padding-left, 16px);min-height:var(--height, 24px);color:var(--color, #fff);background-color:var(--background-color, #327bb7);border-color:transparent;font-family:var(--font-family, \"Helvetica Neue\", Helvetica, Arial, sans-serif);font-size:var(--font-size, 13px);font-weight:var(--font-weight, normal);line-height:1;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}.sc-salla-alert-h .alert__content.sc-salla-alert{display:block;height:100%;width:100%}.sc-salla-alert-h .alert__close-text.sc-salla-alert{cursor:pointer;opacity:0.7;position:absolute;top:14px;right:16px;font-size:0.8em}.sc-salla-alert-h .alert__close-text.sc-salla-alert:hover{opacity:0.85}.primary.sc-salla-alert-h{color:white;background-color:#5cd5c4}.secondary.sc-salla-alert-h{color:white;background-color:#ff7d09}.success.sc-salla-alert-h{color:white;background-color:#00c092}.warning.sc-salla-alert-h{color:white;background-color:#e8d700}.error.sc-salla-alert-h{color:white;background-color:#d0021b}.light.sc-salla-alert-h{color:black;background-color:#e5e5e5}.info.sc-salla-alert-h{color:black;background-color:#53ff5c}.dark.sc-salla-alert-h{color:white;background-color:#5d5d5d}.white.sc-salla-alert-h{color:black;background-color:white}.black.sc-salla-alert-h{color:white;background-color:black}.rounded.sc-salla-alert-h{border-radius:var(--border-radius, 4px)}";
+
+const Alert = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.closed = index.createEvent(this, "closed", 7);
+    /**
+     * If `true` alert will close automatically.
+     */
+    this.autoClose = true;
+    /**
+     * Number of seconds to close alert automatically if autoClose `true`.
+     */
+    this.closeSecs = 3;
+    /**
+     * If closable or not.
+     */
+    this.closeable = true;
+    /**
+     * Customized close button text.
+     */
+    this.closeText = '\u2573';
+    /**
+     * If `true`, make the alert rounded.
+     */
+    this.rounded = false;
+    this.countDownTimerId = null;
+    this.close = () => {
+      this.closed.emit(true);
+      this.el.remove();
+    };
+    this.renderCloseText = () => {
+      if (this.closeable) {
+        return (index.h("span", { class: "alert__close-text", onClick: this.close }, this.closeText));
+      }
+      return null;
+    };
+  }
+  componentWillLoad() {
+    if (this.el.attributes['auto-close']) {
+      this.countDownTimerId = window.setTimeout(() => {
+        this.close();
+      }, this.closeSecs * 1000);
+    }
+  }
+  disconnectedCallback() {
+    if (this.autoClose) {
+      window.clearInterval(this.countDownTimerId);
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        [this.color]: true,
+        rounded: this.rounded,
+      } }, index.h("div", { class: "alert__content" }, index.h("slot", null)), this.renderCloseText()));
+  }
+  get el() { return index.getElement(this); }
+};
+Alert.style = alertCss;
+
+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_alert = Alert;
+exports.salla_login = SallaLogin;
+exports.salla_search_modal = SearchModal;

package/dist/cjs/salla-modal.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6ea83d19.js');
+
+const modalCss = ".wrapper.sc-salla-modal{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.sc-salla-modal .modal.sc-salla-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.sc-salla-modal .modal.sc-salla-modal{max-width:500px}}.wrapper.sc-salla-modal .modal.sc-salla-modal .modal-header.sc-salla-modal{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.sc-salla-modal .modal.sc-salla-modal .modal-header.sc-salla-modal h5.sc-salla-modal{margin:0;font-weight:normal}.wrapper.sc-salla-modal .modal.sc-salla-modal .modal-header.sc-salla-modal .title.sc-salla-modal{font-size:1.25rem}.wrapper.sc-salla-modal .modal.sc-salla-modal .modal-header.sc-salla-modal button.close.sc-salla-modal{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.sc-salla-modal .modal.sc-salla-modal .modal-header.sc-salla-modal button.close.sc-salla-modal .sc-salla-modal:hover{color:black;cursor:pointer}.wrapper.sc-salla-modal .modal.sc-salla-modal .displayed.sc-salla-modal{display:flex}.wrapper.sc-salla-modal .modal.sc-salla-modal .modal-body.sc-salla-modal{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem}.wrapper.sc-salla-modal .modal.sc-salla-modal .modal-footer.sc-salla-modal{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.sc-salla-modal .modal.sc-salla-modal .modal-footer.sc-salla-modal .btn-primary.sc-salla-modal{color:#fff;background-color:#007bff;border-color:#007bff;outline:none}.wrapper.sc-salla-modal .modal.sc-salla-modal .modal-footer.sc-salla-modal .btn-primary.sc-salla-modal:hover{background-color:#0069d9;border-color:#0062cc;cursor:pointer}.wrapper.sc-salla-modal .modal.sc-salla-modal .modal-footer.sc-salla-modal .btn-secondary.sc-salla-modal{color:#fff;background-color:#6c757d;border-color:#6c757d;outline:none}.wrapper.sc-salla-modal .modal.sc-salla-modal .modal-footer.sc-salla-modal .btn-secondary.sc-salla-modal:hover{background-color:#5a6269;border-color:#5a6269;cursor:pointer}.wrapper.sc-salla-modal .modal.sc-salla-modal .modal-footer.sc-salla-modal>.sc-salla-modal:not(:last-child){margin-right:0.25rem}.wrapper.sc-salla-modal .modal.sc-salla-modal .button-container.sc-salla-modal{text-align:right}.wrapper.sc-salla-modal .modal.sc-salla-modal button.sc-salla-modal{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.sc-salla-modal .modal.sc-salla-modal button.sc-salla-modal:hover{background-color:#6c757d;border-color:#6c757d}.visible.sc-salla-modal{opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s}";
+
+const Modal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ok = index.createEvent(this, "ok", 7);
+    this.cancel = index.createEvent(this, "cancel", 7);
+    /**
+     * 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 (index.h("div", { class: this.visible ? 'wrapper visible' : 'wrapper' }, index.h("div", { class: "modal" }, index.h("div", { class: this.modalHeader ? 'modal-header displayed' : 'modal-header' }, index.h("h5", { class: "title" }, this.modalTitle), 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("slot", null)), index.h("div", { class: "modal-footer" }, index.h("button", { type: "button", class: "btn-secondary", onClick: this.handleCancelClick }, this.cancelText), index.h("button", { type: "button", class: "btn-primary", onClick: this.handleOkClick }, this.saveText)))));
+  }
+};
+Modal.style = modalCss;
+
+exports.salla_modal = Modal;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-6ea83d19.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-alert_3.cjs",[[6,"salla-alert",{"color":[1],"autoClose":[4,"auto-close"],"closeSecs":[2,"close-secs"],"closeable":[4],"closeText":[1,"close-text"],"rounded":[4],"countDownTimerId":[32]}],[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]}]]],["salla-modal.cjs",[[6,"salla-modal",{"modalTitle":[1,"modal-title"],"cancelText":[1,"cancel-text"],"saveText":[1,"save-text"],"visible":[1540],"modalHeader":[516,"modal-header"]}]]]], options);
+});

package/dist/collection/collection-manifest.json

@@ -0,0 +1,15 @@
+{
+  "entries": [
+    "./components/alert/alert.js",
+    "./components/modal/modal.js",
+    "./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/dist/collection/components/alert/alert.css

@@ -0,0 +1,112 @@
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+:host {
+  /**
+     * @prop --background-color: Background color of the alert
+     * @prop --color: Text color of the alert
+     *
+     * @prop --padding-top: Padding top of the alert
+     * @prop --padding-right: Padding right of the alert
+     * @prop --padding-bottom: Padding bottom of the alert
+     * @prop --padding-left: Padding left of the alert
+     *
+     * @prop --font-family: Font family of the alert text
+     * @prop --font-size: Font size of the alert text 
+     * @prop --font-weight: Font weight of the alert text
+     */
+  -webkit-font-smoothing: antialiased;
+  padding: var(--padding-top, 8px) var(--padding-right, 16px) var(--padding-bottom, 8px) var(--padding-left, 16px);
+  min-height: var(--height, 24px);
+  color: var(--color, #fff);
+  background-color: var(--background-color, #327bb7);
+  border-color: transparent;
+  font-family: var(--font-family, "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-size: var(--font-size, 13px);
+  font-weight: var(--font-weight, normal);
+  line-height: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+:host .alert__content {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+:host .alert__close-text {
+  cursor: pointer;
+  opacity: 0.7;
+  position: absolute;
+  top: 14px;
+  right: 16px;
+  font-size: 0.8em;
+}
+:host .alert__close-text:hover {
+  opacity: 0.85;
+}
+
+:host(.primary) {
+  color: white;
+  background-color: #5cd5c4;
+}
+
+:host(.secondary) {
+  color: white;
+  background-color: #ff7d09;
+}
+
+:host(.success) {
+  color: white;
+  background-color: #00c092;
+}
+
+:host(.warning) {
+  color: white;
+  background-color: #e8d700;
+}
+
+:host(.error) {
+  color: white;
+  background-color: #d0021b;
+}
+
+:host(.light) {
+  color: black;
+  background-color: #e5e5e5;
+}
+
+:host(.info) {
+  color: black;
+  background-color: #53ff5c;
+}
+
+:host(.dark) {
+  color: white;
+  background-color: #5d5d5d;
+}
+
+:host(.white) {
+  color: black;
+  background-color: white;
+}
+
+:host(.black) {
+  color: white;
+  background-color: black;
+}
+
+:host(.rounded) {
+  /**
+     * @prop --border-radius: Border radius of the badge if is rounded
+     */
+  border-radius: var(--border-radius, 4px);
+}

package/dist/collection/components/alert/alert.js

@@ -0,0 +1,194 @@
+import { Component, Host, Prop, State, Event, Element, h } from '@stencil/core';
+export class Alert {
+  constructor() {
+    /**
+     * If `true` alert will close automatically.
+     */
+    this.autoClose = true;
+    /**
+     * Number of seconds to close alert automatically if autoClose `true`.
+     */
+    this.closeSecs = 3;
+    /**
+     * If closable or not.
+     */
+    this.closeable = true;
+    /**
+     * Customized close button text.
+     */
+    this.closeText = '\u2573';
+    /**
+     * If `true`, make the alert rounded.
+     */
+    this.rounded = false;
+    this.countDownTimerId = null;
+    this.close = () => {
+      this.closed.emit(true);
+      this.el.remove();
+    };
+    this.renderCloseText = () => {
+      if (this.closeable) {
+        return (h("span", { class: "alert__close-text", onClick: this.close }, this.closeText));
+      }
+      return null;
+    };
+  }
+  componentWillLoad() {
+    if (this.el.attributes['auto-close']) {
+      this.countDownTimerId = window.setTimeout(() => {
+        this.close();
+      }, this.closeSecs * 1000);
+    }
+  }
+  disconnectedCallback() {
+    if (this.autoClose) {
+      window.clearInterval(this.countDownTimerId);
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        [this.color]: true,
+        rounded: this.rounded,
+      } },
+      h("div", { class: "alert__content" },
+        h("slot", null)),
+      this.renderCloseText()));
+  }
+  static get is() { return "salla-alert"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["alert.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["alert.css"]
+  }; }
+  static get properties() { return {
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The color options are: `\"primary\"`, `\"secondary\"`, `\"success\"`, `\"warning\"`, `\"error\"`, `\"light\"`, `\"info\"`, `\"white\"`, `\"black\"`, and `\"dark\"`."
+      },
+      "attribute": "color",
+      "reflect": false
+    },
+    "autoClose": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If `true` alert will close automatically."
+      },
+      "attribute": "auto-close",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "closeSecs": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Number of seconds to close alert automatically if autoClose `true`."
+      },
+      "attribute": "close-secs",
+      "reflect": false,
+      "defaultValue": "3"
+    },
+    "closeable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If closable or not."
+      },
+      "attribute": "closeable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "closeText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Customized close button text."
+      },
+      "attribute": "close-text",
+      "reflect": false,
+      "defaultValue": "'\\u2573'"
+    },
+    "rounded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If `true`, make the alert rounded."
+      },
+      "attribute": "rounded",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "countDownTimerId": {}
+  }; }
+  static get events() { return [{
+      "method": "closed",
+      "name": "closed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the alert is closed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

package/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!');
+  });
+});