@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

package/dist/collection/components/ez-badge/ez-badge.css

@@ -0,0 +1,165 @@
+:host {
+    --ez-badge--size-2xs: var(--space--2xs, 8px);
+    --ez-badge--size-xs: var(--space--xs, 12px);
+    --ez-badge--size-sm: var(--space--sm, 16px);
+    --ez-badge--size-md: var(--space--md, 20px);
+    --ez-badge--size-lg: var(--space--lg, 24px);
+    --ez-badge--size-xl: var(--space--xl, 32px);
+
+    --ez-badge--padding-2xs: 0;
+    --ez-badge--padding-xs: var(--space--nano, 2px);
+    --ez-badge--padding-sm: calc(var(--space--nano, 2px) + 1px);
+    --ez-badge--padding-md: var(--space--3xs, 4px);
+    --ez-badge--padding-lg: calc(var(--space--3xs, 4px) + 2px);
+    --ez-badge--padding-xl: var(--space--2xs);
+
+    --ez-badge--border-radius: calc(var(--border--radius-medium, 12px) + 8px);
+    --ez-badge--font-family: var(--font-pattern, Roboto);
+    --ez-badge--font-weight-medium: var(--text-weight--medium, 400);
+    --ez-badge--background-color: var(--color--primary, #008561);
+    --ez-badge--border-none: 0;
+    --ez-badge--color: var(--text--inverted, #ffffff);
+    --ez-badge--gap: calc(var(--ez-badge--padding-xs) + 1px);
+
+    --ez-badge--font-size-md: var(--text--medium); 
+    --ez-badge--font-size-sm: var(--text--medium);
+    --ez-badge--font-size-xs: var(--text--small);
+}
+ez-icon {
+    --ez-icon--color: inherit;
+}
+.badge {
+    /*private*/
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+.badge__content {
+    /*public*/
+    font-family: var(--ez-badge--font-family, Roboto);
+    font-weight: var(--ez-badge--font-weight-medium, 400);
+    background-color: var(--ez-badge--background-color, #008561);
+    border: var(--ez-badge--border-none, 0);
+    color: var(--ez-badge--color, #ffffff);
+    border-radius: var(--ez-badge--border-radius, 20px);
+    gap: var(--ez-badge--gap, 3px);
+
+    /*private*/
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.badge__content--fill-xs {
+    /*public*/
+    height: var(--ez-badge--size-xs, 12px);
+    min-width: var(--ez-badge--size-xs, 12px);
+}
+.badge__content--fill-2xs {
+    /*public*/
+    height: var(--ez-badge--size-2xs, 8px);
+    min-width: var(--ez-badge--size-2xs, 8px);
+}
+
+.badge__content--text-md {
+    /*public*/
+    height: calc(var(--ez-badge--size-md, 20px) - 2px);
+    min-width: var(--ez-badge--size-sm, 20px);
+    padding-top: var(--ez-badge--padding-sm);
+    padding-bottom: var(--ez-badge--padding-sm);
+    padding-right: var(--ez-badge--padding-xl);
+    padding-left: var(--ez-badge--padding-xl);
+    font-size: var(--ez-badge--font-size-md);
+}
+.badge__content--text-sm {
+    /*public*/
+    height: calc(var(--ez-badge--size-sm, 16px) - 2px);
+    min-width: var(--ez-badge--size-sm, 16px);
+    padding-top: var(--ez-badge--padding-sm);
+    padding-bottom: var(--ez-badge--padding-sm);
+    padding-right: var(--ez-badge--padding-xl);
+    padding-left: var(--ez-badge--padding-xl);
+    font-size: var(--ez-badge--font-size-sm);
+}
+.badge__content--text-xs {
+    /*public*/
+    height: var(--ez-badge--size-sm, 16px);
+    min-width: var(--ez-badge--size-sm, 16px);
+    padding-top: var(--ez-badge--padding-2xs);
+    padding-bottom: var(--ez-badge--padding-2xs);
+    padding-right: var(--ez-badge--padding-lg);
+    padding-left: var(--ez-badge--padding-lg);
+    font-size: var(--ez-badge--font-size-xs);
+}
+
+.badge__content--icon-lg {
+    /*public*/
+    height: var(--ez-badge--size-lg, 24px);
+    min-width: var(--ez-badge--size-lg, 24px);
+    padding: var(--ez-badge--padding-md);
+}
+.badge__content--icon-md {
+    /*public*/
+    height: var(--ez-badge--size-sm, 16px);
+    min-width: var(--ez-badge--size-sm, 16px);
+    padding: var(--ez-badge--padding-md);
+}
+.badge__content--icon-sm {
+    /*public*/
+    height: var(--ez-badge--size-sm, 16px);
+    min-width: var(--ez-badge--size-sm, 16px);
+    padding: var(--ez-badge--padding-xs);
+}
+.badge__content--icon-xs {
+    /*public*/
+    height: var(--ez-badge--size-xs, 12px);
+    min-width: var(--ez-badge--size-xs, 12px);
+    padding: var(--ez-badge--padding-xs);
+}
+
+.badge__content--fill {
+    /*public*/
+    position: absolute;
+    top: 0;
+    inset-inline-end: 0;
+
+    /*private*/
+    z-index: var(--most-visible, 2);
+}
+.badge__content--fill-top-right {
+    /*public*/
+    transform: translate(50%, -50%);
+
+    /*private*/
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+.badge__content--fill-top-left {
+    /*public*/
+    transform: translate(-50%, -50%);
+
+    /*private*/
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.badge__content--fill-bottom-left {
+    /*public*/
+    transform: translate(-50%, 50%);
+
+    /*private*/
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+.badge__content--fill-bottom-right {
+    /*public*/
+    transform: translate(50%, 50%);
+
+    /*private*/
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}

package/dist/collection/components/ez-badge/ez-badge.js

@@ -0,0 +1,211 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h, Host } from "@stencil/core";
+import { Sizes } from "./enum/sizes";
+export class EzBadge {
+  constructor() {
+    this._sizes = {
+      [Sizes.EXTRA_LARGE]: {
+        sufix: "xl",
+      },
+      [Sizes.LARGE]: {
+        sufix: "lg",
+      },
+      [Sizes.MEDIUM]: {
+        sufix: "md",
+      },
+      [Sizes.SMALL_MEDIUM]: {
+        sufix: "sm",
+      },
+      [Sizes.SMALL]: {
+        sufix: "xs",
+      },
+      [Sizes.EXTRA_SMALL]: {
+        sufix: "2xs",
+      },
+    };
+    this.hasSlot = false;
+    this.size = "small";
+    this.label = undefined;
+    this.iconLeft = undefined;
+    this.iconRight = undefined;
+    this.position = { horizontal: "right", vertical: "top" };
+  }
+  getIconSize() {
+    switch (this.size) {
+      case "large":
+        return "large";
+      case "medium":
+      case "small-medium":
+        return "small";
+      case "small":
+        return "x-small";
+      default:
+        return null;
+    }
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._badge) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._badge, 'ezBadge', dataInfo);
+    }
+  }
+  handleSlotChange() {
+    this.hasSlot = true;
+  }
+  validateIconLeft() {
+    return (this.iconLeft) && this.iconLeft.trim() !== "";
+  }
+  validateIconRight() {
+    return (this.iconRight) && this.iconRight.trim() !== "";
+  }
+  validateLabel() {
+    return (this.label) && this.label.trim() !== "";
+  }
+  createContainerClassName() {
+    let sizeSufix = this._sizes[this.size].sufix;
+    let containerClassNames = ["badge__content"];
+    if (this.hasSlot) {
+      containerClassNames.push("badge__content--fill-" + sizeSufix);
+      if (this.position.vertical == "bottom" && this.position.horizontal == "right") {
+        containerClassNames.push("badge__content--fill-bottom-right");
+      }
+      if (this.position.vertical == "bottom" && this.position.horizontal == "left") {
+        containerClassNames.push("badge__content--fill-bottom-left");
+      }
+      if (this.position.vertical == "top" && this.position.horizontal == "right") {
+        containerClassNames.push("badge__content--fill-top-right");
+      }
+      if (this.position.vertical == "top" && this.position.horizontal == "left") {
+        containerClassNames.push("badge__content--fill-top-left");
+      }
+    }
+    if (this.label) {
+      containerClassNames.push("badge__content--text-" + sizeSufix);
+    }
+    else if (this.iconLeft || this.iconRight) {
+      containerClassNames.push("badge__content--icon-" + sizeSufix);
+    }
+    else {
+      containerClassNames.push("badge__content--fill-" + sizeSufix);
+    }
+    return containerClassNames.join(" ");
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "badge" }, h("div", null, h("slot", { name: "child-badge", onSlotchange: () => { this.handleSlotChange(); } })), h("div", { class: this.createContainerClassName(), ref: (el) => this._badge = el }, this.validateIconLeft() && h("ez-icon", { class: "icon", iconName: this.iconLeft, size: this.getIconSize() }), this.validateLabel() && h("label", { title: this.label }, this.label), this.validateIconRight() && h("ez-icon", { class: "icon", iconName: this.iconRight, size: this.getIconSize() })))));
+  }
+  static get is() { return "ez-badge"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-badge.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-badge.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"extra-large\" | \"large\" | \"medium\" | \"small-medium\" | \"small\" | \"extra-small\"",
+          "resolved": "\"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\" | \"small-medium\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho de acordo com o tipo utilizado pelo componente."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"small\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o conte\u00FAdo textual ou num\u00E9rico do componente."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "iconLeft": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone a ser usado no lado esquerdo do badge: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
+        },
+        "attribute": "icon-left",
+        "reflect": true
+      },
+      "iconRight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o \u00EDcone a ser usado no lado direito do badge: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
+        },
+        "attribute": "icon-right",
+        "reflect": true
+      },
+      "position": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "IPosition",
+          "resolved": "IPosition",
+          "references": {
+            "IPosition": {
+              "location": "import",
+              "path": "./interfaces/IPosition"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a posi\u00E7\u00E3o do \u00EDcone em rela\u00E7\u00E3o ao elemento filho."
+        },
+        "defaultValue": "{ horizontal: \"right\", vertical: \"top\" }"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasSlot": {}
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/ez-badge/interfaces/IPosition.js

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

package/dist/collection/components/ez-breadcrumb/ez-breadcrumb.css

@@ -0,0 +1,66 @@
+:host {
+  /*@doc Define a cor da fonte do link, com exceção do último.*/
+  --breadcrumb__item--label--color--title-primary: var(--color--title-primary, #2B3A54);
+  /*@doc Define a cor da fonte do último link*/
+  --breadcrumb__item--label--color--active: var(--color--primary, '#008561');
+  /*@doc Define o peso da fonte.*/
+  --breadcrumb__item--label--font-weight: var(--text-weight--large, 600);
+
+  display: block;
+  font-size: var(--text--medium, 14px);
+  font-family: var(--font-pattern, "Roboto"); 
+  font-weight: var(--text-weight--medium, 400);
+}
+
+.breadcrumb {
+  display: flex;
+}
+
+.breadcrumb__group{
+  display: flex;
+}
+
+.breadcrumb__list {
+  list-style-type: none; 
+  display: inline-block; 
+  margin: 0; 
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.breadcrumb__item--label{
+  color: var(--breadcrumb__item--label--color--title-primary);
+  margin: 0px;
+}
+
+.breadcrumb__item--icon {
+  padding-right: 3px;
+  color: var(--breadcrumb__item--label--color--title-primary);
+}
+
+.breadcrumb__item--chevron{
+  padding: 0px 6px;
+  cursor: default;
+}
+
+.active{
+  color: var(--breadcrumb__item--label--color--active);
+  font-weight: var(--breadcrumb__item--label--font-weight);
+  cursor: default;
+}
+
+.active-icon{
+  --icon--color: var(--breadcrumb__item--label--color--active);
+  cursor: default;
+}
+
+.breadcrumb__items{
+  display: flex;
+}