@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

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

@@ -0,0 +1,242 @@
+: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, #000);
+
+  /* input */
+  /*@doc Define a cor de fundo do input.*/
+  --text-area__input--background-color: var(--background--medium, #e0e0e0);
+  /*@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(--text-area__input--background-color);
+  /*no modo normal usamos a borda com a mesma cor do bg*/
+  /*@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(--color--disable-secondary, #F2F5F8);
+  /*@doc Define a cor do texto do input.*/
+  --text-area__input--disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor da borda do input quando com erro.*/
+  --text-area__input--error--border-color: #CC2936;
+
+  /* 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--error, #FF0000);
+
+  /* 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;
+
+  /***************
+  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;
+
+  /*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);
+}
+
+textarea:focus {
+  /*private*/
+  outline: none;
+}
+
+textarea:disabled {
+  /*public*/
+  background-color: transparent;
+  color: var(--text-area__input--disabled--color);
+}
+
+.textarea {
+  /*private*/
+  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: both;
+}
+
+.textarea--focus {
+  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);
+}
+
+.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);
+}
+
+.hasError {
+  /*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);
+}
+
+.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);
+}
+
+.textarea__label--disabled {
+  color: var(--text-area__input--disabled--color);
+}
+
+.textarea--slim {
+  /*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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.textarea--slim:disabled::-webkit-input-placeholder { /* WebKit browsers */
+  /*public*/
+  color: var(--text-area__input--disabled--color);
+}
+
+.textarea--slim:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  /*public*/
+  color: var(--text-area__input--disabled--color);
+}
+
+.textarea--slim:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
+  /*public*/
+  color: var(--text-area__input--disabled--color);
+}
+
+.textarea--slim:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
+  /*public*/
+  color: var(--text-area__input--disabled--color);
+}
+
+.textarea--slim:disabled::placeholder {
+  /*public*/
+  color: var(--text-area__input--disabled--color);
+}

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

@@ -0,0 +1,428 @@
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { h, Host } from '@stencil/core';
+export class EzTextArea {
+  constructor() {
+    this.label = undefined;
+    this.value = undefined;
+    this.enabled = true;
+    this.errorMessage = undefined;
+    this.rows = 4;
+    this.canShowError = true;
+    this.mode = "regular";
+    this.enableResize = false;
+  }
+  observeErrorMessage() {
+    var _a, _b, _c, _d;
+    const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
+    if (hasError) {
+      (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add('hasError');
+      (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.add('hasError');
+    }
+    else {
+      (_c = this._container) === null || _c === void 0 ? void 0 : _c.classList.remove('hasError');
+      (_d = this._messageBoxElem) === null || _d === void 0 ? void 0 : _d.classList.remove('hasError');
+    }
+  }
+  observeValue(newValue, oldValue) {
+    if (this._inputElem) {
+      if (newValue != oldValue) {
+        if (this.canChangeValue()) {
+          this._inputElem.value = this.value || "";
+        }
+        this.adjustFloatingLabel();
+        this.errorMessage = "";
+        this.ezChange.emit(this.value);
+      }
+    }
+  }
+  observeMode() {
+    if (this._initialRows == undefined) {
+      this._initialRows = this.rows > 0 ? this.rows : undefined;
+    }
+    const rows = this._initialRows > 0 ? this._initialRows : this.mode != "slim" ? 4 : 2;
+    if (rows !== this.rows) {
+      this.rows = rows;
+    }
+  }
+  observeRows() {
+    const rows = this.rows > 0 ? this.rows : this.mode != "slim" ? 4 : 2;
+    if (rows !== this.rows) {
+      this.rows = rows;
+      this._initialRows = rows;
+    }
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Adiciona o argumento text no value do text area, seguindo as regras:
+   * - Se o cursor do mouse está posicionado em algum local do texto, o argumento será adicionado nesse local.
+   * - Se existir uma seleção no texto, o trecho selecionado deve ser substituído pelo argumento.
+   * - Se não existir seleção nem posicionamento do cursor do mouse, o argumento será adicionado no final do texto.
+   *
+   * @param text: texto que irá ser adicionado
+   */
+  async appendTextToSelection(text) {
+    var _a, _b, _c, _d;
+    const selectionStart = this._inputElem.selectionStart;
+    const selectionEnd = this._inputElem.selectionEnd;
+    const textStart = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.substring(0, selectionStart)) !== null && _b !== void 0 ? _b : "";
+    const textEnd = (_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.substring(selectionEnd)) !== null && _d !== void 0 ? _d : "";
+    this.value = `${textStart}${text}${textEnd}`;
+    const newSelectionEnd = selectionStart + text.length;
+    const start = (selectionStart === selectionEnd) ? newSelectionEnd : selectionStart;
+    this._inputElem.setSelectionRange(start, newSelectionEnd);
+    await this.setFocus();
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus() {
+    this._inputElem.focus();
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    this._inputElem.blur();
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
+  canChangeValue() {
+    return this._inputElem && (this.value || "") !== this._inputElem.value;
+  }
+  adjustFloatingLabel() {
+    if (this.label && this._labelElem) {
+      const hasValue = this.value && this.value.toString().length > 0;
+      const containsFloatedClass = this._labelElem.classList.contains("textarea__label--floated");
+      if (hasValue || this.isFocused()) {
+        if (!containsFloatedClass) {
+          this._labelElem.classList.add("textarea__label--floated");
+        }
+      }
+      else {
+        if (containsFloatedClass) {
+          this._labelElem.classList.remove("textarea__label--floated");
+        }
+      }
+    }
+  }
+  isFocused() {
+    return this._hostElement.shadowRoot.activeElement !== null;
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleFocusout() {
+    this.adjustFloatingLabel();
+    if (this._container && this._container.classList.contains("textarea--focus")) {
+      this._container.classList.remove("textarea--focus");
+    }
+  }
+  handleChange() {
+    if (this.canChangeValue()) {
+      this.value = this._inputElem.value;
+    }
+  }
+  handleFocus() {
+    if (this.label && this._labelElem && !this._labelElem.classList.contains("textarea__label--floated")) {
+      this._labelElem.classList.add("textarea__label--floated");
+    }
+    if (this._container && !this._container.classList.contains("textarea--focus")) {
+      this._container.classList.add("textarea--focus");
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    this.observeErrorMessage();
+    this.adjustFloatingLabel();
+    this.observeMode();
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
+    return (h(Host, null, h("div", { class: "textarea", ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
+      h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
+      : null, h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo("input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: {
+        "textarea--slim": this.mode === "slim",
+        "textarea--resizable": this.enableResize
+      }, placeholder: this.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, rows: this.rows })), this.canShowError && this.mode != "slim" &&
+      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
+  }
+  static get is() { return "ez-text-area"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-text-area.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-text-area.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o valor do campo."
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o campo."
+        },
+        "attribute": "enabled",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma mensagem de orienta\u00E7\u00E3o ao usu\u00E1rio, colocando o campo em modo inv\u00E1lido."
+        },
+        "attribute": "error-message",
+        "reflect": true
+      },
+      "rows": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o n\u00FAmero de linhas."
+        },
+        "attribute": "rows",
+        "reflect": true,
+        "defaultValue": "4"
+      },
+      "canShowError": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false deixa de exibir a mensagem de erro dentro do campo."
+        },
+        "attribute": "can-show-error",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"slim\" | \"regular\"",
+          "resolved": "\"regular\" | \"slim\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do campo."
+        },
+        "attribute": "mode",
+        "reflect": true,
+        "defaultValue": "\"regular\""
+      },
+      "enableResize": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Ativa a op\u00E7\u00E3o de fazer resize do input."
+        },
+        "attribute": "enable-resize",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do campo."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "appendTextToSelection": {
+        "complexType": {
+          "signature": "(text: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "text : texto que ir\u00E1 ser adicionado"
+                }],
+              "text": ": texto que ir\u00E1 ser adicionado"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Adiciona o argumento text no value do text area, seguindo as regras:\n- Se o cursor do mouse est\u00E1 posicionado em algum local do texto, o argumento ser\u00E1 adicionado nesse local.\n- Se existir uma sele\u00E7\u00E3o no texto, o trecho selecionado deve ser substitu\u00EDdo pelo argumento.\n- Se n\u00E3o existir sele\u00E7\u00E3o nem posicionamento do cursor do mouse, o argumento ser\u00E1 adicionado no final do texto.",
+          "tags": [{
+              "name": "param",
+              "text": "text : texto que ir\u00E1 ser adicionado"
+            }]
+        }
+      },
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "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": []
+        }
+      },
+      "isInvalid": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Retorna se o conte\u00FAdo \u00E9 inv\u00E1lido.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "errorMessage",
+        "methodName": "observeErrorMessage"
+      }, {
+        "propName": "value",
+        "methodName": "observeValue"
+      }, {
+        "propName": "mode",
+        "methodName": "observeMode"
+      }, {
+        "propName": "rows",
+        "methodName": "observeRows"
+      }];
+  }
+}

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

@@ -0,0 +1,19 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.text-edit__form-input {
+  width: auto;
+  --ez-text-input__input--padding: 0px;
+}
+
+.text-edit__hidden-value {
+  visibility: hidden;
+  position: absolute;
+  white-space: nowrap;
+  z-index: -1;
+  top: 0;
+  left: 0;
+}