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

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

@@ -0,0 +1,34 @@
+:host {
+  display: block;
+}
+:host .alert {
+  --alert-bc: transparent;
+  --alert-border-c: transparent;
+  --alert-border-w: 1px;
+  --alert-border-style: solid;
+  --alert-radius: 4px;
+  --alert-padding: .3rem;
+  --alert-fs: 0.75rem;
+  --alert-fw: var(--font-regular);
+  --alert-fc: var(--black);
+  --alert-icon-fs: 1.5rem;
+  --alert-icon-color: var(--black);
+  display: flex;
+  align-items: var(--alert-align, center);
+  gap: var(--alert-padding);
+  border-width: var(--alert-border-w);
+  border-style: var(--alert-border-style);
+  border-color: var(--alert-border-c);
+  border-radius: var(--alert-radius);
+  background-color: var(--alert-bc);
+  padding: var(--alert-padding);
+}
+:host .alert__icon {
+  font-size: var(--alert-icon-fs);
+  color: var(--alert-icon-color);
+}
+:host .alert__body {
+  font-size: var(--alert-fs);
+  color: var(--alert-fc);
+  font-weight: var(--alert-fw);
+}

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

@@ -0,0 +1,61 @@
+import { Host, h } from '@stencil/core';
+export class DsAlert {
+  constructor() {
+    this.icon = undefined;
+    this.type = 'warning';
+  }
+  render() {
+    return (h(Host, null, h("section", { part: "base", class: "alert" }, this.icon && h("ds-icon", { part: "icon", class: "alert__icon", icon: this.icon }), h("div", { part: "body", class: "alert__body" }, h("slot", null)))));
+  }
+  static get is() { return "ds-alert"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-alert.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-alert.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": true
+      },
+      "type": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'success' | 'info' | 'warning' | 'danger'",
+          "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'warning'"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,60 @@
+:host {
+  display: block;
+}
+
+.approval-list {
+  padding: var(--approval-padding, 0);
+  margin: var(--approval-margin, 0);
+  background: var(--approval-bg, 0);
+  position: relative;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--approval-list-gap, 2rem);
+  overflow: hidden;
+  --approval-icon-size: 22px;
+}
+.approval-list .line {
+  --line-bg: var(--gray);
+  min-width: var(--line-width, 1px);
+  width: 1px;
+  height: var(--line-height, 100%);
+  background-color: var(--line-bg, gray);
+  position: absolute;
+  margin: calc(var(--approval-icon-size) / 2);
+  z-index: -1;
+}
+.approval-list .approval-item {
+  display: flex;
+  align-items: var(--approval-item-align, flex-start);
+  gap: var(--approval-item-gap, 1rem);
+  --approval-icon-bg: var(--gray);
+}
+.approval-list .approval-item .status-icon {
+  --status-icon: "";
+  min-width: var(--approval-icon-size);
+  width: var(--approval-icon-size);
+  height: var(--approval-icon-size);
+  background-color: var(--approval-icon-bg, gray);
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px;
+  box-sizing: border-box;
+}
+.approval-list .approval-item .status-icon:before {
+  content: var(--status-icon);
+  width: 100%;
+  height: 100%;
+}
+.approval-list .approval-item .details {
+  display: flex;
+  align-items: center;
+}
+.approval-list .approval-item .details .user-details {
+  --user-details-gap: 0.3rem;
+}
+.approval-list .approval-item .details .user-details ds-status {
+  margin-top: var(--status-mt, 0.2rem);
+}

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

@@ -0,0 +1,71 @@
+import { Host, h } from '@stencil/core';
+export class DsApprovals {
+  constructor() {
+    this.approvalsData = undefined;
+  }
+  approvalsDataWatcher(newValue) {
+    if (typeof newValue === 'string') {
+      this._approvalsData = JSON.parse(newValue);
+    }
+    else {
+      this._approvalsData = newValue;
+    }
+  }
+  componentWillLoad() {
+    this.approvalsDataWatcher(this.approvalsData);
+  }
+  drawApprovals() {
+    return this._approvalsData.map(approveItem => {
+      let userInfo = { name: approveItem.name, title: approveItem.title, image: approveItem.image };
+      return (h("li", { part: approveItem.status, class: `approval-item ${approveItem.status}` }, h("span", { part: `icon_${approveItem.status}`, class: "status-icon" }), h("div", { part: "details", class: "details" }, h("ds-user-card", { class: "user-details", exportparts: "base: user-card_base", imageSize: "small", "user-info": JSON.stringify(userInfo) }, approveItem.status &&
+        h("ds-status", { exportparts: `base: status_${approveItem.status}`, status: approveItem.status, class: "status" }, approveItem.statusLabel)))));
+    });
+  }
+  render() {
+    return (h(Host, null, h("ul", { part: "base", class: "approval-list" }, h("div", { class: "line", part: "line" }), this.drawApprovals())));
+  }
+  static get is() { return "ds-approvals"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-approvals.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-approvals.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "approvalsData": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Approvals[] | string",
+          "resolved": "Approvals[] | string",
+          "references": {
+            "Approvals": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "approvals-data",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "approvalsData",
+        "methodName": "approvalsDataWatcher"
+      }];
+  }
+}

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

@@ -0,0 +1,84 @@
+:host {
+  display: block;
+}
+:host .file-item {
+  --file-bg: var(--off-white);
+  --file-radius: var(--box-radius);
+  --icon-color: var(--purple);
+  --icon-size: 2rem;
+  --name-fs: 0.875rem;
+  --name-fw: 500;
+  --name-fc: var(--black);
+  --size-fs: 0.75rem;
+  --size-fw: 400;
+  --size-fc: var(--dark-gray);
+  --action-btn-color: var(--white);
+  --file-border-color: transparent;
+  display: flex;
+  align-items: center;
+  background-color: var(--file-bg);
+  border: 1px solid var(--file-border-color);
+  border-radius: var(--file-radius);
+  padding: var(--file-padding, 0 0.5rem);
+  height: var(--file-height, 45px);
+  max-width: var(--file-width, 200px);
+  width: 100%;
+  gap: 0.5rem;
+}
+:host .file-item .icon {
+  color: var(--icon-color);
+  font-size: var(--icon-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+:host .file-item .name-size {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1;
+}
+:host .file-item .name-size .file-name {
+  font-size: var(--name-fs);
+  font-weight: var(--name-fw);
+  color: var(--name-fc);
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.4;
+  unicode-bidi: plaintext;
+}
+:host .file-item .name-size .file-size {
+  font-size: var(--size-fs);
+  font-weight: var(--size-fw);
+  color: var(--size-fc);
+}
+:host .file-item .file-action {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+:host .file-item .file-action ds-button::part(base) {
+  --btn-bg-color: var(--action-btn-color);
+  --btn-border-color: var(--off-white);
+}
+:host .file-item .file-action .download {
+  --icon-color: var(--purple);
+}
+:host .file-item .file-action .delete {
+  --icon-color: var(--red);
+}
+:host .file-item.error {
+  --file-bg: rgba(var(--rgb-red), 10%);
+  --file-border-color: var(--red);
+  --icon-color: var(--red);
+}
+:host .file-error {
+  font-size: 12px;
+  color: var(--red);
+}

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

@@ -0,0 +1,229 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _DsAttachments_units;
+import { Host, h } from '@stencil/core';
+export class DsAttachments {
+  constructor() {
+    _DsAttachments_units.set(this, ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]);
+    this.file = undefined;
+    this.readonly = false;
+    this.showDownload = true;
+    this.showActions = true;
+    this.showView = false;
+  }
+  attachmentAction(type) {
+    this.attachmentEvent.emit({ value: this.file, type });
+  }
+  deleteAction() {
+    this.deleteEvent.emit({ value: this.file });
+  }
+  downloadAction() {
+    this.downloadEvent.emit({ value: this.file });
+  }
+  viewAction() {
+    this.viewEvent.emit({ value: this.file });
+  }
+  formatFileSize(x) {
+    let l = 0, n = parseInt(x.toString(), 10) || 0;
+    while (n >= 1024 && ++l) {
+      n = n / 1024;
+    }
+    return Math.floor(n) + " " + __classPrivateFieldGet(this, _DsAttachments_units, "f")[l];
+  }
+  render() {
+    let name = this.file.name;
+    let extension = name ? name.split('.')[1] : 'warning';
+    if (extension) {
+      if (extension == 'msg') {
+        extension = 'email-icon';
+      }
+      else if (extension == 'jpeg') {
+        extension = 'jpg';
+      }
+    }
+    else {
+      extension = 'warning';
+    }
+    return (h(Host, null, h("section", { class: `file-item ${this.file.errorMsg ? 'error' : ''}`, part: "base" }, h("div", { class: "icon", part: "icon" }, h("ds-icon", { icon: this.file.errorMsg ? 'warning' : extension.toLowerCase() })), h("div", { part: "name-size", class: "name-size" }, h("span", { class: "file-name text-truncate", part: "name" }, name), (this.file.size) && h("span", { class: "file-size", part: "size" }, this.formatFileSize(this.file.size))), this.showActions &&
+      h("div", { class: "file-action gap-1" }, this.showView &&
+        h("ds-button", { exportparts: "base: btn_base", class: "view", size: "small", icon: true, onClick: this.viewAction.bind(this) }, h("ds-icon", { icon: "eye" })), this.showDownload &&
+        h("ds-button", { exportparts: "base: btn_base", class: "download", size: "small", icon: true, onClick: this.downloadAction.bind(this) }, h("ds-icon", { icon: "download" })), !this.readonly &&
+        h("ds-button", { exportparts: "base: btn_base", class: "delete", size: "small", icon: true, onClick: this.deleteAction.bind(this) }, h("ds-icon", { icon: "trash" })))), h("span", { class: "file-error", part: "error" }, this.file.errorMsg)));
+  }
+  static get is() { return "ds-attachments"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-attachments.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-attachments.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "file": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Attachments",
+          "resolved": "Attachments",
+          "references": {
+            "Attachments": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showDownload": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-download",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showActions": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-actions",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showView": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-view",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "attachmentEvent",
+        "name": "attachmentEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "deleteEvent",
+        "name": "deleteEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "downloadEvent",
+        "name": "downloadEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "viewEvent",
+        "name": "viewEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}
+_DsAttachments_units = new WeakMap();

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

@@ -0,0 +1,84 @@
+:host {
+  display: inline-flex;
+}
+
+ds-avatar {
+  display: inline-flex;
+}
+
+.avatar {
+  --avatar-fs: calc(var(--default-size, 2.8125rem) / 2.5);
+  --avatar-lh: calc(var(--default-size, 2.8125rem) + 2px);
+  min-width: var(--default-size, 2.8125rem);
+  width: var(--default-size, 2.8125rem);
+  height: var(--default-size, 2.8125rem);
+  padding: var(--avatar-padding, 0);
+  background-color: var(--avatar-bg, #F3F3F1);
+  color: var(--avatar-color, white);
+  border-radius: var(--avatar-radius, 50%);
+  margin: var(--avatar-margin, 0);
+  display: inline-flex;
+  justify-content: center;
+  overflow: hidden;
+  text-transform: uppercase;
+  letter-spacing: -1px;
+  font-weight: var(--avatar-fw, 500);
+  border: var(--avatar-border, none);
+  box-shadow: var(--avatar-shadow, none);
+}
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.avatar--xx-small {
+  --default-size: 1.1875rem;
+}
+.avatar--x-small {
+  --default-size: 1.5rem;
+  --avatar-fs: calc(var(--default-size, 2.8125rem) / 2);
+}
+.avatar--medium {
+  --default-size: var(--default-size);
+}
+.avatar--small {
+  --default-size: var(--default-size-sm);
+}
+.avatar--large {
+  --default-size: var(--default-size-lg);
+}
+.avatar--circle {
+  --avatar-radius: 50%;
+}
+.avatar--square {
+  --avatar-radius: 0;
+}
+.avatar--rounded {
+  --avatar-radius: 5px;
+}
+.avatar--loader {
+  height: 100%;
+  width: 100%;
+  background-color: #eeeeee;
+  background-image: linear-gradient(90deg, #eeeeee 25%, #e6e6e6 37%, #eeeeee 63%);
+  background-size: 400% 100%;
+  -webkit-animation: loading-background 1.4s ease infinite;
+  animation: loading-background 1.4s ease infinite;
+  text-indent: -99999999px;
+}
+.avatar--text {
+  line-height: var(--avatar-lh);
+  font-size: var(--avatar-fs);
+  height: 100%;
+  width: 100%;
+  text-align: center;
+}
+
+@keyframes loading-background {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}