@sankhyalabs/ezui 5.21.0-dev.2 → 5.21.0-dev.21

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

@@ -15,6 +15,8 @@ export class EzGrid {
   constructor() {
     this._gridController = new AgGridController(false);
     this._messageFilterAppliedSuccess = 'Filtro de coluna aplicado com sucesso!';
+    this._customEditor = new Map();
+    this._customRenders = new Map();
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
     this._showSelectionCounter = false;
@@ -22,6 +24,7 @@ export class EzGrid {
     this._currentPageSelected = undefined;
     this._selectionCount = undefined;
     this._hasLeftButtons = false;
+    this._customFormatters = new Map();
     this.multipleSelection = undefined;
     this.config = undefined;
     this.selectionToastConfig = undefined;
@@ -93,6 +96,69 @@ export class EzGrid {
   async filterColumns(search) {
     return Promise.resolve(this._gridController.getColumnsState().filter(col => matches(col.label, search)));
   }
+  /**
+   * Registra um editor customizado para campos da grade e formulário.
+   */
+  async addCustomEditor(fieldName, customEditor, detailContext) {
+    const newCustomEditor = new Map(this._customEditor);
+    newCustomEditor.set(fieldName, {
+      customEditor,
+      detailContext,
+    });
+    this._customEditor = newCustomEditor;
+    this._gridController.setCellEditors(newCustomEditor);
+  }
+  /**
+   * Registra um render customizado para colunas da grid.
+   */
+  async addGridCustomRender(fieldName, customRender, detailContext) {
+    const newCustomRenders = new Map(this._customRenders);
+    newCustomRenders.set(fieldName, { customRender, detailContext });
+    this._customRenders = newCustomRenders;
+    this._gridController.setCellRenders(newCustomRenders);
+  }
+  /**
+   * Registra um formatador de valores para uma coluna da grid.
+   */
+  async addCustomValueFormatter(columnName, customFormatter) {
+    if (!columnName || !customFormatter) {
+      return;
+    }
+    const newCustomFormatters = new Map(this._customFormatters);
+    newCustomFormatters.set(columnName, customFormatter);
+    this._customFormatters = newCustomFormatters;
+    this._gridController.setCustomFormatters(newCustomFormatters);
+  }
+  /**
+   * Remove o formatador de valores de uma coluna da grid.
+   */
+  async removeCustomValueFormatter(columnName) {
+    if (!columnName) {
+      return;
+    }
+    const newCustomFormatters = new Map(this._customFormatters);
+    newCustomFormatters.delete(columnName);
+    this._customFormatters = newCustomFormatters;
+    this._gridController.setCustomFormatters(newCustomFormatters);
+  }
+  /**
+   * Atualiza linhas da grade.
+   */
+  async refreshSelectedRows() {
+    this._gridController.refreshSelectedRows();
+  }
+  /**
+   * Retorna o formatador customizado da coluna caso exista.
+   */
+  async getCustomValueFormatter(columnName) {
+    return this._customFormatters.get(columnName);
+  }
+  /**
+   * Atribui o foco para a grade.
+   */
+  async setFocus() {
+    this._gridController.setFocus();
+  }
   observeConfig(config) {
     this._gridController.setColumnsState(config === null || config === void 0 ? void 0 : config.columns);
   }
@@ -266,14 +332,10 @@ export class EzGrid {
     (_a = this._gridApi) === null || _a === void 0 ? void 0 : _a.clearRangeSelection();
   }
   getPaginationControl() {
-    if (this._paginationInfo) {
-      const { currentPage, hasMore } = this._paginationInfo;
-      return [
-        h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, h("span", { class: "grid-header__pagination-label" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this._getRemainingPageLabel())),
-        h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium" }, h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })),
-      ];
-    }
-    return null;
+    if (!this._paginationInfo)
+      return null;
+    const { currentPage, hasMore } = this._paginationInfo;
+    return (h("div", { class: "grid-header__container grid-header__pagination", ref: ref => (this._refPaginationControl = ref) }, h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium", ref: (element) => (this._refPaginationLabel = element) }, h("span", { class: "grid-header__pagination-label" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, this._getActualPageLabel()), this._getRemainingPageLabel())), h("div", { id: "grid-pagination-tooltip", ref: (element) => (this._refPaginationLabelTooltip = element), class: "ez-flex ez-margin-right--medium" }, h("ez-button", { size: "small", class: "ez-margin-right--medium", iconName: "chevron-left", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }), h("ez-button", { size: "small", iconName: "chevron-right", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }))));
   }
   componentDidLoad() {
     this._gridController.initDatagrid(this._container, {
@@ -294,7 +356,8 @@ export class EzGrid {
       statusResolver: this.statusResolver,
       useEnterLikeTab: this.useEnterLikeTab,
       recordsValidator: this.recordsValidator,
-      editionIsDisabled: () => !this.canEdit
+      editionIsDisabled: () => !this.canEdit,
+      customFormatters: this._customFormatters
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -389,7 +452,7 @@ export class EzGrid {
   }
   render() {
     var _a;
-    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 grid-header__left-container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container grid-header__pagination", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
+    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 grid-header__left-container" }, h("slot", { name: "leftButtons" })), 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__footer" }, h("slot", { name: "footer" }))));
   }
@@ -612,7 +675,8 @@ export class EzGrid {
       "_isAllSelection": {},
       "_currentPageSelected": {},
       "_selectionCount": {},
-      "_hasLeftButtons": {}
+      "_hasLeftButtons": {},
+      "_customFormatters": {}
     };
   }
   static get events() {
@@ -946,6 +1010,164 @@ export class EzGrid {
           "text": "Usa um argumento para filtrar as colunas po label",
           "tags": []
         }
+      },
+      "addCustomEditor": {
+        "complexType": {
+          "signature": "(fieldName: string, customEditor: ICustomEditor, detailContext?: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ICustomEditor": {
+              "location": "import",
+              "path": "../../utils/customEditor/interfaces/ICustomEditor"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Registra um editor customizado para campos da grade e formul\u00E1rio.",
+          "tags": []
+        }
+      },
+      "addGridCustomRender": {
+        "complexType": {
+          "signature": "(fieldName: string, customRender: ICustomRender, detailContext?: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ICustomRender": {
+              "location": "import",
+              "path": "../../utils/customRender/interfaces/ICustomRender"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Registra um render customizado para colunas da grid.",
+          "tags": []
+        }
+      },
+      "addCustomValueFormatter": {
+        "complexType": {
+          "signature": "(columnName: string, customFormatter: ICustomFormatter) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ICustomFormatter": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Registra um formatador de valores para uma coluna da grid.",
+          "tags": []
+        }
+      },
+      "removeCustomValueFormatter": {
+        "complexType": {
+          "signature": "(columnName: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o formatador de valores de uma coluna da grid.",
+          "tags": []
+        }
+      },
+      "refreshSelectedRows": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Atualiza linhas da grade.",
+          "tags": []
+        }
+      },
+      "getCustomValueFormatter": {
+        "complexType": {
+          "signature": "(columnName: string) => Promise<ICustomFormatter | undefined>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ICustomFormatter": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          },
+          "return": "Promise<ICustomFormatter>"
+        },
+        "docs": {
+          "text": "Retorna o formatador customizado da coluna caso exista.",
+          "tags": []
+        }
+      },
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Atribui o foco para a grade.",
+          "tags": []
+        }
       }
     };
   }

package/dist/collection/components/ez-grid/interfaces/ICustomFormatter.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-grid/interfaces/index.js

@@ -1,3 +1,4 @@
 export * from './ISelection';
 export * from './ISelectionToastConfig';
 export * from './IColumnFilter';
+export * from './ICustomFormatter';

package/dist/collection/components/ez-grid/subcomponents/selection-counter.js

@@ -1,8 +1,9 @@
 import { ElementIDUtils } from "@sankhyalabs/core";
 import { h } from "@stencil/core";
+import { buildSelectAllLabel, buildSelectAllTitle, enableSelectAll, getText } from './utils/selectionCounterUtils';
 export const SelectionCounter = (props) => {
   const { selectionCount, currentPageSelected, allRecordSelected, paginationInfo, canSelectAll, onSelectAll, onSelectPage, onClearAll, onClose } = props;
-  const { total, hasMore } = paginationInfo || {};
+  const { total, hasMore, count } = paginationInfo || {};
   const shouldRenderSelectionButton = () => {
     if ((!allRecordSelected && selectionCount === total) || (allRecordSelected && !hasMore))
       return false;
@@ -11,17 +12,8 @@ export const SelectionCounter = (props) => {
     return !!paginationInfo && (currentPageSelected || allRecordSelected);
   };
   return (h("div", Object.assign({ class: "ez-box ez-box--shadow-small" }, getElementID("ezGridSelectionCounter")), h("div", { class: "ez-flex ez-flex--align-items-center ez-size-width--full ez-padding-horizontal--medium" }, h("div", { class: "ez-flex ez-flex--wrap ez-flex--align-items-baseline ez-flex--justify-center" }, h("label", Object.assign({ innerHTML: getText(selectionCount, allRecordSelected), class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium ez-margin-top--medium" }, getElementID("ezGridSelectionCounter_label"))), h("div", { class: "ez-flex ez-margin-right--medium" }, shouldRenderSelectionButton() &&
-    h("ez-button", Object.assign({ class: "ez-margin-right--medium", label: `Selecionar ${allRecordSelected ? "apenas a página atual" : `todos os ${total} registros`}`, mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))), h("ez-button", Object.assign({ class: "grid__btn-clear", label: "Limpar", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: "Fechar", onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
+    h("ez-button", Object.assign({ title: buildSelectAllTitle(total), enabled: enableSelectAll(total), class: "ez-margin-right--medium", label: buildSelectAllLabel(allRecordSelected, count, total), mode: "link", onClick: allRecordSelected ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allRecordSelected ? "Page" : "All"}`))), h("ez-button", Object.assign({ class: "grid__btn-clear", label: "Limpar Sele\u00E7\u00E3o", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: "Fechar", onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
 };
-function getText(selectionCount, allSelectedRecords) {
-  if (allSelectedRecords) {
-    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
-  }
-  else {
-    const pluralChar = selectionCount > 1 ? "s" : "";
-    return `Há <strong>${selectionCount} registro${pluralChar}</strong> selecionado${pluralChar}.`;
-  }
-}
 function getElementID(sufix) {
   return {
     [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(sufix)

package/dist/collection/components/ez-grid/subcomponents/utils/selectionCounterUtils.js

@@ -0,0 +1,22 @@
+export function enableSelectAll(total) {
+  return total !== undefined;
+}
+export function buildSelectAllLabel(allRecordSelected, count, total) {
+  if (allRecordSelected)
+    return 'Selecionar apenas a página atual';
+  if (total === undefined)
+    return `Carregando todos os ${count} registros`;
+  return `Selecionar todos os ${total} registros`;
+}
+export function buildSelectAllTitle(total) {
+  if (enableSelectAll(total))
+    return '';
+  return 'Aguarde o carregamento para selecionar o registro de todas as páginas';
+}
+export function getText(selectionCount, allSelectedRecords) {
+  if (allSelectedRecords) {
+    return `Todos os <strong>${selectionCount} registros</strong> da grade estão selecionados.`;
+  }
+  const pluralCharacter = selectionCount > 1 ? "s" : "";
+  return `Há <strong>${selectionCount} registro${pluralCharacter}</strong> selecionado${pluralCharacter} na grade.`;
+}

package/dist/collection/components/ez-grid/test/resources/gridDataUnit.js

@@ -0,0 +1,19 @@
+import { DataType, DataUnit, StringUtils } from "@sankhyalabs/core";
+export function getDataUnit() {
+  const dataUnit = new DataUnit('EzGridDU');
+  dataUnit.pageSize = 3;
+  dataUnit.metadata = {
+    name: "exemplo.datagrid",
+    label: "Exemplo data grid",
+    fields: [
+      { name: "PRODUTO", label: "Produto", dataType: DataType.TEXT },
+      { name: "QUANTIDADE", label: "Quantidade", dataType: DataType.NUMBER }
+    ]
+  };
+  dataUnit.records = [
+    { __record__id__: StringUtils.generateUUID(), "PRODUTO": "Mamão", "QUANTIDADE": 1 },
+    { __record__id__: StringUtils.generateUUID(), "PRODUTO": "Mexerica", "QUANTIDADE": 2 }
+  ];
+  dataUnit.selectFirst();
+  return dataUnit;
+}

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

@@ -168,14 +168,18 @@ p {
   display: flex;
   
   /*public*/
-  padding: var(--space--2xs, 8px) var(--space--3xs, 4px);
-  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);
   border-bottom: var(--ez-list__item--border-bottom, none) var(--ez-list__item--border-bottom-color);
 }
 
+.draggable-list li > div {
+  /*public*/
+  padding: var(--space--2xs, 8px) var(--space--3xs, 4px);
+  margin: var(--ez-list__item--margin);
+}
+
 .over {
   /*public*/
   border-top: 1px dashed var(--ez-list__over--border--color);

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

@@ -1,12 +1,7 @@
 import { Host, h } from "@stencil/core";
-import { FloatingManager } from '@sankhyalabs/core';
+import { FloatingManager, KeyboardManager } from '@sankhyalabs/core';
 export class EzModal {
   constructor() {
-    this.handleKeyboardEvent = (ev) => {
-      if ((ev === null || ev === void 0 ? void 0 : ev.key) === "Escape" && this.closeEsc) {
-        this.closeModal();
-      }
-    };
     this.modalSize = undefined;
     this.align = undefined;
     this.heightMode = "regular";
@@ -18,11 +13,9 @@ export class EzModal {
   observeOpened() {
     if (this.opened) {
       this._overlayId = FloatingManager.subscribeOverlayControl(this._modalRef);
-      document.addEventListener("keydown", this.handleKeyboardEvent);
     }
     else {
       FloatingManager.unsubscribeOverlayControl(this._modalRef || this._overlayId);
-      document.removeEventListener("keydown", this.handleKeyboardEvent);
     }
   }
   closeModal() {
@@ -31,6 +24,10 @@ export class EzModal {
   }
   componentDidLoad() {
     this.observeOpened();
+    new KeyboardManager({ propagate: false, element: this._element })
+      .bind("Enter", this.ezModalAction.emit.bind("OK"))
+      .bind("Escape", () => this.closeModal())
+      .bind("Esc", () => this.closeModal());
   }
   componentDidRender() {
     if (this.opened) {
@@ -49,7 +46,7 @@ export class EzModal {
     const scrimType = `modal__screen-${this.scrim}`;
     return (h(Host, null, this.opened
       ?
-        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt) }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, h("slot", null))))
+        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt), tabIndex: -1 }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, h("slot", null))))
       :
         undefined));
   }
@@ -228,8 +225,24 @@ export class EzModal {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "ezModalAction",
+        "name": "ezModalAction",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Representa a intera\u00E7\u00E3o com o usu\u00E1rio.\nOK - Quando o bot\u00E3o \u00E9 acionado\nCANCEL - Quando o bot\u00E3o de cancelar \u00E9 acionado\nCLOSE - Quando o bot\u00E3o de fechar \u00E9 acionado.\nLOAD - Quando o modal \u00E9 carregado (eventualmente pode ser usado para dar foco a um elemento espec\u00EDfico)"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
       }];
   }
+  static get elementRef() { return "_element"; }
   static get watchers() {
     return [{
         "propName": "opened",

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

@@ -7,6 +7,10 @@
   height: 100%;
 }
 
+.ez-modal-container__header-container{
+  outline: none;
+}
+
 .ez-modal-container__header {
   display: flex;
   flex-wrap: nowrap;

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

@@ -12,6 +12,12 @@ export class EzModalContainer {
     this.cancelButtonStatus = undefined;
     this.okButtonStatus = undefined;
   }
+  async handleEzModalAction(event) {
+    var _a;
+    if ((event === null || event === void 0 ? void 0 : event.target) && (event === null || event === void 0 ? void 0 : event.target) === ((_a = this._element) === null || _a === void 0 ? void 0 : _a.parentElement)) {
+      this.closeModal();
+    }
+  }
   cancelIsVisible() {
     return (this.cancelButtonStatus !== ModalButtonStatus.HIDDEN && this.cancelButtonLabel != undefined);
   }
@@ -21,11 +27,15 @@ export class EzModalContainer {
   componentDidLoad() {
     window.requestAnimationFrame(() => {
       this.ezModalAction.emit(ModalAction.LOAD);
+      this._modalRef.focus();
     });
     new KeyboardManager({ propagate: false, element: this._element })
       .bind("Enter", this.ezModalAction.emit.bind(ModalAction.OK))
-      .bind("Escape", this.ezModalAction.emit.bind(ModalAction.CANCEL))
-      .bind("Esc", this.ezModalAction.emit.bind(ModalAction.CANCEL));
+      .bind("Escape", () => this.closeModal())
+      .bind("Esc", () => this.closeModal());
+  }
+  closeModal() {
+    this.ezModalAction.emit("CLOSE");
   }
   focusLast() {
     if (this._okButton == undefined) {
@@ -37,7 +47,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", null, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--large" }, 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))), 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--large" }, 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))), 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() })));
   }
   static get is() { return "ez-modal-container"; }
   static get encapsulation() { return "scoped"; }
@@ -193,4 +203,14 @@ export class EzModalContainer {
         }
       }];
   }
+  static get elementRef() { return "_element"; }
+  static get listeners() {
+    return [{
+        "name": "ezCloseModal",
+        "method": "handleEzModalAction",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }