@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-81596.0 → 0.0.0-bugfix-dev-KB-81596.1

package/dist/custom-elements/index.js

@@ -817,8 +817,9 @@ class DataBinder {
     }
   }
   bindSearchOptionsLoader(fieldName, field) {
-    if (field.nodeName === "EZ-SEARCH" && field["optionLoader"] == undefined) {
-      const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
+    if ((field.nodeName === "EZ-SEARCH" || field.nodeName === "EZ-SEARCH-PLUS") && field["optionLoader"] == undefined) {
+      const isSearchPlus = field.nodeName === "EZ-SEARCH-PLUS";
+      const loader = isSearchPlus ? ApplicationContext.getContextValue("__EZUI__SEARCH__PLUS__OPTION__LOADER__") : ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
       if (loader) {
         field["optionLoader"] = (arg, ctxOptions) => {
           return loader(arg, fieldName, this._dataUnit, ctxOptions);
@@ -937,6 +938,20 @@ var CustomRenderSource;
   CustomRenderSource["FORM"] = "FORM";
 })(CustomRenderSource || (CustomRenderSource = {}));
 
+var SearchMode$2;
+(function (SearchMode) {
+  SearchMode["ADVANCED"] = "ADVANCED";
+  SearchMode["PREDICTIVE"] = "PREDICTIVE";
+  SearchMode["LOAD_DESCRIPTION"] = "LOAD_DESCRIPTION";
+  SearchMode["PRELOAD"] = "PRELOAD";
+})(SearchMode$2 || (SearchMode$2 = {}));
+
+var FormLayout;
+(function (FormLayout) {
+  FormLayout[FormLayout["CASCADE"] = 0] = "CASCADE";
+  FormLayout[FormLayout["SIDE_BY_SIDE"] = 1] = "SIDE_BY_SIDE";
+})(FormLayout || (FormLayout = {}));
+
 const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__actions-list--z-index:var(--ez-elevation--8, 8);--ez-actions-button__actions-max-height:415px;--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;overflow-y:auto;scrollbar-width:thin;z-index:var(--ez-actions-button__actions-list--z-index);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--max-height{max-height:var(--ez-actions-button__actions-max-height)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;z-index:calc(var(--ez-actions-button__actions-list--z-index) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 2px) * -1)}.ez-actions-button__arrow--small{margin-left:6px}.ez-actions-button__arrow--medium{margin-left:11px}.ez-actions-button__arrow--large{margin-left:13px}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}.ez-actions-button--bottom-padding{padding-bottom:var(--space--small, 6px)}";
 
 const EzActionsButton$1 = class extends HTMLElement$1 {
@@ -2923,7 +2938,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     this._startLoading = false;
     this._showLoading = true;
     this._criteria = undefined;
-    this._textInputReady = undefined;
     this.limitCharsToSearch = 3;
     this.value = undefined;
     this.label = undefined;
@@ -3203,11 +3217,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentDidRender() {
-    if (this._textInput) {
-      this._textInputReady = true;
-    }
-  }
   componentWillLoad() {
     if (this.options === undefined) {
       this.options = [];
@@ -3805,7 +3814,7 @@ const EzDateInput$1 = class extends HTMLElement$1 {
     }
   }
   disconnectedCallback() {
-    this.hideCalendar();
+    this._popover.hide();
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
@@ -4037,7 +4046,7 @@ const EzDateTimeInput$1 = class extends HTMLElement$1 {
     }
   }
   disconnectedCallback() {
-    this.hideCalendar();
+    this._popover.hide();
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
@@ -5757,12 +5766,14 @@ const EzForm$1 = class extends HTMLElement$1 {
     this.ezReady = createEvent(this, "ezReady", 7);
     this.formItemsReady = createEvent(this, "formItemsReady", 7);
     this._customEditors = new Map();
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this.onDataUnitAction = (action) => {
       if (action.type === Action.METADATA_LOADED) {
         this.processMetadata();
       }
     };
     this._fieldsProps = new Map();
+    this._singleColumn = true;
     this.dataUnit = undefined;
     this.config = undefined;
     this.recordsValidator = undefined;
@@ -5825,7 +5836,7 @@ const EzForm$1 = class extends HTMLElement$1 {
     }
     this.ezFormSetFields.emit(fields);
     const idFormSheet = `${StringUtils$1.replaceAccentuatedChars(StringUtils$1.toCamelCase(currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.label), false)}_selectorContainer`;
-    return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, selectedRecord: this.dataUnit.getSelectedRecord() })));
+    return (h("div", { class: "dynamic-content", "data-element-id": idFormSheet }, h("ez-form-view", { ref: (element) => (this._formView = element), class: "ez-row ez-padding-vertical--small", fields: fields, singleColumn: this._singleColumn, selectedRecord: this.dataUnit.getSelectedRecord() })));
   }
   processMetadata() {
     if (this.bindFields() && this.dataUnit && this._store) {
@@ -5840,7 +5851,8 @@ const EzForm$1 = class extends HTMLElement$1 {
   bindFields() {
     return !this.isStatic() || this.onlyStaticFields === false;
   }
-  componentWillLoad() {
+  async componentWillLoad() {
+    var _a;
     if (this.dataUnit === undefined) {
       this.dataUnit = new DataUnit("ez-form");
     }
@@ -5853,6 +5865,28 @@ const EzForm$1 = class extends HTMLElement$1 {
     this.processMetadata();
     const dataInfo = { dataUnit: this.dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    const layoutFormConfig = await ((_a = this._application) === null || _a === void 0 ? void 0 : _a.getLayoutFormConfig());
+    this.setSingleColumn(layoutFormConfig);
+    this.registerNotifyListeners(layoutFormConfig);
+  }
+  async setSingleColumn(layoutFormConfig) {
+    if (!(layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config)) {
+      this._singleColumn = true;
+      return;
+    }
+    this._singleColumn = layoutFormConfig.config === FormLayout.CASCADE ? true : false;
+  }
+  async registerNotifyListeners(layoutFormConfig) {
+    if (!layoutFormConfig)
+      return;
+    layoutFormConfig.onConfigChange((config) => {
+      if (config === FormLayout.CASCADE) {
+        this._singleColumn = true;
+      }
+      else {
+        this._singleColumn = false;
+      }
+    });
   }
   componentDidRender() {
     const metadata = selectFormMetadata(this._store.getState());
@@ -5921,6 +5955,8 @@ const EzForm$1 = class extends HTMLElement$1 {
 const REQUIRED_INFO = " (obrigatório) *";
 const DISTINCT_FILTER_NAME_PREFIX = 'FILTRO_COLUNA_';
 const EZ_GRID_LOADING_SOURCE = "EZ_GRID_LOADING_SOURCE";
+const PRESENTATION_COL_ID_PROP_NAME = "gridDescriptionColID";
+const PRESENTATION_FROM_COL_PROP_NAME = "presentationFieldFrom";
 
 const buildSwitch$1 = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, true);
@@ -5992,12 +6028,6 @@ function buildNumeric$1(fieldName, fieldLabel, readOnly, precision, prettyPrecis
     h("ez-number-input", { class: "ez-input__no-margin", enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
 }
 
-const buildSearch$1 = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
-  var _a;
-  return (h("div", { class: "ez-col ez-col--sd-12" },
-    h("ez-search", { class: "ez-input__no-margin", enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props === null || props === void 0 ? void 0 : props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
-};
-
 const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError }) => {
   return (h("div", { class: "ez-col ez-col--sd-12", key: name },
     h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
@@ -6008,6 +6038,18 @@ const buildTextInput$1 = ({ name, label, readOnly, contextName, canShowError, pr
     h("ez-text-input", { class: "ez-input__no-margin", label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError, mask: props === null || props === void 0 ? void 0 : props.mask, "clean-value-mask": props === null || props === void 0 ? void 0 : props.cleanValueMask })));
 };
 
+const buildSearchPlus$1 = ({ name, label, readOnly, contextName, canShowError, optionLoader, props }) => {
+  const hasDescriptionField = !StringUtils$1.isEmpty(props === null || props === void 0 ? void 0 : props.DESCRIPTIONFIELD);
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-search-plus", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, hideDescriptionInput: !hasDescriptionField })));
+};
+
+const buildSearch$1 = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
+  var _a;
+  return (h("div", { class: "ez-col ez-col--sd-12" },
+    h("ez-search", { class: "ez-input__no-margin", enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props === null || props === void 0 ? void 0 : props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
+};
+
 const uiBuilders$1 = new Map();
 uiBuilders$1.set(UserInterface.CHECKBOX, buildCheckBox);
 uiBuilders$1.set(UserInterface.SWITCH, buildSwitch$1);
@@ -6020,6 +6062,7 @@ uiBuilders$1.set(UserInterface.FILE, buildFile);
 uiBuilders$1.set(UserInterface.DECIMALNUMBER, buildDecimal$1);
 uiBuilders$1.set(UserInterface.INTEGERNUMBER, buildInteger$1);
 uiBuilders$1.set(UserInterface.SEARCH, buildSearch$1);
+uiBuilders$1.set(UserInterface.SEARCHPLUS, buildSearchPlus$1);
 uiBuilders$1.set(UserInterface.LONGTEXT, buildTextArea);
 const fieldBuilder = (field) => {
   const builder = uiBuilders$1.get(field.userInterface) || buildTextInput$1;
@@ -6065,7 +6108,7 @@ class FormItems {
   }
 }
 
-const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:220px;--ez-form-view__item--width:var(--space--small);--ez-form-view__item--padding:var(--space--small)}.form-view__content.sc-ez-form-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));gap:var(--ez-form-view__item--width);padding-inline:var(--ez-form-view__item--padding);width:100%}.input-full_width.sc-ez-form-view{grid-column:1 / -1;width:100%}";
+const ezFormViewCss = ".sc-ez-form-view-h{display:flex;flex-wrap:wrap;width:100%;--ez-form-view__item--min-width:220px;--ez-form-view__item--max-width:440px;--ez-form-view__item--width:var(--space--small);--ez-form-view__item--padding:var(--space--small)}.form-view__content.sc-ez-form-view{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));gap:var(--ez-form-view__item--width);padding-inline:var(--ez-form-view__item--padding);width:100%}.form-view__content--single-column.sc-ez-form-view{grid-template-columns:repeat(1, minmax(var(--ez-form-view__item--min-width), var(--ez-form-view__item--max-width)))}.input-full_width.sc-ez-form-view{grid-column:1 / -1;width:100%}";
 
 const EzFormView$1 = class extends HTMLElement$1 {
   constructor() {
@@ -6076,6 +6119,7 @@ const EzFormView$1 = class extends HTMLElement$1 {
     this._customEditors = new Map();
     this.fields = undefined;
     this.selectedRecord = undefined;
+    this.singleColumn = true;
   }
   async showUp() {
     this._element.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -6151,7 +6195,7 @@ const EzFormView$1 = class extends HTMLElement$1 {
     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 }, h("div", { class: "form-view__content" }, value.map(fi => (this.buildFormItemElement(fi))))));
+        return (h("ez-collapsible-box", { id: `group-${label}`, label: label, "header-size": "large", key: label }, h("div", { class: `form-view__content ${this.singleColumn && "form-view__content--single-column"}` }, value.map(fi => (this.buildFormItemElement(fi))))));
       }
       else {
         nonArrayGrup.push(value);
@@ -6159,7 +6203,7 @@ const EzFormView$1 = class extends HTMLElement$1 {
     });
     // 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);
+    let groupedNonArrayElements = h("div", { class: `form-view__content ${this.singleColumn && "form-view__content--single-column"}` }, nonArrayElements);
     return (h(Host, null, groupedNonArrayElements, formContent));
   }
   get _element() { return this; }
@@ -56403,14 +56447,20 @@ class DataSource {
           return indexA - indexB;
         });
         this._dataUnit.metadata.fields.forEach(f => {
-          var _a;
+          var _a, _b;
           if (f.visible !== false && f.name !== this.RECORD_ARCHIVE) {
             const props = new Map();
             const properties = this._dataUnit.getField(f.name).properties;
             for (const value in properties) {
               props.set(value, properties[value]);
             }
-            columnDefs.push({ label: f.label, name: f.name, userInterface: f.userInterface, options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options, props });
+            const col = { label: f.label, name: f.name, userInterface: f.userInterface, options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options, props };
+            columnDefs.push(col);
+            if (f.userInterface === UserInterface.SEARCHPLUS && ((_b = f.properties) === null || _b === void 0 ? void 0 : _b.DESCRIPTIONFIELD)) {
+              const descriptionCol = this.buildDescriptionColumn(f);
+              columnDefs.push(descriptionCol);
+              f.properties[PRESENTATION_COL_ID_PROP_NAME] = descriptionCol.name;
+            }
           }
         });
       }
@@ -56420,6 +56470,17 @@ class DataSource {
       console.warn(error);
     }
   }
+  buildDescriptionColumn(field) {
+    var _a, _b, _c, _d;
+    const props = new Map();
+    props.set(PRESENTATION_FROM_COL_PROP_NAME, field.name);
+    return {
+      label: `${(_a = field.properties) === null || _a === void 0 ? void 0 : _a.DESCRIPTIONFIELDLABEL} (${(_b = field.properties) === null || _b === void 0 ? void 0 : _b.DESCRIPTIONENTITY})`,
+      name: `${(_c = field.properties) === null || _c === void 0 ? void 0 : _c.ENTITYNAME}.${(_d = field.properties) === null || _d === void 0 ? void 0 : _d.DESCRIPTIONFIELD}`,
+      userInterface: UserInterface.SHORTTEXT,
+      props
+    };
+  }
 }
 
 class EzGridCustomHeader {
@@ -56830,6 +56891,21 @@ const buildSwitch = (fieldMetadata) => {
   return combo;
 };
 
+const buildSearchPlus = ({ name, required, readOnly, dataUnit }) => {
+  const ezSearch = HTMLBuilder.parseElement(`<ez-search-plus
+          class="ez-grid grid_editor"
+          mode="slim"
+          suppress-empty-option=${required}
+          enabled=${!readOnly}
+          hide-description-input=${true}
+    />`);
+  const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__PLUS__OPTION__LOADER__");
+  ezSearch.optionLoader = (argument) => loader(argument, name, dataUnit);
+  ezSearch.autoFocus = true;
+  ezSearch.valueGetter = () => ezSearch.getValueAsync();
+  return ezSearch;
+};
+
 const buildSearch = ({ name, required, readOnly, eGridCell, dataUnit }) => {
   var _a;
   const ezSearch = HTMLBuilder.parseElement(`<ez-search
@@ -56862,6 +56938,7 @@ uiBuilders.set(UserInterface.CHECKBOX, buildSwitch);
 uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextAreaInput);
 uiBuilders.set(UserInterface.SEARCH, buildSearch);
+uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 class EzCellEditor {
   init(params) {
     this._rowData = params.data;
@@ -57060,6 +57137,7 @@ class EzGridCustomCellRender extends EzCellRender {
 
 class GridEditionManager {
   constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled, customEditors, customRenders, enableContinuousInsert, enableGridInsert, lockerId) {
+    this._inProgressChanges = [];
     this._dataUnit = dataUnit;
     this._recordValidationProcessor = new RecordValidationProcessor(this._dataUnit, {
       getRequiredFields: () => this.getRequiredFields(),
@@ -57159,6 +57237,12 @@ class GridEditionManager {
     return this._enableContinuousInsert && (this._dataUnit.records.length - 1) === ((_a = this._lastCellEdited) === null || _a === void 0 ? void 0 : _a.rowIndex);
   }
   async proceedAutoSave() {
+    var _a;
+    //Aguarda outras promises entrarem na fila
+    await new Promise(resolve => setTimeout(resolve, 100));
+    if (this._inProgressChanges.length) {
+      await Promise.all((_a = this._inProgressChanges) === null || _a === void 0 ? void 0 : _a.map(({ promise }) => promise));
+    }
     if (!this._dataUnit.isDirty()) {
       this.saveSuccess();
       return true;
@@ -57229,7 +57313,9 @@ class GridEditionManager {
   }
   configureColumn(col) {
     col.cellEditor = 'ezCellEditor';
-    col.editable = params => this.canEdit(params);
+    if (col.editable != false) {
+      col.editable = params => this.canEdit(params);
+    }
     col.suppressKeyboardEvent = (params) => {
       if (params.event.key === KeyCode.ESCAPE && params.editing) {
         return this._dataUnit.isDirty();
@@ -57413,6 +57499,14 @@ class GridEditionManager {
       return;
     }
     if (value instanceof Promise) {
+      const progressChange = {
+        promise: undefined,
+        resolve: () => { }
+      };
+      progressChange.promise = new Promise((resolve) => {
+        progressChange.resolve = resolve;
+      });
+      this._inProgressChanges.push(progressChange);
       this.handlePromiseValue(event, value);
       return;
     }
@@ -57426,16 +57520,22 @@ class GridEditionManager {
     const resolved = await value;
     return this.updateCellValue(event, resolved);
   }
-  updateCellValue(event, newValue) {
-    var _a;
+  async updateCellValue(event, newValue) {
+    var _a, _b, _c, _d;
     const fieldName = event.colDef.field;
-    event.node.setData(Object.assign(Object.assign({}, event.data), { [fieldName]: newValue }));
-    (_a = this._currentEditLock) === null || _a === void 0 ? void 0 : _a.call(this);
+    const newData = { [fieldName]: newValue };
+    const descriptionColName = (_b = (_a = this._dataUnit.getField(fieldName)) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b[PRESENTATION_COL_ID_PROP_NAME];
+    if (!StringUtils$1.isEmpty(descriptionColName)) {
+      newData[descriptionColName] = newValue === null || newValue === void 0 ? void 0 : newValue.label;
+    }
+    event.node.setData(Object.assign(Object.assign({}, event.data), { newData }));
+    (_c = this._currentEditLock) === null || _c === void 0 ? void 0 : _c.call(this);
     if (event.oldValue !== newValue) {
       this._isGridEdition = true;
-      this._dataUnit.setFieldValue(fieldName, newValue, [event.data.__record__id__], { suppressCreateNewRecord: true });
+      await this._dataUnit.setFieldValue(fieldName, newValue, [event.data.__record__id__], { suppressCreateNewRecord: true });
       this._lastCellEdited = { rowIndex: event.rowIndex, column: event.column, rowPinned: undefined };
     }
+    (_d = this._inProgressChanges) === null || _d === void 0 ? void 0 : _d.forEach(({ resolve }) => resolve(newValue));
   }
   setCellEditors(customEditors) {
     var _a;
@@ -70924,7 +71024,6 @@ class AgGridController {
     this.DEFAULT_FONT_SIZE_HTML5 = 32;
     this.DEFAULT_ICON_SIZE = 12;
     this.DEFAULT_MAX_SIZE = 200;
-    this.DOC_WIDTH = 800;
     this._menuItems = [];
     this._idAttribName = '__record__id__';
     this._gridConfig = [];
@@ -70933,6 +71032,7 @@ class AgGridController {
     this._customFormatters = new Map();
     this._gridShowDom = false;
     this.peddingExecutionsOnGridShow = [];
+    this._lastColsConfig = undefined;
     ModuleRegistry.registerModules([
       EnterpriseCoreModule,
       RangeSelectionModule,
@@ -71527,7 +71627,9 @@ class AgGridController {
     }
   }
   isColumnEditable(rowIndex, column) {
-    if (column.getColDef().headerName === '' || rowIndex === -1)
+    if (column.getColDef().headerName === ''
+      || column.getColDef().headerName === this.CHECK_BOX_COL_ID
+      || rowIndex === -1)
       return false;
     const rowId = this._dataUnit.records[rowIndex][this._idAttribName];
     const rowNode = this._gridOptions.api.getRowNode(rowId);
@@ -71545,7 +71647,7 @@ class AgGridController {
     this._gridOptions.api.setFocusedCell(rowIndex, firstCell);
   }
   setColumnsDef(cols) {
-    const checkBoxColumn = Object.assign({ colId: this.CHECK_BOX_COL_ID, headerName: '', checkboxSelection: true, width: 29, suppressMovable: true, suppressAutoSize: true, suppressMenu: true, lockPosition: true, pinned: true }, (this._multipleSelection && { headerComponent: 'ezGridHeaderComponent', headerClass: 'ag-column-select-header' }));
+    const checkBoxColumn = Object.assign({ colId: this.CHECK_BOX_COL_ID, headerName: this.CHECK_BOX_COL_ID, checkboxSelection: true, width: 29, suppressMovable: true, suppressAutoSize: true, suppressMenu: true, lockPosition: true, pinned: true }, (this._multipleSelection && { headerComponent: 'ezGridHeaderComponent', headerClass: 'ag-column-select-header' }));
     const newColDefs = this._options.suppressCheckBoxCol ? [] : [checkBoxColumn];
     if (this._statusResolver != undefined) {
       newColDefs.push({
@@ -71573,8 +71675,39 @@ class AgGridController {
     });
     this._colDefs = newColDefs;
     if (this._gridOptions && this._gridOptions.api) {
+      this.setColsDefsWithStateIfNeeded(this._colDefs);
+    }
+  }
+  setColsDefsWithStateIfNeeded(colDefs) {
+    if (!this._lastColsConfig) {
       this._gridOptions.api.setColumnDefs(this._colDefs);
     }
+    /*
+      Caso a definição de colunas esteja sendo atualizada,
+      e existe uma config aplicada, temos que considerar essa
+      config ao adicionar nova definição de colunas.
+      PS: Poderia apenas chamar o setColumnsState, porém,
+      isso impactaria em performance, e o usuário ia perceber
+      a mudança das colunas visualmente na grade, o que traria
+      uma experiencia ruim.
+    */
+    const colDefsWithConfigs = this.getColsDefWithConfigApplied(colDefs, this._lastColsConfig);
+    this._gridOptions.api.setColumnDefs(colDefsWithConfigs);
+  }
+  getColsDefWithConfigApplied(colDefs, colsConfig) {
+    //Cria map de colunas existentes na config e seu índice
+    const orderMap = colsConfig.reduce((map, col, index) => {
+      map[col.name] = index;
+      return map;
+    }, {});
+    //Remove colunas que não existem na config
+    const filteredColsDefs = colDefs.filter((col) => !orderMap.hasOwnProperty(col.colId));
+    //Ordena colunas baseada na config aplicada
+    const sortedColumnDefs = filteredColsDefs.sort((a, b) => {
+      var _a, _b;
+      return ((_a = orderMap[a.field]) !== null && _a !== void 0 ? _a : Number.MAX_VALUE) - ((_b = orderMap[b.field]) !== null && _b !== void 0 ? _b : Number.MAX_VALUE);
+    });
+    return sortedColumnDefs;
   }
   hideSelectionColumn() {
     var _a, _b;
@@ -71608,6 +71741,7 @@ class AgGridController {
     if (this._grid === undefined) {
       throw new Error('Erro interno: Grid ainda não inicializado.');
     }
+    this._lastColsConfig = state;
     const colDef = this._gridOptions.columnApi.getColumns();
     let columns = this.getColumnsDef();
     let visibleColumns = [];
@@ -71616,14 +71750,39 @@ class AgGridController {
     const columnsOffset = colDef.length - columns.length;
     this._gridConfig = state;
     let sort = [];
-    state.forEach((cfgColumn, index) => {
+    let currentIndex = 0;
+    state.forEach((cfgColumn) => {
+      var _a, _b;
       const colWidth = this.getColumnWidth(cfgColumn);
-      this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + columnsOffset);
+      this._gridOptions.columnApi.moveColumn(cfgColumn.name, currentIndex + columnsOffset);
       this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, colWidth);
       visibleColumns.push(cfgColumn.name);
       if (cfgColumn.ascending !== undefined) {
         sort.push({ colId: cfgColumn.name, sort: cfgColumn.ascending !== true ? 'desc' : 'asc', sortIndex: cfgColumn.orderIndex });
       }
+      currentIndex++;
+      const fieldMD = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
+      /*
+        Migração para o SEARCHPLUS, caso de uso:
+          - Agora existe uma coluna para o campo de descrição do relaciona
+          - Essa col, não existe na config da grade que já foi salva pelo DS
+          - Nesse caso, precisamos inserir a coluna de descrição automaticamente para que
+            os usuários não percam a apresentação do campo de descrição.
+          PS: Caso esteja herdando do HTML5, devemos manter a config como está la
+      */
+      if (this.needToAddDescriptionColumn(cfgColumn, fieldMD, state)) {
+        const descriptionColID = (_b = fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.properties) === null || _b === void 0 ? void 0 : _b[PRESENTATION_COL_ID_PROP_NAME];
+        if (!descriptionColID)
+          return;
+        const descriptionCol = this._gridOptions.columnApi.getColumn(descriptionColID);
+        const descriptionColDef = descriptionCol === null || descriptionCol === void 0 ? void 0 : descriptionCol.getColDef();
+        const descriptionHeaderName = descriptionColDef === null || descriptionColDef === void 0 ? void 0 : descriptionColDef.headerName;
+        const descriptionColSize = this.getColumnWidthByLabel(descriptionHeaderName);
+        this._gridOptions.columnApi.moveColumn(descriptionColID, currentIndex + columnsOffset);
+        this._gridOptions.columnApi.setColumnWidth(descriptionColID, descriptionColSize);
+        visibleColumns.push(descriptionColID);
+        currentIndex++;
+      }
     });
     let invisibleColumns = columns.filter(column => !visibleColumns.includes(column.name)).map(column => column.name);
     this._gridOptions.columnApi.setColumnsVisible(visibleColumns, true);
@@ -71633,10 +71792,15 @@ class AgGridController {
       defaultState: { sort: null },
     });
   }
-  getAdaptiveWidth(width) {
-    const widthGrid = this._container.clientWidth;
-    const adaptiveWidth = (this.DOC_WIDTH * width) / widthGrid;
-    return Math.round(adaptiveWidth);
+  needToAddDescriptionColumn(cfgColumn, fieldMD, stateConfig) {
+    var _a, _b;
+    if (!fieldMD) {
+      return false;
+    }
+    const configVersion = ((_a = cfgColumn.configVersion) !== null && _a !== void 0 ? _a : 0);
+    const isSearchPlus = (fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.userInterface) == UserInterface.SEARCHPLUS;
+    const descriptionColID = (_b = fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.properties) === null || _b === void 0 ? void 0 : _b[PRESENTATION_COL_ID_PROP_NAME];
+    return isSearchPlus && configVersion < 1 && stateConfig.find(col => col.name === descriptionColID) != undefined;
   }
   getColumnsState() {
     if (this._grid === undefined) {
@@ -71647,7 +71811,7 @@ class AgGridController {
       .map(s => {
       const column = this._gridOptions.columnApi.getColumn(s.colId);
       const def = column.getColDef();
-      const width = this.getAdaptiveWidth(column.getActualWidth());
+      const width = column.getActualWidth();
       const label = def.headerName;
       const name = def.checkboxSelection ? '__SELECTION__' : s.colId;
       const colState = { label, name };
@@ -71697,7 +71861,7 @@ class AgGridController {
     return filterOptions.map(item => item.check).includes(true);
   }
   buildColDef(source) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     let tooltip = undefined;
     const propSortable = StringUtils$1.getBooleanValue((_a = source.props) === null || _a === void 0 ? void 0 : _a.get('gridSortable'), true);
     if ((_b = source.props) === null || _b === void 0 ? void 0 : _b.get('gridHeaderTooltip')) {
@@ -71719,6 +71883,11 @@ class AgGridController {
         showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name), fromIcon: true }),
       },
       valueFormatter: params => {
+        var _a, _b, _c, _d;
+        const presentationFrom = (_a = source === null || source === void 0 ? void 0 : source.props) === null || _a === void 0 ? void 0 : _a.get(PRESENTATION_FROM_COL_PROP_NAME);
+        if (presentationFrom) {
+          return (_d = (_c = (_b = params === null || params === void 0 ? void 0 : params.data) === null || _b === void 0 ? void 0 : _b[presentationFrom]) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : "";
+        }
         if (params.value === undefined || params.value === null) {
           return "";
         }
@@ -71738,6 +71907,7 @@ class AgGridController {
         return this.getFormatterByColumn(params, source);
       },
       cellStyle: this.getStyleByColumn(source),
+      editable: !((_d = source.props) === null || _d === void 0 ? void 0 : _d.has(PRESENTATION_FROM_COL_PROP_NAME))
     });
   }
   setCustomFormatters(customFormatters) {
@@ -71753,8 +71923,11 @@ class AgGridController {
     };
   }
   getStyleByColumn(source) {
+    var _a;
     let cellStyle = this.getInitCellStyle();
-    switch (source === null || source === void 0 ? void 0 : source.userInterface) {
+    const primitiveUIType = (_a = source === null || source === void 0 ? void 0 : source.props) === null || _a === void 0 ? void 0 : _a.get("PRIMITIVETUIYPE");
+    const uitype = source === null || source === void 0 ? void 0 : source.userInterface;
+    switch (primitiveUIType !== null && primitiveUIType !== void 0 ? primitiveUIType : uitype) {
       case UserInterface.DECIMALNUMBER:
       case UserInterface.INTEGERNUMBER:
         cellStyle['text-align'] = 'right';
@@ -71770,7 +71943,7 @@ class AgGridController {
     return cellStyle;
   }
   getFormatterByColumn(params, source) {
-    var _a;
+    var _a, _b, _c, _d;
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === 'OPTIONSELECTOR' && source.options) {
       const prop = source === null || source === void 0 ? void 0 : source.options;
       let options;
@@ -71807,6 +71980,9 @@ class AgGridController {
         return params === null || params === void 0 ? void 0 : params.value;
       }
     }
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.SEARCHPLUS) {
+      return (_d = (_c = (_b = params === null || params === void 0 ? void 0 : params.value) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : params === null || params === void 0 ? void 0 : params.value) !== null && _d !== void 0 ? _d : "";
+    }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.DECIMALNUMBER) {
       if (params.value != undefined) {
         const precision = Number(source.props.get('precision')) || 2;
@@ -71980,7 +72156,7 @@ class AgGridController {
     this._gridOptions.api.stopEditing();
   }
   getColumnWidth(cfgColumn) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     if (cfgColumn == undefined) {
       return;
     }
@@ -71992,10 +72168,14 @@ class AgGridController {
       return parseInt(cfgColumn.width) + this.DEFAULT_FONT_SIZE_HTML5;
     }
     const field = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
+    const label = (_b = field === null || field === void 0 ? void 0 : field.label) !== null && _b !== void 0 ? _b : (_f = (_e = (_d = (_c = this._gridOptions) === null || _c === void 0 ? void 0 : _c.columnApi) === null || _d === void 0 ? void 0 : _d.getColumn(cfgColumn.name)) === null || _e === void 0 ? void 0 : _e.getColDef()) === null || _f === void 0 ? void 0 : _f.headerName;
     if ((field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH) {
       return this.DEFAULT_MAX_SIZE;
     }
-    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 this.getColumnWidthByLabel(label);
+  }
+  getColumnWidthByLabel(label) {
+    const labelSize = ((label === null || label === void 0 ? void 0 : label.length) || 0) * this.DEFAULT_FONT_SIZE + this.DEFAULT_ICON_SIZE;
     return labelSize > this.DEFAULT_MAX_SIZE ? this.DEFAULT_MAX_SIZE : labelSize;
   }
 }
@@ -73527,7 +73707,7 @@ const EzList$1 = class extends HTMLElement$1 {
     return { id: item.id, label: item.label, check: evt.detail };
   }
   renderListWithGroups() {
-    return h("div", { class: 'group-container', ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => this.keyDownHandler(event) }, this._listGroupItems.map(group => {
+    return h("div", { class: 'group-container', ref: el => (this._groupContainer = el), tabIndex: this.ezSelectable ? 0 : undefined, onKeyDown: event => this.keyDownHandler(event) }, this._listGroupItems.map(group => {
       return (h("div", { id: this.getDivGroupId(group.group), class: 'group', key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: 'group-name', title: group.group }, group.group), h("section", { class: 'section-container', onDragOver: ev => ev.preventDefault() }, h("div", { class: 'group-items-container' }, h("div", { class: 'draggable-list' }, group.items.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
           'selectable-container': this.ezSelectable,
           'hover-feedback': this.hoverFeedback,
@@ -73537,7 +73717,7 @@ const EzList$1 = class extends HTMLElement$1 {
     }));
   }
   renderList() {
-    return h("div", { class: 'items-container', ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
+    return h("div", { class: 'items-container', ref: el => (this._itemContainer = el), tabIndex: this.ezSelectable ? 0 : undefined, onKeyDown: event => {
         this.keyDownHandler(event);
       } }, h("div", { class: 'draggable-list' }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
         'selectable-container': this.ezSelectable,
@@ -73610,7 +73790,7 @@ const EzModal$1 = class extends HTMLElement$1 {
   }
   componentDidLoad() {
     this.observeOpened();
-    new KeyboardManager({ propagate: false, element: this._element })
+    new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
       .bind("Enter", this.ezModalAction.emit.bind("OK"))
       .bind("Escape", () => this.closeModal())
       .bind("Esc", () => this.closeModal());
@@ -73725,7 +73905,7 @@ const EzModalContainer$1 = class extends HTMLElement$1 {
     this._closeButton.focus();
   }
   render() {
-    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("div", { tabIndex: -1, class: "ez-modal-container__content" }, h("slot", null)), h("div", { tabIndex: -1, class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
   }
   get _element() { return this; }
   static get style() { return ezModalContainerCss; }
@@ -74599,6 +74779,88 @@ async function detectOverflow(state, options) {
   };
 }
 
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow$1 = options => ({
+  name: 'arrow',
+  options,
+  async fn(state) {
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform,
+      elements,
+      middlewareData
+    } = state;
+    // Since `element` is required, we don't Partial<> the type.
+    const {
+      element,
+      padding = 0
+    } = evaluate(options, state) || {};
+    if (element == null) {
+      return {};
+    }
+    const paddingObject = getPaddingObject(padding);
+    const coords = {
+      x,
+      y
+    };
+    const axis = getAlignmentAxis(placement);
+    const length = getAxisLength(axis);
+    const arrowDimensions = await platform.getDimensions(element);
+    const isYAxis = axis === 'y';
+    const minProp = isYAxis ? 'top' : 'left';
+    const maxProp = isYAxis ? 'bottom' : 'right';
+    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
+    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+    const startDiff = coords[axis] - rects.reference[axis];
+    const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
+    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
+
+    // DOM platform can return `window` as the `offsetParent`.
+    if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
+    }
+    const centerToReference = endDiff / 2 - startDiff / 2;
+
+    // If the padding is large enough that it causes the arrow to no longer be
+    // centered, modify the padding so that it is centered.
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
+
+    // Make sure the arrow doesn't overflow the floating element if the center
+    // point is outside the floating element's bounds.
+    const min$1 = minPadding;
+    const max = clientSize - arrowDimensions[length] - maxPadding;
+    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+    const offset = clamp(min$1, center, max);
+
+    // If the reference is small enough that the arrow's padding causes it to
+    // to point to nothing for an aligned placement, adjust the offset of the
+    // floating element itself. To ensure `shift()` continues to take action,
+    // a single reset is performed when this is true.
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
+    return {
+      [axis]: coords[axis] + alignmentOffset,
+      data: {
+        [axis]: offset,
+        centerOffset: center - offset - alignmentOffset,
+        ...(shouldAddOffset && {
+          alignmentOffset
+        })
+      },
+      reset: shouldAddOffset
+    };
+  }
+});
+
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
  * in order to keep it in view when the preferred placement(s) will overflow the
@@ -74725,6 +74987,90 @@ const flip$1 = function (options) {
   };
 };
 
+// For type backwards-compatibility, the `OffsetOptions` type was also
+// Derivable.
+
+async function convertValueToCoords(state, options) {
+  const {
+    placement,
+    platform,
+    elements
+  } = state;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === 'y';
+  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === 'number' ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: rawValue.mainAxis || 0,
+    crossAxis: rawValue.crossAxis || 0,
+    alignmentAxis: rawValue.alignmentAxis
+  };
+  if (alignment && typeof alignmentAxis === 'number') {
+    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
+  }
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset$1 = function (options) {
+  if (options === void 0) {
+    options = 0;
+  }
+  return {
+    name: 'offset',
+    options,
+    async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
+      const {
+        x,
+        y,
+        placement,
+        middlewareData
+      } = state;
+      const diffCoords = await convertValueToCoords(state, options);
+
+      // If the placement is the same and the arrow caused an alignment offset
+      // then we don't need to change the positioning coordinates.
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: {
+          ...diffCoords,
+          placement
+        }
+      };
+    }
+  };
+};
+
 /**
  * Optimizes the visibility of the floating element by shifting it in order to
  * keep it in view when it will overflow the clipping boundary.
@@ -75432,6 +75778,15 @@ const platform = {
   isRTL
 };
 
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = offset$1;
+
 /**
  * Optimizes the visibility of the floating element by shifting it in order to
  * keep it in view when it will overflow the clipping boundary.
@@ -75447,6 +75802,13 @@ const shift = shift$1;
  */
 const flip = flip$1;
 
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow = arrow$1;
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -75826,7 +76188,7 @@ const EzPopup$1 = class extends HTMLElement$1 {
     if (this.opened && this._popupRef) {
       this._popupRef.focus();
     }
-    new KeyboardManager({ propagate: false, element: this._element })
+    new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
       .bind("Enter", this.ezPopupAction.emit.bind("OK"))
       .bind("Escape", () => this.closePopup())
       .bind("Esc", () => this.closePopup());
@@ -76758,6 +77120,455 @@ var SearchMode;
   SearchMode["PREDICTIVE"] = "PREDICTIVE";
 })(SearchMode || (SearchMode = {}));
 
+const ezSearchPlusCss = ":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search__icon--width:48px;--ez-search--border-radius:var(--border--radius-medium, 12px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-color--xlight:var(--background--xlight, #fff);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px);--ez-search__input--background-color:var(--background--medium, #e0e0e0);--ez-search__input--border:var(--border--medium, 2px solid);--ez-search__input--border-color:var(--ez-search__input--background-color);--ez-search__input--focus--border-color:var(--color--primary, #008561);--ez-search__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-search__input--disabled--color:var(--text--disable, #AFB6C0);--ez-search__input--error--border-color:#CC2936;--ez-search__btn--color:var(--title--primary, #2B3A54);--ez-search__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-search__btn-hover--color:var(--color--primary, #4e4e4e);--ez-search__label--color:var(--title--primary, #2B3A54);--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{min-width:var(--ez-search__list-min-width);overflow:auto;position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:0;z-index:var(--more-visible, 2);max-height:350px;min-width:150px;background-color:var(--ez-search--background-color--xlight);border-radius:var(--ez-search--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.list-options{margin-top:0px;box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-search__list-title--primary);border-top:3px solid transparent}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-search__btn--color)}.btn:disabled{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:hover{color:var(--ez-search__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}.ez-search-plus__container{display:flex;flex-grow:1;gap:3px}.ez-search-plus__text-input{--ez-text-input--border-top-left-radius:0px;--ez-text-input--border-bottom-left-radius:0px}.ez-search-plus__code-input-no-border{--ez-text-input--border-top-right-radius:0px;--ez-text-input--border-bottom-right-radius:0px}.ez-search-plus__code-input{width:107px}.ez-search-plus__code-input-full{width:100%}.description-input-container{width:100%}";
+
+const EzSearchPlus$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.SEARCH_DESCRIPTION_TIMEOUT = 300;
+    this.INTERVAL_TO_RETRY_ASYNC_VALUE = 100;
+    this.value = undefined;
+    this.enabled = true;
+    this.disableCodeInput = false;
+    this.disableDescriptionInput = false;
+    this.label = undefined;
+    this.codLabel = undefined;
+    this.hideDescriptionInput = false;
+    this.canShowError = true;
+    this.errorMessage = undefined;
+    this.mode = "regular";
+    this.contextProperties = undefined;
+    this.optionLoader = undefined;
+    this.showOptionValue = true;
+    this.stopPropagateEnterKeyEvent = false;
+    this.autoFocus = false;
+    this.showSelectedValue = true;
+    this.suppressEmptyOption = false;
+    this.hideErrorOnFocusOut = true;
+    this.listOptionsPosition = undefined;
+    this.isTextSearch = false;
+    this.ignoreLimitCharsToSearch = false;
+    this.suppressSearch = false;
+    this.suppressPreLoad = true;
+    this.ensureClearButtonVisible = false;
+    this.descriptionValue = "";
+    this.codeValue = "";
+    this.isLoadingDescription = false;
+    this.searchDescriptionIsOpen = false;
+    this.visibleOptions = undefined;
+    this.showLoading = true;
+  }
+  async observeValue(newValue, oldValue) {
+    const newNormalizedValue = this.normalizeValueToCodeValue(newValue);
+    const oldNormalizedValue = this.normalizeValueToCodeValue(oldValue);
+    if (newNormalizedValue == oldNormalizedValue)
+      return;
+    if (newNormalizedValue == undefined) {
+      this.codeValue = undefined;
+      this.descriptionValue = undefined;
+      this.ezChange.emit(undefined);
+      return;
+    }
+    this.codeValue = newNormalizedValue;
+    try {
+      this.descriptionValue = await this.normalizeCodeToDescriptionValue(newValue);
+    }
+    catch (err) {
+      this.value = undefined;
+      console.warn("[EzSearchPlus] Erro ao obter descrição do registro.", err);
+      throw err;
+    }
+    this.ezChange.emit(this.buildCurrentValue());
+  }
+  canShowLoadSpinDescription() {
+    return this.isLoadingDescription;
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus(options) {
+    var _a;
+    if (this.disableCodeInput) {
+      (_a = this._textInputDescriptionValue) === null || _a === void 0 ? void 0 : _a.setFocus(options);
+      return;
+    }
+    if (this._latestFocusedInputElement) {
+      this._latestFocusedInputElement.setFocus(options);
+      return;
+    }
+    this._textInputCodeValue.setFocus(options);
+  }
+  /**
+  * Obtém o valor do componente só após a compo de apresentação
+  * ter sido resolvido pelo option loader quando necessário
+  */
+  async getValueAsync() {
+    if (!this.isLoadingDescription) {
+      const currentOpt = this.buildCurrentValue();
+      return new Promise(resolve => resolve(currentOpt));
+    }
+    return new Promise(resolve => {
+      let id = setInterval(() => {
+        if (!this.isLoadingDescription) {
+          clearInterval(id);
+          const currentOpt = this.buildCurrentValue();
+          resolve(currentOpt);
+        }
+      }, this.INTERVAL_TO_RETRY_ASYNC_VALUE);
+    });
+  }
+  /**
+  * Limpa o valor do campo de pesquisa
+  */
+  async clearValue() {
+    this.clearSearch();
+  }
+  /**
+  * Remove o foco do campo.
+  */
+  async setBlur() {
+    var _a, _b;
+    (_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.setBlur();
+    (_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.setBlur();
+  }
+  /**
+  * Retorna se o conteúdo é inválido.
+  */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  componentWillLoad() {
+    if (this.value && StringUtils$1.isEmpty(this.codeValue)) {
+      this.observeValue(this.value, undefined);
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this.el, this._textInputCodeValue);
+    CSSVarsUtils.applyVarsTextInput(this.el, this._textInputDescriptionValue);
+    this.initKeyboardManager();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+  }
+  clearSearch() {
+    this.value = null;
+  }
+  getCodLabel() {
+    var _a;
+    if (this.hideDescriptionInput) {
+      return this.label;
+    }
+    return (_a = this.codLabel) !== null && _a !== void 0 ? _a : "Cód.";
+  }
+  async normalizeCodeToDescriptionValue(valueToNormalize) {
+    if (!valueToNormalize) {
+      return "";
+    }
+    if (typeof valueToNormalize == 'string') {
+      try {
+        valueToNormalize = JSON.parse(valueToNormalize);
+        if ((valueToNormalize === null || valueToNormalize === void 0 ? void 0 : valueToNormalize.value) && !(valueToNormalize === null || valueToNormalize === void 0 ? void 0 : valueToNormalize.label)) {
+          return await this.loadDescriptionValueByCode(valueToNormalize === null || valueToNormalize === void 0 ? void 0 : valueToNormalize.value);
+        }
+      }
+      catch (e) {
+        return await this.loadDescriptionValueByCode(valueToNormalize);
+      }
+    }
+    //Se é diferente de objeto, temos que resolver a descrição
+    if (typeof valueToNormalize != 'object') {
+      return await this.loadDescriptionValueByCode(valueToNormalize);
+    }
+    return valueToNormalize === null || valueToNormalize === void 0 ? void 0 : valueToNormalize.label;
+  }
+  normalizeValueToCodeValue(valueToNormalize) {
+    if (!valueToNormalize) {
+      return undefined;
+    }
+    if (typeof valueToNormalize == 'string') {
+      try {
+        valueToNormalize = JSON.parse(valueToNormalize);
+      }
+      catch (e) {
+        return valueToNormalize;
+      }
+    }
+    if (typeof valueToNormalize != 'object') {
+      return valueToNormalize;
+    }
+    return valueToNormalize === null || valueToNormalize === void 0 ? void 0 : valueToNormalize.value;
+  }
+  async loadDescriptionValueByCode(codeValue) {
+    if (!this.optionLoader) {
+      console.warn("optionLoader não definido");
+      return "";
+    }
+    try {
+      this.isLoadingDescription = true;
+      const searchArgument = { mode: SearchMode$2.LOAD_DESCRIPTION, argument: codeValue };
+      const loadedOption = await this.optionLoader(searchArgument);
+      if (!loadedOption) {
+        return "";
+      }
+      return loadedOption.label;
+    }
+    finally {
+      this.isLoadingDescription = false;
+    }
+  }
+  handleCodeInputFocusOut() {
+    this.cancelSelection();
+    if (this.codeValue == this._textInputCodeValue.value)
+      return;
+    this.value = this._textInputCodeValue.value;
+  }
+  handleSearchClick() {
+    this.loadAdvancedSearch();
+  }
+  async loadAdvancedSearch() {
+    if (!this.optionLoader) {
+      console.warn("optionLoader não definido");
+      return;
+    }
+    const searchArgument = { mode: SearchMode$2.ADVANCED, argument: "" };
+    let selectedItem = undefined;
+    try {
+      selectedItem = await this.optionLoader(searchArgument, this.contextProperties);
+    }
+    catch (ignore) { }
+    if (!selectedItem)
+      return;
+    this.value = selectedItem;
+  }
+  buildCurrentValue() {
+    if (StringUtils$1.isEmpty(this.codeValue)) {
+      return undefined;
+    }
+    return {
+      value: this.codeValue,
+      label: this.descriptionValue
+    };
+  }
+  async handleTextInputChangeHandler(event) {
+    if (!this.searchDescriptionIsOpen) {
+      this._popover.show();
+    }
+    const argument = event.target.value;
+    await this.debounceLoaderOptions(argument);
+  }
+  async debounceLoaderOptions(argument) {
+    if (this._debounceSearch)
+      clearTimeout(this._debounceSearch);
+    return new Promise((resolve) => {
+      this._debounceSearch = setTimeout(async () => {
+        await this.processOptionsLoader(argument);
+        resolve();
+      }, this.SEARCH_DESCRIPTION_TIMEOUT);
+    });
+  }
+  async processOptionsLoader(argument) {
+    try {
+      this.showLoading = true;
+      const searchArgument = { mode: SearchMode$2.PREDICTIVE, argument };
+      this.visibleOptions = await this.optionLoader(searchArgument);
+    }
+    finally {
+      this.showLoading = false;
+    }
+  }
+  handleSelectItem(evt) {
+    const currentOpt = evt.detail;
+    this.value = currentOpt;
+    this._popover.hide();
+    window.requestAnimationFrame(() => {
+      var _a;
+      (_a = this._textInputDescriptionValue) === null || _a === void 0 ? void 0 : _a.setFocus({ selectText: true });
+    });
+  }
+  async handleArrowUp() {
+    if (!this.isOptionsVisible()) {
+      return;
+    }
+    await this._searchList.previousOption();
+  }
+  async handleArrowDown() {
+    if (!this.isOptionsVisible()) {
+      return;
+    }
+    await this._searchList.nextOption();
+  }
+  async selectCurrentItem() {
+    var _a;
+    await ((_a = this._searchList) === null || _a === void 0 ? void 0 : _a.selectCurrentItem());
+  }
+  async cancelSelection() {
+    var _a, _b, _c, _d;
+    if (this._textInputDescriptionValue && this._textInputDescriptionValue.value != ((_a = this.value) === null || _a === void 0 ? void 0 : _a.label)) {
+      this._textInputDescriptionValue.value = (_b = this.value) === null || _b === void 0 ? void 0 : _b.label;
+    }
+    await ((_c = this._searchList) === null || _c === void 0 ? void 0 : _c.cancelSelection());
+    (_d = this._popover) === null || _d === void 0 ? void 0 : _d.hide();
+  }
+  async handleInputTab() {
+    await this.cancelSelection();
+  }
+  async handleInputEsc() {
+    var _a;
+    await this.cancelSelection();
+    await ((_a = this._latestFocusedInputElement) === null || _a === void 0 ? void 0 : _a.setFocus({ selectText: true }));
+  }
+  async initKeyboardManager() {
+    this._keyboardManager = new KeyboardManager();
+    const opts = { element: this.el, propagate: true };
+    this._keyboardManager
+      .bind("ArrowUp", () => this.handleArrowUp(), opts)
+      .bind("ArrowDown", () => this.handleArrowDown(), opts)
+      .bind("Enter", () => this.selectCurrentItem(), opts)
+      .bind("Tab", () => this.handleInputTab(), opts)
+      .bind("Escape", () => this.handleInputEsc(), opts);
+  }
+  disconnectedCallback() {
+    this._keyboardManager
+      .unbind("ArrowUp")
+      .unbind("ArrowDown")
+      .unbind("Enter")
+      .unbind("Tab")
+      .unbind("Escape");
+  }
+  isOptionsVisible() {
+    return this._popover.opened;
+  }
+  setLatestFocusedInputElement(el) {
+    this._latestFocusedInputElement = el;
+  }
+  handleCodeInputFocus() {
+    this.setLatestFocusedInputElement(this._textInputCodeValue);
+  }
+  handleDescriptionInputFocus() {
+    this.setLatestFocusedInputElement(this._textInputDescriptionValue);
+  }
+  getRightIconElement() {
+    var _a, _b;
+    if (!this.ensureClearButtonVisible && (!this.value && !((_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.value) && !((_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.value))) {
+      return null;
+    }
+    return h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }));
+  }
+  getLeftIconElement() {
+    return h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handleSearchClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) : h("ez-icon", { iconName: "search" }));
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
+    return (h(Host, null, h("div", { class: "ez-search-plus__container" }, h("ez-text-input", { ref: elem => this._textInputCodeValue = elem, class: {
+        "ez-search-plus__code-input": true,
+        "ez-search-plus__code-input-no-border": !this.hideDescriptionInput,
+        "ez-search-plus__code-input-full": this.hideDescriptionInput
+      }, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, mode: this.mode, label: this.getCodLabel(), hasInvalid: !StringUtils$1.isEmpty(this.errorMessage), errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus() }, this.getLeftIconElement()), !this.hideDescriptionInput && h("div", { class: "description-input-container" }, h("ez-text-input", { ref: elem => this._textInputDescriptionValue = elem, tabIndex: -1, class: "ez-search-plus__text-input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, value: this.descriptionValue, onInput: event => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus() }, this.getRightIconElement()), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInputDescriptionValue, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: event => this.searchDescriptionIsOpen = event.detail }, h("ez-search-result-list", { ref: (ref) => this._searchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, showOptionValue: this.showOptionValue, onChangeValue: (evt) => this.handleSelectItem(evt) }))))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "value": ["observeValue"]
+  }; }
+  static get style() { return ezSearchPlusCss; }
+};
+
+const ezSearchResultListCss = ":host{--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--small, 6px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px)}.list-options{position:relative;z-index:var(--more-visible, 2);margin:var(--space--small) 0px;padding:0px;padding-inline-start:0px;box-sizing:border-box;width:100%;height:100%;max-height:350px;min-width:150px;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;margin:var(--space--medium) 0px;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-search__list-title--primary);border-top:3px solid transparent}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.preselected{background-color:var(--background--medium)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}";
+
+const EzSearchResultList$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.changeValue = createEvent(this, "changeValue", 7);
+    this._textEmptyList = "Nenhum resultado encontrado";
+    this._startHighlightTag = "<span class='card-item__highlight'>";
+    this._endHighlightTag = "</span>";
+    this.showLoading = undefined;
+    this.visibleOptions = [];
+    this.value = undefined;
+    this.showOptionValue = true;
+    this._preSelection = undefined;
+  }
+  async nextOption() {
+    const newPreSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this.visibleOptions.length - 1);
+    this.preSelectItemByIndex(newPreSelection);
+  }
+  async previousOption() {
+    const newPreSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
+    this.preSelectItemByIndex(newPreSelection);
+  }
+  preSelectItemByIndex(newIndex) {
+    this._preSelection = newIndex;
+    const option = this.visibleOptions[newIndex];
+    this.scrollToOption(option);
+  }
+  selectOption(newOption) {
+    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: newOption === null || newOption === void 0 ? void 0 : newOption.value, label: newOption === null || newOption === void 0 ? void 0 : newOption.label });
+    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value, label: newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label });
+    this.changeValue.emit(newOptionsFormatted);
+  }
+  createAndSelectOption(detail) {
+    let { key, title } = detail;
+    key = String(key !== null && key !== void 0 ? key : "");
+    const startHighlight = new RegExp(this._startHighlightTag, 'g');
+    const endHighlight = new RegExp(this._endHighlightTag, 'g');
+    title = StringUtils$1.decodeHtmlEntities(title);
+    const option = {
+      value: key === null || key === void 0 ? void 0 : key.replace(startHighlight, '').replace(endHighlight, ''),
+      label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
+    };
+    this.selectOption(option);
+  }
+  scrollToOption(opt) {
+    if (!(opt === null || opt === void 0 ? void 0 : opt.value) || !this._optionsList)
+      return;
+    window.requestAnimationFrame(() => {
+      var _a;
+      const currentValue = String((_a = opt === null || opt === void 0 ? void 0 : opt.value) !== null && _a !== void 0 ? _a : "");
+      const liElem = currentValue
+        ? this._optionsList.querySelector(`div#item_${currentValue.replace(/([ #;&,.+*~':"!^$[\]()=<>|/\\])/g, '\\$1')}`)
+        : undefined;
+      if (liElem) {
+        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    });
+  }
+  buildItem(opt, index) {
+    var _a;
+    opt.label = opt.label || opt.value;
+    const card = {
+      key: String((_a = opt.presentationValue) !== null && _a !== void 0 ? _a : ""),
+      title: opt.presentationLabel,
+      details: opt.details
+    };
+    return h("div", { style: { "height": "100%" }, class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.createAndSelectOption(card), onMouseOver: () => { this._preSelection = index; } }, h("ez-card-item", { item: card, compacted: true, enableKey: this.showOptionValue }));
+  }
+  async selectCurrentItem() {
+    this.selectOption(this.visibleOptions[this._preSelection]);
+  }
+  async cancelSelection() {
+    this.cancelPreselection();
+  }
+  cancelPreselection() {
+    this._preSelection = undefined;
+  }
+  canShowListOptions() {
+    return !this.showLoading && this.visibleOptions.length > 0;
+  }
+  render() {
+    return (h(Host, null, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading
+      && this.visibleOptions.length === 0
+      && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this._textEmptyList)), this.showLoading
+      && h("div", { class: "message" }, h("div", { class: "message__loading" })), this.canShowListOptions() && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
+  }
+  static get style() { return ezSearchResultListCss; }
+};
+
 const ezSidebarButtonCss = ":host{position:relative;--ez-sidebar-button--width:6px;--ez-sidebar-button--hover--width:12px;--ez-sidebar-button--height:96px;--ez-sidebar-navigator-button--z-index:var(--elevation--20, 20);--ez-sidebar-button--background-color--xlight:var(--background--xlight, #fff);--ez-sidebar-button--background-color--primary:var(--color--primary);--ez-sidebar-button--space--small:var(--space--small, 6px);--ez-sidebar-button--space--medium:var(--space--medium, 12px);--ez-sidebar-button--box-shadow:var(--shadow--small, 0px 0px 16px rgba(0, 38, 111, 0.07));--ez-sidebar-button--hover--box-shadow:var(--shadow--hard, 0px 0px 16px rgba(43, 58, 84, 0.24));--ez-sidebar-button--border--radius-small:var(--border--radius-small);--ez-sidebar-button--border--radius-medium:var(--border--radius-medium)}button{z-index:var(--ez-sidebar-navigator-button--z-index);position:absolute;display:flex;background:var(--ez-sidebar-button--background-color--xlight);border:0;border-radius:0 var(--ez-sidebar-button--border--radius-medium) var(--ez-sidebar-button--border--radius-medium) 0;box-shadow:var(--ez-sidebar-button--box-shadow);padding:0;cursor:pointer;align-items:center}span{width:var(--ez-sidebar-button--width);height:var(--ez-sidebar-button--height);margin:var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0;background:var(--ez-sidebar-button--background-color--primary);border-radius:0 var(--ez-sidebar-button--border--radius-small) var(--ez-sidebar-button--border--radius-small) 0}ez-icon{--ez-icon--color:var(--ez-sidebar-button--background-color--primary)}button:hover{box-shadow:var(--ez-sidebar-button--hover--box-shadow)}button:hover span{width:var(--ez-sidebar-button--hover--width);margin:var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0}";
 
 const EzSidebarButton$1 = class extends HTMLElement$1 {
@@ -78569,34 +79380,7 @@ const EzTextEdit$1 = class extends HTMLElement$1 {
   static get style() { return ezTextEditCss; }
 };
 
-/**
- * Aplica comportamento de elipses a um input caso o texto ultrapasse o tamanho disponível.
- *
- * @param inputElement A referência ao elemento input (HTMLInputElement).
- */
-const applyEllipsisToInput = (inputElement) => {
-  if (!inputElement || !inputElement.style) {
-    console.error('[applyEllipsisToInput] Referência ao elemento input é inválida.');
-    return;
-  }
-  inputElement.style.textOverflow = 'ellipsis';
-  inputElement.style.overflow = 'hidden';
-  inputElement.style.whiteSpace = 'nowrap';
-  const adjustEllipsis = () => {
-    const value = inputElement.value || '';
-    const isOverflowing = inputElement.scrollWidth > inputElement.clientWidth;
-    if (isOverflowing) {
-      inputElement.setAttribute('title', value);
-    }
-    else {
-      inputElement.removeAttribute('title');
-    }
-  };
-  inputElement.addEventListener('input', adjustEllipsis);
-  adjustEllipsis();
-};
-
-const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:48px;--ez-text-input--height--slim:32px;--ez-text-input__min-width:0px;--ez-text-input__max-width:100%;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--medium, 400);--ez-text-input--color:var(--title--primary, #2B3A54);--ez-text-input__margin-bottom:var(--space--small);--ez-text-input__input--background-color:var(--background--light, #ffffff);--ez-text-input__input--border:var(--border--small, 1px solid);--ez-text-input__input--border-color:var(--color--strokes,#DCE0E8);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--background--medium, #F0F3F7);--ez-text-input__input--disabled--color:var(--text--primary, #626E82);--ez-text-input__input--error--border-color:var(--color-alert--error-800,#BD0025);--ez-text-input__input--noborder-color:white;--ez-text-input__input--padding:var(--space--medium, 6px);--ez-text-input__placeholder--color:var(--text--secondary, #a2abb9);--ez-text-input__tooltip_icon--error--color:var(--color-alert--error-800,#BD0025);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;--ez-text-input__input--focus--icon-color:var(--title--primary, #2B3A54);--ez-text-input__input--disabled--focus--icon-color:var(--text--primary, #626E82);--ez-text-input__tooltip-icon--spacing:var(--space--large);--ez-text-input__tooltip-icon---width:var(--space--large);--ez-text-input__tooltip-icon---horizontal-margin:var(--space--medium, 12px);--ez-text-input__tooltip-icon---vertical-margin:10px;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width);min-width:var(--ez-text-input__min-width);max-width:var(--ez-text-input__max-width)}:host(.grid_editor){--ez-text-input--height--slim:25px}input{width:100%;box-sizing:border-box;height:var(--ez-text-input--height);border-radius:var(--ez-text-input--border-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color);font-weight:var(--ez-text-input--font-weight);padding:var(--ez-text-input__input--padding);margin-bottom:var(--ez-text-input__margin-bottom)}input.no--margin{--ez-text-input__margin-bottom:0}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}input:focus{outline:none;border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--left.hasError{padding-right:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.icon--right.hasError{padding-right:calc(var(--ez-text-input__icon--width) + var(--ez-text-input__tooltip-icon--spacing))}input.hasError{color:var(--ez-text-input--color);border-color:var(--ez-text-input__input--error--border-color);padding-right:calc(var(--ez-text-input__tooltip-icon---width) + (2*var(--ez-text-input__tooltip-icon---horizontal-margin)))}input:disabled.hasError{color:var(--ez-text-input__input--disabled--color)}input.text--right{text-align:right}input:disabled,input:read-only{cursor:not-allowed}.hasError{color:var(--ez-text-input__tooltip_icon--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label.hasError{width:calc(100% - 2*(var(--ez-text-input__tooltip-icon--spacing)))}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}.input--slim{padding-top:var(--space--small, 3px);padding-bottom:var(--space--small, 3px);height:var(--ez-text-input--height--slim)}.input__slim--title{font-size:16px;font-weight:bold}.input--slim::-webkit-input-placeholder,.input--slim:-moz-placeholder,.input--slim::-moz-placeholder,.input--slim:-ms-input-placeholder,.input--slim::placeholder{font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input__placeholder--color)}.input--slim:disabled::-webkit-input-placeholder,.input--slim:disabled:-moz-placeholder,.input--slim:disabled::-moz-placeholder,.input--slim:disabled:-ms-input-placeholder,.input--slim:disabled::placeholder{color:var(--ez-text-input__input--disabled--color)}input.input__slim--noborder{box-shadow:0 0 0 0;border:0 none;outline:0;background:var(--ez-text-input__input--noborder-color)}ez-icon.tooltip-icon{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;width:var(--ez-text-input__tooltip-icon---width);height:22px;margin:var(--ez-text-input__tooltip-icon---vertical-margin) var(--ez-text-input__tooltip-icon---horizontal-margin);top:0;right:0;z-index:var(--elevation--4);border-radius:var(--ez-text-input--border-radius)}ez-icon.tooltip-icon.rightIconSlot{right:var(--ez-text-input__tooltip-icon--spacing)}ez-icon.tooltip-icon.hasError{--ez-icon--color:var(--ez-text-input__tooltip_icon--error--color)}";
+const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:30px;--ez-text-input--height--slim:32px;--ez-text-input__min-width:0px;--ez-text-input__max-width:100%;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--border-top-left-radius:var(--ez-text-input--border-radius);--ez-text-input--border-bottom-left-radius:var(--ez-text-input--border-radius);--ez-text-input--border-top-right-radius:var(--ez-text-input--border-radius);--ez-text-input--border-bottom-right-radius:var(--ez-text-input--border-radius);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--medium, 400);--ez-text-input--color:var(--title--primary, #2B3A54);--ez-text-input__margin-bottom:var(--space--small);--ez-text-input__input--background-color:var(--background--light, #ffffff);--ez-text-input__input--border:var(--border--small, 1px solid);--ez-text-input__input--border-color:var(--color--strokes,#DCE0E8);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--background--medium, #F0F3F7);--ez-text-input__input--disabled--color:var(--text--primary, #626E82);--ez-text-input__input--error--border-color:var(--color-alert--error-800,#BD0025);--ez-text-input__input--noborder-color:white;--ez-text-input__input--padding:var(--space--medium, 6px);--ez-text-input__placeholder--color:var(--text--secondary, #a2abb9);--ez-text-input__tooltip_icon--error--color:var(--color-alert--error-800,#BD0025);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;--ez-text-input__input--focus--icon-color:var(--title--primary, #2B3A54);--ez-text-input__input--disabled--focus--icon-color:var(--text--primary, #626E82);--ez-text-input__tooltip-icon--spacing:var(--space--large);--ez-text-input__tooltip-icon---width:var(--space--large);--ez-text-input__tooltip-icon---horizontal-margin:var(--space--medium, 12px);--ez-text-input__tooltip-icon---vertical-margin:10px;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width);min-width:var(--ez-text-input__min-width);max-width:var(--ez-text-input__max-width)}:host(.grid_editor){--ez-text-input--height--slim:25px}input{width:100%;box-sizing:border-box;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;height:var(--ez-text-input--height);border-top-left-radius:var(--ez-text-input--border-top-left-radius);border-bottom-left-radius:var(--ez-text-input--border-bottom-left-radius);border-top-right-radius:var(--ez-text-input--border-top-right-radius);border-bottom-right-radius:var(--ez-text-input--border-bottom-right-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color);font-weight:var(--ez-text-input--font-weight);padding:var(--ez-text-input__input--padding);margin-bottom:var(--ez-text-input__margin-bottom)}input.no--margin{--ez-text-input__margin-bottom:0}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}input:focus{outline:none;border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--left.hasError{padding-right:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.icon--right.hasError{padding-right:calc(var(--ez-text-input__icon--width) + var(--ez-text-input__tooltip-icon--spacing))}input.hasError{color:var(--ez-text-input--color);border-color:var(--ez-text-input__input--error--border-color);padding-right:calc(var(--ez-text-input__tooltip-icon---width) + (2*var(--ez-text-input__tooltip-icon---horizontal-margin)))}input:disabled.hasError{color:var(--ez-text-input__input--disabled--color)}input.text--right{text-align:right}input:disabled,input:read-only{cursor:not-allowed}.hasError{color:var(--ez-text-input__tooltip_icon--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label.hasError{width:calc(100% - 2*(var(--ez-text-input__tooltip-icon--spacing)))}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}.input--slim{padding-top:var(--space--small, 3px);padding-bottom:var(--space--small, 3px);height:var(--ez-text-input--height--slim)}.input__slim--title{font-size:16px;font-weight:bold}.input--slim::-webkit-input-placeholder,.input--slim:-moz-placeholder,.input--slim::-moz-placeholder,.input--slim:-ms-input-placeholder,.input--slim::placeholder{font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input__placeholder--color)}.input--slim:disabled::-webkit-input-placeholder,.input--slim:disabled:-moz-placeholder,.input--slim:disabled::-moz-placeholder,.input--slim:disabled:-ms-input-placeholder,.input--slim:disabled::placeholder{color:var(--ez-text-input__input--disabled--color)}input.input__slim--noborder{box-shadow:0 0 0 0;border:0 none;outline:0;background:var(--ez-text-input__input--noborder-color)}ez-icon.tooltip-icon{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;width:var(--ez-text-input__tooltip-icon---width);height:22px;margin:var(--ez-text-input__tooltip-icon---vertical-margin) var(--ez-text-input__tooltip-icon---horizontal-margin);top:0;right:0;z-index:var(--elevation--4);border-radius:var(--ez-text-input--border-radius)}ez-icon.tooltip-icon.rightIconSlot{right:var(--ez-text-input__tooltip-icon--spacing)}ez-icon.tooltip-icon.hasError{--ez-icon--color:var(--ez-text-input__tooltip_icon--error--color)}";
 
 const EzTextInput$1 = class extends HTMLElement$1 {
   constructor() {
@@ -78608,6 +79392,7 @@ const EzTextInput$1 = class extends HTMLElement$1 {
     this.value = undefined;
     this.enabled = true;
     this.errorMessage = undefined;
+    this.hasInvalid = false;
     this.mask = undefined;
     this.cleanValueMask = false;
     this.canShowError = true;
@@ -78618,17 +79403,26 @@ const EzTextInput$1 = class extends HTMLElement$1 {
     this.autoFocus = false;
     this.hasRightSlotContent = false;
   }
+  observeHasInvalid() {
+    if (!this._inputElem)
+      return;
+    if (this.hasInvalid) {
+      this._inputElem.classList.add("hasError");
+    }
+    else {
+      this._inputElem.classList.remove("hasError");
+    }
+  }
   observeErrorMessage() {
     if (this._inputElem) {
       this.isInvalid().then((hasError) => {
-        var _a;
         if (hasError) {
           this._inputElem.classList.add("hasError");
-          (_a = this._tooltipPositioningObserver) === null || _a === void 0 ? void 0 : _a.observe(this._inputElem);
+          // this._tooltipPositioningObserver?.observe(this._inputElem);
         }
         else {
           this._inputElem.classList.remove("hasError");
-          this.removeGlobalTooltip();
+          // this.removeGlobalTooltip();
         }
       });
     }
@@ -78836,35 +79630,8 @@ const EzTextInput$1 = class extends HTMLElement$1 {
     }
     this.adjustColorContentSlot("var(--ez-text-input__input--focus--icon-color)");
   }
-  renderGlobalTooltip() {
-    const tooltip = document.createElement('ez-tooltip');
-    tooltip.errorMessage = this.errorMessage;
-    tooltip.anchoringElement = this._tooltipIconElem;
-    document.body.appendChild(tooltip);
-    this._tooltipElem = tooltip;
-  }
-  removeGlobalTooltip() {
-    var _a;
-    if (!this._tooltipElem)
-      return;
-    this._tooltipElem.remove();
-    this._tooltipElem = undefined;
-    (_a = this._tooltipPositioningObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this._inputElem);
-  }
-  createTooltipPositioningObserver() {
-    const observer = new ResizeObserver(() => {
-      if (!this._tooltipElem)
-        return;
-      if (!this._tooltipIconElem)
-        return;
-      clearTimeout(this._observerDebounceTimeout);
-      this._observerDebounceTimeout = setTimeout(async () => {
-        if (this._tooltipElem) {
-          await this._tooltipElem.positionTooltip();
-        }
-      }, 200);
-    });
-    this._tooltipPositioningObserver = observer;
+  getValue() {
+    return this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value;
   }
   //---------------------------------------------
   // Lifecycle web component
@@ -78892,7 +79659,7 @@ const EzTextInput$1 = class extends HTMLElement$1 {
     }
   }
   componentDidLoad() {
-    var _a, _b;
+    var _a;
     this.observeErrorMessage();
     this.observeMask();
     this.adjustFloatingLabel();
@@ -78906,40 +79673,17 @@ const EzTextInput$1 = class extends HTMLElement$1 {
       var _a;
       this._inputElem.setSelectionRange(0, (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value.length);
     });
-    this.createTooltipPositioningObserver();
-    if (this._inputElem) {
-      (_b = this._tooltipPositioningObserver) === null || _b === void 0 ? void 0 : _b.observe(this._inputElem);
-      applyEllipsisToInput(this._inputElem);
-    }
-  }
-  componentDidRender() {
-    if (this._tooltipIconElem && !this._tooltipElem) {
-      this.renderGlobalTooltip();
-    }
-  }
-  componentDidUpdate() {
-    if (this._tooltipIconElem && this._tooltipElem) {
-      this._tooltipElem.positionTooltip();
-    }
-  }
-  disconnectedCallback() {
-    if (this._tooltipPositioningObserver) {
-      this._tooltipPositioningObserver.disconnect();
-    }
-    if (this._observerDebounceTimeout) {
-      clearTimeout(this._observerDebounceTimeout);
-    }
-    this.removeGlobalTooltip();
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : null }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
       h("label", { ref: (el) => this._labelElem = el, class: `${this.enabled ? "input__label" : "input__label input__label--disabled"} ${this.errorMessage ? "hasError" : ""}`, onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), this.canShowError && this.mode != "slim" && this.errorMessage &&
-      h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? "hasError" : ""} ${this.hasRightSlotContent ? "rightIconSlot" : ""}`, "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip-icon"), ref: (el) => this._tooltipIconElem = el, iconName: "alert-circle" }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }, " ")));
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.getValue(), disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("ez-tooltip", { anchoringElement: this._hostElement, message: this.getValue(), minWidth: 30 }), this.canShowError && this.mode != "slim" && this.errorMessage &&
+      h("ez-tooltip", { type: "error", message: this.errorMessage }, h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? "hasError" : ""} ${this.hasRightSlotContent ? "rightIconSlot" : ""}`, "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip-icon"), ref: (el) => this._tooltipIconElem = el, iconName: "alert-circle" })), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }, " ")));
   }
   get _hostElement() { return this; }
   static get watchers() { return {
+    "hasInvalid": ["observeHasInvalid"],
     "errorMessage": ["observeErrorMessage"],
     "mask": ["observeMask"],
     "value": ["observeValue"]
@@ -79209,52 +79953,126 @@ const EzToast$1 = class extends HTMLElement$1 {
   static get style() { return ezToastCss; }
 };
 
-const ezTooltipCss = ":host{position:absolute;z-index:var(--elevation--24);background:var(--color-alert--error-800, #BD0025);padding:var(--space--extra-small, 3px) var(--space--small, 6px);color:var(--color--inverted);border-radius:var(--border--radius-small);display:none;transform:translateX(calc(-50% + 12px)) translateY(8px)}.tooltip::after{--triangle-size:8px;content:'';right:50%;border:var(--triangle-size) solid transparent;border-bottom-color:var(--color-alert--error-800, #BD0025);position:absolute;transform:translateX(calc(50%)) translateY(-100%)}";
+const ezTooltipCss = ":host{--triangle-size:8px}.tooltip{position:absolute;z-index:var(--elevation--24);padding:var(--space--extra-small, 3px) var(--space--small, 6px);border-radius:var(--border--radius-small);box-sizing:border-box;font-family:var(--font-pattern\t, 'Roboto', sans-serif);font-size:var(--text--small, 12px);font-weight:var(--text-weight--medium, 400);text-align:center;display:none}.arrow{position:absolute;width:var(--triangle-size);height:var(--triangle-size);transform:rotate(45deg)}.default-tooltip{background:var(--title--primary, #2b3a54);color:var(--color--inverted)}.default-tooltip .arrow{background:var(--title--primary, #2b3a54)}.error-tooltip{background:var(--color-alert--error-800, #BD0025);color:var(--color--error-200, #F7E0E5)}.error-tooltip .arrow{background:var(--color-alert--error-800, #BD0025)}.success-tooltip{background:var(--color--success, #00cb94);color:var(--color--success-200, #EBFFFA)}.success-tooltip .arrow{background:var(--color--success, #00cb94)}.warning-tooltip{background:var(--color--warning, #f2d410);color:var(--color--warning-200, #FDF8D8)}.warning-tooltip .arrow{background:var(--color--warning, #f2d410)}";
 
 const EzTooltip$1 = class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.errorMessage = undefined;
+    this._opened = false;
+    this.message = undefined;
     this.anchoringElement = undefined;
+    this.placement = 'bottom';
+    this.gapOptions = { horizontalGap: 0, verticalGap: 0 };
+    this.type = 'default';
+    this.debouncingTime = 500;
+    this.active = true;
+    this.minWidth = 150;
   }
-  /**
-   * TODO: Implementar a possibilidade de definir a posição do tooltip.
-   */
-  // @Prop() tooltipSide: 'left' | 'right' | 'top' | 'bottom' = 'bottom';
-  /**
-   * Reposiciona o tooltip de acordo com a posição do elemento de ancoragem.
-   */
-  async positionTooltip() {
-    const anchorRect = this.anchoringElement.getBoundingClientRect();
-    const top = (anchorRect.bottom + window.scrollY);
-    const left = (anchorRect.left + window.scrollX);
-    this._element.style.top = `${top}px`;
-    this._element.style.left = `${left}px`;
+  watchAnchoringElement(newValue, oldValue) {
+    if (newValue) {
+      this.setEvents(newValue);
+      this.removeEvents(oldValue);
+    }
   }
-  setEvents() {
-    window.addEventListener('scroll', () => {
-      this.positionTooltip();
-    }, { capture: true });
-    window.addEventListener('resize', () => {
-      this.positionTooltip();
-    }, { capture: true });
-    this.anchoringElement.addEventListener('mouseover', () => {
-      this._element.style.display = 'block';
+  watchMessage(newValue) {
+    if (!newValue) {
+      this.closeTooltip();
+      return;
+    }
+    this.updatePosition();
+  }
+  openTooltip() {
+    if (this.message && this.active) {
+      if (this._debouncingTimeout) {
+        clearTimeout(this._debouncingTimeout);
+      }
+      this._debouncingTimeout = setTimeout(() => {
+        this._opened = true;
+        this._tooltipElement.style.display = 'block';
+        this.updatePosition();
+      }, this.debouncingTime);
+    }
+  }
+  closeTooltip() {
+    clearTimeout(this._debouncingTimeout);
+    this._tooltipElement.style.display = 'none';
+    this._opened = false;
+  }
+  async updatePosition(element = this.anchoringElement) {
+    if (!element || !this._opened) {
+      return;
+    }
+    await computePosition(element, this._tooltipElement, {
+      placement: this.placement,
+      middleware: [
+        offset(5),
+        flip(),
+        shift(),
+        arrow({ element: this._arrowElement })
+      ],
+    }).then(({ x, y, placement, middlewareData }) => {
+      const newTop = placement.includes("bottom") ? y + this.gapOptions.verticalGap : y - this.gapOptions.verticalGap;
+      const newLeft = placement.includes("start") ? x + this.gapOptions.horizontalGap : x - this.gapOptions.horizontalGap;
+      Object.assign(this._tooltipElement.style, {
+        top: `${newTop}px`,
+        left: `${newLeft}px`,
+      });
+      if (middlewareData.arrow) {
+        const { x } = middlewareData.arrow;
+        const onBottom = placement.includes("bottom");
+        Object.assign(this._arrowElement.style, {
+          left: `${x}px`,
+          top: onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+          bottom: !onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
+        });
+      }
     });
-    this.anchoringElement.addEventListener('mouseout', () => {
-      this._element.style.display = 'none';
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    this.anchoringElement = content;
+  }
+  setEvents(element = this.anchoringElement) {
+    if (!element) {
+      return;
+    }
+    element.addEventListener('mouseenter', () => {
+      this.openTooltip();
+    });
+    element.addEventListener('mouseleave', () => {
+      this.closeTooltip();
+    });
+  }
+  removeEvents(element = this.anchoringElement) {
+    if (!element) {
+      return;
+    }
+    element.removeEventListener('mouseenter', () => {
+      this.openTooltip();
+    });
+    element.removeEventListener('mouseleave', () => {
+      this.closeTooltip();
     });
   }
   componentDidLoad() {
-    this.positionTooltip();
     this.setEvents();
   }
   render() {
-    return (h("div", { inert: true, class: "tooltip", role: "tooltip", "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip") }, this.errorMessage));
+    return (h(Fragment, null, h("div", Object.assign({ ref: ref => this._tooltipElement = ref }, { inert: true }, { class: {
+        "tooltip": true,
+        [`${this.type}-tooltip`]: true,
+      }, style: {
+        minWidth: `${this.minWidth}px`
+      }, role: "tooltip", "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip") }), this.message, h("div", { ref: ref => this._arrowElement = ref, class: "arrow" })), h("slot", { onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
   }
   get _element() { return this; }
+  static get watchers() { return {
+    "anchoringElement": ["watchAnchoringElement"],
+    "message": ["watchMessage"]
+  }; }
   static get style() { return ezTooltipCss; }
 };
 
@@ -80542,7 +81360,7 @@ const EzChart = /*@__PURE__*/proxyCustomElement(EzChart$1, [1,"ez-chart",{"type"
 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",{"limitCharsToSearch":[2,"limit-chars-to-search"],"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"stopPropagateEnterKeyEvent":[4,"stop-propagate-enter-key-event"],"canShowError":[516,"can-show-error"],"mode":[513],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"autoFocus":[4,"auto-focus"],"isOpen":[32],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"_textInputReady":[32]}]);
+const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"limitCharsToSearch":[2,"limit-chars-to-search"],"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"stopPropagateEnterKeyEvent":[4,"stop-propagate-enter-key-event"],"canShowError":[516,"can-show-error"],"mode":[513],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"autoFocus":[4,"auto-focus"],"isOpen":[32],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32]}]);
 const EzComboBoxList = /*@__PURE__*/proxyCustomElement(EzComboBoxList$1, [1,"ez-combo-box-list",{"showLoading":[4,"show-loading"],"visibleOptions":[16],"textEmptyList":[1,"text-empty-list"],"showOptionValue":[4,"show-option-value"],"preSelection":[2,"pre-selection"],"maxWidth":[2,"max-width"],"width":[2],"onOptionSelect":[16],"onOptionHover":[16]},[[0,"keydown","handleKeyDown"]]]);
 const EzCustomFormInput = /*@__PURE__*/proxyCustomElement(EzCustomFormInput$1, [2,"ez-custom-form-input",{"customEditor":[16],"formViewField":[16],"value":[1032],"detailContext":[1,"detail-context"],"builderFallback":[16],"selectedRecord":[16],"gui":[32]}]);
 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"],"autoFocus":[4,"auto-focus"]}]);
@@ -80552,8 +81370,8 @@ const EzDoubleList = /*@__PURE__*/proxyCustomElement(EzDoubleList$1, [2,"ez-doub
 const EzDropdown = /*@__PURE__*/proxyCustomElement(EzDropdown$1, [1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]},[[4,"click","handleClickOutside"]]]);
 const EzFileItem = /*@__PURE__*/proxyCustomElement(EzFileItem$1, [1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]);
 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"],"autoFocus":[4,"auto-focus"]}]);
-const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"fieldToFocus":[1,"field-to-focus"],"onlyStaticFields":[4,"only-static-fields"],"_fieldsProps":[32]}]);
-const EzFormView = /*@__PURE__*/proxyCustomElement(EzFormView$1, [2,"ez-form-view",{"fields":[16],"selectedRecord":[16],"_customEditors":[32]}]);
+const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"fieldToFocus":[1,"field-to-focus"],"onlyStaticFields":[4,"only-static-fields"],"_fieldsProps":[32],"_singleColumn":[32]}]);
+const EzFormView = /*@__PURE__*/proxyCustomElement(EzFormView$1, [2,"ez-form-view",{"fields":[16],"selectedRecord":[16],"singleColumn":[4,"single-column"],"_customEditors":[32]}]);
 const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"enableLockManagerLoadingComp":[4,"enable-lock-manager-loading-comp"],"enableLockManagerTaskbarClick":[4,"enable-lock-manager-taskbar-click"],"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"],"autoFocus":[4,"auto-focus"],"paginationCounterMode":[1,"pagination-counter-mode"],"enableGridInsert":[4,"enable-grid-insert"],"enableContinuousInsert":[4,"enable-continuous-insert"],"suppressCheckboxColumn":[4,"suppress-checkbox-column"],"outlineMode":[4,"outline-mode"],"enableRowTableStriped":[4,"enable-row-table-striped"],"compact":[4],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_isAllSelection":[32],"_currentPageSelected":[32],"_selectionCount":[32],"_hasLeftButtons":[32],"_customFormatters":[32]},[[0,"ezSelectionChange","onSelectionChange"],[2,"click","handleClick"]]]);
 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"]}]);
@@ -80570,6 +81388,8 @@ const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size"
 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],"contextProperties":[8,"context-properties"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"stopPropagateEnterKeyEvent":[4,"stop-propagate-enter-key-event"],"mode":[513],"canShowError":[516,"can-show-error"],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"ignoreLimitCharsToSearch":[4,"ignore-limit-chars-to-search"],"options":[1040],"suppressSearch":[4,"suppress-search"],"ensureClearButtonVisible":[4,"ensure-clear-button-visible"],"suppressPreLoad":[4,"suppress-pre-load"],"autoFocus":[4,"auto-focus"],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_showLoadingDescription":[32],"_criteria":[32]}]);
+const EzSearchPlus = /*@__PURE__*/proxyCustomElement(EzSearchPlus$1, [1,"ez-search-plus",{"value":[1544],"enabled":[1540],"disableCodeInput":[1540,"disable-code-input"],"disableDescriptionInput":[1540,"disable-description-input"],"label":[1537],"codLabel":[1537,"cod-label"],"hideDescriptionInput":[1540,"hide-description-input"],"canShowError":[516,"can-show-error"],"errorMessage":[1537,"error-message"],"mode":[513],"contextProperties":[8,"context-properties"],"optionLoader":[16],"showOptionValue":[4,"show-option-value"],"stopPropagateEnterKeyEvent":[4,"stop-propagate-enter-key-event"],"autoFocus":[4,"auto-focus"],"showSelectedValue":[4,"show-selected-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"ignoreLimitCharsToSearch":[4,"ignore-limit-chars-to-search"],"suppressSearch":[4,"suppress-search"],"suppressPreLoad":[4,"suppress-pre-load"],"ensureClearButtonVisible":[4,"ensure-clear-button-visible"],"descriptionValue":[32],"codeValue":[32],"isLoadingDescription":[32],"searchDescriptionIsOpen":[32],"visibleOptions":[32],"showLoading":[32]}]);
+const EzSearchResultList = /*@__PURE__*/proxyCustomElement(EzSearchResultList$1, [1,"ez-search-result-list",{"showLoading":[4,"show-loading"],"visibleOptions":[16],"value":[1],"showOptionValue":[4,"show-option-value"],"_preSelection":[32]}]);
 const EzSidebarButton = /*@__PURE__*/proxyCustomElement(EzSidebarButton$1, [1,"ez-sidebar-button"]);
 const EzSidebarNavigator = /*@__PURE__*/proxyCustomElement(EzSidebarNavigator$1, [1,"ez-sidebar-navigator",{"type":[1],"mode":[1025],"size":[1],"isResponsive":[4,"is-responsive"],"titleMenu":[1,"title-menu"],"showCollapseMenu":[4,"show-collapse-menu"],"showFixedButton":[4,"show-fixed-button"],"open":[32]}]);
 const EzSkeleton = /*@__PURE__*/proxyCustomElement(EzSkeleton$1, [0,"ez-skeleton",{"count":[2],"variant":[1],"width":[1],"height":[1],"marginBottom":[1,"margin-bottom"],"animation":[1]}]);
@@ -80579,10 +81399,10 @@ const EzSplitPanel = /*@__PURE__*/proxyCustomElement(SplitPanel, [0,"ez-split-pa
 const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]);
 const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"enableResize":[516,"enable-resize"],"autoRows":[516,"auto-rows"],"autoFocus":[4,"auto-focus"]}]);
 const EzTextEdit = /*@__PURE__*/proxyCustomElement(EzTextEdit$1, [1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32]}]);
-const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"cleanValueMask":[4,"clean-value-mask"],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"password":[4],"autoFocus":[4,"auto-focus"],"hasRightSlotContent":[32]}]);
+const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"hasInvalid":[1540,"has-invalid"],"mask":[1],"cleanValueMask":[4,"clean-value-mask"],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"password":[4],"autoFocus":[4,"auto-focus"],"hasRightSlotContent":[32]}]);
 const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"canShowError":[516,"can-show-error"],"autoFocus":[4,"auto-focus"]}]);
 const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"]}]);
-const EzTooltip = /*@__PURE__*/proxyCustomElement(EzTooltip$1, [1,"ez-tooltip",{"errorMessage":[1,"error-message"],"anchoringElement":[16]}]);
+const EzTooltip = /*@__PURE__*/proxyCustomElement(EzTooltip$1, [1,"ez-tooltip",{"message":[1],"anchoringElement":[16],"placement":[1],"gapOptions":[16],"type":[1],"debouncingTime":[2,"debouncing-time"],"active":[4],"minWidth":[2,"min-width"]}]);
 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"]);
@@ -80633,6 +81453,8 @@ const defineCustomElements = (opts) => {
   EzRadioButton,
   EzScroller,
   EzSearch,
+  EzSearchPlus,
+  EzSearchResultList,
   EzSidebarButton,
   EzSidebarNavigator,
   EzSkeleton,
@@ -80660,4 +81482,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzComboBoxList, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDoubleList, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopoverCore, EzPopoverPlus, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSidebarNavigator, EzSkeleton, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTooltip, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, SearchList, defineCustomElements };
+export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzComboBoxList, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDoubleList, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopoverCore, EzPopoverPlus, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSearchPlus, EzSearchResultList, EzSidebarButton, EzSidebarNavigator, EzSkeleton, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTooltip, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, SearchList, defineCustomElements };