@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-99992.1 → 0.0.0-bugfix-dev-KB-47082.0

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

@@ -8,6 +8,7 @@ export class SnkTaskbar {
     this.TASKBAR_ITEM_ID_PREFIX = 'TASKBAR_ITEM_';
     this.TASKBAR_CUSTOM_ELEMENTS_CONTAINER_CLASS_NAME = 'taskbar-custom-elements-container';
     this.ACTIONS_BUTTON_TAG = 'TASKBAR-ACTIONS-BUTTON';
+    this.NOT_OVERFLOW_ELEMENTS = ["moreOptions", "dataExporter_snkDataExporter", "actionsButton_snkActionsButton"];
     this._titleKeyByElement = {
       [TaskbarElement.UPDATE]: "snkTaskbar.titleUpdate",
       [TaskbarElement.PREVIOUS]: "snkTaskbar.titlePrevious",
@@ -29,6 +30,7 @@ export class SnkTaskbar {
     this._customElements = undefined;
     this._customElementsId = undefined;
     this._slotContainer = undefined;
+    this._hiddenActionsList = [];
     this.alignRigth = false;
     this.customSlotId = "TASKBAR_CUSTOM_ELEMENTS";
     this.customContainerId = undefined;
@@ -142,12 +144,19 @@ export class SnkTaskbar {
     }
     const taskbarElement = TaskbarElement[def.toString()];
     if (taskbarElement) {
-      return buildElem(def, className, this.getIdElemBtnNative(def), elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), this.actionsList, this.configName, this.presentationMode);
+      return buildElem(def, className, this.getIdElemBtnNative(def), elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), this.buildDynamicActionsList(), this.configName, this.presentationMode);
     }
     else {
       return buildCustomButton(def, className, this.getIdElemBtnCustom(def), elem => this.elementClick(elem), elem => this.isEnabled(elem));
     }
   }
+  buildDynamicActionsList() {
+    var _a;
+    if (this._hiddenActionsList.length) {
+      return [...((_a = this.actionsList) !== null && _a !== void 0 ? _a : []), { type: 'divider', label: "", value: "" }, ...this._hiddenActionsList];
+    }
+    return this.actionsList;
+  }
   getIdElemBtnNative(taskbarElem) {
     return StringUtils.toCamelCase(taskbarElem);
   }
@@ -188,9 +197,11 @@ export class SnkTaskbar {
     });
   }
   addCustomElementContainer(elem) {
+    var _a;
     const elementId = `${this.TASKBAR_ITEM_ID_PREFIX}${elem}`;
     if (!this._customElementsId.includes(elementId)) {
       this._customElementsId.push(elementId);
+      (_a = this._overFlowWatcher) === null || _a === void 0 ? void 0 : _a.addNotOverFlowElement(elementId);
     }
     return h("span", { key: elementId, id: elementId });
   }
@@ -236,14 +247,39 @@ export class SnkTaskbar {
     this._overFlowedElements.forEach(element => {
       element.classList.remove(OVERFLOWED_CLASS_NAME);
     });
+    this._hiddenActionsList = [];
     this._overFlowedElements = [];
   }
   doOverFlowElements(overFlowedElements) {
     overFlowedElements.forEach(element => {
       element.classList.add(OVERFLOWED_CLASS_NAME);
       this._overFlowedElements.push(element);
+      this.addItemToActionList(element);
     });
   }
+  addItemToActionList(element) {
+    const taskbarElement = this.getTaskbarElementName(element);
+    if (taskbarElement && this.isEnabled(taskbarElement) && this.isAllowed(taskbarElement)) {
+      const optionItem = {
+        value: taskbarElement,
+        label: this.getTaskbarElementLabel(element),
+        iconName: this.getTaskbarElementIcon(element)
+      };
+      this._hiddenActionsList.push(optionItem);
+    }
+  }
+  getTaskbarElementName(element) {
+    var _a;
+    return (_a = element.getAttribute('data-taskbar-element')) !== null && _a !== void 0 ? _a : "";
+  }
+  getTaskbarElementIcon(element) {
+    var _a;
+    return (_a = element.getAttribute('data-taskbar-icon')) !== null && _a !== void 0 ? _a : "";
+  }
+  getTaskbarElementLabel(element) {
+    var _a;
+    return (_a = element.getAttribute('data-taskbar-label')) !== null && _a !== void 0 ? _a : "";
+  }
   hasToIgnoreOverFlow(element) {
     return element.classList.contains(this.TASKBAR_CUSTOM_ELEMENTS_CONTAINER_CLASS_NAME);
   }
@@ -257,8 +293,7 @@ export class SnkTaskbar {
       element: this._element,
       callback: this.handleOverFlow.bind(this),
       overFlowDirection: OverflowDirection.HORIZONTAL,
-      deltaSize: 1,
-      notOverFlow: ["moreOptions"]
+      notOverFlow: this.NOT_OVERFLOW_ELEMENTS
     };
   }
   componentDidLoad() {
@@ -291,7 +326,7 @@ export class SnkTaskbar {
     }
     let index = 0;
     return (h(Host, { class: this.getHostClasses() }, this.removeEmpty(this._definitions.map((elem) => {
-      var _a;
+      var _a, _b;
       if (elem === TaskbarElement.DIVIDER) {
         index = 0;
       }
@@ -307,6 +342,7 @@ export class SnkTaskbar {
       if (this._customElements.has(elem)) {
         return this.addCustomElementContainer(elem);
       }
+      (_b = this._overFlowWatcher) === null || _b === void 0 ? void 0 : _b.addNotOverFlowElement(elem);
       return h("slot", { name: elem });
     })), h("div", { class: this.TASKBAR_CUSTOM_ELEMENTS_CONTAINER_CLASS_NAME }, h("slot", { name: this.customSlotId }))));
   }
@@ -602,7 +638,8 @@ export class SnkTaskbar {
       "_overFlowedElements": {},
       "_customElements": {},
       "_customElementsId": {},
-      "_slotContainer": {}
+      "_slotContainer": {},
+      "_hiddenActionsList": {}
     };
   }
   static get events() {

package/dist/collection/lib/http/data-fetcher/DataFetcher.js

@@ -275,7 +275,6 @@ export class DataFetcher {
         if (http.readyState == 4 && http.status == 200) {
           try {
             const jsonResp = JSON.parse(http.responseText);
-            await this.processServiceBrokerClientEvents({ clientEvents: jsonResp === null || jsonResp === void 0 ? void 0 : jsonResp.clientEvents, serviceName, payloadJson, accept, reject });
             /**
              * Este trecho difere do projeto HTML5 devido à decisão de adotar uma abordagem síncrona para esta chamada. Isso é justificado pelo fato de que, no cenário em questão, a abordagem assíncrona teria impactos negativos.
              *
@@ -286,8 +285,10 @@ export class DataFetcher {
             if (this.isServiceBrokerError(jsonResp)) {
               reject(this.processServiceBrokerErrorInfo(jsonResp));
             }
-            else if (jsonResp.status == DataFetcher.SERVICE_BROKER_STATUS.SERVICE_CANCELED && jsonResp.statusMessage) {
-              console.debug(`[DataFetcher] ${jsonResp.statusMessage}`);
+            else if (jsonResp.status == DataFetcher.SERVICE_BROKER_STATUS.SERVICE_CANCELED) {
+              if (jsonResp.statusMessage) {
+                console.debug(`[DataFetcher] ${jsonResp.statusMessage}`);
+              }
             }
             else {
               accept(jsonResp.responseBody);
@@ -295,6 +296,7 @@ export class DataFetcher {
                 (_a = this.application) === null || _a === void 0 ? void 0 : _a.info(jsonResp.statusMessage);
               }
             }
+            this.processServiceBrokerClientEvents({ clientEvents: jsonResp === null || jsonResp === void 0 ? void 0 : jsonResp.clientEvents, serviceName, payloadJson, accept, reject });
           }
           catch (err) {
             console.warn(`Erro ao executar serviço: ${err}`);

package/dist/components/DataFetcher.js

@@ -6786,7 +6786,6 @@ class DataFetcher {
         if (http.readyState == 4 && http.status == 200) {
           try {
             const jsonResp = JSON.parse(http.responseText);
-            await this.processServiceBrokerClientEvents({ clientEvents: jsonResp === null || jsonResp === void 0 ? void 0 : jsonResp.clientEvents, serviceName, payloadJson, accept, reject });
             /**
              * Este trecho difere do projeto HTML5 devido à decisão de adotar uma abordagem síncrona para esta chamada. Isso é justificado pelo fato de que, no cenário em questão, a abordagem assíncrona teria impactos negativos.
              *
@@ -6797,8 +6796,10 @@ class DataFetcher {
             if (this.isServiceBrokerError(jsonResp)) {
               reject(this.processServiceBrokerErrorInfo(jsonResp));
             }
-            else if (jsonResp.status == DataFetcher.SERVICE_BROKER_STATUS.SERVICE_CANCELED && jsonResp.statusMessage) {
-              console.debug(`[DataFetcher] ${jsonResp.statusMessage}`);
+            else if (jsonResp.status == DataFetcher.SERVICE_BROKER_STATUS.SERVICE_CANCELED) {
+              if (jsonResp.statusMessage) {
+                console.debug(`[DataFetcher] ${jsonResp.statusMessage}`);
+              }
             }
             else {
               accept(jsonResp.responseBody);
@@ -6806,6 +6807,7 @@ class DataFetcher {
                 (_a = this.application) === null || _a === void 0 ? void 0 : _a.info(jsonResp.statusMessage);
               }
             }
+            this.processServiceBrokerClientEvents({ clientEvents: jsonResp === null || jsonResp === void 0 ? void 0 : jsonResp.clientEvents, serviceName, payloadJson, accept, reject });
           }
           catch (err) {
             console.warn(`Erro ao executar serviço: ${err}`);

package/dist/components/snk-crud.js

@@ -59,6 +59,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this._canEdit = undefined;
     this._resourceID = undefined;
     this.configName = undefined;
+    this.filterBarTitle = undefined;
     this.selectionToastConfig = undefined;
     this.showActionButtons = false;
     this.actionsList = undefined;
@@ -320,7 +321,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     }
     this._snkDataUnit.ignoreSaveMessage = this._currentViewMode === VIEW_MODE.GRID;
-    return (h(Host, null, h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode, recordsValidator: this.recordsValidator, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, canEdit: this._canEdit, resourceID: this._resourceID, disablePersonalizedFilter: this.disablePersonalizedFilter }, h("slot", { name: "GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-guides-viewer", { ref: ref => this._guidesViewer = ref, entityPath: this._snkDataUnit.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: evt => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form", canEdit: this._canEdit, recordsValidator: this.recordsValidator, resourceID: this._resourceID, detailTaskbarCustomContainerId: this.customContainerId }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this._snkDataUnit.entityName, onBack: this.backView.bind(this) })), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showActionButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this._resourceID, customContainerId: this.customContainerId })), h("div", { id: `${this.customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }), h("slot", { name: "DETAIL_GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_TASKBAR_CUSTOM_ELEMENTS" }))));
+    return (h(Host, null, h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, filterBarTitle: this.filterBarTitle, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode, recordsValidator: this.recordsValidator, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, canEdit: this._canEdit, resourceID: this._resourceID, disablePersonalizedFilter: this.disablePersonalizedFilter }, h("slot", { name: "GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-guides-viewer", { ref: ref => this._guidesViewer = ref, entityPath: this._snkDataUnit.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: evt => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form", canEdit: this._canEdit, recordsValidator: this.recordsValidator, resourceID: this._resourceID, detailTaskbarCustomContainerId: this.customContainerId }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this._snkDataUnit.entityName, onBack: this.backView.bind(this) })), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showActionButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this._resourceID, customContainerId: this.customContainerId })), h("div", { id: `${this.customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }), h("slot", { name: "DETAIL_GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_TASKBAR_CUSTOM_ELEMENTS" }))));
   }
   get _element() { return this; }
   static get watchers() { return {
@@ -329,6 +330,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get style() { return snkCrudCss; }
 }, [6, "snk-crud", {
     "configName": [1025, "config-name"],
+    "filterBarTitle": [1, "filter-bar-title"],
     "selectionToastConfig": [16],
     "showActionButtons": [4, "show-action-buttons"],
     "actionsList": [16],

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

@@ -253,7 +253,7 @@ class SnkFilterModalFactory {
   }
 }
 
-const snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns:minmax(100px, 100%) 1fr 1fr;--snk-personalized-filter--z-index:var(--elevation--20, 20);--snk-personalized-filter--background-color:var(--background--xlight, #fff)}.snk-filter__popover-container.sc-snk-filter-bar{display:flex;cursor:auto}.filter-bar__personalized-filter.sc-snk-filter-bar{display:flex;flex-direction:column;position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;z-index:var(--snk-personalized-filter--z-index);background-color:var(--snk-personalized-filter--background-color)}.snk-filter__popover.sc-snk-filter-bar{display:flex;flex-direction:column;position:absolute;width:fit-content;height:fit-content;min-width:265px;background-color:var(--background--xlight, #fff);border-radius:var(--border--radius-medium, 12px);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.snk-filter-item__editor-header.sc-snk-filter-bar{flex-grow:1;font-weight:var(--text-weight--medium, 400);color:var(--color--title-primary, #2B3A54)}.snk-filter__popover-rule.sc-snk-filter-bar{border-style:solid;border-color:var(--color--disable-secondary, #F2F5F8);border-radius:1px;border-width:1px;width:100%}.editor__ez-check.sc-snk-filter-bar{--ez-check__label--padding-left:0}.snk-filter-item__editor-header-button.sc-snk-filter-bar{cursor:pointer;background-color:transparent;border:none;padding:3px;outline-color:var(--color--primary)}.snk-filter-bar__divider.sc-snk-filter-bar{margin-bottom:var(--space--small)}.snk-filter-bar__scroller.sc-snk-filter-bar{height:calc(100% + var(--space-extra-small, 3px))}.snk-filter-bar__filter-item-container.sc-snk-filter-bar{display:flex;align-self:center}.snk-filter-bar__scroller.sc-snk-filter-bar .sc-snk-filter-bar:first-child{margin-left:var(--space-extra-small, 3px)}.snk-filter-bar__filter-list-items-container.sc-snk-filter-bar{overflow-y:auto;max-height:360px;margin-top:var(--space--small, 6px)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar{cursor:pointer;border-radius:var(--border--radius-small, 6px);border:none;background-color:transparent}.snk-filter-bar__filter-list-item__label.sc-snk-filter-bar{color:var(--title--primary)}.snk-filter-bar__filter-list-item__label--secondary.sc-snk-filter-bar{color:var(--text--primary)}.snk-filter-bar__filter-list-item__icon.sc-snk-filter-bar{--ez-icon--color:var(--title--primary)}.snk-filter-bar__filter-list-item__icon--secondary.sc-snk-filter-bar{--ez-icon--color:var(--text--secondary)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:focus-visible{outline:none;background-color:var(--background--medium)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:hover{background-color:var(--background--medium)}.snk-filter-bar__filter-list-items-container--empty.sc-snk-filter-bar{width:100%;height:100px;display:flex;justify-content:center;align-self:center;align-items:center}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar{position:relative}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar::after{display:flex;position:absolute;content:\"\";width:8px;height:8px;top:7px;left:17px;background-color:var(--icon--alert--color, #008561);border-radius:50%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar{--modal-item-border-width:2px;display:flex;flex-direction:row;margin-left:var(--modal-item-border-width);border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #f0f3f7);border:none;width:100%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar:focus-visible{outline:var(--color--primary) solid var(--modal-item-border-width)}.snk-filter-bar__filter-modal-item__check.sc-snk-filter-bar{width:auto}.snk-filter-bar__filter-modal-item__label.sc-snk-filter-bar{font-weight:var(--text-weight--medium)}.snk-filter-bar__filter-modal-content.sc-snk-filter-bar{display:grid;grid-template-rows:auto auto 1fr auto;width:99%;height:100%}";
+const snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns:1fr minmax(100px, 100%) 1fr 1fr;--snk-personalized-filter--z-index:var(--elevation--20, 20);--snk-personalized-filter--background-color:var(--background--xlight, #fff)}.snk-filter-bar__title.sc-snk-filter-bar{max-width:260px;display:inline-block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:16px;font-family:var(--font-pattern, Arial);font-weight:var(--text-weight--large, 600);color:var(--color--title-primary, #2B3A54);margin-top:8px}[data-mode=\"hidden\"].sc-snk-filter-bar-h{display:none}[data-mode=\"button\"].sc-snk-filter-bar-h{grid-template-columns:1fr;width:fit-content}.snk-filter__popover-container.sc-snk-filter-bar{display:flex;cursor:auto}.filter-bar__personalized-filter.sc-snk-filter-bar{display:flex;flex-direction:column;position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;z-index:var(--snk-personalized-filter--z-index);background-color:var(--snk-personalized-filter--background-color)}.snk-filter__popover.sc-snk-filter-bar{display:flex;flex-direction:column;position:absolute;width:fit-content;height:fit-content;min-width:265px;background-color:var(--background--xlight, #fff);border-radius:var(--border--radius-medium, 12px);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.snk-filter-item__editor-header.sc-snk-filter-bar{flex-grow:1;font-weight:var(--text-weight--medium, 400);color:var(--color--title-primary, #2B3A54)}.snk-filter__popover-rule.sc-snk-filter-bar{border-style:solid;border-color:var(--color--disable-secondary, #F2F5F8);border-radius:1px;border-width:1px;width:100%}.editor__ez-check.sc-snk-filter-bar{--ez-check__label--padding-left:0}.snk-filter-item__editor-header-button.sc-snk-filter-bar{cursor:pointer;background-color:transparent;border:none;padding:3px;outline-color:var(--color--primary)}.snk-filter-bar__divider.sc-snk-filter-bar{margin-bottom:var(--space--small)}.snk-filter-bar__scroller.sc-snk-filter-bar{height:calc(100% + var(--space-extra-small, 3px))}.snk-filter-bar__filter-item-container.sc-snk-filter-bar{display:flex;align-self:center}.snk-filter-bar__scroller.sc-snk-filter-bar .sc-snk-filter-bar:first-child{margin-left:var(--space-extra-small, 3px)}.snk-filter-bar__filter-list-items-container.sc-snk-filter-bar{overflow-y:auto;max-height:360px;margin-top:var(--space--small, 6px)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar{cursor:pointer;border-radius:var(--border--radius-small, 6px);border:none;background-color:transparent}.snk-filter-bar__filter-list-item__label.sc-snk-filter-bar{color:var(--title--primary)}.snk-filter-bar__filter-list-item__label--secondary.sc-snk-filter-bar{color:var(--text--primary)}.snk-filter-bar__filter-list-item__icon.sc-snk-filter-bar{--ez-icon--color:var(--title--primary)}.snk-filter-bar__filter-list-item__icon--secondary.sc-snk-filter-bar{--ez-icon--color:var(--text--secondary)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:focus-visible{outline:none;background-color:var(--background--medium)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:hover{background-color:var(--background--medium)}.snk-filter-bar__filter-list-items-container--empty.sc-snk-filter-bar{width:100%;height:100px;display:flex;justify-content:center;align-self:center;align-items:center}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar{position:relative}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar::after{display:flex;position:absolute;content:\"\";width:8px;height:8px;top:7px;left:17px;background-color:var(--icon--alert--color, #008561);border-radius:50%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar{--modal-item-border-width:2px;display:flex;flex-direction:row;margin-left:var(--modal-item-border-width);border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #f0f3f7);border:none;width:100%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar:focus-visible{outline:var(--color--primary) solid var(--modal-item-border-width)}.snk-filter-bar__filter-modal-item__check.sc-snk-filter-bar{width:auto}.snk-filter-bar__filter-modal-item__label.sc-snk-filter-bar{font-weight:var(--text-weight--medium)}.snk-filter-bar__filter-modal-content.sc-snk-filter-bar{display:grid;grid-template-rows:auto auto 1fr auto;width:99%;height:100%}";
 
 const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -280,8 +280,10 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return this._calculateSortIndex(b) - this._calculateSortIndex(a);
     };
     this.dataUnit = undefined;
+    this.title = undefined;
     this.configName = undefined;
     this.resourceID = undefined;
+    this.mode = "regular";
     this.filterConfig = undefined;
     this.messagesBuilder = undefined;
     this.disablePersonalizedFilter = undefined;
@@ -598,6 +600,9 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   filterChangeListener(evt) {
     this.updateFilter(evt.detail);
   }
+  /**
+   * Abre o modal de filtros
+  */
   async showFilterModal() {
     const callbackOnApplyFilter = (filters) => {
       this.filterConfig = filters.map(this.normalizeItem).sort((a, b) => this._filtersComparator(a, b));
@@ -669,7 +674,9 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (this.showPersonalizedFilter) {
       return h("snk-personalized-filter", { class: "filter-bar__personalized-filter", filterId: this.personalizedFilterId, ref: (el) => this._elPersonalizedFilter = el, onEzCancel: () => this.handleHidePersonalizedFilter(false), onEzAfterSave: () => this.handleHidePersonalizedFilter(true), entityUri: this.dataUnit.name, configName: this.configName, resourceID: this.resourceID });
     }
-    return (h(Host, null, h("ez-scroller", { class: "snk-filter-bar__scroller", direction: EzScrollDirection.HORIZONTAL, activeShadow: true, locked: this.scrollerLocked }, h("section", { class: "snk-filter-bar__filter-item-container" }, this.getFilterItems())), h("ez-button", { class: "ez-padding-left--medium", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus", class: "ez-padding-right--small" }))));
+    if (this.mode === "button")
+      return (h(Host, { "data-mode": this.mode }, h("ez-button", { class: "ez-margin-left--medium", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) })));
+    return (h(Host, { "data-mode": this.mode }, h("div", null, h("span", { class: "snk-filter-bar__title", title: this.title, "data-tooltip": this.title, "data-flow": "bottom" }, this.title)), h("ez-scroller", { class: "snk-filter-bar__scroller", direction: EzScrollDirection.HORIZONTAL, activeShadow: true, locked: this.scrollerLocked }, h("section", { class: "snk-filter-bar__filter-item-container" }, this.getFilterItems())), h("ez-button", { class: "ez-padding-left--medium", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus", class: "ez-padding-right--small" }))));
   }
   get _element() { return this; }
   static get watchers() { return {
@@ -678,8 +685,10 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   static get style() { return snkFilterBarCss; }
 }, [2, "snk-filter-bar", {
     "dataUnit": [1040],
+    "title": [1],
     "configName": [1, "config-name"],
     "resourceID": [1, "resource-i-d"],
+    "mode": [1],
     "filterConfig": [1040],
     "messagesBuilder": [1040],
     "disablePersonalizedFilter": [4, "disable-personalized-filter"],
@@ -691,7 +700,8 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "getFilterItem": [64],
     "updateFilterItem": [64],
     "addFilterItem": [64],
-    "removeFilterItem": [64]
+    "removeFilterItem": [64],
+    "showFilterModal": [64]
   }, [[0, "filterChange", "filterChangeListener"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

@@ -34,6 +34,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this._formFieldsStyle = "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding-right--small ez-padding-bottom--medium sc-snk-form-config";
     this._fieldsAvailableStyle = "ez-col ez-col--sd-12 ez-col--tb-12 ez-margin-bottom--medium ez-margin-right--medium sc-snk-form-config";
     this._fieldFloatingStyle = "form-config__field-config--dragged";
+    this._sortableTimer = 100;
     this._formConfigOptions = [];
     this._fieldConfigSelected = undefined;
     this._layoutFormConfig = undefined;
@@ -48,20 +49,27 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.messagesBuilder = undefined;
   }
   observeConfigManager() {
-    this.loadConfig();
+    this.loadConfig(this._sortableTimer);
   }
-  loadFields() {
+  loadFields(updateTimer = 0) {
     this._layoutFormConfig = [];
-    this.buildFields();
+    if (updateTimer > 0) {
+      setTimeout(() => {
+        this.buildFields();
+      }, updateTimer);
+    }
+    else {
+      this.buildFields();
+    }
   }
   buildFields() {
     this.buildFormConfig();
     this.buildAvailableFields();
   }
-  loadFormConfig() {
+  loadFormConfig(updateTimer) {
     var _a;
     this._formConfig = this.getConfig();
-    this.loadFields();
+    this.loadFields(updateTimer);
     this.controlFieldConfig();
     if (((_a = this._filterFieldsAvailable) === null || _a === void 0 ? void 0 : _a.value) != undefined) {
       this._filterFieldsAvailable.value = "";
@@ -104,12 +112,12 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   resetChangeConfig() {
-    this.loadFormConfig();
+    this.loadFormConfig(this._sortableTimer);
     this.clearTempGroups();
   }
   resetChangeOptionConfig() {
     this._formConfigChanged = false;
-    this.loadConfig();
+    this.loadConfig(this._sortableTimer);
     this.clearTempGroups();
   }
   getTabsToSave() {
@@ -324,7 +332,9 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       && oldContainer.id === newContainer.id) {
       evt.cancel();
       this._fieldsAvailable = [];
-      this.buildAvailableFields();
+      setTimeout(() => {
+        this.buildAvailableFields();
+      }, this._sortableTimer);
       return true;
     }
     return false;
@@ -367,7 +377,11 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         if (isNewGroup) {
           this.clearTempGroups(true);
         }
-        this.updateFieldsToSave();
+        const sortableTimer = oldContainer.dataset.groupName !== newContainer.dataset.groupName
+          || (newContainer.id === CONTAINER_ID.withoutGroup && oldContainer.id === CONTAINER_ID.fieldsAvailable)
+          ? this._sortableTimer
+          : 0;
+        this.updateFieldsToSave(sortableTimer);
       }, this._renderTimer);
       return true;
     }
@@ -397,12 +411,12 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return;
     }
   }
-  updateFieldsToSave() {
+  updateFieldsToSave(updateTimer = 0) {
     const fields = this.getFieldsToSave();
     if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
       this._formConfig.fields = fields;
     }
-    this.loadFields();
+    this.loadFields(updateTimer);
     this._formConfigChanged = true;
   }
   controlSortableField() {
@@ -432,7 +446,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   controlStopDraggingGroup(evt) {
     if (evt.data.newIndex !== evt.data.oldIndex) {
       setTimeout(() => {
-        this.updateFieldsToSave();
+        this.updateFieldsToSave(this._sortableTimer);
       }, this._renderTimer);
     }
   }
@@ -505,7 +519,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
     if (tabs.length > 0) {
       this._formConfig.tabs = tabs;
-      this.loadFields();
+      this.loadFields(this._sortableTimer);
       this.controlFieldConfig();
       this._formConfigChanged = true;
     }
@@ -529,13 +543,13 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (config != undefined) {
       this._formConfig = config;
       this._tabSelected = 1;
-      this.loadFields();
+      this.loadFields(this._sortableTimer);
       this.controlFieldConfig();
       this.clearTempGroups();
     }
   }
-  loadConfig() {
-    this.loadFormConfig();
+  loadConfig(updateTimer = 0) {
+    this.loadFormConfig(updateTimer);
     this.loadUserConfig();
   }
   addNewGroup() {
@@ -576,7 +590,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       });
     }
     else {
-      this.updateFieldsToSave();
+      this.updateFieldsToSave(this._sortableTimer);
     }
   }
   checkGroupExists(newLabel, indexGroup, isTempGroup = false) {
@@ -622,7 +636,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         field.group = newLabel;
       }
     });
-    this.loadFields();
+    this.loadFields(this._sortableTimer);
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -836,14 +850,14 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this._formConfigChanged = true;
     this.resetSortables();
   }
-  controlRemoveFieldConfig(fieldConfig) {
+  controlRemoveFieldConfig(fieldConfig, updateTimer) {
     var _a;
     this._formConfigChanged = false;
     if (fieldConfig == undefined) {
       return;
     }
     this._formConfig.fields = (_a = this._formConfig.fields) === null || _a === void 0 ? void 0 : _a.filter((field) => field.name !== fieldConfig.name);
-    this.loadFields();
+    this.loadFields(updateTimer);
     this.controlFieldConfig();
     this._formConfigChanged = true;
     this.resetSortables();
@@ -852,14 +866,14 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.controlSortableField();
     this.controlSortableGroup();
   }
-  handleFieldConfigChange(evt) {
+  handleFieldConfigChange(evt, updateTimer = 0) {
     const { field: fieldConfig, type: actionType } = evt.detail;
     if (actionType === ACTION_CONFIG.configuration) {
       this.controlFieldConfig(fieldConfig);
       return;
     }
     if (actionType === ACTION_CONFIG.remove) {
-      this.controlRemoveFieldConfig(fieldConfig);
+      this.controlRemoveFieldConfig(fieldConfig, updateTimer);
       return;
     }
     if (actionType === ACTION_CONFIG.add) {
@@ -880,7 +894,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         tab.label = newLabel;
       }
     });
-    this.loadFields();
+    this.loadFields(this._sortableTimer);
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -900,7 +914,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         this._formConfig.tabs = (_a = this._formConfig.tabs) === null || _a === void 0 ? void 0 : _a.filter((tab) => {
           return tab.label !== tabSelected.detail.label;
         });
-        this.loadFields();
+        this.loadFields(this._sortableTimer);
         this.controlFieldConfig();
         this._formConfigChanged = true;
       }
@@ -913,7 +927,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         tab.visible = !tab.visible;
       }
     });
-    this.loadFields();
+    this.loadFields(this._sortableTimer);
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }

package/dist/components/snk-grid2.js

@@ -59,6 +59,7 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this._showSnkFilterBar = true;
     this.columnFilterDataSource = new SnkMultiSelectionListDataSource();
     this.configName = undefined;
+    this.filterBarTitle = undefined;
     this.resourceID = undefined;
     this.selectionToastConfig = undefined;
     this.actionsList = undefined;
@@ -422,13 +423,14 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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-margin-bottom--medium" }, this._showSnkFilterBar &&
-      h(Fragment, null, h("snk-filter-bar", { ref: (ref) => this._snkFilterBar = ref, dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName, messagesBuilder: this.messagesBuilder, resourceID: this.resourceID, onConfigUpdated: evt => this.handleFilterConfigUpdated(evt.detail), disablePersonalizedFilter: this.disablePersonalizedFilter }), 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": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, messagesBuilder: this.messagesBuilder, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: this.getPrimaryButton(), resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.topTaskbarCustomSlotId, overflowStrategy: 'none' }, h("slot", { name: this.topTaskbarCustomSlotId }))), h("ez-grid", { ref: ref => this._grid = ref, class: (this.presentationMode === PresentationMode.SECONDARY ? "snk-grid-container__without-shadow " : "") + "snk-grid__table", "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.gridConfigChangeHandler(evt); }, onEzDoubleClick: (evt) => this.gridDoubleClick.emit(evt.detail), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, columnfilterDataSource: this.columnFilterDataSource, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, recordsValidator: this.recordsValidator, canEdit: this.canEdit }, h("snk-taskbar", { id: 'teste', dataUnit: this._dataUnit, configName: this.configName, messagesBuilder: this.messagesBuilder, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, presentationMode: this.presentationMode, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.getActionsList(), primaryButton: this.getPrimaryButton(), resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.gridHeaderCustomSlotId }, h("slot", { name: this.gridHeaderCustomSlotId }))), 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), application: this._application, selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resourceID }))));
+      h(Fragment, null, h("snk-filter-bar", { ref: (ref) => this._snkFilterBar = ref, title: this.filterBarTitle, dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName, messagesBuilder: this.messagesBuilder, resourceID: this.resourceID, onConfigUpdated: evt => this.handleFilterConfigUpdated(evt.detail), disablePersonalizedFilter: this.disablePersonalizedFilter }), 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": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, messagesBuilder: this.messagesBuilder, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: this.getPrimaryButton(), resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.topTaskbarCustomSlotId, overflowStrategy: 'none' }, h("slot", { name: this.topTaskbarCustomSlotId }))), h("ez-grid", { ref: ref => this._grid = ref, class: (this.presentationMode === PresentationMode.SECONDARY ? "snk-grid-container__without-shadow " : "") + "snk-grid__table", "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.gridConfigChangeHandler(evt); }, onEzDoubleClick: (evt) => this.gridDoubleClick.emit(evt.detail), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, columnfilterDataSource: this.columnFilterDataSource, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, recordsValidator: this.recordsValidator, canEdit: this.canEdit }, h("snk-taskbar", { id: 'teste', dataUnit: this._dataUnit, configName: this.configName, messagesBuilder: this.messagesBuilder, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, presentationMode: this.presentationMode, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.getActionsList(), primaryButton: this.getPrimaryButton(), resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.gridHeaderCustomSlotId }, h("slot", { name: this.gridHeaderCustomSlotId }))), 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), application: this._application, selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resourceID }))));
   }
   get _element() { return this; }
   static get style() { return snkGridCss; }
 }, [6, "snk-grid", {
     "columnFilterDataSource": [1040],
     "configName": [1, "config-name"],
+    "filterBarTitle": [1, "filter-bar-title"],
     "resourceID": [1, "resource-i-d"],
     "selectionToastConfig": [16],
     "actionsList": [16],

package/dist/components/snk-simple-crud2.js

@@ -310,9 +310,9 @@ const SnkSimpleCrud = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   render() {
     var _a;
-    return (h("snk-data-unit", { class: "simple-crud__container", dataUnit: this.dataUnit, useCancelConfirm: this.useCancelConfirm, onDataStateChange: evt => this.onDataStateChange(evt), onCancelEdition: this.handleCancelEdit.bind(this), onInsertionMode: () => this.goToView(VIEW_MODE.FORM), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), ignoreSaveMessage: this._currentViewMode === VIEW_MODE.GRID, onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail }, h("header", null, h("slot", { name: "snkSimpleCrudHeader" })), h("section", { class: "ez-box ez-box--shadow simple-crud__container-section" }, h("snk-taskbar", { class: "ez-box ez-box--shadow ez-padding--medium ez-margin-bottom--large", dataUnit: this.dataUnit, primaryButton: ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", "data-element-id": "grid_left", messagesBuilder: this.messagesBuilder, buttons: this._taskbarProcessor.buttons, actionsList: this.getActionsList(), disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, slot: "leftButtons", presentationMode: PresentationMode.SECONDARY }, h("slot", { name: "TASKBAR_CUSTOM_ELEMENTS" })), h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, h("stack-item", null, h("ez-grid", { ref: ref => this._grid = ref, dataUnit: this.dataUnit, config: this.gridConfig, "no-header": true, multipleSelection: this.multipleSelection, onEzDoubleClick: () => this.goToView(VIEW_MODE.FORM), columnfilterDataSource: this.dataUnit.name.includes(InMemoryLoader.IN_MEMORY_DATA_UNIT_NAME)
+    return (h("snk-data-unit", { class: "simple-crud__container", dataUnit: this.dataUnit, useCancelConfirm: this.useCancelConfirm, onDataStateChange: evt => this.onDataStateChange(evt), onCancelEdition: this.handleCancelEdit.bind(this), onInsertionMode: () => this.goToView(VIEW_MODE.FORM), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), ignoreSaveMessage: this._currentViewMode === VIEW_MODE.GRID, onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail }, h("header", null, h("slot", { name: "snkSimpleCrudHeader" })), h("section", { class: "ez-box ez-box--shadow simple-crud__container-section" }, h("snk-taskbar", { class: "ez-box ez-box--shadow ez-padding--medium", dataUnit: this.dataUnit, primaryButton: ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", "data-element-id": "grid_left", messagesBuilder: this.messagesBuilder, buttons: this._taskbarProcessor.buttons, actionsList: this.getActionsList(), disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, slot: "leftButtons", presentationMode: PresentationMode.SECONDARY }, h("slot", { name: "TASKBAR_CUSTOM_ELEMENTS" })), h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, h("stack-item", null, h("ez-grid", { class: "ez-margin-bottom--large", ref: ref => this._grid = ref, dataUnit: this.dataUnit, config: this.gridConfig, "no-header": true, multipleSelection: this.multipleSelection, onEzDoubleClick: () => this.goToView(VIEW_MODE.FORM), columnfilterDataSource: this.dataUnit.name.includes(InMemoryLoader.IN_MEMORY_DATA_UNIT_NAME)
         ? undefined
-        : this._multiSelectionListDataSource, useEnterLikeTab: this.useEnterLikeTab }, h("div", { slot: "footer" }, h("slot", { name: "snkSimpleCrudFooter" })))), h("stack-item", null, h("ez-form", { dataUnit: this.dataUnit, config: this.formConfig, fieldToFocus: this._fieldToGetFocus, onEzFormSetFields: (evt) => this.handleFormSetFields(evt.detail), onEzFormRequestClearFieldToFocus: this.clearFieldToFocusHandler.bind(this) }))))));
+        : this._multiSelectionListDataSource, useEnterLikeTab: this.useEnterLikeTab }, h("div", { slot: "footer" }, h("slot", { name: "snkSimpleCrudFooter" })))), h("stack-item", null, h("ez-form", { class: "ez-margin-top--large", dataUnit: this.dataUnit, config: this.formConfig, fieldToFocus: this._fieldToGetFocus, onEzFormSetFields: (evt) => this.handleFormSetFields(evt.detail), onEzFormRequestClearFieldToFocus: this.clearFieldToFocusHandler.bind(this) }))))));
   }
   get _element() { return this; }
   static get watchers() { return {