@sankhyalabs/ezui 0.0.0-bugfix-dev-kb-67792.0 → 0.0.0-bugfix-dev-KB-68936.0

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

@@ -379,10 +379,15 @@ export default class AgGridController {
       throw new Error('Erro interno: Grid ainda não inicializado.');
     }
   }
-  updateRows() {
+  updateRows(rows) {
     if (this._grid === undefined) {
       throw new Error('Erro interno: Grid ainda não inicializado.');
     }
+    rows === null || rows === void 0 ? void 0 : rows.forEach(row => this.updateRowData(row));
+  }
+  updateRowData(row) {
+    const node = this._gridOptions.api.getRowNode(row[this._idAttribName]);
+    node.setData(Object.assign({}, row));
   }
   selectAll(quietly = false) {
     try {
@@ -491,6 +496,10 @@ export default class AgGridController {
     var _a;
     (_a = this._dataSource) === null || _a === void 0 ? void 0 : _a.setAutoFocus(autoFocus);
   }
+  setEnableGridInsert(enable) {
+    var _a;
+    (_a = this._dataSource) === null || _a === void 0 ? void 0 : _a.setEnableGridInsert(enable);
+  }
   setFocusFirstRow() {
     const firstRow = this._gridOptions.api.getDisplayedRowAtIndex(0);
     if (firstRow) {
@@ -506,9 +515,38 @@ export default class AgGridController {
       this.setFocusOnRow(lastRow.rowIndex);
     }
   }
+  startEditionOnRowByIndex(rowIndex) {
+    const firstCol = this.getFirstEditableColl(rowIndex);
+    this.focusByCollAndRow(firstCol, rowIndex);
+    this.startEdition(rowIndex, firstCol);
+  }
+  startEdition(rowIndex, firstCol) {
+    this._gridOptions.api.clearRangeSelection();
+    this._gridOptions.api.addCellRange({ rowStartIndex: rowIndex, rowEndIndex: rowIndex, columns: [firstCol] });
+    this._gridOptions.api.setFocusedCell(rowIndex, firstCol);
+    this._gridOptions.api.startEditingCell({ rowIndex, colKey: firstCol });
+    const cellEditor = this._gridOptions.api.getCellEditorInstances()[0];
+    if (cellEditor) {
+      cellEditor.focusIn();
+    }
+  }
+  getFirstEditableColl(rowIndex) {
+    const displayedColumns = this._gridOptions.columnApi.getAllDisplayedColumns();
+    return displayedColumns.find(column => this.isColumnEditable(rowIndex, column));
+  }
+  isColumnEditable(rowIndex, column) {
+    if (column.getColDef().headerName === '')
+      return false;
+    const rowId = this._dataUnit.records[rowIndex][this._idAttribName];
+    const rowNode = this._gridOptions.api.getRowNode(rowId);
+    return column.isCellEditable(rowNode);
+  }
   setFocusOnRow(rowIndex) {
     let displayedColumns = this._gridOptions.columnApi.getAllDisplayedColumns();
-    let firstCell = displayedColumns.find(column => column.getColDef().headerName !== '');
+    let firstColl = displayedColumns.find(column => column.getColDef().headerName !== '');
+    this.focusByCollAndRow(firstColl, rowIndex);
+  }
+  focusByCollAndRow(firstCell, rowIndex) {
     this._gridOptions.api.ensureColumnVisible(firstCell);
     this._gridOptions.api.ensureIndexVisible(rowIndex);
     this._gridOptions.api.setFocusedCell(rowIndex, firstCell);
@@ -576,9 +614,11 @@ export default class AgGridController {
     //Existem colunas implícitas que não tem estado, essas colunas são sempre as primeiras.
     //Como vamos reordenar, precisamos considerar o deslocamento provocado por elas.
     const columnsOffset = colDef.length - columns.length;
+    this._gridConfig = state;
     let sort = [];
     state === null || state === void 0 ? void 0 : state.forEach((cfgColumn, index) => {
-      const colWidth = this._gridOptions.columnApi.getColumn(cfgColumn.name).getActualWidth();
+      var _a;
+      const colWidth = (_a = this._gridOptions.columnApi.getColumn(cfgColumn.name)) === null || _a === void 0 ? void 0 : _a.getActualWidth();
       this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + columnsOffset);
       this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, colWidth);
       visibleColumns.push(cfgColumn.name);
@@ -593,7 +633,6 @@ export default class AgGridController {
       state: sort,
       defaultState: { sort: null },
     });
-    this._gridConfig = state;
   }
   getAdaptiveWidth(width) {
     const widthGrid = this._container.clientWidth;

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

@@ -2,6 +2,67 @@ import { Action, ObjectUtils } from '@sankhyalabs/core';
 import { EZ_GRID_LOADING_SOURCE } from "../../../../utils/constants";
 import { DataSourceInterceptor } from "./DataSourceInterceptor";
 export default class DataSource {
+  handleDataChanged(action) {
+    var _a, _b;
+    if (!this._options.enableGridInsert) {
+      this.handleRefresh(action);
+      return;
+    }
+    this.updateGridRowNodes((_b = (_a = action.payload) === null || _a === void 0 ? void 0 : _a.records) !== null && _b !== void 0 ? _b : []);
+  }
+  /**
+   *  Nesse ponto, o registro já se encontra atualizado no DU,
+   *  basta então passar seu valor para que a garde possa atualizar sua linha.
+  */
+  updateGridRowNodes(recordIDList) {
+    const recordsToUpdate = recordIDList === null || recordIDList === void 0 ? void 0 : recordIDList.map(id => this.getRecordById(id));
+    this._controller.updateRows(recordsToUpdate);
+  }
+  getRecordById(recordId) {
+    return this._dataUnit.records.find(record => record['__record__id__'] === recordId);
+  }
+  /**
+   * Em caso de necessidade de reload (isWaitingToReload), eh preciso chamar o dataUnit.gotoPage, pois ele aplica tambem a ordenacao dos registros,
+   * enquanto que o _controller.refresh apenas recarrega os dados na ordem que atua.
+   */
+  handleRefreshOrReload(action) {
+    if (this._dataUnit.isWaitingToReload()) {
+      this.handleReload();
+      return;
+    }
+    this.handleRefresh(action);
+  }
+  handleReload() {
+    this._dataUnit.setWaitingToReload(false);
+    this._dataUnit.gotoPage(0);
+  }
+  handleRefresh(action) {
+    if (this.isSilentChange(action)) {
+      return;
+    }
+    this._controller.refresh();
+  }
+  handleRecordsAdded() {
+    if (this._options.enableGridInsert) {
+      this._controller.refresh();
+      this.focusOnNewRecord();
+    }
+  }
+  focusOnNewRecord() {
+    /**
+     * O SetTimeout eh utilizado pois é preciso aguardar que o novo registro seja renderizado na grade.
+     * Tentamos utilizar a api da grade para adicionar um event listener, porém na versão que utilizamos, não existe
+     * algo que resolva nosso cenário.
+     *
+     * Sugiro no futuro utilizar algo como o applyServerSideTransaction, porém será preciso lidar com os handlers
+     * e callbacks implementados no AgGridController e GridEditionManager.
+     */
+    setTimeout(() => {
+      var _a;
+      const newRowIndex = ((_a = this._dataUnit.records) === null || _a === void 0 ? void 0 : _a.length) - 1;
+      this._controller.startEditionOnRowByIndex(newRowIndex);
+    }, 500);
+  }
   updateLoadedRecords(action) {
     const records = action.payload;
     if ((records === null || records === void 0 ? void 0 : records.length) > 0) {
@@ -53,15 +114,19 @@ export default class DataSource {
             this._options.onPaginationUpdate(this._dataUnit.getPaginationInfo());
           }
           break;
-        case Action.RECORDS_REMOVED:
+        case Action.RECORDS_ADDED:
+          this.handleRecordsAdded();
+          break;
         case Action.DATA_SAVED:
         case Action.EDITION_CANCELED:
+          this.handleRefreshOrReload(action);
+          break;
         case Action.DATA_CHANGED:
         case Action.DATA_RESOLVED:
-          if (this.isSilentChange(action)) {
-            return;
-          }
-          this._controller.refresh();
+          this.handleDataChanged(action);
+          break;
+        case Action.RECORDS_REMOVED:
+          this.handleRefresh(action);
           break;
         case Action.SELECTION_CHANGED:
         case Action.NEXT_SELECTED:
@@ -92,6 +157,9 @@ export default class DataSource {
   setAutoFocus(autoFocus) {
     this._options.autoFocus = autoFocus;
   }
+  setEnableGridInsert(enable) {
+    this._options.enableGridInsert = enable;
+  }
   getRows(params) {
     if (this.needReload(params)) {
       this._lastLoadingParams = params;

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

@@ -36,6 +36,7 @@ export class EzGrid {
     this.recordsValidator = undefined;
     this.canEdit = true;
     this.autoFocus = true;
+    this.enableGridInsert = false;
   }
   /**
    * Aplica a definição de colunas.
@@ -362,6 +363,7 @@ export class EzGrid {
       editionIsDisabled: () => !this.canEdit,
       customFormatters: this._customFormatters,
       autoFocus: this.autoFocus,
+      enableGridInsert: this.enableGridInsert,
       onRefresh: () => {
         if (this.dataUnit) {
           this.setSelection(this.dataUnit.getSelectionInfo());
@@ -454,6 +456,7 @@ export class EzGrid {
   }
   componentDidUpdate() {
     this._gridController.setAutoFocus(this.autoFocus);
+    this._gridController.setEnableGridInsert(this.enableGridInsert);
   }
   getDataSource() {
     var _a;
@@ -694,6 +697,24 @@ export class EzGrid {
         "attribute": "auto-focus",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "enableGridInsert": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Ativa inser\u00E7\u00E3o de registros no modo grade."
+        },
+        "attribute": "enable-grid-insert",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -68,8 +68,7 @@
   border-radius: 12px;
   box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);
   box-sizing: border-box;
-  padding: var(--ez-popup__container--padding);
-  overflow-y: auto;
+  padding: var(--ez-popup__container--padding)
 }
 
 .popup__container--auto {

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

@@ -543,6 +543,7 @@ export class EzSearch {
     this.validateDescriptionValue();
   }
   componentDidLoad() {
+    this._currentValue = this.value;
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
     this.setInputValue(false);
     this._resizeObserver = new ResizeObserver((entries) => {

package/dist/collection/components/ez-sidebar-button/ez-sidebar-button.css

@@ -43,15 +43,19 @@ button {
     box-shadow:  var(--ez-sidebar-button--box-shadow);
     padding: 0;
     cursor: pointer;
+    align-items: center;
 }
 
 span {
     width: var(--ez-sidebar-button--width);
     height: var(--ez-sidebar-button--height);
-    margin: var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--small) var(--ez-sidebar-button--space--medium) 0;
+    margin: var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0;
     background: var(--ez-sidebar-button--background-color--primary);
     border-radius: 0 var(--ez-sidebar-button--border--radius-small) var(--ez-sidebar-button--border--radius-small) 0;
 }
+ez-icon {
+    --ez-icon--color: var(--ez-sidebar-button--background-color--primary);
+}
 
 button:hover {
     box-shadow: var(--ez-sidebar-button--hover--box-shadow);
@@ -59,5 +63,5 @@ button:hover {
 
 button:hover span {
     width: var(--ez-sidebar-button--hover--width);
-    margin: var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) 0;
+    margin: var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0;
 }

package/dist/collection/components/ez-sidebar-button/ez-sidebar-button.js

@@ -11,7 +11,7 @@ export class EzSidebarButton {
     }
   }
   render() {
-    return (h("button", { type: "button", onClick: () => { this.ezClick.emit(); }, ref: (el) => this._button = el }, h("span", null)));
+    return (h("button", { type: "button", onClick: () => { this.ezClick.emit(); }, ref: (el) => this._button = el }, h("span", null), h("ez-icon", { iconName: "chevron-right" })));
   }
   static get is() { return "ez-sidebar-button"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ez-sidebar-navigator/ez-sidebar-navigator.css

@@ -0,0 +1,180 @@
+:host {
+	/* Label Container */
+	/*@doc Define o espaçamento da esquerda do container*/
+	--ez-sidebar-navigator--padding-left: var(--space--xs, 12px);
+	/*@doc Define o espaçamento da direita do container*/
+	--ez-sidebar-navigator--padding-right: var(--space--xs, 12px);
+	/*@doc Define o espaçamento entre o cabeçalho conteúdo e rodapé*/
+	--ez-sidebar-navigator--gap: var(--space--xs, 12px);
+	/*@doc Define a cor de shadow box do container de label*/
+	--ez-sidebar-navigator--box-shadow: var(--shadow, 0px 0px 24px 0px #000);
+	/*@doc Define a cor de fundo do container de label*/
+	--ez-sidebar-navigator--background-color: var(--color--inverted);
+	/*@doc Define o border radius do container de label*/
+	--ez-sidebar-navigator--border-radius: 0px var(--border--radius-medium) var(--border--radius-medium) 0px;
+	/*@doc Força uma altura especifica para o sidebar, o padrão é 100% da tela*/
+	--ez-sidebar-navigator--height: calc(100vh - var(--space--lg, 24px));
+	
+	/*Labels Header */
+	/*@doc Define o espaçamento entre os componente do cabeçalho*/
+	--ez-sidebar-navigator--header-gap: var(--space--xs, 12px);
+
+	/*Labels Footer */
+	/*@doc Define o espaçamento entre os componente do rodadé*/
+	--ez-sidebar-navigator--footer-gap: var(--space--xs, 12px);
+
+
+	 /* Title */
+	/*@doc Define a fonte do título do componente */
+	--ez-ez-sidebar-navigator__title--font-family: var(--font-pattern, "Roboto");
+	/*@doc Define o tamanho da fonte do título do componente.*/
+	--ez-ez-sidebar-navigator__title--font-size: var(--title--medium, 16px);
+	/*@doc Define a cor da fonte do título do componente.*/
+	--ez-ez-sidebar-navigator__title--color: var(--title--primary, #2b3a54);
+	/*@doc Define o peso da fonte do título do componente.*/
+	--ez-ez-sidebar-navigator__title--font-weight: var(--text-weight--extra-large, 700);
+
+}
+
+.inverted {
+	/* private */
+	transform: rotate(180deg);
+}
+
+.ez-sidebar-navigator {
+	/* private */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-ms-flex-direction: column;
+	flex-direction: column;
+	height: var(--ez-sidebar-navigator--height);
+	padding-top: var(--space--xs, 12px);
+	padding-bottom: var(--space--xs, 12px);
+
+	/* public */
+	gap: var(--ez-sidebar-navigator--gap);
+	padding-left: var(--ez-sidebar-navigator--padding-left);
+	padding-right: var(--ez-sidebar-navigator--padding-right);
+	background-color: var(--ez-sidebar-navigator--background-color);
+	-webkit-box-shadow: var(--ez-sidebar-navigator--box-shadow);
+	box-shadow: var(--ez-sidebar-navigator--box-shadow);
+	border-radius: var(--ez-sidebar-navigator--border-radius);
+}
+
+.ez-sidebar-navigator__header {
+	/* private */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	justify-content: space-between;
+	
+	/* public */
+	gap: var(--ez-sidebar-navigator--header-gap);
+}
+
+.ez-sidebar-navigator__content {
+	height: 100%;
+}
+
+.ez-sidebar-navigator__footer {
+	/* private */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	
+	/* public */
+	gap: var(--ez-sidebar-navigator--footer-gap);
+}
+
+.ez-sidebar-navigator__title {
+	/* private */
+	white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+	/* public */
+	font-family: var(--ez-ez-sidebar-navigator__title--font-family);
+	font-size: var(--ez-ez-sidebar-navigator__title--font-size);
+	font-weight: var(--ez-ez-sidebar-navigator__title--font-weight);
+	color: var(--ez-ez-sidebar-navigator__title--color);
+
+}
+
+.ez-sidebar-navigator__end {
+	/* private */
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	margin-left: auto;
+	/* public */
+	gap: var(--ez-sidebar-navigator--gap);
+}
+
+.dynamic {
+	position: absolute;
+	z-index: var(--most-visible	, 4);
+}
+
+.fixed {
+	position: relative;
+}
+
+.hidden {
+	display: none;
+}
+
+.show {
+	animation: fadeIn .1s ease-in-out 1;
+}
+
+@keyframes fadeIn {
+	from {
+		transform: translate(-100%);
+	  }
+}
+
+.sm {
+	/* private */
+	width: 240px;
+}
+
+.md {
+	/* private */
+	width: 280px;
+}
+
+.lg {
+	/* private */
+	width: 320px;
+}
+
+@media screen and (max-width: 991px) {
+	.responsive {
+		/* private */
+		width: 240px;
+	}
+}
+@media screen and (min-width: 992px) {
+	.responsive {
+		/* private */
+		width: 280px;
+	}
+}
+@media screen and (min-width: 1200px) {
+	.responsive {
+		/* private */
+		width: 320px;
+	}
+}