@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-6165.0 → 0.0.0-bugfix-dev-KB-17130.0

package/dist/esm/ez-grid.entry.js

@@ -1,9 +1,9 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-296b8458.js';
-import { Action, ObjectUtils as ObjectUtils$1, HTMLBuilder, ApplicationContext, UserInterface, StringUtils as StringUtils$1, NumberUtils as NumberUtils$1, MaskFormatter, DataType, SortMode, ElementIDUtils, JSUtils, DateUtils as DateUtils$1 } from '@sankhyalabs/core';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-baa5e267.js';
+import { Action, ObjectUtils as ObjectUtils$1, HTMLBuilder, ApplicationContext, UserInterface, StringUtils as StringUtils$1, NumberUtils as NumberUtils$1, MaskFormatter, DataType, SortMode, ElementIDUtils, FieldComparator, DateUtils as DateUtils$1, ArrayUtils as ArrayUtils$1, JSUtils } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
-import { D as DISTINCT_FILTER_NAME_PREFIX } from './constants-6dab64f7.js';
-import { b as buildFieldMetadata, R as RecordValidationProcessor } from './RecordValidationProcessor-abc814af.js';
-import { A as ApplicationUtils } from './ApplicationUtils-d9a34a16.js';
+import { E as EZ_GRID_LOADING_SOURCE, D as DISTINCT_FILTER_NAME_PREFIX } from './constants-4e0d35b7.js';
+import { b as buildFieldMetadata, R as RecordValidationProcessor } from './RecordValidationProcessor-b00b8b77.js';
+import { A as ApplicationUtils } from './ApplicationUtils-eaf91331.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
 
@@ -118828,6 +118828,19 @@ var AllEnterpriseModules = [
 ModuleRegistry.registerModules(AllEnterpriseModules);
 
 class DataSource {
+  isSilentChange(action) {
+    //TODO: Provisorio p/ não atualizar a grade quando a alteração for apenas de campos transisntes
+    var _a, _b;
+    if (!(action === null || action === void 0 ? void 0 : action.payload)) {
+      return false;
+    }
+    if (action.type === Action.DATA_CHANGED) {
+      return ((_a = Object.keys(action === null || action === void 0 ? void 0 : action.payload)) === null || _a === void 0 ? void 0 : _a.filter(changeName => changeName.startsWith("transient.") || changeName === "records").length) > 0;
+    }
+    if (action.type === Action.EDITION_CANCELED) {
+      return ((_b = action === null || action === void 0 ? void 0 : action.payload) === null || _b === void 0 ? void 0 : _b.silent) === true;
+    }
+  }
   constructor(dataUnit, controller, options) {
     this.RECORD_ARCHIVE = "__RECORD_ARCHIVE__";
     this.duObserver = (action) => {
@@ -118847,11 +118860,19 @@ class DataSource {
           }
           this.updateSelection();
           break;
+        case Action.PAGINATION_UPDATED:
+          if (this._options) {
+            this._options.onPaginationUpdate(this._dataUnit.getPaginationInfo());
+          }
+          break;
         case Action.RECORDS_REMOVED:
         case Action.DATA_SAVED:
         case Action.EDITION_CANCELED:
         case Action.DATA_CHANGED:
         case Action.DATA_RESOLVED:
+          if (this.isSilentChange(action)) {
+            return;
+          }
           this._controller.refresh();
           break;
         case Action.SELECTION_CHANGED:
@@ -118879,7 +118900,7 @@ class DataSource {
   getRows(params) {
     if (this.needReload(params)) {
       this._lastLoadingParams = params;
-      this._dataUnit.loadData(this.quickFilter).then(() => this.updateSelection());
+      this._dataUnit.loadData(this.quickFilter, undefined, true, EZ_GRID_LOADING_SOURCE).then(() => this.updateSelection());
     }
     else {
       this._lastLoadingParams = params;
@@ -118974,7 +118995,7 @@ class EzGridCustomHeader {
   onClickFilter() {
     var _a;
     const iconLeft = (_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
-    this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`);
+    this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`, true);
   }
   configSortIcon() {
     this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
@@ -119035,7 +119056,7 @@ class CellRendererStatus {
   }
   refresh(params) {
     this.renderStatus(params);
-    return true;
+    return false;
   }
   destroy() {
     this._eGui = undefined;
@@ -119631,7 +119652,7 @@ class AgGridController {
     const applied = event.detail;
     this._filteredColumns.set(applied.field, applied.values);
     this._gridOptions.api.refreshHeader();
-    this._dataUnit.loadData();
+    this._dataUnit.loadData(undefined, undefined, undefined, EZ_GRID_LOADING_SOURCE);
   }
   showFilterColumn(configs) {
     var _a;
@@ -119643,7 +119664,7 @@ class AgGridController {
     this.CHECK_BOX_COL_ID = 'checkBoxColumn';
     this.STATUS_COL_ID = 'statusColumn';
     this.RECORD_ARCHIVE_COL_ID = '__RECORD_ARCHIVE__';
-    this.BLOCK_LOAD_DEBOUNCE = 400;
+    this.BLOCK_LOAD_DEBOUNCE = 100;
     this.DEFAULT_FONT_SIZE = 14;
     this.DEFAULT_ICON_SIZE = 12;
     this.DEFAULT_MAX_SIZE = 200;
@@ -119657,10 +119678,10 @@ class AgGridController {
   getGridConfig() {
     return this._gridConfig;
   }
-  getGridApi() {
-    return this._gridOptions.api;
+  locateColumn(columnName) {
+    this._gridOptions.api.ensureColumnVisible(columnName);
   }
-  getSort() {
+  getSort(_dataUnitName, defaultSorting) {
     const sortedColumns = [];
     this._gridOptions.columnApi
       .getColumnState()
@@ -119673,7 +119694,7 @@ class AgGridController {
         sortedColumns.push(sortField);
       }
     });
-    return sortedColumns;
+    return sortedColumns.length === 0 && this._gridConfig === undefined ? defaultSorting : sortedColumns;
   }
   getFilter() {
     if (!this._filteredColumns || this._filteredColumns.size === 0) {
@@ -119744,6 +119765,7 @@ class AgGridController {
             height: '100%'
           }
         },
+        suppressFieldDotNotation: true,
         components: Object.assign({ ezGridHeaderComponent: SelectionHeader, ezGridCustomHeader: EzGridCustomHeader }, this._editionManager.getComponents()),
         context: {
           editionManager: this._editionManager,
@@ -119762,6 +119784,10 @@ class AgGridController {
       else {
         this._grid = new Grid(container, this._gridOptions);
       }
+      container.addEventListener('focusout', (event) => {
+        if (!container.contains(event.relatedTarget))
+          this._gridOptions.api.clearFocusedCell();
+      });
       const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelectionInfo();
       if (selection === null || selection === void 0 ? void 0 : selection.isAllRecords()) {
         this.selectAll(true);
@@ -120037,7 +120063,7 @@ class AgGridController {
     if (this._grid === undefined) {
       throw new Error('Erro interno: Grid ainda não inicializado.');
     }
-    this._gridOptions.api.refreshServerSide({ purge: false });
+    this._gridOptions.api.refreshServerSide({ purge: true });
   }
   setFocusFirstRow() {
     const firstRow = this._gridOptions.api.getDisplayedRowAtIndex(0);
@@ -120216,7 +120242,7 @@ class AgGridController {
         tooltip: tooltip,
         isSortable: propSortable,
         hasFilter: () => this.hasFilterColumn(source.name),
-        showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name) }),
+        showColumnFilter: (leftPosition, fromIcon) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name), fromIcon }),
       },
       valueFormatter: params => {
         if (params.value == undefined) {
@@ -120311,6 +120337,13 @@ class AgGridController {
         return maskFormatter.format(formattedValue);
       }
     }
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.FILE) {
+      if (!params.value || !Array.isArray(params.value))
+        return '';
+      if (params.value.length === 1)
+        return params.value[0].name;
+      return `${params.value.length} arquivos`;
+    }
   }
   onCallStateChange(type, e) {
     const finished = !('finished' in e) || e['finished'];
@@ -120439,9 +120472,169 @@ function getElementID(sufix) {
   };
 }
 
-const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF);z-index:var(--more-visible, 2)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s;z-index:var(--ez-grid__selection-counter--z-index)}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}";
+const COLUMN_FILTER_PATTERN = /FILTRO_COLUNA_(.+)/;
+class ColumnFilterManager {
+  static getColumnFilters(filters, fieldName) {
+    const columnFilters = new Map();
+    if (filters == undefined || filters.length == 0) {
+      return columnFilters;
+    }
+    filters.forEach(filter => {
+      const result = COLUMN_FILTER_PATTERN.exec(filter.name);
+      if (result) {
+        if (fieldName !== result[1]) {
+          columnFilters.set(filter.name, Object.assign({ columnName: result[1] }, filter));
+        }
+      }
+    });
+    return columnFilters;
+  }
+  static getFilterFunction(dataUnit, filters) {
+    if (filters != undefined && filters.length > 0) {
+      return record => {
+        for (const filter of filters) {
+          if (!ColumnFilterManager.recordMatchesFilter(dataUnit, record, filter)) {
+            return false;
+          }
+        }
+        return true;
+      };
+    }
+    return undefined;
+  }
+  static recordMatchesFilter(dataUnit, record, columnFilter) {
+    const fieldValue = record[columnFilter.columnName];
+    for (let param of columnFilter.params) {
+      const paramValue = dataUnit.valueFromString(columnFilter.columnName, param.value);
+      if (FieldComparator.compareValues(dataUnit.getField(columnFilter.columnName), fieldValue, paramValue) === 0) {
+        return true;
+      }
+    }
+    return false;
+  }
+  static compileDistinct(fieldName, dataUnit) {
+    const request = dataUnit.getLastLoadRequest();
+    let list = dataUnit.records;
+    if (request != undefined) {
+      const columnFilters = Array.from(ColumnFilterManager.getColumnFilters(request.filters, fieldName).values());
+      const filterFunciton = ColumnFilterManager.getFilterFunction(dataUnit, columnFilters);
+      if (filterFunciton != undefined) {
+        list = list.filter(filterFunciton);
+      }
+    }
+    const distinct = new Map(list.map(record => {
+      const fieldValue = record[fieldName];
+      if (fieldValue == undefined) {
+        return [null, { label: null, value: null, check: true }];
+      }
+      const item = { label: dataUnit.getFormattedValue(fieldName, fieldValue), value: fieldValue, check: true };
+      return [item.label, item];
+    }));
+    return Array.from(distinct.values());
+  }
+}
+
+class InMemoryFilterColumnDataSource {
+  constructor(dataUnit) {
+    var _a;
+    this.onDataUnitAction = (action) => {
+      if (action.type === Action.DATA_SAVED || action.type === Action.RECORDS_REMOVED) {
+        this.originalRecords = this.dataUnit.records;
+      }
+    };
+    this.dataUnit = dataUnit;
+    this.originalRecords = (_a = this.dataUnit.records) !== null && _a !== void 0 ? _a : [];
+    this.dataUnit.subscribe(this.onDataUnitAction);
+  }
+  getStaticOptions(fieldName) {
+    return Promise.resolve(ColumnFilterManager.compileDistinct(fieldName, this.dataUnit));
+  }
+  fetchData(filterTerm, fieldName) {
+    return new Promise(resolve => {
+      const filteredRecords = this.originalRecords.filter(record => this.includesSearchTerm(record, fieldName, filterTerm));
+      const options = filteredRecords.map(item => this.buildFieldOption(item, fieldName));
+      resolve(this.removeDuplicatedOptions(options));
+    });
+  }
+  sortItems(fieldName, items) {
+    return InMemoryFilterColumnDataSource.defaultSorterMultSelectionOption(this.dataUnit, fieldName, items);
+  }
+  buildFieldOption(item, fieldName) {
+    return {
+      value: this.buildValue(item, fieldName),
+      label: this.formatLabel(fieldName, item[fieldName]),
+      check: true,
+    };
+  }
+  buildValue(item, fieldName) {
+    var _a;
+    let value = item[fieldName];
+    if (((_a = this.dataUnit.getField(fieldName)) === null || _a === void 0 ? void 0 : _a.dataType) === DataType.OBJECT) {
+      value = value.value;
+    }
+    return value === null || value === void 0 ? void 0 : value.toString();
+  }
+  removeDuplicatedOptions(options) {
+    const noDuplicatedOptions = [];
+    options.forEach(option => {
+      if (!noDuplicatedOptions.find(({ label }) => label === option.label)) {
+        noDuplicatedOptions.push(option);
+      }
+    });
+    return noDuplicatedOptions;
+  }
+  includesSearchTerm(record, fieldName, filterTerm) {
+    let label = this.buildLabel(fieldName, record[fieldName]);
+    return label.toLowerCase().includes(filterTerm.toLowerCase());
+  }
+  buildLabel(fieldName, value) {
+    var _a;
+    const { dataType } = this.dataUnit.getField(fieldName);
+    if (dataType === DataType.NUMBER) {
+      return value === null || value === void 0 ? void 0 : value.toString().replace('.', ',');
+    }
+    if (dataType === DataType.DATE) {
+      return (typeof value === 'object')
+        ? (_a = DateUtils$1.formatDate(this.dataUnit.valueFromString(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString()
+        : value === null || value === void 0 ? void 0 : value.toString();
+    }
+    if (dataType === DataType.OBJECT) {
+      return `${value === null || value === void 0 ? void 0 : value.value} - ${value === null || value === void 0 ? void 0 : value.label}`;
+    }
+    return value === null || value === void 0 ? void 0 : value.toString();
+  }
+  formatLabel(fieldName, value) {
+    var _a, _b;
+    const { userInterface, dataType } = this.dataUnit.getField(fieldName);
+    if (dataType === DataType.DATE) {
+      return (typeof value === 'object')
+        ? DateUtils$1.formatDate(this.dataUnit.valueFromString(fieldName, value))
+        : value === null || value === void 0 ? void 0 : value.toString();
+    }
+    if (dataType === DataType.NUMBER && userInterface !== UserInterface.DECIMALNUMBER) {
+      return (_a = parseInt(this.dataUnit.getFormattedValue(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString();
+    }
+    return (_b = this.dataUnit.getFormattedValue(fieldName, value)) === null || _b === void 0 ? void 0 : _b.toString();
+  }
+  static defaultSorterMultSelectionOption(dataUnit, fieldName, items) {
+    const fieldDescriptor = dataUnit.getField(fieldName);
+    if (fieldDescriptor == undefined) {
+      return ArrayUtils$1.sortAlphabetically(items);
+    }
+    return items.sort((itemA, itemB) => {
+      return FieldComparator.compareValues(fieldDescriptor, itemA.value, itemB.value);
+    });
+  }
+}
+
+const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:0 0 16px 0 rgb(0 38 111 / 12%)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid__container.sc-ez-grid{padding-top:15px;margin-top:-12px;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color)}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}";
 
 const windowInstace = window;
+const matches = (text, filter) => {
+  const normalizedText = StringUtils$1.replaceAccentuatedCharsLower(text.toLocaleLowerCase());
+  const normalizedFilter = StringUtils$1.replaceAccentuatedCharsLower(filter.toLocaleLowerCase());
+  return normalizedText.includes(normalizedFilter);
+};
 const EzGrid = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -120452,18 +120645,13 @@ const EzGrid = class {
     this.componentReady = createEvent(this, "componentReady", 7);
     this._gridController = new AgGridController(false);
     this._messageFilterAppliedSuccess = 'Filtro de coluna aplicado com sucesso!';
-    this.onDataUnitAction = (action) => {
-      if (action.type === Action.DATA_SAVED || action.type === Action.RECORDS_REMOVED) {
-        this._originalRecords = this.dataUnit.records;
-      }
-    };
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
     this._showSelectionCounter = false;
     this._isAllSelection = false;
     this._currentPageSelected = undefined;
     this._selectionCount = undefined;
-    this._originalRecords = [];
+    this._hasLeftButtons = false;
     this.multipleSelection = undefined;
     this.config = undefined;
     this.selectionToastConfig = undefined;
@@ -120523,6 +120711,18 @@ const EzGrid = class {
   async quickFilter(term) {
     this._gridController.quickFilter(term);
   }
+  /**
+   * Localiza determinada coluna tornando-a visível.
+   */
+  async locateColumn(columnName) {
+    this._gridController.locateColumn(columnName);
+  }
+  /**
+   * Usa um argumento para filtrar as colunas po label
+   */
+  async filterColumns(search) {
+    return Promise.resolve(this._gridController.getColumnsState().filter(col => matches(col.label, search)));
+  }
   observeConfig(config) {
     this._gridController.setColumnsState(config.columns);
   }
@@ -120664,21 +120864,26 @@ const EzGrid = class {
   }
   previousPage() {
     if (this.dataUnit) {
-      this.dataUnit.previousPage();
-      this._paginationChangedByKeyboard = false;
+      this.dataUnit.previousPage()
+        .then(() => this.resetPaginationState());
     }
   }
   nextPage() {
     if (this.dataUnit) {
-      this.dataUnit.nextPage();
-      this._paginationChangedByKeyboard = false;
+      this.dataUnit.nextPage()
+        .then(() => this.resetPaginationState());
     }
   }
+  resetPaginationState() {
+    var _a;
+    this._paginationChangedByKeyboard = false;
+    (_a = this._gridApi) === null || _a === void 0 ? void 0 : _a.clearRangeSelection();
+  }
   getPaginationControl() {
     if (this._paginationInfo) {
-      const { firstRecord, lastRecord, total, currentPage, hasMore } = this._paginationInfo;
+      const { firstRecord, lastRecord, total, count, currentPage, hasMore } = this._paginationInfo;
       return [
-        h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${firstRecord}-${lastRecord}`), ` de ${total}`),
+        h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${firstRecord}-${lastRecord}`), total == undefined ? ` de ${count + 1} ou mais` : ` de ${total}`),
         h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }),
         h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }),
       ];
@@ -120700,6 +120905,9 @@ const EzGrid = class {
         }
         this._paginationInfo = paginationInfo;
       },
+      onPaginationUpdate: (paginationInfo) => {
+        this._paginationInfo = paginationInfo;
+      },
       onDoubleClick: (row) => {
         this.ezDoubleClick.emit(row);
       },
@@ -120714,15 +120922,13 @@ const EzGrid = class {
     if (this.config) {
       this.observeConfig(this.config);
     }
+    if (this.dataUnit != undefined) {
+      this._paginationInfo = this.dataUnit.getPaginationInfo();
+    }
     this.buildDataElementId();
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
-    this._container.addEventListener('focusout', (event) => {
-      const api = this._gridController.getGridApi();
-      if (api && !this._container.contains(event.relatedTarget))
-        api.clearFocusedCell();
-    });
   }
   componentWillRender() {
     this.configSelectionCounter();
@@ -120733,46 +120939,22 @@ const EzGrid = class {
     });
   }
   componentWillLoad() {
+    this._hasLeftButtons = !!this._element.querySelector('[slot="leftButtons"]');
     if (!this.dataUnit.name.includes("InMemoryDataUnit"))
       return;
-    this.dataUnit.subscribe(this.onDataUnitAction);
   }
   getDataSource() {
-    return this.columnfilterDataSource ? this.columnfilterDataSource : this.buildDefaultDataSource();
-  }
-  buildDefaultDataSource() {
-    var _a, _b;
-    if (this._originalRecords.length === 0) {
-      this._originalRecords = (_b = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.records) !== null && _b !== void 0 ? _b : [];
-    }
-    return {
-      fetchData: (filterTerm, fieldName) => {
-        return new Promise(resolve => {
-          const filteredRecords = this._originalRecords.filter(record => {
-            var _a, _b;
-            const label = typeof record[fieldName] === "object" ? `${(_a = record[fieldName]) === null || _a === void 0 ? void 0 : _a.value} - ${(_b = record[fieldName]) === null || _b === void 0 ? void 0 : _b.label}` : record[fieldName];
-            return label === null || label === void 0 ? void 0 : label.toString().toLowerCase().includes(filterTerm.toLowerCase());
-          });
-          const options = filteredRecords.map(item => {
-            return { value: item[fieldName].toString(), label: this.formatLabel(fieldName, item[fieldName]), check: true };
-          });
-          resolve(options);
-        });
-      }
-    };
+    var _a;
+    return (_a = this.columnfilterDataSource) !== null && _a !== void 0 ? _a : new InMemoryFilterColumnDataSource(this.dataUnit);
   }
-  formatLabel(fieldName, value) {
-    const { userInterface } = this.dataUnit.getField(fieldName);
-    if (userInterface === UserInterface.DATETIME) {
-      return DateUtils$1.formatDate(this.dataUnit.valueFromString(fieldName, value));
-    }
-    return String(this.dataUnit.getFormattedValue(fieldName, value));
+  hideHeader() {
+    return (!!this._element.getAttribute("no-header") && !this._paginationInfo);
   }
   render() {
     var _a;
-    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: !!this._element.getAttribute("no-header"), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter
+    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
-        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
+        ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }
   static get assetsDirs() { return ["../assets"]; }
   get _element() { return getElement(this); }

package/dist/esm/ez-guide-navigator.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-296b8458.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { E as EzScrollDirection } from './EzScrollDirection-2df26c93.js';
 
@@ -21,6 +21,12 @@ const EzGuideNavigator = class {
   async disableItem(id) {
     [].concat(id).forEach(item => this._tree.disableItem(item));
   }
+  /**
+   * Abre o navegador de Guia
+   */
+  async openGuideNavidator() {
+    this.open = true;
+  }
   /**
    * Habilita um ou mais itens.
    */

package/dist/esm/ez-icon.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-296b8458.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-baa5e267.js';
 import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 
-const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{color:var(--ez-icon--color)}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{font-family:'ez-icons' !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ez-icon-2chevron-down:before{content:\"\\ea01\"}.ez-icon-2chevron-up:before{content:\"\\ea02\"}.ez-icon-acao:before{content:\"\\ea03\"}.ez-icon-account-outline:before{content:\"\\ea04\"}.ez-icon-account:before{content:\"\\ea05\"}.ez-icon-actions-sprite-v1:before{content:\"\\ea06\"}.ez-icon-alert-circle-inverted:before{content:\"\\ea07\"}.ez-icon-alert-circle:before{content:\"\\ea08\"}.ez-icon-alert-mail:before{content:\"\\ea09\"}.ez-icon-alert-popup:before{content:\"\\ea0a\"}.ez-icon-anexo:before{content:\"\\ea0b\"}.ez-icon-antecipação:before{content:\"\\ea0c\"}.ez-icon-apps:before{content:\"\\ea0d\"}.ez-icon-arrow_back:before{content:\"\\ea0e\"}.ez-icon-arrow_downward:before{content:\"\\ea0f\"}.ez-icon-baixa:before{content:\"\\ea10\"}.ez-icon-balance:before{content:\"\\ea11\"}.ez-icon-bell-inverted:before{content:\"\\ea12\"}.ez-icon-bell:before{content:\"\\ea13\"}.ez-icon-boleto:before{content:\"\\ea14\"}.ez-icon-boolean:before{content:\"\\ea15\"}.ez-icon-business-center:before{content:\"\\ea16\"}.ez-icon-calendar-clock:before{content:\"\\ea17\"}.ez-icon-calendar:before{content:\"\\ea18\"}.ez-icon-cash-remove:before{content:\"\\ea19\"}.ez-icon-check-circle-inverted:before{content:\"\\ea1a\"}.ez-icon-check-circle:before{content:\"\\ea1b\"}.ez-icon-check:before{content:\"\\ea1c\"}.ez-icon-chevron-down:before{content:\"\\ea1d\"}.ez-icon-chevron-left:before{content:\"\\ea1e\"}.ez-icon-chevron-right:before{content:\"\\ea1f\"}.ez-icon-chevron-up:before{content:\"\\ea20\"}.ez-icon-circle--medium:before{content:\"\\ea21\"}.ez-icon-circle:before{content:\"\\ea22\"}.ez-icon-cleaning:before{content:\"\\ea23\"}.ez-icon-clipboard:before{content:\"\\ea24\"}.ez-icon-close:before{content:\"\\ea25\"}.ez-icon-cobrar:before{content:\"\\ea26\"}.ez-icon-code:before{content:\"\\ea27\"}.ez-icon-configuration:before{content:\"\\ea28\"}.ez-icon-copy:before{content:\"\\ea29\"}.ez-icon-credit_card:before{content:\"\\ea2a\"}.ez-icon-crop:before{content:\"\\ea2b\"}.ez-icon-custom:before{content:\"\\ea2c\"}.ez-icon-delete:before{content:\"\\ea2d\"}.ez-icon-description:before{content:\"\\ea2e\"}.ez-icon-dividir:before{content:\"\\ea2f\"}.ez-icon-docx:before{content:\"\\ea30\"}.ez-icon-dot-notification:before{content:\"\\ea31\"}.ez-icon-dots-horizontal:before{content:\"\\ea32\"}.ez-icon-dots-vertical:before{content:\"\\ea33\"}.ez-icon-drag-indicator:before{content:\"\\ea34\"}.ez-icon-dual-chevron-down:before{content:\"\\ea35\"}.ez-icon-dual-chevron-up:before{content:\"\\ea36\"}.ez-icon-edit-file:before{content:\"\\ea37\"}.ez-icon-edit-table:before{content:\"\\ea38\"}.ez-icon-edit-time:before{content:\"\\ea39\"}.ez-icon-edit:before{content:\"\\ea3a\"}.ez-icon-email:before{content:\"\\ea3b\"}.ez-icon-estorno:before{content:\"\\ea3c\"}.ez-icon-exe:before{content:\"\\ea3d\"}.ez-icon-expand:before{content:\"\\ea3e\"}.ez-icon-expandir_card:before{content:\"\\ea3f\"}.ez-icon-extrato:before{content:\"\\ea40\"}.ez-icon-eye-off:before{content:\"\\ea41\"}.ez-icon-eye:before{content:\"\\ea42\"}.ez-icon-favorite:before{content:\"\\ea43\"}.ez-icon-figma:before{content:\"\\ea44\"}.ez-icon-file-download:before{content:\"\\ea45\"}.ez-icon-file-upload:before{content:\"\\ea46\"}.ez-icon-filter:before{content:\"\\ea47\"}.ez-icon-find-file:before{content:\"\\ea48\"}.ez-icon-find-page:before{content:\"\\ea49\"}.ez-icon-format-color-fill:before{content:\"\\ea4a\"}.ez-icon-generic:before{content:\"\\ea4b\"}.ez-icon-gif:before{content:\"\\ea4c\"}.ez-icon-graph_bar:before{content:\"\\ea4d\"}.ez-icon-handshake:before{content:\"\\ea4e\"}.ez-icon-help-inverted:before{content:\"\\ea4f\"}.ez-icon-help:before{content:\"\\ea50\"}.ez-icon-hide_menu:before{content:\"\\ea51\"}.ez-icon-home:before{content:\"\\ea52\"}.ez-icon-icons104:before{content:\"\\ea53\"}.ez-icon-language:before{content:\"\\ea54\"}.ez-icon-launch:before{content:\"\\ea55\"}.ez-icon-lightbulb:before{content:\"\\ea56\"}.ez-icon-list:before{content:\"\\ea57\"}.ez-icon-location:before{content:\"\\ea58\"}.ez-icon-lock-outline:before{content:\"\\ea59\"}.ez-icon-lock:before{content:\"\\ea5a\"}.ez-icon-menu:before{content:\"\\ea5b\"}.ez-icon-mid:before{content:\"\\ea5c\"}.ez-icon-minus:before{content:\"\\ea5d\"}.ez-icon-money-off:before{content:\"\\ea5e\"}.ez-icon-money:before{content:\"\\ea5f\"}.ez-icon-more:before{content:\"\\ea60\"}.ez-icon-mp3:before{content:\"\\ea61\"}.ez-icon-mp4:before{content:\"\\ea62\"}.ez-icon-north-west:before{content:\"\\ea63\"}.ez-icon-number:before{content:\"\\ea64\"}.ez-icon-ordem-ascendente:before{content:\"\\ea65\"}.ez-icon-ordem-descendente:before{content:\"\\ea66\"}.ez-icon-parcelar:before{content:\"\\ea67\"}.ez-icon-pause:before{content:\"\\ea68\"}.ez-icon-payments:before{content:\"\\ea69\"}.ez-icon-pdf:before{content:\"\\ea6a\"}.ez-icon-play:before{content:\"\\ea6b\"}.ez-icon-plus:before{content:\"\\ea6c\"}.ez-icon-png:before{content:\"\\ea6d\"}.ez-icon-power:before{content:\"\\ea6e\"}.ez-icon-pptx:before{content:\"\\ea6f\"}.ez-icon-print:before{content:\"\\ea70\"}.ez-icon-push-pin:before{content:\"\\ea71\"}.ez-icon-rateio:before{content:\"\\ea72\"}.ez-icon-receipt:before{content:\"\\ea73\"}.ez-icon-recolher_card:before{content:\"\\ea74\"}.ez-icon-restore:before{content:\"\\ea75\"}.ez-icon-return:before{content:\"\\ea76\"}.ez-icon-save:before{content:\"\\ea77\"}.ez-icon-search:before{content:\"\\ea78\"}.ez-icon-settings-inverted:before{content:\"\\ea79\"}.ez-icon-settings:before{content:\"\\ea7a\"}.ez-icon-share:before{content:\"\\ea7b\"}.ez-icon-shield:before{content:\"\\ea7c\"}.ez-icon-show_menu:before{content:\"\\ea7d\"}.ez-icon-south-east:before{content:\"\\ea7e\"}.ez-icon-sync:before{content:\"\\ea7f\"}.ez-icon-table:before{content:\"\\ea80\"}.ez-icon-tag_code:before{content:\"\\ea81\"}.ez-icon-text:before{content:\"\\ea82\"}.ez-icon-timeline:before{content:\"\\ea83\"}.ez-icon-timer-outline:before{content:\"\\ea84\"}.ez-icon-tune:before{content:\"\\ea85\"}.ez-icon-txt:before{content:\"\\ea86\"}.ez-icon-un-pin:before{content:\"\\ea87\"}.ez-icon-unfold_less:before{content:\"\\ea88\"}.ez-icon-unfold_more:before{content:\"\\ea89\"}.ez-icon-user-circle:before{content:\"\\ea8a\"}.ez-icon-warning-outline:before{content:\"\\ea8b\"}.ez-icon-warning_triangle:before{content:\"\\ea8c\"}.ez-icon-whatshot:before{content:\"\\ea8d\"}.ez-icon-xlsx:before{content:\"\\ea8e\"}.ez-icon-zip:before{content:\"\\ea8f\"}.x-small--font{font-size:12px}.small--font{font-size:16px}.medium--font{font-size:20px}.large--font{font-size:24px}.x-large--font{font-size:30px}";
+const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{color:var(--ez-icon--color)}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{font-family:'ez-icons' !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ez-icon-2chevron-down:before{content:\"\\ea01\"}.ez-icon-2chevron-up:before{content:\"\\ea02\"}.ez-icon-acao:before{content:\"\\ea03\"}.ez-icon-account-outline:before{content:\"\\ea04\"}.ez-icon-account:before{content:\"\\ea05\"}.ez-icon-alert-circle-inverted:before{content:\"\\ea06\"}.ez-icon-alert-circle:before{content:\"\\ea07\"}.ez-icon-alert-mail:before{content:\"\\ea08\"}.ez-icon-alert-popup:before{content:\"\\ea09\"}.ez-icon-anexo:before{content:\"\\ea0a\"}.ez-icon-antecipação:before{content:\"\\ea0b\"}.ez-icon-apps:before{content:\"\\ea0c\"}.ez-icon-arrow-forward:before{content:\"\\ea0d\"}.ez-icon-arrow-upward:before{content:\"\\ea0e\"}.ez-icon-arrow_back:before{content:\"\\ea0f\"}.ez-icon-arrow_downward:before{content:\"\\ea10\"}.ez-icon-baixa:before{content:\"\\ea11\"}.ez-icon-balance:before{content:\"\\ea12\"}.ez-icon-bell-inverted:before{content:\"\\ea13\"}.ez-icon-bell:before{content:\"\\ea14\"}.ez-icon-boleto:before{content:\"\\ea15\"}.ez-icon-boolean:before{content:\"\\ea16\"}.ez-icon-business-center:before{content:\"\\ea17\"}.ez-icon-calendar-clock:before{content:\"\\ea18\"}.ez-icon-calendar:before{content:\"\\ea19\"}.ez-icon-cash-remove:before{content:\"\\ea1a\"}.ez-icon-check-circle-inverted:before{content:\"\\ea1b\"}.ez-icon-check-circle:before{content:\"\\ea1c\"}.ez-icon-check:before{content:\"\\ea1d\"}.ez-icon-chevron-down:before{content:\"\\ea1e\"}.ez-icon-chevron-left:before{content:\"\\ea1f\"}.ez-icon-chevron-right:before{content:\"\\ea20\"}.ez-icon-chevron-up:before{content:\"\\ea21\"}.ez-icon-circle--medium:before{content:\"\\ea22\"}.ez-icon-circle:before{content:\"\\ea23\"}.ez-icon-cleaning:before{content:\"\\ea24\"}.ez-icon-clipboard:before{content:\"\\ea25\"}.ez-icon-close:before{content:\"\\ea26\"}.ez-icon-cobrar:before{content:\"\\ea27\"}.ez-icon-code:before{content:\"\\ea28\"}.ez-icon-configuration:before{content:\"\\ea29\"}.ez-icon-content-cut:before{content:\"\\ea2a\"}.ez-icon-copy:before{content:\"\\ea2b\"}.ez-icon-credit_card:before{content:\"\\ea2c\"}.ez-icon-crop:before{content:\"\\ea2d\"}.ez-icon-custom:before{content:\"\\ea2e\"}.ez-icon-delete-file:before{content:\"\\ea2f\"}.ez-icon-delete:before{content:\"\\ea30\"}.ez-icon-description:before{content:\"\\ea31\"}.ez-icon-dividir:before{content:\"\\ea32\"}.ez-icon-docx:before{content:\"\\ea33\"}.ez-icon-dot-notification:before{content:\"\\ea34\"}.ez-icon-dots-horizontal:before{content:\"\\ea35\"}.ez-icon-dots-vertical:before{content:\"\\ea36\"}.ez-icon-drag-indicator:before{content:\"\\ea37\"}.ez-icon-dual-chevron-down:before{content:\"\\ea38\"}.ez-icon-dual-chevron-left:before{content:\"\\ea39\"}.ez-icon-dual-chevron-right:before{content:\"\\ea3a\"}.ez-icon-dual-chevron-up:before{content:\"\\ea3b\"}.ez-icon-edit-file:before{content:\"\\ea3c\"}.ez-icon-edit-table:before{content:\"\\ea3d\"}.ez-icon-edit-time:before{content:\"\\ea3e\"}.ez-icon-edit-value:before{content:\"\\ea3f\"}.ez-icon-edit:before{content:\"\\ea40\"}.ez-icon-email:before{content:\"\\ea41\"}.ez-icon-estorno:before{content:\"\\ea42\"}.ez-icon-exe:before{content:\"\\ea43\"}.ez-icon-expand:before{content:\"\\ea44\"}.ez-icon-expandir_card:before{content:\"\\ea45\"}.ez-icon-extrato:before{content:\"\\ea46\"}.ez-icon-eye-off:before{content:\"\\ea47\"}.ez-icon-eye:before{content:\"\\ea48\"}.ez-icon-favorite:before{content:\"\\ea49\"}.ez-icon-figma:before{content:\"\\ea4a\"}.ez-icon-file-download:before{content:\"\\ea4b\"}.ez-icon-file-upload:before{content:\"\\ea4c\"}.ez-icon-filter:before{content:\"\\ea4d\"}.ez-icon-find-file:before{content:\"\\ea4e\"}.ez-icon-find-page:before{content:\"\\ea4f\"}.ez-icon-format-color-fill:before{content:\"\\ea50\"}.ez-icon-generic:before{content:\"\\ea51\"}.ez-icon-gif:before{content:\"\\ea52\"}.ez-icon-graph_bar:before{content:\"\\ea53\"}.ez-icon-handshake:before{content:\"\\ea54\"}.ez-icon-help-inverted:before{content:\"\\ea55\"}.ez-icon-help:before{content:\"\\ea56\"}.ez-icon-hide_menu:before{content:\"\\ea57\"}.ez-icon-home:before{content:\"\\ea58\"}.ez-icon-icons104:before{content:\"\\ea59\"}.ez-icon-language:before{content:\"\\ea5a\"}.ez-icon-launch:before{content:\"\\ea5b\"}.ez-icon-lightbulb:before{content:\"\\ea5c\"}.ez-icon-list:before{content:\"\\ea5d\"}.ez-icon-location:before{content:\"\\ea5e\"}.ez-icon-lock-outline:before{content:\"\\ea5f\"}.ez-icon-lock:before{content:\"\\ea60\"}.ez-icon-menu:before{content:\"\\ea61\"}.ez-icon-mid:before{content:\"\\ea62\"}.ez-icon-minus:before{content:\"\\ea63\"}.ez-icon-money-off:before{content:\"\\ea64\"}.ez-icon-money:before{content:\"\\ea65\"}.ez-icon-more:before{content:\"\\ea66\"}.ez-icon-mp3:before{content:\"\\ea67\"}.ez-icon-mp4:before{content:\"\\ea68\"}.ez-icon-multiple-files:before{content:\"\\ea69\"}.ez-icon-north-west:before{content:\"\\ea6a\"}.ez-icon-number:before{content:\"\\ea6b\"}.ez-icon-ordem-ascendente:before{content:\"\\ea6c\"}.ez-icon-ordem-descendente:before{content:\"\\ea6d\"}.ez-icon-parcelar:before{content:\"\\ea6e\"}.ez-icon-pause:before{content:\"\\ea6f\"}.ez-icon-payments:before{content:\"\\ea70\"}.ez-icon-pdf:before{content:\"\\ea71\"}.ez-icon-play:before{content:\"\\ea72\"}.ez-icon-plus:before{content:\"\\ea73\"}.ez-icon-png:before{content:\"\\ea74\"}.ez-icon-power:before{content:\"\\ea75\"}.ez-icon-pptx:before{content:\"\\ea76\"}.ez-icon-preview:before{content:\"\\ea77\"}.ez-icon-print:before{content:\"\\ea78\"}.ez-icon-push-pin:before{content:\"\\ea79\"}.ez-icon-rateio:before{content:\"\\ea7a\"}.ez-icon-receipt:before{content:\"\\ea7b\"}.ez-icon-recolher_card:before{content:\"\\ea7c\"}.ez-icon-restore:before{content:\"\\ea7d\"}.ez-icon-return:before{content:\"\\ea7e\"}.ez-icon-sankhya-place:before{content:\"\\ea7f\"}.ez-icon-save:before{content:\"\\ea80\"}.ez-icon-search:before{content:\"\\ea81\"}.ez-icon-settings-inverted:before{content:\"\\ea82\"}.ez-icon-settings:before{content:\"\\ea83\"}.ez-icon-share:before{content:\"\\ea84\"}.ez-icon-shield:before{content:\"\\ea85\"}.ez-icon-show_menu:before{content:\"\\ea86\"}.ez-icon-south-east:before{content:\"\\ea87\"}.ez-icon-sync:before{content:\"\\ea88\"}.ez-icon-table:before{content:\"\\ea89\"}.ez-icon-tag_code:before{content:\"\\ea8a\"}.ez-icon-text:before{content:\"\\ea8b\"}.ez-icon-timeline:before{content:\"\\ea8c\"}.ez-icon-timer-outline:before{content:\"\\ea8d\"}.ez-icon-trending-up:before{content:\"\\ea8e\"}.ez-icon-tune:before{content:\"\\ea8f\"}.ez-icon-txt:before{content:\"\\ea90\"}.ez-icon-un-pin:before{content:\"\\ea91\"}.ez-icon-unfold_less:before{content:\"\\ea92\"}.ez-icon-unfold_more:before{content:\"\\ea93\"}.ez-icon-user-circle:before{content:\"\\ea94\"}.ez-icon-warning-outline:before{content:\"\\ea95\"}.ez-icon-warning_triangle:before{content:\"\\ea96\"}.ez-icon-whatshot:before{content:\"\\ea97\"}.ez-icon-xlsx:before{content:\"\\ea98\"}.ez-icon-zip:before{content:\"\\ea99\"}.x-small--font{font-size:12px}.small--font{font-size:16px}.medium--font{font-size:20px}.large--font{font-size:24px}.x-large--font{font-size:30px}";
 
 const EzIcon = class {
   constructor(hostRef) {

package/dist/esm/ez-list.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-296b8458.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-baa5e267.js';
 import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 
-const ezListCss = ":host{--ez-list__host--z-index:var(--visible, 1);--ez-list__host--border-radius:var(--border--radius-medium, 12px);--ez-list__host--padding:var(--space--medium, 12px);--ez-list__icon--padding:var(--space--small, 6px);--ez-list__icon--color:#AFB6C0;--ez-list__item--margin:0 var(--space--small, 6px);--ez-list__item--color:var(--title--primary, #2b3a54);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-color:var(--title--primary, #2b3a54);--ez-list__item--font-family:var(--font-pattern, \"Roboto\");--ez-list__item--font-size:var(--text--medium, 14px);--ez-list__selectable--padding-right:var(--space--small, 6px);--ez-list__selectable--padding-left:var(--space--small, 6px);--ez-list__selected-item--border-radius:var(--border--radius-small, 6px);--ez-list__selected-item--background-color:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Roboto\");--ez-list__group--font-size:var(--text--medium, 14px);--ez-list__group--font-weight:var(--text-weight--large, 600);--ez-list__group--padding-bottom:var(--space-small, 6px);--ez-list__group-overlay--font-family:var(--font-pattern, \"Roboto\");--ez-list__group-overlay--font-size:var(--text--medium, 14px);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__last-droppable-space--height:var(--space--small, 6px);--ez-list__draggable-list--padding-bottom:var(--space--small, 6px);--ez-list__draggable-icon--image:url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');--ez-list__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-list__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-list__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-list__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-list__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-list__scrollbar--width:var(--space--medium, 12px);max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}p{margin:0}.draggable{width:100%;display:grid;grid-template-columns:minmax(0px, auto) minmax(0px, auto);place-items:center;border-top:1px dashed #fff;justify-content:space-between;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size)}.dragging{background:#FFFFFF;border:1px solid #008561;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.selectable{cursor:pointer;padding-right:var(--ez-list__selectable--padding-right);padding-left:var(--ez-list__selectable--padding-left)}.selectable-container{margin:0px !important}.hover-feedback:hover{background-color:var(--background--medium);border-radius:var(--border--radius-regular)}.item-content{display:flex;overflow:hidden;justify-content:flex-start;align-items:center;width:100%}.draggable-list{padding:0;margin:0;width:100%;max-height:100%;scrollbar-width:thin;color:var(--text-color);scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.draggable-list li{display:flex;height:32px;margin:var(--ez-list__item--margin);font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);color:var(--ez-list__item--color)}.over{border-top:1px dashed var(--ez-list__over--border--color)}.last-droppable-space{height:var(--ez-list__last-droppable-space--height)}.draggable-selected{background-color:var(--background--strong) !important}.draggable-selected div:hover{background-color:var(--background--strong) !important}.draggable-list::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.draggable-list::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar-thumb:vertical:hover,.draggable-list::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.draggable-list::-webkit-scrollbar-thumb:vertical:active,.draggable-list::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;width:18px;height:18px;background-color:var(--ez-list__icon--color);-webkit-mask-image:var(--ez-list__draggable-icon--image);mask-image:var(--ez-list__draggable-icon--image)}*{box-sizing:border-box}.checkbox{width:fit-content}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-container{display:flex;flex-direction:column;max-height:100%;overflow-y:auto;outline:none;width:100%;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-name{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--title--primary);font-family:var(--ez-list__group--font-family);font-size:var(--ez-list__group--font-size);font-weight:var(--ez-list__group--font-weight);padding-bottom:var(--ez-list__group--padding-bottom)}.group{display:flex;flex-direction:column}.group-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.group-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container::-webkit-scrollbar-thumb:vertical:hover,.group-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.group-container::-webkit-scrollbar-thumb:vertical:active,.group-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.section-container{display:flex;position:relative;height:100%}.items-container{width:100%;max-height:100%;outline:none;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-items-container{width:100%;max-height:100%;height:100%;outline:none}.items-container::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.items-container::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container::-webkit-scrollbar-thumb:vertical:hover,.items-container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.items-container::-webkit-scrollbar-thumb:vertical:active,.items-container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.group-overlay{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;border-radius:8px;position:absolute;display:none;place-items:center;top:0;bottom:0;left:0;right:0;z-index:2;margin:0;cursor:pointer;font-family:var(--ez-list__group-overlay--font-family);font-size:var(--ez-list__group-overlay--font-size)}.presetedHeight{min-height:100px}.overlay-text{position:absolute;top:50%;left:50%;font-size:50px;color:white;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%)}.selected-item{background:var(--ez-list__selected-item--background-color);border-radius:var(--ez-list__selected-item--border-radius)}.slot-item{align-items:flex-end}.overGroup{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;box-sizing:border-box;border-radius:8px;padding-top:6px}";
+const ezListCss = ":host {\n  /* @doc Define a camada de visibilidae do componente. */\n  --ez-list__host--z-index: var(--visible, 1);\n\n  /* @doc Define o raio da borda do componente. */\n  --ez-list__host--border-radius: var(--border--radius-medium, 12px);\n\n  /* @doc Define o espaçamento entre a lista e o componente. */\n  --ez-list__host--padding: var(--space--medium, 12px);\n\n  /* @doc Define o espaçamento interno do ícone. */\n  --ez-list__icon--padding: var(--space--small, 6px);\n\n  /* @doc Define a cor do ícone de arrasto do item da lista. */\n  --ez-list__icon--color: #AFB6C0;\n\n  /* @doc Define o espaçamento externo do item da lista. */\n  --ez-list__item--margin: 0 var(--space--small, 6px);\n\n  /* @doc Define a cor do texto do item da lista. */\n  --ez-list__item--color: var(--title--primary, #2b3a54);\n\n  /* @doc Define o estilo borda inferior do item da lista. */\n  --ez-list__item--border-bottom;\n\n  /* @doc Define a cor da borda inferior do item da lista. */\n  --ez-list__item--border-bottom-color;\n\n  /* @doc Define o estilo do texto do item da lista. */\n  --ez-list__item--font-family: var(--font-pattern, \"Roboto\");\n\n  /* @doc Define o tamanho do texto do item da lista. */\n  --ez-list__item--font-size: var(--text--medium, 14px);\n  \n  /* @doc Define o tipo da quebra de linha do item da lista. */\n  --ez-list__item--white-space: var(--ez-list__item--white-space, nowrap);\n\n  /* @doc Define o espaçamento lateral direito para items selecionados. */\n  --ez-list__selectable--padding-right: var(--space--small, 6px);\n  \n  /* @doc Define o espaçamento lateral esquerdo para items selecionados. */\n  --ez-list__selectable--padding-left: var(--space--small, 6px);\n\n  /*@doc Define o raio da borda de items selecionados.*/\n  --ez-list__selected-item--border-radius: var(--border--radius-small, 6px);\n  \n  /*@doc Define a cor de fundo de items selecionados.*/\n  --ez-list__selected-item--background-color: var(--color--primary-300, #E2F4EF);\n\n  /* @doc Define o estilo do texto do grupo da lista. */\n  --ez-list__group--font-family: var(--font-pattern, \"Roboto\");\n  \n  /* @doc Define o tamanho do texto do grupo da lista. */\n  --ez-list__group--font-size: var(--text--medium, 14px);\n  \n  /* @doc Define o peso do texto do grupo da lista. */\n  --ez-list__group--font-weight: var(--text-weight--large, 600);\n  \n  /* @doc Define o espaçamento inferior do grupo da lista. */\n  --ez-list__group--padding-bottom: var(--space-small, 6px);\n\n  /* @doc Define o estilo do texto da área de transferência de grupos. */\n  --ez-list__group-overlay--font-family: var(--font-pattern, \"Roboto\");\n\n  /* @doc Define o tamanho do texto da área de transferência de grupos. */\n  --ez-list__group-overlay--font-size: var(--text--medium, 14px);\n  \n  /* @doc Define a cor da borda pontilhada sobre os elementos da lista. */\n  --ez-list__over--border--color: var(--color--primary, #008561);\n\n  /*@doc Define a altura do container para arrasto para última posição .*/\n  --ez-list__last-droppable-space--height: var(--space--small, 6px);\n  \n  /*@doc Define o espaçamento do container de itens arrastáveis .*/\n  --ez-list__draggable-list--padding-bottom: var(--space--small, 6px);\n\n  /* @doc Define a imagem do ícone de drag. */\n  --ez-list__draggable-icon--image: url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');\n\n  /* scrollbar */\n  /*@doc Define a cor da barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-default: var(--scrollbar--default, #626e82);\n  /*@doc Define a cor de fundo da barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);\n  /*@doc Define a cor do hover na barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);\n  /*@doc Define a cor do active na barra de rolagem do componente.*/\n  --ez-list__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);\n  /*@doc Define o raio da borda da barra de rolagem do componente.*/\n  --ez-list__scrollbar--border-radius: var(--border--radius-small, 6px);\n  /*@doc Define a largura da barra de rolagem do componente.*/\n  --ez-list__scrollbar--width: var(--space--medium, 12px);\n\n  max-height: 100%;\n  width: 100%;\n  background-color: #fff;\n  display: flex;\n\n  /*public*/\n  z-index: var(--ez-list__host--z-index);\n}\n\np {\n  margin: 0;\n}\n\n.draggable {\n  /* private */\n  width: 100%;\n  display: grid;\n  grid-template-columns: minmax(0px, auto) minmax(0px, auto);\n  place-items: center;\n  border-top: 1px dashed #fff;\n  justify-content: space-between;\n\n  /*public*/\n  font-family: var(--ez-list__item--font-family);\n  font-size: var(--ez-list__item--font-size);\n}\n\n.dragging {\n  background: #FFFFFF;\n  /* Primary/color--primary */\n\n  border: 1px solid #008561;\n  box-sizing: border-box;\n  box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);\n  border-radius: 6px;\n}\n\n.selectable {\n  cursor: pointer;\n\n  /*public*/\n  padding-right: var(--ez-list__selectable--padding-right);\n  padding-left: var(--ez-list__selectable--padding-left);\n}\n\n.selectable-container {\n  margin: 0px !important;\n}\n\n.hover-feedback:hover {\n  background-color: var(--background--medium);\n  border-radius: var(--border--radius-regular);\n}\n\n.item-content {\n  display: flex;\n  overflow: hidden;\n  justify-content: flex-start;\n  width: 100%;\n}\n\n.draggable-list {\n  padding: 0;\n  margin: 0;\n  width: 100%;\n  max-height: 100%;\n  scrollbar-width: thin;\n  \n  /*public*/\n  color: var(--text-color);\n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.draggable-list li {\n  display: flex;\n  \n  /*public*/\n  padding: var(--space--2xs, 8px) var(--space--3xs, 4px);\n  margin: var(--ez-list__item--margin);\n  font-family: var(--ez-list__item--font-family);\n  font-size: var(--ez-list__item--font-size);\n  color: var(--ez-list__item--color);\n  border-bottom: var(--ez-list__item--border-bottom, none) var(--ez-list__item--border-bottom-color);\n}\n\n.over {\n  /*public*/\n  border-top: 1px dashed var(--ez-list__over--border--color);\n}\n\n.last-droppable-space {\n  /*public*/\n  height: var(--ez-list__last-droppable-space--height);\n}\n\n.draggable-selected {\n  /*public*/\n  background-color: var(--background--strong) !important;\n}\n\n.draggable-selected div:hover {\n  /*public*/\n  background-color: var(--background--strong) !important;\n}\n\n.draggable-list::-webkit-scrollbar {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.draggable-list::-webkit-scrollbar-track {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.draggable-list::-webkit-scrollbar-thumb {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.draggable-list::-webkit-scrollbar-thumb:vertical:hover,\n.draggable-list::-webkit-scrollbar-thumb:horizontal:hover {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.draggable-list::-webkit-scrollbar-thumb:vertical:active,\n.draggable-list::-webkit-scrollbar-thumb:horizontal:active {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.draggable-icon {\n  align-items: flex-start;\n  display: flex;\n  outline: none;\n  border: none;\n  background-color: unset;\n}\n\n.draggable-icon::after {\n  content: '';\n  display: flex;\n  width: 18px;\n  height: 18px;\n\n  /*public*/\n  background-color: var(--ez-list__icon--color);\n  -webkit-mask-image: var(--ez-list__draggable-icon--image);\n  mask-image: var(--ez-list__draggable-icon--image);\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.checkbox {\n  width: fit-content;\n}\n\n.text--ellipsis {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  \n  /*public*/\n  white-space: var(--ez-list__item--white-space);\n}\n\n.group-container {\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  overflow-y: auto;\n  outline: none;\n  width: 100%;\n  scrollbar-width: thin;\n\n  /*public*/\n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.group-name {\n  -webkit-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  /*public*/\n  color: var(--title--primary);\n  font-family: var(--ez-list__group--font-family);\n  font-size: var(--ez-list__group--font-size);\n  font-weight: var(--ez-list__group--font-weight);\n  padding-bottom: var(--ez-list__group--padding-bottom);\n}\n\n.group {\n  display: flex;\n  flex-direction: column;\n}\n\n.group-container::-webkit-scrollbar {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.group-container::-webkit-scrollbar-track {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.group-container::-webkit-scrollbar-thumb {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.group-container::-webkit-scrollbar-thumb:vertical:hover,\n.group-container::-webkit-scrollbar-thumb:horizontal:hover {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.group-container::-webkit-scrollbar-thumb:vertical:active,\n.group-container::-webkit-scrollbar-thumb:horizontal:active {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.section-container {\n  display: flex;\n  position: relative;\n  height: 100%;\n}\n\n.items-container {\n  width: 100%;\n  max-height: 100%;\n  outline: none;\n  scrollbar-width: thin;\n\n  /*public*/\n  scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.group-items-container {\n  width: 100%;\n  max-height: 100%;\n  height: 100%;\n  outline: none;\n}\n\n.items-container::-webkit-scrollbar {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  width: var(--ez-list__scrollbar--width);\n  max-width: var(--ez-list__scrollbar--width);\n  min-width: var(--ez-list__scrollbar--width);\n}\n\n.items-container::-webkit-scrollbar-track {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-background);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.items-container::-webkit-scrollbar-thumb {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-default);\n  border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.items-container::-webkit-scrollbar-thumb:vertical:hover,\n.items-container::-webkit-scrollbar-thumb:horizontal:hover {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.items-container::-webkit-scrollbar-thumb:vertical:active,\n.items-container::-webkit-scrollbar-thumb:horizontal:active {\n  /*public*/\n  background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.group-overlay {\n  background: rgba(226, 244, 239, 0.8);\n  border: 1px solid #008561;\n  border-radius: 8px;\n  position: absolute;\n  display: none;\n  place-items: center;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  margin: 0;\n  cursor: pointer;\n\n  /*public*/\n  font-family: var(--ez-list__group-overlay--font-family);\n  font-size: var(--ez-list__group-overlay--font-size);\n}\n\n.presetedHeight {\n  min-height: 100px;\n}\n\n.overlay-text {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  font-size: 50px;\n  color: white;\n  transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n}\n\n.selected-item {\n  /*public*/\n  background: var(--ez-list__selected-item--background-color);\n  border-radius: var(--ez-list__selected-item--border-radius);\n}\n\n.slot-item {\n  align-items: flex-end;\n}\n\n.overGroup {\n  background: rgba(226, 244, 239, 0.8);\n  border: 1px solid #008561;\n  box-sizing: border-box;\n  border-radius: 8px;\n  padding-top: 6px;\n}";
 
 const EzList = class {
   constructor(hostRef) {
@@ -441,7 +441,9 @@ const EzList = class {
     this.setSelection(previousItem, true);
   }
   keyDownHandler(event) {
-    event.preventDefault();
+    if (!event.ctrlKey) {
+      event.preventDefault();
+    }
     this.getSelection().then(selectedItem => {
       if (selectedItem) {
         switch (event.key) {