@sankhyalabs/sankhyablocks 2.4.5 → 2.4.6

package/dist/cjs/snk-configurator_3.cjs.entry.js

@@ -94,7 +94,7 @@ const SnkConfigurator = class {
   render() {
     return (index.h("ez-modal", { opened: this._opened, "close-esc": false, "close-outside-click": false, "modal-size": "small" }, index.h("div", { class: "snk-configurator" }, index.h("div", { class: "snk-configurator__header" }, index.h("label", { class: "snk-configurator__title" }, this.getMessage("snkConfigurator.titleConfigurations")), index.h("div", { class: "snk-configurator__button-close" }, index.h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), index.h("div", { class: "snk-configurator__main" }, index.h("ez-radio-button", { class: "ez-margin-top--medium", label: this.getMessage("snkConfigurator.subTitleModeConfig"), value: this.getViewModeValue(), onEzChange: (evt) => this.onViewModeChanged(evt), enabled: this.enableModeConfig() }, index.h("ez-radio-button-option", { label: this.getMessage("snkConfigurator.labelGrid"), value: GRID_MODE.name }), index.h("ez-radio-button-option", { label: this.getMessage("snkConfigurator.labelForm"), value: FORM_MODE.name })), index.h("ez-button", { mode: "slim", label: this.viewMode === GRID_MODE.name
         ? this.getMessage("snkConfigurator.labelConfigGrid")
-        : this.getMessage("snkConfigurator.labelConfigForm"), class: "snk-configurator__button-config ez-button--primary", onClick: () => this.onClickOpenConfig() }), index.h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })))));
+        : this.getMessage("snkConfigurator.labelConfigForm"), class: "snk-configurator__button-config ez-button--primary", onClick: () => this.onClickOpenConfig(), id: "openConfigurator" }), index.h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })))));
   }
 };
 SnkConfigurator.style = snkConfiguratorCss;
@@ -141,7 +141,7 @@ const SnkFieldConfig = class {
     this._application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
   }
   componentDidLoad() {
-    core.ElementIDUtils.addIDInfo(this._element, this.fieldConfig.name);
+    core.ElementIDUtils.addIDInfo(this._element);
   }
   render() {
     if (this.fieldConfig == undefined) {
@@ -238,8 +238,12 @@ const SnkGrid = class {
         if (!this._dataUnit) {
           this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
             this._dataUnit = evt.detail;
+            this.addElementID();
           });
         }
+        else {
+          this.addElementID();
+        }
         this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
           this._dataState = evt.detail;
         });
@@ -254,19 +258,15 @@ const SnkGrid = class {
     this._headerTaskbarProcessor.process(headerTaskbarId, this.taskbarManager, this._dataState);
     this._topTaskbarProcessor.process("snkGridTopTaskbar", this.taskbarManager, this._dataState);
   }
-  componentDidLoad() {
+  addElementID() {
     const dataInfo = { dataUnit: this._dataUnit };
     core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
-  getDataElementId(suffix) {
-    const elemIdSnkGrid = this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-    return `${elemIdSnkGrid}_${suffix}`;
-  }
   render() {
     if (!this._dataUnit) {
       return undefined;
     }
-    return (index.h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, index.h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, index.h("snk-filter-bar", { dataUnit: this._dataUnit, "data-element-id": this.getDataElementId("internal_filter"), class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), index.h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), index.h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": this.getDataElementId("grid_top_taskbar"), key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), index.h("ez-grid", { ref: ref => this._grid = ref, "data-element-id": this.getDataElementId("internal_grid"), dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, index.h("snk-taskbar", { dataUnit: this._dataUnit, "data-element-id": this.getDataElementId("grid_left_taskBar"), buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), index.h("div", { class: "ez-col ez-col--sd-12" }, index.h("slot", { name: "SnkGridFooter" })), index.h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, index.h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
+    return (index.h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, index.h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, index.h("snk-filter-bar", { dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), index.h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), index.h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), index.h("ez-grid", { ref: ref => this._grid = ref, "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, index.h("snk-taskbar", { dataUnit: this._dataUnit, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), index.h("div", { class: "ez-col ez-col--sd-12" }, index.h("slot", { name: "SnkGridFooter" })), index.h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, index.h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
   }
   get _element() { return index.getElement(this); }
 };

package/dist/cjs/snk-crud.cjs.entry.js

@@ -63,10 +63,6 @@ const SnkCrud = class {
       this.setViewMode(GRID_MODE);
     }
   }
-  getDataElementId(suffix) {
-    const elemIdSnkCrud = this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-    return `${elemIdSnkCrud}_${suffix}`;
-  }
   componentWillLoad() {
     let parent = this._element.parentElement;
     while (parent) {
@@ -79,8 +75,12 @@ const SnkCrud = class {
         if (!this._dataUnit) {
           this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
             this._dataUnit = evt.detail;
+            this.addDataElementID();
           });
         }
+        else {
+          this.addDataElementID();
+        }
         this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
           this._dataState = evt.detail;
         });
@@ -93,12 +93,12 @@ const SnkCrud = class {
       this.configName = application.configName;
     }
   }
-  componentDidLoad() {
+  addDataElementID() {
     const dataInfo = { dataUnit: this._dataUnit };
     core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
   render() {
-    return (index.h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": this.getDataElementId("crud_ViewStack") }, index.h("stack-item", null, index.h("snk-grid", { ref: (ref) => this._snkGrid = ref, "data-element-id": this.getDataElementId("crud_grid"), configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, index.h("slot", { name: "SnkGridHeader" }), index.h("slot", { name: "SnkGridFooter" }), index.h("slot", { name: "SnkGridTaskBar" }))), index.h("stack-item", null, index.h("snk-form", { ref: (ref) => this._snkForm = ref, "data-element-id": this.getDataElementId("crud_form"), configName: this.configName, actionsList: this.actionsList, onExit: () => this.setViewMode(GRID_MODE), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, index.h("slot", { name: "SnkFormTaskBar" }))), index.h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._viewMode, onConfigSelected: (evt) => this.executeAction(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail) })));
+    return (index.h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, index.h("stack-item", null, index.h("snk-grid", { ref: (ref) => this._snkGrid = ref, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, index.h("slot", { name: "SnkGridHeader" }), index.h("slot", { name: "SnkGridFooter" }), index.h("slot", { name: "SnkGridTaskBar" }))), index.h("stack-item", null, index.h("snk-form", { ref: (ref) => this._snkForm = ref, "data-element-id": "crud_form", configName: this.configName, actionsList: this.actionsList, onExit: () => this.setViewMode(GRID_MODE), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, index.h("slot", { name: "SnkFormTaskBar" }))), index.h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._viewMode, onConfigSelected: (evt) => this.executeAction(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail) })));
   }
   get _element() { return index.getElement(this); }
 };

package/dist/cjs/snk-filter-bar_7.cjs.entry.js

@@ -165,9 +165,6 @@ const SnkFilterBar = class {
     if (this._element) {
       const dataInfo = { dataUnit: this.dataUnit };
       core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-      const dataElementIdFilterBar = this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-      this._idSnkFilterItem = dataElementIdFilterBar;
-      this._idSnkFilterList = dataElementIdFilterBar;
     }
   }
   processPendingFilter() {
@@ -484,7 +481,7 @@ const SnkFilterBar = class {
     if (!this.dataUnit || !this.filterConfig || this.filterConfig.length === 0) {
       return undefined;
     }
-    return (index.h(index.Host, null, index.h("ez-scroller", { direction: "horizontal", activeShadow: true, locked: this.scrollerLocked }, this.getFilterItems()), index.h("snk-filter-list", { id: APPLIED_FILTERS, onFocusin: () => this.itemFocused(APPLIED_FILTERS), items: this.getAppliedListItems(), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyAppliedFiltersList"), findFilterText: this.getMessage("snkFilterBar.findFilter"), iconName: "filter", class: "ez-padding-left--medium", buttonClass: this.getActiveClass(), onSnkItemSelected: evt => this.appliedFilterHandler(evt.detail), "data-element-id": this._idSnkFilterList }), index.h("snk-filter-list", { id: ADD_FILTER, onFocusin: () => this.itemFocused(ADD_FILTER), items: this.getAddListItems(), label: this.getMessage("snkFilterBar.addFilter"), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyFiltersList"), findFilterText: this.getMessage("snkFilterBar.findField"), class: "ez-padding-left--medium", onSnkItemSelected: evt => this.addFilterHandler(evt.detail), "data-element-id": this._idSnkFilterList }, index.h("ez-icon", { slot: "leftIcon", class: "ez-padding-right--small", iconName: "plus" }))));
+    return (index.h(index.Host, null, index.h("ez-scroller", { direction: "horizontal", activeShadow: true, locked: this.scrollerLocked }, this.getFilterItems()), index.h("snk-filter-list", { id: APPLIED_FILTERS, onFocusin: () => this.itemFocused(APPLIED_FILTERS), items: this.getAppliedListItems(), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyAppliedFiltersList"), findFilterText: this.getMessage("snkFilterBar.findFilter"), iconName: "filter", class: "ez-padding-left--medium", buttonClass: this.getActiveClass(), onSnkItemSelected: evt => this.appliedFilterHandler(evt.detail), "data-element-id": "apppliedFilters" }), index.h("snk-filter-list", { id: ADD_FILTER, onFocusin: () => this.itemFocused(ADD_FILTER), items: this.getAddListItems(), label: this.getMessage("snkFilterBar.addFilter"), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyFiltersList"), findFilterText: this.getMessage("snkFilterBar.findField"), class: "ez-padding-left--medium", onSnkItemSelected: evt => this.addFilterHandler(evt.detail), "data-element-id": "addFilters" }, index.h("ez-icon", { slot: "leftIcon", class: "ez-padding-right--small", iconName: "plus" }))));
   }
   get _element() { return index.getElement(this); }
   static get watchers() { return {
@@ -637,9 +634,7 @@ const SnkFilterItem = class {
   componentDidLoad() {
     if (this._filterItemElement) {
       core.ElementIDUtils.addIDInfo(this._filterItemElement);
-      const dataElementIdDoFilterItem = this._filterItemElement.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-      this._idSnkFilterDetail = `${dataElementIdDoFilterItem}_${this.config.id}`;
-      this._idEzChip = `${dataElementIdDoFilterItem}_${this.config.id}`;
+      this._idSnkFilterDetail = `filterDetail_${this.config.id}`;
     }
   }
   componentDidRender() {
@@ -672,7 +667,7 @@ const SnkFilterItem = class {
   }
   render() {
     const leftIcon = this.getLeftIconName();
-    return (index.h(index.Host, null, index.h("ez-chip", { ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined, "data-element-id": this._idEzChip }, leftIcon ? index.h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, index.h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon" })), index.h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, index.h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
+    return (index.h(index.Host, null, index.h("ez-chip", { ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined, id: this.config.id }, leftIcon ? index.h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, index.h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon", id: "removeFilter" })), index.h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, index.h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
   }
   get _filterItemElement() { return index.getElement(this); }
   static get watchers() { return {
@@ -739,13 +734,15 @@ const SnkFilterList = class {
         this._popover.remove();
       }
     }
+    this._element.querySelectorAll("button.sc-snk-filter-bar").forEach((itemListElement) => {
+      const dataElement = { id: itemListElement.getAttribute("name") };
+      itemListElement === null || itemListElement === void 0 ? void 0 : itemListElement.removeAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+      core.ElementIDUtils.addIDInfoIfNotExists(itemListElement, "filterItemList", dataElement);
+    });
   }
   buildItemElement(item) {
     const itemId = ++this._selectableItemsCount;
-    if (this._buttonElement) {
-      core.ElementIDUtils.addIDInfo(this._buttonElement);
-    }
-    return (index.h("button", { id: `filter-item${itemId}`, onFocusin: () => this._preselection = itemId, class: `ez-col ez-col--sd-12 ez-align--middle ez-padding--small sc-snk-filter-bar snk-filter-bar__filter-list-item`, onClick: () => this.itemSelected(item.name), ref: (el) => this._buttonElement = el }, item.iconName ? index.h("ez-icon", { iconName: item.iconName, size: "small", class: `ez-padding-right--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__icon ${item.iconClass || ""}` }) : undefined, index.h("div", { class: `ez-text ez-text--medium ez-text--primary ez-padding--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__label ${item.labelClass || ""}` }, item.label)));
+    return (index.h("button", { id: `filter-item${itemId}`, onFocusin: () => this._preselection = itemId, class: `ez-col ez-col--sd-12 ez-align--middle ez-padding--small sc-snk-filter-bar snk-filter-bar__filter-list-item`, onClick: () => this.itemSelected(item.name), name: item.label, key: itemId }, item.iconName ? index.h("ez-icon", { iconName: item.iconName, size: "small", class: `ez-padding-right--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__icon ${item.iconClass || ""}` }) : undefined, index.h("div", { class: `ez-text ez-text--medium ez-text--primary ez-padding--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__label ${item.labelClass || ""}` }, item.label)));
   }
   itemSelected(itemName) {
     if (itemName === SHOW_MORE_ITEM_NAME) {
@@ -806,7 +803,7 @@ const SnkFilterList = class {
     }
   }
   render() {
-    return (index.h(index.Host, { class: "ez-flex ez-flex--column" }, index.h("ez-button", { class: this.buttonClass, label: this.label, onClick: () => this.buttonClick(), mode: this.iconName ? "icon" : undefined, iconName: this.iconName, size: "small" }, index.h("slot", { name: "leftIcon" })), index.h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, index.h("div", { class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem }, index.h("ez-filter-input", { ref: ref => this._filterInput = ref, mode: "slim", label: this.findFilterText, value: this._filterArgument, onEzChange: (evt) => this._filterArgument = evt.detail, onFocus: () => this._preselection = 0 }), this.getFilterItems(), index.h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), this.items ? this.getFooterItems().map(item => this.buildItemElement(item)) : undefined))));
+    return (index.h(index.Host, { class: "ez-flex ez-flex--column" }, index.h("ez-button", { class: this.buttonClass, label: this.label, onClick: () => this.buttonClick(), mode: this.iconName ? "icon" : undefined, iconName: this.iconName, size: "small" }, index.h("slot", { name: "leftIcon" })), index.h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, index.h("div", { class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem }, index.h("ez-filter-input", { ref: ref => this._filterInput = ref, "data-element-id": "serachFilters", mode: "slim", label: this.findFilterText, value: this._filterArgument, onEzChange: (evt) => this._filterArgument = evt.detail, onFocus: () => this._preselection = 0 }), this.getFilterItems(), index.h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), this.items ? this.getFooterItems().map(item => this.buildItemElement(item)) : undefined))));
   }
   get _element() { return index.getElement(this); }
 };
@@ -972,7 +969,7 @@ const EzGridConfig = class {
     this._columListItems = [visibleGroup, hiddenGroup];
   }
   buildColumnListSlot(item, group) {
-    const dataElementId = `${this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)}_configItem_${core.StringUtils.toCamelCase(item.label)}`;
+    const dataElementId = `configItem_${core.StringUtils.replaceAccentuatedChars(core.StringUtils.toCamelCase(item.label))}`;
     return (index.h("div", null, index.h("ez-check", { mode: 'switch', id: 'switch' + ((item === null || item === void 0 ? void 0 : item.label) || '') + ((group === null || group === void 0 ? void 0 : group.group) || ''), value: group.group === this.getMessage("snkGridConfig.group.visible"), "data-element-id": dataElementId, onEzChange: (evt) => { this.switchColumnGroup(evt, item); } })));
   }
   buildOrderListSlot(item) {
@@ -1335,7 +1332,7 @@ const EzGridConfig = class {
     core.ElementIDUtils.addIDInfo(this._element);
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "grid-config__header" }, index.h("div", { class: "title-container" }, index.h("div", { class: "" }, index.h("label", { class: "title" }, this.getMessage("snkGridConfig.gridConfiguration")), index.h("label", { class: "subtitle" }, this.getMessage("snkGridConfig.columnVisibilityOrder"))), index.h("div", { class: "button-close" }, index.h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), index.h("div", { class: "tabselector-container" }, index.h("ez-tabselector", { selectedIndex: this.selectedIndex, onEzChange: (evt) => { this.handleTabChange(evt.detail); }, tabs: this.getColumnNames() })), index.h("div", null, index.h("ez-text-input", { ref: (el) => this._searchElement = el, label: this.getMessage("snkGridConfig.findColumn"), onKeyUp: (evt) => this.locateColumn(evt) }, index.h("ez-icon", { slot: "leftIcon", size: "medium", iconName: "search" })))), index.h("div", { class: "grid-config__main" }, index.h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedIndex === 0 ? "" : "hidden", dataSource: this._columListItems, onEzChange: (evt) => this.handleColumnListChange(evt), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }), index.h("div", { class: this.selectedIndex === 1 ? "group-name" : "hidden" }, this.getMessage("snkGridConfig.info.sortingSequence")), index.h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedIndex === 1 ? "height-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: (evt) => this.handleOrderListChange(evt), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })), index.h("div", { class: "grid-config__footer" }, index.h("ez-button", { class: "padding-right--medium", label: this.getMessage("snkGridConfig.cancel"), onClick: () => this.closeConfig() }), index.h("ez-button", { label: this.getMessage("snkGridConfig.complete"), class: "ez-button--primary", onClick: () => this.finish() }))));
+    return (index.h(index.Host, null, index.h("div", { class: "grid-config__header" }, index.h("div", { class: "title-container" }, index.h("div", { class: "" }, index.h("label", { class: "title" }, this.getMessage("snkGridConfig.gridConfiguration")), index.h("label", { class: "subtitle" }, this.getMessage("snkGridConfig.columnVisibilityOrder"))), index.h("div", { class: "button-close" }, index.h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), index.h("div", { class: "tabselector-container" }, index.h("ez-tabselector", { selectedIndex: this.selectedIndex, onEzChange: (evt) => { this.handleTabChange(evt.detail); }, tabs: this.getColumnNames() })), index.h("div", null, index.h("ez-text-input", { "data-element-id": "searchColums", ref: (el) => this._searchElement = el, label: this.getMessage("snkGridConfig.findColumn"), onKeyUp: (evt) => this.locateColumn(evt) }, index.h("ez-icon", { slot: "leftIcon", size: "medium", iconName: "search" })))), index.h("div", { class: "grid-config__main" }, index.h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedIndex === 0 ? "" : "hidden", dataSource: this._columListItems, onEzChange: (evt) => this.handleColumnListChange(evt), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true, "data-element-id": "configCols" }), index.h("div", { class: this.selectedIndex === 1 ? "group-name" : "hidden" }, this.getMessage("snkGridConfig.info.sortingSequence")), index.h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedIndex === 1 ? "height-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: (evt) => this.handleOrderListChange(evt), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item), "data-element-id": "configDataOrder" })), index.h("div", { class: "grid-config__footer" }, index.h("ez-button", { class: "padding-right--medium", label: this.getMessage("snkGridConfig.cancel"), onClick: () => this.closeConfig() }), index.h("ez-button", { label: this.getMessage("snkGridConfig.complete"), class: "ez-button--primary", onClick: () => this.finish() }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _element() { return index.getElement(this); }
@@ -1480,12 +1477,10 @@ const SnkTaskbar = class {
     }
   }
   getIdElemBtnNative(taskbarElem) {
-    const elemIdTaskbar = this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-    return `${elemIdTaskbar}_${core.StringUtils.toCamelCase(taskbarElem)}`;
+    return core.StringUtils.toCamelCase(taskbarElem);
   }
   getIdElemBtnCustom(btnCustom) {
-    const elemIdTaskbar = this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-    return `${elemIdTaskbar}_${core.StringUtils.toCamelCase(btnCustom.name)}`;
+    return core.StringUtils.toCamelCase(btnCustom.name);
   }
   isDivider(element) {
     var _a;

package/dist/cjs/snk-form-config.cjs.entry.js

@@ -242,7 +242,7 @@ const SnkFormConfig = class {
     var _a;
     return ((_a = group.fields) === null || _a === void 0 ? void 0 : _a.length) ? group.fields.map((field) => {
       var _a, _b;
-      return index.h("div", { key: field.name, class: this.getFieldConfigStyle(field), "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, index.h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, modeInsertion: false, fieldConfig: field, "data-element-id": this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), dataUnit: this.dataUnit, isConfigActive: ((_a = this._fieldConfigSelected) === null || _a === void 0 ? void 0 : _a.name) === field.name }), ((_b = this._fieldConfigSelected) === null || _b === void 0 ? void 0 : _b.name) === field.name &&
+      return index.h("div", { key: field.name, class: this.getFieldConfigStyle(field), "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, index.h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, modeInsertion: false, fieldConfig: field, dataUnit: this.dataUnit, isConfigActive: ((_a = this._fieldConfigSelected) === null || _a === void 0 ? void 0 : _a.name) === field.name, id: field.name }), ((_b = this._fieldConfigSelected) === null || _b === void 0 ? void 0 : _b.name) === field.name &&
         index.h("div", { class: "ez-flex form-config__config-options" }, index.h("snk-config-options", { idConfig: field.name, dataUnit: this.dataUnit, fieldConfig: this._fieldConfigSelected, "data-element-id": this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), onConfigOptionsChanged: (evt) => this.handleconfigOptionsChanged(evt.detail) })));
     }) : index.h("div", { class: "form-config__add-group-container" }, index.h("div", { class: "form-config__add-group-content" }, index.h("div", { class: "form-config__add-group-label" }, index.h("label", { class: "ez-text ez-text--center ez-text--medium ez-text--primary ez-text--bold" }, this.getMessage("snkFormConfig.form.labelDropField")))));
   }
@@ -955,7 +955,7 @@ const SnkFormConfig = class {
     const configOptions = this._formConfigOptions.map((option) => {
       return { value: option.origin, label: option.name };
     });
-    return (index.h(index.Host, null, index.h("div", { class: "ez-row ez-padding--medium" }, index.h("div", { class: "ez-col ez-col--sd-7 ez-col--tb-9 ez-align--middle" }, index.h("ez-button", { mode: "icon", iconName: "arrow_back", class: "ez-padding--small", size: "small", onClick: () => this.closeFormConfig() }), index.h("h1", { class: "ez-title ez-title--extra-large ez-padding--small" }, this.getMessage("snkFormConfig.title")), index.h("ez-actions-button", { class: "form-config__actions-button ez-margin-left--medium", value: (_a = this._optionFormConfigSelected) === null || _a === void 0 ? void 0 : _a.origin, showLabel: true, displayIcon: "chevron-down", checkOption: true, size: "small", actions: configOptions, onEzAction: (evt) => this.controlSelectFormConfig(evt) })), index.h("div", { class: "ez-col ez-col--sd-5 ez-col--tb-3 ez-align--middle ez-align--right" }, this._formConfigChanged === true && this._optionFormConfigChanged === false &&
+    return (index.h(index.Host, null, index.h("div", { class: "ez-row ez-padding--medium" }, index.h("div", { class: "ez-col ez-col--sd-7 ez-col--tb-9 ez-align--middle" }, index.h("ez-button", { mode: "icon", iconName: "arrow_back", class: "ez-padding--small", size: "small", onClick: () => this.closeFormConfig(), id: "formConfigToBack" }), index.h("h1", { class: "ez-title ez-title--extra-large ez-padding--small" }, this.getMessage("snkFormConfig.title")), index.h("ez-actions-button", { class: "form-config__actions-button ez-margin-left--medium", value: (_a = this._optionFormConfigSelected) === null || _a === void 0 ? void 0 : _a.origin, showLabel: true, displayIcon: "chevron-down", checkOption: true, size: "small", actions: configOptions, onEzAction: (evt) => this.controlSelectFormConfig(evt), id: "selectConfig" })), index.h("div", { class: "ez-col ez-col--sd-5 ez-col--tb-3 ez-align--middle ez-align--right" }, this._formConfigChanged === true && this._optionFormConfigChanged === false &&
       index.h("div", { class: "ez-row ez-align--middle ez-align--right" }, index.h("ez-button", { label: "Cancelar", class: "ez-padding-left--medium", size: "small", onClick: () => this.cancelChangeConfig() }), index.h("ez-button", { label: "Salvar", class: "ez-button--primary ez-padding-left--medium", size: "small", onClick: () => this.saveConfig() }, index.h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "save" }))), this._optionFormConfigChanged === true &&
       index.h("div", { class: "ez-row ez-align--middle ez-align--right" }, index.h("ez-button", { label: "Cancelar", class: "ez-padding-left--medium", size: "small", onClick: () => this.cancelChangeOptionConfig() }), index.h("ez-button", { label: this.getMessage("snkFormConfig.applyConfig"), class: "ez-button--primary ez-padding-left--medium", size: "small", onClick: () => this.applyOptionConfig() })))), index.h("div", { class: "ez-row ez-padding--medium", ref: ref => this._sortableContainer = ref }, index.h("div", { class: "form-config__tab-container ez-col ez-col--sd-9 ez-col--tb-9 ez-padding-right--medium" }, ((_b = this._layoutFormConfig) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
       index.h("section", { class: "ez-box__container", ref: ref => this._formContainer = ref }, index.h("snk-tab-config", { ref: ref => this._tabConfig = ref, selectedIndex: this._tabSelected, onEzTabChange: (ev) => this.changeTabSelected(ev.detail), onEzOrderChange: (ev) => this.changeTabOrder(ev.detail), onEditionTitleTab: (ev) => this.changeTabLabel(ev), onDeleteTab: (ev) => this.handleDeleteTab(ev), onHideTab: (ev) => this.changeHideTab(ev), onCanStartDrag: () => this.handleCanStartDragTab() }, this._layoutFormConfig.map((tab) => index.h("snk-tab", { tabKey: tab.tab, label: tab.tab, visible: tab.visible }))), this._layoutFormConfig.map((tab, indexTab) => index.h("div", { id: "tab" + indexTab, "data-draggable-parent": "group", class: this._tabSelected === indexTab
@@ -970,8 +970,8 @@ const SnkFormConfig = class {
         else {
           return index.h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, index.h("label", { class: "ez-text ez-text--secondary ez-margin-vertical--small" }, this.getMessage("snkFormConfig.form.subTitleInfo")), index.h("div", { id: CONTAINER_ID.withoutGroup, class: "ez-row", "data-draggable-parent": "field" }, this.getFieldsByGroup(group)), index.h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" }));
         }
-      }), this.renderTempGroupByTab(tab.tab))), index.h("div", { class: "form-config__btn-add-group ez-row" }, index.h("div", { class: "form-config__btn-add-group-container ez-col ez-col--sd-12 ez-col--tb-12 ez-align--center" }, index.h("ez-button", { label: this.getMessage("snkFormConfig.form.labelNewGroup"), class: "ez-padding-horizontal--small ez-button--primary", size: "small", onClick: () => this.addNewGroup() }, index.h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "plus" })))))), index.h("div", { class: "form-config__fields-available ez-col ez-col--sd-3 ez-col--tb-3" }, index.h("section", { class: "ez-box__container ez-col ez-col--pn-12" }, index.h("h1", { class: "ez-title ez-title--large ez-title--primary ez-padding-bottom--medium" }, this.getMessage("snkFormConfig.availableFields.title")), index.h("ez-filter-input", { ref: ref => this._filterFieldsAvailable = ref, label: this.getMessage("snkFormConfig.availableFields.labelSearchField"), onEzChange: evt => this.onFilterChange(evt.detail) }), index.h("span", { class: "ez-box__label-counter ez-text ez-text--medium ez-text--primary ez-margin-bottom--medium" }, this.handleLabelCounter((_c = this._fieldsAvailable) === null || _c === void 0 ? void 0 : _c.length)), ((_d = this._layoutFormConfig) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
-      index.h("div", { id: CONTAINER_ID.fieldsAvailable, class: "ez-row", "data-draggable-parent": "field" }, this.orderFieldsAvailable(this._fieldsAvailable).map((field) => index.h("div", { key: field.name, class: this._fieldsAvailableStyle, "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, index.h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, dataUnit: this.dataUnit, fieldConfig: field })))))))));
+      }), this.renderTempGroupByTab(tab.tab))), index.h("div", { class: "form-config__btn-add-group ez-row" }, index.h("div", { class: "form-config__btn-add-group-container ez-col ez-col--sd-12 ez-col--tb-12 ez-align--center" }, index.h("ez-button", { label: this.getMessage("snkFormConfig.form.labelNewGroup"), class: "ez-padding-horizontal--small ez-button--primary", size: "small", onClick: () => this.addNewGroup() }, index.h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "plus" })))))), index.h("div", { class: "form-config__fields-available ez-col ez-col--sd-3 ez-col--tb-3" }, index.h("section", { class: "ez-box__container ez-col ez-col--pn-12" }, index.h("h1", { class: "ez-title ez-title--large ez-title--primary ez-padding-bottom--medium" }, this.getMessage("snkFormConfig.availableFields.title")), index.h("ez-filter-input", { id: "searchFields", ref: ref => this._filterFieldsAvailable = ref, label: this.getMessage("snkFormConfig.availableFields.labelSearchField"), onEzChange: evt => this.onFilterChange(evt.detail) }), index.h("span", { class: "ez-box__label-counter ez-text ez-text--medium ez-text--primary ez-margin-bottom--medium" }, this.handleLabelCounter((_c = this._fieldsAvailable) === null || _c === void 0 ? void 0 : _c.length)), ((_d = this._layoutFormConfig) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
+      index.h("div", { id: CONTAINER_ID.fieldsAvailable, class: "ez-row", "data-draggable-parent": "field" }, this.orderFieldsAvailable(this._fieldsAvailable).map((field) => index.h("div", { key: field.name, class: this._fieldsAvailableStyle, "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, index.h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, dataUnit: this.dataUnit, fieldConfig: field, id: field.name })))))))));
   }
   get _element() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -149,10 +149,6 @@ const SnkForm = class {
     const dataInfo = { dataUnit: this._dataUnit };
     core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
-  getDataElementId(suffix) {
-    const elemIdSnkTaskBar = this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-    return `${elemIdSnkTaskBar}_${suffix}`;
-  }
   componentWillLoad() {
     this._application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
     let parent = this._element.parentElement;
@@ -196,8 +192,8 @@ const SnkForm = class {
     if (!this._dataUnit || !this._dataState) {
       return undefined;
     }
-    return (index.h("section", { class: "snk-form" }, index.h("div", { class: "snk-form__header snk-form__header--fixed ez-row" }, index.h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, index.h("ez-button", { title: this.getMessage("snkForm.goBackTitle"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm() }), index.h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.getMessage("snkForm.title"))), index.h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, index.h("snk-taskbar", { key: "formTaskbar", "data-element-id": this.getDataElementId("form_taskbar"), configName: this.configName, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.actionsList, primaryButton: ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", dataUnit: this._dataUnit }))), index.h("section", null, index.h("div", { class: "ez-row" }, index.h("div", { class: "ez-col ez-col--sd-12" }, index.h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, "data-element-id": this.getDataElementId("internal_form"), dataUnit: this._dataUnit, config: this.getFormConfig(), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
-      index.h("snk-form-config", { dataUnit: this._dataUnit, formConfig: this.getFormConfig(), "data-element-id": this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), configName: this.configName, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigClose: () => this.closeConfig() }))))));
+    return (index.h("section", { class: "snk-form" }, index.h("div", { class: "snk-form__header snk-form__header--fixed ez-row" }, index.h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, index.h("ez-button", { title: this.getMessage("snkForm.goBackTitle"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm(), "data-element-id": "formToBack" }), index.h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.getMessage("snkForm.title"))), index.h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, index.h("snk-taskbar", { key: "formTaskbar", "data-element-id": "form", configName: this.configName, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.actionsList, primaryButton: ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", dataUnit: this._dataUnit }))), index.h("section", null, index.h("div", { class: "ez-row" }, index.h("div", { class: "ez-col ez-col--sd-12" }, index.h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, "data-element-id": "embedded", dataUnit: this._dataUnit, config: this.getFormConfig(), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
+      index.h("snk-form-config", { dataUnit: this._dataUnit, formConfig: this.getFormConfig(), configName: this.configName, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigClose: () => this.closeConfig() }))))));
   }
   get _element() { return index.getElement(this); }
 };

package/dist/cjs/snk-pesquisa.cjs.entry.js

@@ -304,7 +304,7 @@ const SnkPesquisa = class {
   }
   render() {
     var _a;
-    return (index.h(index.Host, null, index.h("div", { class: "snk-pesquisa" }, index.h("div", { class: "snk-pesquisa__input" }, index.h("ez-text-input", { label: "Buscar", class: "ez-margin-right--medium", canShowError: false, ref: (ref) => this._textInput = ref, onEzChange: (event) => this.onChangeValue(event), value: this.argument }, index.h("ez-icon", { slot: "leftIcon", iconName: "search" }), this.argument && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value)
+    return (index.h(index.Host, null, index.h("div", { class: "snk-pesquisa" }, index.h("div", { class: "snk-pesquisa__input" }, index.h("ez-text-input", { label: "Buscar", class: "ez-margin-right--medium", canShowError: false, ref: (ref) => this._textInput = ref, onEzChange: (event) => this.onChangeValue(event), value: this.argument, "data-element-id": "searchInput" }, index.h("ez-icon", { slot: "leftIcon", iconName: "search" }), this.argument && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value)
       ? index.h("button", { slot: "rightIcon", class: "snk-pesquisa__btn", onClick: () => this.clearSearch() }, index.h("ez-icon", { iconName: "close" }))
       : undefined), index.h("ez-button", { class: "ez-button--primary", label: "Pesquisar", onClick: () => this.onClickSearch() })), index.h("label", { class: "snk-pesquisa__records" }, this.getMessageView()), index.h("div", { class: "snk-pesquisa__content" }, this._itemList && this._itemList.map((item) => {
       return (index.h("ez-card-item", { onEzClick: (event) => this.createOption(event.detail), item: item }));

package/dist/cjs/snk-tab-config.cjs.entry.js

@@ -300,6 +300,13 @@ const SnkTabConfig = class {
     this.updateScroll();
     this.controlSortableTab();
   }
+  componentDidLoad() {
+    core.ElementIDUtils.addIDInfo(this._hostElem, "itemConfig");
+    this._processedTabs.forEach((tab, index) => {
+      const dataID = { id: tab.label };
+      core.ElementIDUtils.addIDInfo(this._hostElem.querySelector(`#tab${index}`), "itemConfig", dataID);
+    });
+  }
   render() {
     return (index.h(index.Host, null, index.h("button", { class: "tab-config__backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), index.h("div", { class: "tab-config__lower-bar" }), index.h("div", { class: "tab-config__scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev), "data-draggable-parent": "tab" }, this._processedTabs.map((tab, index$1) => {
       const tabId = "tab" + index$1;

package/dist/collection/components/snk-configurator/snk-configurator.js

@@ -81,7 +81,7 @@ export class SnkConfigurator {
   render() {
     return (h("ez-modal", { opened: this._opened, "close-esc": false, "close-outside-click": false, "modal-size": "small" }, h("div", { class: "snk-configurator" }, h("div", { class: "snk-configurator__header" }, h("label", { class: "snk-configurator__title" }, this.getMessage("snkConfigurator.titleConfigurations")), h("div", { class: "snk-configurator__button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "snk-configurator__main" }, h("ez-radio-button", { class: "ez-margin-top--medium", label: this.getMessage("snkConfigurator.subTitleModeConfig"), value: this.getViewModeValue(), onEzChange: (evt) => this.onViewModeChanged(evt), enabled: this.enableModeConfig() }, h("ez-radio-button-option", { label: this.getMessage("snkConfigurator.labelGrid"), value: GRID_MODE.name }), h("ez-radio-button-option", { label: this.getMessage("snkConfigurator.labelForm"), value: FORM_MODE.name })), h("ez-button", { mode: "slim", label: this.viewMode === GRID_MODE.name
         ? this.getMessage("snkConfigurator.labelConfigGrid")
-        : this.getMessage("snkConfigurator.labelConfigForm"), class: "snk-configurator__button-config ez-button--primary", onClick: () => this.onClickOpenConfig() }), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })))));
+        : this.getMessage("snkConfigurator.labelConfigForm"), class: "snk-configurator__button-config ez-button--primary", onClick: () => this.onClickOpenConfig(), id: "openConfigurator" }), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })))));
   }
   static get is() { return "snk-configurator"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/snk-crud/snk-crud.js

@@ -59,10 +59,6 @@ export class SnkCrud {
       this.setViewMode(GRID_MODE);
     }
   }
-  getDataElementId(suffix) {
-    const elemIdSnkCrud = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-    return `${elemIdSnkCrud}_${suffix}`;
-  }
   componentWillLoad() {
     let parent = this._element.parentElement;
     while (parent) {
@@ -75,8 +71,12 @@ export class SnkCrud {
         if (!this._dataUnit) {
           this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
             this._dataUnit = evt.detail;
+            this.addDataElementID();
           });
         }
+        else {
+          this.addDataElementID();
+        }
         this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
           this._dataState = evt.detail;
         });
@@ -89,12 +89,12 @@ export class SnkCrud {
       this.configName = application.configName;
     }
   }
-  componentDidLoad() {
+  addDataElementID() {
     const dataInfo = { dataUnit: this._dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
   render() {
-    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": this.getDataElementId("crud_ViewStack") }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "data-element-id": this.getDataElementId("crud_grid"), configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { ref: (ref) => this._snkForm = ref, "data-element-id": this.getDataElementId("crud_form"), configName: this.configName, actionsList: this.actionsList, onExit: () => this.setViewMode(GRID_MODE), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, h("slot", { name: "SnkFormTaskBar" }))), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._viewMode, onConfigSelected: (evt) => this.executeAction(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail) })));
+    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { ref: (ref) => this._snkForm = ref, "data-element-id": "crud_form", configName: this.configName, actionsList: this.actionsList, onExit: () => this.setViewMode(GRID_MODE), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, h("slot", { name: "SnkFormTaskBar" }))), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._viewMode, onConfigSelected: (evt) => this.executeAction(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail) })));
   }
   static get is() { return "snk-crud"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/snk-filter-bar/filter-item/snk-filter-item.js

@@ -142,9 +142,7 @@ export class SnkFilterItem {
   componentDidLoad() {
     if (this._filterItemElement) {
       ElementIDUtils.addIDInfo(this._filterItemElement);
-      const dataElementIdDoFilterItem = this._filterItemElement.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-      this._idSnkFilterDetail = `${dataElementIdDoFilterItem}_${this.config.id}`;
-      this._idEzChip = `${dataElementIdDoFilterItem}_${this.config.id}`;
+      this._idSnkFilterDetail = `filterDetail_${this.config.id}`;
     }
   }
   componentDidRender() {
@@ -177,7 +175,7 @@ export class SnkFilterItem {
   }
   render() {
     const leftIcon = this.getLeftIconName();
-    return (h(Host, null, h("ez-chip", { ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined, "data-element-id": this._idEzChip }, leftIcon ? h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
+    return (h(Host, null, h("ez-chip", { ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined, id: this.config.id }, leftIcon ? h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon", id: "removeFilter" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
   }
   static get is() { return "snk-filter-item"; }
   static get properties() {

package/dist/collection/components/snk-filter-bar/filter-list/snk-filter-list.js

@@ -57,13 +57,15 @@ export class SnkFilterList {
         this._popover.remove();
       }
     }
+    this._element.querySelectorAll("button.sc-snk-filter-bar").forEach((itemListElement) => {
+      const dataElement = { id: itemListElement.getAttribute("name") };
+      itemListElement === null || itemListElement === void 0 ? void 0 : itemListElement.removeAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+      ElementIDUtils.addIDInfoIfNotExists(itemListElement, "filterItemList", dataElement);
+    });
   }
   buildItemElement(item) {
     const itemId = ++this._selectableItemsCount;
-    if (this._buttonElement) {
-      ElementIDUtils.addIDInfo(this._buttonElement);
-    }
-    return (h("button", { id: `filter-item${itemId}`, onFocusin: () => this._preselection = itemId, class: `ez-col ez-col--sd-12 ez-align--middle ez-padding--small sc-snk-filter-bar snk-filter-bar__filter-list-item`, onClick: () => this.itemSelected(item.name), ref: (el) => this._buttonElement = el }, item.iconName ? h("ez-icon", { iconName: item.iconName, size: "small", class: `ez-padding-right--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__icon ${item.iconClass || ""}` }) : undefined, h("div", { class: `ez-text ez-text--medium ez-text--primary ez-padding--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__label ${item.labelClass || ""}` }, item.label)));
+    return (h("button", { id: `filter-item${itemId}`, onFocusin: () => this._preselection = itemId, class: `ez-col ez-col--sd-12 ez-align--middle ez-padding--small sc-snk-filter-bar snk-filter-bar__filter-list-item`, onClick: () => this.itemSelected(item.name), name: item.label, key: itemId }, item.iconName ? h("ez-icon", { iconName: item.iconName, size: "small", class: `ez-padding-right--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__icon ${item.iconClass || ""}` }) : undefined, h("div", { class: `ez-text ez-text--medium ez-text--primary ez-padding--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__label ${item.labelClass || ""}` }, item.label)));
   }
   itemSelected(itemName) {
     if (itemName === SHOW_MORE_ITEM_NAME) {
@@ -124,7 +126,7 @@ export class SnkFilterList {
     }
   }
   render() {
-    return (h(Host, { class: "ez-flex ez-flex--column" }, h("ez-button", { class: this.buttonClass, label: this.label, onClick: () => this.buttonClick(), mode: this.iconName ? "icon" : undefined, iconName: this.iconName, size: "small" }, h("slot", { name: "leftIcon" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("div", { class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem }, h("ez-filter-input", { ref: ref => this._filterInput = ref, mode: "slim", label: this.findFilterText, value: this._filterArgument, onEzChange: (evt) => this._filterArgument = evt.detail, onFocus: () => this._preselection = 0 }), this.getFilterItems(), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), this.items ? this.getFooterItems().map(item => this.buildItemElement(item)) : undefined))));
+    return (h(Host, { class: "ez-flex ez-flex--column" }, h("ez-button", { class: this.buttonClass, label: this.label, onClick: () => this.buttonClick(), mode: this.iconName ? "icon" : undefined, iconName: this.iconName, size: "small" }, h("slot", { name: "leftIcon" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("div", { class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem }, h("ez-filter-input", { ref: ref => this._filterInput = ref, "data-element-id": "serachFilters", mode: "slim", label: this.findFilterText, value: this._filterArgument, onEzChange: (evt) => this._filterArgument = evt.detail, onFocus: () => this._preselection = 0 }), this.getFilterItems(), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), this.items ? this.getFooterItems().map(item => this.buildItemElement(item)) : undefined))));
   }
   static get is() { return "snk-filter-list"; }
   static get properties() {

package/dist/collection/components/snk-filter-bar/snk-filter-bar.js

@@ -54,9 +54,6 @@ export class SnkFilterBar {
     if (this._element) {
       const dataInfo = { dataUnit: this.dataUnit };
       ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-      const dataElementIdFilterBar = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-      this._idSnkFilterItem = dataElementIdFilterBar;
-      this._idSnkFilterList = dataElementIdFilterBar;
     }
   }
   processPendingFilter() {
@@ -373,7 +370,7 @@ export class SnkFilterBar {
     if (!this.dataUnit || !this.filterConfig || this.filterConfig.length === 0) {
       return undefined;
     }
-    return (h(Host, null, h("ez-scroller", { direction: "horizontal", activeShadow: true, locked: this.scrollerLocked }, this.getFilterItems()), h("snk-filter-list", { id: APPLIED_FILTERS, onFocusin: () => this.itemFocused(APPLIED_FILTERS), items: this.getAppliedListItems(), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyAppliedFiltersList"), findFilterText: this.getMessage("snkFilterBar.findFilter"), iconName: "filter", class: "ez-padding-left--medium", buttonClass: this.getActiveClass(), onSnkItemSelected: evt => this.appliedFilterHandler(evt.detail), "data-element-id": this._idSnkFilterList }), h("snk-filter-list", { id: ADD_FILTER, onFocusin: () => this.itemFocused(ADD_FILTER), items: this.getAddListItems(), label: this.getMessage("snkFilterBar.addFilter"), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyFiltersList"), findFilterText: this.getMessage("snkFilterBar.findField"), class: "ez-padding-left--medium", onSnkItemSelected: evt => this.addFilterHandler(evt.detail), "data-element-id": this._idSnkFilterList }, h("ez-icon", { slot: "leftIcon", class: "ez-padding-right--small", iconName: "plus" }))));
+    return (h(Host, null, h("ez-scroller", { direction: "horizontal", activeShadow: true, locked: this.scrollerLocked }, this.getFilterItems()), h("snk-filter-list", { id: APPLIED_FILTERS, onFocusin: () => this.itemFocused(APPLIED_FILTERS), items: this.getAppliedListItems(), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyAppliedFiltersList"), findFilterText: this.getMessage("snkFilterBar.findFilter"), iconName: "filter", class: "ez-padding-left--medium", buttonClass: this.getActiveClass(), onSnkItemSelected: evt => this.appliedFilterHandler(evt.detail), "data-element-id": "apppliedFilters" }), h("snk-filter-list", { id: ADD_FILTER, onFocusin: () => this.itemFocused(ADD_FILTER), items: this.getAddListItems(), label: this.getMessage("snkFilterBar.addFilter"), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyFiltersList"), findFilterText: this.getMessage("snkFilterBar.findField"), class: "ez-padding-left--medium", onSnkItemSelected: evt => this.addFilterHandler(evt.detail), "data-element-id": "addFilters" }, h("ez-icon", { slot: "leftIcon", class: "ez-padding-right--small", iconName: "plus" }))));
   }
   static get is() { return "snk-filter-bar"; }
   static get encapsulation() { return "scoped"; }

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

@@ -138,10 +138,6 @@ export class SnkForm {
     const dataInfo = { dataUnit: this._dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
-  getDataElementId(suffix) {
-    const elemIdSnkTaskBar = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-    return `${elemIdSnkTaskBar}_${suffix}`;
-  }
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     let parent = this._element.parentElement;
@@ -185,8 +181,8 @@ export class SnkForm {
     if (!this._dataUnit || !this._dataState) {
       return undefined;
     }
-    return (h("section", { class: "snk-form" }, h("div", { class: "snk-form__header snk-form__header--fixed ez-row" }, h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, h("ez-button", { title: this.getMessage("snkForm.goBackTitle"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm() }), h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.getMessage("snkForm.title"))), h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, h("snk-taskbar", { key: "formTaskbar", "data-element-id": this.getDataElementId("form_taskbar"), configName: this.configName, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.actionsList, primaryButton: ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", dataUnit: this._dataUnit }))), h("section", null, h("div", { class: "ez-row" }, h("div", { class: "ez-col ez-col--sd-12" }, h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, "data-element-id": this.getDataElementId("internal_form"), dataUnit: this._dataUnit, config: this.getFormConfig(), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
-      h("snk-form-config", { dataUnit: this._dataUnit, formConfig: this.getFormConfig(), "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), configName: this.configName, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigClose: () => this.closeConfig() }))))));
+    return (h("section", { class: "snk-form" }, h("div", { class: "snk-form__header snk-form__header--fixed ez-row" }, h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, h("ez-button", { title: this.getMessage("snkForm.goBackTitle"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm(), "data-element-id": "formToBack" }), h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.getMessage("snkForm.title"))), h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, h("snk-taskbar", { key: "formTaskbar", "data-element-id": "form", configName: this.configName, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.actionsList, primaryButton: ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", dataUnit: this._dataUnit }))), h("section", null, h("div", { class: "ez-row" }, h("div", { class: "ez-col ez-col--sd-12" }, h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, "data-element-id": "embedded", dataUnit: this._dataUnit, config: this.getFormConfig(), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
+      h("snk-form-config", { dataUnit: this._dataUnit, formConfig: this.getFormConfig(), configName: this.configName, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigClose: () => this.closeConfig() }))))));
   }
   static get is() { return "snk-form"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/snk-form/subcomponents/snk-field-config/snk-field-config.js

@@ -39,7 +39,7 @@ export class SnkFieldConfig {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
   }
   componentDidLoad() {
-    ElementIDUtils.addIDInfo(this._element, this.fieldConfig.name);
+    ElementIDUtils.addIDInfo(this._element);
   }
   render() {
     if (this.fieldConfig == undefined) {

package/dist/collection/components/snk-form/subcomponents/snk-form-config/snk-form-config.js

@@ -232,7 +232,7 @@ export class SnkFormConfig {
     var _a;
     return ((_a = group.fields) === null || _a === void 0 ? void 0 : _a.length) ? group.fields.map((field) => {
       var _a, _b;
-      return h("div", { key: field.name, class: this.getFieldConfigStyle(field), "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, modeInsertion: false, fieldConfig: field, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), dataUnit: this.dataUnit, isConfigActive: ((_a = this._fieldConfigSelected) === null || _a === void 0 ? void 0 : _a.name) === field.name }), ((_b = this._fieldConfigSelected) === null || _b === void 0 ? void 0 : _b.name) === field.name &&
+      return h("div", { key: field.name, class: this.getFieldConfigStyle(field), "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, modeInsertion: false, fieldConfig: field, dataUnit: this.dataUnit, isConfigActive: ((_a = this._fieldConfigSelected) === null || _a === void 0 ? void 0 : _a.name) === field.name, id: field.name }), ((_b = this._fieldConfigSelected) === null || _b === void 0 ? void 0 : _b.name) === field.name &&
         h("div", { class: "ez-flex form-config__config-options" }, h("snk-config-options", { idConfig: field.name, dataUnit: this.dataUnit, fieldConfig: this._fieldConfigSelected, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), onConfigOptionsChanged: (evt) => this.handleconfigOptionsChanged(evt.detail) })));
     }) : h("div", { class: "form-config__add-group-container" }, h("div", { class: "form-config__add-group-content" }, h("div", { class: "form-config__add-group-label" }, h("label", { class: "ez-text ez-text--center ez-text--medium ez-text--primary ez-text--bold" }, this.getMessage("snkFormConfig.form.labelDropField")))));
   }
@@ -948,7 +948,7 @@ export class SnkFormConfig {
     const configOptions = this._formConfigOptions.map((option) => {
       return { value: option.origin, label: option.name };
     });
-    return (h(Host, null, h("div", { class: "ez-row ez-padding--medium" }, h("div", { class: "ez-col ez-col--sd-7 ez-col--tb-9 ez-align--middle" }, h("ez-button", { mode: "icon", iconName: "arrow_back", class: "ez-padding--small", size: "small", onClick: () => this.closeFormConfig() }), h("h1", { class: "ez-title ez-title--extra-large ez-padding--small" }, this.getMessage("snkFormConfig.title")), h("ez-actions-button", { class: "form-config__actions-button ez-margin-left--medium", value: (_a = this._optionFormConfigSelected) === null || _a === void 0 ? void 0 : _a.origin, showLabel: true, displayIcon: "chevron-down", checkOption: true, size: "small", actions: configOptions, onEzAction: (evt) => this.controlSelectFormConfig(evt) })), h("div", { class: "ez-col ez-col--sd-5 ez-col--tb-3 ez-align--middle ez-align--right" }, this._formConfigChanged === true && this._optionFormConfigChanged === false &&
+    return (h(Host, null, h("div", { class: "ez-row ez-padding--medium" }, h("div", { class: "ez-col ez-col--sd-7 ez-col--tb-9 ez-align--middle" }, h("ez-button", { mode: "icon", iconName: "arrow_back", class: "ez-padding--small", size: "small", onClick: () => this.closeFormConfig(), id: "formConfigToBack" }), h("h1", { class: "ez-title ez-title--extra-large ez-padding--small" }, this.getMessage("snkFormConfig.title")), h("ez-actions-button", { class: "form-config__actions-button ez-margin-left--medium", value: (_a = this._optionFormConfigSelected) === null || _a === void 0 ? void 0 : _a.origin, showLabel: true, displayIcon: "chevron-down", checkOption: true, size: "small", actions: configOptions, onEzAction: (evt) => this.controlSelectFormConfig(evt), id: "selectConfig" })), h("div", { class: "ez-col ez-col--sd-5 ez-col--tb-3 ez-align--middle ez-align--right" }, this._formConfigChanged === true && this._optionFormConfigChanged === false &&
       h("div", { class: "ez-row ez-align--middle ez-align--right" }, h("ez-button", { label: "Cancelar", class: "ez-padding-left--medium", size: "small", onClick: () => this.cancelChangeConfig() }), h("ez-button", { label: "Salvar", class: "ez-button--primary ez-padding-left--medium", size: "small", onClick: () => this.saveConfig() }, h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "save" }))), this._optionFormConfigChanged === true &&
       h("div", { class: "ez-row ez-align--middle ez-align--right" }, h("ez-button", { label: "Cancelar", class: "ez-padding-left--medium", size: "small", onClick: () => this.cancelChangeOptionConfig() }), h("ez-button", { label: this.getMessage("snkFormConfig.applyConfig"), class: "ez-button--primary ez-padding-left--medium", size: "small", onClick: () => this.applyOptionConfig() })))), h("div", { class: "ez-row ez-padding--medium", ref: ref => this._sortableContainer = ref }, h("div", { class: "form-config__tab-container ez-col ez-col--sd-9 ez-col--tb-9 ez-padding-right--medium" }, ((_b = this._layoutFormConfig) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
       h("section", { class: "ez-box__container", ref: ref => this._formContainer = ref }, h("snk-tab-config", { ref: ref => this._tabConfig = ref, selectedIndex: this._tabSelected, onEzTabChange: (ev) => this.changeTabSelected(ev.detail), onEzOrderChange: (ev) => this.changeTabOrder(ev.detail), onEditionTitleTab: (ev) => this.changeTabLabel(ev), onDeleteTab: (ev) => this.handleDeleteTab(ev), onHideTab: (ev) => this.changeHideTab(ev), onCanStartDrag: () => this.handleCanStartDragTab() }, this._layoutFormConfig.map((tab) => h("snk-tab", { tabKey: tab.tab, label: tab.tab, visible: tab.visible }))), this._layoutFormConfig.map((tab, indexTab) => h("div", { id: "tab" + indexTab, "data-draggable-parent": "group", class: this._tabSelected === indexTab
@@ -963,8 +963,8 @@ export class SnkFormConfig {
         else {
           return h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, h("label", { class: "ez-text ez-text--secondary ez-margin-vertical--small" }, this.getMessage("snkFormConfig.form.subTitleInfo")), h("div", { id: CONTAINER_ID.withoutGroup, class: "ez-row", "data-draggable-parent": "field" }, this.getFieldsByGroup(group)), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" }));
         }
-      }), this.renderTempGroupByTab(tab.tab))), h("div", { class: "form-config__btn-add-group ez-row" }, h("div", { class: "form-config__btn-add-group-container ez-col ez-col--sd-12 ez-col--tb-12 ez-align--center" }, h("ez-button", { label: this.getMessage("snkFormConfig.form.labelNewGroup"), class: "ez-padding-horizontal--small ez-button--primary", size: "small", onClick: () => this.addNewGroup() }, h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "plus" })))))), h("div", { class: "form-config__fields-available ez-col ez-col--sd-3 ez-col--tb-3" }, h("section", { class: "ez-box__container ez-col ez-col--pn-12" }, h("h1", { class: "ez-title ez-title--large ez-title--primary ez-padding-bottom--medium" }, this.getMessage("snkFormConfig.availableFields.title")), h("ez-filter-input", { ref: ref => this._filterFieldsAvailable = ref, label: this.getMessage("snkFormConfig.availableFields.labelSearchField"), onEzChange: evt => this.onFilterChange(evt.detail) }), h("span", { class: "ez-box__label-counter ez-text ez-text--medium ez-text--primary ez-margin-bottom--medium" }, this.handleLabelCounter((_c = this._fieldsAvailable) === null || _c === void 0 ? void 0 : _c.length)), ((_d = this._layoutFormConfig) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
-      h("div", { id: CONTAINER_ID.fieldsAvailable, class: "ez-row", "data-draggable-parent": "field" }, this.orderFieldsAvailable(this._fieldsAvailable).map((field) => h("div", { key: field.name, class: this._fieldsAvailableStyle, "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, dataUnit: this.dataUnit, fieldConfig: field })))))))));
+      }), this.renderTempGroupByTab(tab.tab))), h("div", { class: "form-config__btn-add-group ez-row" }, h("div", { class: "form-config__btn-add-group-container ez-col ez-col--sd-12 ez-col--tb-12 ez-align--center" }, h("ez-button", { label: this.getMessage("snkFormConfig.form.labelNewGroup"), class: "ez-padding-horizontal--small ez-button--primary", size: "small", onClick: () => this.addNewGroup() }, h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "plus" })))))), h("div", { class: "form-config__fields-available ez-col ez-col--sd-3 ez-col--tb-3" }, h("section", { class: "ez-box__container ez-col ez-col--pn-12" }, h("h1", { class: "ez-title ez-title--large ez-title--primary ez-padding-bottom--medium" }, this.getMessage("snkFormConfig.availableFields.title")), h("ez-filter-input", { id: "searchFields", ref: ref => this._filterFieldsAvailable = ref, label: this.getMessage("snkFormConfig.availableFields.labelSearchField"), onEzChange: evt => this.onFilterChange(evt.detail) }), h("span", { class: "ez-box__label-counter ez-text ez-text--medium ez-text--primary ez-margin-bottom--medium" }, this.handleLabelCounter((_c = this._fieldsAvailable) === null || _c === void 0 ? void 0 : _c.length)), ((_d = this._layoutFormConfig) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
+      h("div", { id: CONTAINER_ID.fieldsAvailable, class: "ez-row", "data-draggable-parent": "field" }, this.orderFieldsAvailable(this._fieldsAvailable).map((field) => h("div", { key: field.name, class: this._fieldsAvailableStyle, "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, dataUnit: this.dataUnit, fieldConfig: field, id: field.name })))))))));
   }
   static get is() { return "snk-form-config"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/snk-form/subcomponents/snk-tab-config/snk-tab-config.js

@@ -1,6 +1,6 @@
 import { h, Host, Fragment } from "@stencil/core";
 import { Sortable } from '@shopify/draggable';
-import { ApplicationContext } from "@sankhyalabs/core";
+import { ApplicationContext, ElementIDUtils } from "@sankhyalabs/core";
 import { CONFIG_EVENTS, KEY_EVENTS, TAB_NAMES, TYPE_ACTIONS } from "../../../../lib/utils/constants";
 export class SnkTabConfig {
   constructor() {
@@ -285,6 +285,13 @@ export class SnkTabConfig {
     this.updateScroll();
     this.controlSortableTab();
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElem, "itemConfig");
+    this._processedTabs.forEach((tab, index) => {
+      const dataID = { id: tab.label };
+      ElementIDUtils.addIDInfo(this._hostElem.querySelector(`#tab${index}`), "itemConfig", dataID);
+    });
+  }
   render() {
     return (h(Host, null, h("button", { class: "tab-config__backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), h("div", { class: "tab-config__lower-bar" }), h("div", { class: "tab-config__scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev), "data-draggable-parent": "tab" }, this._processedTabs.map((tab, index) => {
       const tabId = "tab" + index;