@sankhyalabs/ezui 2.3.13 → 2.3.14

package/dist/collection/components/ez-radio-button/ez-radio-button.js

@@ -40,7 +40,7 @@ export class EzRadioButton {
     return (h(Host, null,
       this.label && h("label", { class: "label" }, this.label),
       h("div", { class: "form form--" + this.direction }, this._options.map((option, key) => h("div", { class: "form__group" },
-        h("input", { id: "rad" + key, class: "form__radio", name: "theradio", type: "radio", value: option.value, onChange: (ev) => { this.handleInputChange(ev); }, disabled: !this.enabled, checked: option.value === this.value }),
+        h("input", { id: "rad" + key, class: "form__radio", name: "theradio", type: "radio", value: option.value, onChange: (ev) => { this.handleInputChange(ev); }, disabled: !this.enabled, checked: option.value === this.value, "data-element-id": ElementIDUtils.getInternalIDInfo(`input_${option.value}`) }),
         h("label", { htmlFor: "rad" + key, class: "form__label" }, option.label))))));
   }
   static get is() { return "ez-radio-button"; }

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

@@ -64,8 +64,8 @@ export class EzSearch {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
   }
   render() {
-    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 }));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
   }
   ;
   static get is() { return "ez-search"; }

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

@@ -67,7 +67,6 @@ export class EzTabselector {
     this.setFocusedBtn(false, tab.index);
   }
   componentWillRender() {
-    ElementIDUtils.addIDInfo(this._hostElem);
     if (!this._processedTabs) {
       this._processedTabs = [];
       if (this.tabs) {
@@ -99,10 +98,12 @@ export class EzTabselector {
     this.updateScroll();
   }
   componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElem, "itemsSelector");
     this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
-      const elemIdTabSelector = this._hostElem.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-      const dataInfo = { id: `${elemIdTabSelector}_${StringUtils.toCamelCase(elem.id)}` };
-      ElementIDUtils.addIDInfo(elem, null, dataInfo);
+      var _a;
+      const label = (_a = elem.querySelector('span.tab-label')) === null || _a === void 0 ? void 0 : _a.innerText;
+      const dataInfo = { id: `${StringUtils.toCamelCase(label)}` };
+      ElementIDUtils.addIDInfo(elem, "itemSelector", dataInfo);
     });
   }
   handleSlotChange(ev) {

package/dist/collection/components/ez-text-area/ez-text-area.js

@@ -136,13 +136,13 @@ export class EzTextArea {
     this.observeMode();
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
+    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(), "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 })),
+        h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo("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)));
   }

package/dist/collection/components/ez-text-edit/ez-text-edit.js

@@ -81,10 +81,10 @@ export class EzTextEdit {
     this.setStyledInput();
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
+    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-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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(); } })));
   }

package/dist/collection/components/ez-text-input/ez-text-input.js

@@ -223,13 +223,13 @@ export class EzTextInput {
     }
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
+    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", { "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("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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)));

package/dist/collection/components/ez-time-input/ez-time-input.js

@@ -142,9 +142,9 @@ export class EzTimeInput {
     }
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    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-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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 is() { return "ez-time-input"; }

package/dist/custom-elements/index.js

@@ -310,6 +310,7 @@ let EzActionsButton$1 = class extends HTMLElement$1 {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsButton(this._element, this._button);
+    ElementIDUtils.addIDInfo(this._element);
     this.controlScrollPage();
   }
   componentDidRender() {
@@ -397,8 +398,8 @@ let EzButton$1 = class extends HTMLElement$1 {
       ElementIDUtils.addIDInfo(this._element);
     }
     if (this._button) {
-      const dataInfo = { id: 'ezButton_internal_button' };
-      ElementIDUtils.addIDInfo(this._button, null, dataInfo);
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._button, 'button', dataInfo);
     }
   }
   getIconSize(sizeParam = "medium") {
@@ -748,9 +749,6 @@ let EzCheck$1 = class extends HTMLElement$1 {
     this._inputElem.focus();
   }
   componentDidLoad() {
-    if (this._inputElem) {
-      ElementIDUtils.addIDInfo(this._inputElem, 'input');
-    }
     if (this._element) {
       ElementIDUtils.addIDInfo(this._element, 'input');
     }
@@ -774,7 +772,7 @@ let EzCheck$1 = class extends HTMLElement$1 {
     return ((_a = this.mode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === CheckMode.SWITCH ? "switch-mode" : "regular-mode";
   }
   render() {
-    return (h(Host, null, h("input", { type: "checkbox", ref: (el) => this._inputElem = el, class: this.getInputClasses(), checked: this.value === true, onChange: () => { this.changeValue(); }, indeterminate: this.indeterminate, disabled: !this.enabled }), this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
+    return (h(Host, null, h("input", { type: "checkbox", ref: (el) => this._inputElem = el, class: this.getInputClasses(), checked: this.value === true, onChange: () => { this.changeValue(); }, indeterminate: this.indeterminate, disabled: !this.enabled, "data-element-id": ElementIDUtils.getInternalIDInfo("input") }), this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
   }
   get _element() { return this; }
   static get watchers() { return {
@@ -876,8 +874,7 @@ let EzChip$1 = class extends HTMLElement$1 {
     if (this._containerElem) {
       this.observeValue();
       this.observeEnabled();
-      this._containerElem.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, 'ezChip_internal_button');
-      ElementIDUtils.addIDInfo(this._containerElem);
+      this._containerElem.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, ElementIDUtils.getInternalIDInfo('button'));
     }
   }
   render() {
@@ -1015,7 +1012,7 @@ let EzCollapsibleBox$1 = class extends HTMLElement$1 {
   render() {
     return (h("div", { class: "collapsible-box" }, h("div", { class: "collapsible-box__header" }, h("button", Object.assign({}, (!this._activeEditText ? { onClick: () => { this.showHide(); } } : null), { class: "collapsible-box__title collapsible-box__title--" + (this.headerAlign || "left") +
         (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
-        (this.value ? " collapsible-box__title--no-margin" : "") }), h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : "") }), !this._activeEditText ?
+        (this.value ? " collapsible-box__title--no-margin" : "") }), h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : ""), id: "toggleCollapsible" }), !this._activeEditText ?
       h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem }, h("span", null, this.label), this.editable &&
         h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: "Editar" }), this.removable &&
         h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: "Remover" })) :
@@ -1472,8 +1469,8 @@ let EzComboBox$1 = class extends HTMLElement$1 {
   }
   render() {
     var _a;
-    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)
+    ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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
@@ -1634,8 +1631,8 @@ let EzDateInput$1 = class extends HTMLElement$1 {
     this.setInputValue();
   }
   render() {
-    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 })));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -1841,8 +1838,8 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
     this.setInputValue();
   }
   render() {
-    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 })));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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("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 {
@@ -2051,8 +2048,8 @@ let EzFilterInput$1 = class extends HTMLElement$1 {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    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, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -2329,7 +2326,7 @@ const buildField = (field) => {
 const FormItem = ({ source }) => {
   if ("items" in source) {
     const fieldSet = source;
-    return h("ez-collapsible-box", { label: source.label, "header-size": "large" }, fieldSet.items.map(fi => buildField(fi)));
+    return h("ez-collapsible-box", { label: source.label, "header-size": "large", key: source.label }, fieldSet.items.map(fi => buildField(fi)));
   }
   else {
     return buildField(source);
@@ -3008,10 +3005,10 @@ let EzForm$1 = class extends HTMLElement$1 {
       const tabs = allSheets.map((sheet, index) => {
         return { tabKey: sheet.name, label: sheet.label, index };
       });
-      const idTabSelector = `${this._dataElementIdEzForm}_internal_tabSelector`;
+      const idTabSelector = `selector`;
       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.replaceAccentuatedChars(StringUtils$1.toCamelCase(currentSheet.label), false)}`;
+    const idFormSheet = `${StringUtils$1.replaceAccentuatedChars(StringUtils$1.toCamelCase(currentSheet.label), false)}_selectorContainer`;
     result.push(h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
     return result;
   }
@@ -3076,7 +3073,7 @@ let EzForm$1 = class extends HTMLElement$1 {
     this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
     this.processMetadata();
     const dataInfo = { dataUnit: this.dataUnit };
-    this._dataElementIdEzForm = ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
   componentDidRender() {
     this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")));
@@ -3089,7 +3086,7 @@ let EzForm$1 = class extends HTMLElement$1 {
   }
   buildIdTabSelector(tabs) {
     if (tabs) {
-      tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = `${this._dataElementIdEzForm}_${StringUtils$1.toCamelCase(tab.label)}`);
+      tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = StringUtils$1.toCamelCase(tab.label));
     }
     return tabs;
   }
@@ -118522,9 +118519,9 @@ let EzGrid$1 = class extends HTMLElement$1 {
   }
   buildDataElementId() {
     const dataInfo = { dataUnit: this.dataUnit };
-    const dataElementIdEzGrid = ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-    const dtInfo = { id: `${dataElementIdEzGrid}_ezGrid_pagination` };
-    ElementIDUtils.addIDInfo(this._refPaginationControl, null, dtInfo);
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    const dtInfo = { id: "ezGrid" };
+    ElementIDUtils.addIDInfo(this._refPaginationControl, "pagination", dtInfo);
   }
   previousPage() {
     if (this.dataUnit) {
@@ -118592,9 +118589,13 @@ let EzIcon$1 = class extends HTMLElement$1 {
       return h("img", { class: this.size, src: this.href });
     }
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElement, "icon");
+  }
   render() {
     return (h(Host, null, this.getIconContent()));
   }
+  get _hostElement() { return this; }
   static get style() { return ezIconCss; }
 };
 
@@ -118762,6 +118763,9 @@ let EzList$1 = class extends HTMLElement$1 {
   componentWillRender() {
     this.createList();
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+  }
   onDrop(ev, dragEndItem) {
     this.removeOverClass();
     this.setSelection(undefined);
@@ -119391,8 +119395,8 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
     this.setInputValue();
   }
   render() {
-    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 }));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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 {
@@ -119634,7 +119638,7 @@ let EzRadioButton$1 = class extends HTMLElement$1 {
     this.ezChange.emit(this.value);
   }
   render() {
-    return (h(Host, null, this.label && h("label", { class: "label" }, this.label), h("div", { class: "form form--" + this.direction }, this._options.map((option, key) => h("div", { class: "form__group" }, h("input", { id: "rad" + key, class: "form__radio", name: "theradio", type: "radio", value: option.value, onChange: (ev) => { this.handleInputChange(ev); }, disabled: !this.enabled, checked: option.value === this.value }), h("label", { htmlFor: "rad" + key, class: "form__label" }, option.label))))));
+    return (h(Host, null, this.label && h("label", { class: "label" }, this.label), h("div", { class: "form form--" + this.direction }, this._options.map((option, key) => h("div", { class: "form__group" }, h("input", { id: "rad" + key, class: "form__radio", name: "theradio", type: "radio", value: option.value, onChange: (ev) => { this.handleInputChange(ev); }, disabled: !this.enabled, checked: option.value === this.value, "data-element-id": ElementIDUtils.getInternalIDInfo(`input_${option.value}`) }), h("label", { htmlFor: "rad" + key, class: "form__label" }, option.label))))));
   }
   get hostElement() { return this; }
   static get style() { return ezRadioButtonCss; }
@@ -119885,8 +119889,8 @@ let EzSearch$1 = class extends HTMLElement$1 {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
   }
   render() {
-    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 }));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, 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; }
@@ -119970,7 +119974,6 @@ let EzTabselector$1 = class extends HTMLElement$1 {
     this.setFocusedBtn(false, tab.index);
   }
   componentWillRender() {
-    ElementIDUtils.addIDInfo(this._hostElem);
     if (!this._processedTabs) {
       this._processedTabs = [];
       if (this.tabs) {
@@ -120002,10 +120005,12 @@ let EzTabselector$1 = class extends HTMLElement$1 {
     this.updateScroll();
   }
   componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElem, "itemsSelector");
     this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
-      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);
+      var _a;
+      const label = (_a = elem.querySelector('span.tab-label')) === null || _a === void 0 ? void 0 : _a.innerText;
+      const dataInfo = { id: `${StringUtils$1.toCamelCase(label)}` };
+      ElementIDUtils.addIDInfo(elem, "itemSelector", dataInfo);
     });
   }
   handleSlotChange(ev) {
@@ -120263,10 +120268,10 @@ let EzTextArea$1 = class extends HTMLElement$1 {
     this.observeMode();
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
+    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(), "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" &&
+      : null, h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo("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; }
@@ -120368,8 +120373,8 @@ let EzTextEdit$1 = class extends HTMLElement$1 {
     this.setStyledInput();
   }
   render() {
-    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(); } })));
+    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("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; }
@@ -120604,10 +120609,10 @@ let EzTextInput$1 = class extends HTMLElement$1 {
     }
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
+    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", { "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" &&
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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; }
@@ -120768,8 +120773,8 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
     }
   }
   render() {
-    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" }))));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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; }

package/dist/esm/ez-actions-button.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7bc778b3.js';
-import { FloatingManager } from '@sankhyalabs/core';
+import { FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
 import './ApplicationUtils-205ac4bc.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
 import './DialogType-4059dc4d.js';
@@ -168,6 +168,7 @@ let EzActionsButton = class {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsButton(this._element, this._button);
+    ElementIDUtils.addIDInfo(this._element);
     this.controlScrollPage();
   }
   componentDidRender() {

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

@@ -32,8 +32,8 @@ let EzButton = class {
       ElementIDUtils.addIDInfo(this._element);
     }
     if (this._button) {
-      const dataInfo = { id: 'ezButton_internal_button' };
-      ElementIDUtils.addIDInfo(this._button, null, dataInfo);
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._button, 'button', dataInfo);
     }
   }
   getIconSize(sizeParam = "medium") {

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

@@ -40,9 +40,6 @@ let EzCheck = class {
     this._inputElem.focus();
   }
   componentDidLoad() {
-    if (this._inputElem) {
-      ElementIDUtils.addIDInfo(this._inputElem, 'input');
-    }
     if (this._element) {
       ElementIDUtils.addIDInfo(this._element, 'input');
     }
@@ -66,7 +63,7 @@ let EzCheck = class {
     return ((_a = this.mode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === CheckMode.SWITCH ? "switch-mode" : "regular-mode";
   }
   render() {
-    return (h(Host, null, h("input", { type: "checkbox", ref: (el) => this._inputElem = el, class: this.getInputClasses(), checked: this.value === true, onChange: () => { this.changeValue(); }, indeterminate: this.indeterminate, disabled: !this.enabled }), this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
+    return (h(Host, null, h("input", { type: "checkbox", ref: (el) => this._inputElem = el, class: this.getInputClasses(), checked: this.value === true, onChange: () => { this.changeValue(); }, indeterminate: this.indeterminate, disabled: !this.enabled, "data-element-id": ElementIDUtils.getInternalIDInfo("input") }), this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
   }
   get _element() { return getElement(this); }
   static get watchers() { return {

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

@@ -92,8 +92,7 @@ let EzChip = class {
     if (this._containerElem) {
       this.observeValue();
       this.observeEnabled();
-      this._containerElem.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, 'ezChip_internal_button');
-      ElementIDUtils.addIDInfo(this._containerElem);
+      this._containerElem.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, ElementIDUtils.getInternalIDInfo('button'));
     }
   }
   render() {

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

@@ -122,7 +122,7 @@ let EzCollapsibleBox = class {
   render() {
     return (h("div", { class: "collapsible-box" }, h("div", { class: "collapsible-box__header" }, h("button", Object.assign({}, (!this._activeEditText ? { onClick: () => { this.showHide(); } } : null), { class: "collapsible-box__title collapsible-box__title--" + (this.headerAlign || "left") +
         (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
-        (this.value ? " collapsible-box__title--no-margin" : "") }), h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : "") }), !this._activeEditText ?
+        (this.value ? " collapsible-box__title--no-margin" : "") }), h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : ""), id: "toggleCollapsible" }), !this._activeEditText ?
       h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem }, h("span", null, this.label), this.editable &&
         h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: "Editar" }), this.removable &&
         h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: "Remover" })) :

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

@@ -447,8 +447,8 @@ let EzComboBox = class {
   }
   render() {
     var _a;
-    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)
+    ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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

@@ -140,8 +140,8 @@ let EzDateInput = class {
     this.setInputValue();
   }
   render() {
-    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 })));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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("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

@@ -195,8 +195,8 @@ let EzDateTimeInput = class {
     this.setInputValue();
   }
   render() {
-    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 })));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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("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

@@ -62,8 +62,8 @@ let EzFilterInput = class {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    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, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("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, 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

@@ -270,7 +270,7 @@ const buildField = (field) => {
 const FormItem = ({ source }) => {
   if ("items" in source) {
     const fieldSet = source;
-    return h("ez-collapsible-box", { label: source.label, "header-size": "large" }, fieldSet.items.map(fi => buildField(fi)));
+    return h("ez-collapsible-box", { label: source.label, "header-size": "large", key: source.label }, fieldSet.items.map(fi => buildField(fi)));
   }
   else {
     return buildField(source);
@@ -948,10 +948,10 @@ let EzForm = class {
       const tabs = allSheets.map((sheet, index) => {
         return { tabKey: sheet.name, label: sheet.label, index };
       });
-      const idTabSelector = `${this._dataElementIdEzForm}_internal_tabSelector`;
+      const idTabSelector = `selector`;
       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.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet.label), false)}`;
+    const idFormSheet = `${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet.label), false)}_selectorContainer`;
     result.push(h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
     return result;
   }
@@ -1016,7 +1016,7 @@ let EzForm = class {
     this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
     this.processMetadata();
     const dataInfo = { dataUnit: this.dataUnit };
-    this._dataElementIdEzForm = ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
   componentDidRender() {
     this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")));
@@ -1029,7 +1029,7 @@ let EzForm = class {
   }
   buildIdTabSelector(tabs) {
     if (tabs) {
-      tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = `${this._dataElementIdEzForm}_${StringUtils.toCamelCase(tab.label)}`);
+      tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = StringUtils.toCamelCase(tab.label));
     }
     return tabs;
   }

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

@@ -115419,9 +115419,9 @@ let EzGrid = class {
   }
   buildDataElementId() {
     const dataInfo = { dataUnit: this.dataUnit };
-    const dataElementIdEzGrid = ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-    const dtInfo = { id: `${dataElementIdEzGrid}_ezGrid_pagination` };
-    ElementIDUtils.addIDInfo(this._refPaginationControl, null, dtInfo);
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    const dtInfo = { id: "ezGrid" };
+    ElementIDUtils.addIDInfo(this._refPaginationControl, "pagination", dtInfo);
   }
   previousPage() {
     if (this.dataUnit) {