@sankhyalabs/ezui 5.22.0-dev.7 → 5.22.0-dev.71

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

@@ -1,53 +1,144 @@
-import { UserInterface } from "@sankhyalabs/core";
-import { KeyCode } from "ag-grid-community";
-import { RecordValidationProcessor } from "../../../../utils/validators/recordvalidator/RecordValidationProcessor";
-import EzCellEditor from "./editor/EzCellEditor";
-import EzGridCustomCellEditor from "./components/EzGridCustomCellEditor";
-import EzGridCustomCellRender from "./components/EzGridCustomCellRender";
+import { LockManager, LockManagerOperation, UserInterface } from '@sankhyalabs/core';
+import { KeyCode, } from "@ag-grid-community/core";
+import { RecordValidationProcessor } from '../../../../utils/validators/recordvalidator/RecordValidationProcessor';
+import EzCellEditor from './editor/EzCellEditor';
+import EzGridCustomCellEditor from './components/EzGridCustomCellEditor';
+import EzGridCustomCellRender from './components/EzGridCustomCellRender';
+import { DataBinder } from '../../../../utils';
 export default class GridEditionManager {
-  constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled, customEditors, customRenders) {
+  constructor(dataUnit, useEnterLikeTab, recordsValidator, editionIsDisabled, customEditors, customRenders, enableContinuousInsert, enableGridInsert, lockerId) {
     this._dataUnit = dataUnit;
     this._recordValidationProcessor = new RecordValidationProcessor(this._dataUnit, {
       getRequiredFields: () => this.getRequiredFields(),
-      markAsInvalid: () => { },
-      getMessageForField: () => null
+      markAsInvalid: (invalidField, recordId) => { this.pushInvalidCell(invalidField, recordId); },
+      getMessageForField: () => null,
     }, recordsValidator);
     this._useEnterLikeTab = useEnterLikeTab;
     this._editionIsDisabled = editionIsDisabled;
+    this._enableContinuousInsert = enableContinuousInsert;
+    this._enableGridInsert = enableGridInsert;
     this._customEditors = customEditors;
     this._customRenders = customRenders;
+    this._lockerId = lockerId;
   }
   configureGrid(options) {
     this._gridOptions = options;
     options.readOnlyEdit = true;
     options.onCellEditRequest = evt => this.onCellEditRequest(evt);
+    options.onCellEditingStarted = async (evt) => {
+      var _a;
+      if (this._dataUnit.hasNewRecord()) {
+        this.handleCellEditingStartedRowAdd(evt);
+      }
+      else {
+        this._lastCellOpened = this._lastCellEdited = { rowIndex: evt.rowIndex, column: evt.column, rowPinned: undefined };
+      }
+      (_a = this._currentEditLock) === null || _a === void 0 ? void 0 : _a.call(this);
+      this._currentEditLock = LockManager.lock(this._lockerId, LockManagerOperation.TASKBAR_CLICK);
+    };
+    options.onCellEditingStopped = () => {
+      var _a;
+      (_a = this._currentEditLock) === null || _a === void 0 ? void 0 : _a.call(this);
+    };
     options.onCellKeyDown = evt => {
       if (evt.event && evt["column"]) {
         this.onCellKeyDown(evt);
       }
     };
+    options.isRowSelectable = (node) => this.isSelectableRow(node);
+    options.onCellFocused = () => this.lockFocusWhenAddRow();
     return options;
   }
-  proceedAutoSave() {
-    if (!this._dataUnit.isDirty()) {
-      this.saveSuccess();
+  updateCurrentEditorGuiValue(updatedRowValue) {
+    const editorInstances = this._gridOptions.api.getCellEditorInstances();
+    if (!editorInstances || !editorInstances.length)
+      return;
+    const currentEditor = editorInstances[0];
+    const fieldMetadata = currentEditor.getFieldMetadata();
+    const fieldName = fieldMetadata.name;
+    const value = updatedRowValue[fieldName];
+    currentEditor.setGuiValue(value);
+  }
+  lockFocusWhenAddRow() {
+    var _a, _b, _c, _d;
+    const api = this._gridOptions.api;
+    const newFocusCell = api.getFocusedCell();
+    const rowIndex = newFocusCell === null || newFocusCell === void 0 ? void 0 : newFocusCell.rowIndex;
+    const recordId = (_b = (_a = this._dataUnit.getAddedRecords()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.__record__id__;
+    const rowNode = api.getRowNode(recordId);
+    if (!this._dataUnit.hasNewRecord() || rowIndex == (rowNode === null || rowNode === void 0 ? void 0 : rowNode.rowIndex)) {
       return;
     }
-    if (!this._isGridEdition || this._dataUnit.hasNewRecord()) {
+    const lastCell = (_d = (_c = this._lastCellOpened) !== null && _c !== void 0 ? _c : this._lastCellEdited) !== null && _d !== void 0 ? _d : this._lastCellClicked;
+    if ((lastCell === null || lastCell === void 0 ? void 0 : lastCell.rowIndex) < (rowNode === null || rowNode === void 0 ? void 0 : rowNode.rowIndex)) {
       return;
     }
-    const currentRercord = this._dataUnit.getSelectedRecord();
-    if (currentRercord == undefined) {
+    api.clearFocusedCell();
+    if (!lastCell || (rowNode === null || rowNode === void 0 ? void 0 : rowNode.rowIndex) == undefined) {
       return;
     }
-    this._recordValidationProcessor
-      .validate()
-      .then(() => {
-      this._dataUnit.saveData()
-        .then(() => this.saveSuccess())
-        .catch(reason => this.saveFail(reason));
-    })
-      .catch(reason => this.saveFail(reason));
+    lastCell.rowIndex = rowNode === null || rowNode === void 0 ? void 0 : rowNode.rowIndex;
+    this.focusOnCell(lastCell);
+  }
+  handleCellEditingStartedRowAdd(evt) {
+    var _a, _b, _c, _d, _e;
+    const nodeId = (_a = evt.node) === null || _a === void 0 ? void 0 : _a.id;
+    const addedRecordId = (_c = (_b = this._dataUnit.getAddedRecords()) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.__record__id__;
+    if (nodeId == addedRecordId) {
+      this._lastCellOpened = this._lastCellEdited = { rowIndex: evt.rowIndex, column: evt === null || evt === void 0 ? void 0 : evt.column, rowPinned: undefined };
+      return;
+    }
+    evt.api.stopEditing();
+    const rowIndex = (_d = evt.api.getRowNode(addedRecordId)) === null || _d === void 0 ? void 0 : _d.rowIndex;
+    this._lastCellOpened = this._lastCellEdited = { rowIndex: rowIndex, column: (_e = this._lastCellEdited) === null || _e === void 0 ? void 0 : _e.column, rowPinned: undefined };
+  }
+  isSelectableRow(node) {
+    if (!this._dataUnit.hasNewRecord()) {
+      return true;
+    }
+    if (!this._dataUnit.isNewRecord(node.id)) {
+      return false;
+    }
+    return true;
+  }
+  canContinuousInsert() {
+    var _a;
+    return this._enableContinuousInsert && (this._dataUnit.records.length - 1) === ((_a = this._lastCellEdited) === null || _a === void 0 ? void 0 : _a.rowIndex);
+  }
+  async proceedAutoSave() {
+    if (!this._dataUnit.isDirty()) {
+      this.saveSuccess();
+      return true;
+    }
+    const currentRecord = this._dataUnit.getSelectedRecord();
+    if (currentRecord == undefined) {
+      return true;
+    }
+    this.clearInvalidCells(false);
+    try {
+      await this._recordValidationProcessor.validate(true);
+      await this.saveDataUnit();
+      this.saveSuccess();
+      return true;
+    }
+    catch (reason) {
+      this.saveFail(reason);
+      return false;
+    }
+  }
+  async saveDataUnit() {
+    await this._dataUnit.saveData();
+    return true;
+  }
+  async recordValidate() {
+    if (!this._dataUnit.isDirty())
+      return;
+    try {
+      this.clearInvalidCells(false);
+      await this._recordValidationProcessor.validate(false);
+    }
+    catch (error) { }
+    this._gridOptions.api.refreshCells({ force: true });
   }
   navigateByEnterKey(keyboardEvent) {
     const backwards = keyboardEvent.shiftKey;
@@ -71,6 +162,13 @@ export default class GridEditionManager {
     return { ezCellEditor: EzCellEditor };
   }
   verifyClickToEdition(api, cellClicked) {
+    var _a, _b;
+    const selectedRecordID = (_a = this._dataUnit.getSelectedRecord()) === null || _a === void 0 ? void 0 : _a.__record__id__;
+    if (this._dataUnit.hasNewRecord() && selectedRecordID) {
+      const dataUnitRecordIndex = (_b = api.getRowNode(selectedRecordID)) === null || _b === void 0 ? void 0 : _b.rowIndex;
+      if (dataUnitRecordIndex != cellClicked.rowIndex)
+        return;
+    }
     if (this.isSecondClick(cellClicked)) {
       api.startEditingCell({ rowIndex: cellClicked.rowIndex, colKey: cellClicked.column.getColId() });
     }
@@ -80,6 +178,9 @@ export default class GridEditionManager {
     col.cellEditor = 'ezCellEditor';
     col.editable = params => this.canEdit(params);
     col.suppressKeyboardEvent = (params) => {
+      if (params.event.key === KeyCode.ESCAPE && params.editing) {
+        return this._dataUnit.isDirty();
+      }
       return params.event.key === KeyCode.ENTER;
     };
     col.cellEditorSelector = (params) => {
@@ -109,10 +210,21 @@ export default class GridEditionManager {
     return col;
   }
   getRequiredFields() {
-    return this._gridOptions.columnApi.getAllDisplayedColumns().filter(c => {
-      const fieldDefinition = this._dataUnit.getField(c.getColId());
-      return fieldDefinition && fieldDefinition.required;
-    }).map(c => c.getColId());
+    const formRequiredFields = this.getFormRequiredFields();
+    return this._gridOptions.columnApi.getAllDisplayedColumns()
+      .filter(column => {
+      const fieldDefinition = this._dataUnit.getField(column.getColId());
+      return (fieldDefinition && fieldDefinition.required) || formRequiredFields.includes(column.getColId());
+    })
+      .map(column => column.getColId());
+  }
+  getFormRequiredFields() {
+    const formRequiredFields = [];
+    const dataBinders = DataBinder.getDataBindersByDataUnit(this._dataUnit);
+    dataBinders.forEach(dataBinder => {
+      formRequiredFields.push(...dataBinder.getFormRequiredFields());
+    });
+    return formRequiredFields;
   }
   saveSuccess() {
     var _a;
@@ -125,18 +237,20 @@ export default class GridEditionManager {
     this._isGridEdition = false;
   }
   saveFail(reason) {
-    this.focusOnCell(this._lastCellEdited);
+    var _a;
+    this.focusOnCell((_a = this._lastCellOpened) !== null && _a !== void 0 ? _a : this._lastCellEdited);
     this._isGridEdition = false;
     if (reason) {
-      Promise.reject(reason);
+      throw reason;
     }
   }
   focusOnCell(cell) {
+    var _a;
     if (cell == undefined) {
       return;
     }
     const { rowIndex, column } = cell;
-    this._gridOptions.api.getDisplayedRowAtIndex(rowIndex).setSelected(true, true);
+    (_a = this._gridOptions.api.getDisplayedRowAtIndex(rowIndex)) === null || _a === void 0 ? void 0 : _a.setSelected(true, true);
     this._gridOptions.api.clearRangeSelection();
     this._gridOptions.api.addCellRange({ rowStartIndex: rowIndex, rowEndIndex: rowIndex, columns: [column] });
     this._gridOptions.api.startEditingCell({ colKey: column.getColId(), rowIndex });
@@ -176,9 +290,10 @@ export default class GridEditionManager {
       }
     }
     else {
+      const actualRowIndex = rowIndex;
       rowIndex = rowIndex + 1;
       if (rowIndex >= this._dataUnit.records.length) {
-        rowIndex = 0;
+        rowIndex = !this._enableGridInsert ? 0 : actualRowIndex;
       }
     }
     this._targetEditionCell = new TargetEdition(rowIndex, column, true);
@@ -191,6 +306,9 @@ export default class GridEditionManager {
     this.moveEditionVertically(api, 1);
   }
   moveEditionVertically(api, offset) {
+    if (this._dataUnit.hasNewRecord() && this._isGridEdition) {
+      return;
+    }
     const editionCell = api.getEditingCells()[0];
     if (!editionCell) {
       return;
@@ -235,28 +353,87 @@ export default class GridEditionManager {
     return true;
   }
   onCellEditRequest(event) {
-    const fieldName = event.colDef.field;
+    var _a;
     const value = event.newValue;
-    if (event.oldValue != value) {
-      if (value instanceof Promise) {
-        const fieldDescriptor = this._dataUnit.getField(event.colDef.colId);
-        event.node.setData(Object.assign(Object.assign({}, event.data), { [fieldName]: (fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.userInterface) === UserInterface.SEARCH ? value : event.oldValue }));
-        value.then(resolved => event.node.setData(Object.assign(Object.assign({}, event.data), { [fieldName]: resolved })));
-      }
-      else {
-        event.node.setData(Object.assign(Object.assign({}, event.data), { [fieldName]: value }));
-      }
+    if (event.oldValue == value) {
+      (_a = this._currentEditLock) === null || _a === void 0 ? void 0 : _a.call(this);
+      return;
+    }
+    if (value instanceof Promise) {
+      this.handlePromiseValue(event, value);
+      return;
+    }
+    this.updateCellValue(event, value);
+  }
+  async handlePromiseValue(event, value) {
+    const fieldName = event.colDef.field;
+    const fieldDescriptor = this._dataUnit.getField(event.colDef.colId);
+    const initialValue = (fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.userInterface) === UserInterface.SEARCH ? value : event.oldValue;
+    event.node.setData(Object.assign(Object.assign({}, event.data), { [fieldName]: initialValue }));
+    const resolved = await value;
+    return this.updateCellValue(event, resolved);
+  }
+  updateCellValue(event, newValue) {
+    var _a;
+    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);
+    if (event.oldValue !== newValue) {
       this._isGridEdition = true;
-      this._dataUnit.setFieldValue(fieldName, value, [event.data.__record__id__]);
+      this._dataUnit.setFieldValue(fieldName, newValue, [event.data.__record__id__], { suppressCreateNewRecord: true });
       this._lastCellEdited = { rowIndex: event.rowIndex, column: event.column, rowPinned: undefined };
     }
   }
   setCellEditors(customEditors) {
+    var _a;
     this._customEditors = customEditors;
+    (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.api.stopEditing();
   }
   setCellRenders(customRenders) {
     this._customRenders = customRenders;
   }
+  pushInvalidCell(invalidField, recordId) {
+    this._invalidCells.push({ field: invalidField, recordId });
+    this._nextInvalidCell = this._invalidCells[0];
+  }
+  getInvalidCells() {
+    return this._invalidCells;
+  }
+  getNextInvalidCell() {
+    return this._nextInvalidCell;
+  }
+  async processContinuousInsert() {
+    if (!this.canContinuousInsert())
+      return;
+    this._dataUnit.addRecord();
+  }
+  clearInvalidCells(stopEdition) {
+    this._invalidCells = [];
+    this._nextInvalidCell = undefined;
+    if (stopEdition) {
+      this._isGridEdition = false;
+    }
+  }
+  setEnableContinuousInsert(enable) {
+    this._enableContinuousInsert = enable;
+  }
+  hasInvalidField(fieldName, recordId) {
+    if (!this.hasInvalidCell())
+      return false;
+    this._nextInvalidCell = this._invalidCells[0];
+    const containsFieldName = this._nextInvalidCell.field.name === fieldName;
+    const containsRecordId = this._nextInvalidCell.recordId === recordId;
+    return containsFieldName && containsRecordId;
+  }
+  hasInvalidCell() {
+    var _a, _b, _c;
+    const hasInvalidCell = ((_a = this._invalidCells) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    const hasField = (_b = this._invalidCells) === null || _b === void 0 ? void 0 : _b.filter(invalidCell => { invalidCell.field; });
+    const hasRecordId = (_c = this._invalidCells) === null || _c === void 0 ? void 0 : _c.filter(invalidCell => { invalidCell.recordId; });
+    if (!hasInvalidCell || !hasField || !hasRecordId)
+      return false;
+    return true;
+  }
 }
 class TargetEdition {
   constructor(rowIndex, column, backwards) {

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

@@ -1,6 +1,8 @@
 import { HTMLBuilder } from "@sankhyalabs/core";
 import { CustomEditorSource } from "../../../../../utils/customEditor/interfaces/ICustomEditor";
 import EzCellEditor from "../editor/EzCellEditor";
+import { getViewPortHeight } from "../editor/GridEditorUtils";
+import FocusResolver from "../../../../../utils/FocusResolver";
 export default class EzGridCustomCellEditor extends EzCellEditor {
   init(params) {
     var _a, _b;
@@ -11,6 +13,8 @@ export default class EzGridCustomCellEditor extends EzCellEditor {
     this._defaultGui = this.getDefaultGui();
     const fieldMetadata = super.getFieldMetadata();
     this._params = {
+      cellPossition: getViewPortHeight(params.eGridCell),
+      eGridCell: params.eGridCell,
       value: params.value,
       charPress: params.charPress,
       currentEditor: this._defaultGui,
@@ -48,12 +52,24 @@ export default class EzGridCustomCellEditor extends EzCellEditor {
       const element = HTMLBuilder.parseElement(editorElement);
       return element;
     }
+    this._customGui = editorElement;
     return editorElement;
   }
   setValue(value) {
     this._value = value;
   }
   getValue() {
+    var _a, _b;
+    if ((_a = this._customGui) === null || _a === void 0 ? void 0 : _a.getValue)
+      return this._customGui.getValue();
+    if ((_b = this._customGui) === null || _b === void 0 ? void 0 : _b.hasAttribute('value'))
+      return this._customGui.value;
     return this._value;
   }
+  afterGuiAttached() {
+    this.focusIn();
+  }
+  focusIn() {
+    FocusResolver.resolveFocus(this._customGui);
+  }
 }

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

@@ -44,6 +44,14 @@ export default class EzCellEditor {
   getValue() {
     return this._gui.valueGetter != undefined ? this._gui.valueGetter() : this._gui.value;
   }
+  setGuiValue(value) {
+    if (this._gui.valueSetter != undefined) {
+      this._gui.valueSetter(value);
+    }
+    else {
+      this._gui.value = value;
+    }
+  }
   isPopup() {
     return this._gui.isPopUp;
   }

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

@@ -17,7 +17,9 @@ export const buildComboBox = ({ required, props, eGridCell }) => {
         mode="slim"
     />`);
   combo.options = options;
+  combo.stopPropagateEnterKeyEvent = true;
   combo.listOptionsPosition = { verticalPosition: 29, bottomLimit: getViewPortHeight(eGridCell), hardPosition: true };
+  combo.autoFocus = true;
   return combo;
 };
 export const buildSwitch = (fieldMetadata) => {

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

@@ -7,6 +7,7 @@ export const buildDate = () => {
             data-is-fixed="true"
         />`);
   dateInput.valueGetter = () => dateInput.getValueAsync();
+  dateInput.autoFocus = true;
   return dateInput;
 };
 export const buildTime = ({ readOnly }) => {

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

@@ -17,5 +17,6 @@ function buildNumeric(readOnly, precision, prettyPrecision) {
         mode="slim"
     />`);
   input.valueGetter = () => input.getValueAsync();
+  input.autoFocus = true;
   return input;
 }

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

@@ -1,6 +1,8 @@
 import { ApplicationContext, HTMLBuilder } from '@sankhyalabs/core';
 import { getViewPortHeight } from '../GridEditorUtils';
+import { StringUtils } from "@sankhyalabs/core";
 export const buildSearch = ({ name, required, readOnly, eGridCell, dataUnit }) => {
+  var _a;
   const ezSearch = HTMLBuilder.parseElement(`<ez-search
           class="ez-grid grid_editor"
           mode="slim"
@@ -8,9 +10,14 @@ export const buildSearch = ({ name, required, readOnly, eGridCell, dataUnit }) =
           enabled=${!readOnly}
     />`);
   const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
+  const metadata = dataUnit.getField(name);
   ezSearch.optionLoader = (argument) => loader(argument, name, dataUnit);
-  ezSearch.fromGrid = true;
+  ezSearch.ensureClearButtonVisible = true;
+  ezSearch.suppressPreLoad = true;
   ezSearch.listOptionsPosition = { verticalPosition: 29, bottomLimit: getViewPortHeight(eGridCell), hardPosition: true };
+  ezSearch.stopPropagateEnterKeyEvent = true;
+  ezSearch.ignoreLimitCharsToSearch = StringUtils.getBooleanValue((_a = metadata === null || metadata === void 0 ? void 0 : metadata.properties) === null || _a === void 0 ? void 0 : _a.ignoreLimitCharsToSearch);
+  ezSearch.autoFocus = true;
   ezSearch.valueGetter = () => ezSearch.getValueAsync();
   return ezSearch;
 };

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

@@ -2,12 +2,14 @@ import { HTMLBuilder } from "@sankhyalabs/core";
 const MINIMIUM_WIDTH_TEXTAREA = 210;
 const PADDING_VALUE_TEXTAREA = 12;
 export const buildTextInput = ({ name, contextName }) => {
-  return HTMLBuilder.parseElement(`<ez-text-input
+  const textInput = HTMLBuilder.parseElement(`<ez-text-input
         class="ez-grid grid_editor"
         data-field-name=${name}
         data-context-name=${contextName}
         mode="slim"
     />`);
+  textInput.autoFocus = true;
+  return textInput;
 };
 export const buildTextAreaInput = ({ eGridCell, editionManager }) => {
   const element = HTMLBuilder.parseElement(`<ez-text-area
@@ -17,6 +19,7 @@ export const buildTextAreaInput = ({ eGridCell, editionManager }) => {
   element.addEventListener('keydown', event => handlePressEnterEvent(event, element, editionManager));
   setElementInitialWidth(eGridCell, element);
   element.isPopUp = true;
+  element.autoFocus = true;
   return element;
 };
 function setElementInitialWidth(eGridCell, element) {

package/dist/collection/components/ez-grid/controller/ag-grid/test/constants/GridEditionMock.js

@@ -36,5 +36,7 @@ export function buildOptions(dataUnit) {
     serverURL: '',
     statusResolver: {},
     useEnterLikeTab: true,
+    enableContinuousInsert: false,
+    enableGridInsert: false,
   });
 }

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

@@ -11,9 +11,19 @@
   /*@doc Define o z-index do componente selection counter.*/
   --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%);
+  --ez-grid__container--shadow: var(--shadow);
   /*@doc Define altura mínima da grid */
   --ez-grid--min-height: 300px;
+  /*@doc Define o outline usado como borda.*/
+  --ez-grid__container--shadow--outline: var(--shadow--outline) var(--color--strokes);
+  /*@doc Define a sombra do header.*/
+  --ez-grid__header--shadow: var(--shadow--xsmall);
+  /*@doc Define o outline usado como borda do header.*/
+  --ez-grid__header--shadow--outline: var(--shadow--outline) var(--color--strokes);
+  /*@doc Define o outline do header.*/
+  --ez-grid__header--outline: none;
+  /*@doc Define a borda do header.*/
+  --ez-grid__header--border: none;
 
   min-height: var(--ez-grid--min-height);
 }
@@ -27,6 +37,18 @@
   background-color: var(--ez-grid__header--background-color, #FFF);
 }
 
+.grid-header.shadow-mode {
+  box-shadow: var(--ez-grid__header--shadow);
+  border: var(--ez-grid__header--border);
+  outline: var(--ez-grid__header--outline);
+}
+
+.grid-header.outline-mode {
+  box-shadow: var(--ez-grid__header--shadow--outline);
+  border: var(--ez-grid__header--border);
+  outline: var(--ez-grid__header--outline);
+}
+
 .grid__container {
   /*private*/
   padding-top: 15px;
@@ -38,6 +60,13 @@
   background-color: var(--ez-grid__header--background-color);
 }
 
+.grid__container.outline-mode {
+  /*public*/
+  box-shadow: var(--ez-grid__container--shadow--outline);
+  border: none;
+  outline: none;
+}
+
 .grid-header__popover {
   position: relative;
   top: var(--space--sm, 16px);
@@ -99,14 +128,8 @@
 }
 
 .grid-header__pagination{
-  width: 30%;
-  min-width: 100px;
   justify-content: flex-end;
-  flex-wrap: wrap;
-}
-
-.grid-header__left-container{
-  width: 70%
+  flex-wrap: nowrap;
 }
 
 .grid-header__pagination-label {
@@ -117,3 +140,19 @@
 .overflowed {
   display: none;
 }
+
+.pagination-contracted {
+  width: 100px;
+}
+
+.pagination-expanded{
+  min-width: 150px;
+}
+
+.left__header-contracted {
+  width: calc(100% - 100px);
+}
+
+.left__header-expanded{
+  flex-grow: 1;
+}