@sankhyalabs/ezui 1.1.135 → 1.1.138

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

@@ -14,8 +14,12 @@ export class EzTextInput {
      * Define o modo do tamanho do campo; opções: slim e regular.
      */
     this.mode = "regular";
+    /**
+     * Define se o controle de change do value será controlado por um componente pai.
+     */
+    this.slaveMode = false;
   }
-  showError() {
+  observeErrorMessage() {
     var _a, _b;
     if (this._inputElem) {
       const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
@@ -29,7 +33,7 @@ export class EzTextInput {
       }
     }
   }
-  prepareMask() {
+  observeMask() {
     if (this.mask) {
       if (this._maskFormatter == undefined) {
         this._maskFormatter = new MaskFormatter(this.mask);
@@ -39,14 +43,17 @@ export class EzTextInput {
       }
     }
   }
-  updateInputValue() {
+  observeValue() {
     if (this._inputElem) {
       this._inputElem.value = this.value;
     }
     this.handleChange();
+    this.adjustFloatingLabel();
+    if (this.slaveMode) {
+      return;
+    }
     this.errorMessage = "";
     this.ezChange.emit(this.value);
-    this.adjustFloatingLabel();
   }
   adjustFloatingLabel() {
     if (this.label && this._labelElem) {
@@ -98,7 +105,7 @@ export class EzTextInput {
         this.errorMessage = e.message;
       }
     }
-    this.canChangeValue();
+    this.controlChangeValue();
     this.adjustFloatingLabel();
   }
   isValidValue(value) {
@@ -107,7 +114,7 @@ export class EzTextInput {
     }
     return true;
   }
-  canChangeValue() {
+  controlChangeValue() {
     if ((this.value || '') !== this._inputElem.value) {
       this.value = this._inputElem.value;
     }
@@ -121,9 +128,9 @@ export class EzTextInput {
       this._lastValidValue = value;
     }
     else {
-      this._inputElem.value = this._lastValidValue === undefined ? "" : this._lastValidValue;
+      this._inputElem.value = this._lastValidValue == undefined ? "" : this._lastValidValue;
     }
-    this.canChangeValue();
+    this.controlChangeValue();
   }
   handleSlotChange(ev) {
     const slot = ev.target;
@@ -154,7 +161,7 @@ export class EzTextInput {
         }
       }
     }
-    this.showError();
+    this.observeErrorMessage();
   }
   doFocus() {
     if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
@@ -165,12 +172,12 @@ export class EzTextInput {
   // Lifecycle web component
   //---------------------------------------------
   componentDidLoad() {
-    this.showError();
-    this.prepareMask();
+    this.observeErrorMessage();
+    this.observeMask();
     this.adjustFloatingLabel();
   }
   componentWillLoad() {
-    this.prepareMask();
+    this.observeMask();
     if (this.value) {
       if (this._maskFormatter) {
         try {
@@ -361,6 +368,24 @@ export class EzTextInput {
       "attribute": "mode",
       "reflect": true,
       "defaultValue": "\"regular\""
+    },
+    "slaveMode": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o controle de change do value ser\u00E1 controlado por um componente pai."
+      },
+      "attribute": "slave-mode",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -416,12 +441,12 @@ export class EzTextInput {
   static get elementRef() { return "_hostElement"; }
   static get watchers() { return [{
       "propName": "errorMessage",
-      "methodName": "showError"
+      "methodName": "observeErrorMessage"
     }, {
       "propName": "mask",
-      "methodName": "prepareMask"
+      "methodName": "observeMask"
     }, {
       "propName": "value",
-      "methodName": "updateInputValue"
+      "methodName": "observeValue"
     }]; }
 }

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

@@ -1,4 +1,4 @@
-import { Element, Component, Prop, h, Watch, Host, Method } from "@stencil/core";
+import { Element, Component, Prop, h, Watch, Host, Method, Event } from "@stencil/core";
 import { TimeFormatter, MaskFormatter, NumberUtils } from "@sankhyalabs/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzTimeInput {
@@ -16,28 +16,28 @@ export class EzTimeInput {
      */
     this.mode = "regular";
   }
-  prepareMask() {
+  observeShowSeconds() {
     if (this.showSeconds) {
-      if (this._maskFormatter == undefined) {
-        this._maskFormatter = new MaskFormatter("##:##:##");
-      }
-      else {
-        this._maskFormatter.mask = "##:##:##";
-      }
+      this.prepareMask("##:##:##");
     }
     else {
-      if (this._maskFormatter == undefined) {
-        this._maskFormatter = new MaskFormatter("##:##");
-      }
-      else {
-        this._maskFormatter.mask = "##:##";
-      }
+      this.prepareMask("##:##");
     }
   }
-  onValueChanged() {
-    if (this.value === NaN) {
+  observeValue() {
+    if (isNaN(this.value)) {
       this.value = undefined;
-      this.handleFocusout();
+    }
+  }
+  //---------------------------------------------
+  // Private methods
+  //---------------------------------------------
+  prepareMask(mask) {
+    if (this._maskFormatter == undefined) {
+      this._maskFormatter = new MaskFormatter(mask);
+    }
+    else {
+      this._maskFormatter.mask = mask;
     }
   }
   //---------------------------------------------
@@ -47,13 +47,13 @@ export class EzTimeInput {
    * Faz o foco no componente de input
    */
   async setFocus() {
-    this._inputElem.focus();
+    this._inputElem.setFocus();
   }
   /**
    * Remove o foco no componente de input
    */
   async setBlur() {
-    this._inputElem.blur();
+    this._inputElem.setBlur();
   }
   //---------------------------------------------
   // Event handlers
@@ -61,24 +61,29 @@ export class EzTimeInput {
   handleFocusout() {
     this.errorMessage = "";
     this.prepareValue(this.viewValue);
-    if (!TimeFormatter.validateTime(this.viewValue, this.showSeconds)) {
-      this.clearField();
+    if (this.viewValue && !TimeFormatter.validateTime(this.viewValue, this.showSeconds)) {
+      this._oldViewValue = this.viewValue;
       this.errorMessage = "Favor inserir um horário válido.";
     }
+    else {
+      if (this.viewValue === this._oldViewValue) {
+        return;
+      }
+      this._oldViewValue = this.viewValue;
+      if (this.viewValue === "00:00" && this.value == undefined) {
+        this.value = 0;
+      }
+      this.ezChange.emit(this.value);
+    }
   }
   prepareValue(value) {
     try {
       this.viewValue = TimeFormatter.prepareValue(value, this.showSeconds);
     }
     catch (e) {
-      this.clearField();
       this.errorMessage = e.message;
     }
   }
-  clearField() {
-    this.viewValue = '';
-    this.value = undefined;
-  }
   handleChange() {
     this.viewValue = this._inputElem.value;
     this.value = NumberUtils.stringToNumber(this.viewValue.replace(/\D/g, ""));
@@ -87,11 +92,11 @@ export class EzTimeInput {
   // Lifecycle web component
   //---------------------------------------------
   componentDidLoad() {
-    this.onValueChanged();
+    this.observeValue();
     CSSVarsUtils.applyVarsTextInput(this._elem, this._inputElem);
   }
   componentWillLoad() {
-    this.prepareMask();
+    this.observeShowSeconds();
     if (this.value) {
       this.prepareValue(this.value.toString());
     }
@@ -101,7 +106,7 @@ export class EzTimeInput {
   }
   render() {
     return (h(Host, null,
-      h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage, mode: this.mode },
+      h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage, mode: this.mode, slaveMode: true },
         h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
   }
   static get is() { return "ez-time-input"; }
@@ -237,6 +242,22 @@ export class EzTimeInput {
       "defaultValue": "\"regular\""
     }
   }; }
+  static get events() { return [{
+      "method": "ezChange",
+      "name": "ezChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado quando o estado do componente \u00E9 alterado (onEzChange)."
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
   static get methods() { return {
     "setFocus": {
       "complexType": {
@@ -274,9 +295,9 @@ export class EzTimeInput {
   static get elementRef() { return "_elem"; }
   static get watchers() { return [{
       "propName": "showSeconds",
-      "methodName": "prepareMask"
+      "methodName": "observeShowSeconds"
     }, {
       "propName": "value",
-      "methodName": "onValueChanged"
+      "methodName": "observeValue"
     }]; }
 }

package/dist/collection/components/ez-upload/ez-upload.css

@@ -51,6 +51,7 @@
   display: flex;
   flex-wrap: wrap;
   position: relative;
+  padding-bottom: 16px;
 
   /*public*/
   font-family: var(--ez-upload--font-family);

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

@@ -9,7 +9,7 @@ export class EzUpload {
     */
     this.enabled = true;
   }
-  changeValue(newValue) {
+  observeValue(newValue) {
     //Observamos o mundo externo, se um novo valor foi atribuído,
     //precisamos cancelar a alteração anterior, isso envolve, percorrer
     //a lista de ponteiros e cancelar todos os uploads em andamento.
@@ -29,7 +29,7 @@ export class EzUpload {
       this.value.forEach(ezFile => this._filePointers.set(ezFile.name, ezFile));
     }
   }
-  normalizeRequestHeaders() {
+  observeRequestHeaders() {
     this._requestHeaders = new Map();
     if (typeof this.requestHeaders == "string") {
       try {
@@ -524,9 +524,9 @@ export class EzUpload {
   static get elementRef() { return "_host"; }
   static get watchers() { return [{
       "propName": "value",
-      "methodName": "changeValue"
+      "methodName": "observeValue"
     }, {
       "propName": "requestHeaders",
-      "methodName": "normalizeRequestHeaders"
+      "methodName": "observeRequestHeaders"
     }]; }
 }

package/dist/collection/components/ez-view-stack/ez-view-stack.css

@@ -0,0 +1,9 @@
+:host {
+  width: 100%;
+  height: 100%;
+}
+
+.ez-view-stack__container{
+  width: 100%;
+  height: 100%;
+}

package/dist/collection/components/ez-view-stack/ez-view-stack.js

@@ -0,0 +1,87 @@
+import { Component, h, Host, Element, Method } from '@stencil/core';
+export class EzViewStack {
+  /**
+  * Exibe a aba desejada de acordo com o index passado na tela fazendo com a ativa atual seja removida ou oculta dependendo da hidePolicy.
+  */
+  async show(index) {
+    if (index !== this._focusedIndex && 0 <= index && index < this._totalStackItems) {
+      this.policyHideRemove();
+      this.policyShowAppend(index);
+      this._focusedIndex = index;
+    }
+  }
+  policyHideRemove() {
+    let element = this._hostElem.querySelector(`#el_${this._focusedIndex}`);
+    this.checkElementVisibility(element);
+  }
+  policyShowAppend(index) {
+    let selectedElement = this._hostElem.querySelector(`#el_${index}`);
+    if (selectedElement) {
+      selectedElement.removeAttribute("style");
+    }
+    else {
+      this._hostElem.append(this._elemList[index]);
+    }
+    ;
+  }
+  checkElementVisibility(element) {
+    if (element.getAttribute("hidePolicy") === "hide" || !element.getAttribute("hidePolicy")) {
+      element.setAttribute("style", "display: none");
+    }
+    else if (element.getAttribute("hidePolicy") === "remove") {
+      element.remove();
+    }
+  }
+  componentWillRender() {
+    if (!this._elemList) {
+      this._elemList = [];
+      this._focusedIndex = 0;
+      this._totalStackItems = 0;
+      this._hostElem.classList.add("ez-view-stack__container");
+      this._hostElem.querySelectorAll("stack-item").forEach((element, index) => {
+        element.setAttribute("id", `el_${index}`);
+        if (index !== 0) {
+          this.checkElementVisibility(element);
+        }
+        this._totalStackItems++;
+        this._elemList.push(element);
+      });
+    }
+  }
+  disconectCallback() {
+    this._hostElem = null;
+    this._elemList = null;
+  }
+  render() {
+    return (h(Host, null));
+  }
+  static get is() { return "ez-view-stack"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-view-stack.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-view-stack.css"]
+  }; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "(index: number) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Exibe a aba desejada de acordo com o index passado na tela fazendo com a ativa atual seja removida ou oculta dependendo da hidePolicy.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "_hostElem"; }
+}

package/dist/collection/components/test-du/test-du.js

@@ -11,17 +11,50 @@ export class TestDu {
       label: "Parceiro",
       fields: [
         {
-          name: "ANEXO",
-          label: "Anexo",
-          dataType: DataType.OBJECT,
-          userInterface: UserInterface.FILE,
-          properties: {
-            DESTINATION: "MULTIFILE",
-            MAX_FILES: "2"
-          }
-        }
+          name: "CODPARC",
+          label: "Parceiro",
+          dataType: DataType.NUMBER,
+          userInterface: UserInterface.INTEGERNUMBER,
+          defaultValue: 666,
+          required: false,
+          properties: {}
+        },
+        {
+          name: "RECDESP",
+          label: "Receita/Despesa",
+          dataType: DataType.TEXT,
+          userInterface: UserInterface.OPTIONSELECTOR,
+          required: true,
+          properties: { options: `{"-1": "Despesa", "1": "Receita"}` }
+        },
+        {
+          name: "P",
+          label: "pera",
+          dataType: DataType.TEXT,
+          userInterface: UserInterface.OPTIONSELECTOR,
+          properties: { options: `{"M": "Madura", "V": "Verde", "P": "Passada"}` }
+        },
       ]
     };
+    this.formConfig = [
+      {
+        name: "CODPARC",
+        label: "Parceiro",
+        dataType: DataType.NUMBER,
+        userInterface: UserInterface.INTEGERNUMBER,
+        defaultValue: 666,
+        required: false,
+        properties: {}
+      },
+      {
+        name: "RECDESP",
+        label: "Receita/Despesa",
+        dataType: DataType.TEXT,
+        userInterface: UserInterface.OPTIONSELECTOR,
+        required: true,
+        properties: { options: `{"-1": "Despesa", "1": "Receita"}` }
+      }
+    ];
     this.dataUnit.dataLoader = () => new Promise(accept => accept({
       records: [{
           __record__id__: "1321321321321321",
@@ -53,9 +86,10 @@ export class TestDu {
   }
   render() {
     return (h("div", null,
+      h("button", { onClick: () => this.dataUnit.addRecord() }, "Novo"),
       h("button", { onClick: () => this.dataUnit.loadData() }, "Carregar"),
       h("button", { onClick: () => this.save(), disabled: !this.isDirty }, "Salvar"),
-      h("ez-form", { dataUnit: this.dataUnit })));
+      h("ez-form", { dataUnit: this.dataUnit, config: this.formConfig })));
   }
   static get is() { return "test-du"; }
   static get originalStyleUrls() { return {

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

@@ -158,6 +158,12 @@ export const EzUpload: {
   new (): EzUpload;
 };
 
+interface EzViewStack extends Components.EzViewStack, HTMLElement {}
+export const EzViewStack: {
+  prototype: EzViewStack;
+  new (): EzViewStack;
+};
+
 interface GridConfig extends Components.GridConfig, HTMLElement {}
 export const GridConfig: {
   prototype: GridConfig;