@sankhyalabs/ezui 6.1.0-dev.30 → 6.1.0-dev.32

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

@@ -4,8 +4,10 @@ export class EzAvatar {
   constructor() {
     this.DECIMAL_PARSE_BASE = 10;
     this.FONT_SIZE_BASE_CALC = 0.375;
+    this.DEFAULT_ICON_NAME = "account-outline";
     this.name = undefined;
     this.imageSrc = undefined;
+    this.iconName = undefined;
     this.size = '100';
     this.shape = 'circle';
     this.isInteractive = false;
@@ -23,13 +25,14 @@ export class EzAvatar {
     return `avatar avatar--${this.size} avatar--${this.shape} ${this.imageSrc ? 'avatar--has-image' : ''}`;
   }
   renderAvatarContent() {
+    var _a;
     if (this.imageSrc) {
       return h("img", { src: this.imageSrc, alt: this.name || 'Avatar', class: "avatar-image" });
     }
     if (this.name) {
       return h("span", { class: "avatar-initial", "aria-hidden": "true" }, this.getInitial());
     }
-    return h("ez-icon", { class: "avatar-icon", iconName: "account-outline", fontSize: this.calcFontSize() });
+    return h("ez-icon", { class: "avatar-icon", iconName: (_a = this.iconName) !== null && _a !== void 0 ? _a : this.DEFAULT_ICON_NAME, fontSize: this.calcFontSize() });
   }
   async componentWillLoad() {
     this.i18n = await initI18n();
@@ -88,6 +91,23 @@ export class EzAvatar {
         "attribute": "image-src",
         "reflect": true
       },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome do \u00EDcone que deve ser exibido no avatar."
+        },
+        "attribute": "icon-name",
+        "reflect": true
+      },
       "size": {
         "type": "string",
         "mutable": false,

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

@@ -1,21 +1,21 @@
 :host {
   /* dimensions */
   /*@doc Define a altura do chip.*/
-  --ez-label-chip--height: 30px;
+  --ez-label-chip--height: 32px;
 
   /* Label */
   /*@doc Define o tamanho do label.*/
-  --ez-label-chip__label--font-size: var(--text--medium, 14px);
+  --ez-label-chip__label--font-size: var(--font-size--default, 14px);
   /*@doc Define a família da fonte do label.*/
   --ez-label-chip__label--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso da fonte do label.*/
-  --ez-label-chip__label--font-weight: var(--text-weight--medium, 400);
+  --ez-label-chip__label--font-weight: var(--font-weight--regular, 400);
   /*@doc Define o espaçamento do label.*/
-  --ez-label-chip__label--space--medium: var(--space--medium, 12px);
+  --ez-label-chip__horizontal-padding: var(--space--8, 8px);
   /*@doc Define a cor do texto.*/
-  --ez-label-chip__label--title--primary: var(--title--primary, #2B3A54);
+  --ez-label-chip__label--text--primary: var(--color--gray-70, #FFFFFF);
   /*@doc Define a cor do ícone.*/
-  --ez-label-chip__label--text--primary: var(--text--primary, #626e82);
+  --ez-label-chip__label--icon--primary: var(--color--gray-70, #FFFFFF);
 
   /* Label Container */
   /*@doc Define o raio da borda do container do chip.*/
@@ -23,53 +23,46 @@
   /*@doc Define o estilo da borda do container.*/
   --ez-label-chip__label__container--border: 1px solid;
   /*@doc Define a cor da borda do container.*/
-  --ez-label-chip__label__container--border-color-strokes: var(--color--strokes, #DCE0E8);
+  --ez-label-chip__label__container--border-color-strokes: transparent;
   /*@doc Define a cor do texto, do ícone do label e do botão de remoção (quando o chip está ativo).*/
   --ez-label-chip__label__container--color-primary: var(--color--primary, #008561);
   /*@doc Define a cor da borda e do fundo quando o chip está desativado.*/
-  --ez-label-chip__label__container-color--disable-secondary: var(--color--disable-secondary, #F2F5F8);
-  /*@doc Define a cor de fundo do container quando ativo.*/
-  --ez-label-chip__label__container--background-color: var(--color--primary-300);
+  --ez-label-chip__label__container-color--disable-secondary: var(--color--gray-80, #F9F9F9);
+  /*@doc Define a cor de fundo do container.*/
+  --ez-label-chip__label__container--background-color: var(--color--ocean-green-600, #008561);
   /*@doc Define a cor da borda do container quando ativo.*/
   --ez-label-chip__label__container--border-color: #0085610F;
-  /*@doc Define a cor da borda do container quando o cursor está sobre ele.*/
-  --ez-label-chip__label__container--default--border-color--active: var(--color--primary, #007a5a);
-  /*@doc Define a cor do fundo do container quando o cursor está sobre ele.*/
-  --ez-label-chip__label__container--default--background-color--hover: var(--color--primary-300, #f2faf8);
+    /*@doc Define a cor da borda do container quando ativo.*/
+  --ez-label-chip__label__container--border-color-active: transparent;
+  /*@doc Define a cor do fundo do container quando o cursor está ativo.*/
+  --ez-label-chip__label__container--default--background-color--active: var(--color--ocean-green-700, #00684C);
   /*@doc Define a cor do texto quando o cursor está sobre ele.*/
-  --ez-label-chip__label__container--default--color--hover: var(--color--primary, #f2faf8);
+  --ez-label-chip__label__container--default--color--active: var(--color--gray-70, #FFFFFF);
   /*@doc Define a cor do texto e do ícone quando o chip está desabilitado.*/
-  --ez-label-chip__label__container--text--disabled: var(--text--disable, #AFB6C0);
+  --ez-label-chip__label__container--text--disabled: var(--color--gray-300, #A4A5A7);
   /*@doc Define a cor da borda quando o componente está ativo.*/
-  --ez-label-chip__label__container--default--border-color--active: var(--color--primary);
+  --ez-label-chip__label__container--default--border-color--active: transparent;
   /*@doc Define a margem superior.*/
-  --ez-label-chip__label__container--default--margin-top: var(--space-extra-small, 3px);
+  --ez-label-chip__label__container--default--margin-top: var(--space-extra-small, 0px);
 }
 
-.lbl {
+.label__text {
   /*private*/
-  display: flex;
-  white-space: nowrap;
-  align-items: center;
   cursor: pointer;
+  white-space: nowrap;
   user-select: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 100%;
 
   /*public*/
-  color: var(--ez-label-chip__label--title--primary);
-  height: var(--ez-label-chip--height);
   font-family: var(--ez-label-chip__label--font-family);
   font-size: var(--ez-label-chip__label--font-size);
   font-weight: var(--ez-label-chip__label--font-weight);
 }
 
-.lbl--active {
-  /*public*/
-  color: var(--ez-label-chip__label__container--default--color--hover);
-}
-
-.lbl--disabled {
-  /*public*/
-  color: var(--ez-label-chip__label__container--text--disabled);
+.label__text--disabled {
+  cursor: not-allowed;
 }
 
 .label__container {
@@ -79,47 +72,40 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  background-color: #FFFFFF;
+  gap: var(--space--4);
   /*public*/
-  color: var(--ez-label-chip__label--text--primary);
-  fill: var(--ez-label-chip__label--text--primary);
-  --ez-icon--color: var(--ez-label-chip__label--text--primary);
+  height: var(--ez-label-chip--height);
   border: var(--ez-label-chip__label__container--border);
   border-radius: var(--ez-label-chip__label__container--border-radius);
-  border-color: var(--ez-label-chip__label__container--border-color-strokes);
-  padding-right: var(--ez-label-chip__label--space--medium);
-  padding-left: var(--ez-label-chip__label--space--medium);
+  padding: 0 var(--ez-label-chip__horizontal-padding);
   outline-color: var(--ez-label-chip__label__container--default--border-color--active);
   margin-top: var(--ez-label-chip__label__container--default--margin-top);
 }
 
-.label__content {
-  /*private*/
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  --ez-icon--color: var(--ez-label-chip__label--text--primary);
+.label__container[data-size="default"] {
+  height: var(--ez-label-chip--height, 32px);
 }
 
-.label__container--disabled {
-  cursor: default;
-  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
-  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
-  fill: var(--ez-label-chip__label__container--text--disabled);
-  color: var(--ez-label-chip__label__container--text--disabled);
-  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
+.label__container[data-size="medium"] {
+  height: 42px;
+}
+
+.label__container[data-size="large"] {
+  height: 50px;
 }
 
-.label__container--active {
-  border-color: var(--ez-label-chip__label__container--default--background-color--hover);
-  background-color: var(--ez-label-chip__label__container--default--background-color--hover);
-  color: var(--ez-label-chip__label__container--default--color--hover);
-  fill: var(--ez-label-chip__label__container--default--color--hover);
-  --ez-icon--color: var(--ez-label-chip__label__container--default--color--hover);
+.label__container--row-reverse {
+  flex-direction: row-reverse;
+}
+
+.label__container--disabled {
+  cursor: not-allowed;
 }
 
 .label__container:hover {
-  border-color: var(--ez-label-chip__label__container--default--border-color--active);
+  -webkit-transition: 150ms -webkit-filter linear;
+  transition: 150ms filter linear, 150ms -webkit-filter linear;
+  filter: brightness(90%);
 }
 
 .label__container:focus {
@@ -127,41 +113,74 @@
   box-shadow: 0 0 0 2px var(--ez-label-chip__label__container--default--border-color--active);
 }
 
-.label__container--disabled:hover {
-  cursor: default;
-  border: var(--ez-label-chip__label__container--border);
-  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
-  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
-  fill: var(--ez-label-chip__label__container--text--disabled);
-  color: var(--ez-label-chip__label__container--text--disabled);
-  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
+.label__container:active {
+  -webkit-transition: 150ms -webkit-filter linear;
+  transition: 150ms filter linear, 150ms -webkit-filter linear;
+  filter: brightness(85%);
 }
 
-.label__content__icon {
-  display: flex;
-  cursor: pointer;
+/*PRIMARY*/
+
+.label__container[data-color-type="primary"] ez-icon {
+  --ez-icon--color: var(--ez-label-chip__label--icon--primary);
+}
+
+:host .label__container[data-color-type="primary"] ::slotted(ez-icon) {
+  --ez-icon--color: var(--ez-label-chip__label--icon--primary);
+}
+
+.label__container[data-color-type="primary"][data-color-state="default"] {
+  border-color: var(--ez-label-chip__label__container--border-color-strokes);
+  background-color: var(--ez-label-chip__label__container--background-color);
   color: var(--ez-label-chip__label--text--primary);
-  fill: var(--ez-label-chip__label--text--primary);
-  --ez-icon--color: var(--ez-label-chip__label--text--primary);
 }
 
-.label__container--row-reverse{
- flex-direction: row-reverse;
+.label__container[data-color-type="primary"][data-color-state="active"] {
+  border-color: var(--ez-label-chip__label__container--border-color-active);
+  background-color: var(--ez-label-chip__label__container--default--background-color--active);
+  color: var(--ez-label-chip__label__container--default--color--active);
+}
+
+.label__container[data-color-type="primary"]:focus {
+  border-color: var(--ez-label-chip__label__container--default--border-color--active);
+}
+
+/*SECONDARY*/
+
+.label__container[data-color-type="secondary"] ez-icon {
+  --ez-icon--color: var(--color--gray-300, #A4A5A7);
+}
+
+:host .label__container[data-color-type="secondary"] ::slotted(ez-icon) {
+  --ez-icon--color: var(--color--gray-300, #A4A5A7);
 }
 
-.label__container .btn-close {
-  padding: 0px 0px 0px 8px;
+.label__container[data-color-type="secondary"][data-color-state="default"] {
+  border-color: var(--color--gray-200, #D2D2D3);
+  background-color: var(--color--gray-70);
+  color: var(--color--ocean-green-1000, #00281D);
 }
 
-.label__container--row-reverse .btn-close{
-  padding: 0px 8px 0px 0px;
- }
+.label__container[data-color-type="secondary"][data-color-state="active"] {
+  border-color: var(--color--gray-200, #D2D2D3);
+  background-color: var(--color--primary-300, #f2faf8);
+  color: var(--color--primary, #f2faf8);
+}
+
+.label__container[data-color-type="secondary"]:focus {
+  color: var(--color--primary, #007a5a);
+}
 
+/*DISABLED*/
 
-.cursor-disable{
-  cursor: default;
+.label__container[data-color-state="disabled"] {
+  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
+  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
+  color: var(--ez-label-chip__label__container--text--disabled);
+  cursor: not-allowed;
+  filter: none;
 }
 
-ez-icon {
-  --ez-icon--color: inherit;
+.label__container[data-color-state="disabled"] ez-icon {
+  --ez-icon--color: var(--ez-label-chip__label__container--text--disabled);
 }

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

@@ -1,5 +1,5 @@
-import { h } from "@stencil/core";
 import { ElementIDUtils } from '@sankhyalabs/core';
+import { h } from "@stencil/core";
 export class EzChip {
   constructor() {
     this.label = undefined;
@@ -7,8 +7,14 @@ export class EzChip {
     this.removePosition = undefined;
     this.mode = undefined;
     this.value = false;
-    this.showNativeTooltip = true;
+    this.showNativeTooltip = false;
     this.disableAutoUpdateValue = false;
+    this.maxWidth = undefined;
+    this.size = 'default';
+    this.iconNameLeft = undefined;
+    this.iconNameRight = undefined;
+    this.type = 'primary';
+    this._isOverflowing = false;
   }
   //---------------------------------------------
   // Public methods
@@ -25,54 +31,46 @@ export class EzChip {
   async setBlur() {
     this._containerElem.blur();
   }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
-  }
   handleValueChange() {
     this.swichState();
     this.valueChange.emit(this.value);
   }
-  handleClick(ev) {
-    const target = ev.target;
-    if (!this.enabled)
+  handleClick() {
+    if (!this.enabled) {
       return;
-    if (this.mode === "action")
+    }
+    if (this.mode === "action") {
       return this.actionClick.emit();
-    if (target.tagName.toLowerCase() !== "ez-icon" && !this.disableAutoUpdateValue)
+    }
+    if (!this.disableAutoUpdateValue) {
       return this.handleValueChange();
-    if (target.classList.contains("btn-close"))
-      return this.removeChip.emit();
-  }
-  swichState() {
-    if (this.enabled) {
-      this.value = !this.value;
     }
   }
-  formatLabel() {
-    if (this.label.length > ChipSize.CHAR_LIMIT) {
-      return this.label.substring(0, ChipSize.CHAR_LIMIT) + "...";
+  handleClickRemoveButton(event) {
+    if (!this.enabled) {
+      return;
     }
-    return this.label;
+    event.stopPropagation();
+    this.removeChip.emit();
   }
-  observeValue() {
-    (this.value && this.mode !== "action") ? this._containerElem.classList.add("label__container--active") : this._containerElem.classList.remove("label__container--active");
+  handleIconClick(event, icon) {
+    if (!this.enabled) {
+      return;
+    }
+    event.stopPropagation();
+    this.iconClick.emit({ icon });
   }
-  observeEnabled() {
+  swichState() {
     if (this.enabled) {
-      this._containerElem.classList.remove("label__container--disabled");
-      this._labelElem.classList.remove("lbl--disabled");
-      this._labelElem.classList.remove("cursor-disable");
+      this.value = !this.value;
     }
-    else {
-      this._containerElem.classList.add("label__container--disabled");
-      this._labelElem.classList.add("lbl--disabled");
-      this._labelElem.classList.add("cursor-disable");
+  }
+  checkIsOverflowing() {
+    if (this._labelElem) {
+      this._isOverflowing = this._labelElem.offsetWidth < this._labelElem.scrollWidth;
+      return;
     }
+    this._isOverflowing = false;
   }
   //---------------------------------------------
   // Lifecycle web component
@@ -82,14 +80,27 @@ export class EzChip {
       ElementIDUtils.addIDInfo(this._element, 'ezChip');
     }
     if (this._containerElem) {
-      this.observeValue();
-      this.observeEnabled();
       this._containerElem.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, ElementIDUtils.getInternalIDInfo('button'));
     }
+    this.checkIsOverflowing();
   }
   render() {
-    const labelTitle = this.showNativeTooltip ? this.label : undefined;
-    return (h("button", { onClick: (ev) => this.handleClick(ev), class: "label__container" + (this.removePosition === "left" ? " label__container--row-reverse" : ""), ref: (el) => this._containerElem = el }, h("div", { class: "label__content" }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("label", { class: "lbl " + (this.value ? "lbl--active " : ""), ref: (el) => this._labelElem = el, title: labelTitle }, this.formatLabel()), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })), this.mode !== 'action' && this.removePosition && h("ez-icon", { class: "btn-close", size: "small", "icon-name": "close" })));
+    let colorState = 'default';
+    if (!this.enabled) {
+      colorState = 'disabled';
+    }
+    else if (this.value && this.mode !== "action") {
+      colorState = 'active';
+    }
+    return (h("ez-tooltip", { active: this.showNativeTooltip || this._isOverflowing, message: this.label }, h("button", { ref: (el) => this._containerElem = el, class: {
+        "label__container--row-reverse": this.removePosition === "left",
+        "label__container": true,
+      }, "data-color-state": colorState, "data-color-type": this.type, "data-size": this.size, onClick: () => this.handleClick(), style: {
+        maxWidth: this.maxWidth
+      } }, this.iconNameLeft && (h("ez-icon", { size: "medium", "icon-name": this.iconNameLeft, onClick: (event) => this.handleIconClick(event, 'left') })), h("slot", { name: "leftIcon" }), h("label", { ref: (el) => this._labelElem = el, class: {
+        "label__text--disabled": !this.enabled,
+        "label__text": true,
+      } }, this.label), h("slot", { name: "rightIcon" }), this.iconNameRight && (h("ez-icon", { size: "medium", "icon-name": this.iconNameRight, onClick: (event) => this.handleIconClick(event, 'right') })), (this.mode !== 'action' && this.removePosition) && (h("ez-icon", { class: "btn-close", size: "medium", "icon-name": "close", onClick: (event) => this.handleClickRemoveButton(event) })))));
   }
   static get is() { return "ez-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -208,7 +219,7 @@ export class EzChip {
         },
         "attribute": "show-native-tooltip",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "false"
       },
       "disableAutoUpdateValue": {
         "type": "boolean",
@@ -227,9 +238,101 @@ export class EzChip {
         "attribute": "disable-auto-update-value",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "maxWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho m\u00E1ximo do chip."
+        },
+        "attribute": "max-width",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'medium' | 'large'",
+          "resolved": "\"default\" | \"large\" | \"medium\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do chip."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "iconNameLeft": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o icone esquerdo."
+        },
+        "attribute": "icon-name-left",
+        "reflect": false
+      },
+      "iconNameRight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o icone direito."
+        },
+        "attribute": "icon-name-right",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tipo de estiliza\u00E7\u00E3o do chip."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'primary'"
       }
     };
   }
+  static get states() {
+    return {
+      "_isOverflowing": {}
+    };
+  }
   static get events() {
     return [{
         "method": "valueChange",
@@ -276,6 +379,21 @@ export class EzChip {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "iconClick",
+        "name": "iconClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o icone \u00E9 acionado."
+        },
+        "complexType": {
+          "original": "{ icon: \"left\" | \"right\" }",
+          "resolved": "{ icon: \"left\" | \"right\"; }",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -315,17 +433,4 @@ export class EzChip {
     };
   }
   static get elementRef() { return "_element"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "observeValue"
-      }, {
-        "propName": "enabled",
-        "methodName": "observeEnabled"
-      }];
-  }
 }
-var ChipSize;
-(function (ChipSize) {
-  ChipSize[ChipSize["CHAR_LIMIT"] = 28] = "CHAR_LIMIT";
-})(ChipSize || (ChipSize = {}));