@sankhyalabs/ezui 2.3.13 → 2.3.14

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

@@ -172,6 +172,7 @@ let EzActionsButton = class {
   }
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsButton(this._element, this._button);
+    core.ElementIDUtils.addIDInfo(this._element);
     this.controlScrollPage();
   }
   componentDidRender() {

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

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

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

@@ -44,9 +44,6 @@ let EzCheck = class {
     this._inputElem.focus();
   }
   componentDidLoad() {
-    if (this._inputElem) {
-      core.ElementIDUtils.addIDInfo(this._inputElem, 'input');
-    }
     if (this._element) {
       core.ElementIDUtils.addIDInfo(this._element, 'input');
     }
@@ -70,7 +67,7 @@ let EzCheck = class {
     return ((_a = this.mode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === CheckMode.CheckMode.SWITCH ? "switch-mode" : "regular-mode";
   }
   render() {
-    return (index.h(index.Host, null, index.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 ? index.h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
+    return (index.h(index.Host, null, index.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": core.ElementIDUtils.getInternalIDInfo("input") }), this.label ? index.h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
   }
   get _element() { return index.getElement(this); }
   static get watchers() { return {

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

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

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

@@ -126,7 +126,7 @@ let EzCollapsibleBox = class {
   render() {
     return (index.h("div", { class: "collapsible-box" }, index.h("div", { class: "collapsible-box__header" }, index.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" : "") }), index.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" : "") }), index.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 ?
       index.h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem }, index.h("span", null, this.label), this.editable &&
         index.h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: "Editar" }), this.removable &&
         index.h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: "Remover" })) :

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

@@ -451,8 +451,8 @@ let EzComboBox = class {
   }
   render() {
     var _a;
-    let elementId = core.ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, index.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)
+    core.ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
+    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, index.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)
       ? index.h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, index.h("ez-icon", { iconName: "close" }))
       : undefined), index.h("section", { class: "list-container", ref: elem => this._listContainer = elem }, index.h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, index.h("div", { class: "list-options", ref: elem => this._optionsList = elem }, this._visibleOptions.length === 0
       && index.h("div", { class: "message" }, !this._showLoading && index.h("span", { class: "message__no-result" }, this._textEmptyList), this._showLoading && index.h("div", { class: "message__loading" })), this.showOptionValue

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

@@ -144,8 +144,8 @@ let EzDateInput = class {
     this.setInputValue();
   }
   render() {
-    let elementId = core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { "data-element-id": core.ElementIDUtils.getInternalIDInfo(elementId, "calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
+    core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
   }
   get _elem() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -199,8 +199,8 @@ let EzDateTimeInput = class {
     this.setInputValue();
   }
   render() {
-    let elementId = core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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() }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { "data-element-id": core.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 })));
+    core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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() }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { "data-element-id": core.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 index.getElement(this); }
   static get watchers() { return {

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

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

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

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

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

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

package/dist/cjs/ez-icon.cjs.entry.js

@@ -32,9 +32,13 @@ let EzIcon = class {
       return index.h("img", { class: this.size, src: this.href });
     }
   }
+  componentDidLoad() {
+    core.ElementIDUtils.addIDInfo(this._hostElement, "icon");
+  }
   render() {
     return (index.h(index.Host, null, this.getIconContent()));
   }
+  get _hostElement() { return index.getElement(this); }
 };
 EzIcon.style = ezIconCss;
 

package/dist/cjs/ez-list.cjs.entry.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-8646c40d.js');
+const core = require('@sankhyalabs/core');
 
 const ezListCss = ":host{--ez-list__host--z-index:var(--visible, 1);--ez-list__host--border-radius:var(--border--radius-medium, 12px);--ez-list__host--padding:var(--space--medium, 12px);--ez-list__icon--padding:var(--space--small, 6px);--ez-list__icon--color:#AFB6C0;--ez-list__item--margin:0 var(--space--small, 6px);--ez-list__item--color:var(--title--primary, #2b3a54);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-color:var(--title--primary, #2b3a54);--ez-list__item--font-family:var(--font-pattern, \"Roboto\");--ez-list__item--font-size:var(--text--medium, 14px);--ez-list__selectable--padding-right:var(--space--small, 6px);--ez-list__selectable--padding-left:var(--space--small, 6px);--ez-list__selected-item--border-radius:var(--border--radius-small, 6px);--ez-list__selected-item--background-color:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Roboto\");--ez-list__group--font-size:var(--text--medium, 14px);--ez-list__group--font-weight:var(--text-weight--large, 600);--ez-list__group--padding-bottom:var(--space-small, 6px);--ez-list__group-overlay--font-family:var(--font-pattern, \"Roboto\");--ez-list__group-overlay--font-size:var(--text--medium, 14px);--ez-list__group-container-scrollbar--border-radius:var(--border--radius-small, 6px);--ez-list__group-container-scrollbar--width:var(--space--medium, 12px);--ez-list__group-container-scrollbar--background-color-primary:var(--scrollbar--primary, #2B3A54);--ez-list__group-container-scrollbar--background-color-secondary:var(--scrollbar--secondary, #E5EAF0);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__last-droppable-space--height:var(--space--small, 6px);--ez-list__draggable-scrollbar--border-radius:var(--border--radius-small, 6px);--ez-list__draggable-scrollbar--width:var(--space--medium, 12px);--ez-list__draggable-scrollbar--background-color-primary:var(--scrollbar--primary, #2B3A54);--ez-list__draggable-scrollbar--background-color-secondary:var(--scrollbar--secondary, #E5EAF0);--ez-list__draggable-list--padding-bottom:var(--space--small, 6px);--ez-list__draggable-icon--image:url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}p{margin:0}.draggable{display:flex;align-items:center;border-top:1px dashed #fff;justify-content:space-between;background-color:#fff;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);flex:1;width:100%}.dragging{background:#FFFFFF;border:1px solid #008561;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.selectable{cursor:pointer;padding-right:var(--ez-list__selectable--padding-right);padding-left:var(--ez-list__selectable--padding-left)}.selectable-container{margin:0px !important}.item-content{display:flex;justify-content:flex-start;align-items:center;width:100%}.group-container .item-content{max-width:calc(100% - 41px)}.items-container .item-content{max-width:calc(100% - 100px)}.draggable-list{color:var(--text-color);padding:0;margin:0;width:100%;max-height:100%;scrollbar-width:thin;scrollbar-color:var(--ez-list__draggable-scrollbar--background-color-primary) var(--ez-list__draggable-scrollbar--background-color-secondary)}.draggable-list li{background-color:#fff;display:flex;margin:var(--ez-list__item--margin);font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);color:var(--ez-list__item--color);height:32px}.over{border-top:1px dashed var(--ez-list__over--border--color)}.last-droppable-space{height:var(--ez-list__last-droppable-space--height)}.draggable-selected{background-color:var(--background--strong) !important}.draggable-selected div:hover{background-color:var(--background--strong) !important}.draggable-list::-webkit-scrollbar-track{background-color:var(--ez-list__draggable-scrollbar--background-color-secondary)}.draggable-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__draggable-scrollbar--background-color-primary);border-radius:var(--ez-list__draggable-scrollbar--border-radius)}.draggable-list::-webkit-scrollbar{background-color:var(--ez-list__draggable-scrollbar--background-color-secondary);width:var(--ez-list__draggable-scrollbar--width);max-width:var(--ez-list__draggable-scrollbar--width);min-width:var(--ez-list__draggable-scrollbar--width)}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;background-color:var(--ez-list__icon--color);width:18px;height:18px;-webkit-mask-image:var(--ez-list__draggable-icon--image);mask-image:var(--ez-list__draggable-icon--image)}*{box-sizing:border-box}.checkbox{width:fit-content}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-container{display:flex;flex-direction:column;max-height:100%;overflow-y:auto;outline:none;width:100%;scrollbar-width:thin;scrollbar-color:var(--ez-list__group-container-scrollbar--background-color-primary) var(--ez-list__group-container-scrollbar--background-color-secondary)}.group-name{font-family:var(--ez-list__group--font-family);font-size:var(--ez-list__group--font-size);font-weight:var(--ez-list__group--font-weight);padding-bottom:var(--ez-list__group--padding-bottom);-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none}.group{display:flex;flex-direction:column}.group-container::-webkit-scrollbar-track{background-color:var(--ez-list__group-container-scrollbar--background-color-secondary)}.group-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__group-container-scrollbar--background-color-primary);border-radius:var(--ez-list__group-container-scrollbar--border-radius)}.group-container::-webkit-scrollbar{background-color:var(--ez-list__group-container-scrollbar--background-color-secondary);width:var(--ez-list__group-container-scrollbar--width);max-width:var(--ez-list__group-container-scrollbar--width);min-width:var(--ez-list__group-container-scrollbar--width)}.section-container{display:flex;position:relative;height:100%}.items-container{width:100%;max-height:100%;overflow-y:auto;outline:none;scrollbar-width:thin;scrollbar-color:var(--ez-list__draggable-scrollbar--background-color-primary) var(--ez-list__draggable-scrollbar--background-color-secondary)}.group-items-container{width:100%;max-height:100%;height:100%;outline:none}.items-container::-webkit-scrollbar-track{background-color:var(--ez-list__draggable-scrollbar--background-color-secondary)}.items-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__draggable-scrollbar--background-color-primary);border-radius:var(--ez-list__draggable-scrollbar--border-radius)}.items-container::-webkit-scrollbar{background-color:var(--ez-list__draggable-scrollbar--background-color-secondary);width:var(--ez-list__draggable-scrollbar--width);max-width:var(--ez-list__draggable-scrollbar--width);min-width:var(--ez-list__draggable-scrollbar--width)}.group-overlay{font-family:var(--ez-list__group-overlay--font-family);font-size:var(--ez-list__group-overlay--font-size);background:rgba(226, 244, 239, 0.8);border:1px solid #008561;border-radius:8px;position:absolute;display:none;place-items:center;top:0;bottom:0;left:0;right:0;z-index:2;margin:0;cursor:pointer}.presetedHeight{min-height:100px}.overlay-text{position:absolute;top:50%;left:50%;font-size:50px;color:white;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%)}.selected-item{background:var(--ez-list__selected-item--background-color);border-radius:var(--ez-list__selected-item--border-radius)}.slot-item{align-items:flex-end}.overGroup{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;box-sizing:border-box;border-radius:8px;padding-top:6px}";
 
@@ -166,6 +167,9 @@ let EzList = class {
   componentWillRender() {
     this.createList();
   }
+  componentDidLoad() {
+    core.ElementIDUtils.addIDInfo(this._element);
+  }
   onDrop(ev, dragEndItem) {
     this.removeOverClass();
     this.setSelection(undefined);

package/dist/cjs/ez-number-input.cjs.entry.js

@@ -139,8 +139,8 @@ let EzNumberInput = class {
     this.setInputValue();
   }
   render() {
-    let elementId = core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (index.h("ez-text-input", { "data-element-id": core.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 }));
+    core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (index.h("ez-text-input", { "data-element-id": core.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 index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/ez-radio-button.cjs.entry.js

@@ -46,7 +46,7 @@ let EzRadioButton = class {
     this.ezChange.emit(this.value);
   }
   render() {
-    return (index.h(index.Host, null, this.label && index.h("label", { class: "label" }, this.label), index.h("div", { class: "form form--" + this.direction }, this._options.map((option, key) => index.h("div", { class: "form__group" }, index.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 }), index.h("label", { htmlFor: "rad" + key, class: "form__label" }, option.label))))));
+    return (index.h(index.Host, null, this.label && index.h("label", { class: "label" }, this.label), index.h("div", { class: "form form--" + this.direction }, this._options.map((option, key) => index.h("div", { class: "form__group" }, index.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": core.ElementIDUtils.getInternalIDInfo(`input_${option.value}`) }), index.h("label", { htmlFor: "rad" + key, class: "form__label" }, option.label))))));
   }
   get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ez-search.cjs.entry.js

@@ -73,8 +73,8 @@ let EzSearch = class {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
   }
   render() {
-    let elementId = core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (index.h("ez-combo-box", { "data-element-id": core.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 }));
+    core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (index.h("ez-combo-box", { "data-element-id": core.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 index.getElement(this); }

package/dist/cjs/ez-tabselector.cjs.entry.js

@@ -76,7 +76,6 @@ let EzTabselector = class {
     this.setFocusedBtn(false, tab.index);
   }
   componentWillRender() {
-    core.ElementIDUtils.addIDInfo(this._hostElem);
     if (!this._processedTabs) {
       this._processedTabs = [];
       if (this.tabs) {
@@ -108,10 +107,12 @@ let EzTabselector = class {
     this.updateScroll();
   }
   componentDidLoad() {
+    core.ElementIDUtils.addIDInfo(this._hostElem, "itemsSelector");
     this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
-      const elemIdTabSelector = this._hostElem.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-      const dataInfo = { id: `${elemIdTabSelector}_${core.StringUtils.toCamelCase(elem.id)}` };
-      core.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: `${core.StringUtils.toCamelCase(label)}` };
+      core.ElementIDUtils.addIDInfo(elem, "itemSelector", dataInfo);
     });
   }
   handleSlotChange(ev) {

package/dist/cjs/ez-text-area.cjs.entry.js

@@ -145,10 +145,10 @@ let EzTextArea = class {
     this.observeMode();
   }
   render() {
-    let elementId = core.ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
+    core.ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (index.h(index.Host, null, index.h("div", { class: "textarea", ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
       index.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, index.h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": core.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, index.h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": core.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" &&
       index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   get _hostElement() { return index.getElement(this); }

package/dist/cjs/ez-text-edit.cjs.entry.js

@@ -95,8 +95,8 @@ let EzTextEdit = class {
     this.setStyledInput();
   }
   render() {
-    let elementId = core.ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
-    return (index.h(index.Host, null, index.h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }), index.h("ez-text-input", { "data-element-id": core.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 }), index.h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }), index.h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.cancelEdition.emit(); } })));
+    core.ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
+    return (index.h(index.Host, null, index.h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }), index.h("ez-text-input", { "data-element-id": core.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 }), index.h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }), index.h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.cancelEdition.emit(); } })));
   }
   get _element() { return index.getElement(this); }
 };

package/dist/cjs/ez-text-input.cjs.entry.js

@@ -232,10 +232,10 @@ let EzTextInput = class {
     }
   }
   render() {
-    let elementId = core.ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
+    core.ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (index.h(index.Host, null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
       index.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, index.h("input", { "data-element-id": core.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(); } }), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
+      : null, index.h("input", { "data-element-id": core.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(); } }), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
       index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   get _hostElement() { return index.getElement(this); }

package/dist/cjs/ez-time-input.cjs.entry.js

@@ -153,8 +153,8 @@ let EzTimeInput = class {
     }
   }
   render() {
-    let elementId = core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
+    core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.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 }, index.h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _elem() { return index.getElement(this); }

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

@@ -1,4 +1,4 @@
-import { FloatingManager } from '@sankhyalabs/core';
+import { FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
 import { Component, Element, Event, h, Host, Prop, State, Method } from '@stencil/core';
 import { CSSVarsUtils } from '../../utils';
 export class EzActionsButton {
@@ -160,6 +160,7 @@ export class EzActionsButton {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsButton(this._element, this._button);
+    ElementIDUtils.addIDInfo(this._element);
     this.controlScrollPage();
   }
   componentDidRender() {

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

@@ -28,8 +28,8 @@ export class EzButton {
       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/collection/components/ez-check/ez-check.js

@@ -35,9 +35,6 @@ export class EzCheck {
     this._inputElem.focus();
   }
   componentDidLoad() {
-    if (this._inputElem) {
-      ElementIDUtils.addIDInfo(this._inputElem, 'input');
-    }
     if (this._element) {
       ElementIDUtils.addIDInfo(this._element, 'input');
     }
@@ -62,7 +59,7 @@ export class EzCheck {
   }
   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 }),
+      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));
   }
   static get is() { return "ez-check"; }

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

@@ -85,8 +85,7 @@ export class EzChip {
     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/collection/components/ez-collapsible-box/ez-collapsible-box.js

@@ -115,7 +115,7 @@ export class EzCollapsibleBox {
         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" : "") }),
+          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),

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -441,9 +441,9 @@ export class EzComboBox {
   }
   render() {
     var _a;
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
+    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("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)

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

@@ -133,11 +133,11 @@ export class EzDateInput {
     this.setInputValue();
   }
   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: 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("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(elementId, "calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
+      h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
   }
   static get is() { return "ez-date-input"; }
   static get encapsulation() { return "shadow"; }

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

@@ -186,11 +186,11 @@ export class EzDateTimeInput {
     this.setInputValue();
   }
   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: 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("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(elementId, "calendar"), onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
+      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 })));
   }
   static get is() { return "ez-date-time-input"; }
   static get encapsulation() { return "shadow"; }

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

@@ -57,8 +57,8 @@ export class EzFilterInput {
     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 },
+    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" })));
   }
   static get is() { return "ez-filter-input"; }

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

@@ -100,10 +100,10 @@ export class EzForm {
       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;
   }
@@ -168,7 +168,7 @@ export class EzForm {
     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]")));
@@ -181,7 +181,7 @@ export class EzForm {
   }
   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/collection/components/ez-form/structure/FormItem.js

@@ -3,7 +3,7 @@ import { buildField } from "../fieldbuilder/FieldBuilder";
 export 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);

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"; }