@sankhyalabs/ezui 5.21.0-dev.10 → 5.21.0-dev.12

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

@@ -4,11 +4,20 @@ import { ElementIDUtils, UserInterface } from '@sankhyalabs/core';
 import { FormItems } from './structure';
 export class EzFormView {
   constructor() {
+    this._customEditors = new Map();
     this.fields = undefined;
   }
   async showUp() {
     this._element.scrollIntoView({ behavior: "smooth", block: "start" });
   }
+  /**
+   * Registra um editor customizado para campos da grade e formulário.
+   */
+  async addCustomEditor(fieldName, customEditor, detailContext) {
+    const newCustomEditors = new Map(this._customEditors);
+    newCustomEditors.set(fieldName, { customEditor, detailContext });
+    this._customEditors = newCustomEditors;
+  }
   /**
    * Altera/adiciona uma propriedade nos metados do campo.
    */
@@ -41,8 +50,9 @@ export class EzFormView {
     return result;
   }
   componentDidRender() {
-    this.ezContentReady.emit(Array.from(this._element.querySelectorAll("[data-field-name]")));
-    const formItems = new FormItems(Array.from(this._element.querySelectorAll("[data-form-item]")));
+    this._formElements = Array.from(this._element.querySelectorAll("[data-field-name]"));
+    this.ezContentReady.emit(this._formElements);
+    const formItems = new FormItems(this._formElements);
     this.formItemsReady.emit(formItems);
   }
   isItemFullWidth(userInterface) {
@@ -52,9 +62,15 @@ export class EzFormView {
     ].includes(userInterface);
   }
   buildFormItemElement(item, classItem = "") {
+    var _a;
     if (this.isItemFullWidth(item.userInterface)) {
       classItem += " input-full_width";
     }
+    if (this._customEditors.has(item.name)) {
+      const value = (_a = this._formElements.map(el => ({ name: el.dataset.fieldName, value: el['value'] })).find(field => field.name === item.name)) === null || _a === void 0 ? void 0 : _a.value;
+      const customEditor = this._customEditors.get(item.name).customEditor;
+      return h("div", { class: classItem }, h("ez-custom-form-input", { "data-field-name": item.name, customEditor: customEditor, formViewField: item, builderFallback: fieldBuilder, value: value }));
+    }
     return h("div", { class: classItem }, fieldBuilder(item));
   }
   render() {
@@ -115,6 +131,11 @@ export class EzFormView {
       }
     };
   }
+  static get states() {
+    return {
+      "_customEditors": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezContentReady",
@@ -178,6 +199,35 @@ export class EzFormView {
           "tags": []
         }
       },
+      "addCustomEditor": {
+        "complexType": {
+          "signature": "(fieldName: string, customEditor: ICustomEditor, detailContext?: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ICustomEditor": {
+              "location": "import",
+              "path": "../../utils/customEditor/interfaces/ICustomEditor"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Registra um editor customizado para campos da grade e formul\u00E1rio.",
+          "tags": []
+        }
+      },
       "setFieldProp": {
         "complexType": {
           "signature": "(fieldName: string, propName: string, value: any) => Promise<void>",

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

@@ -5,7 +5,7 @@ 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 gridTerms from './i18n/pt-BR';
 import { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE } from '../../../../utils/constants';
 import GridEditionManager from './GridEditionManager';
 export default class AgGridController {
@@ -126,7 +126,7 @@ export default class AgGridController {
       this._doubleClickCallBack = options.onDoubleClick;
       this._multipleSelection = options.allowMultipleSelection;
       this._dataUnit = options.dataUnit;
-      this._editionManager = new GridEditionManager(this._dataUnit, options.useEnterLikeTab, options.recordsValidator, options.editionIsDisabled);
+      this._editionManager = new GridEditionManager(this._dataUnit, options.useEnterLikeTab, options.recordsValidator, options.editionIsDisabled, options.customEditors || this._customEditors, options.customRenders || this._customRenders);
       this._statusResolver = options.statusResolver;
       if (this._dataUnit) {
         this._dataUnit.sortingProvider = this;
@@ -856,4 +856,22 @@ export default class AgGridController {
     const labelSize = (((_b = field === null || field === void 0 ? void 0 : field.label) === null || _b === void 0 ? void 0 : _b.length) || 0) * this.DEFAULT_FONT_SIZE + this.DEFAULT_ICON_SIZE;
     return labelSize > this.DEFAULT_MAX_SIZE ? this.DEFAULT_MAX_SIZE : labelSize;
   }
+  setCellEditors(customEditors) {
+    var _a;
+    if (!this._editionManager) {
+      this._customEditors = customEditors;
+      return;
+    }
+    this._editionManager.setCellEditors(customEditors);
+    (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.api.redrawRows();
+  }
+  setCellRenders(customRenders) {
+    var _a;
+    if (!this._editionManager) {
+      this._customRenders = customRenders;
+      return;
+    }
+    this._editionManager.setCellRenders(customRenders);
+    (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.api.redrawRows();
+  }
 }

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

@@ -2,8 +2,10 @@ import { UserInterface } from "@sankhyalabs/core";
 import { KeyCode } from "ag-grid-community";
 import { RecordValidationProcessor } from "../../../../utils/validators/recordvalidator/RecordValidationProcessor";
 import EzCellEditor from "./editor/EzCellEditor";
+import EzGridCustomCellEditor from "./components/EzGridCustomCellEditor";
+import EzGridCustomCellRender from "./components/EzGridCustomCellRender";
 export default class GridEditionManager {
-  constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled) {
+  constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled, customEditors, customRenders) {
     this._dataUnit = dataUnit;
     this._recordValidationProcessor = new RecordValidationProcessor(this._dataUnit, {
       getRequiredFields: () => this.getRequiredFields(),
@@ -12,6 +14,8 @@ export default class GridEditionManager {
     }, recordsValidator);
     this._useEnterLikeTab = useEnterLikeTab;
     this._editionIsDisabled = editionIsDisabled;
+    this._customEditors = customEditors;
+    this._customRenders = customRenders;
   }
   configureGrid(options) {
     this._gridOptions = options;
@@ -78,6 +82,30 @@ export default class GridEditionManager {
     col.suppressKeyboardEvent = (params) => {
       return params.event.key === KeyCode.ENTER;
     };
+    col.cellEditorSelector = (params) => {
+      var _a;
+      if ((_a = this._customEditors) === null || _a === void 0 ? void 0 : _a.has(params.colDef.field)) {
+        const customEditor = this._customEditors.get(params.colDef.field);
+        return {
+          component: EzGridCustomCellEditor,
+          params: {
+            customEditorsInfo: customEditor,
+          }
+        };
+      }
+    };
+    col.cellRendererSelector = (params) => {
+      var _a;
+      if ((_a = this._customRenders) === null || _a === void 0 ? void 0 : _a.has(params.colDef.field)) {
+        const customRender = this._customRenders.get(params.colDef.field);
+        return {
+          component: EzGridCustomCellRender,
+          params: {
+            customRendersInfo: customRender,
+          }
+        };
+      }
+    };
     return col;
   }
   getRequiredFields() {
@@ -219,6 +247,12 @@ export default class GridEditionManager {
       this._lastCellEdited = { rowIndex: event.rowIndex, column: event.column, rowPinned: undefined };
     }
   }
+  setCellEditors(customEditors) {
+    this._customEditors = customEditors;
+  }
+  setCellRenders(customRenders) {
+    this._customRenders = customRenders;
+  }
 }
 class TargetEdition {
   constructor(rowIndex, column, backwards) {

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

@@ -0,0 +1,58 @@
+import { HTMLBuilder } from "@sankhyalabs/core";
+import { CustomEditorSource } from "../../../../../utils/customEditor/interfaces/ICustomEditor";
+import EzCellEditor from "../editor/EzCellEditor";
+export default class EzGridCustomCellEditor extends EzCellEditor {
+  init(params) {
+    var _a, _b;
+    this._value = params.value;
+    this._fieldName = params.column.getColId();
+    this._customEditorInstance = params.customEditorsInfo.customEditor;
+    super.init(params);
+    this._defaultGui = this.getDefaultGui();
+    const fieldMetadata = super.getFieldMetadata();
+    this._params = {
+      value: params.value,
+      charPress: params.charPress,
+      currentEditor: this._defaultGui,
+      name: this._fieldName,
+      source: CustomEditorSource.GRID,
+      detailContext: params.customEditorsInfo.detailContext,
+      setValue: (value) => this.setValue(value),
+      getValue: () => this.getValue(),
+      editorMetadata: {
+        hidden: ((_a = fieldMetadata.props) === null || _a === void 0 ? void 0 : _a.visible) === false,
+        label: fieldMetadata.label,
+        userInterface: fieldMetadata.userInterface,
+        props: fieldMetadata.props,
+        optionLoader: fieldMetadata.optionLoader,
+        options: ((_b = fieldMetadata.props) === null || _b === void 0 ? void 0 : _b.options) || {},
+      }
+    };
+  }
+  getDefaultGui() {
+    const gui = super.getGui();
+    gui.value = this._value;
+    gui.onkeyup = (event) => {
+      const value = event.target.value;
+      this.setValue(value);
+    };
+    return gui;
+  }
+  getGui() {
+    const editorElement = this._customEditorInstance.getEditorElement(this._params);
+    if (!editorElement) {
+      return this._defaultGui;
+    }
+    if (typeof editorElement === 'string') {
+      const element = HTMLBuilder.parseElement(editorElement);
+      return element;
+    }
+    return editorElement;
+  }
+  setValue(value) {
+    this._value = value;
+  }
+  getValue() {
+    return this._value;
+  }
+}

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

@@ -0,0 +1,40 @@
+import EzCellRender from "../editor/EzCellRender";
+import { HTMLBuilder } from "@sankhyalabs/core";
+import { CustomRenderSource } from "../../../../../utils/customRender/interfaces/ICustomRender";
+export default class EzGridCustomCellRender extends EzCellRender {
+  init(params) {
+    var _a, _b;
+    this._fieldName = params.column.getColId();
+    this._customRenderInstance = params.customRendersInfo.customRender;
+    super.init(params);
+    const fieldMetadata = super.getFieldMetadata();
+    this._params = {
+      value: params.value,
+      charPress: '',
+      currentRender: super.getGui(),
+      name: this._fieldName,
+      source: CustomRenderSource.GRID,
+      getValue: () => params.getValue(),
+      detailContext: params.customRendersInfo.detailContext,
+      renderMetadata: {
+        hidden: ((_a = fieldMetadata.props) === null || _a === void 0 ? void 0 : _a.visible) === false,
+        label: fieldMetadata.label,
+        userInterface: fieldMetadata.userInterface,
+        props: fieldMetadata.props,
+        optionLoader: fieldMetadata.optionLoader,
+        options: ((_b = fieldMetadata.props) === null || _b === void 0 ? void 0 : _b.options) || {},
+      }
+    };
+  }
+  getGui() {
+    const editorElement = this._customRenderInstance.getRenderElement(this._params);
+    if (!editorElement) {
+      return super.getGui();
+    }
+    if (typeof editorElement === 'string') {
+      const element = HTMLBuilder.parseElement(editorElement);
+      return element;
+    }
+    return editorElement;
+  }
+}

package/dist/collection/components/ez-grid/controller/ag-grid/components/test/constants/EzGridCustomCellEditorConstants.js

@@ -0,0 +1,11 @@
+import { DataType, UserInterface } from "@sankhyalabs/core";
+export const metadata = {
+  name: 'metadatada',
+  label: 'metadatada',
+  fields: [{
+      name: 'FIELDNAME',
+      label: 'Test',
+      dataType: DataType.TEXT,
+      userInterface: UserInterface.SHORTTEXT,
+    }],
+};

package/dist/collection/components/ez-grid/controller/ag-grid/components/test/constants/EzGridCustomCellRenderConstants.js

@@ -0,0 +1,11 @@
+import { DataType, UserInterface } from "@sankhyalabs/core";
+export const metadata = {
+  name: 'metadatada',
+  label: 'metadatada',
+  fields: [{
+      name: 'FIELDNAME',
+      label: 'Test',
+      dataType: DataType.TEXT,
+      userInterface: UserInterface.SHORTTEXT,
+    }],
+};

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

@@ -20,9 +20,9 @@ export default class EzCellEditor {
   init(params) {
     const fieldName = params.column.getColId();
     const dataUnit = params.context.dataUnit;
-    const fieldMetadata = buildEditorMetadata(dataUnit.getField(fieldName), params.eGridCell, dataUnit, params.context.editionManager);
-    const builder = uiBuilders.get(fieldMetadata.userInterface) || buildTextInput;
-    this._gui = builder(fieldMetadata);
+    this._fieldMetadata = buildEditorMetadata(dataUnit.getField(fieldName), params.eGridCell, dataUnit, params.context.editionManager);
+    const builder = uiBuilders.get(this._fieldMetadata.userInterface) || buildTextInput;
+    this._gui = builder(this._fieldMetadata);
     if (this._gui.valueSetter != undefined) {
       this._gui.valueSetter(params.value);
     }
@@ -46,4 +46,7 @@ export default class EzCellEditor {
   isPopup() {
     return this._gui.isPopUp;
   }
+  getFieldMetadata() {
+    return this._fieldMetadata;
+  }
 }

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

@@ -0,0 +1,40 @@
+import { buildEditorMetadata } from "./IEditorMetadata";
+export default class EzCellRender {
+  init(params) {
+    const span = document.createElement('span');
+    this._currentParams = params;
+    span.textContent = params.value;
+    const fieldName = params.column.getColId();
+    const dataUnit = params.context.dataUnit;
+    this._fieldMetadata = buildEditorMetadata(dataUnit.getField(fieldName), params.eGridCell, dataUnit, params.context.editionManager);
+    this._gui = span;
+  }
+  refresh() {
+    try {
+      this._currentParams.refreshCell();
+      return true;
+    }
+    catch (_a) {
+      return false;
+    }
+  }
+  getGui() {
+    return this._gui;
+  }
+  afterGuiAttached() {
+    this.focusIn();
+  }
+  focusIn() {
+    this._gui.focus();
+    this._gui.setFocus({ selectText: true });
+  }
+  getValue() {
+    return this._currentParams.getValue();
+  }
+  isPopup() {
+    return this._gui.isPopUp;
+  }
+  getFieldMetadata() {
+    return this._fieldMetadata;
+  }
+}

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

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

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

@@ -15,6 +15,8 @@ export class EzGrid {
   constructor() {
     this._gridController = new AgGridController(false);
     this._messageFilterAppliedSuccess = 'Filtro de coluna aplicado com sucesso!';
+    this._customEditor = new Map();
+    this._customRenders = new Map();
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
     this._showSelectionCounter = false;
@@ -94,6 +96,27 @@ export class EzGrid {
   async filterColumns(search) {
     return Promise.resolve(this._gridController.getColumnsState().filter(col => matches(col.label, search)));
   }
+  /**
+   * Registra um editor customizado para campos da grade e formulário.
+   */
+  async addCustomEditor(fieldName, customEditor, detailContext) {
+    const newCustomEditor = new Map(this._customEditor);
+    newCustomEditor.set(fieldName, {
+      customEditor,
+      detailContext,
+    });
+    this._customEditor = newCustomEditor;
+    this._gridController.setCellEditors(newCustomEditor);
+  }
+  /**
+   * Registra um render customizado para colunas da grid.
+   */
+  async addGridCustomRender(fieldName, customRender, detailContext) {
+    const newCustomRenders = new Map(this._customRenders);
+    newCustomRenders.set(fieldName, { customRender, detailContext });
+    this._customRenders = newCustomRenders;
+    this._gridController.setCellRenders(newCustomRenders);
+  }
   /**
    * Registra um formatador de valores para uma coluna da grid.
    */
@@ -986,6 +1009,64 @@ export class EzGrid {
           "tags": []
         }
       },
+      "addCustomEditor": {
+        "complexType": {
+          "signature": "(fieldName: string, customEditor: ICustomEditor, detailContext?: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ICustomEditor": {
+              "location": "import",
+              "path": "../../utils/customEditor/interfaces/ICustomEditor"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Registra um editor customizado para campos da grade e formul\u00E1rio.",
+          "tags": []
+        }
+      },
+      "addGridCustomRender": {
+        "complexType": {
+          "signature": "(fieldName: string, customRender: ICustomRender, detailContext?: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ICustomRender": {
+              "location": "import",
+              "path": "../../utils/customRender/interfaces/ICustomRender"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Registra um render customizado para colunas da grid.",
+          "tags": []
+        }
+      },
       "addCustomValueFormatter": {
         "complexType": {
           "signature": "(columnName: string, customFormatter: ICustomFormatter) => Promise<void>",

package/dist/collection/components/ez-grid/subcomponents/utils/selectionCounterUtils.js

@@ -17,8 +17,6 @@ export function getText(selectionCount, allSelectedRecords) {
   if (allSelectedRecords) {
     return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
   }
-  if (selectionCount > 1) {
-    return `Os <strong>${selectionCount} registros</strong> dessa página estão selecionados.`;
-  }
-  return "O único registro dessa página está selecionado";
+  const pluralCharacter = selectionCount > 1 ? "s" : "";
+  return `Há <strong>${selectionCount} registro${pluralCharacter}</strong> selecionado${pluralCharacter} na grade.`;
 }

package/dist/collection/utils/customEditor/interfaces/ICustomEditor.js

@@ -0,0 +1,5 @@
+export var CustomEditorSource;
+(function (CustomEditorSource) {
+  CustomEditorSource["GRID"] = "GRID";
+  CustomEditorSource["FORM"] = "FORM";
+})(CustomEditorSource || (CustomEditorSource = {}));

package/dist/collection/utils/customEditor/interfaces/ICustomEditorInfo.js

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

package/dist/collection/utils/customRender/interfaces/ICustomRender.js

@@ -0,0 +1,5 @@
+export var CustomRenderSource;
+(function (CustomRenderSource) {
+  CustomRenderSource["GRID"] = "GRID";
+  CustomRenderSource["FORM"] = "FORM";
+})(CustomRenderSource || (CustomRenderSource = {}));

package/dist/collection/utils/customRender/interfaces/ICustomRenderInfo.js

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

package/dist/collection/utils/index.js

@@ -4,3 +4,5 @@ export { DialogType } from '../components/ez-dialog/DialogType';
 export { CheckMode } from '../components/ez-check/CheckMode';
 export { FormMetadata } from './form/FormMetadata';
 export { default as DataBinder } from './form/DataBinder';
+export { CustomEditorSource } from './customEditor/interfaces/ICustomEditor';
+export { CustomRenderSource } from './customRender/interfaces/ICustomRender';

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

@@ -80,6 +80,12 @@ export const EzComboBox: {
   new (): EzComboBox;
 };
 
+interface EzCustomFormInput extends Components.EzCustomFormInput, HTMLElement {}
+export const EzCustomFormInput: {
+  prototype: EzCustomFormInput;
+  new (): EzCustomFormInput;
+};
+
 interface EzDateInput extends Components.EzDateInput, HTMLElement {}
 export const EzDateInput: {
   prototype: EzDateInput;