@sankhyalabs/ezui 6.2.0-dev.2 → 6.2.0-dev.4

package/dist/collection/components/ez-classic-text-area/ez-classic-text-area.js

@@ -0,0 +1,479 @@
+import { h, Host } from '@stencil/core';
+import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
+export class EzClassicTextArea {
+  constructor() {
+    this.name = StringUtils.generateUUID();
+    this.label = '';
+    this.placeholder = '';
+    this.value = '';
+    this.helpText = undefined;
+    this.state = "default";
+    this.enabled = true;
+    this.readonly = false;
+    this.maxlength = undefined;
+    this.resize = 'vertical';
+    this.leftIconName = undefined;
+    this.rightIconName = undefined;
+    this.rightIconTooltip = undefined;
+    this.leftIconTooltip = undefined;
+    this.leftIconClickable = false;
+    this.rightIconClickable = false;
+    this.rows = 5;
+  }
+  /** Aplica o foco no campo. */
+  async setFocus(option) {
+    if (option === null || option === void 0 ? void 0 : option.selectText) {
+      this._textAreaElem.select();
+    }
+    if (!(option === null || option === void 0 ? void 0 : option.preventScroll)) {
+      this._textAreaElem.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+    this._textAreaElem.focus({ preventScroll: true });
+  }
+  /** Remove o foco do campo. */
+  async setBlur() {
+    this._textAreaElem.blur();
+  }
+  onBlur() {
+    this.ezBlur.emit(this.value);
+  }
+  handleInput(event) {
+    const target = event.target;
+    this.ezChange.emit(target.value);
+  }
+  ;
+  handleIconClick(event, icon) {
+    if (!this.enabled) {
+      return;
+    }
+    if ((icon === "left" && !this.leftIconClickable) || (icon === "right" && !this.rightIconClickable)) {
+      this.setFocus({ preventScroll: true });
+      return;
+    }
+    event.stopPropagation();
+    this.iconClick.emit({ icon });
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._textAreaElem) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._textAreaElem, 'classic-text-area', dataInfo);
+    }
+  }
+  componentDidLoad() {
+    this.addInfoId();
+  }
+  render() {
+    return (h(Host, null, this.label && (h("label", { title: this.label, htmlFor: this.name }, this.label)), h("div", { class: "text-area-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), "data-resize": this.resize, onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("textarea", { ref: (el) => (this._textAreaElem = el), id: this.name, name: this.name, placeholder: this.placeholder, value: this.value, disabled: !this.enabled, readOnly: this.readonly, maxLength: this.maxlength, rows: this.rows, onInput: this.handleInput.bind(this), onBlur: this.onBlur.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (h("span", { title: this.helpText }, this.helpText))));
+  }
+  static get is() { return "ez-classic-text-area"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-classic-text-area.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-classic-text-area.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome da textarea"
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "StringUtils.generateUUID()"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Texto do r\u00F3tulo exibido acima da \u00E1rea de texto"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Texto de placeholder exibido quando a \u00E1rea de texto est\u00E1 vazia"
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Valor atual da \u00E1rea de texto"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "helpText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Texto de ajuda exibido abaixo da textarea"
+        },
+        "attribute": "help-text",
+        "reflect": false
+      },
+      "state": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"error\" | \"success\" | \"warning\"",
+          "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Estado visual da textarea: default, error, success ou warning"
+        },
+        "attribute": "state",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se a textarea est\u00E1 habilitada"
+        },
+        "attribute": "enabled",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Se a \u00E1rea de texto \u00E9 somente leitura"
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "maxlength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "N\u00FAmero m\u00E1ximo de caracteres permitidos"
+        },
+        "attribute": "maxlength",
+        "reflect": false
+      },
+      "resize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'none' | 'both' | 'horizontal' | 'vertical'",
+          "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Comportamento de redimensionamento da \u00E1rea de texto"
+        },
+        "attribute": "resize",
+        "reflect": false,
+        "defaultValue": "'vertical'"
+      },
+      "leftIconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome do \u00EDcone \u00E0 esquerda"
+        },
+        "attribute": "left-icon-name",
+        "reflect": false
+      },
+      "rightIconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome do \u00EDcone \u00E0 direita"
+        },
+        "attribute": "right-icon-name",
+        "reflect": false
+      },
+      "rightIconTooltip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "T\u00EDtulo do \u00EDcone \u00E0 direita (tooltip)"
+        },
+        "attribute": "right-icon-tooltip",
+        "reflect": false
+      },
+      "leftIconTooltip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "T\u00EDtulo do \u00EDcone \u00E0 esquerda (tooltip)"
+        },
+        "attribute": "left-icon-tooltip",
+        "reflect": false
+      },
+      "leftIconClickable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o \u00EDcone da esquerda \u00E9 clic\u00E1vel"
+        },
+        "attribute": "left-icon-clickable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "rightIconClickable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o \u00EDcone da direita \u00E9 clic\u00E1vel"
+        },
+        "attribute": "right-icon-clickable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "rows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o n\u00FAmero de linhas da \u00E1rea de texto"
+        },
+        "attribute": "rows",
+        "reflect": false,
+        "defaultValue": "5"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido quando o valor da \u00E1rea de texto muda"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "ezBlur",
+        "name": "ezBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido quando a \u00E1rea de texto perde foco"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "iconClick",
+        "name": "iconClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando um \u00EDcone \u00E9 clicado.\nPayload: { icon: \"left\" | \"right\" }"
+        },
+        "complexType": {
+          "original": "{ icon: \"left\" | \"right\" }",
+          "resolved": "{ icon: \"left\" | \"right\"; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(option?: OptionsSetFocus) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "OptionsSetFocus": {
+              "location": "import",
+              "path": "./interfaces/optionsSetFocus"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no campo.",
+          "tags": []
+        }
+      },
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o foco do campo.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/ez-classic-text-area/interfaces/optionsSetFocus.js

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

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

@@ -3,7 +3,7 @@
   overflow: hidden;
   position: relative;
   /* @doc Define a cor do ícone. */
-  --ez-icon--color: var(--icon--color, #ffffff);
+  --ez-icon--color: var(--icon--color, var(--color--gray-70, #ffffff));
 }
 
 svg {
@@ -14,28 +14,28 @@ svg {
 }
 
 .x-small {
-  width: 12px;
-  height: 12px;
+  width: var(--space--12, 12px);
+  height: var(--space--12, 12px);
 }
 
 .small {
-  width: 16px;
-  height: 16px;
+  width: var(--space--16, 16px);
+  height: var(--space--16, 16px);
 }
 
 .medium {
-  width: 20px;
-  height: 20px;
+  width: var(--space--20, 20px);
+  height: var(--space--20, 20px);
 }
 
 .large {
-  width: 24px;
-  height: 24px;
+  width: var(--space--24, 24px);
+  height: var(--space--24, 24px);
 }
 
 .x-large {
-  width: 30px;
-  height: 30px;
+  width: var(--space--30, 30px);
+  height: var(--space--30, 30px);
 }
 
 [class^="ez-icon-"], [class*=" ez-icon-"] {
@@ -48,8 +48,8 @@ svg {
 */
 [class^="ez-icon-"], [class*=" ez-icon-"] {
   font-family: 'ez-icons' !important;
-  font-size:16px;
-  font-style:normal;
+  font-size: var(--font-size--medium, 16px);
+  font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -1399,21 +1399,26 @@ svg {
 */
 
 .x-small--font {
-  font-size: 12px;
+  font-size: var(--font-size--small, 12px);
+  line-height: var(--line-height--16, 16px);
 }
 
 .small--font {
-  font-size: 16px;
+  font-size: var(--font-size--medium, 16px);
+  line-height: var(--line-height--20, 20px);
 }
 
 .medium--font {
-  font-size: 20px;
+  font-size: var(--font-size--xlarge, 20px);
+  line-height: var(--line-height--24, 24px);
 }
 
 .large--font {
-  font-size: 24px;
+  font-size: var(--font-size--xxxlarge, 24px);
+  line-height: var(--line-height--28, 28px);
 }
 
 .x-large--font {
-  font-size: 30px;
+  font-size: var(--font-size--6xlarge, 30px);
+  line-height: var(--line-height--34, 34px);
 }

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

@@ -7,7 +7,7 @@
   /*@doc Define a margem do componente.*/
   --ez-tree--margin: var(--space--extra-small, 3px);
   /*@doc Define a margem da direita do componente.*/
-  --ez-tree--margin-right: calc(var(--space--small, 6px) + 2px);
+  --ez-tree--margin-right: 0px;
   
   /* Fontes e cor de ícones*/
   /*@doc Define a família da fonte.*/
@@ -74,6 +74,7 @@ ul {
   /*private*/
   list-style-type: none;
   margin: 0;
+  cursor: default;
 
   /*public*/
   padding-inline-start: var(--ez-tree--padding-inline-start);
@@ -122,12 +123,14 @@ ul.first-level {
 .item-label-container {
   display: flex;
   align-items: center;
+  overflow: hidden;
 }
 
 .tree-item {
   /*private*/
   display: flex;
   align-items: center;
+  cursor: pointer;
   
   /*public*/
   margin-top: var(--ez-tree--margin);

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

@@ -7,7 +7,7 @@ import initI18n from '../../utils/i18n';
 export class EzTree {
   constructor() {
     this._onItemClick = (item) => {
-      this.value = item;
+      this._onIconClick(item);
     };
     this._onIconClick = (item) => {
       this.openClose(item);
@@ -20,6 +20,7 @@ export class EzTree {
     this.selectedId = undefined;
     this.iconResolver = defaultIconResolver;
     this.tooltipResolver = undefined;
+    this.enableHierarchicalFilter = true;
   }
   /**
    * Efetua a seleção de um item.
@@ -79,7 +80,7 @@ export class EzTree {
    * Efetua a seleção de um item.
    */
   async applyFilter(pattern) {
-    this._tree.setFilterPattern(pattern);
+    await this._tree.setFilterPattern(pattern, this.enableHierarchicalFilter);
   }
   /**
    * Atualiza um item
@@ -396,6 +397,24 @@ export class EzTree {
           "tags": [],
           "text": "Define uma fun\u00E7\u00E3o que vai resolver o `tooltip` ou `title` daquele item."
         }
+      },
+      "enableHierarchicalFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se a \u00E1rvore deve permitir a filtragem hier\u00E1rquica."
+        },
+        "attribute": "enable-hierarchical-filter",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

package/dist/collection/components/ez-tree/subcomponents/TreeItem.js

@@ -14,12 +14,18 @@ export const TreeItem = (props) => {
   if (available) {
     itemsList.push(treeItem);
   }
+  function handleIconClick(event) {
+    event.stopPropagation();
+    if (available) {
+      iconClick(treeItem);
+    }
+  }
   return (h("ul", { class: level === 1 ? "first-level" : undefined }, h("li", Object.assign({ title: tooltipResolver(treeItem, !disabled, level), class: `tree-item ${treeItem.id !== selectedId ? "tree-item-error" : ""}`, onClick: () => available && itemClick(treeItem), onDblClick: () => available && itemDoubleClick(treeItem) }, {
     disabled,
     selected: treeItem.id === selectedId,
     [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezTreeItem_${treeItem.id}`)
   }), h("div", { class: "item-label-container" }, h("div", { class: "item-icon-box" }, expandable &&
-    h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: () => available && iconClick(treeItem) })), h("label", { class: `item-label ${treeItem.bold ? "item-label--bold" : ""}` }, treeItem.label)), getBadgeElement(treeItem.id, treeItem.badge, treeItem.id === selectedId)), expanded
+    h("ez-icon", { id: treeItem.id, class: "item-icon", size: "small", iconName: iconResolver(treeItem, expanded, level), onClick: (event) => handleIconClick(event) })), h("label", { class: `item-label ${treeItem.bold ? "item-label--bold" : ""}` }, treeItem.label)), getBadgeElement(treeItem.id, treeItem.badge, treeItem.id === selectedId)), expanded
     && node.getChildren().map(child => h(TreeItem, { selectedId: selectedId, node: child, itemClick: itemClick, iconClick: iconClick, level: level + 1, iconResolver: iconResolver, tooltipResolver: tooltipResolver, itemsList: itemsList, itemDoubleClick: itemDoubleClick }))));
 };
 function getBadgeElement(itemId, badge, isSelectedItem) {