@sankhyalabs/ezui 6.2.0-dev.3 → 6.2.0-dev.5

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-list-item/ez-list-item.css

@@ -0,0 +1,61 @@
+:host {
+    /* @doc Define a cor do título do item da lista. */
+    --ez-list-item__title--color: var(--color--ocean-green-900, #003D2D);
+
+    /* @doc Define a cor do texto do item da lista. */
+    --ez-list-item__text--color: var(--color--ocean-green-1000, #00281D);
+
+    /* @doc Define a cor do ícone do item da lista. */
+    --ez-list-item__icon--color: var(--color--ocean-green-600, #008561);
+
+    /* @doc Define a cor do background do item da lista. */
+    --ez-list-item__background--color: var(--color--gray-80, #F9F9F9);
+
+    /* @doc Define a cor da borda do item da lista com hover. */
+    --ez-list-item__border--color-hover: var(--color--gray-100, #DEDEDE);
+
+    /* @doc Define a largura mínima do componente. */
+    --ez-list-item__min-width: 150;
+
+    display: flex;
+    flex-direction: column;
+    background: var(--ez-list-item__background--color);
+    padding: var(--space--12, 12px) var(--space--16, 16px);
+    min-width: var(--ez-list-item__min-width);
+    width: 100%;
+    border-radius: var(--border--radius-16, 16px);
+    outline: none;
+    transition: box-shadow 0.2s;
+    cursor: pointer;
+}
+
+:host(:hover) {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--ez-list-item__border--color-hover);
+}
+
+
+.list-item__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+
+.list-item__title{
+    color: var(--ez-list-item__title--color);
+    font-size: var(--text--large);
+    font-weight: var(--font-weight--medium);
+}
+
+.list-item__text{
+    font-size: var(--text--medium);
+    font-weight: var(--font-weight--regular);
+    color: var(--ez-list-item__text--color);
+}
+
+
+ez-icon {
+    --ez-icon--color: var(--ez-list-item__icon--color);
+}