@sankhyalabs/ezui 1.1.133 → 1.1.136

package/dist/collection/components/{ez-label-chip/ez-label-chip.js → ez-chip/ez-chip.js}

@@ -1,14 +1,10 @@
 import { Component, Prop, h, Method, Watch, Event } from "@stencil/core";
-export class EzLabelChip {
+export class EzChip {
   constructor() {
     /**
      * Deixa o componente disponível ou não para seleção.
      */
     this.enabled = true;
-    /**
-     * Indica se o componente terá a opção de ser removido.
-     */
-    this.removable = false;
     /**
      * Indica se o componente está ou não ativado.
      */
@@ -32,28 +28,44 @@ export class EzLabelChip {
   //---------------------------------------------
   // 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 (target.assignedSlot === null && !target.classList.contains("label__icon")) {
-      this.valueChange.emit(this.value);
-      this.swichState();
-    }
+    if (!this.enabled)
+      return;
+    if (this.mode === "action")
+      return this.actionClick.emit();
+    if (target.tagName.toLowerCase() !== "ez-icon")
+      return this.handleValueChange();
+    if (target.classList.contains("btn-close"))
+      return this.removeChip.emit();
   }
   swichState() {
     if (this.enabled) {
       this.value = !this.value;
     }
   }
-  reflectChange() {
-    if (this._divElem) {
-      this._divElem.classList.remove("label__container--active");
-      this._divElem.classList.remove("label__container");
-      if (this.value) {
-        this._divElem.classList.add("label__container--active");
-      }
-      else {
-        this._divElem.classList.add("label__container");
-      }
+  observeValue() {
+    (this.value && this.mode !== "action") ? this._divElem.classList.add("label__container--active") : this._divElem.classList.remove("label__container--active");
+  }
+  observeEnabled() {
+    if (this.enabled) {
+      this._divElem.classList.remove("label__container--disabled");
+      this._labelElem.classList.remove("lbl--disabled");
+      this._labelElem.classList.remove("cursor-disable");
+    }
+    else {
+      this._divElem.classList.add("label__container--disabled");
+      this._labelElem.classList.add("lbl--disabled");
+      this._labelElem.classList.add("cursor-disable");
     }
   }
   //---------------------------------------------
@@ -61,40 +73,25 @@ export class EzLabelChip {
   //---------------------------------------------
   componentDidLoad() {
     if (this._divElem) {
-      if (this.value) {
-        this._divElem.classList.add("label__container--active");
-      }
-      else {
-        this.handleEnabledState();
-      }
-    }
-  }
-  handleEnabledState() {
-    this._divElem.classList.remove("label__container--disabled");
-    if (!this.enabled) {
-      this._divElem.classList.remove("label__container");
-      this._divElem.classList.add("label__container--disabled");
-      if (this._labelElem) {
-        this._labelElem.style.cursor = "default";
-      }
+      this.observeValue();
+      this.observeEnabled();
     }
   }
   render() {
-    return (h("div", { onClick: (ev) => this.handleClick(ev), class: this.value ? "label__container--active" : "label__container", ref: (el) => this._divElem = el },
-      h("slot", { name: "leftIcon" }),
-      h("label", { ref: (el) => this._labelElem = el }, this.label),
-      this.removable ?
-        h("button", { class: "btn-close", onClick: () => { this.removeChip.emit(); } })
-        : null,
-      h("slot", { name: "rightIcon" })));
+    return (h("div", { onClick: (ev) => this.handleClick(ev), class: "label__container" + (this.removePosition === "left" ? " label__container--row-reverse" : ""), ref: (el) => this._divElem = 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 }, this.label),
+        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" })));
   }
-  static get is() { return "ez-label-chip"; }
+  static get is() { return "ez-chip"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["ez-label-chip.css"]
+    "$": ["ez-chip.css"]
   }; }
   static get styleUrls() { return {
-    "$": ["ez-label-chip.css"]
+    "$": ["ez-chip.css"]
   }; }
   static get properties() { return {
     "label": {
@@ -132,23 +129,39 @@ export class EzLabelChip {
       "reflect": true,
       "defaultValue": "true"
     },
-    "removable": {
-      "type": "boolean",
+    "removePosition": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "\"left\" | \"right\"",
+        "resolved": "\"left\" | \"right\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indica se o componente ter\u00E1 a op\u00E7\u00E3o de ser removido."
+        "text": "Indica se o componente ter\u00E1 a op\u00E7\u00E3o de ser removido e qual sua posi\u00E7\u00E3o: left ou right."
       },
-      "attribute": "removable",
-      "reflect": true,
-      "defaultValue": "false"
+      "attribute": "remove-position",
+      "reflect": true
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"label\" | \"action\"",
+        "resolved": "\"action\" | \"label\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o modo de uso do cjip: label ou action"
+      },
+      "attribute": "mode",
+      "reflect": true
     },
     "value": {
       "type": "boolean",
@@ -195,14 +208,24 @@ export class EzLabelChip {
         "text": "Evento disparado ao clicar no bot\u00E3o de remo\u00E7\u00E3o (onRemoveChip)."
       },
       "complexType": {
-        "original": "ClickOptions",
-        "resolved": "ClickOptions",
-        "references": {
-          "ClickOptions": {
-            "location": "import",
-            "path": "puppeteer"
-          }
-        }
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "actionClick",
+      "name": "actionClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado ao clicar no chip usando o modo \"action\" (onActionClick)."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
       }
     }]; }
   static get methods() { return {
@@ -241,9 +264,9 @@ export class EzLabelChip {
   }; }
   static get watchers() { return [{
       "propName": "value",
-      "methodName": "reflectChange"
+      "methodName": "observeValue"
     }, {
       "propName": "enabled",
-      "methodName": "handleEnabledState"
+      "methodName": "observeEnabled"
     }]; }
 }

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -7,6 +7,8 @@
   --ez-collapsible-box--font-weight: var(--text-weight--large, 600);
   /*@doc Define a cor da fonte do header.*/
   --ez-collapsible-box--color: var(--title--primary);
+   /*@doc Define a cor do texto e do ícone quando o componente está focado.*/
+   --ez-collapsible-box--focus--color: var(--color--primary-600);
   /*@doc Define a cor do chevron.*/
   --ez-collapsible-box__icon--color: var(--ez-collapsible-box--color);
   /*@doc Define o espaçamento superior ao header.*/
@@ -27,6 +29,10 @@
   width: 100%;
 }
 
+ez-icon {
+  --ez-icon--color: inherit;
+}
+
 .collapsible-box {
   /*private*/
   display: flex;
@@ -61,9 +67,17 @@
   text-align: left;
 
   /*public*/
+  color: var(--ez-collapsible-box--color);
+  --ez-icon--color: var(--ez-collapsible-box__icon--color);
   margin-bottom: var(--space--medium, 12px);
 }
 
+.collapsible-box__title:focus {
+  /*public*/
+  color: var(--ez-collapsible-box--focus--color);
+  --ez-icon--color: var(--ez-collapsible-box--focus--color);
+}
+
 .collapsible-box__label {
   /*private*/
   white-space: nowrap;
@@ -77,7 +91,6 @@
   font-family: var(--ez-collapsible-box--font-family);
   font-size: var(--ez-collapsible-box--font-size);
   font-weight: var(--ez-collapsible-box--font-weight);
-  color: var(--ez-collapsible-box--color);
 }
 
 .collapsible-box__icon {
@@ -86,7 +99,6 @@
 
   /*public*/
   transition: transform var(--transition);
-  --ez-icon--color: var(--ez-collapsible-box__icon--color, --ez-collapsible-box--color);
 }
 
 .collapsible-box__icon--collapsed {

package/dist/collection/components/ez-grid/subcomponents/gridconfig/grid-config.js

@@ -1,6 +1,5 @@
 import { StringUtils } from '@sankhyalabs/core';
 import { Component, Event, h, Host, Prop } from '@stencil/core';
-import { getSpritePath } from '../../../../utils/AssetsUtils';
 import ApplicationUtils from '../../../../utils/ApplicationUtils';
 export class GridConfig {
   constructor() {
@@ -425,12 +424,12 @@ export class GridConfig {
             h("label", { class: "title" }, "Configura\u00E7\u00E3o da Grade"),
             h("label", { class: "subtitle" }, "Defina visibilidade e ordem das colunas.")),
           h("div", { class: "button-close" },
-            h("ez-button", { mode: 'icon', image: getSpritePath("close"), size: 'medium', onClick: () => this.closeConfig() }))),
+            h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))),
         h("div", { class: "tabselector-container" },
           h("ez-tabselector", { selectedTab: this.selectedTab, selectedIndex: 0, onEzChange: (ev) => { this.handleTabChange(ev); }, tabs: 'Colunas, Ordena\u00E7\u00E3o das linhas' })),
         h("div", null,
           h("ez-text-input", { ref: (el) => this._searchElement = el, label: "Localizar coluna", onKeyUp: evt => this.locateColumn(evt) },
-            h("ez-icon", { slot: "leftIcon", size: "medium", href: getSpritePath("search") })))),
+            h("ez-icon", { slot: "leftIcon", size: "medium", iconName: "search" })))),
       h("div", { class: "grid-config__main" },
         h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedTab === "Colunas" ? "" : "hidden", dataSource: this._columListItems, onEzChange: ev => this.handleColumnListChange(ev), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }),
         h("div", { class: this.selectedTab === "Ordenação das linhas" ? "group-name" : "hidden" }, "Sequ\u00EAncia da ordena\u00E7\u00E3o"),

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

@@ -98,7 +98,7 @@ export class EzTextInput {
         this.errorMessage = e.message;
       }
     }
-    this.value = this._inputElem.value;
+    this.canChangeValue();
     this.adjustFloatingLabel();
   }
   isValidValue(value) {
@@ -107,6 +107,11 @@ export class EzTextInput {
     }
     return true;
   }
+  canChangeValue() {
+    if ((this.value || '') !== this._inputElem.value) {
+      this.value = this._inputElem.value;
+    }
+  }
   handleChange() {
     if (!this._inputElem) {
       return;
@@ -118,7 +123,7 @@ export class EzTextInput {
     else {
       this._inputElem.value = this._lastValidValue === undefined ? "" : this._lastValidValue;
     }
-    this.value = this._inputElem.value;
+    this.canChangeValue();
   }
   handleSlotChange(ev) {
     const slot = ev.target;

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

@@ -1,7 +1,6 @@
 import { Element, Component, Prop, h, Watch, Host, Method } from "@stencil/core";
 import { TimeFormatter, MaskFormatter, NumberUtils } from "@sankhyalabs/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
-import { getSpritePath } from "../../utils/AssetsUtils";
 export class EzTimeInput {
   constructor() {
     /**
@@ -103,7 +102,7 @@ export class EzTimeInput {
   render() {
     return (h(Host, null,
       h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage, mode: this.mode },
-        h("ez-icon", { slot: "leftIcon", href: getSpritePath("timer-outline") }))));
+        h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
   }
   static get is() { return "ez-time-input"; }
   static get encapsulation() { return "shadow"; }

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

@@ -51,6 +51,7 @@
   display: flex;
   flex-wrap: wrap;
   position: relative;
+  padding-bottom: 16px;
 
   /*public*/
   font-family: var(--ez-upload--font-family);

package/dist/custom-elements/index.d.ts

@@ -2,12 +2,6 @@
 
 import type { Components, JSX } from "../types/components";
 
-interface EzActionChip extends Components.EzActionChip, HTMLElement {}
-export const EzActionChip: {
-  prototype: EzActionChip;
-  new (): EzActionChip;
-};
-
 interface EzApplication extends Components.EzApplication, HTMLElement {}
 export const EzApplication: {
   prototype: EzApplication;
@@ -32,6 +26,12 @@ export const EzCheck: {
   new (): EzCheck;
 };
 
+interface EzChip extends Components.EzChip, HTMLElement {}
+export const EzChip: {
+  prototype: EzChip;
+  new (): EzChip;
+};
+
 interface EzCollapsibleBox extends Components.EzCollapsibleBox, HTMLElement {}
 export const EzCollapsibleBox: {
   prototype: EzCollapsibleBox;
@@ -86,12 +86,6 @@ export const EzIcon: {
   new (): EzIcon;
 };
 
-interface EzLabelChip extends Components.EzLabelChip, HTMLElement {}
-export const EzLabelChip: {
-  prototype: EzLabelChip;
-  new (): EzLabelChip;
-};
-
 interface EzList extends Components.EzList, HTMLElement {}
 export const EzList: {
   prototype: EzList;