@sankhyalabs/ezui 1.2.0-beta.19 → 1.2.0-beta.20

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

@@ -0,0 +1,188 @@
+import { Component, Host, h, Prop, Event, State, Method } from '@stencil/core';
+import { StringUtils } from '@sankhyalabs/core';
+import { ApplicationUtils } from "../../utils";
+export class EzTextEdit {
+  /**
+   * Aplica focus 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 !== this.value && !StringUtils.isEmpty(this._newValue)) {
+      this.saveEdition.emit({ value: this.value, newValue: this._newValue });
+    }
+    else if (!this._newValue) {
+      ApplicationUtils.alert("Aviso", "Não é possível salvar um campo em branco.").then(() => {
+        this.setNewValue(this.value, true);
+      });
+    }
+    else {
+      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() {
+    return (h(Host, null,
+      h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }),
+      h("ez-text-input", { 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.cancelEdition.emit(); } })));
+  }
+  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": "Valor manipulado pelo componente atrav\u00E9s do input"
+      },
+      "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": "Evento 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": "Disparado 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 focus no campo.",
+        "tags": []
+      }
+    }
+  }; }
+}

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

@@ -37,6 +37,10 @@
   --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.*/
@@ -72,7 +76,6 @@ input {
   /*private*/
   width: 100%;
   box-sizing: border-box;
-  padding: var(--space--medium, 6px);
 
   /*public*/
   height: var(--ez-text-input--height);
@@ -84,6 +87,7 @@ input {
   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 {
@@ -103,7 +107,7 @@ input.icon--left {
   padding-left: var(--ez-text-input__icon--width);
 }
 
-input.icon--right {
+input.icon--right { 
   padding-right: var(--ez-text-input__icon--width);
 }
 
@@ -212,6 +216,11 @@ input:read-only {
   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);
@@ -275,4 +284,11 @@ input:read-only {
 .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);
 }

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

@@ -14,6 +14,10 @@ export class EzTextInput {
      * Define o modo do tamanho do campo; opções: slim e regular.
      */
     this.mode = "regular";
+    /**
+     * Define se o campo contará com bordas ou não
+     */
+    this.noBorder = false;
   }
   observeErrorMessage() {
     if (this._inputElem) {
@@ -87,6 +91,11 @@ export class EzTextInput {
       this._contentLeftSlot.style.color = color;
     }
   }
+  adjustBorderInput() {
+    if (this.noBorder) {
+      this._inputElem.classList.add("input__slim--noborder");
+    }
+  }
   //---------------------------------------------
   // Public methods
   //---------------------------------------------
@@ -194,6 +203,7 @@ export class EzTextInput {
     this.observeErrorMessage();
     this.observeMask();
     this.adjustFloatingLabel();
+    this.adjustBorderInput();
   }
   componentWillLoad() {
     this.observeMask();
@@ -387,6 +397,24 @@ export class EzTextInput {
       "attribute": "mode",
       "reflect": true,
       "defaultValue": "\"regular\""
+    },
+    "noBorder": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o campo contar\u00E1 com bordas ou n\u00E3o"
+      },
+      "attribute": "no-border",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{

package/dist/collection/utils/index.js

@@ -1,3 +1,4 @@
 export { default as ApplicationUtils } from './ApplicationUtils';
 export { default as CSSVarsUtils } from './CSSVarsUtils';
 export { DialogType } from '../components/ez-dialog/DialogType';
+export { buildField as formFieldBuilder } from '../components/ez-form/fieldbuilder/FieldBuilder';

package/dist/custom-elements/index.d.ts

@@ -182,6 +182,12 @@ export const EzTextArea: {
   new (): EzTextArea;
 };
 
+interface EzTextEdit extends Components.EzTextEdit, HTMLElement {}
+export const EzTextEdit: {
+  prototype: EzTextEdit;
+  new (): EzTextEdit;
+};
+
 interface EzTextInput extends Components.EzTextInput, HTMLElement {}
 export const EzTextInput: {
   prototype: EzTextInput;