@basic-ui-components-stc/basic-ui-components 1.0.0

package/dist/collection/components/ds-loading-chart/ds-loading-chart.css

@@ -0,0 +1,80 @@
+:host {
+  display: block;
+}
+
+.loading-chart {
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.loading-chart--pie .loading-bg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 15vw;
+  height: 15vw;
+  min-width: 100px;
+  max-width: 200px;
+  min-height: 100px;
+  max-height: 200px;
+  position: relative;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: auto;
+}
+.loading-chart--pie .loading-bg:before {
+  content: "";
+  width: 70%;
+  height: 70%;
+  position: absolute;
+  background-color: white;
+  border-radius: 50%;
+}
+.loading-chart--semi-pie .loading-bg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 15vw;
+  height: 15vw;
+  min-width: 100px;
+  max-width: 200px;
+  min-height: 100px;
+  max-height: 200px;
+  position: relative;
+  border-radius: 50% 50% 0 0;
+  overflow: hidden;
+  margin: auto;
+}
+.loading-chart--semi-pie .loading-bg:before {
+  content: "";
+  width: 70%;
+  height: 70%;
+  position: absolute;
+  background-color: white;
+  border-radius: 50% 50% 0 0;
+}
+.loading-chart--semi-pie .loading-bg::after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: white;
+  border-radius: 0;
+  bottom: -50%;
+}
+.loading-chart--column {
+  --column-border: 2px solid var(--gray);
+  border-inline-start: var(--column-border);
+  border-block-end: var(--column-border);
+  display: flex;
+  align-items: flex-end;
+  gap: 30px;
+  padding-inline-start: 30px;
+  overflow: hidden;
+}
+.loading-chart--column .loading-bg {
+  min-width: 20px;
+  width: 20px;
+  height: auto;
+}

package/dist/collection/components/ds-loading-chart/ds-loading-chart.js

@@ -0,0 +1,70 @@
+import { Host, h } from "@stencil/core";
+export class DsLoadingChart {
+  constructor() {
+    this.type = undefined;
+    this.hostHeight = 30;
+  }
+  componentDidLoad() {
+    this.hostHeight = this.hostElement.offsetHeight; // Replace the max with hostHeight once correctly calculated.
+  }
+  drawChart() {
+    const hostWidth = this.hostElement.offsetWidth;
+    // const hostHeight = this.hostElement.offsetHeight;
+    // console.log(hostHeight);
+    const randomHeight = () => {
+      return Math.floor(Math.random() * (this.hostHeight - 30 + 1) + 30) + 'px';
+    };
+    if (!this.type) {
+      return h("div", { class: "loading-bg" });
+    }
+    else if (this.type === "column") {
+      return Array.apply(null, { length: (hostWidth / 50).toFixed(0) }).map(() => {
+        return h("div", { class: "loading-bg", style: { minHeight: randomHeight() } });
+      });
+    }
+    else if (this.type === 'pie' || this.type === 'semi-pie') {
+      return h("div", { class: 'loading-bg' });
+    }
+  }
+  render() {
+    return (h(Host, null, h("section", { class: `loading-chart loading-chart--${this.type}` }, this.drawChart()), h("slot", null)));
+  }
+  static get is() { return "ds-loading-chart"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-loading-chart.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-loading-chart.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"column\" | \"pie\" | \"semi-pie\"",
+          "resolved": "\"column\" | \"pie\" | \"semi-pie\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hostHeight": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/ds-loading-page/ds-loading-page.css

@@ -0,0 +1,116 @@
+.spinner-container {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1000000000000000000000000;
+  background: #4F008C;
+}
+
+.spinner {
+  display: block;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  animation: rotate-all 1.3s linear infinite;
+}
+
+.right-side,
+.left-side {
+  width: 50%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  overflow: hidden;
+}
+
+.left-side {
+  left: 0;
+}
+
+.right-side {
+  right: 0;
+}
+
+.bar {
+  width: 100%;
+  height: 100%;
+  border-radius: 200px 0 0 200px;
+  border: 10px solid #fff;
+  position: relative;
+}
+
+.bar:after {
+  content: "";
+  width: 10px;
+  height: 10px;
+  display: block;
+  background: #fff;
+  position: absolute;
+}
+
+.right-side .bar {
+  border-radius: 0 200px 200px 0;
+  border-left: none;
+  border-color: #fff;
+  transform: rotate(-10deg);
+  transform-origin: left center;
+  display: none;
+  animation: rotate-right 0.75s linear infinite alternate;
+}
+
+.right-side .bar:after {
+  bottom: -10px;
+  left: -5px;
+  height: 10px;
+}
+
+.left-side .bar {
+  border-right: none;
+  transform: rotate(0deg);
+  transform-origin: right center;
+  animation: rotate-left 0.75s linear infinite alternate;
+}
+
+.left-side .bar:after {
+  bottom: -10px;
+  right: -5px;
+  height: 11px;
+  background: #FF375E;
+}
+
+@keyframes rotate-left {
+  to {
+    transform: rotate(30deg);
+  }
+  from {
+    transform: rotate(175deg);
+  }
+}
+@keyframes rotate-right {
+  from {
+    transform: rotate(-175deg);
+  }
+  to {
+    transform: rotate(-30deg);
+  }
+}
+@keyframes rotate-all {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}

package/dist/collection/components/ds-loading-page/ds-loading-page.js

@@ -0,0 +1,18 @@
+import { Host, h } from '@stencil/core';
+export class DsLoadingPage {
+  render() {
+    return (h(Host, null, h("div", { part: "host", class: "spinner-container" }, h("div", { part: "spinner", class: "spinner" }, h("div", { part: "right-side", class: "right-side" }, h("div", { part: "bar", class: "bar" })), h("div", { part: "left-side", class: "left-side" }, h("div", { part: "bar", class: "bar" }))))));
+  }
+  static get is() { return "ds-loading-page"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-loading-page.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-loading-page.css"]
+    };
+  }
+}

package/dist/collection/components/ds-loading-table/ds-loading-table.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/ds-loading-table/ds-loading-table.js

@@ -0,0 +1,90 @@
+import { Host, h } from '@stencil/core';
+export class DsLoadingTable {
+  constructor() {
+    this.cols = 4;
+    this.rows = 4;
+    this.classes = '';
+  }
+  drawTr() {
+    return Array.apply(null, { length: this.rows }).map(() => {
+      return h("tr", null, this.drawTd());
+    });
+  }
+  drawTd() {
+    return Array.apply(null, { length: this.cols }).map(() => {
+      return h("td", null, h("div", { class: "loading-bg" }));
+    });
+  }
+  render() {
+    return (h(Host, null, h("section", { class: `table-responsive ${this.classes}` }, h("table", null, h("tbody", null, this.drawTr()))), h("slot", null)));
+  }
+  static get is() { return "ds-loading-table"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-loading-table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-loading-table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cols": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "cols",
+        "reflect": false,
+        "defaultValue": "4"
+      },
+      "rows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "rows",
+        "reflect": false,
+        "defaultValue": "4"
+      },
+      "classes": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "classes",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+}

package/dist/collection/components/ds-message/ds-message.css

@@ -0,0 +1,28 @@
+.card-message {
+  --message-fc: var(--black);
+  --message-fs: 1rem;
+  --message-fw: var(--font-medium);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  min-height: var(--message-height, 300px);
+  background-color: var(--message-bg, transparent);
+  border: var(--message-border, 1px solid transparent);
+}
+.card-message figure {
+  margin: var(--message-figure-margin, 0);
+  padding: var(--message-figure-padding, 0);
+  height: var(--message-figure-height, auto);
+  min-height: var(--message-figure-min-height, 100px);
+}
+.card-message figure img {
+  max-width: 100%;
+}
+.card-message h1 {
+  color: var(--message-fc, black);
+  font-size: var(--message-fs, 1rem);
+  font-weight: var(--message-fw, 500);
+  margin: var(--message-margin, 1rem 0 0 0);
+}

package/dist/collection/components/ds-message/ds-message.js

@@ -0,0 +1,95 @@
+import { Host, h } from '@stencil/core';
+import noData from "../../assets/images/no-data.svg";
+import noCards from "../../assets/images/no-cards.svg";
+import noLists from "../../assets/images/no-lists.svg";
+import notAuthorized from "../../assets/images/not-authorized.svg";
+import noConnection from "../../assets/images/no-connection.svg";
+export class DsMessage {
+  constructor() {
+    this.image = undefined;
+    this.label = undefined;
+    this.type = 'general';
+  }
+  componentWillRender() {
+    switch (this.type) {
+      case 'emptyCard': return this.emptyImage = noCards;
+      case 'emptyList': return this.emptyImage = noLists;
+      case 'notAuthorized': return this.emptyImage = notAuthorized;
+      case 'noConnection': return this.emptyImage = noConnection;
+      default: return this.emptyImage = noData;
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { part: "base", class: 'card-message' }, h("figure", { part: "image" }, h("img", { src: this.image ? this.image : this.emptyImage, alt: this.label, onError: () => this.image = this.emptyImage })), this.label &&
+      h("h1", { part: 'message' }, this.label), h("div", { part: "body" }, h("slot", null)))));
+  }
+  static get is() { return "ds-message"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-message.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-message.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "image": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image",
+        "reflect": true
+      },
+      "label": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "type": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'emptyCard' | 'emptyList' | 'notAuthorized' | 'noConnection' | 'general'",
+          "resolved": "\"emptyCard\" | \"emptyList\" | \"general\" | \"noConnection\" | \"notAuthorized\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'general'"
+      }
+    };
+  }
+}

package/dist/collection/components/ds-sla/ds-sla.css

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+}
+:host svg circle {
+  transition: stroke-dashoffset 1.5s linear;
+}