@sankhyalabs/sankhyablocks 10.1.0-dev.4 → 10.1.0-dev.40

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

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { ApplicationContext, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
+import { ApplicationContext, StringUtils, ElementIDUtils, UserInterface } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
 import { C as ConfigStorage } from './ConfigStorage.js';
 import { O as ORDER_VALUES } from './constants.js';
+import { GRID_COLUMN_DEFAULT_WIDTHS } from '@sankhyalabs/ezui/dist/collection/components/ez-grid/utils';
 import { d as defineCustomElement$1 } from './snk-select-box2.js';
 
 const snkGridConfigCss = ".sc-snk-grid-config-h{--snk-grid-config__footer--padding-top:var(--space--medium, 12px);--snk-grid-config__main--padding-right:var(--space--medium, 12px);--snk-grid-config__tabselector-container--padding:var(--space--medium, 12px);--snk-grid-config__button-close--padding-left:var(--space--medium, 12px);--snk-grid-config__title--color:var(--title--primary, #2B3A54);--snk-grid-config__title--font-family:var(--font-pattern, \"Roboto\");--snk-grid-config__title--font-size:var(--title--large, 20px);--snk-grid-config__title--font-weight:var(--text-weight--extra-large, 700);--snk-grid-config__subtitle--font-family:var(--font-pattern, \"Roboto\");--snk-grid-config__subtitle--font-size:var(--text--medium, 14px);--snk-grid-config__group--font-family:var(--font-pattern, \"Roboto\");--snk-grid-config__group--font-size:var(--text--medium, 14px);--snk-grid-config__group--font-weight:var(--text-weight--large, 600);--snk-grid-config__group--padding-bottom:var(--space-small, 6px);--snk-grid-config__scrollbar--color-default:var(--scrollbar--default, #626e82);--snk-grid-config__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--snk-grid-config__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--snk-grid-config__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--snk-grid-config__scrollbar--border-radius:var(--border--radius-small, 6px);--snk-grid-config__scrollbar--width:var(--space--small, 6px);display:flex;flex-direction:column;max-height:100%;width:100%}.grid-config__body.sc-snk-grid-config{overflow:auto}.padding-right--medium.sc-snk-grid-config{padding-right:var(--space--medium)}ez-list.sc-snk-grid-config{height:100%}.height-calc.sc-snk-grid-config{max-height:calc(100% - 24px)}.grid-config__footer.sc-snk-grid-config{display:flex;justify-content:flex-end;width:100%;padding-top:var(--snk-grid-config__footer--padding-top)}.hidden.sc-snk-grid-config{display:none}.tabselector-container.sc-snk-grid-config{padding:var(--snk-grid-config__tabselector-container--padding) 0}.button-close.sc-snk-grid-config{padding-left:var(--snk-grid-config__button-close--padding-left)}.title-container.sc-snk-grid-config{display:flex;justify-content:space-between;align-items:center;width:100%}.title.sc-snk-grid-config{display:flex;margin:0;line-height:normal;letter-spacing:0em;text-align:left;color:var(--snk-grid-config__title--color);font-size:var(--snk-grid-config__title--font-size);font-family:var(--snk-grid-config__title--font-family);font-weight:var(--snk-grid-config__title--font-weight)}.subtitle.sc-snk-grid-config{color:var(--text--primary);font-size:var(--snk-grid-config__subtitle--font-size);font-family:var(--snk-grid-config__subtitle--font-family)}.grid-config__main.sc-snk-grid-config{overflow-y:auto;scrollbar-width:thin;width:100%;padding-bottom:20px;scrollbar-color:var(--snk-grid-config__scrollbar--color-clicked) var(--snk-grid-config__scrollbar--color-background)}.group-name.sc-snk-grid-config{font-family:var(--snk-grid-config__group--font-family);font-size:var(--snk-grid-config__group--font-size);font-weight:var(--snk-grid-config__group--font-weight);padding-bottom:var(--snk-grid-config__group--padding-bottom)}";
@@ -21,10 +22,12 @@ const SnkGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this._dataChanged = false;
     this._componenteInternalKey = Date.now();
     this.selectedIndex = 0;
-    this.columns = undefined;
+    this.columns = [];
+    this.originalColumns = [];
     this.config = undefined;
     this.configName = undefined;
     this.resourceID = undefined;
+    this.metadata = undefined;
     this._collapsibleBoxListOrder = true;
     this._collapsibleBoxListSelect = false;
   }
@@ -56,31 +59,49 @@ const SnkGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return newList;
   }
   createOrderList() {
+    var _a;
     let newSortableList = this.getSortableColumns();
-    newSortableList.sort((a, b) => {
-      //OS dois tem order index 0 e pelo menos um deles tem orientação de ordenação.
-      if (a.orderIndex == 0 && b.orderIndex == 0 && (a.ascending != undefined || b.ascending != undefined)) {
-        if (a.ascending != undefined)
-          return -1;
-        if (b.ascending != undefined)
-          return 1;
-        return 0;
-        //Pelo menos um deles tem order index diferente de 0 e os dois tem orientação de ordenação.
-      }
-      else if (a.ascending != undefined && b.ascending != undefined) {
+    if (((_a = this._orderPriorityList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      const orderedList = [];
+      this._orderPriorityList.forEach((priorityItem) => {
+        const item = newSortableList.find(col => col.label === priorityItem.label);
+        if (item) {
+          orderedList.push(item);
+        }
+      });
+      newSortableList.forEach(item => {
+        if (!orderedList.find(o => o.label === item.label)) {
+          orderedList.push(item);
+        }
+      });
+      this._orderListItems = orderedList;
+    }
+    else {
+      newSortableList.sort((a, b) => {
+        //OS dois tem order index 0 e pelo menos um deles tem orientação de ordenação.
+        if (a.orderIndex == 0 && b.orderIndex == 0 && (a.ascending != undefined || b.ascending != undefined)) {
+          if (a.ascending != undefined)
+            return -1;
+          if (b.ascending != undefined)
+            return 1;
+          return 0;
+          //Pelo menos um deles tem order index diferente de 0 e os dois tem orientação de ordenação.
+        }
+        else if (a.ascending != undefined && b.ascending != undefined) {
+          return (a.orderIndex - b.orderIndex);
+          //Pelo menos um deles tem order index diferente de 0 e pelo menos um deles tem orientação de ordenação.
+        }
+        else if (a.ascending != undefined || b.ascending != undefined) {
+          if (a.ascending != undefined)
+            return -1;
+          if (b.ascending != undefined)
+            return 1;
+          return 0;
+        }
         return (a.orderIndex - b.orderIndex);
-        //Pelo menos um deles tem order index diferente de 0 e pelo menos um deles tem orientação de ordenação.
-      }
-      else if (a.ascending != undefined || b.ascending != undefined) {
-        if (a.ascending != undefined)
-          return -1;
-        if (b.ascending != undefined)
-          return 1;
-        return 0;
-      }
-      return (a.orderIndex - b.orderIndex);
-    });
-    this._orderListItems = newSortableList;
+      });
+      this._orderListItems = newSortableList;
+    }
   }
   createColumnList() {
     const visibleGroup = this.buildVisibleGroup();
@@ -136,8 +157,11 @@ const SnkGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
     let orderArray;
     if (((_a = this._orderPriorityList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      this._orderPriorityList.find((item) => item.label === newItem.label).sort = sortOrder;
-      this._orderPriorityList.filter((item) => item.sort).forEach((item, index) => {
+      const priorityItem = this._orderPriorityList.find((item) => item.label === newItem.label);
+      if (priorityItem) {
+        priorityItem.sort = sortOrder.value === ORDER_VALUES.none.value ? undefined : sortOrder.value;
+      }
+      this._orderPriorityList.filter((item) => item.sort != undefined).forEach((item, index) => {
         if (item.label === newItem.label) {
           newItem.sortIndex = index;
         }
@@ -163,6 +187,7 @@ const SnkGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this._dataChanged = false;
     this.closeConfig();
     this.save();
+    this._orderPriorityList = [];
   }
   updateColumns() {
     this.columns = this._columListItems.flatMap((group) => group.items.map((item) => this.buildColumnFromListItem(item, group)));
@@ -220,11 +245,8 @@ const SnkGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       let _newColumnConfig = _newConfig.columns.find((_newColumnConfig) => column.name === _newColumnConfig.name);
       if (column.hidden === true && _newColumnConfig)
         return;
-      if (_newColumnConfig) {
-        _newColumnConfig.width = column.width;
-      }
-      else if (column.hidden === false) {
-        _newColumnConfig = { name: column.name, width: column.width, orderIndex: 0 };
+      if (!_newColumnConfig && column.hidden === false) {
+        _newColumnConfig = { name: column.name, orderIndex: 0 };
       }
       if (_newColumnConfig) {
         if (column.sort) {
@@ -289,6 +311,7 @@ const SnkGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         .then((response) => {
         if (!response) {
           this._dataChanged = false;
+          this._orderPriorityList = [];
           this.configCancel.emit();
           this._componenteInternalKey = Date.now();
         }
@@ -353,29 +376,61 @@ const SnkGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (!this.resourceID)
       return;
     this._dataChanged = true;
+    this._orderPriorityList = [];
     const config = await ConfigStorage.getDefaultGridConfig(this.resourceID);
     const defaultVisibleCols = (_a = config === null || config === void 0 ? void 0 : config.columns.map(col => col.name)) !== null && _a !== void 0 ? _a : [];
+    const isEmptyConfig = defaultVisibleCols.length === 0;
     const visibleGroup = this.buildVisibleGroup();
     const hiddenGroup = this.buildHiddenGroup();
     const visibleItemsMap = new Map();
-    this.columns.forEach(column => {
+    const columnsToIterate = isEmptyConfig ? this.originalColumns : this.columns;
+    columnsToIterate.forEach(column => {
       const item = this.buildListItemFromColumn(column);
-      if (defaultVisibleCols.includes(column.name)) {
+      if (isEmptyConfig || defaultVisibleCols.includes(column.name)) {
+        item['width'] = this.getDefaultWidthBasedOnMetadata(column.name);
         visibleItemsMap.set(column.name, item);
       }
       else {
         hiddenGroup.items.push(item);
       }
     });
-    visibleGroup.items = defaultVisibleCols
-      .map(name => visibleItemsMap.get(name))
-      .filter(item => item);
+    if (isEmptyConfig) {
+      const itemsToAdd = [];
+      visibleItemsMap.forEach((item) => itemsToAdd.push(item));
+      visibleGroup.items = itemsToAdd;
+    }
+    else {
+      visibleGroup.items = defaultVisibleCols
+        .map(name => visibleItemsMap.get(name))
+        .filter(item => item);
+    }
     this._columListItems = [visibleGroup, hiddenGroup];
     this._visibleList = visibleGroup.items;
     this._hiddenList = hiddenGroup.items;
+    if (this.config) {
+      this.config['columns'] = this.transformListToConfig(visibleGroup.items);
+    }
     this.updateColumns();
     this.createOrderList();
   }
+  transformListToConfig(list) {
+    return list.map((item, index) => {
+      return {
+        name: item.id,
+        hidden: false,
+        orderIndex: Number(item.sort) || index,
+        width: item.width,
+      };
+    });
+  }
+  getDefaultWidthBasedOnMetadata(columnName) {
+    var _a, _b;
+    if (!this.metadata) {
+      return undefined;
+    }
+    const columnMetadata = (_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.fields) === null || _b === void 0 ? void 0 : _b.find(col => col.name === columnName);
+    return GRID_COLUMN_DEFAULT_WIDTHS[columnMetadata === null || columnMetadata === void 0 ? void 0 : columnMetadata.userInterface] || GRID_COLUMN_DEFAULT_WIDTHS[UserInterface.SHORTTEXT];
+  }
   buildListItemFromColumn(column) {
     var _a;
     return {
@@ -383,13 +438,14 @@ const SnkGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       selected: false,
       sort: (_a = column === null || column === void 0 ? void 0 : column.sort) !== null && _a !== void 0 ? _a : ORDER_VALUES.asc.value,
       id: column.name,
+      width: column.width,
     };
   }
   render() {
     return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "ez-margin-bottom--medium" }, h("label", { class: "title" }, this.getMessage('snkGridConfig.gridConfiguration')), h("label", { class: "subtitle" }, this.getMessage('snkGridConfig.columnVisibilityOrder'))), h("div", { class: "button-close" }, h("ez-button", { mode: "icon", iconName: "close", size: "medium", class: "ez-button--tertiary", onClick: () => this.closeConfig() })))), h("div", { class: 'grid-config__body' }, h("ez-collapsible-box", { id: 'group-select-columns', label: this.getMessage('snkGridConfig.columnsSelection'), "header-size": "medium", key: 'key_group-select-columns', value: this._collapsibleBoxListSelect, onEzChange: ({ detail }) => this._collapsibleBoxListOrder = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { leftList: this._hiddenList, leftTitle: this.getMessage('snkGridConfig.availableColumns'), rightList: this._visibleList, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), onEzRightListChanged: ({ detail }) => this.handleRightListChange(detail), emptyMessage: {
         LEFT_LIST: this.getMessage('snkGridConfig.emptyMensage.left'),
         RIGHT_LIST: this.getMessage('snkGridConfig.emptyMensage.right'),
-      }, entityLabel: 'coluna', entityLabelPlural: 'colunas' }))), h("ez-collapsible-box", { id: 'ID_group-order-columns', label: this.getMessage('snkGridConfig.dataOrdering'), "header-size": "medium", key: 'KEY_group-order-columns', value: this._collapsibleBoxListOrder, onEzChange: ({ detail }) => this._collapsibleBoxListSelect = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { rightList: this._orderListItems, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), useOnlyRightList: true, slotsListBuilder: this.getListSlots(), emptyMessage: {
+      }, entityLabel: 'coluna', entityLabelPlural: 'colunas' }))), h("ez-collapsible-box", { id: 'ID_group-order-columns', label: this.getMessage('snkGridConfig.dataOrdering'), "header-size": "medium", key: 'KEY_group-order-columns', value: this._collapsibleBoxListOrder, onEzChange: ({ detail }) => this._collapsibleBoxListSelect = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { rightList: this._orderListItems, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), useOnlyRightList: true, slotsListBuilder: this.getListSlots(), onEzRightListChanged: (evt) => this.handleOrderListChange(evt), emptyMessage: {
         RIGHT_LIST: this.getMessage('snkGridConfig.emptyMensage.right'),
       }, entityLabel: 'coluna', entityLabelPlural: 'colunas' })))), h("div", { class: "grid-config__footer" }, this.renderResetConfigBtn(), h("ez-button", { class: "padding-right--medium", label: this.getMessage('snkGridConfig.cancel'), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage('snkGridConfig.complete'), class: "ez-button--primary", onClick: () => this.finish() }))));
   }
@@ -399,9 +455,11 @@ const SnkGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
 }, [2, "snk-grid-config", {
     "selectedIndex": [1026, "selected-index"],
     "columns": [1040],
+    "originalColumns": [1040],
     "config": [1040],
     "configName": [1, "config-name"],
     "resourceID": [1, "resource-i-d"],
+    "metadata": [16],
     "_collapsibleBoxListOrder": [32],
     "_collapsibleBoxListSelect": [32]
   }]);

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, S as SnkMultiSelectionListDataSource, a as CrudUtils, 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.sc-snk-grid{width:100%;display:flex;flex-wrap:nowrap;justify-content:flex-end}.snk-grid__filter-bar.sc-snk-grid{width:100%}.snk-grid__header-divider.sc-snk-grid{margin-bottom:var(--space--medium)}.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:var(--space--small)}.snk-grid__container.sc-snk-grid{display:flex;height:100%;width:calc(100% - var(--space--12, 12px));margin:var(--snk-grid-padding);outline:none;border:1px solid var(--color--strokes, #E1E2E5);border-radius:var(--border--radius-12, 12px);box-shadow:var(--shadow--small);--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__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-top:1px solid var(--color--strokes, #E1E2E5);border-radius:0 0 var(--border--radius-medium) var(--border--radius-medium)}";
 
 const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -140,7 +141,7 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this._showSnkFilterBar = true;
     this._enableContinuousInsert = false;
     this._filterMode = 'regular';
-    this.columnFilterDataSource = new SnkMultiSelectionListDataSource();
+    this.columnFilterDataSource = undefined;
     this.enableLockManagerLoadingComp = false;
     this.enableLockManagerTaskbarClick = false;
     this.configName = undefined;
@@ -178,6 +179,9 @@ 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;
   }
   getGridHeaderSelectedBtns() {
     const btns = [
@@ -209,7 +213,7 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this._grid == undefined) {
       return;
     }
-    this.openGridConfig();
+    await this.openGridConfig();
   }
   /**
    * Fecha a janela de configurações da grade.
@@ -318,6 +322,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)) {
@@ -349,12 +371,12 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   handleAddFormMode() {
     return this.enableGridInsert ? TaskbarElement.FORM_MODE : '';
   }
-  openGridConfig() {
-    this._grid.getColumnsState()
-      .then((gridColumns) => {
-      this._snkGridConfig.columns = gridColumns.filter(c => c.name);
-      this._popUpGridConfig = true;
-    });
+  async openGridConfig() {
+    const originalColumns = await this._grid.getColumns();
+    const gridColumns = await this._grid.getColumnsState();
+    this._snkGridConfig.columns = gridColumns.filter(c => c.name);
+    this._snkGridConfig.originalColumns = originalColumns.filter(c => c.name);
+    this._popUpGridConfig = true;
   }
   closeGridConfig() {
     this._popUpGridConfig = false;
@@ -467,14 +489,20 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     return action;
   }
+  initializeColumnFilterDataSource() {
+    var _a, _b, _c;
+    const isInMemoryDataUnit = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.name.includes("InMemoryDataUnit");
+    if (!this.columnFilterDataSource && !isInMemoryDataUnit) {
+      this.columnFilterDataSource = new SnkMultiSelectionListDataSource();
+    }
+    (_b = this.columnFilterDataSource) === null || _b === void 0 ? void 0 : _b.setApplication(this._application);
+    (_c = this.columnFilterDataSource) === null || _c === void 0 ? void 0 : _c.setDataUnit(this._dataUnit);
+  }
   finishLoading() {
     this._dataUnit.addInterceptor(this.dataUnitInterceptor);
     CrudUtils.assertDefaultSorting(this._gridConfig, this._dataUnit);
     this.addElementID();
-    if (this.columnFilterDataSource != undefined) {
-      this.columnFilterDataSource.setApplication(this._application);
-      this.columnFilterDataSource.setDataUnit(this._dataUnit);
-    }
+    this.initializeColumnFilterDataSource();
   }
   setCustomRenders() {
     if (!this._grid) {
@@ -557,7 +585,7 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return disabledButtons;
   }
   getInvisibleButtons() {
-    var _a, _b;
+    var _a, _b, _c;
     let invisibleButtons = [];
     if (!this._dataUnit || this._dataUnit.records.length === 0)
       invisibleButtons.push(TaskbarElement.DATA_EXPORTER);
@@ -565,6 +593,8 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       invisibleButtons.push(TaskbarElement.ACTIONS_BUTTON);
     if (((_b = this._dataState) === null || _b === void 0 ? void 0 : _b.selectionInfo.length) === 1)
       invisibleButtons.push(TaskbarElement.UPDATE_MULTIPLE);
+    if (!((_c = this._dataState) === null || _c === void 0 ? void 0 : _c.selectionInfo.length))
+      invisibleButtons.push(TaskbarElement.FORM_MODE);
     return invisibleButtons;
   }
   componentWillRender() {
@@ -673,13 +703,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 ez-margin-bottom--extra-small" }, 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 {
@@ -725,6 +758,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],
@@ -743,13 +779,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)) {
@@ -758,100 +797,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-input.d.ts

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

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

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