@sankhyalabs/ezui 2.2.4 → 2.3.1

package/dist/custom-elements/index.js

@@ -826,7 +826,7 @@ let EzChip$1 = class extends HTMLElement$1 {
     if (this._containerElem) {
       this.observeValue();
       this.observeEnabled();
-      this._containerElem.setAttribute("data-element-id", 'ezChip_internal_button');
+      this._containerElem.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, 'ezChip_internal_button');
       ElementIDUtils.addIDInfo(this._containerElem);
     }
   }
@@ -1331,12 +1331,6 @@ let EzComboBox$1 = class extends HTMLElement$1 {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
     this.setInputValue(false);
-    if (this.el) {
-      ElementIDUtils.addIDInfo(this.el, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this.el.getAttribute("data-element-id") });
-      }
-    }
   }
   //---------------------------------------------
   // Event handlers
@@ -1429,7 +1423,8 @@ let EzComboBox$1 = class extends HTMLElement$1 {
   }
   render() {
     var _a;
-    return (h(Host, null, h("ez-text-input", { class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })), this.searchMode && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })), this.searchMode && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
       ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
       : undefined), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("div", { class: "list-options", ref: elem => this._optionsList = elem }, this._visibleOptions.length === 0
       && h("div", { class: "message" }, !this._showLoading && h("span", { class: "message__no-result" }, this._textEmptyList), this._showLoading && h("div", { class: "message__loading" })), this.showOptionValue
@@ -1588,18 +1583,10 @@ let EzDateInput$1 = class extends HTMLElement$1 {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-      if (this._calendar) {
-        ElementIDUtils.addIDInfo(this._calendar, 'internal_calendar', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
-    return (h(Host, null, h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -1803,18 +1790,10 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-      if (this._calendar) {
-        ElementIDUtils.addIDInfo(this._calendar, 'internal_calendar', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
-    return (h(Host, null, h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick() }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick() }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "calendar"), onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -2026,15 +2005,10 @@ let EzFilterInput$1 = class extends HTMLElement$1 {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
-    return (h("ez-text-input", { ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.changeValue(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, loading: this.loading, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.changeValue(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, loading: this.loading, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -2986,7 +2960,7 @@ let EzForm$1 = class extends HTMLElement$1 {
       const idTabSelector = `${this._dataElementIdEzForm}_internal_tabSelector`;
       result.push(h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
     }
-    const idFormSheet = `${this._dataElementIdEzForm}_${StringUtils$1.toCamelCase(currentSheet.label)}`;
+    const idFormSheet = `${this._dataElementIdEzForm}_${StringUtils$1.replaceAccentuatedChars(StringUtils$1.toCamelCase(currentSheet.label), false)}`;
     result.push(h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
     return result;
   }
@@ -3064,7 +3038,7 @@ let EzForm$1 = class extends HTMLElement$1 {
   }
   buildIdTabSelector(tabs) {
     if (tabs) {
-      tabs.forEach(tab => tab["data-element-id"] = `${this._dataElementIdEzForm}_${StringUtils$1.toCamelCase(tab.label)}`);
+      tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = `${this._dataElementIdEzForm}_${StringUtils$1.toCamelCase(tab.label)}`);
     }
     return tabs;
   }
@@ -117869,6 +117843,7 @@ class AgGridController {
         sortingOrder: ['desc', 'asc', null],
         columnDefs: this._colDefs,
         blockLoadDebounceMillis: this.BLOCK_LOAD_DEBOUNCE,
+        navigateToNextCell: this.navigateToNextCell.bind(this),
         getRowNodeId: this._dataUnit ? (params) => typeof params === "string" ? params : params[this._idAttribName] : undefined,
         getMainMenuItems: (params) => {
           const column = params.column;
@@ -117908,6 +117883,45 @@ class AgGridController {
   getRowHeight() {
     return this.DEFAULT_ROW_HEIGHT;
   }
+  navigateToNextCell(params) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    switch (params.key) {
+      case 'ArrowUp':
+        if (((_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.hasPrevious()) === false) {
+          return null;
+        }
+        this._gridOptions.api.deselectAll();
+        if (((_b = params.nextCellPosition) === null || _b === void 0 ? void 0 : _b.rowIndex) < 0) {
+          (_c = this._dataUnit) === null || _c === void 0 ? void 0 : _c.previousRecord();
+          return null;
+        }
+        else {
+          (_d = this._dataUnit) === null || _d === void 0 ? void 0 : _d.setSelectionByIndex([params.nextCellPosition.rowIndex]);
+          return params.nextCellPosition;
+        }
+      case 'ArrowDown':
+        if (((_e = this._dataUnit) === null || _e === void 0 ? void 0 : _e.hasNext()) === false) {
+          return null;
+        }
+        this._gridOptions.api.deselectAll();
+        if ((_f = params.nextCellPosition) === null || _f === void 0 ? void 0 : _f.rowIndex) {
+          (_g = this._dataUnit) === null || _g === void 0 ? void 0 : _g.setSelectionByIndex([params.nextCellPosition.rowIndex]);
+        }
+        else {
+          (_h = this._dataUnit) === null || _h === void 0 ? void 0 : _h.nextRecord();
+        }
+        return params.nextCellPosition;
+      case "ArrowLeft":
+      case "ArrowRight":
+        if (((_j = params.nextCellPosition) === null || _j === void 0 ? void 0 : _j.column.colDef.headerName) !== "") {
+          return params.nextCellPosition;
+        }
+        else {
+          return null;
+        }
+    }
+    return null;
+  }
   setOptionsEvents(opt) {
     opt.onSortChanged = e => this.onCallStateChange("sort", e);
     opt.onColumnResized = e => this.onCallStateChange("columnResize", e);
@@ -117968,7 +117982,14 @@ class AgGridController {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
     this._gridOptions.api.forEachNode(node => {
-      node.setSelected(rowIds && rowIds.includes(node.id));
+      var _a;
+      if (rowIds && rowIds.includes(node.id)) {
+        node.setSelected(true);
+        (_a = this._gridOptions.api) === null || _a === void 0 ? void 0 : _a.ensureNodeVisible(node);
+      }
+      else {
+        node.setSelected(false);
+      }
     });
     const selectionHeader = this._gridOptions.context.selectionHeader;
     if (selectionHeader) {
@@ -118014,6 +118035,21 @@ class AgGridController {
     }
     this._gridOptions.api.refreshServerSide({ purge: false });
   }
+  setFocusFirstRow() {
+    const firstRow = this._gridOptions.api.getDisplayedRowAtIndex(0);
+    this.setFocusOnRow(firstRow.rowIndex);
+  }
+  setFocusLastRow() {
+    const lastRow = this._gridOptions.api.getDisplayedRowAtIndex(this._gridOptions.api.getLastDisplayedRow());
+    this.setFocusOnRow(lastRow.rowIndex);
+  }
+  setFocusOnRow(rowIndex) {
+    let displayedColumns = this._gridOptions.columnApi.getAllDisplayedColumns();
+    let firstCell = displayedColumns.find((column) => column.getColDef().headerName !== "");
+    this._gridOptions.api.ensureColumnVisible(firstCell);
+    this._gridOptions.api.ensureIndexVisible(rowIndex);
+    this._gridOptions.api.setFocusedCell(rowIndex, firstCell);
+  }
   setColumnsDef(cols) {
     const newColDefs = [Object.assign({ colId: this.CHECK_BOX_COL_ID, headerName: "", checkboxSelection: true, width: 28, suppressMovable: true, suppressAutoSize: true, suppressMenu: true, lockPosition: true, pinned: true }, this._multipleSelection && { headerComponent: "ezGridHeaderComponent", headerClass: "ag-column-select-header" })];
     if (this._statusResolver != undefined) {
@@ -118283,6 +118319,7 @@ let EzGrid$1 = class extends HTMLElement$1 {
     this.ezDoubleClick = createEvent(this, "ezDoubleClick", 7);
     this.configChange = createEvent(this, "configChange", 7);
     this._gridController = new AgGridController(false);
+    this._paginationChangedByKeyboard = true;
   }
   /**
   * Método responsável por receber a definição das colunas
@@ -118407,7 +118444,17 @@ let EzGrid$1 = class extends HTMLElement$1 {
     this._gridController.initDatagrid(this._container, {
       onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
       onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
-      onPaginationChange: (paginationInfo) => this._paginationInfo = paginationInfo,
+      onPaginationChange: (paginationInfo) => {
+        var _a;
+        if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > paginationInfo.currentPage && this._paginationChangedByKeyboard) {
+          this._gridController.setFocusLastRow();
+        }
+        else {
+          this._gridController.setFocusFirstRow();
+          this._paginationChangedByKeyboard = true;
+        }
+        this._paginationInfo = paginationInfo;
+      },
       onDoubleClick: (row) => {
         this.ezDoubleClick.emit(row);
       },
@@ -118430,11 +118477,13 @@ let EzGrid$1 = class extends HTMLElement$1 {
   previousPage() {
     if (this.dataUnit) {
       this.dataUnit.previousPage();
+      this._paginationChangedByKeyboard = false;
     }
   }
   nextPage() {
     if (this.dataUnit) {
       this.dataUnit.nextPage();
+      this._paginationChangedByKeyboard = false;
     }
   }
   getPaginationControl() {
@@ -119284,15 +119333,10 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
-    return (h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }));
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -119788,15 +119832,10 @@ let EzSearch$1 = class extends HTMLElement$1 {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._comboElement) {
-        ElementIDUtils.addIDInfo(this._comboElement, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
-    return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
   }
   ;
   get _elem() { return this; }
@@ -119913,7 +119952,7 @@ let EzTabselector$1 = class extends HTMLElement$1 {
   }
   componentDidLoad() {
     this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
-      const elemIdTabSelector = this._hostElem.getAttribute("data-element-id");
+      const elemIdTabSelector = this._hostElem.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
       const dataInfo = { id: `${elemIdTabSelector}_${StringUtils$1.toCamelCase(elem.id)}` };
       ElementIDUtils.addIDInfo(elem, null, dataInfo);
     });
@@ -120005,10 +120044,10 @@ let EzTabselector$1 = class extends HTMLElement$1 {
   }
   buildElementIdTab(tabs) {
     tabs.forEach(tab => {
-      if (!tab.hasOwnProperty("data-element-id")) {
-        const elemIdTabSelector = this._hostElem.getAttribute("data-element-id");
+      if (!tab.hasOwnProperty(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)) {
+        const elemIdTabSelector = this._hostElem.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
         const dataElementID = `${elemIdTabSelector}_${StringUtils$1.toCamelCase(tab.tabKey)}`;
-        tab["data-element-id"] = dataElementID;
+        tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = dataElementID;
       }
     });
   }
@@ -120171,17 +120210,12 @@ let EzTextArea$1 = class extends HTMLElement$1 {
     this.observeErrorMessage();
     this.adjustFloatingLabel();
     this.observeMode();
-    if (this._hostElement) {
-      ElementIDUtils.addIDInfo(this._hostElement, 'input');
-      if (this._inputElem) {
-        ElementIDUtils.addIDInfo(this._inputElem, 'internal_input', { id: this._hostElement.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, null, h("div", { class: "textarea", ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
       h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode === "slim" ? "textarea--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })), this.canShowError && this.mode != "slim" &&
+      : null, h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode === "slim" ? "textarea--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })), this.canShowError && this.mode != "slim" &&
       h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   get _hostElement() { return this; }
@@ -120278,18 +120312,13 @@ let EzTextEdit$1 = class extends HTMLElement$1 {
   componentDidLoad() {
     this.applyFocusSelect();
     this.setNewValue(this.value);
-    if (this._element) {
-      ElementIDUtils.addIDInfo(this._element, 'input');
-      if (this._inputElement) {
-        ElementIDUtils.addIDInfo(this._inputElement, 'internal_input', { id: this._element.getAttribute("data-element-id") });
-      }
-    }
   }
   componentDidRender() {
     this.setStyledInput();
   }
   render() {
-    return (h(Host, null, h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }), h("ez-text-input", { onInput: () => { this.calcSizeInput(this._newValue); }, class: "text-edit__form-input", value: this._newValue, ref: (elem) => this._inputElement = elem, mode: "slim", onEzChange: (evt) => this.setNewValue(evt === null || evt === void 0 ? void 0 : evt.detail), noBorder: true }), h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }), h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.cancelEdition.emit(); } })));
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
+    return (h(Host, null, h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }), h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), onInput: () => { this.calcSizeInput(this._newValue); }, class: "text-edit__form-input", value: this._newValue, ref: (elem) => this._inputElement = elem, mode: "slim", onEzChange: (evt) => this.setNewValue(evt === null || evt === void 0 ? void 0 : evt.detail), noBorder: true }), h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }), h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.cancelEdition.emit(); } })));
   }
   get _element() { return this; }
   static get style() { return ezTextEditCss; }
@@ -120505,12 +120534,6 @@ let EzTextInput$1 = class extends HTMLElement$1 {
     this.observeMask();
     this.adjustFloatingLabel();
     this.adjustBorderInput();
-    if (this._hostElement) {
-      ElementIDUtils.addIDInfo(this._hostElement, 'input');
-      if (this._inputElem) {
-        ElementIDUtils.addIDInfo(this._inputElem, 'internal_input', { id: this._hostElement.getAttribute("data-element-id") });
-      }
-    }
   }
   componentWillLoad() {
     this.observeMask();
@@ -120530,9 +120553,10 @@ let EzTextInput$1 = class extends HTMLElement$1 {
     }
   }
   render() {
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, 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", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
       h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   get _hostElement() { return this; }
@@ -120682,12 +120706,6 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
   //---------------------------------------------
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   componentWillLoad() {
     this.observeShowSeconds();
@@ -120699,7 +120717,8 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
     }
   }
   render() {
-    return (h(Host, null, h("ez-text-input", { ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _elem() { return this; }
@@ -121265,7 +121284,7 @@ const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"e
 const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"]}]);
 const EzFilterInput = /*@__PURE__*/proxyCustomElement(EzFilterInput$1, [1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"loading":[516],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513]}]);
 const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [0,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16]}]);
-const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32]}]);
+const EzGrid = /*@__PURE__*/proxyCustomElement(EzGrid$1, [6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32]}]);
 const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]);
 const EzList = /*@__PURE__*/proxyCustomElement(EzList$1, [1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32]}]);
 const EzLoadingBar = /*@__PURE__*/proxyCustomElement(EzLoadingBar$1, [1,"ez-loading-bar",{"_showLoading":[32]}]);

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

@@ -92,7 +92,7 @@ let EzChip = class {
     if (this._containerElem) {
       this.observeValue();
       this.observeEnabled();
-      this._containerElem.setAttribute("data-element-id", 'ezChip_internal_button');
+      this._containerElem.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, 'ezChip_internal_button');
       ElementIDUtils.addIDInfo(this._containerElem);
     }
   }

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

@@ -355,12 +355,6 @@ let EzComboBox = class {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
     this.setInputValue(false);
-    if (this.el) {
-      ElementIDUtils.addIDInfo(this.el, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this.el.getAttribute("data-element-id") });
-      }
-    }
   }
   //---------------------------------------------
   // Event handlers
@@ -453,7 +447,8 @@ let EzComboBox = class {
   }
   render() {
     var _a;
-    return (h(Host, null, h("ez-text-input", { class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })), this.searchMode && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })), this.searchMode && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
       ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
       : undefined), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("div", { class: "list-options", ref: elem => this._optionsList = elem }, this._visibleOptions.length === 0
       && h("div", { class: "message" }, !this._showLoading && h("span", { class: "message__no-result" }, this._textEmptyList), this._showLoading && h("div", { class: "message__loading" })), this.showOptionValue

package/dist/esm/ez-date-input.entry.js

@@ -138,18 +138,10 @@ let EzDateInput = class {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-      if (this._calendar) {
-        ElementIDUtils.addIDInfo(this._calendar, 'internal_calendar', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
-    return (h(Host, null, h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
   }
   get _elem() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/ez-date-time-input.entry.js

@@ -193,18 +193,10 @@ let EzDateTimeInput = class {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-      if (this._calendar) {
-        ElementIDUtils.addIDInfo(this._calendar, 'internal_calendar', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
-    return (h(Host, null, h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick() }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick() }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "calendar"), onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
   }
   get _elem() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/ez-filter-input.entry.js

@@ -60,15 +60,10 @@ let EzFilterInput = class {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
-    if (this._elem) {
-      ElementIDUtils.addIDInfo(this._elem, 'input');
-      if (this._textInput) {
-        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
-      }
-    }
   }
   render() {
-    return (h("ez-text-input", { ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.changeValue(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, loading: this.loading, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.changeValue(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, loading: this.loading, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
   }
   get _elem() { return getElement(this); }
   static get watchers() { return {

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

@@ -944,7 +944,7 @@ let EzForm = class {
       const idTabSelector = `${this._dataElementIdEzForm}_internal_tabSelector`;
       result.push(h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
     }
-    const idFormSheet = `${this._dataElementIdEzForm}_${StringUtils.toCamelCase(currentSheet.label)}`;
+    const idFormSheet = `${this._dataElementIdEzForm}_${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet.label), false)}`;
     result.push(h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
     return result;
   }
@@ -1022,7 +1022,7 @@ let EzForm = class {
   }
   buildIdTabSelector(tabs) {
     if (tabs) {
-      tabs.forEach(tab => tab["data-element-id"] = `${this._dataElementIdEzForm}_${StringUtils.toCamelCase(tab.label)}`);
+      tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = `${this._dataElementIdEzForm}_${StringUtils.toCamelCase(tab.label)}`);
     }
     return tabs;
   }