@sankhyalabs/sankhyablocks 2.1.7 → 2.2.0

package/dist/components/snk-filter-list2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { FloatingManager, ArrayUtils } from '@sankhyalabs/core';
+import { FloatingManager, ElementIDUtils, ArrayUtils } from '@sankhyalabs/core';
 
 const SHOW_MORE_ITEM_NAME = "__SHOWMORE__";
 const MAX_FILTERS = 5;
@@ -47,6 +47,11 @@ const SnkFilterList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.showDetail();
     }
   }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+  }
   componentDidRender() {
     if (this._floatingID == undefined) {
       if (this._popover) {
@@ -56,7 +61,10 @@ const SnkFilterList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   buildItemElement(item) {
     const itemId = ++this._selectableItemsCount;
-    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) }, 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)));
+    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)));
   }
   itemSelected(itemName) {
     if (itemName === SHOW_MORE_ITEM_NAME) {

package/dist/components/snk-filter-modal2.js

@@ -3,6 +3,8 @@ import { ModalAction, ModalButtonStatus } from '@sankhyalabs/ezui/dist/collectio
 import { ArrayUtils } from '@sankhyalabs/core';
 import { CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
 
+const snkFilterModalCss = ".snk-filter__modal-container{width:359px;max-width:359px}";
+
 const SnkFilterModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -50,11 +52,12 @@ const SnkFilterModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   render() {
     const allowCancel = this.items.filter(item => item.active).length > 0;
     const items = (this.items ? ArrayUtils.applyStringFilter(this._filterArgument, this.items) : []);
-    return (h("ez-modal-container", { modalTitle: this.modalTitle, modalSubTitle: this.modalSubTitle, cancelButtonLabel: this.cancelButtonLabel, okButtonLabel: this.okButtonLabel, onEzModalAction: evt => this.modalActionListener(evt), cancelButtonStatus: allowCancel ? ModalButtonStatus.ENABLED : ModalButtonStatus.DISABLED }, h("div", { class: "sc-snk-filter-bar snk-filter-bar__filter-modal-content" }, h("div", null, this.useSearch ?
+    return (h("ez-modal-container", { class: "snk-filter__modal-container", modalTitle: this.modalTitle, modalSubTitle: this.modalSubTitle, cancelButtonLabel: this.cancelButtonLabel, okButtonLabel: this.okButtonLabel, onEzModalAction: evt => this.modalActionListener(evt), cancelButtonStatus: allowCancel ? ModalButtonStatus.ENABLED : ModalButtonStatus.DISABLED }, h("div", { class: "sc-snk-filter-bar snk-filter-bar__filter-modal-content" }, h("div", null, this.useSearch ?
       h("ez-filter-input", { ref: ref => this._filterInput = ref, label: this.getMessage("snkFilterBar.modalFindFilter"), onEzChange: (evt) => this._filterArgument = evt.detail })
       :
         undefined), items.length > 0 ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-padding-bottom--small" }, this.getActiveFiltersMsg()) : undefined, h("div", null, this.buildItems(items)), h("div", { class: "ez-text ez-text--large ez-align--middle ez-text--secondary ez-text--center ez-padding-bottom--large" }, this.infoText))));
   }
+  static get style() { return snkFilterModalCss; }
 }, [0, "snk-filter-modal", {
     "getMessage": [16],
     "items": [1040],

package/dist/components/snk-filter-multi-select.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { ElementIDUtils } from '@sankhyalabs/core';
 import { F as FilterItemType } from './filter-item-type.enum.js';
 
 const SnkFilterMultiSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -12,12 +13,18 @@ const SnkFilterMultiSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   async show() {
     this._comboElement.setFocus();
   }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+    }
+  }
   render() {
     if (!this.config || this.config.type !== FilterItemType.MULTI_SELECT) {
       return undefined;
     }
     return (h("ez-combo-box", { ref: ref => this._comboElement = ref, label: this.config.label, value: this.config.value, options: this.config.props.options }));
   }
+  get _element() { return this; }
 }, [0, "snk-filter-multi-select", {
     "value": [1544],
     "config": [16],

package/dist/components/snk-filter-number.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { ElementIDUtils } from '@sankhyalabs/core';
 import { F as FilterItemType } from './filter-item-type.enum.js';
 
 const SnkFilterPeriod = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -12,6 +13,11 @@ const SnkFilterPeriod = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   async show() {
     this._numberElement.setFocus();
   }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+    }
+  }
   render() {
     var _a;
     if (!this.config || this.config.type !== FilterItemType.NUMBER) {
@@ -19,6 +25,7 @@ const SnkFilterPeriod = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     }
     return (h("ez-number-input", { ref: ref => this._numberElement = ref, label: this.config.label, value: this.config.value, precision: (_a = this.config.props) === null || _a === void 0 ? void 0 : _a.precision }));
   }
+  get _element() { return this; }
 }, [0, "snk-filter-number", {
     "config": [16],
     "value": [2],

package/dist/components/snk-filter-period.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { ElementIDUtils } from '@sankhyalabs/core';
 import { F as FilterItemType } from './filter-item-type.enum.js';
 
 const SnkFilterPeriod$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -11,6 +12,11 @@ const SnkFilterPeriod$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     const end = this._endDate.value;
     this.value = (start || end ? { start, end } : undefined);
   }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+    }
+  }
   getDate(prop) {
     const objValue = this.value ? this.value[prop] : null;
     if (objValue instanceof Date) {
@@ -32,6 +38,7 @@ const SnkFilterPeriod$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     }
     return (h("div", { class: "ez-col ez-col--nowrap" }, h("ez-date-input", { label: this.config.label, ref: ref => this._startDate = ref, value: this.getDate("start") }), h("label", { class: "ez-text ez-text--medium ez-text--primary ez-margin--medium" }, "at\u00E9"), h("ez-date-input", { label: this.config.label, ref: ref => this._endDate = ref, value: this.getDate("end") })));
   }
+  get _element() { return this; }
 }, [0, "snk-filter-period", {
     "config": [16],
     "value": [8],

package/dist/components/snk-filter-personalized.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { UserInterface, ApplicationContext } from '@sankhyalabs/core';
+import { ElementIDUtils, UserInterface, ApplicationContext } from '@sankhyalabs/core';
 import { convertType } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
 import { CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
 import { F as FilterItemType } from './filter-item-type.enum.js';
@@ -9,6 +9,11 @@ const SnkFilterPersonalized$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     super();
     this.__registerHost();
   }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+    }
+  }
   getValue(param, index) {
     if (this.value && index >= 0 && index < this.value.length) {
       const rawValue = this.value[index];
@@ -81,6 +86,7 @@ const SnkFilterPersonalized$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     }
     return (h(Host, null, this.getParamsInterface()));
   }
+  get _element() { return this; }
 }, [0, "snk-filter-personalized", {
     "config": [16],
     "value": [1040],

package/dist/components/snk-filter-search.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { ApplicationContext } from '@sankhyalabs/core';
+import { ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
 import { F as FilterItemType } from './filter-item-type.enum.js';
 
 const SnkFilterSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -10,6 +10,11 @@ const SnkFilterSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   ezChangeListener(_evt) {
     this.value = this._searchInput.value;
   }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+    }
+  }
   doSearch(mode, argument) {
     const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     return new Promise((resolve, reject) => {
@@ -30,6 +35,7 @@ const SnkFilterSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     }
     return (h("ez-search", { suppressEmptyOption: true, value: this.config.value, label: this.config.label, ref: ref => this._searchInput = ref, optionLoader: ({ mode, argument }) => this.doSearch(mode, argument) }));
   }
+  get _element() { return this; }
 }, [0, "snk-filter-search", {
     "config": [16],
     "value": [16],

package/dist/components/snk-filter-text.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { ElementIDUtils } from '@sankhyalabs/core';
 
 const SnkFilterText$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -8,12 +9,18 @@ const SnkFilterText$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   ezChangeListener(evt) {
     this.value = evt.detail;
   }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'filterContentEditor');
+    }
+  }
   render() {
     if (!this.config) {
       return undefined;
     }
     return (h("ez-text-input", { ref: ref => this._textInputElement = ref, label: this.config.label, value: this.config.value }));
   }
+  get _element() { return this; }
 }, [0, "snk-filter-text", {
     "config": [16],
     "value": [1]

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as draggable_bundle, d as defineCustomElement$1 } from './snk-tab-config2.js';
-import { ObjectUtils, ArrayUtils, ApplicationContext } from '@sankhyalabs/core';
+import { ObjectUtils, ArrayUtils, ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
 import { C as CONFIG_EVENTS, b as TAB_NAMES, A as ACTION_CONFIG, D as DEFAULT_TYPE } from './constants.js';
 import { a as UserConfigType, C as ConfigStorage } from './ConfigStorage.js';
@@ -240,8 +240,8 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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, 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 &&
-        h("div", { class: "ez-flex form-config__config-options" }, h("snk-config-options", { idConfig: field.name, dataUnit: this.dataUnit, fieldConfig: this._fieldConfigSelected, onConfigOptionsChanged: (evt) => this.handleconfigOptionsChanged(evt.detail) })));
+      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("data-element-id"), 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 &&
+        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("data-element-id"), 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")))));
   }
   handleconfigOptionsChanged(fieldEdited) {
@@ -944,6 +944,10 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this.loadConfig();
   }
+  componentDidLoad() {
+    const dataInfo = { dataUnit: this.dataUnit };
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
   render() {
     var _a, _b, _c, _d;
     const configOptions = this._formConfigOptions.map((option) => {
@@ -967,6 +971,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }), 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 })))))))));
   }
+  get _element() { return this; }
   static get watchers() { return {
     "formConfig": ["observeFormConfig"]
   }; }

package/dist/components/snk-form2.js

@@ -189,7 +189,7 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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", 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, 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() }))))));
+      h("snk-form-config", { dataUnit: this._dataUnit, formConfig: this.getFormConfig(), "data-element-id": this._element.getAttribute("data-element-id"), configName: this.configName, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigClose: () => this.closeConfig() }))))));
   }
   get _element() { return this; }
   static get style() { return snkFormCss; }

package/dist/components/snk-grid-config2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { StringUtils, ApplicationContext } from '@sankhyalabs/core';
+import { StringUtils, ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
 import { C as ConfigStorage } from './ConfigStorage.js';
 import { O as ORDER_VALUES } from './constants.js';
@@ -108,14 +108,16 @@ const EzGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this._columListItems = [visibleGroup, hiddenGroup];
   }
   buildColumnListSlot(item, group) {
-    return (h("div", null, 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"), onEzChange: (evt) => { this.switchColumnGroup(evt, item); } })));
+    const dataElementId = `${this._element.getAttribute("data-element-id")}_configItem_${StringUtils.toCamelCase(item.label)}`;
+    return (h("div", null, 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) {
+    const dataElementId = `${this._element.getAttribute("data-element-id")}_configItem_${StringUtils.toCamelCase(item.label)}`;
     let selectedOption = ORDER_VALUES.none.value;
     if ((item === null || item === void 0 ? void 0 : item.ascending) != undefined) {
       selectedOption = item.ascending == true ? ORDER_VALUES.asc.value : ORDER_VALUES.desc.value;
     }
-    return (h("div", null, h("snk-select-box", { selectedOption: selectedOption, key: 'snk-select-box-' + this._componenteInternalKey + '-' + item, onEzChange: (evt) => { evt.stopPropagation(); this.updateOrder(evt.detail, item.label); } })));
+    return (h("div", null, h("snk-select-box", { selectedOption: selectedOption, key: 'snk-select-box-' + this._componenteInternalKey + '-' + item, "data-element-id": dataElementId, onEzChange: (evt) => { evt.stopPropagation(); this.updateOrder(evt.detail, item.label); } })));
   }
   updateOrder(sortOrder, updatedItemLabel) {
     var _a;
@@ -465,10 +467,14 @@ const EzGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+  }
   render() {
     return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, this.getMessage("snkGridConfig.gridConfiguration")), h("label", { class: "subtitle" }, this.getMessage("snkGridConfig.columnVisibilityOrder"))), h("div", { class: "button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "tabselector-container" }, h("ez-tabselector", { selectedIndex: this.selectedIndex, onEzChange: (evt) => { this.handleTabChange(evt.detail); }, tabs: this.getColumnNames() })), h("div", null, h("ez-text-input", { ref: (el) => this._searchElement = el, label: this.getMessage("snkGridConfig.findColumn"), onKeyUp: (evt) => this.locateColumn(evt) }, h("ez-icon", { slot: "leftIcon", size: "medium", iconName: "search" })))), h("div", { class: "grid-config__main" }, 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 }), h("div", { class: this.selectedIndex === 1 ? "group-name" : "hidden" }, this.getMessage("snkGridConfig.info.sortingSequence")), 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) })), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: this.getMessage("snkGridConfig.cancel"), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage("snkGridConfig.complete"), class: "ez-button--primary", onClick: () => this.finish() }))));
   }
   static get assetsDirs() { return ["../assets"]; }
+  get _element() { return this; }
   static get style() { return snkGridConfigCss; }
 }, [2, "snk-grid-config", {
     "selectedIndex": [1026, "selected-index"],

package/dist/components/snk-grid2.js

@@ -116,7 +116,7 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (!this._dataUnit) {
       return undefined;
     }
-    return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, 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 }, h("snk-taskbar", { dataUnit: this._dataUnit, buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
+    return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, 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 }, h("snk-taskbar", { dataUnit: this._dataUnit, buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute("data-element-id"), selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
   }
   get _element() { return this; }
   static get style() { return snkGridCss; }

package/dist/components/snk-pesquisa2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { ObjectUtils, StringUtils } from '@sankhyalabs/core';
+import { ObjectUtils, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 
 const snkPesquisaCss = ".sc-snk-pesquisa-h{--snk-pesquisa--font-size:var(--text--medium, 14px);--snk-pesquisa--font-family:var(--font-pattern, Arial);--snk-pesquisa--font-weight:var(--text-weight--medium, 400);--snk-pesquisa__records--color:var(--text--primary, #626e82);--snk-pesquisa__records--padding-vertical:var(--space--medium, 12px);--snk-pesquisa__content--padding-right:var(--space--small, 6px);--snk-pesquisa__content-scrollbar--background-color-primary:var(--scrollbar--primary, #2B3A54);--snk-pesquisa__content-scrollbar--background-color-secondary:var(--scrollbar--secondary, #E5EAF0);--snk-pesquisa__content-scrollbar--border-radius:var(--border--radius-small, 6px);--snk-pesquisa__content-scrollbar--width:var(--space--medium, 12px);--snk-pesquisa__btn--color:var(--title--primary, #2B3A54);--snk-pesquisa__btn-disabled--color:var(--text--disable, #AFB6C0);--snk-pesquisa__btn-hover--color:var(--color--primary, #4e4e4e);max-height:100%;height:100%;display:flex;flex-direction:column;overflow-y:auto}.snk-pesquisa.sc-snk-pesquisa{display:flex;flex-direction:column;height:100%}.snk-pesquisa__input.sc-snk-pesquisa{display:flex;width:100%;box-sizing:border-box;padding-top:4px;padding-right:4px}.snk-pesquisa__input.sc-snk-pesquisa ez-icon.sc-snk-pesquisa{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.snk-pesquisa__content.sc-snk-pesquisa{display:flex;flex-direction:column;height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--snk-pesquisa__content-scrollbar--background-color-primary) var(--snk-pesquisa__content-scrollbar--background-color-secondary);padding-right:var(--snk-pesquisa__content--padding-right)}.snk-pesquisa__content.sc-snk-pesquisa::-webkit-scrollbar-track{background-color:var(--snk-pesquisa__content-scrollbar--background-color-secondary);border-radius:var(--snk-pesquisa__content-scrollbar--border-radius)}.snk-pesquisa__content.sc-snk-pesquisa::-webkit-scrollbar-thumb{background-color:var(--snk-pesquisa__content-scrollbar--background-color-primary);border-radius:var(--snk-pesquisa__content-scrollbar--border-radius)}.snk-pesquisa__content.sc-snk-pesquisa::-webkit-scrollbar{background-color:var(--snk-pesquisa__content-scrollbar--background-color-secondary);width:var(--snk-pesquisa__content-scrollbar--width);max-width:var(--snk-pesquisa__content-scrollbar--width);min-width:var(--snk-pesquisa__content-scrollbar--width)}.snk-pesquisa__records.sc-snk-pesquisa{font-family:var(--snk-pesquisa--font-family);font-weight:var(--snk-pesquisa--font-weight);font-size:var(--snk-pesquisa--font-size);color:var(--snk-pesquisa__records--color);padding-bottom:var(--snk-pesquisa__records--padding-vertical);padding-top:var(--snk-pesquisa__records--padding-vertical)}.snk-pesquisa__btn.sc-snk-pesquisa{outline:none;border:none;background:none;cursor:pointer;color:var(--snk-pesquisa__btn--color)}.snk-pesquisa__btn.sc-snk-pesquisa:disabled{cursor:unset;color:var(--snk-pesquisa__btn-disabled--color)}.snk-pesquisa__btn.sc-snk-pesquisa:disabled:hover{cursor:unset;color:var(--snk-pesquisa__btn-disabled--color)}.snk-pesquisa__btn.sc-snk-pesquisa:hover{color:var(--snk-pesquisa__btn-hover--color)}";
 
@@ -295,6 +295,9 @@ const SnkPesquisa = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           : 'Nenhum registro encontrado'
         : 'Os resultados de sua pesquisa aparecerão aqui...';
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+  }
   render() {
     var _a;
     return (h(Host, null, h("div", { class: "snk-pesquisa" }, h("div", { class: "snk-pesquisa__input" }, 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 }, h("ez-icon", { slot: "leftIcon", iconName: "search" }), this.argument && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value)
@@ -303,6 +306,7 @@ const SnkPesquisa = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return (h("ez-card-item", { onEzClick: (event) => this.createOption(event.detail), item: item }));
     })))));
   }
+  get _element() { return this; }
   static get watchers() { return {
     "argument": ["observeArgument"]
   }; }

package/dist/esm/snk-application.entry.js

@@ -1170,6 +1170,7 @@ const SnkApplication = class {
     if (mode === "ADVANCED") {
       return new Promise(accept => {
         const pesquisaContent = document.createElement("snk-pesquisa");
+        pesquisaContent["data-element-id"] = `entity_${entity}`;
         pesquisaContent.argument = argument;
         pesquisaContent.searchLoader = (text) => this.pesquisaFetcher.loadAdvancedSearch(entity, text, criteria, searchOptions);
         pesquisaContent.selectItem = (option) => {

package/dist/esm/snk-config-options.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e4121713.js';
-import { UserInterface, ObjectUtils, StringUtils, ApplicationContext } from '@sankhyalabs/core';
+import { UserInterface, ObjectUtils, StringUtils, ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
 import { DataType, getConvertedValue } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
 import { CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
 import { V as VARS_BY_TYPE, D as DEFAULT_TYPE, a as TAGS_BY_TYPE } from './constants-babe1a08.js';
@@ -216,6 +216,9 @@ const SnkConfigOptions = class {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this._fieldProperties = this.getFieldProperties((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.name);
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element, this.fieldConfig.name);
+  }
   render() {
     var _a, _b;
     return (h(Host, null, h("div", { id: this.idConfig }, h("div", { class: "ez-row ez-padding--medium" }, h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-text-input", { label: this.getMessage("snkConfigOptions.label.nameField"), value: (_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.label, onEzChange: (evt) => { this.fieldConfig.label = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-combo-box", { label: this.getMessage("snkConfigOptions.label.typeValueDefault"), suppressEmptyOption: true, enabled: this.enabledValueDefault(), onEzChange: (evt) => { var _a; return this.onConfigDefault((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value); }, value: this.getDefaultType() }, h("option", { value: DEFAULT_TYPE.fixed }, this.getMessage("snkConfigOptions.options.valueFixed")), h("option", { value: DEFAULT_TYPE.variable }, this.getMessage("snkConfigOptions.options.variable")))), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, this._defaultType === DEFAULT_TYPE.variable ?

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e4121713.js';
-import { ApplicationContext } from '@sankhyalabs/core';
+import { ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
 import { c as VIEW_MODE, A as ACTION_CONFIG } from './constants-babe1a08.js';
 import { A as AuthorizationConfig } from './AuthorizationConfig-dcbd207a.js';
 import { T as TaskbarProcessor } from './taskbar-processor-aa6772c9.js';
@@ -130,6 +130,9 @@ const SnkFieldConfig = class {
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element, this.fieldConfig.name);
+  }
   render() {
     if (this.fieldConfig == undefined) {
       return;
@@ -138,6 +141,7 @@ const SnkFieldConfig = class {
       h("div", { class: "field-config__add" }, h("ez-button", { onClick: (evt) => this.handleAction(evt, ACTION_CONFIG.add), mode: "icon", class: "ez-button--tertiary", iconName: "plus", size: "large", title: this.getMessage("snkFieldConfig.titleAdd") })) :
       h("div", { class: "field-config__options" + (this.isConfigActive ? " field-config__options--is-active" : " ") }, h("ez-button", { mode: "icon", class: "ez-button--tertiary field-config__remove-icon", onClick: (evt) => this.handleAction(evt, ACTION_CONFIG.remove), iconName: "minus", size: "large", title: this.getMessage("snkFieldConfig.titleRemove") }), h("ez-button", { id: "buttonConfig_" + this.fieldConfig.name, mode: "icon", class: "ez-button--tertiary", onClick: (evt) => this.handleAction(evt, ACTION_CONFIG.configuration), iconName: this.isConfigActive ? "chevron-up" : "settings-inverted", size: "large", title: this.getMessage("snkFieldConfig.titleConfigurations") }))), this.isConfigActive && h("div", { class: "field-config__config-popover" }, h("div", { class: "field-config__config-outer-arrow" }, h("div", { class: "field-config__config-inner-arrow" })))));
   }
+  get _element() { return getElement(this); }
 };
 SnkFieldConfig.style = snkFieldConfigCss;
 
@@ -246,7 +250,7 @@ const SnkGrid = class {
     if (!this._dataUnit) {
       return undefined;
     }
-    return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, 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 }, h("snk-taskbar", { dataUnit: this._dataUnit, buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
+    return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, 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 }, h("snk-taskbar", { dataUnit: this._dataUnit, buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute("data-element-id"), selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
   }
   get _element() { return getElement(this); }
 };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-e4121713.js';
-import { DataType, ObjectUtils, StringUtils, ErrorException, ApplicationContext, FloatingManager, ArrayUtils } from '@sankhyalabs/core';
+import { DataType, ObjectUtils, ElementIDUtils, StringUtils, ErrorException, ApplicationContext, FloatingManager, ArrayUtils } from '@sankhyalabs/core';
 import { F as FilterItemType } from './filter-item-type.enum-a79b2fa8.js';
 import { ModalAction, ModalButtonStatus } from '@sankhyalabs/ezui/dist/collection/components/ez-modal-container';
 import { toString } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
@@ -157,6 +157,15 @@ const SnkFilterBar = class {
     }
     this.processAfterUpdateConfig();
   }
+  componentDidLoad() {
+    if (this._element) {
+      const dataInfo = { dataUnit: this.dataUnit };
+      ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+      const dataElementIdFilterBar = this._element.getAttribute("data-element-id");
+      this._idSnkFilterItem = dataElementIdFilterBar;
+      this._idSnkFilterList = dataElementIdFilterBar;
+    }
+  }
   processPendingFilter() {
     if (this._pendingFilters.length > 0 && this._currentPendingFilter == undefined) {
       this._currentPendingFilter = this._element.querySelector("#filter-" + this._pendingFilters.pop());
@@ -468,7 +477,7 @@ const SnkFilterBar = class {
     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) }), 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) }, 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": 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" }))));
   }
   get _element() { return getElement(this); }
   static get watchers() { return {
@@ -612,6 +621,14 @@ const SnkFilterItem = class {
     }
     return label;
   }
+  componentDidLoad() {
+    if (this._filterItemElement) {
+      ElementIDUtils.addIDInfo(this._filterItemElement);
+      const dataElementIdDoFilterItem = this._filterItemElement.getAttribute("data-element-id");
+      this._idSnkFilterDetail = `${dataElementIdDoFilterItem}_${this.config.id}`;
+      this._idEzChip = `${dataElementIdDoFilterItem}_${this.config.id}`;
+    }
+  }
   componentDidRender() {
     if (this._floatingID == undefined) {
       if (this._popover) {
@@ -639,7 +656,7 @@ const SnkFilterItem = class {
   }
   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 }, 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 }))));
+    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 }))));
   }
   get _filterItemElement() { return getElement(this); }
   static get watchers() { return {
@@ -692,6 +709,11 @@ const SnkFilterList = class {
       this.showDetail();
     }
   }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+  }
   componentDidRender() {
     if (this._floatingID == undefined) {
       if (this._popover) {
@@ -701,7 +723,10 @@ const SnkFilterList = class {
   }
   buildItemElement(item) {
     const itemId = ++this._selectableItemsCount;
-    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) }, 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)));
+    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)));
   }
   itemSelected(itemName) {
     if (itemName === SHOW_MORE_ITEM_NAME) {
@@ -767,6 +792,8 @@ const SnkFilterList = class {
   get _element() { return getElement(this); }
 };
 
+const snkFilterModalCss = ".snk-filter__modal-container{width:359px;max-width:359px}";
+
 const SnkFilterModal = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -813,12 +840,13 @@ const SnkFilterModal = class {
   render() {
     const allowCancel = this.items.filter(item => item.active).length > 0;
     const items = (this.items ? ArrayUtils.applyStringFilter(this._filterArgument, this.items) : []);
-    return (h("ez-modal-container", { modalTitle: this.modalTitle, modalSubTitle: this.modalSubTitle, cancelButtonLabel: this.cancelButtonLabel, okButtonLabel: this.okButtonLabel, onEzModalAction: evt => this.modalActionListener(evt), cancelButtonStatus: allowCancel ? ModalButtonStatus.ENABLED : ModalButtonStatus.DISABLED }, h("div", { class: "sc-snk-filter-bar snk-filter-bar__filter-modal-content" }, h("div", null, this.useSearch ?
+    return (h("ez-modal-container", { class: "snk-filter__modal-container", modalTitle: this.modalTitle, modalSubTitle: this.modalSubTitle, cancelButtonLabel: this.cancelButtonLabel, okButtonLabel: this.okButtonLabel, onEzModalAction: evt => this.modalActionListener(evt), cancelButtonStatus: allowCancel ? ModalButtonStatus.ENABLED : ModalButtonStatus.DISABLED }, h("div", { class: "sc-snk-filter-bar snk-filter-bar__filter-modal-content" }, h("div", null, this.useSearch ?
       h("ez-filter-input", { ref: ref => this._filterInput = ref, label: this.getMessage("snkFilterBar.modalFindFilter"), onEzChange: (evt) => this._filterArgument = evt.detail })
       :
         undefined), items.length > 0 ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-padding-bottom--small" }, this.getActiveFiltersMsg()) : undefined, h("div", null, this.buildItems(items)), h("div", { class: "ez-text ez-text--large ez-align--middle ez-text--secondary ez-text--center ez-padding-bottom--large" }, this.infoText))));
   }
 };
+SnkFilterModal.style = snkFilterModalCss;
 
 const snkGridConfigCss = ".sc-snk-grid-config-h{--snk-grid-config__footer--padding-top:var(--space--medium, 12px);--snk-grid-config__main--padding-right:var(--space--medium, 12px);--snk-grid-config__tabselector-container--padding:var(--space--medium, 12px);--snk-grid-config__button-close--padding-left:var(--space--medium, 12px);--snk-grid-config__title--color:var(--title--primary, #2B3A54);--snk-grid-config__title--font-family:var(--font-pattern, \"Roboto\");--snk-grid-config__title--font-size:var(--title--large, 20px);--snk-grid-config__title--font-weight:var(--text-weight--extra-large, 700);--snk-grid-config__subtitle--font-family:var(--font-pattern, \"Roboto\");--snk-grid-config__subtitle--font-size:var(--text--medium, 14px);--snk-grid-config__scrollbar--width:var(--space--medium, 12px);--snk-grid-config__scrollbar--background-color-primary:var(--scrollbar--primary, #2B3A54);--snk-grid-config__scrollbar--background-color-secondary:var(--scrollbar--secondary, #E5EAF0);--snk-grid-config__scrollbar--border-radius:var(--border--radius-small, 6px);--snk-grid-config__group--font-family:var(--font-pattern, \"Roboto\");--snk-grid-config__group--font-size:var(--text--medium, 14px);--snk-grid-config__group--font-weight:var(--text-weight--large, 600);--snk-grid-config__group--padding-bottom:var(--space-small, 6px);display:grid;grid-template-rows:auto 1fr auto;max-height:100%;width:100%}@media screen and (min-width: 480px){.sc-snk-grid-config-h{width:359px;max-width:359px}}.padding-right--medium.sc-snk-grid-config{padding-right:var(--space--medium)}ez-list.sc-snk-grid-config{height:100%}.height-calc.sc-snk-grid-config{max-height:calc(100% - 24px)}.grid-config__footer.sc-snk-grid-config{display:flex;justify-content:flex-end;width:100%;padding-top:var(--snk-grid-config__footer--padding-top)}.hidden.sc-snk-grid-config{display:none}.tabselector-container.sc-snk-grid-config{padding:var(--snk-grid-config__tabselector-container--padding) 0}.button-close.sc-snk-grid-config{padding-left:var(--snk-grid-config__button-close--padding-left)}.title-container.sc-snk-grid-config{display:flex;justify-content:space-between;align-items:center;width:100%}.title.sc-snk-grid-config{display:flex;margin:0;line-height:normal;letter-spacing:0em;text-align:left;color:var(--snk-grid-config__title--color);font-size:var(--snk-grid-config__title--font-size);font-family:var(--snk-grid-config__title--font-family);font-weight:var(--snk-grid-config__title--font-weight)}.subtitle.sc-snk-grid-config{color:var(--text--primary);font-size:var(--snk-grid-config__subtitle--font-size);font-family:var(--snk-grid-config__subtitle--font-family)}.grid-config__main.sc-snk-grid-config{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--snk-grid-config__scrollbar--background-color-primary) var(--snk-grid-config__scrollbar--background-color-secondary);padding-right:var(--snk-grid-config__main--padding-right)}.grid-config__main.sc-snk-grid-config::-webkit-scrollbar-track{background-color:var(--snk-grid-config__scrollbar--background-color-secondary)}.grid-config__main.sc-snk-grid-config::-webkit-scrollbar-thumb{background-color:var(--snk-grid-config__scrollbar--background-color-primary);border-radius:var(--snk-grid-config__scrollbar--border-radius)}.grid-config__main.sc-snk-grid-config::-webkit-scrollbar{width:var(--snk-grid-config__scrollbar--width);max-width:var(--snk-grid-config__scrollbar--width);min-width:var(--snk-grid-config__scrollbar--width);background-color:var(--snk-grid-config__scrollbar--background-color-secondary)}.group-name.sc-snk-grid-config{font-family:var(--snk-grid-config__group--font-family);font-size:var(--snk-grid-config__group--font-size);font-weight:var(--snk-grid-config__group--font-weight);padding-bottom:var(--snk-grid-config__group--padding-bottom)}";
 
@@ -922,14 +950,16 @@ const EzGridConfig = class {
     this._columListItems = [visibleGroup, hiddenGroup];
   }
   buildColumnListSlot(item, group) {
-    return (h("div", null, 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"), onEzChange: (evt) => { this.switchColumnGroup(evt, item); } })));
+    const dataElementId = `${this._element.getAttribute("data-element-id")}_configItem_${StringUtils.toCamelCase(item.label)}`;
+    return (h("div", null, 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) {
+    const dataElementId = `${this._element.getAttribute("data-element-id")}_configItem_${StringUtils.toCamelCase(item.label)}`;
     let selectedOption = ORDER_VALUES.none.value;
     if ((item === null || item === void 0 ? void 0 : item.ascending) != undefined) {
       selectedOption = item.ascending == true ? ORDER_VALUES.asc.value : ORDER_VALUES.desc.value;
     }
-    return (h("div", null, h("snk-select-box", { selectedOption: selectedOption, key: 'snk-select-box-' + this._componenteInternalKey + '-' + item, onEzChange: (evt) => { evt.stopPropagation(); this.updateOrder(evt.detail, item.label); } })));
+    return (h("div", null, h("snk-select-box", { selectedOption: selectedOption, key: 'snk-select-box-' + this._componenteInternalKey + '-' + item, "data-element-id": dataElementId, onEzChange: (evt) => { evt.stopPropagation(); this.updateOrder(evt.detail, item.label); } })));
   }
   updateOrder(sortOrder, updatedItemLabel) {
     var _a;
@@ -1279,10 +1309,14 @@ const EzGridConfig = class {
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+  }
   render() {
     return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, this.getMessage("snkGridConfig.gridConfiguration")), h("label", { class: "subtitle" }, this.getMessage("snkGridConfig.columnVisibilityOrder"))), h("div", { class: "button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "tabselector-container" }, h("ez-tabselector", { selectedIndex: this.selectedIndex, onEzChange: (evt) => { this.handleTabChange(evt.detail); }, tabs: this.getColumnNames() })), h("div", null, h("ez-text-input", { ref: (el) => this._searchElement = el, label: this.getMessage("snkGridConfig.findColumn"), onKeyUp: (evt) => this.locateColumn(evt) }, h("ez-icon", { slot: "leftIcon", size: "medium", iconName: "search" })))), h("div", { class: "grid-config__main" }, 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 }), h("div", { class: this.selectedIndex === 1 ? "group-name" : "hidden" }, this.getMessage("snkGridConfig.info.sortingSequence")), 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) })), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: this.getMessage("snkGridConfig.cancel"), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage("snkGridConfig.complete"), class: "ez-button--primary", onClick: () => this.finish() }))));
   }
   static get assetsDirs() { return ["../assets"]; }
+  get _element() { return getElement(this); }
 };
 EzGridConfig.style = snkGridConfigCss;