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

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

@@ -0,0 +1,64 @@
+import { Host, h } from '@stencil/core';
+export class DsCard {
+  constructor() {
+    this.cardStatus = undefined;
+  }
+  componentWillLoad() {
+    this.hasHeaderSlot = !!this.hostElement.querySelector('[slot="header"]');
+    this.hasImageSlot = !!this.hostElement.querySelector('[slot="image"]');
+    this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
+  }
+  componentDidLoad() {
+  }
+  componentDidRender() {
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("article", { part: "base", class: Object.assign({ 'card': true }, classMap) }, this.cardStatus && h("span", { part: 'status', class: `card__status-border ${this.cardStatus}` }), this.hasImageSlot &&
+      h("figure", { part: 'image', class: 'card__image' }, h("slot", { name: 'image' })), this.hasHeaderSlot &&
+      h("header", { part: 'header', class: 'card__header' }, h("slot", { name: 'header' })), h("div", { part: "body", class: "card__body" }, h("slot", null)), this.hasFooterSlot &&
+      h("footer", { part: 'footer', class: 'card__footer' }, h("slot", { name: 'footer' })))));
+  }
+  getCssClassMap() {
+    return {
+      [`card--status-${this.cardStatus}`]: !!this.cardStatus,
+      [`card--header`]: this.hasHeaderSlot,
+      [`card--image`]: this.hasImageSlot,
+      [`card--footer`]: this.hasFooterSlot,
+    };
+  }
+  static get is() { return "ds-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardStatus": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-status",
+        "reflect": true
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/ds-file-picker/ds-file-picker.css

@@ -0,0 +1,79 @@
+.file-uploader {
+  --uploader-height: 120px;
+  --uploader-width: 100%;
+  --uploader-bg: var(--off-white);
+  --uploader-border: 1px dashed var(--dark-gray);
+  --uploader-radius: var(--box-radius);
+  --uploader-padding: 1rem;
+  height: var(--uploader-height);
+  background-color: var(--uploader-bg);
+  border: var(--uploader-border);
+  border-radius: var(--uploader-radius);
+  padding: var(--uploader-padding);
+  text-align: center;
+  cursor: pointer;
+}
+.file-uploader--input {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 0.75rem;
+}
+
+.insideTableStyle {
+  width: 272px;
+}
+
+.files-list {
+  --file-item-width: 300px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, var(--file-item-width));
+  grid-gap: 0.5rem;
+}
+@media (max-width: 768px) {
+  .files-list {
+    grid-template-columns: repeat(auto-fill, minmax(var(--file-item-width), 1fr));
+  }
+}
+.files-list .file-item-container .file-item {
+  --file-bg: var(--off-white);
+  --file-radius: var(--box-radius);
+  --icon-color: var(--purple);
+  --icon-size: 2rem;
+  --file-border: transparent;
+  display: flex;
+  align-items: center;
+  background-color: var(--file-bg);
+  border: 1px solid var(--file-border);
+  border-radius: var(--file-radius);
+  padding: 0 1rem;
+  height: 70px;
+  gap: 0.75rem;
+}
+.files-list .file-item-container .file-item.error {
+  --file-bg: rgba(var(--rgb-red), 10%);
+  --file-border: var(--red);
+  --icon-color: var(--red);
+}
+.files-list .file-item-container .file-item .icon {
+  color: var(--icon-color);
+  font-size: var(--icon-size);
+}
+.files-list .file-item-container .file-item .file-action {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.file-item .name-size {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 120px;
+}

package/dist/collection/components/ds-file-picker/ds-file-picker.js

@@ -0,0 +1,67 @@
+import { Host, h } from "@stencil/core";
+export class DsFilePicker {
+  constructor() {
+    this.dropLabel = "Drag and drop file here";
+    this.buttonLabel = "Browse";
+  }
+  componentWillLoad() {
+    this.hasIconSlot = !!this.hostElement.querySelector('[slot="icon"]');
+  }
+  render() {
+    return (h(Host, null, h("section", { class: "file-uploader mb-2" }, h("div", { class: "file-uploader--input" }, h("div", { class: "icon" }, this.hasIconSlot ?
+      h("slot", { name: "icon" }) :
+      h("svg", { width: "41", height: "38", viewBox: "0 0 41 38", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z", fill: "#DEE0E2" }), h("path", { d: "M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z", fill: "#8E9AA0" }), h("path", { d: "M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z", fill: "#F9F9F9" }))), h("div", { class: "d-flex align-items-center gap-2 justify-content-center fs-12 fc-black fw-normal mt-2" }, h("span", { class: "fc-black fw-normal text-placeholder" }, " ", this.dropLabel, " "), h("span", { class: "fs-12 fw-normal py-2 px-3 bc-light-gray fc-coral" }, " ", this.buttonLabel, " "))), h("slot", null))));
+  }
+  static get is() { return "ds-file-picker"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-file-picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-file-picker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dropLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "drop-label",
+        "reflect": false,
+        "defaultValue": "\"Drag and drop file here\""
+      },
+      "buttonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-label",
+        "reflect": false,
+        "defaultValue": "\"Browse\""
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,55 @@
+import { h, Host } from '@stencil/core';
+// import svgIcon from '../../assets/fonts/symbol-defs.svg';
+// import {JSXBase} from "@stencil/core/internal";
+export class DsIcon {
+  constructor() {
+    this.icon = undefined;
+  }
+  render() {
+    // type SVG2Attributes = JSXBase.SVGAttributes & { href: string };
+    //
+    // // @ts-ignore
+    // const link = <use href={`${svgIcon}#sfi-${this.icon}`} /> as SVG2Attributes;
+    return (
+    // <Host class="ds-icon-host">
+    //   <svg part="base" class="ds-icon">
+    //     {/*{link}*/}
+    //     <use xlinkHref={`${svgIcon}#sfi-${this.icon}`}></use>
+    //   </svg>
+    // </Host>
+    h(Host, { class: "ds-icon-host" }, h("span", { class: `sfi sfi-${this.icon}` })));
+  }
+  static get is() { return "ds-icon"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stc-icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stc-icon.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      }
+    };
+  }
+}