@sankhyalabs/ezui 5.21.0-dev.3 → 5.21.0-dev.30

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

@@ -0,0 +1,253 @@
+import { h, Host } from '@stencil/core';
+import { CustomEditorSource } from '../../../utils/customEditor/interfaces/ICustomEditor';
+import { HTMLBuilder, StringUtils } from '@sankhyalabs/core';
+export class EzCustomFormInput {
+  constructor() {
+    this.gui = undefined;
+    this.customEditor = undefined;
+    this.formViewField = undefined;
+    this.value = undefined;
+    this.detailContext = undefined;
+    this.builderFallback = undefined;
+  }
+  /**
+   * Aplica foco no campo.
+   */
+  async setFocus() {
+    var _a, _b;
+    (_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["setFocus"]) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  /**
+   * Remove o foco do campo.
+   */
+  async setBlur() {
+    var _a, _b;
+    (_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["setBlur"]) === null || _b === void 0 ? void 0 : _b.call(_a);
+  }
+  /**
+   * Retorna se o conteúdo é inválido.
+   */
+  async isInvalid() {
+    var _a, _b;
+    return ((_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["isInvalid"]) === null || _b === void 0 ? void 0 : _b.call(_a)) || false;
+  }
+  getContent() {
+    var _a, _b;
+    const fieldProps = new Map();
+    for (const prop in this.formViewField.props) {
+      fieldProps.set(prop, this.formViewField.props[prop]);
+    }
+    const params = {
+      value: this.value,
+      name: this.formViewField.name,
+      currentEditor: this.builderFallback(this.formViewField),
+      setValue: (value) => this.setValue(value),
+      getValue: this.getValue,
+      editorMetadata: {
+        label: this.formViewField.label,
+        hidden: ((_a = this.formViewField.props) === null || _a === void 0 ? void 0 : _a.visible) === false,
+        userInterface: this.formViewField.userInterface,
+        options: (_b = this.formViewField.props) === null || _b === void 0 ? void 0 : _b.options,
+        props: this.formViewField.props ? fieldProps : undefined,
+        optionLoader: this.formViewField.optionLoader
+      },
+      source: CustomEditorSource.FORM,
+      detailContext: this.detailContext
+    };
+    let gui = this.customEditor.getEditorElement(params);
+    if (!gui) {
+      gui = this.builderFallback(this.formViewField);
+      this.handleValue(gui);
+      this.gui = gui;
+      return;
+    }
+    if (!(gui instanceof HTMLElement) && typeof gui !== 'string') {
+      this.handleValue(gui);
+      this.gui = gui;
+      return;
+    }
+    if (typeof gui === 'string') {
+      gui = HTMLBuilder.parseElement(gui);
+    }
+    gui.setAttribute('value', this.value);
+    this.gui = h("div", { key: StringUtils.generateUUID(), ref: el => el && el.appendChild(gui) });
+  }
+  setValue(value) {
+    this.value = value;
+  }
+  getValue() {
+    return this.value;
+  }
+  handleValue(gui) {
+    //@ts-ignore
+    gui.$children$.forEach((child) => {
+      child.$attrs$.value = this.value;
+    });
+  }
+  componentWillRender() {
+    this.getContent();
+  }
+  render() {
+    return (h(Host, null, this.gui));
+  }
+  static get is() { return "ez-custom-form-input"; }
+  static get encapsulation() { return "scoped"; }
+  static get properties() {
+    return {
+      "customEditor": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ICustomEditor",
+          "resolved": "ICustomEditor",
+          "references": {
+            "ICustomEditor": {
+              "location": "import",
+              "path": "../../../utils/customEditor/interfaces/ICustomEditor"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Inst\u00E2ncia do editor customizado."
+        }
+      },
+      "formViewField": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IFormViewField",
+          "resolved": "IFormViewField",
+          "references": {
+            "IFormViewField": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Campo que o elemento customizado representa."
+        }
+      },
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Valores dos campos do formul\u00E1rio."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "detailContext": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define de qual contexto o editor est\u00E1 sendo acionado."
+        },
+        "attribute": "detail-context",
+        "reflect": false
+      },
+      "builderFallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(field: IFormViewField) => HTMLElement",
+          "resolved": "(field: IFormViewField) => HTMLElement",
+          "references": {
+            "IFormViewField": {
+              "location": "import",
+              "path": "../interfaces"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Builder original do FormView que ser\u00E1 chamado caso o custom n\u00E3o retorne nenhum valor."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "gui": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica foco no campo.",
+          "tags": []
+        }
+      },
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o foco do campo.",
+          "tags": []
+        }
+      },
+      "isInvalid": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Retorna se o conte\u00FAdo \u00E9 inv\u00E1lido.",
+          "tags": []
+        }
+      }
+    };
+  }
+}

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

@@ -4,11 +4,33 @@ 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.
+   */
+  async setFieldProp(fieldName, propName, value) {
+    const fields = this.fields.map(field => {
+      if (field.name === fieldName && (value || value === 0)) {
+        field.props = field.props || {};
+        field.props[propName] = value;
+      }
+      return field;
+    });
+    this.fields = [...fields];
+  }
   groupFields(fields) {
     const result = new Map();
     fields.forEach(item => {
@@ -28,7 +50,8 @@ export class EzFormView {
     return result;
   }
   componentDidRender() {
-    this.ezContentReady.emit(Array.from(this._element.querySelectorAll("[data-field-name]")));
+    this._formElements = Array.from(this._element.querySelectorAll("[data-field-name]"));
+    this.ezContentReady.emit(this._formElements);
     const formItems = new FormItems(Array.from(this._element.querySelectorAll("[data-form-item]")));
     this.formItemsReady.emit(formItems);
   }
@@ -39,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() {
@@ -102,6 +131,11 @@ export class EzFormView {
       }
     };
   }
+  static get states() {
+    return {
+      "_customEditors": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezContentReady",
@@ -164,6 +198,60 @@ export class EzFormView {
           "text": "",
           "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>",
+          "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/NumberInput.tpl.js

@@ -1,7 +1,8 @@
 import { h } from "@stencil/core";
 export const buildDecimal = ({ name, label, readOnly, props, contextName, canShowError }) => {
-  const precision = Number((props === null || props === void 0 ? void 0 : props.precision) || 2);
-  const prettyPrecision = Number((props === null || props === void 0 ? void 0 : props.prettyPrecision) || precision);
+  var _a, _b;
+  const precision = Number((_a = props === null || props === void 0 ? void 0 : props.precision) !== null && _a !== void 0 ? _a : 2);
+  const prettyPrecision = Number((_b = props === null || props === void 0 ? void 0 : props.prettyPrecision) !== null && _b !== void 0 ? _b : precision);
   return buildNumeric(name, label, readOnly, precision, prettyPrecision, contextName, canShowError);
 };
 export const buildInteger = ({ name, label, readOnly, contextName, canShowError }) => {

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

@@ -1,11 +1,11 @@
 import { ApplicationContext, DataType, MaskFormatter, NumberUtils, SortMode, StringUtils, UserInterface, } from '@sankhyalabs/core';
-import { Grid, } from 'ag-grid-community';
+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 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 {
@@ -42,6 +42,7 @@ export default class AgGridController {
     this._gridConfig = [];
     this._filteredColumns = new Map();
     this._filterColumnleftPosition = 0;
+    this._customFormatters = new Map();
     this._enterprise = enterprise;
   }
   getGridConfig() {
@@ -118,6 +119,8 @@ export default class AgGridController {
   }
   initDatagrid(container, options) {
     var _a;
+    this._options = options;
+    this._container = container;
     if (this._grid === undefined) {
       LicenseManager.setLicenseKey(ApplicationContext.getContextValue('__EZUI__GRID_LICENSE__'));
       this._columnStateChangeCallback = options.onColumnStateChange;
@@ -125,7 +128,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;
@@ -187,6 +190,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) {
@@ -470,12 +474,33 @@ export default class AgGridController {
       throw new Error('Erro interno: Grid ainda não inicializado.');
     }
     this._gridOptions.api.refreshServerSide({ purge: true });
+    this._options.onRefresh();
+  }
+  focusOnGridContainer() {
+    this._container.setAttribute('tabindex', '-1');
+    this._container.focus();
+  }
+  setFocus() {
+    var _a, _b;
+    if ((_b = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.records) === null || _b === void 0 ? void 0 : _b.length) {
+      this.setFocusFirstRow();
+    }
+    else {
+      this.focusOnGridContainer();
+    }
+  }
+  setAutoFocus(autoFocus) {
+    var _a;
+    (_a = this._dataSource) === null || _a === void 0 ? void 0 : _a.setAutoFocus(autoFocus);
   }
   setFocusFirstRow() {
     const firstRow = this._gridOptions.api.getDisplayedRowAtIndex(0);
     if (firstRow) {
       this.setFocusOnRow(firstRow.rowIndex);
     }
+    else {
+      this.focusOnGridContainer();
+    }
   }
   setFocusLastRow() {
     const lastRow = this._gridOptions.api.getDisplayedRowAtIndex(this._gridOptions.api.getLastDisplayedRow());
@@ -554,7 +579,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,12 +676,19 @@ export default class AgGridController {
         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 || params.value === null) {
           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);
         }
@@ -665,6 +697,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',
@@ -840,4 +879,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/DataSource.js

@@ -10,6 +10,11 @@ export default class DataSource {
       });
     }
   }
+  handleFocusFirstRow() {
+    if (this._options.autoFocus) {
+      this._controller.setFocusFirstRow();
+    }
+  }
   isSilentChange(action) {
     //TODO: Provisorio p/ não atualizar a grade quando a alteração for apenas de campos transisntes
     var _a, _b;
@@ -41,6 +46,7 @@ export default class DataSource {
             this._options.onPaginationChange(this._dataUnit.getPaginationInfo(), action.payload.selectFirstRecord);
           }
           this.updateSelection();
+          this.handleFocusFirstRow();
           break;
         case Action.PAGINATION_UPDATED:
           if (this._options) {
@@ -83,6 +89,9 @@ export default class DataSource {
       this._controller.selectRows(selectionInfo.recordIds, true);
     }
   }
+  setAutoFocus(autoFocus) {
+    this._options.autoFocus = autoFocus;
+  }
   getRows(params) {
     if (this.needReload(params)) {
       this._lastLoadingParams = params;

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;
+  }
+}