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

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

@@ -0,0 +1,112 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h, Host } from "@stencil/core";
+export class EzTag {
+  constructor() {
+    this.label = undefined;
+    this.color = "ocean-green";
+    this.customBackgroundColor = undefined;
+    this.customLabelColor = undefined;
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._tag) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._tag, 'EzTag', dataInfo);
+    }
+  }
+  validateLabel() {
+    return (this.label) && this.label.trim() !== "";
+  }
+  render() {
+    const customStyleVars = Object.assign({}, this.customBackgroundColor && { '--ez-tag--custom-background-color': `var(${this.customBackgroundColor})` }, this.customLabelColor && { '--ez-tag_label--custom-color': `var(${this.customLabelColor})` });
+    return (h(Host, { style: customStyleVars }, h("div", { ref: el => { this._tag = el; }, class: `tag ${this.color || ''}` }, this.validateLabel() && h("label", { title: this.label }, this.label))));
+  }
+  static get is() { return "ez-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-tag.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-tag.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "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
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"ocean-green\" | \"light-ocean-green\" | \"green\" | \"light-green\" | \"yellow\" | \"light-yellow\" | \"red\" | \"light-red\" | \"gray\" | \"light-gray\" | \"petroleum\" | \"light-petroleum\"",
+          "resolved": "\"gray\" | \"green\" | \"light-gray\" | \"light-green\" | \"light-ocean-green\" | \"light-petroleum\" | \"light-red\" | \"light-yellow\" | \"ocean-green\" | \"petroleum\" | \"red\" | \"yellow\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define a cor de fundo do componente."
+        },
+        "attribute": "color",
+        "reflect": true,
+        "defaultValue": "\"ocean-green\""
+      },
+      "customBackgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define uma cor de fundo customizada, dentro da paleta de cores do Design System para o componente."
+        },
+        "attribute": "custom-background-color",
+        "reflect": false
+      },
+      "customLabelColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define uma cor de texto customizada, dentro da paleta de cores do Design System para o componente."
+        },
+        "attribute": "custom-label-color",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/ez-text-area/ez-text-area.css

@@ -1,283 +1,299 @@
 :host {
-  /* dimensions */
-  /*@doc Define a largura do componente.*/
-  --text-area--width: 100%;
-
-  /* general */
-  /*@doc Define o raio da borda do input do componente.*/
-  --text-area--border-radius: var(--border--radius-medium, 12px);
-  /*@doc Define o tamanho da fonte do input e label do componente.*/
-  --text-area--font-size: var(--text--medium, 14px);
-  /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
-  --text-area--font-family: var(--font-pattern, Arial);
-  /*@doc Define o peso da fonte do label do componente.*/
-  --text-area--font-weight: var(--text-weight--medium, 400);
-  /*@doc Define a cor da fonte do input e label do componente.*/
-  --text-area--color: var(--title--primary, #2B3A54);
-
-  /* input */
-  /*@doc Define a cor de fundo do input.*/
-  --text-area__input--background-color: var(--background--light, #FFFFFF);
-  /*@doc Define o estilo da borda do input.*/
-  --text-area__input--border: var(--border--medium, 2px solid);
-  /*@doc Define a cor da borda do input.*/
-  --text-area__input--border-color: var(--color--strokes,#DCE0E8);
-  /*@doc Define a cor da borda do input quando focado.*/
-  --text-area__input--focus--border-color: var(--color--primary, #008561);
-  /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --text-area__input--disabled--background-color: var(--background--medium, #F0F3F7);
-  /*@doc Define a cor do texto do input.*/
-  --text-area__input--disabled--color: var(--text--primary, #626E82);
-  /*@doc Define a borda do texto do input quando desabilitado.*/
-  --text-area__input--disabled--border--color: var(--color--strokes,#DCE0E8);
-  /*@doc Define a cor da borda do input quando com erro.*/
-  --text-area__input--error--border-color: var(--color-alert--error-800,#BD0025);
-
-  /* message box */
-  /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
-  --text-area__message_box--font-size: var(--text--small, 12px);
-  /*@doc Define a cor da fonte da mensagem quando info.*/
-  --text-area__message_box--info--color: var(--color--success, #22085d);
-  /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --text-area__message_box--error--color: var(--color-alert--error-800,#BD0025);
-
-  /* label */
-  /*@doc Define o posicionamento do label.*/
-  --text-area__label--floating--top: 6px;
-  /*@doc Define o espaçamento superior do label.*/
-  --text-area__label--padding-top: 12px;
-  /*@doc Define o espaçamento esquerdo do label.*/
-  --text-area__label--padding-left: 14px;
-  /*@doc Define o espaçamento direito do label.*/
-  --text-area__label--padding-right: 12px;
-
-  /* scrollbar */
-  /*@doc Define a cor da barra de rolagem do componente.*/
-  --text-area__scrollbar--color-default: var(--scrollbar--default, #626e82);
-  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
-  --text-area__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
-  /*@doc Define a cor do hover na barra de rolagem do componente.*/
-  --text-area__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
-  /*@doc Define a cor do active na barra de rolagem do componente.*/
-  --text-area__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
-  /*@doc Define o raio da borda da barra de rolagem do componente.*/
-  --text-area__scrollbar--border-radius: var(--border--radius-small, 6px);
-  /*@doc Define a largura da barra de rolagem do componente.*/
-  --text-area__scrollbar--width: var(--space--small, 6px);
-
-  /***************
-  host style  
-  ***************/
-  /*private*/
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-
-  /*public*/
-  width: var(--text-area--width);
+    /* dimensions */
+    /*@doc Define a largura do componente.*/
+    --text-area--width: 100%;
+
+    /* general */
+    /*@doc Define o raio da borda do input do componente.*/
+    --text-area--border-radius: var(--border--radius-medium, 12px);
+    /*@doc Define o tamanho da fonte do input e label do componente.*/
+    --text-area--font-size: var(--text--medium, 14px);
+    /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
+    --text-area--font-family: var(--font-pattern, Arial);
+    /*@doc Define o peso da fonte do label do componente.*/
+    --text-area--font-weight: var(--text-weight--medium, 400);
+    /*@doc Define a cor da fonte do input e label do componente.*/
+    --text-area--color: var(--title--primary, #2B3A54);
+
+    /* input */
+    /*@doc Define a cor de fundo do input.*/
+    --text-area__input--background-color: var(--background--light, #FFFFFF);
+    /*@doc Define o estilo da borda do input.*/
+    --text-area__input--border: var(--border--medium, 2px solid);
+    /*@doc Define a cor da borda do input.*/
+    --text-area__input--border-color: var(--color--strokes, #DCE0E8);
+    /*@doc Define a cor da borda do input quando focado.*/
+    --text-area__input--focus--border-color: var(--color--primary, #008561);
+    /*@doc Define a cor de fundo do input quando desabilitado.*/
+    --text-area__input--disabled--background-color: var(--background--medium, #F0F3F7);
+    /*@doc Define a cor do texto do input.*/
+    --text-area__input--disabled--color: var(--text--primary, #626E82);
+    /*@doc Define a borda do texto do input quando desabilitado.*/
+    --text-area__input--disabled--border--color: var(--color--strokes, #DCE0E8);
+    /*@doc Define a cor da borda do input quando com erro.*/
+    --text-area__input--error--border-color: var(--color-alert--error-800, #BD0025);
+
+    /* message box */
+    /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
+    --text-area__message_box--font-size: var(--text--small, 12px);
+    /*@doc Define a cor da fonte da mensagem quando info.*/
+    --text-area__message_box--info--color: var(--color--success, #22085d);
+    /*@doc Define a cor da fonte da mensagem quando erro.*/
+    --text-area__message_box--error--color: var(--color-alert--error-800, #BD0025);
+
+    /* label */
+    /*@doc Define o posicionamento do label.*/
+    --text-area__label--floating--top: 6px;
+    /*@doc Define o espaçamento superior do label.*/
+    --text-area__label--padding-top: 12px;
+    /*@doc Define o espaçamento esquerdo do label.*/
+    --text-area__label--padding-left: 14px;
+    /*@doc Define o espaçamento direito do label.*/
+    --text-area__label--padding-right: 12px;
+
+    /* scrollbar */
+    /*@doc Define a cor da barra de rolagem do componente.*/
+    --text-area__scrollbar--color-default: var(--scrollbar--default, #626e82);
+    /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+    --text-area__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+    /*@doc Define a cor do hover na barra de rolagem do componente.*/
+    --text-area__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+    /*@doc Define a cor do active na barra de rolagem do componente.*/
+    --text-area__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+    /*@doc Define o raio da borda da barra de rolagem do componente.*/
+    --text-area__scrollbar--border-radius: var(--border--radius-small, 6px);
+    /*@doc Define a largura da barra de rolagem do componente.*/
+    --text-area__scrollbar--width: var(--space--small, 6px);
+
+    /*Error icon*/
+    /*@doc Define o espaçamento lateral do icone de erro.*/
+    --ez-text-area__tooltip-icon--spacing: var(--space--large);
+    /*@doc Define a largura do icone de erro.*/
+    --ez-text-area__tooltip-icon---width: var(--space--large);
+    /*@doc Define a margem horizontal do icone de erro.*/
+    --ez-text-area__tooltip-icon---horizontal-margin: var(--space--medium, 12px);
+    /*@doc Define a margem vertical do icone de erro.*/
+    --ez-text-area__tooltip-icon---vertical-margin: 10px;
+
+
+    /* tooltip icon */
+    /*@doc Define a cor da fonte da mensagem quando erro.*/
+    --ez-text-area__tooltip_icon--error--color: var(--color-alert--error-800, #BD0025);
+
+
+    /***************
+    host style
+    ***************/
+    /*private*/
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+
+    /*public*/
+    width: var(--text-area--width);
 }
 
 textarea {
-  box-sizing: border-box;
-  border: none;
-  resize: none;
-  width: 100%;
-  padding: 0;
-  background: none;
-  min-height: 42px;
-
-  /*public*/
-  font-weight: var(--text-area--font-weight);
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  color: var(--text-area--color);
-  margin-top: calc(var(--space--medium, 12px) + 4px);
-
-  scrollbar-width: thin;
-  scrollbar-color: var(--text-area__scrollbar--color-clicked) var(--text-area__scrollbar--color-background);
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 16px);
+
+    box-sizing: border-box;
+    border: none;
+    resize: none;
+    width: 100%;
+    padding: 0;
+    background: none;
+    min-height: 42px;
+
+    /*public*/
+    font-weight: var(--text-area--font-weight);
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    color: var(--text-area--color);
+    margin-top: calc(var(--space--medium, 12px) + 4px);
+
+    scrollbar-width: thin;
+    scrollbar-color: var(--text-area__scrollbar--color-clicked) var(--text-area__scrollbar--color-background);
 }
 
 textarea:focus {
-  /*private*/
-  outline: none;
+    /*private*/
+    outline: none;
 }
 
 textarea:disabled {
-  /*public*/
-  background-color: transparent;
-  color: var(--text-area__input--disabled--color);
-  border: var(--text-area__input--disabled--border);
-  cursor: not-allowed;
+    /*public*/
+    background-color: transparent;
+    color: var(--text-area__input--disabled--color);
+    border: var(--text-area__input--disabled--border);
+    cursor: not-allowed;
 }
 
 textarea::-webkit-scrollbar {
-  background-color: var(--text-area__scrollbar--color-background);
+    background-color: var(--text-area__scrollbar--color-background);
 
-  width: var(--text-area__scrollbar--width);
-  max-width: var(--text-area__scrollbar--width);
-  min-width: var(--text-area__scrollbar--width);
+    width: var(--text-area__scrollbar--width);
+    max-width: var(--text-area__scrollbar--width);
+    min-width: var(--text-area__scrollbar--width);
 }
 
 textarea::-webkit-scrollbar-thumb {
-  /*public*/
-  background-color: var(--text-area__scrollbar--color-default);
-  border-radius: var(--text-area__scrollbar--border-radius);
+    /*public*/
+    background-color: var(--text-area__scrollbar--color-default);
+    border-radius: var(--text-area__scrollbar--border-radius);
 }
 
 textarea::-webkit-scrollbar-track {
-  /*public*/
-  background-color: var(--text-area__scrollbar--color-background);
-  border-radius: var(--text-area__scrollbar--border-radius);
+    /*public*/
+    background-color: var(--text-area__scrollbar--color-background);
+    border-radius: var(--text-area__scrollbar--border-radius);
 }
 
 textarea::-webkit-scrollbar-thumb:vertical:hover,
 textarea::-webkit-scrollbar-thumb:horizontal:hover {
-  /*public*/
-  background-color: var(--text-area__scrollbar--color-hover);
+    /*public*/
+    background-color: var(--text-area__scrollbar--color-hover);
 }
 
 textarea::-webkit-scrollbar-thumb:vertical:active,
 textarea::-webkit-scrollbar-thumb:horizontal:active {
-  /*public*/
-  background-color: var(--text-area__scrollbar--color-clicked);
+    /*public*/
+    background-color: var(--text-area__scrollbar--color-clicked);
 }
 
 .textarea {
-  /*private*/
-  width: 100%;
-  min-height: 42px;
-  max-width: 100%;
-
-  box-sizing: border-box;
-  padding-left: var(--space--medium);
-  padding-right: var(--space--extra-small);
-
-  /*public*/
-  border-radius: var(--text-area--border-radius);
-  border: var(--text-area__input--border);
-  border-color: var(--text-area__input--border-color);
-  background-color: var(--text-area__input--background-color);
-}
-.textarea--disabled{
-  border-radius: var(--text-area--border-radius);
-  border: var(--text-area__input--border);
-  border-color: var(--text-area__input--disabled--border--color);
-  background-color: var(--text-area__input--disabled--background-color);
-  cursor: not-allowed;
+    /*private*/
+    width: 100%;
+    min-height: 42px;
+    max-width: 100%;
+
+    box-sizing: border-box;
+    padding-left: var(--space--medium);
+    padding-right: var(--space--extra-small);
+
+    /*public*/
+    border-radius: var(--text-area--border-radius);
+    border: var(--text-area__input--border);
+    border-color: var(--text-area__input--border-color);
+    background-color: var(--text-area__input--background-color);
 }
 
-.textarea--resizable {
-  resize: vertical;
+.textarea--disabled {
+    border-radius: var(--text-area--border-radius);
+    border: var(--text-area__input--border);
+    border-color: var(--text-area__input--disabled--border--color);
+    background-color: var(--text-area__input--disabled--background-color);
+    cursor: not-allowed;
 }
-
 .textarea--focus {
-  border-color: var(--text-area__input--focus--border-color);
+    border-color: var(--text-area__input--focus--border-color);
 }
 
 .textarea.hasError {
-  color: var(--text-area--color);
-  border-color: var(--text-area__input--error--border-color);
+    color: var(--text-area--color);
+    border-color: var(--text-area__input--error--border-color);
 }
 
 .message-box {
-  /*private*/
-  min-height: 16px;
-  min-width: 100%;
-  margin-top: 3px;
-  line-height: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  /*public*/
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area__message_box--font-size);
-  color: var(--text-area__message_box--info--color);
+    /*private*/
+    min-height: 16px;
+    min-width: 100%;
+    margin-top: 3px;
+    line-height: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    /*public*/
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area__message_box--font-size);
+    color: var(--text-area__message_box--info--color);
 }
 
 .hasError {
-  /*public*/
-  color: var(--text-area__message_box--error--color);
+    /*public*/
+    color: var(--text-area__message_box--error--color);
 }
 
 .textarea__label {
-  /*private*/
-  box-sizing: border-box;
-  position: absolute;
-  z-index: var(--visible);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  -webkit-transition: font-size .05s, top .05s;
-  transition: font-size .05s, top .05s;
-  width: calc(100% - var(--text-area__label--padding-right));
-  left: var(--text-area--space--medium);
-
-  /*public*/
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  font-weight: var(--text-area--font-weight);
-  color: var(--text-area--color);
-  top: var(--text-area__label--padding-top);
-  left: var(--text-area__label--padding-left);
-  padding-right: var(--text-area__label--padding-right);
+    /*private*/
+    box-sizing: border-box;
+    position: absolute;
+    z-index: var(--visible);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -webkit-transition: font-size .05s, top .05s;
+    transition: font-size .05s, top .05s;
+    width: calc(100% - var(--text-area__label--padding-right));
+    left: var(--text-area--space--medium);
+
+    /*public*/
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    font-weight: var(--text-area--font-weight);
+    color: var(--text-area--color);
+    top: var(--text-area__label--padding-top);
+    left: var(--text-area__label--padding-left);
+    padding-right: var(--text-area__label--padding-right);
 }
 
 .textarea__label--floated {
-  font-family: var(--text-area--font-family);
-  font-size: var(--text--extra-small);
-  color: var(--text--primary);
-  top: var(--text-area__label--floating--top);
+    font-family: var(--text-area--font-family);
+    font-size: var(--text--extra-small);
+    color: var(--text--primary);
+    top: var(--text-area__label--floating--top);
 }
 
 .textarea__label--disabled {
-  color: var(--text-area__input--disabled--color);
-  cursor: not-allowed;
+    color: var(--text-area__input--disabled--color);
+    cursor: not-allowed;
 }
 
 .textarea--slim {
-  /*public*/
-  margin-top: var(--space--small, 6px);
+    /*public*/
+    margin-top: var(--space--small, 6px);
 }
 
 .textarea--slim::-webkit-input-placeholder { /* Edge */
-  /*public*/
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  font-weight: var(--text-area--font-weight);
-  color: var(--text-area--color);
+    /*public*/
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    font-weight: var(--text-area--font-weight);
+    color: var(--text-area--color);
 }
 
 .textarea--slim:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-  /*public*/
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  font-weight: var(--text-area--font-weight);
-  color: var(--text-area--color);
+    /*public*/
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    font-weight: var(--text-area--font-weight);
+    color: var(--text-area--color);
 }
 
 .textarea--slim::-moz-placeholder { /* Mozilla Firefox 19+ */
-  /*public*/
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  font-weight: var(--text-area--font-weight);
-  color: var(--text-area--color);
+    /*public*/
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    font-weight: var(--text-area--font-weight);
+    color: var(--text-area--color);
 }
 
 .textarea--slim:-ms-input-placeholder { /* Internet Explorer 10-11 */
-  /*public*/
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  font-weight: var(--text-area--font-weight);
-  color: var(--text-area--color);
+    /*public*/
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    font-weight: var(--text-area--font-weight);
+    color: var(--text-area--color);
 }
 
 .textarea--slim::placeholder {
-  /*public*/
-  font-family: var(--text-area--font-family);
-  font-size: var(--text-area--font-size);
-  font-weight: var(--text-area--font-weight);
-  color: var(--text-area--color);
+    /*public*/
+    font-family: var(--text-area--font-family);
+    font-size: var(--text-area--font-size);
+    font-weight: var(--text-area--font-weight);
+    color: var(--text-area--color);
 }
 
 .textarea--slim:disabled::-webkit-input-placeholder, /* WebKit browsers */
@@ -285,7 +301,23 @@ textarea::-webkit-scrollbar-thumb:horizontal:active {
 .textarea--slim:disabled::-moz-placeholder, /* Mozilla Firefox 19+ */
 .textarea--slim:disabled:-ms-input-placeholder, /* Internet Explorer 10+ */
 .textarea--slim:disabled::placeholder {
-  /*public*/
-  color: var(--text-area__input--disabled--color);
-  cursor: not-allowed
+    /*public*/
+    color: var(--text-area__input--disabled--color);
+    cursor: not-allowed;
+}
+
+ez-icon.tooltip-icon.hasError {
+    --ez-icon--color: var(--ez-text-area__tooltip_icon--error--color);
+}
+
+.input-container {
+    display: flex;
+    align-items: center;
+}
+
+
+.textarea--resizable {
+    resize: vertical;
+    overflow: auto;
+    min-height: 42px;
 }