@sankhyalabs/ezui 2.3.13 → 2.4.0

package/dist/collection/components/ez-form/structure/FormSheetMetadata.js

@@ -108,7 +108,7 @@ export const buildFromConfig = (config, dataUnit) => {
     }
   });
   (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.forEach((field) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (field.visible !== false) {
       const tabConfig = getTabConfig(field.tab || "__main", sheets);
       if (hiddenTabs.has(tabConfig.label)) {
@@ -124,10 +124,10 @@ export const buildFromConfig = (config, dataUnit) => {
           requiredFields.push(field.name);
         }
         const cleanOnCopy = field.cleanOnCopy == undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : field.cleanOnCopy;
-        if (cleanOnCopy || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum)) {
+        if (cleanOnCopy || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum) || ((_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.cleanOnCopy)) {
           cleanOnCopyFields.push(field.name);
         }
-        const defaultValue = field.defaultValue == undefined ? (_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.defaultValue : field.defaultValue;
+        const defaultValue = field.defaultValue == undefined ? (_d = descriptor.properties) === null || _d === void 0 ? void 0 : _d.defaultValue : field.defaultValue;
         if (defaultValue) {
           defaultValues[field.name] = field.defaultValue;
         }

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

@@ -152,9 +152,9 @@ export class EzGrid {
   }
   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) {

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

@@ -1,5 +1,5 @@
-import { StringUtils } from "@sankhyalabs/core";
-import { Component, h, Host, Prop } from "@stencil/core";
+import { ElementIDUtils, StringUtils } from "@sankhyalabs/core";
+import { Component, Element, h, Host, Prop } from "@stencil/core";
 export class EzIcon {
   constructor() {
     /**
@@ -25,6 +25,9 @@ export class EzIcon {
       return h("img", { class: this.size, src: this.href });
     }
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElement, "icon");
+  }
   render() {
     return (h(Host, null, this.getIconContent()));
   }
@@ -90,4 +93,5 @@ export class EzIcon {
       "reflect": true
     }
   }; }
+  static get elementRef() { return "_hostElement"; }
 }

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

@@ -1,3 +1,4 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
 import { Component, Event, h, Host, Method, Prop, State } from "@stencil/core";
 ;
 ;
@@ -159,6 +160,9 @@ export class EzList {
   componentWillRender() {
     this.createList();
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+  }
   onDrop(ev, dragEndItem) {
     this.removeOverClass();
     this.setSelection(undefined);

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

@@ -126,8 +126,8 @@ export class EzNumberInput {
     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 }));
   }
   static get is() { return "ez-number-input"; }
   static get encapsulation() { return "shadow"; }

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

@@ -187,6 +187,7 @@ export class EzTextInput {
           this._labelElem.classList.add("input__label--right");
         }
       }
+      slot.name && ElementIDUtils.addIDInfo(content, slot.name);
     }
     this.observeErrorMessage();
   }
@@ -223,16 +224,16 @@ 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)));
+        h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage, "data-element-id": ElementIDUtils.getInternalIDInfo("message_box") }, this.errorMessage)));
   }
   static get is() { return "ez-text-input"; }
   static get encapsulation() { return "shadow"; }

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" })) :
@@ -1373,9 +1370,13 @@ let EzComboBox$1 = class extends HTMLElement$1 {
     }
   }
   componentDidRender() {
+    var _a;
     if (this._floatingID === undefined) {
       this._listWrapper.remove();
     }
+    (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
+      ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
+    });
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
@@ -1472,8 +1473,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 +1635,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 +1842,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 +2052,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 {
@@ -2173,7 +2174,7 @@ const buildFromConfig = (config, dataUnit) => {
     }
   });
   (_b = config === null || config === void 0 ? void 0 : config.fields) === null || _b === void 0 ? void 0 : _b.forEach((field) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (field.visible !== false) {
       const tabConfig = getTabConfig(field.tab || "__main", sheets);
       if (hiddenTabs.has(tabConfig.label)) {
@@ -2189,10 +2190,10 @@ const buildFromConfig = (config, dataUnit) => {
           requiredFields.push(field.name);
         }
         const cleanOnCopy = field.cleanOnCopy == undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : field.cleanOnCopy;
-        if (cleanOnCopy || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum)) {
+        if (cleanOnCopy || ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.autoNum) || ((_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.cleanOnCopy)) {
           cleanOnCopyFields.push(field.name);
         }
-        const defaultValue = field.defaultValue == undefined ? (_c = descriptor.properties) === null || _c === void 0 ? void 0 : _c.defaultValue : field.defaultValue;
+        const defaultValue = field.defaultValue == undefined ? (_d = descriptor.properties) === null || _d === void 0 ? void 0 : _d.defaultValue : field.defaultValue;
         if (defaultValue) {
           defaultValues[field.name] = field.defaultValue;
         }
@@ -2329,7 +2330,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 +3009,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 +3077,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 +3090,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 +118523,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 +118593,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 +118767,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 +119399,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 +119642,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 +119893,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 +119978,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 +120009,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 +120272,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 +120377,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; }
@@ -120568,6 +120577,7 @@ let EzTextInput$1 = class extends HTMLElement$1 {
           this._labelElem.classList.add("input__label--right");
         }
       }
+      slot.name && ElementIDUtils.addIDInfo(content, slot.name);
     }
     this.observeErrorMessage();
   }
@@ -120604,11 +120614,11 @@ 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" &&
-      h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
+      : 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, "data-element-id": ElementIDUtils.getInternalIDInfo("message_box") }, this.errorMessage)));
   }
   get _hostElement() { return this; }
   static get watchers() { return {
@@ -120768,8 +120778,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() {