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

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

@@ -8,9 +8,10 @@ const DataUnit = require('@sankhyalabs/core/dist/dataunit/DataUnit');
 const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
 require('./DialogType-2114c337.js');
 require('./CheckMode-ecb90b87.js');
-const ICustomRender = require('./ICustomRender-6fafffce.js');
-const constants = require('./constants-2714478b.js');
-const DataBinder = require('./DataBinder-e92314c2.js');
+const types = require('./types-6a5df0c7.js');
+require('./FormLayout-c2451c7f.js');
+const constants = require('./constants-569271bc.js');
+const DataBinder = require('./DataBinder-c2060474.js');
 const FocusResolver = require('./FocusResolver-885f2173.js');
 
 /**
@@ -50250,14 +50251,20 @@ 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 === core.UserInterface.SEARCHPLUS && ((_b = f.properties) === null || _b === void 0 ? void 0 : _b.DESCRIPTIONFIELD)) {
+              const descriptionCol = this.buildDescriptionColumn(f);
+              columnDefs.push(descriptionCol);
+              f.properties[constants.PRESENTATION_COL_ID_PROP_NAME] = descriptionCol.name;
+            }
           }
         });
       }
@@ -50267,6 +50274,17 @@ class DataSource {
       console.warn(error);
     }
   }
+  buildDescriptionColumn(field) {
+    var _a, _b, _c, _d;
+    const props = new Map();
+    props.set(constants.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: core.UserInterface.SHORTTEXT,
+      props
+    };
+  }
 }
 
 class EzGridCustomHeader {
@@ -50677,6 +50695,21 @@ const buildSwitch = (fieldMetadata) => {
   return combo;
 };
 
+const buildSearchPlus = ({ name, required, readOnly, dataUnit }) => {
+  const ezSearch = core.HTMLBuilder.parseElement(`<ez-search-plus
+          class="ez-grid grid_editor"
+          mode="slim"
+          suppress-empty-option=${required}
+          enabled=${!readOnly}
+          hide-description-input=${true}
+    />`);
+  const loader = core.ApplicationContext.getContextValue("__EZUI__SEARCH__PLUS__OPTION__LOADER__");
+  ezSearch.optionLoader = (argument) => loader(argument, name, dataUnit);
+  ezSearch.autoFocus = true;
+  ezSearch.valueGetter = () => ezSearch.getValueAsync();
+  return ezSearch;
+};
+
 const buildSearch = ({ name, required, readOnly, eGridCell, dataUnit }) => {
   var _a;
   const ezSearch = core.HTMLBuilder.parseElement(`<ez-search
@@ -50709,6 +50742,7 @@ uiBuilders.set(core.UserInterface.CHECKBOX, buildSwitch);
 uiBuilders.set(core.UserInterface.OPTIONSELECTOR, buildComboBox);
 uiBuilders.set(core.UserInterface.LONGTEXT, buildTextAreaInput);
 uiBuilders.set(core.UserInterface.SEARCH, buildSearch);
+uiBuilders.set(core.UserInterface.SEARCHPLUS, buildSearchPlus);
 class EzCellEditor {
   init(params) {
     this._rowData = params.data;
@@ -50772,7 +50806,7 @@ class EzGridCustomCellEditor extends EzCellEditor {
       charPress: params.charPress,
       currentEditor: this._defaultGui,
       name: this._fieldName,
-      source: ICustomRender.CustomEditorSource.GRID,
+      source: types.CustomEditorSource.GRID,
       detailContext: params.customEditorsInfo.detailContext,
       setValue: (value) => this.setValue(value),
       getValue: () => this.getValue(),
@@ -50879,7 +50913,7 @@ class EzGridCustomCellRender extends EzCellRender {
       charPress: '',
       currentRender: super.getGui(),
       name: this._fieldName,
-      source: ICustomRender.CustomRenderSource.GRID,
+      source: types.CustomRenderSource.GRID,
       getValue: () => params.getValue(),
       detailContext: params.customRendersInfo.detailContext,
       renderMetadata: {
@@ -50907,6 +50941,7 @@ class EzGridCustomCellRender extends EzCellRender {
 
 class GridEditionManager {
   constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled, customEditors, customRenders, enableContinuousInsert, enableGridInsert, lockerId) {
+    this._inProgressChanges = [];
     this._dataUnit = dataUnit;
     this._recordValidationProcessor = new DataBinder.RecordValidationProcessor(this._dataUnit, {
       getRequiredFields: () => this.getRequiredFields(),
@@ -51006,6 +51041,12 @@ 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;
@@ -51076,7 +51117,9 @@ 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();
@@ -51260,6 +51303,14 @@ 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;
     }
@@ -51273,16 +51324,22 @@ 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[constants.PRESENTATION_COL_ID_PROP_NAME];
+    if (!core.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;
@@ -64771,7 +64828,6 @@ 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 = [];
@@ -64780,6 +64836,7 @@ class AgGridController {
     this._customFormatters = new Map();
     this._gridShowDom = false;
     this.peddingExecutionsOnGridShow = [];
+    this._lastColsConfig = undefined;
     ModuleRegistry.registerModules([
       EnterpriseCoreModule,
       RangeSelectionModule,
@@ -65374,7 +65431,9 @@ 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);
@@ -65392,7 +65451,7 @@ 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({
@@ -65420,8 +65479,39 @@ 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;
@@ -65455,6 +65545,7 @@ 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 = [];
@@ -65463,14 +65554,39 @@ 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[constants.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);
@@ -65480,10 +65596,15 @@ 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) == core.UserInterface.SEARCHPLUS;
+    const descriptionColID = (_b = fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.properties) === null || _b === void 0 ? void 0 : _b[constants.PRESENTATION_COL_ID_PROP_NAME];
+    return isSearchPlus && configVersion < 1 && stateConfig.find(col => col.name === descriptionColID) != undefined;
   }
   getColumnsState() {
     if (this._grid === undefined) {
@@ -65494,7 +65615,7 @@ 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 };
@@ -65544,7 +65665,7 @@ 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 = core.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')) {
@@ -65566,6 +65687,11 @@ 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(constants.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 "";
         }
@@ -65585,6 +65711,7 @@ class AgGridController {
         return this.getFormatterByColumn(params, source);
       },
       cellStyle: this.getStyleByColumn(source),
+      editable: !((_d = source.props) === null || _d === void 0 ? void 0 : _d.has(constants.PRESENTATION_FROM_COL_PROP_NAME))
     });
   }
   setCustomFormatters(customFormatters) {
@@ -65600,8 +65727,11 @@ 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 core.UserInterface.DECIMALNUMBER:
       case core.UserInterface.INTEGERNUMBER:
         cellStyle['text-align'] = 'right';
@@ -65617,7 +65747,7 @@ 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;
@@ -65654,6 +65784,9 @@ class AgGridController {
         return params === null || params === void 0 ? void 0 : params.value;
       }
     }
+    if ((source === null || source === void 0 ? void 0 : source.userInterface) === core.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) === core.UserInterface.DECIMALNUMBER) {
       if (params.value != undefined) {
         const precision = Number(source.props.get('precision')) || 2;
@@ -65827,7 +65960,7 @@ class AgGridController {
     this._gridOptions.api.stopEditing();
   }
   getColumnWidth(cfgColumn) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     if (cfgColumn == undefined) {
       return;
     }
@@ -65839,10 +65972,14 @@ 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) === core.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/cjs/ez-list.cjs.entry.js

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

package/dist/cjs/ez-modal-container.cjs.entry.js

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

package/dist/cjs/ez-modal.cjs.entry.js

@@ -36,7 +36,7 @@ const EzModal = class {
   }
   componentDidLoad() {
     this.observeOpened();
-    new core.KeyboardManager({ propagate: false, element: this._element })
+    new core.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/cjs/ez-popup.cjs.entry.js

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