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

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

@@ -0,0 +1,138 @@
+import { h, Host } from "@stencil/core";
+import defaultUser from "../../assets/images/user.svg";
+export class DsAvatar {
+  constructor() {
+    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 = defaultUser;
+      }
+    };
+    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 is() { return "ds-avatar"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-avatar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-avatar.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,
+        "defaultValue": "\"\""
+      },
+      "size": {
+        "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": "size",
+        "reflect": false,
+        "defaultValue": "\"medium\""
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"circle\" | \"square\" | \"rounded\"",
+          "resolved": "\"circle\" | \"rounded\" | \"square\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shape",
+        "reflect": false,
+        "defaultValue": "\"circle\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "imageStatus": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "image",
+        "methodName": "watchImageChange"
+      }];
+  }
+}

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

@@ -0,0 +1,196 @@
+:host {
+  display: inline-block;
+  --btn-color: white;
+  --btn-bg-color: transparent;
+  --btn-border-color: var(--coral);
+  --btn-overlay-color: var(--coral);
+  --btn-disabled: gray;
+  --btn-min-width: var(--default-size);
+  --btn-width: inherit;
+  --btn-height: var(--default-size);
+  --icon-color: inherit;
+  --icon-size: 1.3rem;
+}
+:host .button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--btn-height);
+  min-width: var(--btn-min-width);
+  width: var(--btn-width, inherit);
+  border-style: solid;
+  text-decoration: none;
+  user-select: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  border-width: var(--border-width, 1px);
+  border-color: var(--btn-border-color);
+  border-radius: var(--btn-radius, 3px);
+  color: var(--btn-color);
+  background-color: var(--btn-bg-color);
+  font-family: var(--font-family);
+  font-weight: var(--btn-fw, 400);
+  font-size: var(--btn-fs, 1rem);
+  padding: var(--btn-padding, 0 1rem);
+  position: relative;
+  cursor: pointer;
+  box-shadow: var(--btn-shadow, none);
+  transition: var(--default-transition);
+}
+:host .button:active {
+  transform: scale(0.94);
+}
+:host .button:hover {
+  color: var(--btn-overlay-color);
+}
+:host .button:hover .button__focus-overlay {
+  width: 0;
+}
+:host .button__focus-overlay {
+  content: "";
+  background-color: var(--btn-overlay-color);
+  border-radius: var(--btn-radius, 3px);
+  bottom: -2px;
+  left: -2px;
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  transition: all 0.4s;
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+}
+:host .button--square {
+  --btn-padding: 0;
+}
+:host .button--circle {
+  --btn-radius: 50%;
+  --btn-padding: 0;
+}
+:host .button--circle:hover .button__focus-overlay {
+  opacity: 0;
+  transform: scale(0);
+  width: calc(100% + 4px);
+}
+:host .button--circle.button--outline:hover .button__focus-overlay {
+  transform: scale(1);
+  opacity: 1;
+}
+:host .button--circle.button--outline .button__focus-overlay {
+  transform: scale(0);
+  opacity: 0;
+  width: calc(100% + 4px);
+}
+:host .button--circle .button__focus-overlay {
+  border-radius: 50%;
+}
+:host .button--small {
+  --btn-height: var(--default-size-sm);
+  --btn-min-width: var(--default-size-sm);
+  --btn-padding: 0.75rem;
+  --btn-fs: 1rem;
+  --border-width: 1px;
+}
+:host .button--medium {
+  --btn-height: var(--default-size);
+  --btn-min-width: var(--default-size);
+}
+:host .button--large {
+  --btn-height: var(--default-size-lg);
+  --btn-min-width: var(--default-size-lg);
+  --btn-fs: 1.2rem;
+}
+:host .button--icon {
+  --btn-padding: 0;
+  --btn-fs: var(--icon-size);
+  --btn-color: var(--icon-color);
+  --btn-bg-color: var(--light-gray);
+  --btn-border-color: var(--light-gray);
+  transition: var(--default-transition);
+}
+:host .button--icon:hover {
+  --btn-bg-color: var(--light-gray);
+  opacity: 0.9;
+  --btn-color: inherit;
+}
+:host .button--icon .button__focus-overlay {
+  display: none;
+}
+:host .button--no-gap__wrapper {
+  gap: 0;
+}
+:host .button--text {
+  --border-width: 0;
+  --btn-color: var(--coral);
+}
+:host .button--text.button--underlined {
+  text-decoration: underline;
+}
+:host .button--text .button__focus-overlay {
+  transform: scale(0);
+  opacity: 0;
+  width: 0;
+}
+:host .button--text:hover {
+  text-decoration: underline;
+}
+:host .button--flat .button__focus-overlay {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+:host .button--outline {
+  --btn-color: var(--coral);
+  color: var(--btn-color);
+  background-color: var(--btn-bg-color);
+  overflow: hidden;
+}
+:host .button--outline:hover {
+  color: white;
+  overflow: visible;
+}
+:host .button--outline:hover .button__focus-overlay {
+  width: calc(100% + 4px);
+}
+:host .button--outline .button__focus-overlay {
+  width: 0;
+}
+:host .button--disabled, :host .button--loading {
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+:host .button--disabled:active, :host .button--loading:active {
+  transform: scale(1);
+}
+:host .button__wrapper {
+  align-items: center;
+  display: flex;
+  gap: var(--btn-label-p, 0.5rem);
+  justify-content: center;
+  position: relative;
+}
+:host .button__label, :host .button__prefix, :host .button__suffix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+:host .button__label:empty, :host .button__prefix:empty, :host .button__suffix:empty {
+  display: none;
+}
+:host .button .spin {
+  display: inline-flex;
+  animation-name: spin;
+  animation-duration: 400ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,313 @@
+import { h, Host } from '@stencil/core';
+export class DsButton {
+  constructor() {
+    this.disabled = undefined;
+    this.loading = undefined;
+    this.caret = undefined;
+    this.icon = undefined;
+    this.circle = undefined;
+    this.square = undefined;
+    this.underlined = undefined;
+    this.type = 'button';
+    this.color = undefined;
+    this.shape = 'default';
+    this.size = 'medium';
+    this.href = undefined;
+    this.download = undefined;
+    this.target = undefined;
+  }
+  componentWillLoad() {
+    this.hasPrefixSlot = !!this.hostElement.querySelector('[slot="prefix"]');
+    this.hasSuffixSlot = !!this.hostElement.querySelector('[slot="suffix"]');
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const TagType = this.href === undefined ? 'button' : 'a';
+    const attrs = TagType === 'button'
+      ? { type: this.type }
+      : {
+        download: this.download,
+        href: this.href,
+        target: this.target,
+      };
+    return (h(Host, null, h(TagType, Object.assign({}, attrs, { part: "base", class: Object.assign({ 'button': true }, classMap), disabled: this.disabled }), h("span", { part: "overlay", class: 'button__focus-overlay' }), h("span", { part: "wrapper", class: 'button__wrapper' }, (this.hasPrefixSlot && !this.loading) &&
+      h("span", { part: 'prefix', class: 'button__prefix' }, h("slot", { name: 'prefix' })), (this.loading && !this.icon) &&
+      h("span", { part: 'prefix', class: 'button__prefix' }, h("ds-icon", { icon: "spinner", class: "spin" })), h("span", { part: "label", class: "button__label" }, (this.loading && this.icon) ?
+      h("ds-icon", { icon: "spinner", class: "spin" }) : h("slot", null)), this.hasSuffixSlot &&
+      h("span", { part: 'suffix', class: 'button__suffix' }, h("slot", { name: 'suffix' })), this.caret &&
+      h("span", { part: 'caret', class: 'button__caret' }, h("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round' }, h("polyline", { points: '6 9 12 15 18 9' })))))));
+  }
+  getCssClassMap() {
+    return {
+      [`button--${this.color}`]: this.color != null,
+      [`button--${this.shape}`]: true,
+      [`button--${this.size}`]: true,
+      [`button--no-gap`]: !this.hasSuffixSlot && !this.hasPrefixSlot,
+      [`button--loading`]: this.loading,
+      [`button--disabled`]: this.disabled,
+      [`button--circle`]: this.circle,
+      [`button--square`]: this.square,
+      [`button--icon`]: this.icon,
+      [`button--caret`]: this.caret,
+      [`button--underlined`]: this.underlined,
+    };
+  }
+  static get is() { return "ds-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ds-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ds-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "loading",
+        "reflect": true
+      },
+      "caret": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caret",
+        "reflect": true
+      },
+      "icon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": true
+      },
+      "circle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "circle",
+        "reflect": true
+      },
+      "square": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "square",
+        "reflect": true
+      },
+      "underlined": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "underlined",
+        "reflect": true
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'button' | 'reset' | 'submit'",
+          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'button'"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary' | 'gray' | 'info' | 'success' | 'warning' | 'danger' | 'orange' | 'white' | 'transparent'",
+          "resolved": "\"danger\" | \"gray\" | \"info\" | \"orange\" | \"primary\" | \"secondary\" | \"success\" | \"transparent\" | \"warning\" | \"white\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'flat' | 'outline' | 'text'",
+          "resolved": "\"default\" | \"flat\" | \"outline\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shape",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "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,
+        "defaultValue": "'medium'"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "download": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "download",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "target",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,53 @@
+:host {
+  display: block;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host .card {
+  display: block;
+  width: 100%;
+  min-width: 200px;
+  max-width: 100%;
+  height: var(--card-height, auto);
+  position: relative;
+  padding: var(--card-padding, 1rem);
+  text-align: var(--card-align, inherit);
+  background-color: var(--card-bg, white);
+  box-shadow: var(--card-shadow, none);
+  transition: transform 0.5s, opacity 0.5s, z-index 0.5s;
+}
+:host .card__status-border {
+  background-color: var(--status-border-color, white);
+  bottom: var(--bottom-position, auto);
+  left: var(--left-position, 0);
+  right: var(--right-position, auto);
+  top: var(--top-position, 0);
+  height: var(--status-border-height, 100%);
+  width: var(--status-border-size, 7px);
+  position: var(--status-border-position, absolute);
+}
+:host .card__image {
+  width: 100%;
+  height: var(--card-image-height, auto);
+  overflow: hidden;
+  border-radius: var(--card-image-radius, 0);
+  margin-bottom: var(--margin-bottom, 1rem);
+}
+:host .card__image:empty {
+  display: none;
+}
+:host .card__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+:host .card__header {
+  color: var(--bs-black-rgb, black);
+  font-size: var(--font-size, 1rem);
+  font-weight: bold;
+}
+:host .card__body {
+  color: var(--bs-gray-dark, #ccc);
+  font-size: var(--font-size, 1rem);
+}