@sankhyalabs/ezui 2.3.0 → 2.3.2

package/README.md

@@ -71,3 +71,4 @@ o build do ezui, link do react-output e ezui, build do react-output e a disponib
 - [Olá EZUi](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Ol%C3%A1-EzUI)
 - [Diretrizes de codificação](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Diretrizes-de-codifica%C3%A7%C3%A3o)
 - [Diretrizes de componentização](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Diretrizes-de-componentiza%C3%A7%C3%A3o)
+- [Diretrizes de documentação](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Diretrizes-de-documenta%C3%A7%C3%A3o)

package/dist/cjs/ez-actions-button.cjs.entry.js

@@ -16,23 +16,27 @@ let EzActionsButton = class {
     index.registerInstance(this, hostRef);
     this.ezAction = index.createEvent(this, "ezAction", 7);
     /**
-     * Deixa o campo disponível ou não para interação com usuário.
+     * Se false o usuário não pode interagir com o componente.
      */
     this.enabled = true;
     /**
-    * Define se o label será apresentado no display do componente.
+    * Determina o tamanho do ez-action-button.
+    */
+    this.size = "medium";
+    /**
+    * Se true o label será apresentado.
     */
     this.showLabel = false;
     /**
-    * Define se na opção selecionada apresentará um ícone de check.
+    * Se true o check será apresentado para os itens.
     */
     this.checkOption = false;
     /**
-    * Define se o background do botão será transparent.
+    * Se true o background será transparent.
     */
     this.isTransparent = false;
     /**
-    * Define se o elemento contará com a seta de orientação.
+    * Se true a seta de ordenação será apresentada.
     */
     this.arrowActive = false;
     this.innerClickCheck = (floatingContainer, node) => {
@@ -52,7 +56,7 @@ let EzActionsButton = class {
     };
   }
   /**
-   * Oculta a lista de ações
+   * Oculta a lista de ações.
    */
   async hideActions() {
     if (this._floatingID != undefined) {
@@ -61,7 +65,7 @@ let EzActionsButton = class {
     this._floatingID = undefined;
   }
   /**
-   * Verifica se a lista de ações está oculta
+   * Verifica se a lista de ações está aberta.
    */
   async isOpened() {
     return this._floatingID != undefined;
@@ -144,7 +148,7 @@ let EzActionsButton = class {
   render() {
     var _a;
     return (index.h(index.Host, null, index.h("ez-button", { ref: elem => this._button = elem, class: (this.isTransparent ? "ez-actions-button__btn-transparent" : "") +
-        (this.showLabel ? " ez-actions-button__btn-label" : ""), label: this.showLabel && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.label), enabled: this.enabled, mode: this.showLabel ? "" : "icon", iconName: this.showLabel ? "" : this.displayIcon || "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }, this.showLabel &&
+        (this.showLabel ? " ez-actions-button__btn-label" : ""), label: this.showLabel && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.label), enabled: this.enabled, mode: this.showLabel ? undefined : "icon", iconName: this.showLabel ? "" : this.displayIcon || "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }, this.showLabel &&
       index.h("ez-icon", { class: "ez-actions-button__icon-right", slot: "rightIcon", iconName: this.displayIcon || "dots-vertical" })), index.h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem }, this.arrowActive &&
       index.h("div", { class: "ez-actions-button__arrow" +
           (this.isTransparent ? " ez-actions-button__arrow--upped" : "") }), index.h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list" +

package/dist/cjs/ez-button.cjs.entry.js

@@ -11,22 +11,22 @@ let EzButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     /**
-     * Deixa o botão disponível ou não para interação com o usuário.
+     * Se false o usuário não pode interagir com o botão.
      */
     this.enabled = true;
     /**
-       * Define o modo de uso do botão; opções: icon, link e regular
-       */
+     * Define o modo de uso do botão.
+     */
     this.mode = "regular";
   }
   /**
-   * Realiza o foco no botão
+   * Aplica o foco no botão.
    */
   async setFocus() {
     this._button.focus();
   }
   /**
-   * Remove o foco no botão
+   * Remove o foco do botão.
    */
   async setBlur() {
     this._button.blur();

package/dist/cjs/ez-calendar.cjs.entry.js

@@ -18,28 +18,25 @@ let EzCalendar = class {
     this._hoursLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
     this._minutosLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
     /**
-     * A data selecionada no calendário
+     * Define o valor do calendário.
      */
     this.value = new Date();
     /**
-     * No modo floating o calendário só se tornará visível
-     * quando o método show() for acionado.
+     * Define se a exibição do ez-calendar será feita pelos métodos `show()` e `hide()`.
      */
     this.floating = false;
     /**
-     * Exibe ou não as horas e minutos no calendario
+     * Se true a data considera horas e minutos.
      */
     this.time = false;
     /**
-    * Exibe ou não os segundos no calendario
-    */
+     * Se true a data considera segundos. Deve ser usado em conjunto com a propriedade `time`.
+     */
     this.showSeconds = false;
   }
   /**
-   * Usado no modo floating. Faz com que o componente seja exibido.
-   * É possível determinar ajustes de posicionamento através dos parâmetros
-   * top, left, bottom e right. Esses parâmetros devem ser informados como
-   * strings no formato css.
+   * Exibe o ez-calendar em uma posição determinada.
+   * É possível determinar o posicionamento através dos parâmetros, no formato css.
    */
   async show(top, left, bottom, right) {
     if (this.floating) {
@@ -51,8 +48,8 @@ let EzCalendar = class {
     }
   }
   /**
-  * Método necessário para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espaço.
-  */
+   * Ajusta o posicionamento do ez-calendar conforme a disponibilidade de espaço.
+   */
   async fitVertical(topOffset, bottomOffset) {
     const neededHeight = this._container.getBoundingClientRect().bottom + this._calendarHeight;
     const availableBottom = (window.innerHeight || document.documentElement.clientHeight) > neededHeight;
@@ -64,7 +61,7 @@ let EzCalendar = class {
     }
   }
   /**
-   * Usado no modo floating. Faz com que o componente seja ocultado.
+   * Oculta o ez-calendar.
    */
   async hide() {
     if (this._floatingID !== undefined) {

package/dist/cjs/ez-check.cjs.entry.js

@@ -13,14 +13,11 @@ let EzCheck = class {
     index.registerInstance(this, hostRef);
     this.ezChange = index.createEvent(this, "ezChange", 7);
     /**
-     * Deixa o campo disponível ou não para interação com o usuário.
+     * Se false o usuário não pode interagir com o campo.
      */
     this.enabled = true;
     /**
-     * Existem dois modos de visualização: regular e switch.
-     * Se esta propriedade for omitida, o componete assume o formato "regular".
-     * No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
-     * No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
+     * Define o modo de visualização do ez-check.
      */
     this.mode = CheckMode.CheckMode.REGULAR;
   }
@@ -28,13 +25,13 @@ let EzCheck = class {
   // Public methods
   //---------------------------------------------
   /**
-   * Devolve o modo escolhido para o componente
+   * Obtém o modo escolhido.
    */
   async getMode() {
-    return this.mode;
+    return CheckMode.CheckMode[this.mode];
   }
   /**
-   * Faz o foco no componente de input
+   * Aplica o foco no campo.
    */
   async setFocus() {
     this._inputElem.focus();

package/dist/cjs/ez-chip.cjs.entry.js

@@ -14,11 +14,11 @@ let EzChip = class {
     this.removeChip = index.createEvent(this, "removeChip", 7);
     this.actionClick = index.createEvent(this, "actionClick", 7);
     /**
-     * Deixa o componente disponível ou não para seleção.
+     * Se false o usuário não pode interagir com o ez-chip.
      */
     this.enabled = true;
     /**
-     * Indica se o componente está ou não ativado.
+     * Define o valor do ez-chip.
      */
     this.value = false;
   }
@@ -26,13 +26,13 @@ let EzChip = class {
   // Public methods
   //---------------------------------------------
   /**
-   * Faz o foco no componente de input
+   * Aplica o foco no ez-chip.
    */
   async setFocus() {
     this._labelElem.focus();
   }
   /**
-   * Remove o foco no componente de input
+   * Remove o foco do ez-chip.
    */
   async setBlur() {
     this._labelElem.blur();

package/dist/cjs/ez-collapsible-box.cjs.entry.js

@@ -19,45 +19,45 @@ let EzCollapsibleBox = class {
     this.ezEditLabelMode = index.createEvent(this, "ezEditLabelMode", 7);
     this._activeEditText = false;
     /**
-     * Valor externalizado que garante a exibição ou não do componente.
+     * Define o valor do componente.
      */
     this.value = false;
     /**
-    * Define o tamanho do texto e do ícone do componente.
-    */
+     * Define o tamanho do texto e do ícone.
+     */
     this.headerSize = "small";
     /**
-    * Define o local onde o ícone será renderizado.
-    */
+     * Define o posicionamento do ícone.
+     */
     this.iconPlacement = "left";
     /**
-    * Define se o titulo irá ocupar toda a largura do componente.
-    */
+     * Se true o título irá ocupar toda a largura do componente.
+     */
     this.stretchTitle = false;
     /**
-    * Ativa o ícone para remoção do componente.
-    */
+     * Se true mostra o ícone para remoção do componente.
+     */
     this.removable = false;
     /**
-    * Ativa o ícone para edição do componente.
-    */
+     * Se true mostra o ícone para edição do componente.
+     */
     this.editable = false;
   }
   /**
-   * Esconde ou revela o conteúdo do componente.
+   * Oculta/mostra o conteúdo do ez-collapsible-box.
    */
   async showHide() {
     this.value = !this.value;
   }
   /**
-   * Aplica focus no campo de edição de título.
+   * Aplica o foco no campo de edição de título.
    */
   async applyFocusTextEdit() {
     var _a;
     (_a = this._refTextEdit) === null || _a === void 0 ? void 0 : _a.applyFocusSelect();
   }
   /**
-   * Fecha a edição de título.
+   * Cancela a edição de título.
    */
   async cancelEdition() {
     this._activeEditText = false;

package/dist/cjs/ez-combo-box.cjs.entry.js

@@ -24,31 +24,31 @@ let EzComboBox = class {
     this._startLoading = false;
     this._showLoading = true;
     /**
-     * Deixa o campo disponível ou não para interação com usuário.
+     * Se false o usuário não pode interagir com o campo.
      */
     this.enabled = true;
     /**
-     * Ajusta a opção de mostrar o "value" ao selecionar uma opção. Por padrão não mostra.
+     * Se true a opção selecionada exibe o `value` junto com `label`.
      */
     this.showSelectedValue = false;
     /**
-     * Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
+     * Se true cada opção na lista exibe o `value` junto com `label`.
      */
     this.showOptionValue = false;
     /**
-    * Desabilita a digitação dentro do componente.
-    */
+     * Se true desabilita a digitação dentro do componente.
+     */
     this.suppressSearch = false;
     /**
-     * Remove a opção vazia da lista de opções
+     * Se true remove a opção vazia da lista.
      */
     this.suppressEmptyOption = false;
     /**
-     * Permite exibir a mensagem de erro.
+     * Se false deixa de exibir a mensagem de erro dentro do campo.
      */
     this.canShowError = true;
     /**
-     * Define o modo do tamanho do campo; opções: slim e regular.
+     * Define o tamanho do campo.
      */
     this.mode = "regular";
   }
@@ -82,19 +82,19 @@ let EzComboBox = class {
     }
   }
   /**
-   * Realiza o foco no componente de seleção
+   * Aplica o foco no campo.
    */
   async setFocus() {
     this._textInput.setFocus();
   }
   /**
-   * Remove o foco no componente de seleção
+   * Remove o foco do campo.
    */
   async setBlur() {
     this._textInput.setBlur();
   }
   /**
-   * Retorna informando se o campo está inválido (true | false)
+   * Retorna se o conteúdo é inválido.
    */
   async isInvalid() {
     return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";

package/dist/cjs/ez-date-input.cjs.entry.js

@@ -16,11 +16,11 @@ let EzDateInput = class {
     this.ezCancelWaitingChange = index.createEvent(this, "ezCancelWaitingChange", 7);
     this._focused = false;
     /**
-     * Deixa o campo disponível ou não para uso.
+     * Se false o usuário não pode interagir com o campo.
      */
     this.enabled = true;
     /**
-     * Define o modo do tamanho do campo; opções: slim e regular.
+     * Define o tamanho do campo.
      */
     this.mode = "regular";
   }
@@ -56,19 +56,19 @@ let EzDateInput = class {
     }
   }
   /**
-   * Realiza o foco no componente de data
+   * Aplica o foco no campo.
    */
   async setFocus() {
     this._textInput.setFocus();
   }
   /**
-   * Remove o foco no componente de data
+   * Remove o foco do campo.
    */
   async setBlur() {
     this._textInput.setBlur();
   }
   /**
-   * Retorna informando se o campo está inválido (true | false)
+   * Retorna se o conteúdo é inválido.
    */
   async isInvalid() {
     return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";

package/dist/cjs/ez-date-time-input.cjs.entry.js

@@ -16,15 +16,15 @@ let EzDateTimeInput = class {
     this.ezCancelWaitingChange = index.createEvent(this, "ezCancelWaitingChange", 7);
     this._focused = false;
     /**
-     * Deixa o campo disponível ou não para uso.
+     * Se false o usuário não pode interagir com o campo.
      */
     this.enabled = true;
     /**
-  * Exibe ou não os segundos no input
-  */
+     * Se true considera segundos.
+     */
     this.showSeconds = false;
     /**
-     * Define o modo do tamanho do campo; opções: slim e regular.
+     * Define o tamanho do campo.
      */
     this.mode = "regular";
   }
@@ -60,19 +60,19 @@ let EzDateTimeInput = class {
     }
   }
   /**
-   * Realiza o foco no componente de datetime
+   * Aplica o foco no campo.
    */
   async setFocus() {
     this._textInput.setFocus();
   }
   /**
-   * Remove o foco no componente de datetime
+   * Remove o foco do campo.
    */
   async setBlur() {
     this._textInput.setBlur();
   }
   /**
-   * Retorna informando se o campo está inválido (true | false)
+   * Retorna se o conteúdo é inválido.
    */
   async isInvalid() {
     return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";

package/dist/cjs/ez-dialog.cjs.entry.js

@@ -29,19 +29,16 @@ let EzDialog = class {
     this.labelCancel = 'Não';
     this.btnConfirmDanger = false;
     /**
-     * Define se o componente será utilizado no modo de confirmação.
+     * Define se o ez-dialog será utilizado no modo de confirmação.
      */
     this.confirm = false;
     /**
-     * Controla a exibição do componente
+     * Define se o ez-dialog está aberto.
      */
     this.opened = false;
     this._messageQueue = [];
   }
-  /**
-   * Lida com o clique nos botões de dentro do componente.
-   */
-  async handleButtonClick(selectedOption) {
+  handleButtonClick(selectedOption) {
     this.opened = this._messageQueue.length > 0;
     if (this._currentMessage.callBack) {
       this._currentMessage.callBack(selectedOption);
@@ -53,7 +50,7 @@ let EzDialog = class {
     index.forceUpdate(this);
   }
   /**
-   * Faz com que o componente seja exibido.
+   * Exibe o ez-dialog.
    */
   async show(title, message, dialogType, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger) {
     this.opened = true;

package/dist/cjs/ez-filter-input.cjs.entry.js

@@ -13,11 +13,11 @@ let EzFilterInput = class {
     index.registerInstance(this, hostRef);
     this.ezChange = index.createEvent(this, "ezChange", 7);
     /**
-     * Deixa o campo disponível ou não para uso.
+     * Se false o usuário não pode interagir com o campo.
      */
     this.enabled = true;
     /**
-     * Define o modo do tamanho do campo; opções: slim e regular.
+     * Define o tamanho do campo.
      */
     this.mode = "regular";
   }
@@ -38,19 +38,19 @@ let EzFilterInput = class {
     }
   }
   /**
-   * Realiza o foco no componente de input
+   * Aplica o foco no campo.
    */
   async setFocus() {
     this._textInput.setFocus();
   }
   /**
-   * Remove o foco no componente de input
+   * Remove o foco do campo.
    */
   async setBlur() {
     this._textInput.setBlur();
   }
   /**
-   * Retorna informando se o campo está inválido (true | false)
+   * Retorna se o conteúdo é inválido.
    */
   async isInvalid() {
     return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
@@ -67,7 +67,7 @@ let EzFilterInput = class {
   }
   render() {
     let elementId = core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.changeValue(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, loading: this.loading, mode: this.mode }, index.h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+    return (index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.changeValue(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode }, index.h("ez-icon", { slot: "leftIcon", iconName: "search" })));
   }
   get _elem() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/ez-form.cjs.entry.js

@@ -856,12 +856,9 @@ let EzForm = class {
       }
     };
   }
-  submit() {
-    return Promise.resolve();
-  }
-  cancel() {
-    return Promise.resolve();
-  }
+  /**
+   * Realiza validação no conteúdo de todos os campos.
+   */
   validate() {
     return new Promise((accept, reject) => {
       var _a;
@@ -948,7 +945,7 @@ let EzForm = class {
       const idTabSelector = `${this._dataElementIdEzForm}_internal_tabSelector`;
       result.push(index.h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
     }
-    const idFormSheet = `${this._dataElementIdEzForm}_${core.StringUtils.toCamelCase(currentSheet.label)}`;
+    const idFormSheet = `${this._dataElementIdEzForm}_${core.StringUtils.replaceAccentuatedChars(core.StringUtils.toCamelCase(currentSheet.label), false)}`;
     result.push(index.h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
     return result;
   }