@sankhyalabs/ezui 1.1.124 → 1.1.127

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js

@@ -1,39 +1,52 @@
-import { Component, h, Host, Prop, Event, Watch, Method } from "@stencil/core";
+import { Component, h, Prop, Event, Watch, Method } from "@stencil/core";
 export class EzCollapsibleBox {
   constructor() {
     /**
-     * Valor externalizado que garante a exibição ou não do componente
+     * Valor externalizado que garante a exibição ou não do componente.
      */
     this.value = false;
     /**
     * Define o tamanho do texto e do ícone do componente.
+    * Tamanhos suportados: "x-small", "small", "medium", "large" e "x-large".
     */
     this.headerSize = "small";
     /**
     * Define o local onde o ícone será renderizado.
     */
     this.iconPlacement = "left";
+    /**
+    * Define se o titulo irá ocupar toda a largura do componente.
+    */
+    this.stretchTitle = false;
   }
-  observeValue() {
+  observeCollapsedValue() {
     this.ezChange.emit(this.value);
   }
   /**
-   * Esconde ou revela o conteúdo do componente
+   * Esconde ou revela o conteúdo do componente.
    */
   async showHide() {
     this.value = !this.value;
   }
+  /**
+   * Retorna o tamanho configurado do texto e do ícone.
+   */
+  getHeaderSize() {
+    const sizeAlias = ["xsmall", "xlarge"];
+    const sizeList = ["x-small", "small", "medium", "large", "x-large"];
+    const headerSize = sizeAlias.includes(this.headerSize) ? this.headerSize.replace('x', 'x-') : this.headerSize;
+    return sizeList.includes(headerSize) ? headerSize : "small";
+  }
   render() {
-    return (h(Host, null,
-      this.iconPlacement == "right" ?
-        h("div", { class: "collapsible-box__title" },
-          h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label),
-          h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }))
-        :
-          h("div", { class: "collapsible-box__title" },
-            h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }),
-            h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label)),
-      !this.value ? h("slot", null) : null));
+    return (h("div", { class: "collapsible-box" },
+      h("div", { class: "collapsible-box__header" },
+        h("button", { onClick: () => this.showHide(), class: "collapsible-box__title" +
+            (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
+            (this.stretchTitle ? " collapsible-box__title--stretched" : "") },
+          h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : "") }),
+          h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label }, this.label))),
+      h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") },
+        h("slot", null))));
   }
   static get is() { return "ez-collapsible-box"; }
   static get encapsulation() { return "shadow"; }
@@ -56,7 +69,7 @@ export class EzCollapsibleBox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Valor externalizado que garante a exibi\u00E7\u00E3o ou n\u00E3o do componente"
+        "text": "Valor externalizado que garante a exibi\u00E7\u00E3o ou n\u00E3o do componente."
       },
       "attribute": "value",
       "reflect": true,
@@ -91,7 +104,7 @@ export class EzCollapsibleBox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Define o tamanho do texto e do \u00EDcone do componente."
+        "text": "Define o tamanho do texto e do \u00EDcone do componente.\nTamanhos suportados: \"x-small\", \"small\", \"medium\", \"large\" e \"x-large\"."
       },
       "attribute": "header-size",
       "reflect": true,
@@ -114,6 +127,24 @@ export class EzCollapsibleBox {
       "attribute": "icon-placement",
       "reflect": true,
       "defaultValue": "\"left\""
+    },
+    "stretchTitle": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o titulo ir\u00E1 ocupar toda a largura do componente."
+      },
+      "attribute": "stretch-title",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -145,13 +176,13 @@ export class EzCollapsibleBox {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Esconde ou revela o conte\u00FAdo do componente",
+        "text": "Esconde ou revela o conte\u00FAdo do componente.",
         "tags": []
       }
     }
   }; }
   static get watchers() { return [{
       "propName": "value",
-      "methodName": "observeValue"
+      "methodName": "observeCollapsedValue"
     }]; }
 }

package/dist/collection/components/ez-combo-box/ez-combo-box.css

@@ -89,6 +89,12 @@
   width: var(--ez-combo-box--width);
 }
 
+.suppressed-search-input{
+  --ez-text-input__input--border-color: var(--color--strokes, #dce0e8);
+  --ez-text-input__input--disabled--background-color: var(--background--xlight, #fff);
+  --ez-text-input__input--disabled--color: var(--title--primary, #000);
+}
+
 .list-container {
   position: relative;
   width: 100%;

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -15,6 +15,10 @@ export class EzComboBox {
      * Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
      */
     this.showOptionValue = false;
+    /**
+    * Desabilita a digitação dentro do componente.
+    */
+    this.suppressSearch = false;
     /**
      * Remove a opção vazia da lista de opções
      */
@@ -266,7 +270,7 @@ export class EzComboBox {
   }
   render() {
     return (h(Host, null,
-      h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, this.searchMode ?
+      h("ez-text-input", { class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._inputElement = elem, enabled: this.enabled && !this.suppressSearch, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, this.searchMode ?
         h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
         :
           h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })),
@@ -430,6 +434,24 @@ export class EzComboBox {
       "reflect": false,
       "defaultValue": "false"
     },
+    "suppressSearch": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Desabilita a digita\u00E7\u00E3o dentro do componente."
+      },
+      "attribute": "suppress-search",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "optionLoader": {
       "type": "unknown",
       "mutable": false,

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

@@ -2,4 +2,9 @@ ez-form {
   display: flex;
   flex-direction: column;
   width: 100%;
+}
+
+.dynamic-content ez-collapsible-box {
+  --ez-collapsible-box__header--padding-right: var(--space-small, 6px);
+  --ez-collapsible-box__header--padding-left: var(--space-small, 6px);
 }

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

@@ -3,7 +3,7 @@ import { buildField } from "../fieldbuilder/FieldBuilder";
 export const FormItem = ({ source }) => {
   if ("items" in source) {
     const fieldSet = source;
-    return h("ez-collapsible-box", { label: source.label }, fieldSet.items.map(fi => buildField(fi)));
+    return h("ez-collapsible-box", { label: source.label, "header-size": "large" }, fieldSet.items.map(fi => buildField(fi)));
   }
   else {
     return buildField(source);

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { FormItem } from "./FormItem";
 export const FormSheet = ({ store, source }) => {
-  return (h("div", { class: "box__container" },
+  return (h("div", { class: "dynamic-content box__container" },
     h("div", { class: "row padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
 };

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

@@ -46,6 +46,9 @@ function getTabConfig(tab, sheets) {
   const tabConfig = (typeof tab === "string" ? Array.from(sheets.keys()).find(t => t.label === tab) : tab);
   return tabConfig || { label: tab, visible: true };
 }
+function sortTabs(a, b) {
+  return a[0].label == 'Geral' ? -1 : (a[0].order || 10000) - (b[0].order || 10000);
+}
 export const buildFromConfig = (fields, dataUnit) => {
   const sheets = new Map();
   const requiredFields = [];
@@ -87,7 +90,7 @@ export const buildFromConfig = (fields, dataUnit) => {
   });
   const metadata = new FormMetadata();
   Array.from(sheets.entries())
-    .sort((a, b) => (a[0].order || 10000) - (b[0].order || 10000))
+    .sort(sortTabs)
     .forEach(([key, value]) => {
     metadata.addSheet({
       label: key.label,

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

@@ -44,6 +44,7 @@ export default class AgGridController {
         serverSideStoreType: "partial",
         rowSelection: this._multipleSelection ? "multiple" : "single",
         serverSideDatasource: this._dataSource,
+        sortingOrder: ['desc', 'asc', null],
         getRowNodeId: (params) => typeof params === "string" ? params : params[this._idAttribName],
         getMainMenuItems: (params) => {
           const column = params.column;
@@ -83,6 +84,7 @@ export default class AgGridController {
     opt.onSelectionChanged = e => this.onSelectionChange(e);
     opt.onPaginationChanged = () => this.onPaginationChange();
     opt.onRowDoubleClicked = evt => this.onRowDoubleClick(evt);
+    opt.onDragStopped = evt => this.onCallStateChange("columnMovedEnd", evt);
     opt.onViewportChanged = () => {
       if (this._dataUnit) {
         this.selectRows(this._dataUnit.getSelection());
@@ -170,6 +172,7 @@ export default class AgGridController {
     const colDefs = [];
     if (showCheckSelection) {
       colDefs.push({
+        colId: "checkBoxColumn",
         headerName: "",
         checkboxSelection: true,
         headerCheckboxSelection: false,
@@ -207,13 +210,24 @@ export default class AgGridController {
     if (this._grid === undefined) {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
-    //TODO neste ponto estamos utilizando um método descontinuado, 
-    //pelo fato de que o applyColumnState não reordena as colunas conforme 
-    //o estado passado.
-    //https://stackoverflow.com/questions/51488241/ag-grid-how-to-save-and-reload-column-order
-    //Assim que for corrigido o applyColumnState devemos substituir o setColumnState por ele.
-    // this._gridOptions.columnApi.applyColumnState({ state: state.map(s => this.buildColState(s)) });
-    this._gridOptions.columnApi.setColumnState(state.map(s => this.buildColState(s)));
+    let columns = this.getColumnsDef();
+    let visibleColumns = [];
+    let sort = [];
+    state.forEach((cfgColumn, index) => {
+      this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + 1);
+      this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, cfgColumn.width);
+      visibleColumns.push(cfgColumn.name);
+      if (cfgColumn.ascending !== undefined) {
+        sort.push({ colId: cfgColumn.name, sort: cfgColumn.ascending !== true ? 'desc' : 'asc', sortIndex: cfgColumn.orderIndex });
+      }
+    });
+    let invisibleColumns = columns.filter(column => !visibleColumns.includes(column.name)).map(column => column.name);
+    this._gridOptions.columnApi.setColumnsVisible(visibleColumns, true);
+    this._gridOptions.columnApi.setColumnsVisible(invisibleColumns, false);
+    this._gridOptions.columnApi.applyColumnState({
+      state: sort,
+      defaultState: { sort: null },
+    });
   }
   getColumnsState() {
     if (this._grid === undefined) {
@@ -306,21 +320,27 @@ export default class AgGridController {
       }
     }
   }
-  buildColState(source) {
-    return {
-      colId: source.name,
-      sort: source.sort,
-      sortIndex: source.sortIndex,
-      width: source.width,
-      pinned: source.pinned ? "left" : null,
-      hide: source.hidden
-    };
-  }
   onCallStateChange(type, e) {
     const finished = !("finished" in e) || e["finished"];
     if (finished && this._columnStateChangeCallback) {
-      this._columnStateChangeCallback(type, this.getColumnsState());
+      let info = {};
+      let isUserChange = this.isUIEvent(e['source'], e['type']);
+      if (type === 'columnResize') {
+        info['column'] = { colId: e['column'].colId, actualWidth: e['column'].actualWidth };
+      }
+      info['isUserChange'] = isUserChange;
+      this._columnStateChangeCallback(type, this.getColumnsState(), info);
+    }
+  }
+  isUIEvent(source, type) {
+    let optionsArr = ["uiColumnMoved", "uiColumnResized", "uiColumnDragged", "uiColumnExpanded", "uiColumnSorted"];
+    if (type === 'dragStopped') {
+      return true;
+    }
+    if (source) {
+      return optionsArr.includes(source);
     }
+    return false;
   }
   onSelectionChange(e) {
     if (this._selectionChangeCallback) {

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

@@ -1,4 +1,4 @@
-import { Component, h, Host, Prop, Method, Event, State } from "@stencil/core";
+import { Component, h, Host, Prop, Method, Event, State, Watch } from "@stencil/core";
 import AgGridController from "./controller/ag-grid/AgGridController";
 import DataUnitBridge from "./controller/DataUnitBridge";
 export class EzGrid {
@@ -72,9 +72,72 @@ export class EzGrid {
       addEventListener("ezSelectionChange", (evt) => this.dataUnit.setSelection(evt.detail.map((r) => r.__record__id__)));
     }
   }
+  onColumnStateChange(type, state, info) {
+    var _a;
+    this.ezColumnStateChange.emit({ type, state, isUserChange: info.isUserChange });
+    if (info.isUserChange) {
+      if (type === 'columnMovedEnd') {
+        let newConfig;
+        if (this.config) {
+          newConfig = { columns: [] };
+          state.forEach(columnState => {
+            let newConfigColumn = this.config.columns.find(column => column.name === columnState.name);
+            if (newConfigColumn) {
+              newConfigColumn.width = columnState.width;
+              newConfig.columns.push(newConfigColumn);
+            }
+          });
+        }
+        else {
+          newConfig = this.createConfigFromState(state);
+        }
+        if (newConfig.columns.length > 0) {
+          this.configChange.emit(newConfig);
+        }
+      }
+      else if (type === 'columnResize') {
+        if ((_a = info.column) === null || _a === void 0 ? void 0 : _a.colId) {
+          let newConfig;
+          if (this.config) {
+            newConfig = Object.assign({}, this.config);
+          }
+          else {
+            newConfig = this.createConfigFromState(state);
+          }
+          let newColumn = newConfig.columns.find(column => column.name === info.column.colId);
+          if (newColumn) {
+            newColumn.width = info.column.actualWidth;
+            this.configChange.emit(newConfig);
+          }
+        }
+      }
+    }
+  }
+  createConfigFromState(state) {
+    let newConfig = { columns: [] };
+    state.forEach(columnState => {
+      if (!columnState.hidden) {
+        let newConfigColumn = { name: columnState.name };
+        if (columnState.width) {
+          newConfigColumn['width'] = columnState.width;
+        }
+        if (columnState.sort) {
+          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === 'ASC');
+          newConfigColumn['orderIndex'] = columnState.sortIndex;
+        }
+        else {
+          newConfigColumn['orderIndex'] = 0;
+        }
+        if (newConfigColumn) {
+          newConfig.columns.push(newConfigColumn);
+        }
+      }
+    });
+    return newConfig;
+  }
   componentDidLoad() {
     this._gridController.initDatagrid(this._container, {
-      onColumnStateChange: (type, state) => this.ezColumnStateChange.emit({ type, state }),
+      onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
       onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
       onPaginationChange: (status) => {
         this._navigationHasPrevious = status.hasPrevious;
@@ -94,6 +157,9 @@ export class EzGrid {
     if (this._dataUnitBridge) {
       this._gridController.setColumnsDef(this._dataUnitBridge.buildColumnDefs(), true);
     }
+    if (this.config) {
+      this.applyConfig(this.config);
+    }
   }
   disconnectedCallback() {
     if (this._dataUnitBridge) {
@@ -112,8 +178,8 @@ export class EzGrid {
       h("ez-button", { size: "small", iconName: "chevron-right", class: "margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
     ];
   }
-  applyConfig(cols) {
-    this._gridController.setColumnsState(cols);
+  applyConfig(config) {
+    this._gridController.setColumnsState(config.columns);
     this.closeConfig();
   }
   closeConfig() {
@@ -135,7 +201,7 @@ export class EzGrid {
       h("div", { class: "grid__container ag-sankhya-theme", 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, selectedTab: "Colunas", onConfigFinish: evt => this.applyConfig(evt.detail), onConfigCancel: _evt => this.closeConfig() }))));
+        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() }))));
   }
   static get is() { return "ez-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -164,6 +230,26 @@ export class EzGrid {
       "attribute": "multiple-selection",
       "reflect": false
     },
+    "config": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "EzGridConfig",
+        "resolved": "EzGridConfig",
+        "references": {
+          "EzGridConfig": {
+            "location": "import",
+            "path": "./controller/EzGridController"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Configura\u00E7\u00E3o de exibi\u00E7\u00E3o da grade."
+      }
+    },
     "pageSize": {
       "type": "number",
       "mutable": false,
@@ -282,6 +368,26 @@ export class EzGrid {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "configChange",
+      "name": "configChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado ao realizar alguma modifica\u00E7\u00E3o na configura\u00E7\u00E3o da grid."
+      },
+      "complexType": {
+        "original": "EzGridConfig",
+        "resolved": "EzGridConfig",
+        "references": {
+          "EzGridConfig": {
+            "location": "import",
+            "path": "./controller/EzGridController"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "setColumnsDef": {
@@ -340,7 +446,7 @@ export class EzGrid {
     },
     "setColumnsState": {
       "complexType": {
-        "signature": "(state: Array<EzGridColumn>) => Promise<any>",
+        "signature": "(state: Array<EzGridColumnConfig>) => Promise<any>",
         "parameters": [{
             "tags": [],
             "text": ""
@@ -352,7 +458,7 @@ export class EzGrid {
           "Array": {
             "location": "global"
           },
-          "EzGridColumn": {
+          "EzGridColumnConfig": {
             "location": "import",
             "path": "./controller/EzGridController"
           }
@@ -487,4 +593,8 @@ export class EzGrid {
       }
     }
   }; }
+  static get watchers() { return [{
+      "propName": "config",
+      "methodName": "applyConfig"
+    }]; }
 }