@sankhyalabs/ezui 2.3.12 → 2.3.14

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() {
@@ -895,7 +892,7 @@ var ChipSize;
   ChipSize[ChipSize["CHAR_LIMIT"] = 28] = "CHAR_LIMIT";
 })(ChipSize || (ChipSize = {}));
 
-const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box--focus--color:var(--color--primary-600);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}ez-icon{--ez-icon--color:inherit}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;color:var(--ez-collapsible-box--color);--ez-icon--color:var(--ez-collapsible-box__icon--color);margin-bottom:var(--space--medium, 12px)}.collapsible-box__title:focus{color:var(--ez-collapsible-box--focus--color);--ez-icon--color:var(--ez-collapsible-box--focus--color)}.collapsible-box__label{display:flex;white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;gap:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight)}.collapsible-box__label ez-icon{visibility:hidden;transition:0.25s linear}.collapsible-box__label:hover ez-icon{visibility:visible}.collapsible-box__text-edit{margin-left:6px}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--stretched{width:100%;justify-content:space-between}.collapsible-box__title--no-margin{margin-bottom:0}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
+const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box--focus--color:var(--color--primary-600);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}ez-icon{--ez-icon--color:inherit}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;color:var(--ez-collapsible-box--color);--ez-icon--color:var(--ez-collapsible-box__icon--color);margin-bottom:var(--space--medium, 12px)}.collapsible-box__title:focus{color:var(--ez-collapsible-box--focus--color);--ez-icon--color:var(--ez-collapsible-box--focus--color)}.collapsible-box__label{display:flex;white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;gap:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight)}.collapsible-box__label ez-icon{visibility:hidden;transition:0.25s linear}.collapsible-box__label:hover ez-icon{visibility:visible}.collapsible-box__text-edit{margin-left:6px}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--left{margin-right:auto}.collapsible-box__title--right{margin-left:auto}.collapsible-box__title--center{margin-left:auto;margin-right:auto}.collapsible-box__title--stretch{justify-content:space-between;width:100%}.collapsible-box__title--no-margin{margin-bottom:0}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
 
 let EzCollapsibleBox$1 = class extends HTMLElement$1 {
   constructor() {
@@ -920,9 +917,9 @@ let EzCollapsibleBox$1 = class extends HTMLElement$1 {
      */
     this.iconPlacement = "left";
     /**
-     * Se true o título irá ocupar toda a largura do componente.
+     * Define a posição do conteúdo do cabeçalho do componente.
      */
-    this.stretchTitle = false;
+    this.headerAlign = "left";
     /**
      * Se true mostra o ícone para remoção do componente.
      */
@@ -1013,10 +1010,9 @@ let EzCollapsibleBox$1 = class extends HTMLElement$1 {
     ElementIDUtils.addIDInfo(this._hostElement);
   }
   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" +
+    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.stretchTitle ? " collapsible-box__title--stretched" : "") +
-        (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" })) :
@@ -1473,8 +1469,8 @@ let EzComboBox$1 = class extends HTMLElement$1 {
   }
   render() {
     var _a;
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })), this.searchMode && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
+    ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })), this.searchMode && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
       ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
       : undefined), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("div", { class: "list-options", ref: elem => this._optionsList = elem }, this._visibleOptions.length === 0
       && h("div", { class: "message" }, !this._showLoading && h("span", { class: "message__no-result" }, this._textEmptyList), this._showLoading && h("div", { class: "message__loading" })), this.showOptionValue
@@ -1635,8 +1631,8 @@ let EzDateInput$1 = class extends HTMLElement$1 {
     this.setInputValue();
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -1842,8 +1838,8 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
     this.setInputValue();
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick() }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "calendar"), onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick() }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -2052,8 +2048,8 @@ let EzFilterInput$1 = class extends HTMLElement$1 {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.changeValue(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.changeValue(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -2330,7 +2326,7 @@ const buildField = (field) => {
 const FormItem = ({ source }) => {
   if ("items" in source) {
     const fieldSet = source;
-    return h("ez-collapsible-box", { label: source.label, "header-size": "large" }, fieldSet.items.map(fi => buildField(fi)));
+    return h("ez-collapsible-box", { label: source.label, "header-size": "large", key: source.label }, fieldSet.items.map(fi => buildField(fi)));
   }
   else {
     return buildField(source);
@@ -3009,10 +3005,10 @@ let EzForm$1 = class extends HTMLElement$1 {
       const tabs = allSheets.map((sheet, index) => {
         return { tabKey: sheet.name, label: sheet.label, index };
       });
-      const idTabSelector = `${this._dataElementIdEzForm}_internal_tabSelector`;
+      const idTabSelector = `selector`;
       result.push(h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
     }
-    const idFormSheet = `${this._dataElementIdEzForm}_${StringUtils$1.replaceAccentuatedChars(StringUtils$1.toCamelCase(currentSheet.label), false)}`;
+    const idFormSheet = `${StringUtils$1.replaceAccentuatedChars(StringUtils$1.toCamelCase(currentSheet.label), false)}_selectorContainer`;
     result.push(h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
     return result;
   }
@@ -3077,7 +3073,7 @@ let EzForm$1 = class extends HTMLElement$1 {
     this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
     this.processMetadata();
     const dataInfo = { dataUnit: this.dataUnit };
-    this._dataElementIdEzForm = ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
   componentDidRender() {
     this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")));
@@ -3090,7 +3086,7 @@ let EzForm$1 = class extends HTMLElement$1 {
   }
   buildIdTabSelector(tabs) {
     if (tabs) {
-      tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = `${this._dataElementIdEzForm}_${StringUtils$1.toCamelCase(tab.label)}`);
+      tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = StringUtils$1.toCamelCase(tab.label));
     }
     return tabs;
   }
@@ -118523,9 +118519,9 @@ let EzGrid$1 = class extends HTMLElement$1 {
   }
   buildDataElementId() {
     const dataInfo = { dataUnit: this.dataUnit };
-    const dataElementIdEzGrid = ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-    const dtInfo = { id: `${dataElementIdEzGrid}_ezGrid_pagination` };
-    ElementIDUtils.addIDInfo(this._refPaginationControl, null, dtInfo);
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    const dtInfo = { id: "ezGrid" };
+    ElementIDUtils.addIDInfo(this._refPaginationControl, "pagination", dtInfo);
   }
   previousPage() {
     if (this.dataUnit) {
@@ -118593,9 +118589,13 @@ let EzIcon$1 = class extends HTMLElement$1 {
       return h("img", { class: this.size, src: this.href });
     }
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElement, "icon");
+  }
   render() {
     return (h(Host, null, this.getIconContent()));
   }
+  get _hostElement() { return this; }
   static get style() { return ezIconCss; }
 };
 
@@ -118763,6 +118763,9 @@ let EzList$1 = class extends HTMLElement$1 {
   componentWillRender() {
     this.createList();
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+  }
   onDrop(ev, dragEndItem) {
     this.removeOverClass();
     this.setSelection(undefined);
@@ -119392,8 +119395,8 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
     this.setInputValue();
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }));
   }
   get _elem() { return this; }
   static get watchers() { return {
@@ -119635,7 +119638,7 @@ let EzRadioButton$1 = class extends HTMLElement$1 {
     this.ezChange.emit(this.value);
   }
   render() {
-    return (h(Host, null, this.label && h("label", { class: "label" }, this.label), h("div", { class: "form form--" + this.direction }, this._options.map((option, key) => h("div", { class: "form__group" }, h("input", { id: "rad" + key, class: "form__radio", name: "theradio", type: "radio", value: option.value, onChange: (ev) => { this.handleInputChange(ev); }, disabled: !this.enabled, checked: option.value === this.value }), h("label", { htmlFor: "rad" + key, class: "form__label" }, option.label))))));
+    return (h(Host, null, this.label && h("label", { class: "label" }, this.label), h("div", { class: "form form--" + this.direction }, this._options.map((option, key) => h("div", { class: "form__group" }, h("input", { id: "rad" + key, class: "form__radio", name: "theradio", type: "radio", value: option.value, onChange: (ev) => { this.handleInputChange(ev); }, disabled: !this.enabled, checked: option.value === this.value, "data-element-id": ElementIDUtils.getInternalIDInfo(`input_${option.value}`) }), h("label", { htmlFor: "rad" + key, class: "form__label" }, option.label))))));
   }
   get hostElement() { return this; }
   static get style() { return ezRadioButtonCss; }
@@ -119886,8 +119889,8 @@ let EzSearch$1 = class extends HTMLElement$1 {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));
   }
   ;
   get _elem() { return this; }
@@ -119971,7 +119974,6 @@ let EzTabselector$1 = class extends HTMLElement$1 {
     this.setFocusedBtn(false, tab.index);
   }
   componentWillRender() {
-    ElementIDUtils.addIDInfo(this._hostElem);
     if (!this._processedTabs) {
       this._processedTabs = [];
       if (this.tabs) {
@@ -120003,10 +120005,12 @@ let EzTabselector$1 = class extends HTMLElement$1 {
     this.updateScroll();
   }
   componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElem, "itemsSelector");
     this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
-      const elemIdTabSelector = this._hostElem.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-      const dataInfo = { id: `${elemIdTabSelector}_${StringUtils$1.toCamelCase(elem.id)}` };
-      ElementIDUtils.addIDInfo(elem, null, dataInfo);
+      var _a;
+      const label = (_a = elem.querySelector('span.tab-label')) === null || _a === void 0 ? void 0 : _a.innerText;
+      const dataInfo = { id: `${StringUtils$1.toCamelCase(label)}` };
+      ElementIDUtils.addIDInfo(elem, "itemSelector", dataInfo);
     });
   }
   handleSlotChange(ev) {
@@ -120264,10 +120268,10 @@ let EzTextArea$1 = class extends HTMLElement$1 {
     this.observeMode();
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
+    ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, null, h("div", { class: "textarea", ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
       h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode === "slim" ? "textarea--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })), this.canShowError && this.mode != "slim" &&
+      : null, h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo("input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode === "slim" ? "textarea--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })), this.canShowError && this.mode != "slim" &&
       h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   get _hostElement() { return this; }
@@ -120369,8 +120373,8 @@ let EzTextEdit$1 = class extends HTMLElement$1 {
     this.setStyledInput();
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
-    return (h(Host, null, h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }), h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), onInput: () => { this.calcSizeInput(this._newValue); }, class: "text-edit__form-input", value: this._newValue, ref: (elem) => this._inputElement = elem, mode: "slim", onEzChange: (evt) => this.setNewValue(evt === null || evt === void 0 ? void 0 : evt.detail), noBorder: true }), h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }), h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.cancelEdition.emit(); } })));
+    ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
+    return (h(Host, null, h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }), h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), onInput: () => { this.calcSizeInput(this._newValue); }, class: "text-edit__form-input", value: this._newValue, ref: (elem) => this._inputElement = elem, mode: "slim", onEzChange: (evt) => this.setNewValue(evt === null || evt === void 0 ? void 0 : evt.detail), noBorder: true }), h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }), h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.cancelEdition.emit(); } })));
   }
   get _element() { return this; }
   static get style() { return ezTextEditCss; }
@@ -120605,10 +120609,10 @@ let EzTextInput$1 = class extends HTMLElement$1 {
     }
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
+    ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
       h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
       h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }
   get _hostElement() { return this; }
@@ -120769,8 +120773,8 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
     }
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _elem() { return this; }
@@ -121329,7 +121333,7 @@ const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar
 const EzCardItem = /*@__PURE__*/proxyCustomElement(EzCardItem$1, [1,"ez-card-item",{"item":[16]}]);
 const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[516],"mode":[513]}]);
 const EzChip = /*@__PURE__*/proxyCustomElement(EzChip$1, [1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540]}]);
-const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"stretchTitle":[516,"stretch-title"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32]}]);
+const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32]}]);
 const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32]}]);
 const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513]}]);
 const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513]}]);

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

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

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ import { A as ApplicationUtils } from './ApplicationUtils-205ac4bc.js';
 import './DialogType-4059dc4d.js';
 import './CheckMode-bdb2ec19.js';
 
-const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box--focus--color:var(--color--primary-600);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}ez-icon{--ez-icon--color:inherit}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;color:var(--ez-collapsible-box--color);--ez-icon--color:var(--ez-collapsible-box__icon--color);margin-bottom:var(--space--medium, 12px)}.collapsible-box__title:focus{color:var(--ez-collapsible-box--focus--color);--ez-icon--color:var(--ez-collapsible-box--focus--color)}.collapsible-box__label{display:flex;white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;gap:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight)}.collapsible-box__label ez-icon{visibility:hidden;transition:0.25s linear}.collapsible-box__label:hover ez-icon{visibility:visible}.collapsible-box__text-edit{margin-left:6px}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--stretched{width:100%;justify-content:space-between}.collapsible-box__title--no-margin{margin-bottom:0}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
+const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box--focus--color:var(--color--primary-600);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}ez-icon{--ez-icon--color:inherit}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;color:var(--ez-collapsible-box--color);--ez-icon--color:var(--ez-collapsible-box__icon--color);margin-bottom:var(--space--medium, 12px)}.collapsible-box__title:focus{color:var(--ez-collapsible-box--focus--color);--ez-icon--color:var(--ez-collapsible-box--focus--color)}.collapsible-box__label{display:flex;white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;gap:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight)}.collapsible-box__label ez-icon{visibility:hidden;transition:0.25s linear}.collapsible-box__label:hover ez-icon{visibility:visible}.collapsible-box__text-edit{margin-left:6px}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--left{margin-right:auto}.collapsible-box__title--right{margin-left:auto}.collapsible-box__title--center{margin-left:auto;margin-right:auto}.collapsible-box__title--stretch{justify-content:space-between;width:100%}.collapsible-box__title--no-margin{margin-bottom:0}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
 
 let EzCollapsibleBox = class {
   constructor(hostRef) {
@@ -27,9 +27,9 @@ let EzCollapsibleBox = class {
      */
     this.iconPlacement = "left";
     /**
-     * Se true o título irá ocupar toda a largura do componente.
+     * Define a posição do conteúdo do cabeçalho do componente.
      */
-    this.stretchTitle = false;
+    this.headerAlign = "left";
     /**
      * Se true mostra o ícone para remoção do componente.
      */
@@ -120,10 +120,9 @@ let EzCollapsibleBox = class {
     ElementIDUtils.addIDInfo(this._hostElement);
   }
   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" +
+    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.stretchTitle ? " collapsible-box__title--stretched" : "") +
-        (this.value ? " collapsible-box__title--no-margin" : "") }), h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : "") }), !this._activeEditText ?
+        (this.value ? " collapsible-box__title--no-margin" : "") }), h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : ""), id: "toggleCollapsible" }), !this._activeEditText ?
       h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem }, h("span", null, this.label), this.editable &&
         h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: "Editar" }), this.removable &&
         h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: "Remover" })) :

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-7bc778b3.js';
-import { StringUtils } from '@sankhyalabs/core';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-7bc778b3.js';
+import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 
 const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{color:var(--ez-icon--color)}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{font-family:'ez-icons' !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ez-icon-2chevron-down:before{content:\"\\ea01\"}.ez-icon-2chevron-up:before{content:\"\\ea02\"}.ez-icon-account-outline:before{content:\"\\ea03\"}.ez-icon-account:before{content:\"\\ea04\"}.ez-icon-actions-sprite:before{content:\"\\ea05\"}.ez-icon-alert-circle-inverted:before{content:\"\\ea06\"}.ez-icon-alert-circle:before{content:\"\\ea07\"}.ez-icon-alert-mail:before{content:\"\\ea08\"}.ez-icon-alert-popup:before{content:\"\\ea09\"}.ez-icon-anexo:before{content:\"\\ea0a\"}.ez-icon-apps:before{content:\"\\ea0b\"}.ez-icon-arrow_back:before{content:\"\\ea0c\"}.ez-icon-arrow_downward:before{content:\"\\ea0d\"}.ez-icon-balance:before{content:\"\\ea0e\"}.ez-icon-bell-inverted:before{content:\"\\ea0f\"}.ez-icon-bell:before{content:\"\\ea10\"}.ez-icon-boleto:before{content:\"\\ea11\"}.ez-icon-business-center:before{content:\"\\ea12\"}.ez-icon-calendar-clock:before{content:\"\\ea13\"}.ez-icon-calendar:before{content:\"\\ea14\"}.ez-icon-cash-remove:before{content:\"\\ea15\"}.ez-icon-check-circle-inverted:before{content:\"\\ea16\"}.ez-icon-check-circle:before{content:\"\\ea17\"}.ez-icon-check:before{content:\"\\ea18\"}.ez-icon-chevron-down:before{content:\"\\ea19\"}.ez-icon-chevron-left:before{content:\"\\ea1a\"}.ez-icon-chevron-right:before{content:\"\\ea1b\"}.ez-icon-chevron-up:before{content:\"\\ea1c\"}.ez-icon-circle--medium:before{content:\"\\ea1d\"}.ez-icon-circle:before{content:\"\\ea1e\"}.ez-icon-cleaning:before{content:\"\\ea1f\"}.ez-icon-clipboard:before{content:\"\\ea20\"}.ez-icon-close:before{content:\"\\ea21\"}.ez-icon-cobrar:before{content:\"\\ea22\"}.ez-icon-configuration:before{content:\"\\ea23\"}.ez-icon-copy:before{content:\"\\ea24\"}.ez-icon-credit_card:before{content:\"\\ea25\"}.ez-icon-crop:before{content:\"\\ea26\"}.ez-icon-custom:before{content:\"\\ea27\"}.ez-icon-delete:before{content:\"\\ea28\"}.ez-icon-description:before{content:\"\\ea29\"}.ez-icon-dot-notification:before{content:\"\\ea2a\"}.ez-icon-dots-horizontal:before{content:\"\\ea2b\"}.ez-icon-dots-vertical:before{content:\"\\ea2c\"}.ez-icon-drag-indicator:before{content:\"\\ea2d\"}.ez-icon-dual-chevron-down:before{content:\"\\ea2e\"}.ez-icon-dual-chevron-up:before{content:\"\\ea2f\"}.ez-icon-edit-file:before{content:\"\\ea30\"}.ez-icon-edit-table:before{content:\"\\ea31\"}.ez-icon-edit-time:before{content:\"\\ea32\"}.ez-icon-edit:before{content:\"\\ea33\"}.ez-icon-email:before{content:\"\\ea34\"}.ez-icon-expand:before{content:\"\\ea35\"}.ez-icon-extrato:before{content:\"\\ea36\"}.ez-icon-eye-off:before{content:\"\\ea37\"}.ez-icon-eye:before{content:\"\\ea38\"}.ez-icon-favorite:before{content:\"\\ea39\"}.ez-icon-file-download:before{content:\"\\ea3a\"}.ez-icon-file-upload:before{content:\"\\ea3b\"}.ez-icon-filter:before{content:\"\\ea3c\"}.ez-icon-find-file:before{content:\"\\ea3d\"}.ez-icon-find-page:before{content:\"\\ea3e\"}.ez-icon-format-color-fill:before{content:\"\\ea3f\"}.ez-icon-graph_bar:before{content:\"\\ea40\"}.ez-icon-handshake:before{content:\"\\ea41\"}.ez-icon-help-inverted:before{content:\"\\ea42\"}.ez-icon-help:before{content:\"\\ea43\"}.ez-icon-home:before{content:\"\\ea44\"}.ez-icon-icons104:before{content:\"\\ea45\"}.ez-icon-language:before{content:\"\\ea46\"}.ez-icon-launch:before{content:\"\\ea47\"}.ez-icon-lightbulb:before{content:\"\\ea48\"}.ez-icon-list:before{content:\"\\ea49\"}.ez-icon-location:before{content:\"\\ea4a\"}.ez-icon-lock-outline:before{content:\"\\ea4b\"}.ez-icon-lock:before{content:\"\\ea4c\"}.ez-icon-menu:before{content:\"\\ea4d\"}.ez-icon-mid:before{content:\"\\ea4e\"}.ez-icon-minus:before{content:\"\\ea4f\"}.ez-icon-money-off:before{content:\"\\ea50\"}.ez-icon-money:before{content:\"\\ea51\"}.ez-icon-more:before{content:\"\\ea52\"}.ez-icon-north-west:before{content:\"\\ea53\"}.ez-icon-number:before{content:\"\\ea54\"}.ez-icon-ordem-ascendente:before{content:\"\\ea55\"}.ez-icon-ordem-descendente:before{content:\"\\ea56\"}.ez-icon-parcelar:before{content:\"\\ea57\"}.ez-icon-pause:before{content:\"\\ea58\"}.ez-icon-payments:before{content:\"\\ea59\"}.ez-icon-play:before{content:\"\\ea5a\"}.ez-icon-plus:before{content:\"\\ea5b\"}.ez-icon-power:before{content:\"\\ea5c\"}.ez-icon-print:before{content:\"\\ea5d\"}.ez-icon-push-pin:before{content:\"\\ea5e\"}.ez-icon-receipt:before{content:\"\\ea5f\"}.ez-icon-restore:before{content:\"\\ea60\"}.ez-icon-return:before{content:\"\\ea61\"}.ez-icon-save:before{content:\"\\ea62\"}.ez-icon-search:before{content:\"\\ea63\"}.ez-icon-settings-inverted:before{content:\"\\ea64\"}.ez-icon-settings:before{content:\"\\ea65\"}.ez-icon-share:before{content:\"\\ea66\"}.ez-icon-shield:before{content:\"\\ea67\"}.ez-icon-south-east:before{content:\"\\ea68\"}.ez-icon-sync:before{content:\"\\ea69\"}.ez-icon-table:before{content:\"\\ea6a\"}.ez-icon-text:before{content:\"\\ea6b\"}.ez-icon-timeline:before{content:\"\\ea6c\"}.ez-icon-timer-outline:before{content:\"\\ea6d\"}.ez-icon-tune:before{content:\"\\ea6e\"}.ez-icon-un-pin:before{content:\"\\ea6f\"}.ez-icon-unfold_less:before{content:\"\\ea70\"}.ez-icon-unfold_more:before{content:\"\\ea71\"}.ez-icon-user-circle:before{content:\"\\ea72\"}.ez-icon-warning-outline:before{content:\"\\ea73\"}.ez-icon-warning_triangle:before{content:\"\\ea74\"}.ez-icon-whatshot:before{content:\"\\ea75\"}.x-small--font{font-size:12px}.small--font{font-size:16px}.medium--font{font-size:20px}.large--font{font-size:24px}.x-large--font{font-size:30px}";
 
@@ -28,9 +28,13 @@ let EzIcon = class {
       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 getElement(this); }
 };
 EzIcon.style = ezIconCss;