@sankhyalabs/ezui 1.1.129 → 1.1.132

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

@@ -37,15 +37,10 @@
   /*@doc Define o estilo da borda do botão.*/
   --ez-button--border: none;
 
-  /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
-  --ez-button--hover--background-color: var(--background--strong, var(--ez-button--background-color));
-  /*@doc Define a cor do texto quando o cursor está sobre o botão.*/
+  /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
   --ez-button--hover-color: var(--color--primary-600);
-  
-  /*@doc Define a cor de fundo quando o botão está ativado.*/
-  --ez-button--active--background-color: var(--background--strong, --color--primary-700);
-  /*@doc Define a cor do texto quando o botão está ativado.*/
-  --ez-button--active-color: var(--color--primary-700);
+  /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
+  --ez-button--hover--background-color: var(--background--medium, var(--ez-button--background-color));
 
   /*@doc Define a cor do texto quando o botão está desabilitado.*/
   --ez-button--disabled-color: var(--text--disable);
@@ -57,6 +52,11 @@
   /*@doc Define a sombra do botão quando selecionado.*/
   --ez-button--focus--box-shadow: none;
 
+  /*@doc Define a cor do texto e do ícone ao ativar o botão.*/
+  --ez-button--active-color: var(--color--primary-700);
+   /*@doc Define a cor do fundo ao ativar o botão.*/
+  --ez-button--active--background-color: var(--background--strong);
+
   /*@doc Define a cor do texto do botão no modo link.*/
   --ez-button--link-color: var(--color--primary, '#008561');
   --ez-button--link--hover-color: var(--color--primary-700, '#1C1D22');
@@ -92,23 +92,21 @@ button {
   color: var(--ez-button--color);
   fill: var(--ez-button--color);
   border: var(--ez-button--border);
-  --ez-icon--color: var(--ez-button--color);
+}
+
+button:focus {
+  outline: var(--ez-button--focus--border);
+  box-shadow: var(--ez-button--focus--box-shadow);
 }
 
 button:hover {
   outline: none;
+  background-color: var(--ez-button--hover--background-color);
   color: var(--ez-button--hover-color);
   fill: var(--ez-button--hover-color);
-  background-color: var(--ez-button--hover--background-color);
   --ez-icon--color: var(--ez-button--hover-color);
 }
 
-button:focus {
-  outline: none;
-  outline: var(--ez-button--focus--border);
-  box-shadow: var(--ez-button--focus--box-shadow);
-}
-
 button:active {
   outline: none;
   box-shadow: none;
@@ -122,31 +120,44 @@ button:disabled {
   background-color: var(--ez-button--disabled--background-color);
   color: var(--ez-button--disabled-color);
   fill: var(--ez-button--disabled-color);
-  --ez-icon--color: var(--ez-button--disabled-color);
   border: none;
+  --ez-icon--color: var(--ez-button--disabled-color);
   cursor: no-drop;
 }
 
-button.icon {
-  padding: 0px;
+.small{
+  height: 32px;
+  --ez-button--font-size: var(--text--small, 12px);
 }
 
-button.small {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+.medium{
+  height: 42px;
+}
+
+.large{
+  height: 46px;
 }
 
-button.medium {
+.btn-icon {
+  padding: 0px;
+}
+
+.btn-icon--medium {
   width: 42px;
   min-width: 42px;
   height: 42px;
 }
 
-button.large {
-  width: 52px;
-  min-width: 52px;
-  height: 52px;
+.btn-icon--small {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+}
+
+.btn-icon--large {
+  width: 46px;
+  min-width: 46px;
+  height: 46px;
 }
 
 .label-icon {
@@ -156,6 +167,18 @@ button.large {
   color: var(--ez-button--color);
 }
 
+.label-icon:hover {
+  color: var(--ez-button--hover-color);
+  fill: var(--ez-button--hover-color);
+  --ez-icon--color: var(--ez-button--hover-color);
+}
+
+.label-icon:active {
+  color: var(--ez-button--active-color);
+  fill: var(--ez-button--active-color);
+  --ez-icon--color: var(--ez-button--active-color);
+}
+
 .label-icon label {
   max-width: 150px;
   white-space: nowrap;
@@ -165,6 +188,28 @@ button.large {
   font-family: var(--ez-button--font-family);
   font-size: var(--ez-button--font-size);
   font-weight: var(--ez-button--font-weight);
+  user-select: none;
+}
+
+button:disabled+label {
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  font-family: var(--ez-button--font-family);
+  font-size: var(--ez-button--font-size);
+  font-weight: var(--ez-button--font-weight);
+  color: var(--ez-button--disabled-color);
+  cursor: no-drop;
+}
+
+div.label-icon{
+  cursor: pointer;
+}
+
+div.label-icon,button:disabled{
+  cursor: no-drop;
 }
 
 

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop, Method } from '@stencil/core';
+import { Component, h, Prop, Method } from "@stencil/core";
 export class EzButton {
   constructor() {
     /**
@@ -9,10 +9,6 @@ export class EzButton {
        * Define o modo de uso do botão; opções: icon, link e regular
        */
     this.mode = "regular";
-    /**
-     * É possível escolher entre [small,medium,large] (somente para os modos "icon" e "link")
-     */
-    this.size = "medium";
   }
   /**
    * Realiza o foco no botão
@@ -26,8 +22,10 @@ export class EzButton {
   async setBlur() {
     this._button.blur();
   }
-  getIconSize() {
-    return this.size;
+  getIconSize(sizeParam = "medium") {
+    const sizeList = ["small", "medium", "large"];
+    const sizeLowerCase = this.size && this.size.toLowerCase();
+    return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
   }
   handleSlotChange(ev) {
     const slot = ev.target;
@@ -42,30 +40,30 @@ export class EzButton {
       }
     }
     else {
-      content.style.setProperty('--ez-icon--color', 'var(--ez-icon--color)');
+      content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
     }
   }
   render() {
     if (this.mode == "icon") {
-      return (h("button", { class: "icon " + this.size, type: "button", disabled: !this.enabled, ref: (el) => this._button = el },
+      return (h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el },
         h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => { if (!this.enabled)
             evt.stopPropagation(); } })));
     }
     else if (this.mode == "label-icon") {
       return (h("div", { class: "label-icon" },
-        h("button", { class: "icon", type: "button", disabled: !this.enabled, ref: (el) => this._button = el },
-          h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: "large", onClick: evt => { if (!this.enabled)
+        h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el },
+          h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => { if (!this.enabled)
               evt.stopPropagation(); } })),
         h("label", { title: this.label }, this.label)));
     }
     else if (this.mode == "link") {
-      return (h("a", { class: this.size, ref: (el) => this._button = el },
+      return (h("a", { class: this.getIconSize(), ref: (el) => this._button = el },
         h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
         this.label,
         h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
     }
     else {
-      return (h("button", { type: "button", disabled: !this.enabled, ref: (el) => this._button = el },
+      return (h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el },
         h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
         this.label,
         h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
@@ -145,7 +143,7 @@ export class EzButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define o icone svg que ser\u00E1 utilizado no bot\u00E3o. Esta propriedade s\u00F3 \u00E9 utilizada caso o componente esteja no modo 'icon'"
+        "text": "Define o icone svg que ser\u00E1 utilizado no bot\u00E3o. Esta propriedade s\u00F3 \u00E9 utilizada caso o componente esteja no modo \"icon\""
       },
       "attribute": "image",
       "reflect": true
@@ -171,8 +169,8 @@ export class EzButton {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "\"small\" | \"medium\" | \"large\" | undefined",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
         "references": {}
       },
       "required": false,
@@ -182,8 +180,7 @@ export class EzButton {
         "text": "\u00C9 poss\u00EDvel escolher entre [small,medium,large] (somente para os modos \"icon\" e \"link\")"
       },
       "attribute": "size",
-      "reflect": true,
-      "defaultValue": "\"medium\""
+      "reflect": true
     }
   }; }
   static get methods() { return {

package/dist/collection/components/ez-form/DataBinder.js

@@ -39,7 +39,12 @@ export default class DataBinder {
     const oldValue = field["value"];
     const newValue = this._dataUnit.getFieldValue(fieldName);
     if (oldValue != newValue) {
-      field["value"] = newValue;
+      if (newValue === undefined) {
+        field.removeAttribute("value");
+      }
+      else {
+        field["value"] = newValue;
+      }
     }
   }
   updateBind(fieldName, field) {
@@ -47,7 +52,13 @@ export default class DataBinder {
     if (oldBind) {
       oldBind.destroy();
     }
-    field["value"] = this._dataUnit.getFieldValue(fieldName);
+    const value = this._dataUnit.getFieldValue(fieldName);
+    if (value === undefined) {
+      field.removeAttribute("value");
+    }
+    else {
+      field["value"] = value;
+    }
     this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
     this.bindSearchOptionsLoader(fieldName, field);
     this.applyEzUploadContext(fieldName, field);

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

@@ -27,7 +27,7 @@ export class EzForm {
         .filter(f => f.dataset.required)
         .map(f => f.dataset.fieldName)
         .concat(metadata.getRequiredFields());
-      const records = this.dataUnit.records;
+      const records = this.dataUnit.getModifiedRecords();
       for (let i = 0; i < records.length; i++) {
         if (!this.validateRequired(requiredFields, records[i])) {
           reject();

package/dist/collection/components/ez-grid/controller/DataUnitBridge.js

@@ -38,7 +38,12 @@ export default class DataUnitBridge {
       this._dataUnit.metadata.fields.forEach(f => {
         var _a;
         if (f.visible !== false) {
-          columnDefs.push({ label: f.label, name: f.name, userInterface: f.userInterface, options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options });
+          const props = new Map();
+          const properties = this._dataUnit.getField(f.name).properties;
+          for (const value in properties) {
+            props.set(value, properties[value]);
+          }
+          columnDefs.push({ label: f.label, name: f.name, userInterface: f.userInterface, options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options, props });
         }
       });
     }

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -5,6 +5,7 @@ import HeaderColumnTemplate from "./template/HeaderColumnTemplate.js";
 import DataSource from "./DataSource";
 import { DataType } from "@sankhyalabs/core";
 import { SortMode, UserInterface } from "@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata";
+import { NumberUtils } from "@sankhyalabs/core";
 export default class AgGridController {
   constructor(enterprise) {
     this._menuItems = [];
@@ -301,19 +302,24 @@ export default class AgGridController {
       });
       return optionSelected === null || optionSelected === void 0 ? void 0 : optionSelected.label;
     }
-    if ((source === null || source === void 0 ? void 0 : source.userInterface) === "SWITCH") {
-      if ((params === null || params === void 0 ? void 0 : params.value) === "S" || (params === null || params === void 0 ? void 0 : params.value) === true) {
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.SWITCH) {
+      if ((params === null || params === void 0 ? void 0 : params.value) === "S" || (params === null || params === void 0 ? void 0 : params.value) === true || (params === null || params === void 0 ? void 0 : params.value) === "true") {
         return "Sim";
       }
-      else if ((params === null || params === void 0 ? void 0 : params.value) === "N" || (params === null || params === void 0 ? void 0 : params.value) === false) {
+      else if ((params === null || params === void 0 ? void 0 : params.value) === "N" || (params === null || params === void 0 ? void 0 : params.value) === false || (params === null || params === void 0 ? void 0 : params.value) === "false") {
         return "Não";
       }
     }
-    if ((source === null || source === void 0 ? void 0 : source.userInterface) === "SEARCH") {
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.SEARCH) {
       if (params.value !== undefined) {
         return ((_a = params === null || params === void 0 ? void 0 : params.value) === null || _a === void 0 ? void 0 : _a.value) + " - " + ((_b = params === null || params === void 0 ? void 0 : params.value) === null || _b === void 0 ? void 0 : _b.label);
       }
     }
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.DECIMALNUMBER) {
+      if (params.value !== undefined) {
+        return NumberUtils.format(params.value.toString(), 2, 2);
+      }
+    }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.DATE || (source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.DATETIME) {
       if (params.value !== undefined) {
         return params.value.toLocaleDateString();

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

@@ -4,7 +4,7 @@ import DataUnitBridge from "./controller/DataUnitBridge";
 export class EzGrid {
   constructor() {
     this._gridController = new AgGridController(false);
-    this._popUpVisible = false;
+    this._popUpGridConfig = false;
     /**
     * Determina o número de linhas de cada página. Caso informado o valor -1
     * não haverá paginação.
@@ -180,28 +180,26 @@ export class EzGrid {
   }
   applyConfig(config) {
     this._gridController.setColumnsState(config.columns);
-    this.closeConfig();
+    this.closeGridConfig();
   }
-  closeConfig() {
-    this._popUpVisible = false;
+  closeGridConfig() {
+    this._popUpGridConfig = false;
   }
-  openConfig() {
+  openGridConfig() {
     this._gridConfig.columns = this._gridController.getColumnsState().filter(c => c.name);
     this._gridConfig.selectedTab = "Colunas";
-    this._popUpVisible = true;
+    this._popUpGridConfig = true;
   }
   render() {
     return (h(Host, null,
       h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" },
         h("div", { class: "grid-header__container" },
           h("slot", { name: "leftButtons" })),
-        h("div", { class: "grid-header__container" },
-          this.getPaginationControl(),
-          h("ez-button", { size: "small", iconName: "settings", class: "ez-button--secondary", mode: "icon", onClick: () => { this.openConfig(); } }))),
+        h("div", { class: "grid-header__container" }, this.getPaginationControl())),
       h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }),
       h("div", { class: "grid__footer" }),
-      h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false },
-        h("grid-config", { ref: ref => this._gridConfig = ref, config: this.config, selectedTab: "Colunas", onConfigFinish: evt => { this.applyConfig(evt.detail); this.configChange.emit(evt.detail); }, onConfigCancel: _evt => this.closeConfig() }))));
+      h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() },
+        h("grid-config", { ref: ref => this._gridConfig = ref, config: this.config, selectedTab: "Colunas", onConfigFinish: evt => { this.applyConfig(evt.detail); this.configChange.emit(evt.detail); }, onConfigCancel: _evt => this.closeGridConfig() }))));
   }
   static get is() { return "ez-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -312,7 +310,7 @@ export class EzGrid {
     "_navigationFirstRow": {},
     "_navigationLastRow": {},
     "_navigationTotalRows": {},
-    "_popUpVisible": {}
+    "_popUpGridConfig": {}
   }; }
   static get events() { return [{
       "method": "ezColumnStateChange",
@@ -591,6 +589,18 @@ export class EzGrid {
         "text": "M\u00E9todo para fazer um filtro r\u00E1pido na grid.",
         "tags": []
       }
+    },
+    "openGridConfig": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {},
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get watchers() { return [{

package/dist/collection/components/ez-grid/subcomponents/gridconfig/grid-config.js

@@ -1,12 +1,14 @@
 import { StringUtils } from '@sankhyalabs/core';
 import { Component, Event, h, Host, Prop } from '@stencil/core';
 import { getSpritePath } from '../../../../utils/AssetsUtils';
+import ApplicationUtils from '../../../../utils/ApplicationUtils';
 export class GridConfig {
   constructor() {
     this._orderListItems = [];
     this._orderPriorityList = [];
     this._columListItems = [];
     this._selectedIndex = -1;
+    this._dataChanged = false;
     this.selectedTab = "Colunas";
   }
   /* Creation Methods */
@@ -84,6 +86,7 @@ export class GridConfig {
   }
   updateOrder(sortOrder, updatedItemLabel) {
     var _a;
+    this._dataChanged = true;
     let newList = [...this.columns];
     let newItem = newList.find(item => item.label === updatedItemLabel);
     if (newItem) {
@@ -112,6 +115,7 @@ export class GridConfig {
   switchColumnGroup(ev, switchedItem) {
     ev.stopPropagation();
     let newList = [...this._columListItems];
+    this._dataChanged = true;
     if (ev.detail === true) {
       let hiddenGroup = newList.find(group => group.group === "Ocultas");
       let index = hiddenGroup.items.findIndex(item => item.label === switchedItem.label);
@@ -151,6 +155,9 @@ export class GridConfig {
       });
     });
     this.columns = newColumnList;
+    this._dataChanged = false;
+    this.closeConfig();
+    ApplicationUtils.info("As configurações foram salvas com sucesso!");
     this.save();
   }
   save() {
@@ -333,13 +340,46 @@ export class GridConfig {
     return false;
   }
   closeConfig() {
-    this.configCancel.emit();
-    this._orderList.clearHistory();
+    this._orderList.scrollToTop();
+    this._columnList.scrollToTop();
+    this._searchElement.value = "";
+    if (this._dataChanged) {
+      let options = {
+        canClose: false,
+        labelCancel: "Descartar",
+        labelConfirm: "Salvar",
+        btnConfirmDanger: false
+      };
+      ApplicationUtils.confirm("Aviso", "As alterações realizadas serão descartadas. Gostaria de salvar antes de sair?", null, false, options)
+        .then(response => {
+        if (!response) {
+          this._dataChanged = false;
+          this.configCancel.emit();
+          this._orderList.clearHistory();
+        }
+        else {
+          this.finish();
+        }
+      });
+    }
+    else {
+      this.configCancel.emit();
+      this._orderList.clearHistory();
+    }
   }
   /* Handlers */
   handleTabChange(ev) {
     var _a;
     if ((_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.selectedTab) {
+      if (this.selectedTab !== ev.target.selectedTab) {
+        if (ev.target.selectedTab === "Colunas") {
+          this._orderList.scrollToTop();
+        }
+        else if (ev.target.selectedTab === "Ordenação das linhas") {
+          this._columnList.scrollToTop();
+        }
+        this._searchElement.value = "";
+      }
       if (ev.target.selectedTab === "Ordenação das linhas") {
         this.createOrderList();
       }
@@ -351,6 +391,7 @@ export class GridConfig {
     if (ev.detail) {
       let visibleItems = (_a = ev.detail.find(group => group.group === "Visíveis")) === null || _a === void 0 ? void 0 : _a.items;
       if (visibleItems) {
+        this._dataChanged = true;
         this._orderListItems = visibleItems;
       }
     }
@@ -359,6 +400,7 @@ export class GridConfig {
     if (ev.detail) {
       let orderPriorityList = ev.detail;
       if (orderPriorityList) {
+        this._dataChanged = true;
         this._orderPriorityList = orderPriorityList;
       }
     }

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

@@ -52,6 +52,17 @@ export class EzList {
     this._listItemsHistory = [];
   }
   /**
+  * Responsável por dar um scroll top no componente da lista.
+  */
+  async scrollToTop() {
+    if (this.useGroups) {
+      this._element.shadowRoot.querySelector('.group-container').scrollTop = 0;
+    }
+    else {
+      this._element.shadowRoot.querySelector('.items-container').scrollTop = 0;
+    }
+  }
+  /**
   * Recebe   como argumento um ListItem {label: string} e um booleano que define se o componente deve fazer scroll para exibir o item específico (opcional).
   */
   async setSelection(selectedItem, scrollToOption) {
@@ -658,6 +669,22 @@ export class EzList {
         "tags": []
       }
     },
+    "scrollToTop": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Respons\u00E1vel por dar um scroll top no componente da lista.",
+        "tags": []
+      }
+    },
     "setSelection": {
       "complexType": {
         "signature": "(selectedItem: ListItem, scrollToOption?: boolean) => Promise<void>",

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

@@ -34,6 +34,11 @@ export class EzModal {
   componentDidLoad() {
     this.handleopenedChange();
   }
+  componentDidRender() {
+    if (this.opened) {
+      this.ezOpenModal.emit();
+    }
+  }
   onMouseDownHandler(event) {
     if (this.closeOutsideClick && event.target === this._overlay) {
       this.closeModal();
@@ -163,6 +168,21 @@ export class EzModal {
         "resolved": "boolean",
         "references": {}
       }
+    }, {
+      "method": "ezOpenModal",
+      "name": "ezOpenModal",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Um evento disparado quando o modal \u00E9 aberto (onEzOpenModal)."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get watchers() { return [{
       "propName": "opened",

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

@@ -37,7 +37,7 @@ export class EzNumberInput {
   }
   changeValue(newValue) {
     this.errorMessage = "";
-    if (newValue && newValue !== this.value) {
+    if (newValue !== this.value) {
       this.value = newValue;
       this.ezChange.emit(this.value);
     }

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

@@ -17,14 +17,16 @@ export class EzTextInput {
   }
   showError() {
     var _a, _b;
-    const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
-    if (hasError) {
-      this._inputElem.classList.add("hasError");
-      (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add("hasError");
-    }
-    else {
-      this._inputElem.classList.remove("hasError");
-      (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove("hasError");
+    if (this._inputElem) {
+      const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
+      if (hasError) {
+        this._inputElem.classList.add("hasError");
+        (_a = this._messageBoxElem) === null || _a === void 0 ? void 0 : _a.classList.add("hasError");
+      }
+      else {
+        this._inputElem.classList.remove("hasError");
+        (_b = this._messageBoxElem) === null || _b === void 0 ? void 0 : _b.classList.remove("hasError");
+      }
     }
   }
   prepareMask() {