@sankhyalabs/ezui 5.11.0-dev.4 → 5.11.0-dev.6

package/dist/custom-elements/index.js

@@ -2157,6 +2157,7 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     this.mode = "regular";
     this.hideErrorOnFocusOut = true;
     this.listOptionsPosition = undefined;
+    this.isTextSearch = false;
   }
   observeErrorMessage() {
     var _a;
@@ -2479,7 +2480,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
       this._visibleOptions = [];
       this.clearSource();
     }
-    this.setFocus();
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -2664,6 +2664,12 @@ const EzComboBox$1 = class extends HTMLElement$1 {
   handlerIconClick() {
     this.searchMode ? this.loadOptions(SearchMode.ADVANCED) : this.showOptions();
   }
+  buildNumberArgument(argument) {
+    if (this.isTextSearch) {
+      return NaN;
+    }
+    return Number(argument || undefined);
+  }
   onTextInputChangeHandler(event) {
     var _a;
     this.clearDeboucingTimeout();
@@ -2674,7 +2680,7 @@ const EzComboBox$1 = class extends HTMLElement$1 {
       return;
     }
     const argument = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
-    const argumentNumber = Number(argument || undefined);
+    const argumentNumber = this.buildNumberArgument(argument);
     if (!this._criteria) {
       this._textInput.value = event.data || argument;
     }
@@ -4449,6 +4455,7 @@ const EzForm$1 = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.ezReady = createEvent(this, "ezReady", 7);
+    this.formItemsReady = createEvent(this, "formItemsReady", 7);
     this.onDataUnitAction = (action) => {
       if (action.type === Action.METADATA_LOADED) {
         this.processMetadata();
@@ -4635,9 +4642,42 @@ uiBuilders$1.set(UserInterface.LONGTEXT, buildTextArea);
 const fieldBuilder = (field) => {
   const builder = uiBuilders$1.get(field.userInterface) || buildTextInput$1;
   const label = field.required ? `${field.label}${REQUIRED_INFO}` : field.label;
-  return builder(Object.assign(Object.assign({}, field), { label }));
+  const builtElement = builder(Object.assign(Object.assign({}, field), { label }));
+  //@ts-ignore
+  builtElement.$attrs$['data-form-item'] = field.name;
+  return builtElement;
 };
 
+class FormItem {
+  constructor(elem) {
+    this.elem = elem;
+  }
+  addRightElement(el) {
+    el.classList.add('ez-padding-left--small');
+    this.elem.classList.add('ez-col--nowrap');
+    this.elem.appendChild(el);
+  }
+  get fieldName() {
+    return this.elem.getAttribute('data-form-item');
+  }
+}
+class FormItems {
+  constructor(items, formId) {
+    this.items = new Map();
+    this.formId = formId;
+    items.forEach(item => {
+      const formItem = new FormItem(item);
+      this.items.set(formItem.fieldName, formItem);
+    });
+  }
+  getItem(name) {
+    return this.items.get(name);
+  }
+  get formName() {
+    return this.formId;
+  }
+}
+
 const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}";
 
 const EzFormView$1 = class extends HTMLElement$1 {
@@ -4645,6 +4685,7 @@ const EzFormView$1 = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.ezContentReady = createEvent(this, "ezContentReady", 7);
+    this.formItemsReady = createEvent(this, "formItemsReady", 7);
     this.fields = undefined;
   }
   async showUp() {
@@ -4670,6 +4711,8 @@ const EzFormView$1 = class extends HTMLElement$1 {
   }
   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.formItemsReady.emit(formItems);
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
@@ -123656,7 +123699,7 @@ 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`);
+    this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`, true);
   }
   configSortIcon() {
     this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
@@ -124898,7 +124941,7 @@ class AgGridController {
         tooltip: tooltip,
         isSortable: propSortable,
         hasFilter: () => this.hasFilterColumn(source.name),
-        showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name) }),
+        showColumnFilter: (leftPosition, fromIcon) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name), fromIcon }),
       },
       valueFormatter: params => {
         if (params.value == undefined) {
@@ -125121,6 +125164,84 @@ function getElementID(sufix) {
   };
 }
 
+class InMemoryFilterColumnDataSource {
+  constructor(dataUnit) {
+    var _a;
+    this.onDataUnitAction = (action) => {
+      if (action.type === Action.DATA_SAVED || action.type === Action.RECORDS_REMOVED) {
+        this.originalRecords = this.dataUnit.records;
+      }
+    };
+    this.dataUnit = dataUnit;
+    this.originalRecords = (_a = this.dataUnit.records) !== null && _a !== void 0 ? _a : [];
+    this.dataUnit.subscribe(this.onDataUnitAction);
+  }
+  fetchData(filterTerm, fieldName) {
+    return new Promise(resolve => {
+      const filteredRecords = this.originalRecords.filter(record => this.includesSearchTerm(record, fieldName, filterTerm));
+      const options = filteredRecords.map(item => this.buildFieldOption(item, fieldName));
+      resolve(this.removeDuplicatedOptions(options));
+    });
+  }
+  buildFieldOption(item, fieldName) {
+    return {
+      value: this.buildValue(item, fieldName),
+      label: this.formatLabel(fieldName, item[fieldName]),
+      check: true,
+    };
+  }
+  buildValue(item, fieldName) {
+    var _a;
+    let value = item[fieldName];
+    if (((_a = this.dataUnit.getField(fieldName)) === null || _a === void 0 ? void 0 : _a.dataType) === DataType.OBJECT) {
+      value = value.value;
+    }
+    return value === null || value === void 0 ? void 0 : value.toString();
+  }
+  removeDuplicatedOptions(options) {
+    const noDuplicatedOptions = [];
+    options.forEach(option => {
+      if (!noDuplicatedOptions.find(({ label }) => label === option.label)) {
+        noDuplicatedOptions.push(option);
+      }
+    });
+    return noDuplicatedOptions;
+  }
+  includesSearchTerm(record, fieldName, filterTerm) {
+    let label = this.buildLabel(fieldName, record[fieldName]);
+    return label.toLowerCase().includes(filterTerm.toLowerCase());
+  }
+  buildLabel(fieldName, value) {
+    var _a;
+    const { dataType } = this.dataUnit.getField(fieldName);
+    if (dataType === DataType.NUMBER) {
+      return value === null || value === void 0 ? void 0 : value.toString().replace('.', ',');
+    }
+    if (dataType === DataType.DATE) {
+      return (typeof value === 'object')
+        ? (_a = DateUtils$1.formatDate(this.dataUnit.valueFromString(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString()
+        : value === null || value === void 0 ? void 0 : value.toString();
+    }
+    if (dataType === DataType.OBJECT) {
+      return `${value === null || value === void 0 ? void 0 : value.value} - ${value === null || value === void 0 ? void 0 : value.label}`;
+    }
+    return value === null || value === void 0 ? void 0 : value.toString();
+  }
+  formatLabel(fieldName, value) {
+    var _a, _b;
+    const { userInterface, dataType } = this.dataUnit.getField(fieldName);
+    if (dataType === DataType.DATE) {
+      return (typeof value === 'object')
+        ? DateUtils$1.formatDate(this.dataUnit.valueFromString(fieldName, value))
+        : value === null || value === void 0 ? void 0 : value.toString();
+    }
+    if (dataType === DataType.NUMBER && userInterface !== UserInterface.DECIMALNUMBER) {
+      return (_a = parseInt(this.dataUnit.getFormattedValue(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString();
+    }
+    return (_b = this.dataUnit.getFormattedValue(fieldName, value)) === null || _b === void 0 ? void 0 : _b.toString();
+  }
+}
+
 const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF);z-index:var(--more-visible, 2)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s;z-index:var(--ez-grid__selection-counter--z-index)}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}";
 
 const windowInstace$1 = window;
@@ -125135,18 +125256,13 @@ const EzGrid$1 = class extends HTMLElement$1 {
     this.componentReady = createEvent(this, "componentReady", 7);
     this._gridController = new AgGridController(false);
     this._messageFilterAppliedSuccess = 'Filtro de coluna aplicado com sucesso!';
-    this.onDataUnitAction = (action) => {
-      if (action.type === Action.DATA_SAVED || action.type === Action.RECORDS_REMOVED) {
-        this._originalRecords = this.dataUnit.records;
-      }
-    };
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
     this._showSelectionCounter = false;
     this._isAllSelection = false;
     this._currentPageSelected = undefined;
     this._selectionCount = undefined;
-    this._originalRecords = [];
+    this._hasLeftButtons = false;
     this.multipleSelection = undefined;
     this.config = undefined;
     this.selectionToastConfig = undefined;
@@ -125416,44 +125532,20 @@ const EzGrid$1 = class extends HTMLElement$1 {
     });
   }
   componentWillLoad() {
+    this._hasLeftButtons = !!this._element.querySelector('[slot="leftButtons"]');
     if (!this.dataUnit.name.includes("InMemoryDataUnit"))
       return;
-    this.dataUnit.subscribe(this.onDataUnitAction);
   }
   getDataSource() {
-    return this.columnfilterDataSource ? this.columnfilterDataSource : this.buildDefaultDataSource();
-  }
-  buildDefaultDataSource() {
-    var _a, _b;
-    if (this._originalRecords.length === 0) {
-      this._originalRecords = (_b = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.records) !== null && _b !== void 0 ? _b : [];
-    }
-    return {
-      fetchData: (filterTerm, fieldName) => {
-        return new Promise(resolve => {
-          const filteredRecords = this._originalRecords.filter(record => {
-            var _a, _b;
-            const label = typeof record[fieldName] === "object" ? `${(_a = record[fieldName]) === null || _a === void 0 ? void 0 : _a.value} - ${(_b = record[fieldName]) === null || _b === void 0 ? void 0 : _b.label}` : record[fieldName];
-            return label === null || label === void 0 ? void 0 : label.toString().toLowerCase().includes(filterTerm.toLowerCase());
-          });
-          const options = filteredRecords.map(item => {
-            return { value: item[fieldName].toString(), label: this.formatLabel(fieldName, item[fieldName]), check: true };
-          });
-          resolve(options);
-        });
-      }
-    };
+    var _a;
+    return (_a = this.columnfilterDataSource) !== null && _a !== void 0 ? _a : new InMemoryFilterColumnDataSource(this.dataUnit);
   }
-  formatLabel(fieldName, value) {
-    const { userInterface } = this.dataUnit.getField(fieldName);
-    if (userInterface === UserInterface.DATETIME) {
-      return DateUtils$1.formatDate(this.dataUnit.valueFromString(fieldName, value));
-    }
-    return String(this.dataUnit.getFormattedValue(fieldName, value));
+  hideHeader() {
+    return (!!this._element.getAttribute("no-header") && !this._paginationInfo);
   }
   render() {
     var _a;
-    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: !!this._element.getAttribute("no-header"), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter
+    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
         ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }
@@ -126321,6 +126413,7 @@ const EzMuiltiSelectionList = class extends HTMLElement$1 {
     this.dataSource = undefined;
     this.useOptions = false;
     this.options = undefined;
+    this.isTextSearch = false;
     this.filteredOptions = undefined;
     this.displayOptions = undefined;
     this.viewScenario = undefined;
@@ -126403,6 +126496,7 @@ const EzMuiltiSelectionList = class extends HTMLElement$1 {
       this.filteredOptions = this.ordenationByCheckStateAndAlphabetically([...optionsToSort, event.detail]);
     }
     this.viewScenario = ViewScenarios.DATASOURCE_RESULTS;
+    this.searchInput.value = "";
   }
   handleRemoveItemFromOptions(item) {
     this.filteredOptions = this.ordenationByCheckStateAndAlphabetically(this.filteredOptions.filter(i => i.value !== item.value));
@@ -126466,7 +126560,7 @@ const EzMuiltiSelectionList = class extends HTMLElement$1 {
     return scenarios[view];
   }
   render() {
-    return (h(Host, null, h("div", { class: "multi-selection" }, this.useOptions ? (h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: `Buscar..`, onEzChange: this.handleSearchOnOption.bind(this) })) : (h("ez-search", { class: "multi-selection__input", label: `Buscar...`, ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this) })), h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
+    return (h(Host, null, h("div", { class: "multi-selection" }, this.useOptions ? (h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: `Buscar..`, onEzChange: this.handleSearchOnOption.bind(this) })) : (h("ez-search", { class: "multi-selection__input", label: `Buscar...`, ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this), isTextSearch: this.isTextSearch })), h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
   }
   static get watchers() { return {
     "useOptions": ["onChangeUseOptions"],
@@ -127113,6 +127207,7 @@ const EzSearch$1 = class extends HTMLElement$1 {
     this.canShowError = true;
     this.hideErrorOnFocusOut = true;
     this.listOptionsPosition = undefined;
+    this.isTextSearch = false;
   }
   observeErrorMessage() {
     if (this._comboElement) {
@@ -127170,7 +127265,7 @@ const EzSearch$1 = class extends HTMLElement$1 {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, hideErrorOnFocusOut: this.hideErrorOnFocusOut, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode, canShowError: this.canShowError, listOptionsPosition: this.listOptionsPosition }));
+    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, hideErrorOnFocusOut: this.hideErrorOnFocusOut, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode, canShowError: this.canShowError, listOptionsPosition: this.listOptionsPosition, isTextSearch: this.isTextSearch }));
   }
   ;
   get _elem() { return this; }
@@ -129307,19 +129402,23 @@ const FilterColumn$1 = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.applyFilterColumnOptions = createEvent(this, "applyFilterColumnOptions", 7);
-    this.TOP_POSITION = '65px';
+    this.TOP_POSITION = '65';
     this.TOP_POSITION_HEADER_HIDDEN = '18';
+    this.TOP_POSITION_NO_TASKBAR = '32';
+    this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN = '20';
     this.DEFAULT_HEIGHT = 430;
     this.opened = true;
     this.columnName = undefined;
     this.columnLabel = undefined;
     this.gridHeaderHidden = false;
+    this.noHeaderTaskBar = false;
     this.dataSource = undefined;
     this.dataUnit = undefined;
     this.options = undefined;
     this.selectedItems = undefined;
     this.fieldDescriptor = undefined;
     this.useOptions = false;
+    this.isTextSearch = false;
   }
   async hide() {
     await this.ezPopoverElement.hide();
@@ -129333,26 +129432,45 @@ const FilterColumn$1 = class extends HTMLElement$1 {
     if (this.canShow(configs)) {
       await this.hide();
       this.fieldDescriptor = this.dataUnit.getField(configs.columnName);
+      this.buildIsTextSearch();
       this.setOptions(configs.filteredOptions);
       this.columnName = configs.columnName;
       this.columnLabel = configs.columnLabel;
-      await this.ezPopoverElement.show(this.calcTopPosition(), configs.leftPosition);
+      await this.ezPopoverElement.show(this.calcTopPosition(), this.calculateLeftPosition(configs));
+    }
+  }
+  calculateLeftPosition(configs) {
+    if (!configs.fromIcon) {
+      return configs.leftPosition;
     }
+    const difference = this.ezPopoverElement.getBoundingClientRect().left;
+    const leftReference = parseInt(configs.leftPosition.replace('px', ''));
+    const leftResolved = (leftReference + 16) - difference;
+    return `${(leftResolved > 0 ? leftResolved : 0)}px`;
+  }
+  buildIsTextSearch() {
+    var _a, _b;
+    const userInterface = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) !== null && _b !== void 0 ? _b : UserInterface.SHORTTEXT;
+    this.isTextSearch = !(userInterface === UserInterface.DECIMALNUMBER || userInterface === UserInterface.INTEGERNUMBER);
   }
   calcTopPosition() {
-    const referencePosition = this.gridHeaderHidden
-      ? this.TOP_POSITION_HEADER_HIDDEN
-      : this.TOP_POSITION.replace('px', '');
+    const referencePosition = this.buildReferenceTopPosition();
     const totalPopoverHeight = parseInt(referencePosition) + this.DEFAULT_HEIGHT;
     const popoverPosition = Math.round(this.ezPopoverElement.getBoundingClientRect().top);
     const popoverBottomPosition = popoverPosition + totalPopoverHeight;
     const windowHeight = window.innerHeight;
     if (windowHeight > popoverBottomPosition) {
-      return referencePosition;
+      return `${referencePosition}px`;
     }
     const differenceBetween = windowHeight - popoverBottomPosition;
     return `${differenceBetween}px`;
   }
+  buildReferenceTopPosition() {
+    if (this.noHeaderTaskBar) {
+      return this.gridHeaderHidden ? this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN : this.TOP_POSITION_NO_TASKBAR;
+    }
+    return this.gridHeaderHidden ? this.TOP_POSITION_HEADER_HIDDEN : this.TOP_POSITION;
+  }
   async clearConfigs() {
     var _a;
     await ((_a = this.ezMultiSelectionList) === null || _a === void 0 ? void 0 : _a.clearFilteredOptions());
@@ -129410,7 +129528,7 @@ const FilterColumn$1 = class extends HTMLElement$1 {
     }
   }
   render() {
-    return (h("ez-popover", { class: 'filter-column__popover', "overlay-type": 'none', ref: (element) => (this.ezPopoverElement = element), autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: 'filter-column' }, h("header", { class: 'filter-column__header' }, h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, "Filtro da coluna ", this.columnLabel), h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), h("ez-multi-selection-list", { columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail) }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: 'Aplicar', class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
+    return (h("ez-popover", { class: 'filter-column__popover', "overlay-type": 'none', ref: (element) => (this.ezPopoverElement = element), autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: 'filter-column' }, h("header", { class: 'filter-column__header' }, h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, "Filtro da coluna ", this.columnLabel), h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), h("ez-multi-selection-list", { columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail), isTextSearch: this.isTextSearch }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: 'Aplicar', class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
   }
   static get style() { return filterColumnCss; }
 };
@@ -129440,7 +129558,7 @@ const EzCardItem = /*@__PURE__*/proxyCustomElement(EzCardItem$1, [1,"ez-card-ite
 const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[1540],"mode":[513],"compact":[4]}]);
 const EzChip = /*@__PURE__*/proxyCustomElement(EzChip$1, [1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"showNativeTooltip":[4,"show-native-tooltip"]}]);
 const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"boxBordered":[4,"box-bordered"],"label":[513],"subtitle":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32]}]);
-const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32]},[[11,"scroll","scrollListener"]]]);
+const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32]},[[11,"scroll","scrollListener"]]]);
 const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"canShowError":[516,"can-show-error"]}]);
 const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"canShowError":[516,"can-show-error"]}]);
 const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"beforeClose":[1040]}]);
@@ -129449,20 +129567,20 @@ const EzFileItem = /*@__PURE__*/proxyCustomElement(EzFileItem$1, [1,"ez-file-ite
 const EzFilterInput = /*@__PURE__*/proxyCustomElement(EzFilterInput$1, [1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"asyncSearch":[516,"async-search"],"canShowError":[516,"can-show-error"]}]);
 const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16]}]);
 const EzFormView = /*@__PURE__*/proxyCustomElement(EzFormView$1, [2,"ez-form-view",{"fields":[16]}]);
-const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"selectionToastConfig":[16],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"columnfilterDataSource":[16],"useEnterLikeTab":[4,"use-enter-like-tab"],"recordsValidator":[16],"canEdit":[4,"can-edit"],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_isAllSelection":[32],"_currentPageSelected":[32],"_selectionCount":[32],"_originalRecords":[32]},[[0,"ezSelectionChange","onSelectionChange"]]]);
+const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"selectionToastConfig":[16],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"columnfilterDataSource":[16],"useEnterLikeTab":[4,"use-enter-like-tab"],"recordsValidator":[16],"canEdit":[4,"can-edit"],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_isAllSelection":[32],"_currentPageSelected":[32],"_selectionCount":[32],"_hasLeftButtons":[32]},[[0,"ezSelectionChange","onSelectionChange"]]]);
 const EzGuideNavigator = /*@__PURE__*/proxyCustomElement(EzGuideNavigator$1, [1,"ez-guide-navigator",{"open":[1540],"selectedId":[1537,"selected-id"],"items":[16],"tooltipResolver":[16],"filterText":[32]}]);
 const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]);
 const EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [1,"ez-list",{"dataSource":[1040],"listMode":[1,"list-mode"],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"itemLeftSlotBuilder":[1040],"hoverFeedback":[1028,"hover-feedback"],"_listItems":[32],"_listGroupItems":[32]}]);
 const EzLoadingBar = /*@__PURE__*/proxyCustomElement(EzLoadingBar$1, [1,"ez-loading-bar",{"_showLoading":[32]}]);
 const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"heightMode":[1,"height-mode"],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"],"scrim":[1]}]);
 const EzModalContainer = /*@__PURE__*/proxyCustomElement(EzModalContainer$1, [6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]);
-const EzMultiSelectionList = /*@__PURE__*/proxyCustomElement(EzMuiltiSelectionList, [2,"ez-multi-selection-list",{"columnName":[1,"column-name"],"dataSource":[16],"useOptions":[1028,"use-options"],"options":[16],"filteredOptions":[32],"displayOptions":[32],"viewScenario":[32],"displayOptionToCheckAllItems":[32]}]);
+const EzMultiSelectionList = /*@__PURE__*/proxyCustomElement(EzMuiltiSelectionList, [2,"ez-multi-selection-list",{"columnName":[1,"column-name"],"dataSource":[16],"useOptions":[1028,"use-options"],"options":[16],"isTextSearch":[4,"is-text-search"],"filteredOptions":[32],"displayOptions":[32],"viewScenario":[32],"displayOptionToCheckAllItems":[32]}]);
 const EzNumberInput = /*@__PURE__*/proxyCustomElement(EzNumberInput$1, [1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"canShowError":[516,"can-show-error"],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513]}]);
 const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"]}]);
 const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]);
 const EzRadioButton = /*@__PURE__*/proxyCustomElement(EzRadioButton$1, [1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]);
 const EzScroller = /*@__PURE__*/proxyCustomElement(EzScroller$1, [1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]);
-const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"canShowError":[516,"can-show-error"],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16]}]);
+const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"canShowError":[516,"can-show-error"],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"]}]);
 const EzSidebarButton = /*@__PURE__*/proxyCustomElement(EzSidebarButton$1, [1,"ez-sidebar-button"]);
 const EzSkeleton = /*@__PURE__*/proxyCustomElement(EzSkeleton$1, [0,"ez-skeleton",{"count":[2],"variant":[1],"width":[1],"height":[1],"marginBottom":[1,"margin-bottom"],"animation":[1]}]);
 const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]);
@@ -129474,7 +129592,7 @@ const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"messa
 const EzTree = /*@__PURE__*/proxyCustomElement(EzTree$1, [1,"ez-tree",{"items":[1040],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_tree":[32],"_waintingForLoad":[32]},[[2,"keydown","onKeyDownListener"]]]);
 const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"label":[1],"subtitle":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040]}]);
 const EzViewStack = /*@__PURE__*/proxyCustomElement(EzViewStack$1, [0,"ez-view-stack"]);
-const FilterColumn = /*@__PURE__*/proxyCustomElement(FilterColumn$1, [0,"filter-column",{"opened":[4],"columnName":[1,"column-name"],"columnLabel":[1,"column-label"],"gridHeaderHidden":[4,"grid-header-hidden"],"dataSource":[16],"dataUnit":[16],"options":[1040],"selectedItems":[32],"fieldDescriptor":[32],"useOptions":[32]}]);
+const FilterColumn = /*@__PURE__*/proxyCustomElement(FilterColumn$1, [0,"filter-column",{"opened":[4],"columnName":[1,"column-name"],"columnLabel":[1,"column-label"],"gridHeaderHidden":[4,"grid-header-hidden"],"noHeaderTaskBar":[1028,"no-header-task-bar"],"dataSource":[16],"dataUnit":[16],"options":[1040],"selectedItems":[32],"fieldDescriptor":[32],"useOptions":[32],"isTextSearch":[32]}]);
 const MultiSelectionBoxMessage = /*@__PURE__*/proxyCustomElement(MultiSelectionBoxMessage$1, [0,"multi-selection-box-message",{"message":[1]}]);
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {

package/dist/esm/ez-combo-box.entry.js

@@ -40,6 +40,7 @@ const EzComboBox = class {
     this.mode = "regular";
     this.hideErrorOnFocusOut = true;
     this.listOptionsPosition = undefined;
+    this.isTextSearch = false;
   }
   observeErrorMessage() {
     var _a;
@@ -362,7 +363,6 @@ const EzComboBox = class {
       this._visibleOptions = [];
       this.clearSource();
     }
-    this.setFocus();
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -547,6 +547,12 @@ const EzComboBox = class {
   handlerIconClick() {
     this.searchMode ? this.loadOptions(SearchMode.ADVANCED) : this.showOptions();
   }
+  buildNumberArgument(argument) {
+    if (this.isTextSearch) {
+      return NaN;
+    }
+    return Number(argument || undefined);
+  }
   onTextInputChangeHandler(event) {
     var _a;
     this.clearDeboucingTimeout();
@@ -557,7 +563,7 @@ const EzComboBox = class {
       return;
     }
     const argument = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
-    const argumentNumber = Number(argument || undefined);
+    const argumentNumber = this.buildNumberArgument(argument);
     if (!this._criteria) {
       this._textInput.value = event.data || argument;
     }

package/dist/esm/ez-form-view.entry.js

@@ -95,15 +95,49 @@ uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
 const fieldBuilder = (field) => {
   const builder = uiBuilders.get(field.userInterface) || buildTextInput;
   const label = field.required ? `${field.label}${REQUIRED_INFO}` : field.label;
-  return builder(Object.assign(Object.assign({}, field), { label }));
+  const builtElement = builder(Object.assign(Object.assign({}, field), { label }));
+  //@ts-ignore
+  builtElement.$attrs$['data-form-item'] = field.name;
+  return builtElement;
 };
 
+class FormItem {
+  constructor(elem) {
+    this.elem = elem;
+  }
+  addRightElement(el) {
+    el.classList.add('ez-padding-left--small');
+    this.elem.classList.add('ez-col--nowrap');
+    this.elem.appendChild(el);
+  }
+  get fieldName() {
+    return this.elem.getAttribute('data-form-item');
+  }
+}
+class FormItems {
+  constructor(items, formId) {
+    this.items = new Map();
+    this.formId = formId;
+    items.forEach(item => {
+      const formItem = new FormItem(item);
+      this.items.set(formItem.fieldName, formItem);
+    });
+  }
+  getItem(name) {
+    return this.items.get(name);
+  }
+  get formName() {
+    return this.formId;
+  }
+}
+
 const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}";
 
 const EzFormView = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ezContentReady = createEvent(this, "ezContentReady", 7);
+    this.formItemsReady = createEvent(this, "formItemsReady", 7);
     this.fields = undefined;
   }
   async showUp() {
@@ -129,6 +163,8 @@ const EzFormView = class {
   }
   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.formItemsReady.emit(formItems);
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');

package/dist/esm/ez-form.entry.js

@@ -831,6 +831,7 @@ const EzForm = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ezReady = createEvent(this, "ezReady", 7);
+    this.formItemsReady = createEvent(this, "formItemsReady", 7);
     this.onDataUnitAction = (action) => {
       if (action.type === Action.METADATA_LOADED) {
         this.processMetadata();