@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-81596.0 → 0.0.0-bugfix-dev-KB-81596.1

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -6,7 +6,7 @@ import { EzGridCustomHeader } from './components/EzGridCustomHeader';
 import { CellRendererStatus } from './components/cellRendererStatus';
 import SelectionHeader from './components/selectionHeader';
 import gridTerms from './i18n/pt-BR';
-import { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE } from '../../../../utils/constants';
+import { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE, PRESENTATION_COL_ID_PROP_NAME, PRESENTATION_FROM_COL_PROP_NAME } from '../../../../utils/constants';
 import GridEditionManager from './GridEditionManager';
 import { ModuleRegistry } from '@ag-grid-community/core';
 import { EnterpriseCoreModule } from '@ag-grid-enterprise/core';
@@ -44,7 +44,6 @@ export default class AgGridController {
     this.DEFAULT_FONT_SIZE_HTML5 = 32;
     this.DEFAULT_ICON_SIZE = 12;
     this.DEFAULT_MAX_SIZE = 200;
-    this.DOC_WIDTH = 800;
     this._menuItems = [];
     this._idAttribName = '__record__id__';
     this._gridConfig = [];
@@ -53,6 +52,7 @@ export default class AgGridController {
     this._customFormatters = new Map();
     this._gridShowDom = false;
     this.peddingExecutionsOnGridShow = [];
+    this._lastColsConfig = undefined;
     ModuleRegistry.registerModules([
       EnterpriseCoreModule,
       RangeSelectionModule,
@@ -647,7 +647,9 @@ export default class AgGridController {
     }
   }
   isColumnEditable(rowIndex, column) {
-    if (column.getColDef().headerName === '' || rowIndex === -1)
+    if (column.getColDef().headerName === ''
+      || column.getColDef().headerName === this.CHECK_BOX_COL_ID
+      || rowIndex === -1)
       return false;
     const rowId = this._dataUnit.records[rowIndex][this._idAttribName];
     const rowNode = this._gridOptions.api.getRowNode(rowId);
@@ -665,7 +667,7 @@ export default class AgGridController {
     this._gridOptions.api.setFocusedCell(rowIndex, firstCell);
   }
   setColumnsDef(cols) {
-    const checkBoxColumn = Object.assign({ colId: this.CHECK_BOX_COL_ID, headerName: '', checkboxSelection: true, width: 29, suppressMovable: true, suppressAutoSize: true, suppressMenu: true, lockPosition: true, pinned: true }, (this._multipleSelection && { headerComponent: 'ezGridHeaderComponent', headerClass: 'ag-column-select-header' }));
+    const checkBoxColumn = Object.assign({ colId: this.CHECK_BOX_COL_ID, headerName: this.CHECK_BOX_COL_ID, checkboxSelection: true, width: 29, suppressMovable: true, suppressAutoSize: true, suppressMenu: true, lockPosition: true, pinned: true }, (this._multipleSelection && { headerComponent: 'ezGridHeaderComponent', headerClass: 'ag-column-select-header' }));
     const newColDefs = this._options.suppressCheckBoxCol ? [] : [checkBoxColumn];
     if (this._statusResolver != undefined) {
       newColDefs.push({
@@ -693,8 +695,39 @@ export default class AgGridController {
     });
     this._colDefs = newColDefs;
     if (this._gridOptions && this._gridOptions.api) {
+      this.setColsDefsWithStateIfNeeded(this._colDefs);
+    }
+  }
+  setColsDefsWithStateIfNeeded(colDefs) {
+    if (!this._lastColsConfig) {
       this._gridOptions.api.setColumnDefs(this._colDefs);
     }
+    /*
+      Caso a definição de colunas esteja sendo atualizada,
+      e existe uma config aplicada, temos que considerar essa
+      config ao adicionar nova definição de colunas.
+      PS: Poderia apenas chamar o setColumnsState, porém,
+      isso impactaria em performance, e o usuário ia perceber
+      a mudança das colunas visualmente na grade, o que traria
+      uma experiencia ruim.
+    */
+    const colDefsWithConfigs = this.getColsDefWithConfigApplied(colDefs, this._lastColsConfig);
+    this._gridOptions.api.setColumnDefs(colDefsWithConfigs);
+  }
+  getColsDefWithConfigApplied(colDefs, colsConfig) {
+    //Cria map de colunas existentes na config e seu índice
+    const orderMap = colsConfig.reduce((map, col, index) => {
+      map[col.name] = index;
+      return map;
+    }, {});
+    //Remove colunas que não existem na config
+    const filteredColsDefs = colDefs.filter((col) => !orderMap.hasOwnProperty(col.colId));
+    //Ordena colunas baseada na config aplicada
+    const sortedColumnDefs = filteredColsDefs.sort((a, b) => {
+      var _a, _b;
+      return ((_a = orderMap[a.field]) !== null && _a !== void 0 ? _a : Number.MAX_VALUE) - ((_b = orderMap[b.field]) !== null && _b !== void 0 ? _b : Number.MAX_VALUE);
+    });
+    return sortedColumnDefs;
   }
   hideSelectionColumn() {
     var _a, _b;
@@ -728,6 +761,7 @@ export default class AgGridController {
     if (this._grid === undefined) {
       throw new Error('Erro interno: Grid ainda não inicializado.');
     }
+    this._lastColsConfig = state;
     const colDef = this._gridOptions.columnApi.getColumns();
     let columns = this.getColumnsDef();
     let visibleColumns = [];
@@ -736,14 +770,39 @@ export default class AgGridController {
     const columnsOffset = colDef.length - columns.length;
     this._gridConfig = state;
     let sort = [];
-    state.forEach((cfgColumn, index) => {
+    let currentIndex = 0;
+    state.forEach((cfgColumn) => {
+      var _a, _b;
       const colWidth = this.getColumnWidth(cfgColumn);
-      this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + columnsOffset);
+      this._gridOptions.columnApi.moveColumn(cfgColumn.name, currentIndex + columnsOffset);
       this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, colWidth);
       visibleColumns.push(cfgColumn.name);
       if (cfgColumn.ascending !== undefined) {
         sort.push({ colId: cfgColumn.name, sort: cfgColumn.ascending !== true ? 'desc' : 'asc', sortIndex: cfgColumn.orderIndex });
       }
+      currentIndex++;
+      const fieldMD = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
+      /*
+        Migração para o SEARCHPLUS, caso de uso:
+          - Agora existe uma coluna para o campo de descrição do relaciona
+          - Essa col, não existe na config da grade que já foi salva pelo DS
+          - Nesse caso, precisamos inserir a coluna de descrição automaticamente para que
+            os usuários não percam a apresentação do campo de descrição.
+          PS: Caso esteja herdando do HTML5, devemos manter a config como está la
+      */
+      if (this.needToAddDescriptionColumn(cfgColumn, fieldMD, state)) {
+        const descriptionColID = (_b = fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.properties) === null || _b === void 0 ? void 0 : _b[PRESENTATION_COL_ID_PROP_NAME];
+        if (!descriptionColID)
+          return;
+        const descriptionCol = this._gridOptions.columnApi.getColumn(descriptionColID);
+        const descriptionColDef = descriptionCol === null || descriptionCol === void 0 ? void 0 : descriptionCol.getColDef();
+        const descriptionHeaderName = descriptionColDef === null || descriptionColDef === void 0 ? void 0 : descriptionColDef.headerName;
+        const descriptionColSize = this.getColumnWidthByLabel(descriptionHeaderName);
+        this._gridOptions.columnApi.moveColumn(descriptionColID, currentIndex + columnsOffset);
+        this._gridOptions.columnApi.setColumnWidth(descriptionColID, descriptionColSize);
+        visibleColumns.push(descriptionColID);
+        currentIndex++;
+      }
     });
     let invisibleColumns = columns.filter(column => !visibleColumns.includes(column.name)).map(column => column.name);
     this._gridOptions.columnApi.setColumnsVisible(visibleColumns, true);
@@ -753,10 +812,15 @@ export default class AgGridController {
       defaultState: { sort: null },
     });
   }
-  getAdaptiveWidth(width) {
-    const widthGrid = this._container.clientWidth;
-    const adaptiveWidth = (this.DOC_WIDTH * width) / widthGrid;
-    return Math.round(adaptiveWidth);
+  needToAddDescriptionColumn(cfgColumn, fieldMD, stateConfig) {
+    var _a, _b;
+    if (!fieldMD) {
+      return false;
+    }
+    const configVersion = ((_a = cfgColumn.configVersion) !== null && _a !== void 0 ? _a : 0);
+    const isSearchPlus = (fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.userInterface) == UserInterface.SEARCHPLUS;
+    const descriptionColID = (_b = fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.properties) === null || _b === void 0 ? void 0 : _b[PRESENTATION_COL_ID_PROP_NAME];
+    return isSearchPlus && configVersion < 1 && stateConfig.find(col => col.name === descriptionColID) != undefined;
   }
   getColumnsState() {
     if (this._grid === undefined) {
@@ -767,7 +831,7 @@ export default class AgGridController {
       .map(s => {
       const column = this._gridOptions.columnApi.getColumn(s.colId);
       const def = column.getColDef();
-      const width = this.getAdaptiveWidth(column.getActualWidth());
+      const width = column.getActualWidth();
       const label = def.headerName;
       const name = def.checkboxSelection ? '__SELECTION__' : s.colId;
       const colState = { label, name };
@@ -817,7 +881,7 @@ export default class AgGridController {
     return filterOptions.map(item => item.check).includes(true);
   }
   buildColDef(source) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     let tooltip = undefined;
     const propSortable = StringUtils.getBooleanValue((_a = source.props) === null || _a === void 0 ? void 0 : _a.get('gridSortable'), true);
     if ((_b = source.props) === null || _b === void 0 ? void 0 : _b.get('gridHeaderTooltip')) {
@@ -839,6 +903,11 @@ export default class AgGridController {
         showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name), fromIcon: true }),
       },
       valueFormatter: params => {
+        var _a, _b, _c, _d;
+        const presentationFrom = (_a = source === null || source === void 0 ? void 0 : source.props) === null || _a === void 0 ? void 0 : _a.get(PRESENTATION_FROM_COL_PROP_NAME);
+        if (presentationFrom) {
+          return (_d = (_c = (_b = params === null || params === void 0 ? void 0 : params.data) === null || _b === void 0 ? void 0 : _b[presentationFrom]) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : "";
+        }
         if (params.value === undefined || params.value === null) {
           return "";
         }
@@ -858,6 +927,7 @@ export default class AgGridController {
         return this.getFormatterByColumn(params, source);
       },
       cellStyle: this.getStyleByColumn(source),
+      editable: !((_d = source.props) === null || _d === void 0 ? void 0 : _d.has(PRESENTATION_FROM_COL_PROP_NAME))
     });
   }
   setCustomFormatters(customFormatters) {
@@ -873,8 +943,11 @@ export default class AgGridController {
     };
   }
   getStyleByColumn(source) {
+    var _a;
     let cellStyle = this.getInitCellStyle();
-    switch (source === null || source === void 0 ? void 0 : source.userInterface) {
+    const primitiveUIType = (_a = source === null || source === void 0 ? void 0 : source.props) === null || _a === void 0 ? void 0 : _a.get("PRIMITIVETUIYPE");
+    const uitype = source === null || source === void 0 ? void 0 : source.userInterface;
+    switch (primitiveUIType !== null && primitiveUIType !== void 0 ? primitiveUIType : uitype) {
       case UserInterface.DECIMALNUMBER:
       case UserInterface.INTEGERNUMBER:
         cellStyle['text-align'] = 'right';
@@ -890,7 +963,7 @@ export default class AgGridController {
     return cellStyle;
   }
   getFormatterByColumn(params, source) {
-    var _a;
+    var _a, _b, _c, _d;
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === 'OPTIONSELECTOR' && source.options) {
       const prop = source === null || source === void 0 ? void 0 : source.options;
       let options;
@@ -927,6 +1000,9 @@ export default class AgGridController {
         return params === null || params === void 0 ? void 0 : params.value;
       }
     }
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.SEARCHPLUS) {
+      return (_d = (_c = (_b = params === null || params === void 0 ? void 0 : params.value) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : params === null || params === void 0 ? void 0 : params.value) !== null && _d !== void 0 ? _d : "";
+    }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.DECIMALNUMBER) {
       if (params.value != undefined) {
         const precision = Number(source.props.get('precision')) || 2;
@@ -1100,7 +1176,7 @@ export default class AgGridController {
     this._gridOptions.api.stopEditing();
   }
   getColumnWidth(cfgColumn) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     if (cfgColumn == undefined) {
       return;
     }
@@ -1112,10 +1188,14 @@ export default class AgGridController {
       return parseInt(cfgColumn.width) + this.DEFAULT_FONT_SIZE_HTML5;
     }
     const field = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
+    const label = (_b = field === null || field === void 0 ? void 0 : field.label) !== null && _b !== void 0 ? _b : (_f = (_e = (_d = (_c = this._gridOptions) === null || _c === void 0 ? void 0 : _c.columnApi) === null || _d === void 0 ? void 0 : _d.getColumn(cfgColumn.name)) === null || _e === void 0 ? void 0 : _e.getColDef()) === null || _f === void 0 ? void 0 : _f.headerName;
     if ((field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH) {
       return this.DEFAULT_MAX_SIZE;
     }
-    const labelSize = (((_b = field === null || field === void 0 ? void 0 : field.label) === null || _b === void 0 ? void 0 : _b.length) || 0) * this.DEFAULT_FONT_SIZE + this.DEFAULT_ICON_SIZE;
+    return this.getColumnWidthByLabel(label);
+  }
+  getColumnWidthByLabel(label) {
+    const labelSize = ((label === null || label === void 0 ? void 0 : label.length) || 0) * this.DEFAULT_FONT_SIZE + this.DEFAULT_ICON_SIZE;
     return labelSize > this.DEFAULT_MAX_SIZE ? this.DEFAULT_MAX_SIZE : labelSize;
   }
 }

package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js

@@ -1,5 +1,5 @@
-import { Action, ObjectUtils } from '@sankhyalabs/core';
-import { EZ_GRID_LOADING_SOURCE } from "../../../../utils/constants";
+import { Action, ObjectUtils, UserInterface } from '@sankhyalabs/core';
+import { EZ_GRID_LOADING_SOURCE, PRESENTATION_COL_ID_PROP_NAME, PRESENTATION_FROM_COL_PROP_NAME } from "../../../../utils/constants";
 import { DataSourceInterceptor } from "./DataSourceInterceptor";
 export default class DataSource {
   handleDataSaved(action) {
@@ -245,14 +245,20 @@ export default class DataSource {
           return indexA - indexB;
         });
         this._dataUnit.metadata.fields.forEach(f => {
-          var _a;
+          var _a, _b;
           if (f.visible !== false && f.name !== this.RECORD_ARCHIVE) {
             const props = new Map();
             const properties = this._dataUnit.getField(f.name).properties;
             for (const value in properties) {
               props.set(value, properties[value]);
             }
-            columnDefs.push({ label: f.label, name: f.name, userInterface: f.userInterface, options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options, props });
+            const col = { label: f.label, name: f.name, userInterface: f.userInterface, options: (_a = this._dataUnit.getField(f.name).properties) === null || _a === void 0 ? void 0 : _a.options, props };
+            columnDefs.push(col);
+            if (f.userInterface === UserInterface.SEARCHPLUS && ((_b = f.properties) === null || _b === void 0 ? void 0 : _b.DESCRIPTIONFIELD)) {
+              const descriptionCol = this.buildDescriptionColumn(f);
+              columnDefs.push(descriptionCol);
+              f.properties[PRESENTATION_COL_ID_PROP_NAME] = descriptionCol.name;
+            }
           }
         });
       }
@@ -262,4 +268,15 @@ export default class DataSource {
       console.warn(error);
     }
   }
+  buildDescriptionColumn(field) {
+    var _a, _b, _c, _d;
+    const props = new Map();
+    props.set(PRESENTATION_FROM_COL_PROP_NAME, field.name);
+    return {
+      label: `${(_a = field.properties) === null || _a === void 0 ? void 0 : _a.DESCRIPTIONFIELDLABEL} (${(_b = field.properties) === null || _b === void 0 ? void 0 : _b.DESCRIPTIONENTITY})`,
+      name: `${(_c = field.properties) === null || _c === void 0 ? void 0 : _c.ENTITYNAME}.${(_d = field.properties) === null || _d === void 0 ? void 0 : _d.DESCRIPTIONFIELD}`,
+      userInterface: UserInterface.SHORTTEXT,
+      props
+    };
+  }
 }

package/dist/collection/components/ez-grid/controller/ag-grid/GridEditionManager.js

@@ -1,12 +1,14 @@
-import { LockManager, LockManagerOperation, UserInterface } from '@sankhyalabs/core';
+import { LockManager, LockManagerOperation, StringUtils, UserInterface } from '@sankhyalabs/core';
 import { KeyCode, } from "@ag-grid-community/core";
 import { RecordValidationProcessor } from '../../../../utils/validators/recordvalidator/RecordValidationProcessor';
 import EzCellEditor from './editor/EzCellEditor';
 import EzGridCustomCellEditor from './components/EzGridCustomCellEditor';
 import EzGridCustomCellRender from './components/EzGridCustomCellRender';
 import { DataBinder } from '../../../../utils';
+import { PRESENTATION_COL_ID_PROP_NAME } from '../../../../utils/constants';
 export default class GridEditionManager {
   constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled, customEditors, customRenders, enableContinuousInsert, enableGridInsert, lockerId) {
+    this._inProgressChanges = [];
     this._dataUnit = dataUnit;
     this._recordValidationProcessor = new RecordValidationProcessor(this._dataUnit, {
       getRequiredFields: () => this.getRequiredFields(),
@@ -106,6 +108,12 @@ export default class GridEditionManager {
     return this._enableContinuousInsert && (this._dataUnit.records.length - 1) === ((_a = this._lastCellEdited) === null || _a === void 0 ? void 0 : _a.rowIndex);
   }
   async proceedAutoSave() {
+    var _a;
+    //Aguarda outras promises entrarem na fila
+    await new Promise(resolve => setTimeout(resolve, 100));
+    if (this._inProgressChanges.length) {
+      await Promise.all((_a = this._inProgressChanges) === null || _a === void 0 ? void 0 : _a.map(({ promise }) => promise));
+    }
     if (!this._dataUnit.isDirty()) {
       this.saveSuccess();
       return true;
@@ -176,7 +184,9 @@ export default class GridEditionManager {
   }
   configureColumn(col) {
     col.cellEditor = 'ezCellEditor';
-    col.editable = params => this.canEdit(params);
+    if (col.editable != false) {
+      col.editable = params => this.canEdit(params);
+    }
     col.suppressKeyboardEvent = (params) => {
       if (params.event.key === KeyCode.ESCAPE && params.editing) {
         return this._dataUnit.isDirty();
@@ -360,6 +370,14 @@ export default class GridEditionManager {
       return;
     }
     if (value instanceof Promise) {
+      const progressChange = {
+        promise: undefined,
+        resolve: () => { }
+      };
+      progressChange.promise = new Promise((resolve) => {
+        progressChange.resolve = resolve;
+      });
+      this._inProgressChanges.push(progressChange);
       this.handlePromiseValue(event, value);
       return;
     }
@@ -373,16 +391,22 @@ export default class GridEditionManager {
     const resolved = await value;
     return this.updateCellValue(event, resolved);
   }
-  updateCellValue(event, newValue) {
-    var _a;
+  async updateCellValue(event, newValue) {
+    var _a, _b, _c, _d;
     const fieldName = event.colDef.field;
-    event.node.setData(Object.assign(Object.assign({}, event.data), { [fieldName]: newValue }));
-    (_a = this._currentEditLock) === null || _a === void 0 ? void 0 : _a.call(this);
+    const newData = { [fieldName]: newValue };
+    const descriptionColName = (_b = (_a = this._dataUnit.getField(fieldName)) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b[PRESENTATION_COL_ID_PROP_NAME];
+    if (!StringUtils.isEmpty(descriptionColName)) {
+      newData[descriptionColName] = newValue === null || newValue === void 0 ? void 0 : newValue.label;
+    }
+    event.node.setData(Object.assign(Object.assign({}, event.data), { newData }));
+    (_c = this._currentEditLock) === null || _c === void 0 ? void 0 : _c.call(this);
     if (event.oldValue !== newValue) {
       this._isGridEdition = true;
-      this._dataUnit.setFieldValue(fieldName, newValue, [event.data.__record__id__], { suppressCreateNewRecord: true });
+      await this._dataUnit.setFieldValue(fieldName, newValue, [event.data.__record__id__], { suppressCreateNewRecord: true });
       this._lastCellEdited = { rowIndex: event.rowIndex, column: event.column, rowPinned: undefined };
     }
+    (_d = this._inProgressChanges) === null || _d === void 0 ? void 0 : _d.forEach(({ resolve }) => resolve(newValue));
   }
   setCellEditors(customEditors) {
     var _a;

package/dist/collection/components/ez-grid/controller/ag-grid/editor/EzCellEditor.js

@@ -4,6 +4,7 @@ import { buildTextAreaInput, buildTextInput } from "./templates/TextInput.tpl";
 import { buildDate, buildDateTime, buildTime } from "./templates/DateInput.tpl";
 import { buildDecimal, buildInteger } from "./templates/NumberInput.tpl";
 import { buildComboBox, buildSwitch } from "./templates/ComboBox.tpl";
+import { buildSearchPlus } from "./templates/SearchPlus.tpl";
 import { buildSearch } from "./templates/Search.tpl";
 const uiBuilders = new Map();
 uiBuilders.set(UserInterface.DATE, buildDate);
@@ -16,6 +17,7 @@ uiBuilders.set(UserInterface.CHECKBOX, buildSwitch);
 uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextAreaInput);
 uiBuilders.set(UserInterface.SEARCH, buildSearch);
+uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 export default class EzCellEditor {
   init(params) {
     this._rowData = params.data;

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/SearchPlus.tpl.js

@@ -0,0 +1,15 @@
+import { ApplicationContext, HTMLBuilder } from '@sankhyalabs/core';
+export const buildSearchPlus = ({ name, required, readOnly, dataUnit }) => {
+  const ezSearch = HTMLBuilder.parseElement(`<ez-search-plus
+          class="ez-grid grid_editor"
+          mode="slim"
+          suppress-empty-option=${required}
+          enabled=${!readOnly}
+          hide-description-input=${true}
+    />`);
+  const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__PLUS__OPTION__LOADER__");
+  ezSearch.optionLoader = (argument) => loader(argument, name, dataUnit);
+  ezSearch.autoFocus = true;
+  ezSearch.valueGetter = () => ezSearch.getValueAsync();
+  return ezSearch;
+};

package/dist/collection/components/ez-list/ez-list.js

@@ -576,7 +576,7 @@ export class EzList {
     return { id: item.id, label: item.label, check: evt.detail };
   }
   renderListWithGroups() {
-    return h("div", { class: 'group-container', ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => this.keyDownHandler(event) }, this._listGroupItems.map(group => {
+    return h("div", { class: 'group-container', ref: el => (this._groupContainer = el), tabIndex: this.ezSelectable ? 0 : undefined, onKeyDown: event => this.keyDownHandler(event) }, this._listGroupItems.map(group => {
       return (h("div", { id: this.getDivGroupId(group.group), class: 'group', key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: 'group-name', title: group.group }, group.group), h("section", { class: 'section-container', onDragOver: ev => ev.preventDefault() }, h("div", { class: 'group-items-container' }, h("div", { class: 'draggable-list' }, group.items.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
           'selectable-container': this.ezSelectable,
           'hover-feedback': this.hoverFeedback,
@@ -586,7 +586,7 @@ export class EzList {
     }));
   }
   renderList() {
-    return h("div", { class: 'items-container', ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
+    return h("div", { class: 'items-container', ref: el => (this._itemContainer = el), tabIndex: this.ezSelectable ? 0 : undefined, onKeyDown: event => {
         this.keyDownHandler(event);
       } }, h("div", { class: 'draggable-list' }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
         'selectable-container': this.ezSelectable,

package/dist/collection/components/ez-modal/ez-modal.js

@@ -25,7 +25,7 @@ export class EzModal {
   }
   componentDidLoad() {
     this.observeOpened();
-    new KeyboardManager({ propagate: false, element: this._element })
+    new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
       .bind("Enter", this.ezModalAction.emit.bind("OK"))
       .bind("Escape", () => this.closeModal())
       .bind("Esc", () => this.closeModal());

package/dist/collection/components/ez-modal-container/ez-modal-container.js

@@ -48,7 +48,7 @@ export class EzModalContainer {
     this._closeButton.focus();
   }
   render() {
-    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("div", { tabIndex: -1, class: "ez-modal-container__content" }, h("slot", null)), h("div", { tabIndex: -1, class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
   }
   static get is() { return "ez-modal-container"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/ez-popup/ez-popup.js

@@ -25,7 +25,7 @@ export class EzPopup {
     if (this.opened && this._popupRef) {
       this._popupRef.focus();
     }
-    new KeyboardManager({ propagate: false, element: this._element })
+    new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
       .bind("Enter", this.ezPopupAction.emit.bind("OK"))
       .bind("Escape", () => this.closePopup())
       .bind("Esc", () => this.closePopup());