@sankhyalabs/ezui 5.20.4 → 5.21.0-dev.10

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

@@ -54,6 +54,7 @@ svg {
   -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"; }
@@ -64,7 +65,7 @@ svg {
 .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-antecipacao:before { content: "\ea0b"; }
 .ez-icon-apps:before { content: "\ea0c"; }
 .ez-icon-arrow-forward:before { content: "\ea0d"; }
 .ez-icon-arrow-upward:before { content: "\ea0e"; }
@@ -91,122 +92,123 @@ svg {
 .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"; }
+.ez-icon-clock-rotate-left:before { content: "\ea26"; }
+.ez-icon-close:before { content: "\ea27"; }
+.ez-icon-cobrar:before { content: "\ea28"; }
+.ez-icon-code:before { content: "\ea29"; }
+.ez-icon-configuration:before { content: "\ea2a"; }
+.ez-icon-content-cut:before { content: "\ea2b"; }
+.ez-icon-copy:before { content: "\ea2c"; }
+.ez-icon-credit_card:before { content: "\ea2d"; }
+.ez-icon-crop:before { content: "\ea2e"; }
+.ez-icon-custom:before { content: "\ea2f"; }
+.ez-icon-delete-file:before { content: "\ea30"; }
+.ez-icon-delete:before { content: "\ea31"; }
+.ez-icon-description:before { content: "\ea32"; }
+.ez-icon-dividir:before { content: "\ea33"; }
+.ez-icon-docx:before { content: "\ea34"; }
+.ez-icon-dot-notification:before { content: "\ea35"; }
+.ez-icon-dots-horizontal:before { content: "\ea36"; }
+.ez-icon-dots-vertical:before { content: "\ea37"; }
+.ez-icon-drag-indicator:before { content: "\ea38"; }
+.ez-icon-dual-chevron-down:before { content: "\ea39"; }
+.ez-icon-dual-chevron-left:before { content: "\ea3a"; }
+.ez-icon-dual-chevron-right:before { content: "\ea3b"; }
+.ez-icon-dual-chevron-up:before { content: "\ea3c"; }
+.ez-icon-edit-file:before { content: "\ea3d"; }
+.ez-icon-edit-table:before { content: "\ea3e"; }
+.ez-icon-edit-time:before { content: "\ea3f"; }
+.ez-icon-edit-value:before { content: "\ea40"; }
+.ez-icon-edit:before { content: "\ea41"; }
+.ez-icon-email:before { content: "\ea42"; }
+.ez-icon-estorno:before { content: "\ea43"; }
+.ez-icon-exe:before { content: "\ea44"; }
+.ez-icon-expand:before { content: "\ea45"; }
+.ez-icon-expandir_card:before { content: "\ea46"; }
+.ez-icon-extrato:before { content: "\ea47"; }
+.ez-icon-eye-off:before { content: "\ea48"; }
+.ez-icon-eye:before { content: "\ea49"; }
+.ez-icon-favorite:before { content: "\ea4a"; }
+.ez-icon-figma:before { content: "\ea4b"; }
+.ez-icon-file-download:before { content: "\ea4c"; }
+.ez-icon-file-upload:before { content: "\ea4d"; }
+.ez-icon-filter:before { content: "\ea4e"; }
+.ez-icon-find-file:before { content: "\ea4f"; }
+.ez-icon-find-page:before { content: "\ea50"; }
+.ez-icon-format-color-fill:before { content: "\ea51"; }
+.ez-icon-generic:before { content: "\ea52"; }
+.ez-icon-gif:before { content: "\ea53"; }
+.ez-icon-graph_bar:before { content: "\ea54"; }
+.ez-icon-handshake:before { content: "\ea55"; }
+.ez-icon-help-inverted:before { content: "\ea56"; }
+.ez-icon-help:before { content: "\ea57"; }
+.ez-icon-hide_menu:before { content: "\ea58"; }
+.ez-icon-home:before { content: "\ea59"; }
+.ez-icon-icons104:before { content: "\ea5a"; }
+.ez-icon-language:before { content: "\ea5b"; }
+.ez-icon-launch:before { content: "\ea5c"; }
+.ez-icon-lightbulb:before { content: "\ea5d"; }
+.ez-icon-list:before { content: "\ea5e"; }
+.ez-icon-location:before { content: "\ea5f"; }
+.ez-icon-lock-outline:before { content: "\ea60"; }
+.ez-icon-lock:before { content: "\ea61"; }
+.ez-icon-menu:before { content: "\ea62"; }
+.ez-icon-mid:before { content: "\ea63"; }
+.ez-icon-minus:before { content: "\ea64"; }
+.ez-icon-money-off:before { content: "\ea65"; }
+.ez-icon-money:before { content: "\ea66"; }
+.ez-icon-more:before { content: "\ea67"; }
+.ez-icon-mp3:before { content: "\ea68"; }
+.ez-icon-mp4:before { content: "\ea69"; }
+.ez-icon-multiple-files:before { content: "\ea6a"; }
+.ez-icon-north-west:before { content: "\ea6b"; }
+.ez-icon-number:before { content: "\ea6c"; }
+.ez-icon-ordem-ascendente:before { content: "\ea6d"; }
+.ez-icon-ordem-descendente:before { content: "\ea6e"; }
+.ez-icon-parcelar:before { content: "\ea6f"; }
+.ez-icon-pause:before { content: "\ea70"; }
+.ez-icon-payments:before { content: "\ea71"; }
+.ez-icon-pdf:before { content: "\ea72"; }
+.ez-icon-play:before { content: "\ea73"; }
+.ez-icon-plus:before { content: "\ea74"; }
+.ez-icon-png:before { content: "\ea75"; }
+.ez-icon-power:before { content: "\ea76"; }
+.ez-icon-pptx:before { content: "\ea77"; }
+.ez-icon-preview:before { content: "\ea78"; }
+.ez-icon-print:before { content: "\ea79"; }
+.ez-icon-push-pin:before { content: "\ea7a"; }
+.ez-icon-rateio:before { content: "\ea7b"; }
+.ez-icon-receipt:before { content: "\ea7c"; }
+.ez-icon-recolher_card:before { content: "\ea7d"; }
+.ez-icon-restore:before { content: "\ea7e"; }
+.ez-icon-return:before { content: "\ea7f"; }
+.ez-icon-sankhya-place:before { content: "\ea80"; }
+.ez-icon-save:before { content: "\ea81"; }
+.ez-icon-search:before { content: "\ea82"; }
+.ez-icon-settings-inverted:before { content: "\ea83"; }
+.ez-icon-settings:before { content: "\ea84"; }
+.ez-icon-share:before { content: "\ea85"; }
+.ez-icon-shield:before { content: "\ea86"; }
+.ez-icon-show_menu:before { content: "\ea87"; }
+.ez-icon-south-east:before { content: "\ea88"; }
+.ez-icon-sync:before { content: "\ea89"; }
+.ez-icon-table:before { content: "\ea8a"; }
+.ez-icon-tag_code:before { content: "\ea8b"; }
+.ez-icon-text:before { content: "\ea8c"; }
+.ez-icon-timeline:before { content: "\ea8d"; }
+.ez-icon-timer-outline:before { content: "\ea8e"; }
+.ez-icon-trending-up:before { content: "\ea8f"; }
+.ez-icon-tune:before { content: "\ea90"; }
+.ez-icon-txt:before { content: "\ea91"; }
+.ez-icon-un-pin:before { content: "\ea92"; }
+.ez-icon-unfold_less:before { content: "\ea93"; }
+.ez-icon-unfold_more:before { content: "\ea94"; }
+.ez-icon-user-circle:before { content: "\ea95"; }
+.ez-icon-warning-outline:before { content: "\ea96"; }
+.ez-icon-warning_triangle:before { content: "\ea97"; }
+.ez-icon-whatshot:before { content: "\ea98"; }
+.ez-icon-xlsx:before { content: "\ea99"; }
+.ez-icon-zip:before { content: "\ea9a"; }
 /*
   END CSS GENERATED BY EZ-DESIGN ICONS
 */

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { KeyboardManager } from "@sankhyalabs/core";
 import ModalAction from "./modal-action";
 import ModalButtonStatus from "./modal-button-status";
 export class EzModalContainer {
@@ -11,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);
   }
@@ -20,7 +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.closeModal())
+      .bind("Esc", () => this.closeModal());
+  }
+  closeModal() {
+    this.ezModalAction.emit("CLOSE");
   }
   focusLast() {
     if (this._okButton == undefined) {
@@ -32,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"; }
@@ -188,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
+      }];
+  }
 }

package/dist/collection/components/ez-number-input/ez-number-input.js

@@ -82,6 +82,11 @@ export class EzNumberInput {
     }
     this._changePending = false;
   }
+  observePrecision() {
+    if (this._textInput) {
+      this.setInputValue();
+    }
+  }
   validateValue(value) {
     return isNaN(value) || value === undefined ? null : value;
   }
@@ -455,6 +460,12 @@ export class EzNumberInput {
       }, {
         "propName": "value",
         "methodName": "observeValue"
+      }, {
+        "propName": "precision",
+        "methodName": "observePrecision"
+      }, {
+        "propName": "prettyPrecision",
+        "methodName": "observePrecision"
       }];
   }
 }

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

@@ -77,17 +77,14 @@
 
 .popup__content {
   box-sizing: border-box;
-  max-height: 100%;
+  height: 100%;
   width: 100%;
-  display: grid;
-  grid-template-rows: auto 1fr;
 }
 
 .popup__expandable-content {
   box-sizing: border-box;
   width: 100%;
-  min-height: 100%;
-  height: 100%;
+  height: calc(100% - 44px);
 }
 
 .popup__header {

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

@@ -1,5 +1,5 @@
 import { Host, h, Fragment } from "@stencil/core";
-import { FloatingManager } from '@sankhyalabs/core';
+import { FloatingManager, KeyboardManager } from '@sankhyalabs/core';
 export class EzPopup {
   constructor() {
     this._sizeClasses = {
@@ -19,6 +19,20 @@ export class EzPopup {
   observeConfig() {
     this.manageOverflow();
   }
+  componentDidLoad() {
+    if (this.opened && this._popupRef) {
+      this._popupRef.focus();
+    }
+    new KeyboardManager({ propagate: false, element: this._element })
+      .bind("Enter", this.ezPopupAction.emit.bind("OK"))
+      .bind("Escape", () => this.closePopup())
+      .bind("Esc", () => this.closePopup());
+  }
+  closePopup() {
+    this.opened = false;
+    this.manageOverflow();
+    this.ezClosePopup.emit();
+  }
   manageOverflow() {
     if (this.opened) {
       window.document.body.style.overflow = "hidden";
@@ -29,23 +43,20 @@ export class EzPopup {
   }
   manageOverlay() {
     if (this.opened) {
-      this._overlayId = FloatingManager.subscribeOverlayControl(this._modalRef);
+      this._overlayId = FloatingManager.subscribeOverlayControl(this._popupRef);
     }
     else {
-      FloatingManager.unsubscribeOverlayControl(this._modalRef || this._overlayId);
+      FloatingManager.unsubscribeOverlayControl(this._popupRef || this._overlayId);
     }
   }
   getGridSize() {
     return this._sizeClasses[this.size] || this._sizeClasses["medium"];
   }
   componentDidRender() {
-    if (this._container) {
-      this._container.focus();
-    }
     this.manageOverlay();
   }
   render() {
-    return (h(Host, null, this.opened ? (h("div", { class: "overlay", ref: ref => this._modalRef = ref }, h("div", { class: "popup col " + this.getGridSize() }, h("div", { class: "popup__container " + (this.heightMode === "auto" ? "popup__container--auto" : ""), ref: elem => this._container = elem, tabIndex: -1 }, h("div", { class: "popup__content" }, h("div", { class: "popup__header " + (this.useHeader ? "popup__header--padding" : "") }, this.useHeader &&
+    return (h(Host, null, this.opened ? (h("div", { class: "overlay", ref: ref => this._popupRef = ref, tabIndex: -1 }, h("div", { class: "popup col " + this.getGridSize() }, h("div", { class: "popup__container " + (this.heightMode === "auto" ? "popup__container--auto" : "") }, h("div", { class: "popup__content" }, h("div", { class: "popup__header " + (this.useHeader ? "popup__header--padding" : "") }, this.useHeader &&
       h(Fragment, null, !!this.ezTitle && h("div", { class: "popup__title" }, this.ezTitle), h("button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezClosePopup.emit(); } }))), h("div", { class: "popup__expandable-content" }, h("slot", null))))))) : undefined));
   }
   static get is() { return "ez-popup"; }
@@ -162,15 +173,31 @@ export class EzPopup {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitido ao clicar no bot\u00E3o de fechar (onEzClosePopup)."
+          "text": "Evento emitido ao clicar no bot\u00E3o de fechar (onEzClosePopup)."
         },
         "complexType": {
           "original": "any",
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "ezPopupAction",
+        "name": "ezPopupAction",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido ao clicar no bot\u00E3o de fechar (ezPopupAction = OK)"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
       }];
   }
+  static get elementRef() { return "_element"; }
   static get watchers() {
     return [{
         "propName": "opened",