@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-131882.2 → 0.0.0-bugfix-dev-KB-174860.0

package/dist/components/snk-grid2.js

@@ -4,7 +4,7 @@ import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 import { buildFieldSearch } from '@sankhyalabs/ezui/dist/collection/utils';
 import './DataFetcher.js';
 import { P as PresentationMode, E as ExporterStrategy } from './ISave.js';
-import { C as CommonsExporter, T as TaskbarProcessor, a as CrudUtils, S as SnkMultiSelectionListDataSource, R as RmPrecisionCustomValueFormatter, b as ContinuousInsertUtils, c as ClientSideExporterProvider } from './ContinuousInsertUtils.js';
+import { a as CommonsExporter, T as TaskbarProcessor, b as CrudUtils, S as SnkMultiSelectionListDataSource, R as RmPrecisionCustomValueFormatter, C as ContinuousInsertUtils, c as ClientSideExporterProvider } from './ContinuousInsertUtils.js';
 import '@sankhyalabs/ezui/dist/collection/utils/constants';
 import '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
 import './dataunit-fetcher.js';
@@ -14,26 +14,27 @@ import './constants.js';
 import { C as ConfigStorage } from './ConfigStorage.js';
 import { s as store } from './index2.js';
 import { g as getSelectedRecordsIDsInfo } from './GetSelectedRecordsIDsInfo.js';
-import { v as validateFilters, d as defineCustomElement$a } from './snk-filter-modal2.js';
-import { T as TaskbarElement, d as defineCustomElement$3 } from './snk-taskbar2.js';
-import { d as defineCustomElement$m } from './snk-actions-button2.js';
-import { d as defineCustomElement$l } from './snk-data-exporter2.js';
-import { d as defineCustomElement$k } from './snk-default-filter2.js';
-import { d as defineCustomElement$j } from './snk-exporter-email-sender2.js';
-import { d as defineCustomElement$i } from './snk-expression-group2.js';
-import { d as defineCustomElement$h } from './snk-expression-item2.js';
-import { d as defineCustomElement$g } from './snk-filter-advanced-mode2.js';
-import { d as defineCustomElement$f } from './snk-filter-assistent-mode2.js';
-import { d as defineCustomElement$e } from './snk-filter-bar2.js';
-import { d as defineCustomElement$d } from './snk-filter-detail2.js';
-import { d as defineCustomElement$c } from './snk-filter-field-search2.js';
-import { d as defineCustomElement$b } from './snk-filter-item2.js';
-import { d as defineCustomElement$9 } from './snk-filter-modal-item2.js';
-import { d as defineCustomElement$8 } from './snk-filter-param-config2.js';
-import { d as defineCustomElement$7 } from './snk-grid-config2.js';
-import { d as defineCustomElement$6 } from './snk-personalized-filter2.js';
-import { d as defineCustomElement$5 } from './snk-select-box2.js';
-import { d as defineCustomElement$4 } from './snk-simple-bar2.js';
+import { v as validateFilters, d as defineCustomElement$b } from './snk-filter-modal2.js';
+import { T as TaskbarElement, d as defineCustomElement$4 } from './snk-taskbar2.js';
+import { d as defineCustomElement$n } from './snk-actions-button2.js';
+import { d as defineCustomElement$m } from './snk-data-exporter2.js';
+import { d as defineCustomElement$l } from './snk-default-filter2.js';
+import { d as defineCustomElement$k } from './snk-exporter-email-sender2.js';
+import { d as defineCustomElement$j } from './snk-expression-group2.js';
+import { d as defineCustomElement$i } from './snk-expression-item2.js';
+import { d as defineCustomElement$h } from './snk-filter-advanced-mode2.js';
+import { d as defineCustomElement$g } from './snk-filter-assistent-mode2.js';
+import { d as defineCustomElement$f } from './snk-filter-bar2.js';
+import { d as defineCustomElement$e } from './snk-filter-detail2.js';
+import { d as defineCustomElement$d } from './snk-filter-field-search2.js';
+import { d as defineCustomElement$c } from './snk-filter-item2.js';
+import { d as defineCustomElement$a } from './snk-filter-modal-item2.js';
+import { d as defineCustomElement$9 } from './snk-filter-param-config2.js';
+import { d as defineCustomElement$8 } from './snk-grid-config2.js';
+import { d as defineCustomElement$7 } from './snk-personalized-filter2.js';
+import { d as defineCustomElement$6 } from './snk-select-box2.js';
+import { d as defineCustomElement$5 } from './snk-simple-bar2.js';
+import { d as defineCustomElement$3 } from './snk-taskbar-skeleton2.js';
 import { d as defineCustomElement$2 } from './taskbar-actions-button2.js';
 import { d as defineCustomElement$1 } from './taskbar-split-button2.js';
 
@@ -91,7 +92,7 @@ class ServerSideExporterProvider extends CommonsExporter {
   }
 }
 
-const snkGridCss = ".sc-snk-grid-h{--snk-grid-min-height:300px;--snk-grid-padding:var(--space--small)}.snk-grid__container.sc-snk-grid{display:flex;height:100%;width:100%;padding:var(--snk-grid-padding);outline:none;--snk-grid-header--min-height:var(--space--52)}.snk-grid__header.sc-snk-grid{width:100%;display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;min-height:var(--snk-grid-header--min-height)}.snk-grid__filter-bar.sc-snk-grid{width:100%}.snk-grid__header-divider.sc-snk-grid{margin-bottom:var(--space--medium);margin-right:var(--space--0);align-self:stretch}.snk-grid__header.sc-snk-grid snk-taskbar.sc-snk-grid{display:flex;align-items:flex-start;min-height:var(--snk-grid-header--min-height)}.snk-grid__table.sc-snk-grid{min-height:var(--snk-grid-min-height)}.snk-grid-container__without-shadow.sc-snk-grid{--ezgrid__container--shadow:unset}.snk-grid-container__footer.sc-snk-grid{background-color:var(--background--xlight, #FFF);border-radius:0 0 var(--border--radius-medium) var(--border--radius-medium);box-shadow:var(--shadow--small)}";
+const snkGridCss = ".sc-snk-grid-h{--snk-grid-min-height:300px;--snk-grid-padding:unset;--snk-grid-margin:var(--space--small);--snk-grid-box-shadow:var(--shadow--small);--snk-grid__header-padding:unset}.snk-grid__container.sc-snk-grid{display:flex;height:100%;margin:var(--snk-grid-margin);outline:none;border:1px solid var(--color--strokes, #E1E2E5);border-radius:var(--border--radius-12, 12px);box-shadow:var(--snk-grid-box-shadow);padding:var(--snk-grid-padding);--snk-grid-header--min-height:var(--space--52)}.snk-grid__header.sc-snk-grid{width:100%;display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;min-height:var(--snk-grid-header--min-height);padding-top:var(--snk-grid__header-padding);padding-right:var(--snk-grid__header-padding)}.snk-grid__filter-bar.sc-snk-grid{width:100%}.snk-grid__header-divider.sc-snk-grid{margin-bottom:var(--space--medium);margin-right:var(--space--0);align-self:stretch}.snk-grid__header.sc-snk-grid snk-taskbar.sc-snk-grid{display:flex;align-items:flex-start;min-height:var(--snk-grid-header--min-height)}.snk-grid__header.sc-snk-grid ez-tooltip.sc-snk-grid{width:auto;margin-inline:var(--space--8, 8px)}.snk-grid__table.sc-snk-grid{min-height:var(--snk-grid-min-height)}.snk-grid-container__without-shadow.sc-snk-grid{--ezgrid__container--shadow:unset}.snk-grid-container__footer.sc-snk-grid{background-color:var(--background--xlight, #FFF);border-radius:0 0 var(--border--radius-medium) var(--border--radius-medium)}.snk-grid-container__footer.sc-snk-grid:has(*){border-top:1px solid var(--color--strokes, #E1E2E5)}";
 
 const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -114,12 +115,12 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this._headerTaskbarProcessor = new TaskbarProcessor({
       'snkGridHeaderTaskbar.unselected': ['REFRESH', 'DATA_EXPORTER', 'ACTIONS_BUTTON', 'MORE_OPTIONS'],
       'snkGridHeaderTaskbar.selected': this.getGridHeaderSelectedBtns(),
-      'snkGridHeaderTaskbar.detail.unselected': ['REFRESH', 'MORE_OPTIONS'],
-      'snkGridHeaderTaskbar.detail.selected': ['UPDATE', 'ATTACH', 'CLONE', 'REMOVE', 'MORE_OPTIONS', 'DIVIDER', 'REFRESH'],
+      'snkGridHeaderTaskbar.detail.unselected': ['REFRESH', 'ACTIONS_BUTTON', 'MORE_OPTIONS'],
+      'snkGridHeaderTaskbar.detail.selected': this.getDetailGridSelectedBtns(),
       'snkGridHeaderTaskbar.singleTaskbar.unselected': ['INSERT', 'FORM_MODE', 'CONFIGURATOR', 'REFRESH', 'DATA_EXPORTER', 'ACTIONS_BUTTON', 'MORE_OPTIONS'],
       'snkGridHeaderTaskbar.singleTaskbar.selected': ['UPDATE', 'CLONE', 'REMOVE', 'MORE_OPTIONS', 'DIVIDER', 'ATTACH', 'FORM_MODE', 'CONFIGURATOR', 'REFRESH', 'DATA_EXPORTER', 'ACTIONS_BUTTON'],
-      'snkGridHeaderTaskbar.singleTaskbar.detail.unselected': ['INSERT', 'FORM_MODE', 'CONFIGURATOR', 'REFRESH', 'MORE_OPTIONS'],
-      'snkGridHeaderTaskbar.singleTaskbar.detail.selected': ['UPDATE', 'ATTACH', 'CLONE', 'REMOVE', 'MORE_OPTIONS', 'DIVIDER', 'FORM_MODE', 'CONFIGURATOR', 'REFRESH'],
+      'snkGridHeaderTaskbar.singleTaskbar.detail.unselected': ['INSERT', 'FORM_MODE', 'CONFIGURATOR', 'REFRESH', 'ACTIONS_BUTTON', 'MORE_OPTIONS'],
+      'snkGridHeaderTaskbar.singleTaskbar.detail.selected': ['UPDATE', 'ATTACH', 'CLONE', 'REMOVE', 'MORE_OPTIONS', 'DIVIDER', 'FORM_MODE', 'CONFIGURATOR', 'REFRESH', 'ACTIONS_BUTTON'],
       'snkGridHeaderTaskbar.singleTaskbar.finish_edition': ['CANCEL', 'SAVE', this.handleAddFormMode()],
     });
     this.dataUnitInterceptor = {
@@ -178,6 +179,18 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.compact = undefined;
     this.filterCustomConfig = undefined;
     this.filterCustomConfigInterceptor = undefined;
+    this.hidePagination = false;
+    this.hideHeader = false;
+    this.hideGridTaskbar = false;
+  }
+  getDetailGridSelectedBtns() {
+    const btns = [
+      TaskbarElement.UPDATE, TaskbarElement.ATTACH, TaskbarElement.CLONE, TaskbarElement.MORE_OPTIONS,
+      TaskbarElement.DIVIDER, TaskbarElement.REFRESH, TaskbarElement.ACTIONS_BUTTON
+    ];
+    if (this.multipleEditionEnabled)
+      btns.unshift(TaskbarElement.UPDATE_MULTIPLE);
+    return btns;
   }
   getGridHeaderSelectedBtns() {
     const btns = [
@@ -318,6 +331,24 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async setFocus() {
     this._grid.setFocus();
   }
+  /**
+   * Manipula a mudança de página da grid.
+   */
+  async handlePageChange() {
+    await this._grid.handlePageChange();
+  }
+  /**
+   * Localiza determinada coluna tornando-a visível.
+   */
+  async locateColumn(columnName) {
+    return this._grid.locateColumn(columnName);
+  }
+  /**
+   * Usa um argumento para filtrar as colunas por label
+   */
+  async filterColumns(search) {
+    return this._grid.filterColumns(search);
+  }
   async handleClick(event) {
     var _a;
     if (this.hasToBlockEvent(event)) {
@@ -681,13 +712,16 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return this.enableGridInsert && this._dataUnit.hasNewRecord();
   }
   render() {
+    var _a, _b;
     if (!this._dataUnit) {
       return undefined;
     }
-    return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large ez-box--no-outline", tabindex: "0" }, h("div", { class: "snk-grid__header" }, this._showSnkFilterBar &&
-      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, filterBarLegacyConfigName: this.filterBarLegacyConfigName, autoLoad: this.autoLoad, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, filterCustomConfig: this.filterCustomConfig, filterCustomConfigInterceptor: this.filterCustomConfigInterceptor, mode: this._filterMode }), 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 ez-padding-top--extra-small", "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', actionsSettingsList: this.getActionsSettingsList() }, 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) => {
+    return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-box--no-outline", tabindex: "0" }, !this.hideHeader &&
+      h("div", { class: "snk-grid__header" }, this._showSnkFilterBar &&
+        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, filterBarLegacyConfigName: this.filterBarLegacyConfigName, autoLoad: this.autoLoad, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, filterCustomConfig: this.filterCustomConfig, filterCustomConfigInterceptor: this.filterCustomConfigInterceptor, mode: this._filterMode, hideFilterButton: true }), h("ez-tooltip", { message: (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage("snkCrud.customButtons.filter") }, h("ez-button", { mode: "icon", iconName: "filter", onClick: () => this._snkFilterBar.showFilterModal(), size: "small" }))), h("snk-taskbar", { "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', actionsSettingsList: this.getActionsSettingsList() }, 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);
-      }, onEzColumnFilterChanged: async () => await this.dataExporterProviderStore(), 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, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableContinuousInsert: this._enableContinuousInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, outlineMode: this.outlineMode, useSearchColumn: this.useSearchColumn, suppressHorizontalScroll: this.suppressHorizontalScroll, paginationCounterMode: this.paginationCounterMode, suppressCheckboxColumn: this.suppressCheckboxColumn, suppressFilterColumn: this.suppressFilterColumn, compact: this.compact }, h("snk-taskbar", { id: 'teste', dataUnit: this._dataUnit, configName: this.configName, messagesBuilder: this.messagesBuilder, "data-element-id": "grid_left", buttons: this.getGridHeaderButtons(), 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, additionalSlotId: this.gridHeaderDynamicSearchSlotId, actionsSettingsList: this.getActionsSettingsList() }, h("slot", { name: this.gridHeaderCustomSlotId }), h("slot", { name: this.gridHeaderDynamicSearchSlotId }))), h("div", { class: "ez-col ez-col--sd-12 snk-grid-container__footer" }, h("slot", { name: "SnkGridFooter" })), h("ez-popup", { size: "medium", heightMode: "auto", useHeader: false, opened: this._popUpGridConfig, onEzClosePopup: () => 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, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resourceID }))));
+      }, onEzColumnFilterChanged: async () => await this.dataExporterProviderStore(), 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, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableContinuousInsert: this._enableContinuousInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, outlineMode: this.outlineMode, useSearchColumn: this.useSearchColumn, suppressHorizontalScroll: this.suppressHorizontalScroll, paginationCounterMode: this.paginationCounterMode, suppressCheckboxColumn: this.suppressCheckboxColumn, suppressFilterColumn: this.suppressFilterColumn, compact: this.compact, hidePagination: this.hidePagination }, !this.hideGridTaskbar &&
+      h("snk-taskbar", { id: 'teste', dataUnit: this._dataUnit, configName: this.configName, messagesBuilder: this.messagesBuilder, "data-element-id": "grid_left", buttons: this.getGridHeaderButtons(), 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, additionalSlotId: this.gridHeaderDynamicSearchSlotId, actionsSettingsList: this.getActionsSettingsList() }, h("slot", { name: this.gridHeaderCustomSlotId }), h("slot", { name: this.gridHeaderDynamicSearchSlotId }))), h("div", { class: "ez-col ez-col--sd-12 snk-grid-container__footer" }, h("slot", { name: "SnkGridFooter" })), h("ez-popup", { size: "medium", heightMode: "auto", useHeader: false, opened: this._popUpGridConfig, onEzClosePopup: () => 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, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resourceID, metadata: (_b = this._dataUnit) === null || _b === void 0 ? void 0 : _b.metadata }))));
   }
   get _element() { return this; }
   static get watchers() { return {
@@ -733,6 +767,9 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "compact": [4],
     "filterCustomConfig": [16],
     "filterCustomConfigInterceptor": [16],
+    "hidePagination": [516, "hide-pagination"],
+    "hideHeader": [516, "hide-header"],
+    "hideGridTaskbar": [516, "hide-grid-taskbar"],
     "_dataUnit": [32],
     "_dataState": [32],
     "_gridConfig": [32],
@@ -751,13 +788,16 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "addGridCustomRender": [64],
     "addCustomValueFormatter": [64],
     "removeCustomValueFormatter": [64],
-    "setFocus": [64]
+    "setFocus": [64],
+    "handlePageChange": [64],
+    "locateColumn": [64],
+    "filterColumns": [64]
   }, [[2, "click", "handleClick"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-grid", "snk-actions-button", "snk-data-exporter", "snk-default-filter", "snk-exporter-email-sender", "snk-expression-group", "snk-expression-item", "snk-filter-advanced-mode", "snk-filter-assistent-mode", "snk-filter-bar", "snk-filter-detail", "snk-filter-field-search", "snk-filter-item", "snk-filter-modal", "snk-filter-modal-item", "snk-filter-param-config", "snk-grid-config", "snk-personalized-filter", "snk-select-box", "snk-simple-bar", "snk-taskbar", "taskbar-actions-button", "taskbar-split-button"];
+  const components = ["snk-grid", "snk-actions-button", "snk-data-exporter", "snk-default-filter", "snk-exporter-email-sender", "snk-expression-group", "snk-expression-item", "snk-filter-advanced-mode", "snk-filter-assistent-mode", "snk-filter-bar", "snk-filter-detail", "snk-filter-field-search", "snk-filter-item", "snk-filter-modal", "snk-filter-modal-item", "snk-filter-param-config", "snk-grid-config", "snk-personalized-filter", "snk-select-box", "snk-simple-bar", "snk-taskbar", "snk-taskbar-skeleton", "taskbar-actions-button", "taskbar-split-button"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-grid":
       if (!customElements.get(tagName)) {
@@ -766,100 +806,105 @@ function defineCustomElement() {
       break;
     case "snk-actions-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "snk-data-exporter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "snk-default-filter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "snk-exporter-email-sender":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "snk-expression-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "snk-expression-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "snk-filter-advanced-mode":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "snk-filter-assistent-mode":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "snk-filter-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "snk-filter-detail":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "snk-filter-field-search":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "snk-filter-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "snk-filter-modal":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "snk-filter-modal-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "snk-filter-param-config":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "snk-grid-config":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "snk-personalized-filter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "snk-select-box":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "snk-simple-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "snk-taskbar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "snk-taskbar-skeleton":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/snk-image-input2.js

@@ -102,7 +102,7 @@ function getPKs(dataUnit) {
   const fields = dataUnit.metadata.fields;
   const selectedRecord = dataUnit.getSelectedRecord();
   fields.forEach((field) => {
-    if (field.properties['isPrimaryKey']) {
+    if (field.properties['isPrimaryKey'] && selectedRecord) {
       pk[field.name] = selectedRecord[field.name];
     }
   });
@@ -118,19 +118,21 @@ async function imageBlobToBase64(blob) {
     reader.readAsDataURL(blob);
   });
 }
-async function downloadImage(pks, fieldName, entityName) {
+async function downloadImage(pks, fieldName, entityName, signal) {
   const uploadUrl = getBaseUrl(pks, entityName, fieldName);
   if (!uploadUrl) {
     return;
   }
   try {
-    const response = await fetch(uploadUrl);
+    const response = await fetch(uploadUrl, { signal });
     if (response.ok) {
       const blob = await response.blob();
       return await imageBlobToBase64(blob);
     }
   }
   catch (error) {
+    if (signal === null || signal === void 0 ? void 0 : signal.aborted)
+      return;
     console.error('Error downloading image:', error);
   }
 }
@@ -159,6 +161,10 @@ const SnkImageInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         await this.clearImage();
         return;
       }
+      if (action.type === Action.EDITION_CANCELED) {
+        await this.loadImage();
+        return;
+      }
     };
     this.dataUnit = undefined;
     this.fieldName = undefined;
@@ -183,6 +189,8 @@ const SnkImageInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return this.messagesBuilder.getMessage(key, params);
   }
   async clearImage() {
+    var _a;
+    (_a = this._loadAbortController) === null || _a === void 0 ? void 0 : _a.abort();
     this.imageValue = undefined;
   }
   async handleImageChange(event) {
@@ -244,11 +252,17 @@ const SnkImageInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   async loadImage(pks) {
-    var _a;
+    var _a, _b;
+    (_a = this._loadAbortController) === null || _a === void 0 ? void 0 : _a.abort();
+    const controller = new AbortController();
+    this._loadAbortController = controller;
     this.loading = true;
     if (this.dataUnit && this.entityName) {
-      pks = (_a = pks !== null && pks !== void 0 ? pks : this.getPksFromDataUnit()) !== null && _a !== void 0 ? _a : getPKs(this.dataUnit);
-      this.imageValue = await downloadImage(pks, this.fieldName, this.entityName);
+      pks = (_b = pks !== null && pks !== void 0 ? pks : this.getPksFromDataUnit()) !== null && _b !== void 0 ? _b : getPKs(this.dataUnit);
+      const image = await downloadImage(pks, this.fieldName, this.entityName, controller.signal);
+      if (controller.signal.aborted)
+        return;
+      this.imageValue = image;
     }
     this.loading = false;
   }

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

@@ -344,7 +344,7 @@ const SnkPersonalizedFilter = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (!((_a = this._filterAssistent) === null || _a === void 0 ? void 0 : _a.assistent) && this._filterAssistentMode) {
       return;
     }
-    return (h(Host, null, h("div", { class: "snk-personalized-filter" }, h("div", null, h("snk-simple-bar", { label: this.buildTitle(), onExit: () => this.handleCancel() }, h("div", { class: "snk-personalized-filter__header-actions", slot: "rightSlot" }, h("ez-button", { size: "small", label: this.getMessage("snkPersonalizedFilter.info.labelCancel"), onClick: () => this.handleCancel() }), h("ez-button", { size: "small", ref: (el) => this._elButtonSave = el, enabled: false, class: "ez-button--primary", label: this.getMessage("snkPersonalizedFilter.info.labelSave"), onClick: this.handleSave.bind(this) })))), h("div", { class: "ez-box ez-margin-bottom--medium ez-box__main" }, h("div", { class: "ez-box__container" }, h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, h("div", { class: "ez-flex" }, h("ez-tooltip", { message: this.getMessage("snkPersonalizedFilter.info.textInputDisabled"), active: this.isDefaultFilter }, h("ez-text-input", { class: "ez-padding-right--medium", label: this.getMessage("snkPersonalizedFilter.info.labelNameFilter"), value: (_b = this._filterAssistent) === null || _b === void 0 ? void 0 : _b.name, onEzChange: (evt) => this.handleTitleChange(evt.detail), enabled: !this.isDefaultFilter })), this.renderButtonAddField(), h("ez-button", { ref: (el) => this._elButtonMode = el, class: "snk-personalized-filter__button-mode", label: this._filterAssistentMode ? this.getMessage("snkPersonalizedFilter.info.activeModeAdvanced") : this.getMessage("snkPersonalizedFilter.info.activeModeAssistent"), onClick: () => this.handleModeChange(), "data-tooltip": !(this._filterAssistentMode || ((_c = this._filterAssistent) === null || _c === void 0 ? void 0 : _c.assistent)) ? this.getMessage("snkPersonalizedFilter.info.tooltipDisabledAssistentMode") : undefined, "data-flow": "bottom", enabled: (!this._filterAssistent.name || Boolean(this._filterAssistentMode || ((_d = this._filterAssistent) === null || _d === void 0 ? void 0 : _d.assistent))) })), this.buildContainerPersonalizedFilter()))))));
+    return (h(Host, null, h("div", { class: "snk-personalized-filter" }, h("div", null, h("snk-simple-bar", { label: this.buildTitle(), onExit: () => this.handleCancel() }, h("div", { class: "snk-personalized-filter__header-actions", slot: "rightSlot" }, h("ez-button", { label: this.getMessage("snkPersonalizedFilter.info.labelCancel"), onClick: () => this.handleCancel() }), h("ez-button", { ref: (el) => this._elButtonSave = el, enabled: false, class: "ez-button--primary", label: this.getMessage("snkPersonalizedFilter.info.labelSave"), onClick: this.handleSave.bind(this) })))), h("div", { class: "ez-box ez-margin-bottom--medium ez-box__main" }, h("div", { class: "ez-box__container" }, h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, h("div", { class: "ez-flex" }, h("ez-tooltip", { message: this.getMessage("snkPersonalizedFilter.info.textInputDisabled"), active: this.isDefaultFilter }, h("ez-text-input", { class: "ez-padding-right--medium", label: this.getMessage("snkPersonalizedFilter.info.labelNameFilter"), value: (_b = this._filterAssistent) === null || _b === void 0 ? void 0 : _b.name, onEzChange: (evt) => this.handleTitleChange(evt.detail), enabled: !this.isDefaultFilter })), this.renderButtonAddField(), h("ez-button", { ref: (el) => this._elButtonMode = el, class: "snk-personalized-filter__button-mode", label: this._filterAssistentMode ? this.getMessage("snkPersonalizedFilter.info.activeModeAdvanced") : this.getMessage("snkPersonalizedFilter.info.activeModeAssistent"), onClick: () => this.handleModeChange(), "data-tooltip": !(this._filterAssistentMode || ((_c = this._filterAssistent) === null || _c === void 0 ? void 0 : _c.assistent)) ? this.getMessage("snkPersonalizedFilter.info.tooltipDisabledAssistentMode") : undefined, "data-flow": "bottom", enabled: (!this._filterAssistent.name || Boolean(this._filterAssistentMode || ((_d = this._filterAssistent) === null || _d === void 0 ? void 0 : _d.assistent))) })), this.buildContainerPersonalizedFilter()))))));
   }
   static get watchers() { return {
     "filterId": ["loadFilter"]

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

@@ -2,10 +2,10 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { StringUtils, ApplicationContext, ObjectUtils, Action, DataType, UserInterface, KeyboardManager, ElementIDUtils } from '@sankhyalabs/core';
 import { CSSVarsUtils, buildFieldSearch } from '@sankhyalabs/ezui/dist/collection/utils';
 import { V as VIEW_MODE, S as SIMPLE_CRUD_MODE } from './constants.js';
-import { T as TaskbarElement, d as defineCustomElement$4 } from './snk-taskbar2.js';
+import { T as TaskbarElement, d as defineCustomElement$5 } from './snk-taskbar2.js';
 import './DataFetcher.js';
 import { P as PresentationMode } from './ISave.js';
-import { S as SnkMultiSelectionListDataSource, T as TaskbarProcessor, R as RmPrecisionCustomValueFormatter, b as ContinuousInsertUtils, a as CrudUtils, c as ClientSideExporterProvider } from './ContinuousInsertUtils.js';
+import { S as SnkMultiSelectionListDataSource, T as TaskbarProcessor, R as RmPrecisionCustomValueFormatter, C as ContinuousInsertUtils, b as CrudUtils, c as ClientSideExporterProvider } from './ContinuousInsertUtils.js';
 import '@sankhyalabs/ezui/dist/collection/utils/constants';
 import '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
 import { I as InMemoryLoader } from './dataunit-fetcher.js';
@@ -14,16 +14,17 @@ import { F as FormConfigFetcher } from './form-config-fetcher.js';
 import { C as ConfigStorage } from './ConfigStorage.js';
 import { S as SnkFormConfigManager } from './SnkFormConfigManager.js';
 import { s as store } from './index2.js';
-import { d as defineCustomElement$e } from './snk-actions-button2.js';
-import { d as defineCustomElement$d } from './snk-configurator2.js';
-import { d as defineCustomElement$c } from './snk-data-exporter2.js';
-import { d as defineCustomElement$b } from './snk-data-unit2.js';
-import { d as defineCustomElement$a } from './snk-exporter-email-sender2.js';
-import { d as defineCustomElement$9 } from './snk-grid-config2.js';
-import { d as defineCustomElement$8 } from './snk-layout-form-config2.js';
-import { d as defineCustomElement$7 } from './snk-numbering-config2.js';
-import { d as defineCustomElement$6 } from './snk-select-box2.js';
-import { d as defineCustomElement$5 } from './snk-simple-form-config2.js';
+import { d as defineCustomElement$f } from './snk-actions-button2.js';
+import { d as defineCustomElement$e } from './snk-configurator2.js';
+import { d as defineCustomElement$d } from './snk-data-exporter2.js';
+import { d as defineCustomElement$c } from './snk-data-unit2.js';
+import { d as defineCustomElement$b } from './snk-exporter-email-sender2.js';
+import { d as defineCustomElement$a } from './snk-grid-config2.js';
+import { d as defineCustomElement$9 } from './snk-layout-form-config2.js';
+import { d as defineCustomElement$8 } from './snk-numbering-config2.js';
+import { d as defineCustomElement$7 } from './snk-select-box2.js';
+import { d as defineCustomElement$6 } from './snk-simple-form-config2.js';
+import { d as defineCustomElement$4 } from './snk-taskbar-skeleton2.js';
 import { d as defineCustomElement$3 } from './snk-view-representation2.js';
 import { d as defineCustomElement$2 } from './taskbar-actions-button2.js';
 import { d as defineCustomElement$1 } from './taskbar-split-button2.js';
@@ -917,7 +918,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-simple-crud", "snk-actions-button", "snk-configurator", "snk-data-exporter", "snk-data-unit", "snk-exporter-email-sender", "snk-grid-config", "snk-layout-form-config", "snk-numbering-config", "snk-select-box", "snk-simple-form-config", "snk-taskbar", "snk-view-representation", "taskbar-actions-button", "taskbar-split-button"];
+  const components = ["snk-simple-crud", "snk-actions-button", "snk-configurator", "snk-data-exporter", "snk-data-unit", "snk-exporter-email-sender", "snk-grid-config", "snk-layout-form-config", "snk-numbering-config", "snk-select-box", "snk-simple-form-config", "snk-taskbar", "snk-taskbar-skeleton", "snk-view-representation", "taskbar-actions-button", "taskbar-split-button"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-simple-crud":
       if (!customElements.get(tagName)) {
@@ -926,55 +927,60 @@ function defineCustomElement() {
       break;
     case "snk-actions-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "snk-configurator":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "snk-data-exporter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "snk-data-unit":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "snk-exporter-email-sender":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "snk-grid-config":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "snk-layout-form-config":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "snk-numbering-config":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "snk-select-box":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "snk-simple-form-config":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "snk-taskbar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "snk-taskbar-skeleton":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

package/dist/components/snk-taskbar-skeleton.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkTaskbarSkeleton extends Components.SnkTaskbarSkeleton, HTMLElement {}
+export const SnkTaskbarSkeleton: {
+  prototype: SnkTaskbarSkeleton;
+  new (): SnkTaskbarSkeleton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { S as SnkTaskbarSkeleton$1, d as defineCustomElement$1 } from './snk-taskbar-skeleton2.js';
+
+const SnkTaskbarSkeleton = SnkTaskbarSkeleton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkTaskbarSkeleton, defineCustomElement };

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

@@ -0,0 +1,29 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const snkTaskbarSkeletonCss = ".sc-snk-taskbar-skeleton-h{display:flex;align-items:center;height:100%;padding:0 var(--space--8, 8px)}ez-skeleton.sc-snk-taskbar-skeleton{--skeleton-width:42px;--skeleton-height:42px;--skeleton-margin-left:var(--space--4, 4px)}";
+
+const SnkTaskbarSkeleton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, null, h("ez-skeleton", { variant: "circle", count: 12 }), h("ez-skeleton", { width: "100px" })));
+  }
+  static get style() { return snkTaskbarSkeletonCss; }
+}, [2, "snk-taskbar-skeleton"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-taskbar-skeleton"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-taskbar-skeleton":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkTaskbarSkeleton);
+      }
+      break;
+  } });
+}
+
+export { SnkTaskbarSkeleton as S, defineCustomElement as d };