@sankhyalabs/ezui 4.2.1 → 4.4.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

@@ -12,6 +12,10 @@
   font-weight: var(--text-weight--medium, 400);
 }
 
+.breadcrumb {
+  display: flex;
+}
+
 .breadcrumb__group{
   display: flex;
 }

package/dist/collection/components/ez-breadcrumb/subcomponents/breadcrumb-item.js

@@ -3,15 +3,7 @@ import { ElementIDUtils } from '@sankhyalabs/core';
 export const BreadcrumbItem = (props) => {
   const { items, selectedItem, itemsHidden, showDropdown, handleShowDropdown, collapseConfigPosition, ellipsesPositionedEnd } = props;
   const formatDropdownItems = () => {
-    return itemsHidden.map((item) => ({
-      id: item.id,
-      label: item.label,
-      type: 'item',
-      children: null,
-      iconName: item.iconName || null,
-      subAction: null,
-      group: null
-    }));
+    return itemsHidden.map((item) => (Object.assign(Object.assign({}, item), { type: 'item', children: null, iconName: item.iconName || null, subAction: null, group: null })));
   };
   const onClickEllipsis = (evt) => {
     evt.stopPropagation();
@@ -19,10 +11,7 @@ export const BreadcrumbItem = (props) => {
   };
   const createEllipsis = (item) => {
     return (h("li", Object.assign({ class: "breadcrumb__item", onClick: evt => onClickEllipsis(evt) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezBreadcrumbItem_ellipsis`) }), ellipsesPositionedEnd && h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` })), h("span", { class: "ellipses__item" }, "..."), ellipsesPositionedEnd || h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` })), showDropdown &&
-      h("ez-dropdown", Object.assign({ class: "dropdown-ellipsis", items: formatDropdownItems(), onEzClick: (evt) => {
-          const { id, label, iconName } = evt.detail;
-          selectedItem.emit({ id, label, iconName });
-        } }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("dropdown")}` }))));
+      h("ez-dropdown", Object.assign({ class: "dropdown-ellipsis", items: formatDropdownItems(), onEzClick: (evt) => selectedItem.emit(evt.detail) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("dropdown")}` }))));
   };
   return (h("div", { class: "breadcrumb__items" }, items.map((item, index) => {
     const isLastItem = index === (items.length - 1);

package/dist/collection/components/ez-filter-input/ez-filter-input.js

@@ -20,6 +20,7 @@ export class EzFilterInput {
     this.restrict = undefined;
     this.mode = "regular";
     this.asyncSearch = false;
+    this.canShowError = true;
   }
   observeLabel() {
     if (this._textInput) {
@@ -97,7 +98,7 @@ export class EzFilterInput {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.handleChange(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode, onFocusin: this.handleFocus }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.handleChange(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode, onFocusin: this.handleFocus, canShowError: this.canShowError }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
   }
   static get is() { return "ez-filter-input"; }
   static get encapsulation() { return "shadow"; }
@@ -234,6 +235,24 @@ export class EzFilterInput {
         "attribute": "async-search",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "canShowError": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false deixa de exibir a mensagem de erro dentro do campo."
+        },
+        "attribute": "can-show-error",
+        "reflect": true,
+        "defaultValue": "true"
       }
     };
   }