@sankhyalabs/ezui 1.1.159 → 1.1.161

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

@@ -17,7 +17,7 @@ export default class DataBinder {
         case Action.NEXT_SELECTED:
         case Action.PREVIOUS_SELECTED:
           (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
-            this.updateValue(field.fieldName, field.field);
+            this.updateValue(field.fieldName, field.field, action.type === Action.EDITION_CANCELED);
           });
           break;
       }
@@ -35,15 +35,24 @@ export default class DataBinder {
   onDisconnectedCallback() {
     this._dataUnit.unsubscribe(this.onDataUnitEvent);
   }
-  updateValue(fieldName, field) {
+  updateValue(fieldName, field, actionCanceled = false) {
+    var _a;
     field["value"] = this._dataUnit.getFieldValue(fieldName);
+    /**
+     * FIXME: Campo já salvo com undefined, ao inserir valor inválido e cancelar,
+     * o campo não é limpo e atualizado automaticamente, pois o value não mudou,
+     * assim, não dispara o Watch do value, que é o responsável por limpar o errorMessage.
+     */
+    if (actionCanceled && ((_a = field["errorMessage"]) === null || _a === void 0 ? void 0 : _a.trim())) {
+      field["errorMessage"] = "";
+    }
   }
   updateBind(fieldName, field) {
     const oldBind = this._fields.get(fieldName);
     if (oldBind) {
       oldBind.destroy();
     }
-    field["value"] = this._dataUnit.getFieldValue(fieldName);
+    this.updateValue(fieldName, field);
     this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName) => this.cancelWaitingChange(fieldName), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
     this.bindSearchOptionsLoader(fieldName, field);
     this.applyEzUploadContext(fieldName, field);

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

@@ -21,25 +21,59 @@ export class EzForm {
     return Promise.resolve();
   }
   validate() {
-    return new Promise((accept, reject) => {
+    return new Promise(async (accept, reject) => {
       const metadata = selectFormMetadata(this._store.getState());
       const requiredFields = this._staticFields
         .filter(f => f.dataset.required)
         .map(f => f.dataset.fieldName)
         .concat(metadata.getRequiredFields());
+      let isReject = false;
       const records = this.dataUnit.getModifiedRecords();
       for (let i = 0; i < records.length; i++) {
         if (!this.validateRequired(requiredFields, records[i])) {
-          reject();
+          isReject = true;
           break;
         }
       }
-      accept();
+      if (!isReject) {
+        const validateError = await this.validateError();
+        if (!validateError) {
+          isReject = true;
+        }
+      }
+      if (isReject) {
+        reject();
+      }
+      else {
+        accept();
+      }
     });
   }
   observeConfig() {
     this.processMetadata();
   }
+  async validateError() {
+    var _a;
+    const invalidFields = [];
+    const dataFields = (_a = this._element) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-field-name]");
+    if (dataFields && dataFields.length > 0) {
+      for (let i = 0; i < dataFields.length; i++) {
+        const fieldElem = dataFields[i];
+        if (fieldElem && fieldElem['isInvalid']) {
+          const hasError = await fieldElem['isInvalid']();
+          if (hasError && fieldElem['dataset']) {
+            invalidFields.push(fieldElem['dataset'].fieldName);
+          }
+        }
+      }
+      ;
+    }
+    const isValid = invalidFields.length === 0;
+    if (!isValid) {
+      ApplicationUtils.info("Há pelo menos um campo com conteúdo inválido.");
+    }
+    return isValid;
+  }
   validateRequired(requiredFields, record) {
     const invalidFields = [];
     requiredFields.forEach(field => {
@@ -52,13 +86,16 @@ export class EzForm {
        * na aba, isso será tratado no card: https://sankhya.atlassian.net/browse/SKA-44182
        */
       if (fieldElem) {
+        /**
+         * Devido o StencilJS não possuir Getter e Setter, para casos que o Watch não for chamado,
+         * é necessário limpar a propriedade antes de setar o valor novamente, para que o Watch seja disparado novamente,
+         * solução necessária para controlar componentes com herança (Exemplo: EzSearch -> EzComboBox -> EzTextInput).
+         */
+        fieldElem["errorMessage"] = "";
         if (value === null || value === undefined || value === "") {
           invalidFields.push(field);
           fieldElem["errorMessage"] = "Essa informação é obrigatória";
         }
-        else {
-          fieldElem["errorMessage"] = "";
-        }
       }
     });
     const isValid = invalidFields.length === 0;

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

@@ -8,7 +8,7 @@ import { SortMode, UserInterface } from "@sankhyalabs/core/dist/dataunit/metadat
 import { NumberUtils, StringUtils } from "@sankhyalabs/core";
 export default class AgGridController {
   constructor(enterprise) {
-    this.DEFAULT_ROW_HEIGHT = 25;
+    this.DEFAULT_ROW_HEIGHT = 30;
     this.CHECK_BOX_COL_ID = "checkBoxColumn";
     this.RECORD_ARCHIVE_COL_ID = "__RECORD_ARCHIVE__";
     this.BLOCK_LOAD_DEBOUNCE = 400;
@@ -71,7 +71,7 @@ export default class AgGridController {
         //dos blocos, então, quando removemos uma linha, a altura do bloco não é recalculada.
         //Descobri que setando manualmente a altura das linhas, apesar do bloco ficar com 
         //tamanho errado, isso afeta menos o componente.
-        rowHeight: this.DEFAULT_ROW_HEIGHT
+        getRowHeight: this.getRowHeight.bind(this)
       };
       this.setOptionsEvents(this._gridOptions);
       this.setOptionsPagination(this._gridOptions);
@@ -85,8 +85,12 @@ export default class AgGridController {
       this._lastPageStatus = this.getPaginationStatus();
       //Atualiza estado da seleção inicial
       this.onSelectionChange();
+      this._gridOptions.api.setHeaderHeight(this.getRowHeight());
     }
   }
+  getRowHeight() {
+    return this.DEFAULT_ROW_HEIGHT;
+  }
   setOptionsEvents(opt) {
     opt.onSortChanged = e => this.onCallStateChange("sort", e);
     opt.onColumnResized = e => this.onCallStateChange("columnResize", e);
@@ -214,7 +218,7 @@ export default class AgGridController {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
     const colDef = this._gridOptions.columnApi.getAllColumns();
-    return colDef.map(c => {
+    return colDef.filter(c => c.getColId() !== "checkBoxColumn").map(c => {
       const def = c.getColDef();
       const colDef = { name: def.field, label: def.headerName };
       this.conditionalSet(colDef, "sortable", def.sortable);

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

@@ -3,6 +3,8 @@
   grid-template-rows: auto 1fr auto;
   height: 100%;
   width: 100%;
+  
+  /*public*/
   /*@doc Define a cor de fundo do header do componente.*/
   --ezgrid__header--background-color: var(--background--xlight, #FFF)
 }
@@ -22,6 +24,8 @@
   box-shadow: 0 0 16px 0 rgb(0 38 111 / 12%);
   padding-top: 15px;
   margin-top: -12px;
+
+  /*public*/
   background-color: var(--ezgrid__header--background-color);
 }
 

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

@@ -134,6 +134,14 @@ export class EzGrid {
   async hasPreviousRecord() {
     return Promise.resolve(this._gridController.hasPreviousRecord());
   }
+  /**
+  * Método para abrir a configuração da grid.
+  */
+  async openGridConfig() {
+    this._gridConfig.columns = this._gridController.getColumnsState().filter(c => c.name);
+    this._gridConfig.selectedTab = "Colunas";
+    this._popUpGridConfig = true;
+  }
   componentWillLoad() {
     if (this.dataUnit) {
       this._dataUnitBridge = new DataUnitBridge(this._gridController, this.dataUnit);
@@ -253,11 +261,6 @@ export class EzGrid {
   closeGridConfig() {
     this._popUpGridConfig = false;
   }
-  openGridConfig() {
-    this._gridConfig.columns = this._gridController.getColumnsState().filter(c => c.name);
-    this._gridConfig.selectedTab = "Colunas";
-    this._popUpGridConfig = true;
-  }
   render() {
     return (h(Host, null,
       h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" },
@@ -267,7 +270,7 @@ export class EzGrid {
       h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }),
       h("div", { class: "grid__footer" }),
       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.observeConfig(evt.detail); this.configChange.emit(evt.detail); }, onConfigCancel: _evt => this.closeGridConfig() }))));
+        h("ez-grid-config", { ref: ref => this._gridConfig = ref, config: this.config, selectedTab: "Colunas", onConfigFinish: evt => { this.observeConfig(evt.detail); this.configChange.emit(evt.detail); }, onConfigCancel: _evt => this.closeGridConfig() }))));
   }
   static get is() { return "ez-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -300,10 +303,10 @@ export class EzGrid {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "EzGridConfig",
-        "resolved": "EzGridConfig",
+        "original": "IGridConfig",
+        "resolved": "IGridConfig",
         "references": {
-          "EzGridConfig": {
+          "IGridConfig": {
             "location": "import",
             "path": "./controller/EzGridController"
           }
@@ -446,10 +449,10 @@ export class EzGrid {
         "text": "Evento disparado ao realizar alguma modifica\u00E7\u00E3o na configura\u00E7\u00E3o da grid."
       },
       "complexType": {
-        "original": "EzGridConfig",
-        "resolved": "EzGridConfig",
+        "original": "IGridConfig",
+        "resolved": "IGridConfig",
         "references": {
-          "EzGridConfig": {
+          "IGridConfig": {
             "location": "import",
             "path": "./controller/EzGridController"
           }
@@ -823,11 +826,15 @@ export class EzGrid {
       "complexType": {
         "signature": "() => Promise<void>",
         "parameters": [],
-        "references": {},
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "M\u00E9todo para abrir a configura\u00E7\u00E3o da grid.",
         "tags": []
       }
     }

package/dist/collection/components/ez-grid/subcomponents/{gridconfig/grid-config.css → ez-grid-config/ez-grid-config.css}

@@ -1,5 +1,4 @@
 :host {
-
     /*@doc Define o espaçamento utilizado no rodapé do componente.*/
     --ez-grid-config__footer--padding-top: var(--space--medium, 12px);
 
@@ -15,8 +14,10 @@
     /*@doc Define o estilo da fonte utilizada para o subtitulo do componente.*/
     --ez-grid-config__subtitle--font-family: var(--font-pattern, "Sora");
 
+    /*@doc Define o estilo da fonte utilizada para o titulo do componente.*/
     --ez-grid-config__title--font-family: var(--font-pattern, "Sora");
 
+    /*@doc Define o peso do texto utilizado para o titulo do componente.*/
     --ez-grid-config__title--font-weight: var(--text-weight--large, 700);
 
     /*@doc Define o tamanho da fonte utilizada para o subtitulo do componente.*/
@@ -26,19 +27,22 @@
     --ez-grid-config__scrollbar--width: var(--space--medium, 12px);
 
     /*@doc Define a cor da barra de rolagem do componente.*/
-    --ez-grid-config__main__scrollbar--background-color: var(--text--primary, #626e82);
+    --ez-grid-config__scrollbar--background-color: var(--text--primary, #626e82);
 
     /*@doc Define o raio da borda da barra de rolagem do componente.*/
-    --ez-grid-config__main__scrollbar--border-radius: var(--border--radius-medium, 12px);
+    --ez-grid-config__scrollbar--border-radius: var(--border--radius-medium, 12px);
 
     /* @doc Define o estilo do texto do grupo da lista. */
-    --ez-grid__group--font-family: var(--font-pattern, "Sora");
+    --ez-grid-config__group--font-family: var(--font-pattern, "Sora");
+
     /* @doc Define o tamanho do texto do grupo da lista. */
-    --ez-grid__group--font-size: var(--text--medium, 14px);
+    --ez-grid-config__group--font-size: var(--text--medium, 14px);
+
     /* @doc Define o peso do texto do grupo da lista. */
-    --ez-grid__group--font-weight: var(--text-weight--large, 600);
+    --ez-grid-config__group--font-weight: var(--text-weight--large, 600);
+
     /* @doc Define o espaçamento inferior do grupo da lista. */
-    --ez-grid__group--padding-bottom: var(--space-small, 6px);
+    --ez-grid-config__group--padding-bottom: var(--space-small, 6px);
 
     display: grid;
     grid-template-rows: auto 1fr auto;
@@ -46,6 +50,13 @@
     width: 100%;
 }
 
+@media screen and (min-width: 480px) {
+    :host {
+        width: 359px;
+        max-width: 359px;
+    }
+}
+
 .padding-right--medium {
     padding-right: var(--space--medium);
 }
@@ -53,15 +64,18 @@
 ez-list {
     height: 100%;
 }
-.heigth-calc{
+
+.height-calc {
     max-height: calc(100% - 24px);
 }
 
 .grid-config__footer {
-    padding-top: var(--ez-grid-config__footer--padding-top);
     display: flex;
     justify-content: flex-end;
     width: 100%;
+
+    /*public*/
+    padding-top: var(--ez-grid-config__footer--padding-top);
 }
 
 .hidden {
@@ -69,15 +83,19 @@ ez-list {
 }
 
 .grid-config__main {
-    padding-right: var(--ez-grid-config__main--padding-right);
     overflow-y: auto;
+
+    /*public*/
+    padding-right: var(--ez-grid-config__main--padding-right);
 }
 
 .tabselector-container {
+    /*public*/
     padding: var(--ez-grid-config__tabselector-container--padding) 0;
 }
 
 .button-close {
+    /*public*/
     padding-left: var(--ez-grid-config__button-close--padding-left);
 }
 
@@ -85,10 +103,11 @@ ez-list {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    width: 359px;
+    width: 100%;
 }
 
 .subtitle {
+    /*public*/
     font-family: var(--ez-grid-config__subtitle--font-family);
     font-size: var(--ez-grid-config__subtitle--font-size);
     color: var(--text--primary);
@@ -97,13 +116,15 @@ ez-list {
 .title {
     display: flex;
     margin: 0;
-    font-family: var(--ez-grid-config__title--font-family);
-    font-size: var(--title--large);
-    font-weight: var(--ez-grid-config__title--font-weight);
     line-height: normal;
     letter-spacing: 0em;
     text-align: left;
+
+    /*public*/
     color: var(--title--primary);
+    font-family: var(--ez-grid-config__title--font-family);
+    font-size: var(--title--large);
+    font-weight: var(--ez-grid-config__title--font-weight);
 }
 
 .grid-config__main::-webkit-scrollbar-track {
@@ -111,19 +132,24 @@ ez-list {
 }
 
 .grid-config__main::-webkit-scrollbar-thumb {
-    background-color: var(--ez-grid-config__main__scrollbar--background-color);
-    border-radius: var(--ez-grid-config__main__scrollbar--border-radius);
+    /*public*/
+    background-color: var(--ez-grid-config__scrollbar--background-color);
+    border-radius: var(--ez-grid-config__scrollbar--border-radius);
 }
 
 .grid-config__main::-webkit-scrollbar {
     background-color: #f0f2f5;
+
+    /*public*/
     width: var(--ez-grid-config__scrollbar--width);
     max-width: var(--ez-grid-config__scrollbar--width);
     min-width: var(--ez-grid-config__scrollbar--width);
 }
+
 .group-name {
-    font-family: var(--ez-grid__group--font-family);
-    font-size: var(--ez-grid__group--font-size);
-    font-weight: var(--ez-grid__group--font-weight);
-    padding-bottom: var(--ez-grid__group--padding-bottom);
+    /*public*/
+    font-family: var(--ez-grid-config__group--font-family);
+    font-size: var(--ez-grid-config__group--font-size);
+    font-weight: var(--ez-grid-config__group--font-weight);
+    padding-bottom: var(--ez-grid-config__group--padding-bottom);
 }

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

@@ -1,7 +1,7 @@
 import { StringUtils } from '@sankhyalabs/core';
 import { Component, Event, h, Host, Prop } from '@stencil/core';
 import ApplicationUtils from '../../../../utils/ApplicationUtils';
-export class GridConfig {
+export class EzGridConfig {
   constructor() {
     this._orderListItems = [];
     this._orderPriorityList = [];
@@ -82,7 +82,7 @@ export class GridConfig {
       selectedOption = item.ascending == true ? 'asc' : 'desc';
     }
     return (h("div", null,
-      h("select-box", { selectedOption: selectedOption, key: 'select-box-' + this._componenteInternalKey + '-' + item, onEzChange: (ev) => { ev.stopPropagation(); this.updateOrder(ev.detail, item.label); } })));
+      h("ez-select-box", { selectedOption: selectedOption, key: 'ez-select-box-' + this._componenteInternalKey + '-' + item, onEzChange: (ev) => { ev.stopPropagation(); this.updateOrder(ev.detail, item.label); } })));
   }
   updateOrder(sortOrder, updatedItemLabel) {
     var _a;
@@ -435,18 +435,18 @@ export class GridConfig {
       h("div", { class: "grid-config__main" },
         h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedTab === "Colunas" ? "" : "hidden", dataSource: this._columListItems, onEzChange: ev => this.handleColumnListChange(ev), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }),
         h("div", { class: this.selectedTab === "Ordenação das linhas" ? "group-name" : "hidden" }, "Sequ\u00EAncia da ordena\u00E7\u00E3o"),
-        h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "heigth-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: ev => this.handleOrderListChange(ev), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })),
+        h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "height-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: ev => this.handleOrderListChange(ev), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })),
       h("div", { class: "grid-config__footer" },
         h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }),
         h("ez-button", { label: "Concluir", class: "ez-button--primary", onClick: () => this.finish() }))));
   }
-  static get is() { return "grid-config"; }
+  static get is() { return "ez-grid-config"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
-    "$": ["grid-config.css"]
+    "$": ["ez-grid-config.css"]
   }; }
   static get styleUrls() { return {
-    "$": ["grid-config.css"]
+    "$": ["ez-grid-config.css"]
   }; }
   static get assetsDirs() { return ["../assets"]; }
   static get properties() { return {
@@ -495,10 +495,10 @@ export class GridConfig {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "EzGridConfig",
-        "resolved": "EzGridConfig",
+        "original": "IGridConfig",
+        "resolved": "IGridConfig",
         "references": {
-          "EzGridConfig": {
+          "IGridConfig": {
             "location": "import",
             "path": "../../controller/EzGridController"
           }
@@ -523,10 +523,10 @@ export class GridConfig {
         "text": ""
       },
       "complexType": {
-        "original": "EzGridConfig",
-        "resolved": "EzGridConfig",
+        "original": "IGridConfig",
+        "resolved": "IGridConfig",
         "references": {
-          "EzGridConfig": {
+          "IGridConfig": {
             "location": "import",
             "path": "../../controller/EzGridController"
           }

package/dist/collection/components/ez-grid/subcomponents/{select-box/select-box.css → ez-select-box/ez-select-box.css}

@@ -1,10 +1,9 @@
-
-ez-combo-box{
+ez-combo-box {
     width: 100px;
 }
 
-.grid-config-combo{
+.grid-config-combo {
     --ez-text-input--height: 28px;
     --ez-text-input__input--background-color: #fff;
     --ez-text-input__input--border-color: #dce0e8;
-}
+}

package/dist/collection/components/ez-grid/subcomponents/{select-box/select-box.js → ez-select-box/ez-select-box.js}

@@ -9,13 +9,13 @@ export class SelectBox {
       h("option", { value: "asc" }, "A-Z"),
       h("option", { value: "desc" }, "Z-A")));
   }
-  static get is() { return "select-box"; }
+  static get is() { return "ez-select-box"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["select-box.css"]
+    "$": ["ez-select-box.css"]
   }; }
   static get styleUrls() { return {
-    "$": ["select-box.css"]
+    "$": ["ez-select-box.css"]
   }; }
   static get assetsDirs() { return ["../assets"]; }
   static get properties() { return {