@sankhyalabs/ezui 6.4.0-dev.2 → 6.4.0-dev.3

package/dist/collection/components/ez-classic-combo-box/interfaces/IOption.js

@@ -0,0 +1 @@
+export {};

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

@@ -10,18 +10,43 @@
   padding: 0;
 
   /* public */
+  /*@doc Define a cor do texto do input. */
   --ez-classic-input--label-color: var(--color--ocean-green-1000, #00281D);
+
+  /*@doc Define a cor da borda do input quando está no estado padrão. */
   --ez-classic-input--border-color-default: var(--color--gray-200, #D2D2D3);
+
+  /*@doc Define a cor da borda do input quando está no estado de foco. */
   --ez-classic-input--border-color-focus: var(--color--gray-300, #A4A5A7);
+
+  /*@doc Define a cor da borda do input quando está no estado de sucesso. */
   --ez-classic-input--border-color-success: var(--color--green-600, #157A00);
+
+  /*@doc Define a cor da borda do input quando está no estado de erro. */
   --ez-classic-input--border-color-error: var(--color--red-600, #BD0025);
+
+  /*@doc Define a cor da borda do input quando está no estado de aviso. */
   --ez-classic-input--border-color-warning: var(--color--yellow-600, #EFB103);
+
+  /*@doc Define a cor de fundo do input. */
   --ez-classic-input--background-color: var(--color--gray-70, #FFFFFF);
+
+  /*@doc Define a cor de fundo do input quando está desabilitado. */
   --ez-classic-input--background-color-disabled: var(--color--gray-90, #EAEAEA);
+
+  /*@doc Define a cor do texto do input. */
   --ez-classic-input--text-color: var(--color--ocean-green-1000, #00281D);
+
+  /*@doc Define a cor do texto do placeholder do input. */
   --ez-classic-input--placeholder-color: #bdbdbd;
+
+  /*@doc Define a cor do ícone do input. */
   --ez-classic-input--icon-color: var(--color--gray-400, #77777A);
+
+  /*@doc Define a cor do texto de ajuda do input. */
   --ez-classic-input--helptext-color: var(--color--ocean-green-1000, #00281D);
+
+  /*@doc Define a altura do input. */
   --ez-classic-input--height: 56px;
 }
 
@@ -102,6 +127,10 @@ input::placeholder {
   cursor: not-allowed;
 }
 
+.input-container input:read-only {
+  cursor: default;
+}
+
 @keyframes ez-helptext-fadein {
   from {
     opacity: 0;

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

@@ -3,6 +3,7 @@ import { MaskFormatter } from './utils/maskFormatter';
 import { ElementIDUtils } from '@sankhyalabs/core';
 export class EzClassicInput {
   constructor() {
+    this._internalValueChange = false;
     this.type = 'text';
     this.value = undefined;
     this.label = undefined;
@@ -41,6 +42,19 @@ export class EzClassicInput {
   async setBlur() {
     this._inputElem.blur();
   }
+  async syncValue() {
+    if (this._internalValueChange) {
+      this._internalValueChange = false;
+      return;
+    }
+    if (this.value && this._maskFormatter && this._inputElem) {
+      const formattedValue = this._maskFormatter.format(this.value);
+      this._inputElem.value = formattedValue;
+    }
+    else if (this._inputElem) {
+      this._inputElem.value = this.value || '';
+    }
+  }
   onInput(event) {
     try {
       const inputElement = event.target;
@@ -49,11 +63,13 @@ export class EzClassicInput {
         const formattedValue = this._maskFormatter.format(inputValue);
         const cleanValue = this._maskFormatter.removeMask(formattedValue);
         inputElement.value = formattedValue;
+        this._internalValueChange = true;
         this.value = cleanValue;
         const emitValue = this.emitMaskedValue ? formattedValue : cleanValue;
         this.ezChange.emit(emitValue);
       }
       else {
+        this._internalValueChange = true;
         this.value = inputValue;
         this.ezChange.emit(inputValue);
       }
@@ -65,6 +81,9 @@ export class EzClassicInput {
   onBlur() {
     this.ezBlur.emit(this.value);
   }
+  onFocus() {
+    this.ezFocus.emit(this.value);
+  }
   handleIconClick(event, icon) {
     if (!this.enabled) {
       return;
@@ -94,17 +113,11 @@ export class EzClassicInput {
     }
   }
   componentDidLoad() {
-    if (this.value && this._maskFormatter && this._inputElem) {
-      const formattedValue = this._maskFormatter.format(this.value);
-      this._inputElem.value = formattedValue;
-    }
-    else {
-      this._inputElem.value = this.value || '';
-    }
+    this.syncValue();
     this.addInfoId();
   }
   render() {
-    return (h(Host, null, h("label", { title: this.label, htmlFor: this.name }, this.label), h("div", { class: "input-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("input", { ref: el => this._inputElem = el, id: this.name, type: this.type, title: this.value, placeholder: this.placeholder, disabled: !this.enabled, readonly: this.readonly, name: this.name, minlength: this.minlength, maxlength: this.maxlength, onInput: this.onInput.bind(this), onBlur: this.onBlur.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (h("span", { title: this.helpText }, this.helpText))));
+    return (h(Host, null, h("label", { title: this.label, htmlFor: this.name }, this.label), h("div", { class: "input-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("input", { ref: el => this._inputElem = el, id: this.name, type: this.type, title: this.value, placeholder: this.placeholder, disabled: !this.enabled, readonly: this.readonly, name: this.name, minlength: this.minlength, maxlength: this.maxlength, onInput: (event) => this.onInput(event), onBlur: this.onBlur.bind(this), onFocus: this.onFocus.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (h("span", { title: this.helpText }, this.helpText))));
   }
   static get is() { return "ez-classic-input"; }
   static get encapsulation() { return "shadow"; }
@@ -483,6 +496,21 @@ export class EzClassicInput {
           "resolved": "string",
           "references": {}
         }
+      }, {
+        "method": "ezFocus",
+        "name": "ezFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando o input ganha o foco."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
       }, {
         "method": "iconClick",
         "name": "iconClick",
@@ -544,4 +572,10 @@ export class EzClassicInput {
     };
   }
   static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "syncValue"
+      }];
+  }
 }

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

@@ -145,7 +145,7 @@ export class EzMuiltiSelectionList {
     itemSelected.check = itemCheckSelected.check;
   }
   buildViewList(hasDelete) {
-    return (h(Fragment, null, this.displayOptionToCheckAllItems && (h("ez-check", { ref: (element) => (this.checkInput = element), label: this.i18n("ez-multi-selection-list.selectAll"), class: "multi-selection__select-all", onEzChange: this.handleChangeSelectAllItems.bind(this) })), h("ez-list", { class: "multi-selection__list", dataSource: this.displayOptions, listMode: "check", hoverFeedback: true, onEzCheckChange: this.handleChangeSelectedItem.bind(this), itemSlotBuilder: hasDelete ? this.buildDeleteIconSlot.bind(this) : null })));
+    return (h(Fragment, null, this.displayOptionToCheckAllItems && (h("ez-check", { ref: (element) => (this.checkInput = element), label: this.i18n("ez-multi-selection-list.selectAll"), class: "multi-selection__select-all", onEzChange: this.handleChangeSelectAllItems.bind(this) })), h("ez-list", { class: "multi-selection__list", dataSource: this.displayOptions.map(opt => (Object.assign(Object.assign({}, opt), { id: opt.value }))), listMode: "check", hoverFeedback: true, onEzCheckChange: this.handleChangeSelectedItem.bind(this), itemSlotBuilder: hasDelete ? this.buildDeleteIconSlot.bind(this) : null })));
   }
   buildDeleteIconSlot(item) {
     return h("ez-icon", { style: { cursor: 'pointer' }, iconName: "delete", onClick: () => this.handleRemoveItemFromOptions(item) });

package/dist/collection/utils/i18n/locales/en-us.js

@@ -62,6 +62,10 @@ export default {
       placeholder: "Select an item",
       noResults: "No results found",
     },
+    "ez-classic-combo-box": {
+      emptyOption: "Select an item",
+      noResults: "No results found",
+    },
     "ez-date-time-input": {
       invalidDate: "The entered value is not a valid date and time"
     },

package/dist/collection/utils/i18n/locales/es-es.js

@@ -62,6 +62,10 @@ export default {
       placeholder: "Seleccione un elemento",
       noResults: "No se encontraron resultados",
     },
+    "ez-classic-combo-box": {
+      emptyOption: "Seleccione un elemento",
+      noResults: "No se encontraron resultados",
+    },
     "ez-date-time-input": {
       invalidDate: "El valor ingresado no es una fecha y hora válida"
     },

package/dist/collection/utils/i18n/locales/pt-br.js

@@ -62,6 +62,10 @@ export default {
       placeholder: "Selecione um item",
       noResults: "Nenhum resultado encontrado",
     },
+    "ez-classic-combo-box": {
+      emptyOption: "Selecione um item",
+      noResults: "Nenhum resultado encontrado",
+    },
     "ez-date-time-input": {
       invalidDate: "O valor digitado não é uma data e hora válida"
     },

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

@@ -80,6 +80,12 @@ export const EzChip: {
   new (): EzChip;
 };
 
+interface EzClassicComboBox extends Components.EzClassicComboBox, HTMLElement {}
+export const EzClassicComboBox: {
+  prototype: EzClassicComboBox;
+  new (): EzClassicComboBox;
+};
+
 interface EzClassicInput extends Components.EzClassicInput, HTMLElement {}
 export const EzClassicInput: {
   prototype: EzClassicInput;