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

package/dist/collection/utils/generate-icons.js

@@ -0,0 +1,72 @@
+const fs = require('fs');
+
+const main = () => {
+  fs.readdir('./css/assets', (err, files) => {
+    if (err) throw err;
+
+    files.forEach(file => {
+      const iconName = file.replace('.svg', '');
+
+      let folder;
+      let template;
+      if (!file.includes('-svg')) {
+        folder = 'my-icon-2';
+        template = getTemplate(file, iconName);
+      } else {
+        folder = 'my-icon-3';
+        template = getTemplateSvg(file, iconName);
+      }
+
+      fs.writeFile(`./components/${folder}/icons/my-icon-${iconName}.tsx`, template, (err) => {
+        if (err) throw err;
+      });
+    });
+  });
+}
+
+const getTemplate = (iconPath, iconName) => {
+  return `import { Component, Prop, h } from '@stencil/core';
+import svgIcon from '../../../css/assets/${iconPath}';
+
+/** @internal **/
+@Component({
+  tag: 'my-icon-${iconName}',
+  shadow: false,
+})
+export class MyIcon${toPascalCase(iconName)} {
+  @Prop() size: string;
+
+  render() {
+    return (
+      <svg style={{ 'height': this.size, 'width': this.size }}>
+        <use xlinkHref={\`\${svgIcon}#${iconName}\`}></use>
+      </svg>
+    );
+  }
+}
+`
+}
+
+const getTemplateSvg = (iconPath, iconName) => {
+  return `import { Component, Prop, h } from '@stencil/core';
+import svgIcon from '../../../css/assets/${iconPath}';
+
+/** @internal **/
+@Component({
+  tag: 'my-icon-${iconName}',
+  shadow: false,
+})
+export class MyIcon${toPascalCase(iconName)} {
+  @Prop() size: string;
+
+  render() {
+    return <div style={{ 'height': this.size, 'width': this.size }} innerHTML={svgIcon}></div>;
+  }
+}
+`
+}
+
+const toPascalCase = (string) => string.replace(/\w+/g,
+  (w) => w[0].toUpperCase() + w.slice(1).toLowerCase()).replace('-', '');
+
+// main();

package/dist/collection/utils/rollup-utils.js

@@ -0,0 +1,41 @@
+const SVGO = require('svgo');
+
+const usePlugin = (fileName) => {
+  return /-svg.svg$/i.test(fileName);
+}
+
+const decodeBase64SourceText = (sourceText) => {
+  let [, base64Code] = sourceText.split('base64,');
+  if (!base64Code) {
+    return null;
+  }
+
+  base64Code = base64Code.slice(0, base64Code.indexOf(`';`));
+
+  return Buffer.from(base64Code, 'base64').toString();
+}
+
+exports.svgOptimizerPlugin = () => {
+  return {
+    name: 'rollup-svg-optimizer-plugin',
+    transform(sourceText, fileName) {
+      if (!usePlugin(fileName) || sourceText === '') {
+        return null;
+      }
+
+      const svgBase64 = decodeBase64SourceText(sourceText);
+      if (!svgBase64) {
+        return null
+      }
+      console.log(fileName)
+
+      const svgo = new SVGO();
+      return svgo.optimize(svgBase64, { path: fileName }).then((result) => {
+        return {
+          id: fileName,
+          code: `export default '${result.data}'`,
+        }
+      });
+    },
+  };
+}

package/dist/collection/utils/svgxuse.min.js

@@ -0,0 +1,12 @@
+/*!
+ * @copyright Copyright (c) 2017 IcoMoon.io
+ * @license   Licensed under MIT license
+ *            See https://github.com/Keyamoon/svgxuse
+ * @version   1.2.6
+ */
+(function(){if("undefined"!==typeof window&&window.addEventListener){var e=Object.create(null),l,d=function(){clearTimeout(l);l=setTimeout(n,100)},m=function(){},t=function(){window.addEventListener("resize",d,!1);window.addEventListener("orientationchange",d,!1);if(window.MutationObserver){var k=new MutationObserver(d);k.observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0});m=function(){try{k.disconnect(),window.removeEventListener("resize",d,!1),window.removeEventListener("orientationchange",
+d,!1)}catch(v){}}}else document.documentElement.addEventListener("DOMSubtreeModified",d,!1),m=function(){document.documentElement.removeEventListener("DOMSubtreeModified",d,!1);window.removeEventListener("resize",d,!1);window.removeEventListener("orientationchange",d,!1)}},u=function(k){function e(a){if(void 0!==a.protocol)var b=a;else b=document.createElement("a"),b.href=a;return b.protocol.replace(/:/g,"")+b.host}if(window.XMLHttpRequest){var d=new XMLHttpRequest;var m=e(location);k=e(k);d=void 0===
+d.withCredentials&&""!==k&&k!==m?XDomainRequest||void 0:XMLHttpRequest}return d};var n=function(){function d(){--q;0===q&&(m(),t())}function l(a){return function(){!0!==e[a.base]&&(a.useEl.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#"+a.hash),a.useEl.hasAttribute("href")&&a.useEl.setAttribute("href","#"+a.hash))}}function p(a){return function(){var c=document.body,b=document.createElement("x");a.onload=null;b.innerHTML=a.responseText;if(b=b.getElementsByTagName("svg")[0])b.setAttribute("aria-hidden",
+"true"),b.style.position="absolute",b.style.width=0,b.style.height=0,b.style.overflow="hidden",c.insertBefore(b,c.firstChild);d()}}function n(a){return function(){a.onerror=null;a.ontimeout=null;d()}}var a,b,q=0;m();var f=document.getElementsByTagName("use");for(b=0;b<f.length;b+=1){try{var h=f[b].getBoundingClientRect()}catch(w){h=!1}var g=(a=f[b].getAttribute("href")||f[b].getAttributeNS("http://www.w3.org/1999/xlink","href")||f[b].getAttribute("xlink:href"))&&a.split?a.split("#"):["",""];var c=
+g[0];g=g[1];var r=h&&0===h.left&&0===h.right&&0===h.top&&0===h.bottom;h&&0===h.width&&0===h.height&&!r?(c.length||!g||document.getElementById(g)||(c=""),f[b].hasAttribute("href")&&f[b].setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",a),c.length&&(a=e[c],!0!==a&&setTimeout(l({useEl:f[b],base:c,hash:g}),0),void 0===a&&(g=u(c),void 0!==g&&(a=new g,e[c]=a,a.onload=p(a),a.onerror=n(a),a.ontimeout=n(a),a.open("GET",c),a.send(),q+=1)))):r?c.length&&e[c]&&setTimeout(l({useEl:f[b],base:c,
+hash:g}),0):void 0===e[c]?e[c]=!0:e[c].onload&&(e[c].abort(),delete e[c].onload,e[c]=!0)}f="";q+=1;d()};var p=function(){window.removeEventListener("load",p,!1);l=setTimeout(n,0)};"complete"!==document.readyState?window.addEventListener("load",p,!1):p()}})();

package/dist/collection/utils/utils.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ds-activity-log.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsActivityLog extends Components.DsActivityLog, HTMLElement {}
+export const DsActivityLog: {
+  prototype: DsActivityLog;
+  new (): DsActivityLog;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-activity-log.js

@@ -0,0 +1,105 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$6 } from './ds-attachments2.js';
+import { d as defineCustomElement$5 } from './ds-avatar2.js';
+import { d as defineCustomElement$4 } from './ds-button2.js';
+import { d as defineCustomElement$3 } from './ds-icon2.js';
+import { d as defineCustomElement$2 } from './ds-user-card2.js';
+
+const dsActivityLogCss = ":host{display:block}:host .activity-list{padding:var(--activity-padding, 0);margin:var(--activity-margin, 0);background:var(--activity-bg, 0);position:relative;list-style:none;display:flex;flex-direction:column;gap:var(--activity-list-gap, 2rem);overflow:hidden;--activity-date-size:80px}:host .activity-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(--activity-date-size) / 2);z-index:-1}:host .activity-list .activity-item{display:flex;align-items:var(--activity-item-align, flex-start);gap:var(--activity-item-gap, 1rem);--activity-date-bg:var(--white)}:host .activity-list .activity-item .date-time{--date-fs:0.75rem;--date-fw:500;--date-fc:var(--dark-gray);--time-fs:0.75rem;--time-fw:400;--time-fc:var(--dark-gray);min-width:var(--activity-date-size);width:var(--activity-date-size);background-color:var(--activity-date-bg);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 0.3rem 1rem;box-sizing:border-box;box-shadow:0 -1rem 0 var(--activity-date-bg)}:host .activity-list .activity-item .date-time .date{font-size:var(--date-fs);font-weight:var(--date-fw);color:var(--date-fc)}:host .activity-list .activity-item .date-time .time{font-size:var(--time-fs);font-weight:var(--time-fw);color:var(--time-fc);direction:ltr}:host .activity-list .activity-item .details{display:flex;align-items:center;flex-grow:1}:host .activity-list .activity-item .user-details{flex-grow:1}:host .activity-list .activity-item .comment-attachment{--comment-bg:var(--light-gray);--comment-padding:1rem;--comment-fs:0.875rem;--comment-fw:500;--comment-fc:var(--black);background-color:var(--comment-bg);padding:var(--comment-padding);display:flex;flex-direction:column;gap:0.75rem}:host .activity-list .activity-item .comment-attachment:empty{display:none}:host .activity-list .activity-item .comment-attachment .comment{color:var(--comment-fc);font-size:var(--comment-fs);font-weight:var(--comment-fw);padding:0;margin:0;word-break:break-all}";
+
+const DsActivityLog$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.activitiesData = undefined;
+    this.readonly = false;
+  }
+  activitiesDataWatcher(newValue) {
+    if (typeof newValue === 'string') {
+      this._activitiesData = JSON.parse(newValue);
+    }
+    else {
+      this._activitiesData = newValue;
+    }
+  }
+  // @Event() deleteEvent: EventEmitter;
+  // @Event() downloadEvent: EventEmitter;
+  // download(ev) {
+  //   const value = ev.detail.value;
+  //   this.downloadEvent.emit({value});
+  // }
+  //
+  // delete(ev) {
+  //   const value = ev.detail.value;
+  //   this.deleteEvent.emit({value});
+  // }
+  componentWillLoad() {
+    this.activitiesDataWatcher(this.activitiesData);
+  }
+  drawAttachments(items) {
+    return items.map(item => {
+      return (h("ds-attachments", { file: item, readonly: this.readonly, exportparts: "base: attachments_base, icon: attachments_icon, name-size: attachments_name-size, name: attachments_name, size: attachments_size, body: attachments_body" }));
+    });
+  }
+  drawActivityLog() {
+    return this._activitiesData.map(activityItem => {
+      let userInfo = { name: activityItem.name, title: activityItem.title, image: activityItem.image };
+      return (h("li", { part: "item", class: "activity-item" }, h("div", { class: "date-time", part: "date-time" }, h("span", { class: "date" }, activityItem.date), h("span", { class: "time" }, activityItem.time)), h("div", { part: "details", class: "details" }, h("ds-user-card", { class: "user-details", exportparts: "base: user-card_base, details: user-card_details, body: user-card_body", imageSize: "x-small", "user-info": JSON.stringify(userInfo) }, (activityItem.comment || activityItem.attachments) && h("div", { part: "comment-attachment", class: "comment-attachment" }, activityItem.comment && h("p", { class: "comment", part: "part" }, activityItem.comment), activityItem.attachments && this.drawAttachments(activityItem.attachments))))));
+    });
+  }
+  render() {
+    return (h(Host, null, h("ul", { part: "base", class: "activity-list" }, h("div", { class: "line", part: "line" }), this.drawActivityLog())));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "activitiesData": ["activitiesDataWatcher"]
+  }; }
+  static get style() { return dsActivityLogCss; }
+}, [1, "ds-activity-log", {
+    "activitiesData": [1, "activities-data"],
+    "readonly": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ds-activity-log", "ds-attachments", "ds-avatar", "ds-button", "ds-icon", "ds-user-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ds-activity-log":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DsActivityLog$1);
+      }
+      break;
+    case "ds-attachments":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ds-avatar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ds-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ds-user-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsActivityLog = DsActivityLog$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsActivityLog, defineCustomElement };

package/dist/components/ds-alert.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsAlert extends Components.DsAlert, HTMLElement {}
+export const DsAlert: {
+  prototype: DsAlert;
+  new (): DsAlert;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-alert.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './ds-icon2.js';
+
+const dsAlertCss = ":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)}";
+
+const DsAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 style() { return dsAlertCss; }
+}, [1, "ds-alert", {
+    "icon": [1537],
+    "type": [1537]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ds-alert", "ds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ds-alert":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DsAlert$1);
+      }
+      break;
+    case "ds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsAlert = DsAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsAlert, defineCustomElement };

package/dist/components/ds-approvals.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsApprovals extends Components.DsApprovals, HTMLElement {}
+export const DsApprovals: {
+  prototype: DsApprovals;
+  new (): DsApprovals;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-approvals.js

@@ -0,0 +1,76 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './ds-avatar2.js';
+import { d as defineCustomElement$3 } from './ds-status2.js';
+import { d as defineCustomElement$2 } from './ds-user-card2.js';
+
+const dsApprovalsCss = ":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)}";
+
+const DsApprovals$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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())));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "approvalsData": ["approvalsDataWatcher"]
+  }; }
+  static get style() { return dsApprovalsCss; }
+}, [1, "ds-approvals", {
+    "approvalsData": [1, "approvals-data"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ds-approvals", "ds-avatar", "ds-status", "ds-user-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ds-approvals":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DsApprovals$1);
+      }
+      break;
+    case "ds-avatar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ds-status":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ds-user-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsApprovals = DsApprovals$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsApprovals, defineCustomElement };

package/dist/components/ds-attachments.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsAttachments extends Components.DsAttachments, HTMLElement {}
+export const DsAttachments: {
+  prototype: DsAttachments;
+  new (): DsAttachments;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-attachments.js

@@ -0,0 +1,6 @@
+import { D as DsAttachments$1, d as defineCustomElement$1 } from './ds-attachments2.js';
+
+const DsAttachments = DsAttachments$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsAttachments, defineCustomElement };

package/dist/components/ds-attachments2.js

@@ -0,0 +1,103 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './ds-button2.js';
+import { d as defineCustomElement$1 } from './ds-icon2.js';
+
+const dsAttachmentsCss = ":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)}";
+
+var __classPrivateFieldGet = (undefined && undefined.__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;
+const DsAttachments = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.attachmentEvent = createEvent(this, "attachmentEvent", 7);
+    this.deleteEvent = createEvent(this, "deleteEvent", 7);
+    this.downloadEvent = createEvent(this, "downloadEvent", 7);
+    this.viewEvent = createEvent(this, "viewEvent", 7);
+    _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 style() { return dsAttachmentsCss; }
+}, [1, "ds-attachments", {
+    "file": [1040],
+    "readonly": [4],
+    "showDownload": [4, "show-download"],
+    "showActions": [4, "show-actions"],
+    "showView": [4, "show-view"]
+  }]);
+_DsAttachments_units = new WeakMap();
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ds-attachments", "ds-button", "ds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ds-attachments":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DsAttachments);
+      }
+      break;
+    case "ds-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DsAttachments as D, defineCustomElement as d };

package/dist/components/ds-avatar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsAvatar extends Components.DsAvatar, HTMLElement {}
+export const DsAvatar: {
+  prototype: DsAvatar;
+  new (): DsAvatar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-avatar.js

@@ -0,0 +1,6 @@
+import { D as DsAvatar$1, d as defineCustomElement$1 } from './ds-avatar2.js';
+
+const DsAvatar = DsAvatar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsAvatar, defineCustomElement };

package/dist/components/ds-avatar2.js

@@ -0,0 +1,72 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const userSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMS41IiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSIjOEU5QUEwIi8+CiAgPHBhdGggZD0iTTE2LjI1MDQgMTEuNjY2M0MxNy4xMjUgMTEuNjY2MyAxNy44MzM4IDEyLjM3NTEgMTcuODMzOCAxMy4yNDk3VjE2LjQxNjNDMTcuODMzOCAxNy4yOTA5IDE3LjEyNSAxNy45OTk3IDE2LjI1MDQgMTcuOTk5N0g2LjIyMjY2VjEzLjI0OTdDNi4yMjI2NiAxMi4zNzUxIDYuOTMxNDYgMTEuNjY2MyA3LjgwNTk5IDExLjY2NjNIMTYuMjUwNFpNMTYuMjUwNCAxMi43MjE5SDcuODA1OTlDNy41MTQ2NiAxMi43MjE5IDcuMjc4MjEgMTIuOTU4MyA3LjI3ODIxIDEzLjI0OTdWMTYuOTQ0MUgxNi4yNTA0QzE2LjU0MTggMTYuOTQ0MSAxNi43NzgyIDE2LjcwNzcgMTYuNzc4MiAxNi40MTYzVjEzLjI0OTdDMTYuNzc4MiAxMi45NTgzIDE2LjU0MTggMTIuNzIxOSAxNi4yNTA0IDEyLjcyMTlaTTEyLjAyODIgNS4zMzMwMUMxMy40ODU0IDUuMzMzMDEgMTQuNjY3MSA2LjUxNDcgMTQuNjY3MSA3Ljk3MTlDMTQuNjY3MSA5LjQyOTA5IDEzLjQ4NTQgMTAuNjEwOCAxMi4wMjgyIDEwLjYxMDhDMTAuNTcxIDEwLjYxMDggOS4zODkzMiA5LjQyOTA5IDkuMzg5MzIgNy45NzE5QzkuMzg5MzIgNi41MTQ3IDEwLjU3MSA1LjMzMzAxIDEyLjAyODIgNS4zMzMwMVY1LjMzMzAxWk0xMi4wMjgyIDYuMzg4NTZDMTEuMTUzNyA2LjM4ODU2IDEwLjQ0NDkgNy4wOTczNyAxMC40NDQ5IDcuOTcxOUMxMC40NDQ5IDguODQ2NDIgMTEuMTUzNyA5LjU1NTIzIDEyLjAyODIgOS41NTUyM0MxMi45MDI3IDkuNTU1MjMgMTMuNjExNSA4Ljg0NjQyIDEzLjYxMTUgNy45NzE5QzEzLjYxMTUgNy4wOTczNyAxMi45MDI3IDYuMzg4NTYgMTIuMDI4MiA2LjM4ODU2VjYuMzg4NTZaIiBmaWxsPSIjOEU5QUEwIi8+Cjwvc3ZnPgo=';
+
+const dsAvatarCss = ":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%}}";
+
+const DsAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.colors = ["#00C48C", "#FF375E", "#50008C", "#1BCED8", "#FF6A39", "#A54EE1"];
+    this.handleImageLoad = () => {
+      this.imageStatus = "loaded";
+    };
+    this.handleImageError = () => {
+      this.imageStatus = "error";
+      if (this.label.length < 1) {
+        this.imageStatus = "loaded";
+        this.image = userSvg;
+      }
+    };
+    this.image = undefined;
+    this.label = "";
+    this.size = "medium";
+    this.shape = "circle";
+    this.imageStatus = "loading";
+  }
+  watchImageChange(newValue, oldValue) {
+    // console.log('The old value of busy is: ', oldValue);
+    // console.log('The new value of busy is: ', newValue);
+    if (newValue !== oldValue) {
+      this.imageStatus = "loading";
+    }
+  }
+  getRandomColor() {
+    if (this.imageStatus === "loaded" || this.imageStatus === "loading")
+      return 'transparent';
+    return this.colors[Math.floor(Math.random() * this.colors.length)];
+  }
+  render() {
+    return (h(Host, null, h("figure", { part: "base", class: `avatar avatar--${this.size} avatar--${this.shape}`, style: { '--avatar-bg': this.getRandomColor() } }, (this.imageStatus === "loaded" || this.imageStatus === "loading") && h("img", { src: this.image, alt: this.label || "No Label", onLoad: this.handleImageLoad, onError: this.handleImageError, style: { display: this.imageStatus === "loading" ? 'none' : '' } }), this.imageStatus === "loading" && h("div", { part: "loading", class: "avatar--loader" }), (this.imageStatus === "error" && this.label) && h("div", { part: "text", class: "avatar--text" }, this.label.split(" ").length > 1
+      ? `${this.label.split(" ")[0][0]} ${this.label.split(" ")[this.label.split(" ").length - 1][0]}`
+      : this.label.slice(0, 2).split('').join(" ")))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "image": ["watchImageChange"]
+  }; }
+  static get style() { return dsAvatarCss; }
+}, [0, "ds-avatar", {
+    "image": [1537],
+    "label": [1537],
+    "size": [1],
+    "shape": [1],
+    "imageStatus": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ds-avatar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ds-avatar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DsAvatar);
+      }
+      break;
+  } });
+}
+
+export { DsAvatar as D, defineCustomElement as d };

package/dist/components/ds-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsButton extends Components.DsButton, HTMLElement {}
+export const DsButton: {
+  prototype: DsButton;
+  new (): DsButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-button.js

@@ -0,0 +1,6 @@
+import { D as DsButton$1, d as defineCustomElement$1 } from './ds-button2.js';
+
+const DsButton = DsButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsButton, defineCustomElement };