@sankhyalabs/ezui 5.20.4 → 5.21.0-dev.10

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

@@ -1,6 +1,6 @@
 import { Host, h } from '@stencil/core';
 import { fieldBuilder } from './fieldbuilder/FieldBuilder';
-import { ElementIDUtils } from '@sankhyalabs/core';
+import { ElementIDUtils, UserInterface } from '@sankhyalabs/core';
 import { FormItems } from './structure';
 export class EzFormView {
   constructor() {
@@ -9,6 +9,19 @@ export class EzFormView {
   async showUp() {
     this._element.scrollIntoView({ behavior: "smooth", block: "start" });
   }
+  /**
+   * Altera/adiciona uma propriedade nos metados do campo.
+   */
+  async setFieldProp(fieldName, propName, value) {
+    const fields = this.fields.map(field => {
+      if (field.name === fieldName) {
+        field.props = field.props || {};
+        field.props[propName] = value;
+      }
+      return field;
+    });
+    this.fields = [...fields];
+  }
   groupFields(fields) {
     const result = new Map();
     fields.forEach(item => {
@@ -32,19 +45,36 @@ export class EzFormView {
     const formItems = new FormItems(Array.from(this._element.querySelectorAll("[data-form-item]")));
     this.formItemsReady.emit(formItems);
   }
+  isItemFullWidth(userInterface) {
+    return [
+      UserInterface.FILE,
+      UserInterface.LONGTEXT
+    ].includes(userInterface);
+  }
+  buildFormItemElement(item, classItem = "") {
+    if (this.isItemFullWidth(item.userInterface)) {
+      classItem += " input-full_width";
+    }
+    return h("div", { class: classItem }, fieldBuilder(item));
+  }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
     if (this.fields == undefined) {
       return;
     }
-    return (h(Host, null, Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
+    let nonArrayGrup = [];
+    let formContent = Array.from(this.groupFields(this.fields).entries()).map(([label, value]) => {
       if (Array.isArray(value)) {
-        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, value.map(fi => fieldBuilder(fi))));
+        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, h("div", { class: "form-view__content" }, value.map(fi => (this.buildFormItemElement(fi))))));
       }
       else {
-        return fieldBuilder(value);
+        nonArrayGrup.push(value);
       }
-    })));
+    });
+    // Filtra os elementos que não são arrays e os coloca dentro de uma única div
+    let nonArrayElements = nonArrayGrup.map((value) => this.buildFormItemElement(value));
+    let groupedNonArrayElements = h("div", { class: "form-view__content" }, nonArrayElements);
+    return (h(Host, null, groupedNonArrayElements, formContent));
   }
   static get is() { return "ez-form-view"; }
   static get encapsulation() { return "scoped"; }
@@ -147,6 +177,31 @@ export class EzFormView {
           "text": "",
           "tags": []
         }
+      },
+      "setFieldProp": {
+        "complexType": {
+          "signature": "(fieldName: string, propName: string, value: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Altera/adiciona uma propriedade nos metados do campo.",
+          "tags": []
+        }
       }
     };
   }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/CheckBox.tpl.js

@@ -7,5 +7,5 @@ export const buildCheckBox = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
 function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" }, h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" }, h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/ComboBox.tpl.js

@@ -9,5 +9,5 @@ export const buildComboBox = ({ name, label, readOnly, required, props, contextN
   else {
     options = prop;
   }
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/DateInput.tpl.js

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 export const buildDate = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 export const buildTime = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
 export const buildDateTime = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/FileInput.tpl.js

@@ -3,9 +3,11 @@ import { ObjectUtils } from "@sankhyalabs/core";
 export const buildFile = ({ name, label, readOnly, contextName, props }) => {
   const uploadProps = ObjectUtils.removeEmptyValues({
     subTitle: props.subTitle,
-    requestHeaders: props.STORAGESTRATEGY ? {
+    requestHeaders: Object.assign(Object.assign({}, (props.STORAGESTRATEGY && {
       STORAGESTRATEGY: props.STORAGESTRATEGY
-    } : null
+    })), (props.INTERNAL_FILENAME && {
+      INTERNAL_FILENAME: props.INTERNAL_FILENAME
+    })),
   });
   return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/NumberInput.tpl.js

@@ -8,5 +8,5 @@ export const buildInteger = ({ name, label, readOnly, contextName, canShowError
   return buildNumeric(name, label, readOnly, 0, 0, contextName, canShowError);
 };
 function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
 }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/SearchInput.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
 export const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/TextInput.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
 export const buildTextInput = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" }, h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError })));
 };

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

@@ -1,13 +1,12 @@
-import { ApplicationContext, DataType, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface } from '@sankhyalabs/core';
-import { Grid, } from 'ag-grid-community';
+import { ApplicationContext, DataType, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface, } from '@sankhyalabs/core';
+import { Grid } from 'ag-grid-community';
 import { Grid as EnterpriseGrid, LicenseManager } from 'ag-grid-enterprise';
 import DataSource from './DataSource';
 import { EzGridCustomHeader } from './components/EzGridCustomHeader';
 import { CellRendererStatus } from './components/cellRendererStatus';
 import SelectionHeader from './components/selectionHeader';
 import gridTerms from './i18n/pt-BR.js';
-import { EZ_GRID_LOADING_SOURCE, DISTINCT_FILTER_NAME_PREFIX } from '../../../../utils/constants';
-import { calcFilterColumnLeftPosition } from './AgGridUtils';
+import { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE } from '../../../../utils/constants';
 import GridEditionManager from './GridEditionManager';
 export default class AgGridController {
   configFilterColumn(filterColumn) {
@@ -42,7 +41,8 @@ export default class AgGridController {
     this._idAttribName = '__record__id__';
     this._gridConfig = [];
     this._filteredColumns = new Map();
-    this._filterColumnleftPosition = '0px';
+    this._filterColumnleftPosition = 0;
+    this._customFormatters = new Map();
     this._enterprise = enterprise;
   }
   getGridConfig() {
@@ -188,6 +188,7 @@ export default class AgGridController {
         this.selectRows((selection === null || selection === void 0 ? void 0 : selection.recordIds) || [], true);
       }
       this._gridOptions.api.setHeaderHeight(this.getHeaderRowHeight());
+      this._customFormatters = options.customFormatters;
     }
   }
   processFormatterCellCallback(params) {
@@ -207,11 +208,9 @@ export default class AgGridController {
     }
     return params.value;
   }
-  setFilterColumnLeftPosition(params) {
-    if (params.type === 'columnMenu') {
-      const ePopup = params.ePopup;
-      const leftString = ePopup.style.left.replace('px', '');
-      this._filterColumnleftPosition = `${calcFilterColumnLeftPosition(parseInt(leftString))}px`;
+  setFilterColumnLeftPosition({ type, ePopup }) {
+    if (type === 'columnMenu') {
+      this._filterColumnleftPosition = ePopup.getBoundingClientRect().left;
       return;
     }
   }
@@ -557,7 +556,7 @@ export default class AgGridController {
     //Como vamos reordenar, precisamos considerar o deslocamento provocado por elas.
     const columnsOffset = colDef.length - columns.length;
     let sort = [];
-    state.forEach((cfgColumn, index) => {
+    state === null || state === void 0 ? void 0 : state.forEach((cfgColumn, index) => {
       const colWidth = this.getColumnWidth(cfgColumn);
       this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + columnsOffset);
       this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, colWidth);
@@ -651,15 +650,22 @@ export default class AgGridController {
         tooltip: tooltip,
         isSortable: propSortable,
         hasFilter: () => this.hasFilterColumn(source.name),
-        showColumnFilter: (leftPosition, fromIcon) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name), fromIcon }),
+        showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name), fromIcon: true }),
       },
       valueFormatter: params => {
-        if (params.value == undefined) {
+        if (params.value === undefined) {
           return "";
         }
         if (params.value instanceof Promise) {
           return "Carregando...";
         }
+        const customFormatter = this._customFormatters.get(source.name);
+        if (customFormatter) {
+          const formattedValue = customFormatter.format(params.value, source, params.data.__record__id__);
+          if (formattedValue) {
+            return formattedValue;
+          }
+        }
         if (this._dataUnit) {
           return this._dataUnit.getFormattedValue(source.name, params.value);
         }
@@ -668,6 +674,13 @@ export default class AgGridController {
       cellStyle: this.getStyleByColumn(source),
     });
   }
+  setCustomFormatters(customFormatters) {
+    this._customFormatters = customFormatters;
+  }
+  refreshSelectedRows() {
+    const selectedNodes = this._gridOptions.api.getSelectedNodes();
+    this._gridOptions.api.redrawRows({ rowNodes: selectedNodes });
+  }
   getInitCellStyle() {
     return {
       'line-height': this.getRowHeight() - 1 + 'px',

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

@@ -1,5 +1,6 @@
 import { Action, ObjectUtils } from '@sankhyalabs/core';
 import { EZ_GRID_LOADING_SOURCE } from "../../../../utils/constants";
+import { DataSourceInterceptor } from "./DataSourceInterceptor";
 export default class DataSource {
   updateLoadedRecords(action) {
     const records = action.payload;
@@ -31,16 +32,13 @@ export default class DataSource {
           break;
         case Action.LOADING_DATA:
           this._waitingForLoad = true;
-          if (EZ_GRID_LOADING_SOURCE !== action.payload.source) {
-            this._controller.clearFilter();
-          }
           this._controller.refresh();
           break;
         case Action.DATA_LOADED:
           this._waitingForLoad = false;
           this.callbackGetRows(this._lastLoadingParams);
           if (this._options) {
-            this._options.onPaginationChange(this._dataUnit.getPaginationInfo());
+            this._options.onPaginationChange(this._dataUnit.getPaginationInfo(), action.payload.selectFirstRecord);
           }
           this.updateSelection();
           break;
@@ -74,6 +72,7 @@ export default class DataSource {
     this._controller.setColumnsDef(this.buildColumnDefs());
     this._options = options;
     this._dataUnit.subscribe(this.duObserver);
+    this._dataUnit.addInterceptor(new DataSourceInterceptor(this._controller));
   }
   updateSelection() {
     const selectionInfo = this._dataUnit.getSelectionInfo();

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

@@ -0,0 +1,21 @@
+import { Action } from "@sankhyalabs/core";
+import { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE } from "../../../../utils/constants";
+export class DataSourceInterceptor {
+  constructor(controller) {
+    this._controller = controller;
+  }
+  clearColumnFilter(filters) {
+    var _a;
+    return (_a = filters.filter(filter => !filter.name.startsWith(DISTINCT_FILTER_NAME_PREFIX))) !== null && _a !== void 0 ? _a : [];
+  }
+  interceptAction(action) {
+    var _a;
+    if (action.type === Action.LOADING_DATA) {
+      if (EZ_GRID_LOADING_SOURCE !== action.payload.source) {
+        action.payload.filters = ((_a = action.payload) === null || _a === void 0 ? void 0 : _a.filters) !== undefined ? this.clearColumnFilter(action.payload.filters) : action.payload.filters;
+        this._controller.clearFilter();
+      }
+    }
+    return action;
+  }
+}

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

@@ -1,4 +1,3 @@
-import { calcFilterColumnLeftPosition } from '../AgGridUtils';
 export class EzGridCustomHeader {
   init(agParams) {
     var _a;
@@ -35,8 +34,7 @@ export class EzGridCustomHeader {
   }
   onClickFilter() {
     var _a;
-    const iconLeft = (_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
-    this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`, true);
+    this.params.showColumnFilter((_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left);
   }
   configSortIcon() {
     this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';

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

@@ -4,7 +4,7 @@
   grid-template-rows: auto 1fr auto;
   height: 100%;
   width: 100%;
-  
+
   /*public*/
   /*@doc Define a cor de fundo do header do componente.*/
   --ez-grid__header--background-color: var(--background--xlight, #FFF);
@@ -12,6 +12,10 @@
   --ez-grid__selection-counter--z-index: var(--visible, 1);
   /*@doc Define o sombreamento usado como borda.*/
   --ez-grid__container--shadow: 0 0 16px 0 rgb(0 38 111 / 12%);
+  /*@doc Define altura mínima da grid */
+  --ez-grid--min-height: 300px;
+
+  min-height: var(--ez-grid--min-height);
 }
 
 .grid-header {
@@ -92,3 +96,23 @@
   height: 0;
   padding: 0;
 }
+
+.grid-header__pagination{
+  width: 30%;
+  min-width: 100px;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.grid-header__left-container{
+  width: 70%
+}
+
+.grid-header__pagination-label {
+  width: 100%;
+  white-space: nowrap
+}
+
+.overflowed {
+  display: none;
+}