@sankhyalabs/ezui 5.20.3 → 5.21.0-dev.1

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

@@ -0,0 +1,21 @@
+import { Action } from "@sankhyalabs/core";
+import { DISTINCT_FILTER_NAME_PREFIX, EZ_GRID_LOADING_SOURCE } from "../../../../utils/constants";
+export class DataSourceInterceptor {
+  constructor(controller) {
+    this._controller = controller;
+  }
+  clearColumnFilter(filters) {
+    var _a;
+    return (_a = filters.filter(filter => !filter.name.startsWith(DISTINCT_FILTER_NAME_PREFIX))) !== null && _a !== void 0 ? _a : [];
+  }
+  interceptAction(action) {
+    var _a;
+    if (action.type === Action.LOADING_DATA) {
+      if (EZ_GRID_LOADING_SOURCE !== action.payload.source) {
+        action.payload.filters = ((_a = action.payload) === null || _a === void 0 ? void 0 : _a.filters) !== undefined ? this.clearColumnFilter(action.payload.filters) : action.payload.filters;
+        this._controller.clearFilter();
+      }
+    }
+    return action;
+  }
+}

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

@@ -1,4 +1,3 @@
-import { calcFilterColumnLeftPosition } from '../AgGridUtils';
 export class EzGridCustomHeader {
   init(agParams) {
     var _a;
@@ -35,8 +34,7 @@ export class EzGridCustomHeader {
   }
   onClickFilter() {
     var _a;
-    const iconLeft = (_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
-    this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`, true);
+    this.params.showColumnFilter((_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left);
   }
   configSortIcon() {
     this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';

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

@@ -4,7 +4,7 @@
   grid-template-rows: auto 1fr auto;
   height: 100%;
   width: 100%;
-  
+
   /*public*/
   /*@doc Define a cor de fundo do header do componente.*/
   --ez-grid__header--background-color: var(--background--xlight, #FFF);
@@ -12,6 +12,10 @@
   --ez-grid__selection-counter--z-index: var(--visible, 1);
   /*@doc Define o sombreamento usado como borda.*/
   --ez-grid__container--shadow: 0 0 16px 0 rgb(0 38 111 / 12%);
+  /*@doc Define altura mínima da grid */
+  --ez-grid--min-height: 300px;
+
+  min-height: var(--ez-grid--min-height);
 }
 
 .grid-header {
@@ -92,3 +96,23 @@
   height: 0;
   padding: 0;
 }
+
+.grid-header__pagination{
+  width: 30%;
+  min-width: 100px;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.grid-header__left-container{
+  width: 70%
+}
+
+.grid-header__pagination-label {
+  width: 100%;
+  white-space: nowrap
+}
+
+.overflowed {
+  display: none;
+}

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

@@ -1,15 +1,15 @@
-import { ElementIDUtils, JSUtils, StringUtils, } from '@sankhyalabs/core';
+import { ElementIDUtils, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME, StringUtils, } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
-import { h, Host } from '@stencil/core';
+import { Host, h } from '@stencil/core';
+import { ApplicationUtils } from '../../utils';
 import AgGridController from './controller/ag-grid/AgGridController';
 import { SelectionCounter } from './subcomponents/selection-counter';
-import { ApplicationUtils } from '../../utils';
 import InMemoryFilterColumnDataSource from './utils/InMemoryFilterColumnDataSource';
 const windowInstace = window;
 const matches = (text, filter) => {
-  const normalizedText = StringUtils.replaceAccentuatedCharsLower(text.toLocaleLowerCase());
+  const normalizedText = StringUtils.replaceAccentuatedCharsLower(text === null || text === void 0 ? void 0 : text.toLocaleLowerCase());
   const normalizedFilter = StringUtils.replaceAccentuatedCharsLower(filter.toLocaleLowerCase());
-  return normalizedText.includes(normalizedFilter);
+  return normalizedText === null || normalizedText === void 0 ? void 0 : normalizedText.includes(normalizedFilter);
 };
 export class EzGrid {
   constructor() {
@@ -94,7 +94,15 @@ export class EzGrid {
     return Promise.resolve(this._gridController.getColumnsState().filter(col => matches(col.label, search)));
   }
   observeConfig(config) {
-    this._gridController.setColumnsState(config.columns);
+    this._gridController.setColumnsState(config === null || config === void 0 ? void 0 : config.columns);
+  }
+  updatePaginationTooltip() {
+    if (!this._refPaginationLabelTooltip)
+      return;
+    const alreadyDefined = this._refPaginationLabelTooltip.getAttribute('data-tooltip');
+    if (alreadyDefined) {
+      this._refPaginationLabelTooltip.setAttribute('data-tooltip', this._getPaginationTooltip());
+    }
   }
   onSelectionChange(evt) {
     this._currentPageSelected = evt.detail.selectionHeaderStatus === true;
@@ -144,21 +152,29 @@ export class EzGrid {
     return newConfig;
   }
   positionSelectionCounter() {
-    var _a;
-    if (this._gridSelectionCounter == undefined) {
+    var _a, _b;
+    if (!this._gridSelectionCounter)
       return;
-    }
-    if (this._showSelectionCounter) {
-      const boundingContainer = (_a = this._container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-      if (boundingContainer == undefined) {
-        return;
-      }
-      const limitBottom = boundingContainer.bottom - 30;
-      this._gridSelectionCounter.style.bottom = document.body.clientHeight - limitBottom + 'px';
-    }
-    else {
+    if (!this._showSelectionCounter) {
       this._gridSelectionCounter.style.bottom = '';
+      return;
     }
+    const containerRect = (_a = this._container) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const selectionRect = (_b = this._gridSelectionCounter) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    if (!containerRect || !selectionRect)
+      return;
+    const positionBottom = containerRect.bottom - 30;
+    this._gridSelectionCounter.style.bottom = document.body.clientHeight - positionBottom + 'px';
+    this._gridSelectionCounter.style.left = this.calculatePositionLeft(containerRect, selectionRect);
+  }
+  calculatePositionLeft(containerRect, selectionRect) {
+    let selectionStart = containerRect.left + (containerRect.width / 2);
+    const containerRightEdge = containerRect.left + this._container.clientWidth;
+    const selectionEnd = (selectionStart - (selectionRect.width / 2)) + selectionRect.width;
+    if (selectionEnd > containerRightEdge) {
+      selectionStart = containerRightEdge - (selectionRect.width / 2);
+    }
+    return `${selectionStart}px`;
   }
   setEvents() {
     window.removeEventListener('scroll', this.positionSelectionCounter.bind(this));
@@ -251,11 +267,10 @@ export class EzGrid {
   }
   getPaginationControl() {
     if (this._paginationInfo) {
-      const { firstRecord, lastRecord, total, count, currentPage, hasMore } = this._paginationInfo;
+      const { currentPage, hasMore } = this._paginationInfo;
       return [
-        h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${firstRecord}-${lastRecord}`), total == undefined ? ` de ${count + 1} ou mais` : ` de ${total}`),
-        h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: currentPage > 0, onClick: () => this.previousPage(), label: "P\u00E1gina anterior" }),
-        h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: hasMore, onClick: () => this.nextPage(), label: "Pr\u00F3xima P\u00E1gina" }),
+        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;
@@ -264,16 +279,8 @@ export class EzGrid {
     this._gridController.initDatagrid(this._container, {
       onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
       onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
-      onPaginationChange: (paginationInfo) => {
-        var _a;
-        if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > (paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.currentPage) && this._paginationChangedByKeyboard) {
-          this._gridController.setFocusLastRow();
-        }
-        else {
-          this._gridController.setFocusFirstRow();
-          this._paginationChangedByKeyboard = true;
-        }
-        this._paginationInfo = paginationInfo;
+      onPaginationChange: (paginationInfo, selectFirstRecord) => {
+        this.handlePaginationChange(selectFirstRecord, paginationInfo);
       },
       onPaginationUpdate: (paginationInfo) => {
         this._paginationInfo = paginationInfo;
@@ -299,6 +306,66 @@ export class EzGrid {
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
+    this._initHeaderOverflowWatcher();
+  }
+  handlePaginationChange(selectFirstRecord, paginationInfo) {
+    var _a;
+    if (selectFirstRecord !== false) {
+      if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > (paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.currentPage) && this._paginationChangedByKeyboard) {
+        this._gridController.setFocusLastRow();
+      }
+      else {
+        this._gridController.setFocusFirstRow();
+        this._paginationChangedByKeyboard = true;
+      }
+    }
+    this._paginationInfo = paginationInfo;
+  }
+  _getActualPageLabel() {
+    const { firstRecord, lastRecord } = this._paginationInfo;
+    return `${firstRecord}-${lastRecord}`;
+  }
+  _getRemainingPageLabel() {
+    const { total, count } = this._paginationInfo;
+    return `${total == undefined ? ` de ${count + 1} ou mais` : ` de ${total}`}`;
+  }
+  _getPaginationTooltip() {
+    return this._getActualPageLabel() + this._getRemainingPageLabel();
+  }
+  _initHeaderOverflowWatcher() {
+    this._headerOverflowWatcher = new OverflowWatcher(this.buildOverFlowWatcherParams());
+  }
+  buildOverFlowWatcherParams() {
+    return {
+      element: this._refPaginationControl,
+      callback: this.handleOverFlow.bind(this),
+      notOverFlow: ["grid-pagination-tooltip"]
+    };
+  }
+  handleOverFlow(elementsOverflow) {
+    if (!this._refPaginationLabel)
+      return;
+    if (elementsOverflow.length > 0) {
+      this._hidePaginationDescription();
+    }
+    else {
+      this._showPaginationDescription();
+    }
+  }
+  _hidePaginationDescription() {
+    this._refPaginationLabel.classList.add(OVERFLOWED_CLASS_NAME);
+    this._refPaginationLabelTooltip.setAttribute('data-flow', 'bottom');
+    this._refPaginationLabelTooltip.setAttribute('data-tooltip', this._getPaginationTooltip());
+  }
+  ;
+  _showPaginationDescription() {
+    this._refPaginationLabel.classList.remove(OVERFLOWED_CLASS_NAME);
+    this._refPaginationLabelTooltip.removeAttribute('data-flow');
+    this._refPaginationLabelTooltip.removeAttribute('data-tooltip');
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   componentWillRender() {
     this.configSelectionCounter();
@@ -322,7 +389,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" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter  ez-elevation--4
+    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
           ${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" }))));
   }
@@ -887,6 +954,9 @@ export class EzGrid {
     return [{
         "propName": "config",
         "methodName": "observeConfig"
+      }, {
+        "propName": "_paginationInfo",
+        "methodName": "updatePaginationTooltip"
       }];
   }
   static get listeners() {

package/dist/collection/components/ez-grid/subcomponents/filter-column.js

@@ -13,6 +13,8 @@ export class FilterColumn {
     this.TOP_POSITION_NO_TASKBAR = '32';
     this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN = '20';
     this.DEFAULT_HEIGHT = 430;
+    this.FIX_MARGIN = 60;
+    this.FILTER_COLUMN_WIDTH = 330;
     this.opened = true;
     this.columnName = undefined;
     this.columnLabel = undefined;
@@ -45,15 +47,24 @@ export class FilterColumn {
       await this.ezPopoverElement.show(this.calcTopPosition(), this.calculateLeftPosition(configs));
     }
   }
-  calculateLeftPosition(configs) {
-    if (!configs.fromIcon) {
-      return configs.leftPosition;
+  calculateLeftPosition({ leftPosition, fromIcon }) {
+    const leftPositionCalculated = this.calcFilterColumnLeftPosition(leftPosition);
+    if (!fromIcon) {
+      return `${leftPositionCalculated}px`;
     }
     const difference = this.ezPopoverElement.getBoundingClientRect().left;
-    const leftReference = parseInt(configs.leftPosition.replace('px', ''));
-    const leftResolved = (leftReference + 16) - difference;
+    const leftResolved = (leftPositionCalculated + 16) - difference;
     return `${(leftResolved > 0 ? leftResolved : 0)}px`;
   }
+  calcFilterColumnLeftPosition(leftReference) {
+    var _a, _b;
+    const gridReference = this.ezPopoverElement.closest("ez-grid");
+    const gridLimit = (_a = gridReference.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.right;
+    const popoverDiff = (_b = this.ezPopoverElement.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.left;
+    const maxLeft = gridLimit - (this.FILTER_COLUMN_WIDTH + popoverDiff);
+    const leftInt = leftReference - (this.FIX_MARGIN + popoverDiff);
+    return leftInt > maxLeft ? maxLeft : leftInt;
+  }
   buildIsTextSearch() {
     var _a, _b;
     const userInterface = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) !== null && _b !== void 0 ? _b : UserInterface.SHORTTEXT;

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-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 {
@@ -21,6 +22,10 @@ export class EzModalContainer {
     window.requestAnimationFrame(() => {
       this.ezModalAction.emit(ModalAction.LOAD);
     });
+    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));
   }
   focusLast() {
     if (this._okButton == undefined) {

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 {