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

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

@@ -0,0 +1,42 @@
+import { Host, h } from '@stencil/core';
+export class DsSplash {
+  constructor() {
+    this.label = undefined;
+  }
+  render() {
+    return (h(Host, null, h("section", { class: "splash" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "2581.074", height: "1290.223", viewBox: "0 0 2581.074 1290.223" }, h("g", { id: "Group_13017", "data-name": "Group 13017", transform: "translate(-19764.252 -12449.719)" }, h("g", { transform: "translate(18187.66 13764.085)" }, h("path", { class: "anim s", id: "s-alph", d: "M2000.8-24.708c134.64,0,245.179-42.152,317.484-112.554a292.487,292.487,0,0,0,86.428-210.976,273.063,273.063,0,0,0-80.375-196.969c-52.242-52.239-126.567-90.47-221.073-108.519l-154.708-30.154C1884.209-695.987,1848-728.051,1848-772.332c0-58.294,56.277-98.424,146.743-98.424,56.279,0,104.483,18.048,136.659,50.224a149.2,149.2,0,0,1,38.114,82.4l223.09-50.222a269.535,269.535,0,0,0-82.4-166.823c-72.31-72.419-184.864-118.606-317.477-118.606-122.646,0-225.11,40.251-295.512,104.481a293.317,293.317,0,0,0-94.391,217.035c0,74.44,24.1,136.657,72.305,184.974,48.319,48.319,118.607,84.415,211.094,106.5l152.686,36.211c76.35,18.048,110.536,46.3,110.536,96.523,0,62.218-56.277,98.424-148.653,98.424-66.365,0-120.626-22.083-154.817-58.3a139.409,139.409,0,0,1-40.136-92.471l-229.255,50.224a285.562,285.562,0,0,0,86.435,176.9C1739.37-72.91,1862.012-24.7,2000.687-24.7", transform: "translate(-1000 0)", fill: "#fff" }), h("animateTransform", { "xlink:href": "#s-alph", attributeName: "transform", attributeType: "XML", type: "translate", from: "-1000 0", to: "0 0", dur: ".2s", begin: ".2s;", fill: "freeze", restart: "whenNotActive" })), h("g", { transform: "translate(18761.039 13624.737)" }, h("path", { class: "anim t", id: "t-alph", d: "M2311.24,115.2c104.486,0,178.923-32.174,210.985-60.312v-217.04a232.079,232.079,0,0,1-134.64,40.253c-44.17,0-76.35-10.09-100.449-32.173-20.065-20.068-30.158-54.259-30.158-100.449v-920.5H1991.741v271.295h530.486v257.281H1991.741v456.151c0,92.488,28.139,166.813,78.36,219.053,56.279,56.277,138.677,86.433,241.139,86.433", transform: "translate(-2000 0)", fill: "#fff" }), h("animateTransform", { "xlink:href": "#t-alph", attributeName: "transform", attributeType: "XML", type: "translate", from: "-2000 0", to: "0 0", dur: ".2s", begin: ".1s;", fill: "freeze", restart: "whenNotActive" })), h("g", { transform: "translate(19114.346 13764.1)" }, h("path", { class: "anim c", id: "c-alph", d: "M2768.771-24.687c148.647,0,263.222-54.259,341.7-130.6A445.452,445.452,0,0,0,3230.98-358.314L2995.9-436.674a229.266,229.266,0,0,1-62.325,104.481c-38.23,36.209-90.47,62.327-164.8,62.327a252.4,252.4,0,0,1-178.921-72.42c-46.185-48.2-74.323-118.609-74.323-206.947,0-90.471,28.138-158.741,74.323-207.059a246.122,246.122,0,0,1,176.9-70.29c72.305,0,122.53,24.1,158.739,60.314a256.054,256.054,0,0,1,60.317,106.5l239.118-80.375a451.186,451.186,0,0,0-112.551-198.984c-80.376-78.363-196.86-134.64-351.678-134.64a509.659,509.659,0,0,0-363.667,146.747c-92.488,94.4-148.765,225.106-148.765,377.794A526.532,526.532,0,0,0,2400.954-171.32c92.49,92.374,223.09,146.633,367.934,146.633", transform: "translate(-3000 0)", fill: "#fff" }), h("animateTransform", { "xlink:href": "#c-alph", attributeName: "transform", attributeType: "XML", type: "translate", from: "-3000 0", to: "0 0", dur: ".2s", begin: "0s;", fill: "freeze", restart: "whenNotActive" })))), h("div", { class: "text-container" }, h("h1", { class: "fs-22 fw-bold fc-white text" }, this.label)))));
+  }
+  static get is() { return "ds-splash"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-splash.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-splash.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true
+      }
+    };
+  }
+}

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

@@ -0,0 +1,47 @@
+:host {
+  display: inline-block;
+}
+:host .status {
+  --status-radius: 3px;
+  --status-fs: 0.75rem;
+  --status-fw: 400;
+  --status-color: var(--black);
+  --status-bg: var(--white);
+  --status-size: 1.5rem;
+  --status-width: 80px;
+  --status-padding: 0 0.5rem;
+  --status-ws: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--status-bg);
+  color: var(--status-color);
+  font-size: var(--status-fs);
+  font-weight: var(--status-fw);
+  line-height: 1;
+  min-height: var(--status-size);
+  min-width: var(--status-width);
+  padding: var(--status-padding);
+  text-transform: capitalize;
+  border-radius: var(--status-radius);
+  white-space: var(--status-ws);
+}
+:host .status--medium {
+  --status-size: var(--default-size);
+  --status-fs: 1rem;
+}
+:host .status--small {
+  --status-size: var(--default-size-sm);
+  --status-fs: 0.875rem;
+  --status-fw: 400;
+}
+:host .status--large {
+  --status-size: var(--default-size-lg);
+  --status-fs: 1.2rem;
+}
+:host .status--icon {
+  --status-padding: 0;
+  min-width: var(--status-size);
+  min-height: var(--status-size);
+  --status-fs: 100%;
+}

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

@@ -0,0 +1,106 @@
+import { Host, h } from '@stencil/core';
+export class DsStatus {
+  constructor() {
+    this.status = undefined;
+    this.noOpacity = false;
+    this.size = undefined;
+    this.icon = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("div", { part: "base", class: Object.assign({ 'status': true }, classMap) }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [`status--${this.status}`]: this.status != null,
+      [`status--${this.size}`]: true,
+      [`status--icon`]: this.icon,
+      [`status--no-opacity`]: this.noOpacity,
+    };
+  }
+  static get is() { return "ds-status"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["./ds-status.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-status.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "status": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "status",
+        "reflect": true
+      },
+      "noOpacity": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-opacity",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false
+      },
+      "icon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": true
+      }
+    };
+  }
+}

package/dist/collection/components/ds-user-card/ds-user-card.css

@@ -0,0 +1,54 @@
+:host {
+  display: block;
+}
+
+.user-card {
+  min-width: 200px;
+  max-width: 100%;
+  height: var(--user-card-height, auto);
+  position: relative;
+  padding: var(--user-card-padding, 0);
+  text-align: var(--user-card-align, inherit);
+  background-color: var(--user-card-bg, transparent);
+  display: var(--user-card-display, flex);
+  align-items: var(--user-card-align, flex-start);
+  gap: var(--user-card-gap, 1rem);
+}
+.user-card .user-info {
+  display: var(--user-details-display, flex);
+  align-items: var(--user-details-align, baseline);
+  flex-direction: var(--user-details-direction, column);
+  flex-grow: 1;
+  gap: var(--user-details-gap, 0.3rem);
+  line-height: 1;
+  padding: var(--user-info-padding, 0.3rem 0);
+}
+.user-card .user-info .name {
+  --user-fc: var(--black);
+  --user-fs: 0.875rem;
+  --user-fw: 500;
+  color: var(--user-fc, black);
+  font-size: var(--user-fs, 0.875rem);
+  font-weight: var(--user-fw, 500);
+  word-break: break-all;
+  width: 100%;
+}
+.user-card .user-info .title {
+  --title-fc: var(--dark-gray);
+  --title-fs: 0.75rem;
+  --title-fw: 400;
+  color: var(--title-fc, gray);
+  font-size: var(--title-fs, 0.75rem);
+  font-weight: var(--title-fw, 400);
+  word-break: break-all;
+  width: 100%;
+}
+.user-card .user-info .title:empty {
+  display: none;
+}
+.user-card .user-info .body {
+  width: 100%;
+}
+.user-card .user-info .body:empty {
+  display: none;
+}

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

@@ -0,0 +1,102 @@
+import { Host, h } from '@stencil/core';
+export class DsUserCard {
+  constructor() {
+    this.imageSize = 'medium';
+    this.imageShape = 'circle';
+    this.userInfo = undefined;
+  }
+  userInfoWatcher(newValue) {
+    if (typeof newValue === 'string') {
+      this._userInfo = JSON.parse(newValue);
+    }
+    else {
+      this._userInfo = newValue;
+    }
+  }
+  componentWillLoad() {
+    this.userInfoWatcher(this.userInfo);
+  }
+  render() {
+    return (h(Host, null, this._userInfo &&
+      h("section", { part: "base", class: "user-card" }, h("ds-avatar", { part: "image", size: this.imageSize, shape: this.imageShape, exportparts: "base: avatar_base", image: this._userInfo.image, label: this._userInfo.name }), h("div", { part: "details", class: "user-info" }, h("span", { part: "name", class: "name" }, this._userInfo.name), h("span", { part: "title", class: "title" }, this._userInfo.title), h("div", { part: "body", class: "body" }, h("slot", null))), h("slot", { name: 'close' }))));
+  }
+  static get is() { return "ds-user-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-user-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-user-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "imageSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\" | \"xx-small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-size",
+        "reflect": false,
+        "defaultValue": "'medium'"
+      },
+      "imageShape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'circle' | 'square' | 'rounded'",
+          "resolved": "\"circle\" | \"rounded\" | \"square\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-shape",
+        "reflect": false,
+        "defaultValue": "'circle'"
+      },
+      "userInfo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "User | string",
+          "resolved": "User | string",
+          "references": {
+            "User": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "user-info",
+        "reflect": false
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "userInfo",
+        "methodName": "userInfoWatcher"
+      }];
+  }
+}

package/dist/collection/index.js

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