@sankhyalabs/sankhyablocks 2.2.2-SKA-60656.4 → 2.4.0

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

@@ -1175,7 +1175,7 @@ const SnkApplication = class {
     if (mode === "ADVANCED") {
       return new Promise(accept => {
         const pesquisaContent = document.createElement("snk-pesquisa");
-        pesquisaContent["data-element-id"] = `entity_${entity}`;
+        pesquisaContent[core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = `entity_${entity}`;
         pesquisaContent.argument = argument;
         pesquisaContent.searchLoader = (text) => this.pesquisaFetcher.loadAdvancedSearch(entity, text, criteria, searchOptions);
         pesquisaContent.selectItem = (option) => {
@@ -1245,10 +1245,12 @@ const SnkApplication = class {
     window.requestAnimationFrame(() => {
       this.applicationLoaded.emit(true);
     });
+    core.ElementIDUtils.addIDInfo(this._element, `resource_${this._resourceID}`);
   }
   render() {
     return (index.h("div", null, index.h("ez-loading-bar", { ref: (ref) => this._requestListener.loadingBar = ref }), index.h("ez-popup", { opened: false, ref: (ref) => this._popUp = ref, onEzClosePopup: () => this.closePopUp() }), index.h("ez-modal", { opened: false, ref: (ref) => this._rightModal = ref, "modal-size": "small", closeOutsideClick: true, closeEsc: true })));
   }
+  get _element() { return index.getElement(this); }
 };
 class RequestListenerLoadingBar {
   constructor() {

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

@@ -250,11 +250,19 @@ const SnkGrid = class {
     this._headerTaskbarProcessor.process(headerTaskbarId, this.taskbarManager, this._dataState);
     this._topTaskbarProcessor.process("snkGridTopTaskbar", this.taskbarManager, this._dataState);
   }
+  componentDidLoad() {
+    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, 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", 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, 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, 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("data-element-id"), 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": 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() }))));
   }
   get _element() { return index.getElement(this); }
 };

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-20e8b68a.js');
 const core = require('@sankhyalabs/core');
 const constants = require('./constants-a47a5190.js');
-const taskbarElements = require('./taskbar-elements-997af1c9.js');
+const taskbarElements = require('./taskbar-elements-b995b84d.js');
 
 const snkCrudCss = ".sc-snk-crud-h{display:flex;flex-direction:column;height:100%;width:100%}";
 
@@ -63,6 +63,10 @@ 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) {
@@ -89,8 +93,12 @@ const SnkCrud = class {
       this.configName = application.configName;
     }
   }
+  componentDidLoad() {
+    const dataInfo = { dataUnit: this._dataUnit };
+    core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
   render() {
-    return (index.h("ez-view-stack", { ref: (ref) => this._viewStack = ref }, index.h("stack-item", null, index.h("snk-grid", { ref: (ref) => this._snkGrid = ref, 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, 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": 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) })));
   }
   get _element() { return index.getElement(this); }
 };

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

@@ -11,7 +11,7 @@ const utils = require('@sankhyalabs/ezui/dist/collection/utils');
 const ConfigStorage = require('./ConfigStorage-c112de1d.js');
 const constants = require('./constants-a47a5190.js');
 const AuthorizationConfig = require('./AuthorizationConfig-79ffae4b.js');
-const taskbarElements = require('./taskbar-elements-997af1c9.js');
+const taskbarElements = require('./taskbar-elements-b995b84d.js');
 require('./_commonjsHelpers-537d719a.js');
 
 const buildFilter = (item) => {
@@ -165,7 +165,7 @@ const SnkFilterBar = class {
     if (this._element) {
       const dataInfo = { dataUnit: this.dataUnit };
       core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-      const dataElementIdFilterBar = this._element.getAttribute("data-element-id");
+      const dataElementIdFilterBar = this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
       this._idSnkFilterItem = dataElementIdFilterBar;
       this._idSnkFilterList = dataElementIdFilterBar;
     }
@@ -628,7 +628,7 @@ const SnkFilterItem = class {
   componentDidLoad() {
     if (this._filterItemElement) {
       core.ElementIDUtils.addIDInfo(this._filterItemElement);
-      const dataElementIdDoFilterItem = this._filterItemElement.getAttribute("data-element-id");
+      const dataElementIdDoFilterItem = this._filterItemElement.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
       this._idSnkFilterDetail = `${dataElementIdDoFilterItem}_${this.config.id}`;
       this._idEzChip = `${dataElementIdDoFilterItem}_${this.config.id}`;
     }
@@ -954,11 +954,11 @@ const EzGridConfig = class {
     this._columListItems = [visibleGroup, hiddenGroup];
   }
   buildColumnListSlot(item, group) {
-    const dataElementId = `${this._element.getAttribute("data-element-id")}_configItem_${core.StringUtils.toCamelCase(item.label)}`;
+    const dataElementId = `${this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)}_configItem_${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) {
-    const dataElementId = `${this._element.getAttribute("data-element-id")}_configItem_${core.StringUtils.toCamelCase(item.label)}`;
+    const dataElementId = `${this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)}_configItem_${core.StringUtils.toCamelCase(item.label)}`;
     let selectedOption = constants.ORDER_VALUES.none.value;
     if ((item === null || item === void 0 ? void 0 : item.ascending) != undefined) {
       selectedOption = item.ascending == true ? constants.ORDER_VALUES.asc.value : constants.ORDER_VALUES.desc.value;
@@ -1452,26 +1452,19 @@ const SnkTaskbar = class {
       className += "ez-padding-left--medium";
     }
     if (taskbarElements.TaskbarElement[def.toString()]) {
-      return taskbarElements.buildElem(def, className, elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), this.actionsList);
+      return taskbarElements.buildElem(def, className, this.getIdElemBtnNative(def), elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), this.actionsList);
     }
     else {
-      return taskbarElements.buildCustomButton(def, className, elem => this.elementClick(elem), elem => this.isEnabled(elem));
+      return taskbarElements.buildCustomButton(def, className, this.getIdElemBtnCustom(def), elem => this.elementClick(elem), elem => this.isEnabled(elem));
     }
   }
-  // Lifecycle
-  componentWillLoad() {
-    this._application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
-    if (this._application) {
-      this._application.getAllAccess().then(access => this._permissions = access);
-    }
-    else {
-      this._permissions = {};
-    }
+  getIdElemBtnNative(taskbarElem) {
+    const elemIdTaskbar = this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+    return `${elemIdTaskbar}_${core.StringUtils.toCamelCase(taskbarElem)}`;
   }
-  componentWillRender() {
-    if (this._definitions == undefined && this._permissions) {
-      this._definitions = this.elementsFromString(this.buttons);
-    }
+  getIdElemBtnCustom(btnCustom) {
+    const elemIdTaskbar = this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+    return `${elemIdTaskbar}_${core.StringUtils.toCamelCase(btnCustom.name)}`;
   }
   isDivider(element) {
     var _a;
@@ -1493,6 +1486,24 @@ const SnkTaskbar = class {
       return true;
     });
   }
+  componentWillLoad() {
+    this._application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (this._application) {
+      this._application.getAllAccess().then(access => this._permissions = access);
+    }
+    else {
+      this._permissions = {};
+    }
+  }
+  componentWillRender() {
+    if (this._definitions == undefined && this._permissions) {
+      this._definitions = this.elementsFromString(this.buttons);
+    }
+  }
+  componentDidLoad() {
+    const dataInfo = { dataUnit: this.dataUnit };
+    core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
   render() {
     if (this._definitions === undefined) {
       return undefined;
@@ -1514,6 +1525,7 @@ const SnkTaskbar = class {
       return index.h("slot", { name: elem });
     }))));
   }
+  get _element() { return index.getElement(this); }
   static get watchers() { return {
     "buttons": ["observeButtons"]
   }; }

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

@@ -18,7 +18,7 @@ const SnkFilterDetail = class {
   componentDidLoad() {
     if (this._element) {
       core.ElementIDUtils.addIDInfo(this._element);
-      const dataElementIdDoFilterItem = this._element.getAttribute("data-element-id");
+      const dataElementIdDoFilterItem = this._element.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
       this._idContentEditor = `${dataElementIdDoFilterItem}_${this.config.id}`;
     }
   }
@@ -57,12 +57,22 @@ const SnkFilterDetail = class {
   buildIcon(title, iconName, action) {
     return (index.h("button", { onClick: () => action(), class: "sc-snk-filter-bar snk-filter-item__editor-header-button" }, index.h("ez-icon", { title: title, iconName: iconName })));
   }
+  getNormalizedValue(params, value) {
+    return params.reduce((arrayValues, currentParam, index) => {
+      if (currentParam.dataType === core.DataType.BOOLEAN && (arrayValues == undefined || arrayValues[index] == undefined)) {
+        arrayValues = arrayValues || [];
+        arrayValues[index] = false;
+      }
+      return arrayValues;
+    }, value);
+  }
   apply() {
     var _a;
     let value = this._editor["value"];
     let isValid = true;
     if (this.config.type === filterItemType_enum.FilterItemType.PERSONALIZED) {
       const params = ((_a = this.config.props.personalizedFilter) === null || _a === void 0 ? void 0 : _a.parameters) || [];
+      value = this.getNormalizedValue(params, value);
       const paramsCount = params.length;
       if (paramsCount === 0) {
         //Valor do filtro personalizado sem parametros deve ser um array vazio

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

@@ -242,8 +242,8 @@ 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("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 &&
-        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("data-element-id"), onConfigOptionsChanged: (evt) => this.handleconfigOptionsChanged(evt.detail) })));
+      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 &&
+        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")))));
   }
   handleconfigOptionsChanged(fieldEdited) {

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

@@ -144,6 +144,15 @@ const SnkForm = class {
     }
     return disabled;
   }
+  dataunitReady() {
+    this.loadInsertionConfig();
+    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;
@@ -153,7 +162,7 @@ const SnkForm = class {
         this._dataUnit = this._snkDataUnit.dataUnit;
         this._dataState = this._snkDataUnit.dataState;
         if (this._dataUnit) {
-          this.loadInsertionConfig();
+          this.dataunitReady();
         }
         else {
           this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
@@ -187,8 +196,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", 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, 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("data-element-id"), 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() }), 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() }))))));
   }
   get _element() { return index.getElement(this); }
 };

package/dist/cjs/{taskbar-elements-997af1c9.js → taskbar-elements-b995b84d.js}

@@ -31,66 +31,66 @@ exports.VisibleWhenForbidden = void 0;
 (function (VisibleWhenForbidden) {
   VisibleWhenForbidden["CONFIGURATOR"] = "CONFIGURATOR";
 })(exports.VisibleWhenForbidden || (exports.VisibleWhenForbidden = {}));
-const buildCustomButton = (def, className, action, isEnabled) => {
+const buildCustomButton = (def, className, dataElementId, action, isEnabled) => {
   const { hint, text, iconName } = def;
   if (iconName) {
     if (text) {
-      return iconTextButton(iconName, def.name, className, hint, text, action, isEnabled);
+      return iconTextButton(iconName, def.name, className, dataElementId, hint, text, action, isEnabled);
     }
     else {
-      return iconButton(iconName, def.name, className, hint, action, isEnabled);
+      return iconButton(iconName, def.name, className, dataElementId, hint, action, isEnabled);
     }
   }
   else {
-    return textButton(def.name, className, text, hint, action, isEnabled);
+    return textButton(def.name, className, dataElementId, text, hint, action, isEnabled);
   }
 };
-const buildElem = (element, className, getTitle, action, isEnabled, actions) => {
+const buildElem = (element, className, dataElementId, getTitle, action, isEnabled, actions) => {
   const title = getTitle(element);
   switch (element) {
     case exports.TaskbarElement.PREVIOUS:
-      return iconButton("chevron-left", element, className, title, action, isEnabled);
+      return iconButton("chevron-left", element, className, dataElementId, title, action, isEnabled);
     case exports.TaskbarElement.NEXT:
-      return iconButton("chevron-right", element, className, title, action, isEnabled);
+      return iconButton("chevron-right", element, className, dataElementId, title, action, isEnabled);
     case exports.TaskbarElement.REFRESH:
-      return iconButton("sync", element, className, title, action, isEnabled);
+      return iconButton("sync", element, className, dataElementId, title, action, isEnabled);
     case exports.TaskbarElement.UPDATE:
-      return iconButton("edit", element, className, title, action, isEnabled);
+      return iconButton("edit", element, className, dataElementId, title, action, isEnabled);
     case exports.TaskbarElement.CLONE:
-      return iconButton("copy", element, className, title, action, isEnabled);
+      return iconButton("copy", element, className, dataElementId, title, action, isEnabled);
     case exports.TaskbarElement.REMOVE:
-      return iconButton("delete", element, className, title, action, isEnabled);
+      return iconButton("delete", element, className, dataElementId, title, action, isEnabled);
     case exports.TaskbarElement.INSERT:
-      return iconTextButton("plus", element, className, title, title, action, isEnabled);
+      return iconTextButton("plus", element, className, dataElementId, title, title, action, isEnabled);
     case exports.TaskbarElement.CANCEL:
-      return textButton(element, className, title, title, action, isEnabled);
+      return textButton(element, className, dataElementId, title, title, action, isEnabled);
     case exports.TaskbarElement.SAVE:
-      return iconTextButton("save", element, className, title, title, action, isEnabled);
+      return iconTextButton("save", element, className, dataElementId, title, title, action, isEnabled);
     case exports.TaskbarElement.GRID_MODE:
-      return iconButton("table", element, className, title, action, isEnabled);
+      return iconButton("table", element, className, dataElementId, title, action, isEnabled);
     case exports.TaskbarElement.FORM_MODE:
-      return iconButton("list", element, className, title, action, isEnabled);
+      return iconButton("list", element, className, dataElementId, title, action, isEnabled);
     case exports.TaskbarElement.CONFIGURATOR:
-      return iconButton("settings-inverted", element, className, title, action, isEnabled);
+      return iconButton("settings-inverted", element, className, dataElementId, title, action, isEnabled);
     case exports.TaskbarElement.MORE_OPTIONS:
-      return actionButton(element, className, title, action, isEnabled, actions);
+      return actionButton(element, className, dataElementId, title, action, isEnabled, actions);
     case exports.TaskbarElement.DIVIDER:
       return index.h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-horizontal--medium", "data-taskbar-divider": true });
   }
 };
-function textButton(name, className, text, title, action, isEnabled) {
-  return index.h("ez-button", { title: title, label: text, size: "small", class: className, enabled: isEnabled(name), onClick: () => action(name) });
+function textButton(name, className, dataElementId, text, title, action, isEnabled) {
+  return index.h("ez-button", { title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) });
 }
-function iconButton(iconName, name, className, title, action, isEnabled) {
-  return index.h("ez-button", { name: iconName, title: title, mode: "icon", size: "small", class: className, iconName: iconName, enabled: isEnabled(name), onClick: () => action(name) });
+function iconButton(iconName, name, className, dataElementId, title, action, isEnabled) {
+  return index.h("ez-button", { name: iconName, title: title, mode: "icon", size: "small", class: className, "data-element-id": dataElementId, iconName: iconName, enabled: isEnabled(name), onClick: () => action(name) });
 }
-function iconTextButton(iconName, name, className, text, title, action, isEnabled) {
-  return index.h("ez-button", { name: iconName, title: title, label: text, size: "small", class: className, enabled: isEnabled(name), onClick: () => action(name) },
+function iconTextButton(iconName, name, className, dataElementId, text, title, action, isEnabled) {
+  return index.h("ez-button", { name: iconName, title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) },
     index.h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: iconName }));
 }
-function actionButton(element, className, title, action, isEnabled, actions) {
+function actionButton(element, className, dataElementId, title, action, isEnabled, actions) {
   return actions && actions.length > 0
-    ? index.h("ez-actions-button", { title: title, size: "small", arrowActive: true, class: className, enabled: isEnabled(element), onEzAction: (evt) => action(evt.detail.value), actions: actions })
+    ? index.h("ez-actions-button", { title: title, size: "small", "data-element-id": dataElementId, arrowActive: true, class: className, enabled: isEnabled(element), onEzAction: (evt) => action(evt.detail.value), actions: actions })
     : undefined;
 }
 

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { DataType, ErrorTracking, DependencyType, ApplicationContext } from "@sankhyalabs/core";
+import { DataType, ErrorTracking, DependencyType, ApplicationContext, ElementIDUtils } from "@sankhyalabs/core";
 import { DataFetcher } from "../../lib/http/data-fetcher/DataFetcher";
 import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
 import { SnkErrorHandler } from "./errorhandler/snk-error-handler";
@@ -537,7 +537,7 @@ export class SnkApplication {
     if (mode === "ADVANCED") {
       return new Promise(accept => {
         const pesquisaContent = document.createElement("snk-pesquisa");
-        pesquisaContent["data-element-id"] = `entity_${entity}`;
+        pesquisaContent[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = `entity_${entity}`;
         pesquisaContent.argument = argument;
         pesquisaContent.searchLoader = (text) => this.pesquisaFetcher.loadAdvancedSearch(entity, text, criteria, searchOptions);
         pesquisaContent.selectItem = (option) => {
@@ -607,6 +607,7 @@ export class SnkApplication {
     window.requestAnimationFrame(() => {
       this.applicationLoaded.emit(true);
     });
+    ElementIDUtils.addIDInfo(this._element, `resource_${this._resourceID}`);
   }
   render() {
     return (h("div", null, h("ez-loading-bar", { ref: (ref) => this._requestListener.loadingBar = ref }), h("ez-popup", { opened: false, ref: (ref) => this._popUp = ref, onEzClosePopup: () => this.closePopUp() }), h("ez-modal", { opened: false, ref: (ref) => this._rightModal = ref, "modal-size": "small", closeOutsideClick: true, closeEsc: true })));
@@ -1707,6 +1708,7 @@ export class SnkApplication {
       }
     };
   }
+  static get elementRef() { return "_element"; }
 }
 class RequestListenerLoadingBar {
   constructor() {

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

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import { ApplicationContext } from '@sankhyalabs/core';
+import { ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
 import { VIEW_MODE } from '../../lib/utils/constants';
 import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
 const GRID_MODE = VIEW_MODE.grid;
@@ -59,6 +59,10 @@ 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) {
@@ -85,8 +89,12 @@ export class SnkCrud {
       this.configName = application.configName;
     }
   }
+  componentDidLoad() {
+    const dataInfo = { dataUnit: this._dataUnit };
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
   render() {
-    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, 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, 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": 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) })));
   }
   static get is() { return "snk-crud"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from '@stencil/core';
 import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
 import FilterItemType from './filter-item-type.enum';
-import { ElementIDUtils } from '@sankhyalabs/core';
+import { ElementIDUtils, DataType } from '@sankhyalabs/core';
 export class SnkFilterDetail {
   async show() {
     this._editor["show"]();
@@ -9,7 +9,7 @@ export class SnkFilterDetail {
   componentDidLoad() {
     if (this._element) {
       ElementIDUtils.addIDInfo(this._element);
-      const dataElementIdDoFilterItem = this._element.getAttribute("data-element-id");
+      const dataElementIdDoFilterItem = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
       this._idContentEditor = `${dataElementIdDoFilterItem}_${this.config.id}`;
     }
   }
@@ -48,12 +48,22 @@ export class SnkFilterDetail {
   buildIcon(title, iconName, action) {
     return (h("button", { onClick: () => action(), class: "sc-snk-filter-bar snk-filter-item__editor-header-button" }, h("ez-icon", { title: title, iconName: iconName })));
   }
+  getNormalizedValue(params, value) {
+    return params.reduce((arrayValues, currentParam, index) => {
+      if (currentParam.dataType === DataType.BOOLEAN && (arrayValues == undefined || arrayValues[index] == undefined)) {
+        arrayValues = arrayValues || [];
+        arrayValues[index] = false;
+      }
+      return arrayValues;
+    }, value);
+  }
   apply() {
     var _a;
     let value = this._editor["value"];
     let isValid = true;
     if (this.config.type === FilterItemType.PERSONALIZED) {
       const params = ((_a = this.config.props.personalizedFilter) === null || _a === void 0 ? void 0 : _a.parameters) || [];
+      value = this.getNormalizedValue(params, value);
       const paramsCount = params.length;
       if (paramsCount === 0) {
         //Valor do filtro personalizado sem parametros deve ser um array vazio

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

@@ -136,7 +136,7 @@ export class SnkFilterItem {
   componentDidLoad() {
     if (this._filterItemElement) {
       ElementIDUtils.addIDInfo(this._filterItemElement);
-      const dataElementIdDoFilterItem = this._filterItemElement.getAttribute("data-element-id");
+      const dataElementIdDoFilterItem = this._filterItemElement.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
       this._idSnkFilterDetail = `${dataElementIdDoFilterItem}_${this.config.id}`;
       this._idEzChip = `${dataElementIdDoFilterItem}_${this.config.id}`;
     }

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

@@ -54,7 +54,7 @@ export class SnkFilterBar {
     if (this._element) {
       const dataInfo = { dataUnit: this.dataUnit };
       ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-      const dataElementIdFilterBar = this._element.getAttribute("data-element-id");
+      const dataElementIdFilterBar = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
       this._idSnkFilterItem = dataElementIdFilterBar;
       this._idSnkFilterList = dataElementIdFilterBar;
     }

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

@@ -1,4 +1,4 @@
-import { ApplicationContext, DateUtils, ObjectUtils } from '@sankhyalabs/core';
+import { ApplicationContext, DateUtils, ObjectUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
 import TaskbarProcessor from '../snk-taskbar/processor/taskbar-processor';
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
@@ -133,6 +133,15 @@ export class SnkForm {
     }
     return disabled;
   }
+  dataunitReady() {
+    this.loadInsertionConfig();
+    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;
@@ -142,7 +151,7 @@ export class SnkForm {
         this._dataUnit = this._snkDataUnit.dataUnit;
         this._dataState = this._snkDataUnit.dataState;
         if (this._dataUnit) {
-          this.loadInsertionConfig();
+          this.dataunitReady();
         }
         else {
           this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
@@ -176,8 +185,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", 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(), "data-element-id": this._element.getAttribute("data-element-id"), 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() }), 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() }))))));
   }
   static get is() { return "snk-form"; }
   static get encapsulation() { return "scoped"; }

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

@@ -232,8 +232,8 @@ 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("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) })));
+      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 &&
+        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")))));
   }
   handleconfigOptionsChanged(fieldEdited) {

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

@@ -1,3 +1,4 @@
+import { ElementIDUtils } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
 import TaskbarProcessor from '../snk-taskbar/processor/taskbar-processor';
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
@@ -97,11 +98,19 @@ export class SnkGrid {
     this._headerTaskbarProcessor.process(headerTaskbarId, this.taskbarManager, this._dataState);
     this._topTaskbarProcessor.process("snkGridTopTaskbar", this.taskbarManager, this._dataState);
   }
+  componentDidLoad() {
+    const dataInfo = { dataUnit: this._dataUnit };
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
+  getDataElementId(suffix) {
+    const elemIdSnkGrid = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
+    return `${elemIdSnkGrid}_${suffix}`;
+  }
   render() {
     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, "data-element-id": this._element.getAttribute("data-element-id"), 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, "data-element-id": this.getDataElementId("internal_filter"), 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", "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" })), 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 }, 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 })), 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(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
   }
   static get is() { return "snk-grid"; }
   static get encapsulation() { return "scoped"; }