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

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

@@ -0,0 +1,202 @@
+import { Host, h } from '@stencil/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { ApplicationUtils } from "../../utils";
+export class EzTextEdit {
+  constructor() {
+    this._newValue = undefined;
+    this.value = undefined;
+    this.styled = undefined;
+  }
+  /**
+   * Aplica foco no campo.
+   */
+  async applyFocusSelect() {
+    this.calcSizeInput(this.value, true);
+  }
+  calcSizeInput(value, setSelect = false) {
+    var _a, _b;
+    const textInput = (_b = (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+    if (textInput != undefined) {
+      const sizeText = this.getWidthValue(value);
+      textInput.style.width = sizeText + 'px';
+      if (setSelect) {
+        setTimeout(() => textInput.select(), 100);
+      }
+    }
+  }
+  getWidthValue(value) {
+    if (this._valueBasis != undefined) {
+      const span = this._valueBasis;
+      if (value != undefined) {
+        const cursorSpace = 2;
+        span.innerHTML = value;
+        return span.clientWidth > 0 ? (span.clientWidth + cursorSpace) : cursorSpace;
+      }
+      else {
+        span.innerHTML = "";
+      }
+    }
+    return 0;
+  }
+  setStyledInput() {
+    var _a, _b;
+    let fontSize = "";
+    let fontWeight = "";
+    let fontFamily = "";
+    if (this.styled != undefined) {
+      fontSize = this.styled.fontSize;
+      fontWeight = this.styled.fontWeight;
+      fontFamily = this.styled.fontFamily;
+    }
+    const textInput = (_b = (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+    if (textInput != undefined) {
+      textInput.style.fontSize = fontSize;
+      textInput.style.fontWeight = fontWeight;
+      textInput.style.fontFamily = fontFamily;
+    }
+    const span = this._valueBasis;
+    if (span != undefined) {
+      span.style.fontSize = fontSize;
+      span.style.fontWeight = fontWeight;
+      span.style.fontFamily = fontFamily;
+    }
+  }
+  handleSaveEdition() {
+    if (!this._newValue) {
+      ApplicationUtils.alert("Aviso", "Não é possível salvar um campo em branco.").then(() => {
+        this.setNewValue(this.value, true);
+      });
+      return;
+    }
+    this.saveEdition.emit({ value: this.value, newValue: this._newValue });
+  }
+  handleCancelEdition() {
+    this.cancelEdition.emit();
+  }
+  setNewValue(value, setSelect = false) {
+    this._newValue = value;
+    this.calcSizeInput(this._newValue, setSelect);
+  }
+  componentDidLoad() {
+    this.applyFocusSelect();
+    this.setNewValue(this.value);
+  }
+  componentDidRender() {
+    this.setStyledInput();
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
+    return (h(Host, null, h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }), h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), onInput: () => { this.calcSizeInput(this._newValue); }, class: "text-edit__form-input", value: this._newValue, ref: (elem) => this._inputElement = elem, mode: "slim", onEzChange: (evt) => this.setNewValue(evt === null || evt === void 0 ? void 0 : evt.detail), noBorder: true }), h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }), h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.handleCancelEdition(); } })));
+  }
+  static get is() { return "ez-text-edit"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-text-edit.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-text-edit.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o valor do campo."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "styled": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IStyled",
+          "resolved": "IStyled",
+          "references": {
+            "IStyled": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define atributos do estilo."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_newValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "saveEdition",
+        "name": "saveEdition",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao salvar uma edi\u00E7\u00E3o"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "cancelEdition",
+        "name": "cancelEdition",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao cancelar uma edi\u00E7\u00E3o"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "applyFocusSelect": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica foco no campo.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

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

@@ -0,0 +1,301 @@
+:host {
+  /* dimensions */
+  /*@doc Define a altura do componente.*/
+  --ez-text-input--height: 42px;
+  /*@doc Define a largura do componente.*/
+  --ez-text-input--width: 100%;
+  /*@doc Define a largura do slot que contém o ícone.*/
+  --ez-text-input__icon--width: 48px;
+  /*@doc Define a altura do componente em modo "slim".*/
+  --ez-text-input--height--slim: 32px;
+
+  /* general */
+  /*@doc Define o raio da borda do input do componente.*/
+  --ez-text-input--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define o tamanho da fonte do input e label do componente.*/
+  --ez-text-input--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
+  --ez-text-input--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do label do componente.*/
+  --ez-text-input--font-weight: var(--text-weight--medium, 400);
+  /*@doc Define a cor da fonte do input e label do componente.*/
+  --ez-text-input--color: var(--title--primary, #2B3A54);
+
+  /* input */
+  /*@doc Define a cor de fundo do input.*/
+  --ez-text-input__input--background-color: var(--background--medium, #e0e0e0);
+  /*@doc Define o estilo da borda do input.*/
+  --ez-text-input__input--border: var(--border--medium, 2px solid);
+  /*@doc Define a cor da borda do input.*/
+  --ez-text-input__input--border-color: var(--ez-text-input__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.*/
+  --ez-text-input__input--focus--border-color: var(--color--primary, #008561);
+  /*@doc Define a cor de fundo do input quando desabilitado.*/
+  --ez-text-input__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  /*@doc Define a cor do texto do input.*/
+  --ez-text-input__input--disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor da borda do input quando com erro.*/
+  --ez-text-input__input--error--border-color: #CC2936;
+  /*@doc Define a cor do input quando não possuir borda*/
+  --ez-text-input__input--noborder-color: white;
+  /*@doc Define o padding do input*/
+  --ez-text-input__input--padding: var(--space--medium, 6px);
+
+  /* message box */
+  /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
+  --ez-text-input__message_box--font-size: var(--text--small, 12px);
+  /*@doc Define a cor da fonte da mensagem quando info.*/
+  --ez-text-input__message_box--info--color: var(--color--success, #22085d);
+  /*@doc Define a cor da fonte da mensagem quando erro.*/
+  --ez-text-input__message_box--error--color: var(--color--error, #FF0000);
+
+  /* label */
+  /*@doc Define o posicionamento do label.*/
+  --ez-text-input__label--floating--top: 6px;
+  /*@doc Define o posicionamento do label.*/
+  --ez-text-input__label--padding-top: 12px;
+  /*@doc Define o espaçamento esquerdo do label.*/
+  --ez-text-input__label--padding-left: 14px;
+  /*@doc Define o espaçamento direito do label.*/
+  --ez-text-input__label--padding-right: 12px;
+
+  /*@doc Define a cor do ícone do slot.*/
+  --ez-text-input__input--focus--icon-color: var(--ez-text-input__input--focus--border-color);
+
+
+  /***************
+  host style
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  /*public*/
+  width: var(--ez-text-input--width);
+}
+
+:host(.grid_editor){
+  --ez-text-input--height--slim: 25px;
+}
+
+input {
+  /*private*/
+  width: 100%;
+  box-sizing: border-box;
+
+  /*public*/
+  height: var(--ez-text-input--height);
+  border-radius: var(--ez-text-input--border-radius);
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  border: var(--ez-text-input__input--border);
+  border-color: var(--ez-text-input__input--border-color);
+  background-color: var(--ez-text-input__input--background-color);
+  color: var(--ez-text-input--color);
+  font-weight: var(--ez-text-input--font-weight);
+  padding: var(--ez-text-input__input--padding);
+}
+
+input:disabled {
+  /*public*/
+  background-color: var(--ez-text-input__input--disabled--background-color);
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+input:focus {
+  /*private*/
+  outline: none;
+  /*public*/
+  border-color: var(--ez-text-input__input--focus--border-color);
+}
+
+input.icon--left {
+  padding-left: var(--ez-text-input__icon--width);
+}
+
+input.icon--right { 
+  padding-right: var(--ez-text-input__icon--width);
+}
+
+input.hasError {
+  color: var(--ez-text-input--color);
+  border-color: var(--ez-text-input__input--error--border-color);
+}
+
+input:disabled.hasError {
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+input.text--right {
+  text-align: right;
+}
+
+input:read-only {
+  cursor: default;
+}
+
+.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(--ez-text-input--font-family);
+  font-size: var(--ez-text-input__message_box--font-size);
+  color: var(--ez-text-input__message_box--info--color);
+}
+
+.hasError {
+  /*public*/
+  color: var(--ez-text-input__message_box--error--color);
+}
+
+.input__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(--ez-text-input__label--padding-right));
+  left: var(--ez-text-input--space--medium);
+
+  /*public*/
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+  top: var(--ez-text-input__label--padding-top);
+  left: var(--ez-text-input__label--padding-left);
+  padding-right: var(--ez-text-input__label--padding-right);
+}
+
+.input__label--floated {
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--text--extra-small);
+  color: var(--text--primary);
+  top: var(--ez-text-input__label--floating--top);
+}
+
+.input__label--disabled {
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+.input__label--left {
+  /*public*/
+  text-align: left;
+  left: calc(var(--ez-text-input__icon--width) + 2px);
+  /*borda*/
+  width: calc(100% - var(--ez-text-input__icon--width));
+}
+
+.input__label--right {
+  /*public*/
+  right: var(--ez-text-input__icon--width);
+  width: calc(100% - var(--ez-text-input__icon--width));
+}
+
+/* ISSO TA ERRADO CRIAR INPUT__LABEL--BOTH */
+.input__label--left.input__label--right {
+  left: calc(var(--ez-text-input__icon--width) + 2px);
+  /*borda*/
+  width: calc(100% - var(--ez-text-input__icon--width) * 2);
+}
+
+.input--with--label {
+  /*public*/
+  padding-bottom: 0;
+}
+
+.input--slim {
+  /*public*/
+  padding-top: var(--space--small, 3px);
+  padding-bottom: var(--space--small, 3px);
+  height: var(--ez-text-input--height--slim);
+}
+
+.input__slim--title{
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.input--slim::-webkit-input-placeholder { /* Edge */
+  /*public*/
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+}
+
+.input--slim:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  /*public*/
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+}
+
+.input--slim::-moz-placeholder { /* Mozilla Firefox 19+ */
+  /*public*/
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+}
+
+.input--slim:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  /*public*/
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+}
+
+.input--slim::placeholder {
+  /*public*/
+  font-family: var(--ez-text-input--font-family);
+  font-size: var(--ez-text-input--font-size);
+  font-weight: var(--ez-text-input--font-weight);
+  color: var(--ez-text-input--color);
+}
+
+.input--slim:disabled::-webkit-input-placeholder { /* WebKit browsers */
+  /*public*/
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+.input--slim:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  /*public*/
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+.input--slim:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
+  /*public*/
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+.input--slim:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
+  /*public*/
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+.input--slim:disabled::placeholder {
+  /*public*/
+  color: var(--ez-text-input__input--disabled--color);
+}
+
+input.input__slim--noborder {
+  box-shadow: 0 0 0 0;
+  border: 0 none;
+  outline: 0;
+  background: var(--ez-text-input__input--noborder-color);
+}