@sankhyalabs/ezui 1.2.0-beta.8 → 2.0.0

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

@@ -1,14 +1,15 @@
 import { Grid as EnterpriseGrid, LicenseManager } from "ag-grid-enterprise";
 import { Grid } from "ag-grid-community";
+import { ApplicationContext, DataType, SortMode, UserInterface, NumberUtils, StringUtils } from "@sankhyalabs/core";
 import gridTerms from "./i18n/pt-BR.js";
 import getHeaderColumnTemplate from "./template/HeaderColumnTemplate.js";
 import DataSource from "./DataSource";
-import { ApplicationContext, DataType, SortMode, UserInterface } from "@sankhyalabs/core";
-import { NumberUtils, StringUtils } from "@sankhyalabs/core";
+import { CellRenderer } from "./components/cellRenderer";
 export default class AgGridController {
   constructor(enterprise) {
     this.DEFAULT_ROW_HEIGHT = 30;
     this.CHECK_BOX_COL_ID = "checkBoxColumn";
+    this.STATUS_COL_ID = "statusColumn";
     this.RECORD_ARCHIVE_COL_ID = "__RECORD_ARCHIVE__";
     this.BLOCK_LOAD_DEBOUNCE = 400;
     this._menuItems = [];
@@ -38,6 +39,7 @@ export default class AgGridController {
       this._doubleClickCallBack = options.onDoubleClick;
       this._multipleSelection = options.allowMultipleSelection;
       this._dataUnit = options.dataUnit;
+      this._statusResolver = options.statusResolver;
       if (this._dataUnit) {
         this._dataUnit.sortingProvider = this;
       }
@@ -61,7 +63,11 @@ export default class AgGridController {
           }));
           return items;
         },
-        getRowHeight: this.getRowHeight.bind(this)
+        getRowHeight: this.getRowHeight.bind(this),
+        defaultColDef: {
+          headerClass: "ez-grid__cell-header",
+          cellClass: "ez-grid__cell-body"
+        }
       };
       this.setOptionsEvents(this._gridOptions);
       this.setOptionsSupress(this._gridOptions);
@@ -173,7 +179,29 @@ export default class AgGridController {
         suppressMovable: true,
         suppressAutoSize: true,
         suppressMenu: true,
-        lockPosition: true
+        lockPosition: true,
+        pinned: true
+      });
+    }
+    if (this._statusResolver != undefined) {
+      newColDefs.push({
+        colId: this.STATUS_COL_ID,
+        headerName: "",
+        checkboxSelection: false,
+        headerCheckboxSelection: false,
+        width: 28,
+        suppressMovable: true,
+        suppressAutoSize: true,
+        suppressMenu: true,
+        lockPosition: true,
+        pinned: true,
+        cellRenderer: CellRenderer,
+        cellRendererParams: {
+          statusResolver: this._statusResolver
+        },
+        cellStyle: {
+          "text-align": "center"
+        }
       });
     }
     cols.forEach(c => {
@@ -189,7 +217,7 @@ export default class AgGridController {
       throw new Error("Erro interno: Grid ainda não inicializado.");
     }
     const colDef = this._gridOptions.columnApi.getAllColumns();
-    return colDef.filter(c => c.getColId() !== "checkBoxColumn").map(c => {
+    return colDef.filter(c => ![this.CHECK_BOX_COL_ID, this.STATUS_COL_ID].includes(c.getColId())).map(c => {
       const def = c.getColDef();
       const colDef = { name: def.field, label: def.headerName };
       this.conditionalSet(colDef, "sortable", def.sortable);
@@ -210,7 +238,7 @@ export default class AgGridController {
     let visibleColumns = [];
     let sort = [];
     state.forEach((cfgColumn, index) => {
-      this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + 1);
+      this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + 2);
       this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, cfgColumn.width);
       visibleColumns.push(cfgColumn.name);
       if (cfgColumn.ascending !== undefined) {
@@ -244,7 +272,7 @@ export default class AgGridController {
       props.set('sortable', def.sortable);
       this.conditionalSet(colState, "props", props);
       return colState;
-    }).filter(c => c.name !== "__SELECTION__");
+    }).filter(c => c.name !== "__SELECTION__" && c.name !== this.STATUS_COL_ID);
   }
   getSelection() {
     return this._gridOptions.api.getSelectedRows();
@@ -258,7 +286,7 @@ export default class AgGridController {
         term,
         fields: this._gridOptions.columnApi
           .getColumns()
-          .filter(col => col.isVisible() && ![this.CHECK_BOX_COL_ID, this.RECORD_ARCHIVE_COL_ID].includes(col.getColId()))
+          .filter(col => col.isVisible() && ![this.CHECK_BOX_COL_ID, this.STATUS_COL_ID, this.RECORD_ARCHIVE_COL_ID].includes(col.getColId()))
           .map(col => col.getColId())
       };
       this._dataSource.quickFilter = quickFilter;
@@ -294,25 +322,30 @@ export default class AgGridController {
       cellStyle: this.getStyleByColumn(source)
     };
   }
+  getInitCellStyle() {
+    return {
+      "line-height": (this.getRowHeight() - 1) + "px"
+    };
+  }
   getStyleByColumn(source) {
-    let cellStyle = {};
+    let cellStyle = this.getInitCellStyle();
     switch (source === null || source === void 0 ? void 0 : source.userInterface) {
       case UserInterface.DECIMALNUMBER:
       case UserInterface.INTEGERNUMBER:
-        cellStyle["justify-content"] = "right";
+        cellStyle["text-align"] = "right";
         break;
       case UserInterface.DATE:
       case UserInterface.DATETIME:
       case UserInterface.TIME:
-        cellStyle["justify-content"] = "center";
+        cellStyle["text-align"] = "center";
         break;
       default:
-        cellStyle["justify-content"] = "left";
+        cellStyle["text-align"] = "left";
     }
     return cellStyle;
   }
   getFormatterByColumn(params, source) {
-    var _a, _b;
+    var _a;
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === "OPTIONSELECTOR" && source.options) {
       const prop = source === null || source === void 0 ? void 0 : source.options;
       let options;
@@ -340,8 +373,11 @@ export default class AgGridController {
       }
     }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.SEARCH) {
-      if (params.value != undefined) {
-        return ((_a = params === null || params === void 0 ? void 0 : params.value) === null || _a === void 0 ? void 0 : _a.value) + " - " + ((_b = params === null || params === void 0 ? void 0 : params.value) === null || _b === void 0 ? void 0 : _b.label);
+      if (((_a = params === null || params === void 0 ? void 0 : params.value) === null || _a === void 0 ? void 0 : _a.value) != undefined) {
+        return params.value.value + " - " + params.value.label;
+      }
+      else {
+        return params === null || params === void 0 ? void 0 : params.value;
       }
     }
     if ((source === null || source === void 0 ? void 0 : source.userInterface) === UserInterface.DECIMALNUMBER) {

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

@@ -0,0 +1,31 @@
+export class CellRenderer {
+  constructor() {
+    this._eGui = undefined;
+  }
+  init(params) {
+    this.renderStatus(params);
+  }
+  refresh(params) {
+    this.renderStatus(params);
+    return true;
+  }
+  destroy() {
+    this._eGui = undefined;
+  }
+  getGui() {
+    return this._eGui;
+  }
+  renderStatus(params) {
+    const statusResolver = params === null || params === void 0 ? void 0 : params.statusResolver;
+    if (statusResolver != undefined) {
+      const statusKey = Object.keys(statusResolver)[0];
+      const statusValues = statusResolver[statusKey];
+      const value = params === null || params === void 0 ? void 0 : params.data[statusKey];
+      const color = statusValues != undefined && value != undefined && statusValues[value];
+      this._eGui = document.createElement('div');
+      this._eGui.innerHTML = `
+                <span class="ez-grid__cell-status" style="background-color: ${color || ""};"></span>
+            `;
+    }
+  }
+}

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

@@ -134,7 +134,8 @@ export class EzGrid {
       },
       allowMultipleSelection: this.multipleSelection,
       serverURL: this.serverUrl,
-      dataUnit: this.dataUnit
+      dataUnit: this.dataUnit,
+      statusResolver: this.statusResolver
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -167,7 +168,7 @@ export class EzGrid {
     this._gridController.setColumnsState(config.columns);
     this.closeGridConfig();
   }
-  closeGridConfig() {
+  async closeGridConfig() {
     this._popUpGridConfig = false;
   }
   async openGridConfig() {
@@ -267,7 +268,27 @@ export class EzGrid {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Reposit\u00F3rio de dados, controla a manipula\u00E7\u00E3o dos dados."
+      }
+    },
+    "statusResolver": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IStatusResolver",
+        "resolved": "IStatusResolver",
+        "references": {
+          "IStatusResolver": {
+            "location": "import",
+            "path": "./controller/EzGridController"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Configura\u00E7\u00E3o do valor da coluna de status.\nExemplo: { \"RECDESP\": { \"-1\" : \"#BD0025\", \"1\" : \"#157A00\" } }"
       }
     }
   }; }
@@ -537,6 +558,22 @@ export class EzGrid {
         "tags": []
       }
     },
+    "closeGridConfig": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "openGridConfig": {
       "complexType": {
         "signature": "() => Promise<void>",

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

@@ -11,14 +11,20 @@
     /*@doc Define o espaçamento utilizado à esquerda do botão de fechar do componente.*/
     --ez-grid-config__button-close--padding-left: var(--space--medium, 12px);
 
-    /*@doc Define o estilo da fonte utilizada para o subtitulo do componente.*/
-    --ez-grid-config__subtitle--font-family: var(--font-pattern, "Sora");
+    /*@doc Define a cor do texto utilizado para o titulo do componente.*/
+    --snk-grid-config__title--color: var(--title--primary, #2B3A54);
 
     /*@doc Define o estilo da fonte utilizada para o titulo do componente.*/
-    --ez-grid-config__title--font-family: var(--font-pattern, "Sora");
+    --ez-grid-config__title--font-family: var(--font-pattern, "Roboto");
+
+    /*@doc Define o tamanho da fonte utilizada para o titulo do componente.*/
+    --ez-grid-config__title--font-size: var(--title--large, 20px);
 
     /*@doc Define o peso do texto utilizado para o titulo do componente.*/
-    --ez-grid-config__title--font-weight: var(--text-weight--large, 700);
+    --ez-grid-config__title--font-weight: var(--text-weight--extra-large, 700);
+
+    /*@doc Define o estilo da fonte utilizada para o subtitulo do componente.*/
+    --ez-grid-config__subtitle--font-family: var(--font-pattern, "Roboto");
 
     /*@doc Define o tamanho da fonte utilizada para o subtitulo do componente.*/
     --ez-grid-config__subtitle--font-size: var(--text--medium, 14px);
@@ -27,13 +33,16 @@
     --ez-grid-config__scrollbar--width: var(--space--medium, 12px);
 
     /*@doc Define a cor da barra de rolagem do componente.*/
-    --ez-grid-config__scrollbar--background-color: var(--text--primary, #626e82);
+    --ez-grid-config__scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
+  
+    /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+    --ez-grid-config__scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
 
     /*@doc Define o raio da borda da barra de rolagem do componente.*/
-    --ez-grid-config__scrollbar--border-radius: var(--border--radius-medium, 12px);
+    --ez-grid-config__scrollbar--border-radius: var(--border--radius-small, 6px);
 
     /* @doc Define o estilo do texto do grupo da lista. */
-    --ez-grid-config__group--font-family: var(--font-pattern, "Sora");
+    --ez-grid-config__group--font-family: var(--font-pattern, "Roboto");
 
     /* @doc Define o tamanho do texto do grupo da lista. */
     --ez-grid-config__group--font-size: var(--text--medium, 14px);
@@ -82,13 +91,6 @@ ez-list {
     display: none;
 }
 
-.grid-config__main {
-    overflow-y: auto;
-
-    /*public*/
-    padding-right: var(--ez-grid-config__main--padding-right);
-}
-
 .tabselector-container {
     /*public*/
     padding: var(--ez-grid-config__tabselector-container--padding) 0;
@@ -106,13 +108,6 @@ ez-list {
     width: 100%;
 }
 
-.subtitle {
-    /*public*/
-    font-family: var(--ez-grid-config__subtitle--font-family);
-    font-size: var(--ez-grid-config__subtitle--font-size);
-    color: var(--text--primary);
-}
-
 .title {
     display: flex;
     margin: 0;
@@ -121,29 +116,45 @@ ez-list {
     text-align: left;
 
     /*public*/
-    color: var(--title--primary);
+    color: var(--snk-grid-config__title--color);
+    font-size: var(--ez-grid-config__title--font-size);
     font-family: var(--ez-grid-config__title--font-family);
-    font-size: var(--title--large);
     font-weight: var(--ez-grid-config__title--font-weight);
 }
 
+.subtitle {
+    /*public*/
+    color: var(--text--primary);
+    font-size: var(--ez-grid-config__subtitle--font-size);
+    font-family: var(--ez-grid-config__subtitle--font-family);
+}
+
+.grid-config__main {
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    /*public*/
+    scrollbar-color: var(--ez-grid-config__scrollbar--background-color-primary) var(--ez-grid-config__scrollbar--background-color-secondary);
+    padding-right: var(--ez-grid-config__main--padding-right);
+}
+
 .grid-config__main::-webkit-scrollbar-track {
-    background-color: #f0f2f5;
+    /*public*/
+    background-color: var(--ez-grid-config__scrollbar--background-color-secondary);
 }
 
 .grid-config__main::-webkit-scrollbar-thumb {
     /*public*/
-    background-color: var(--ez-grid-config__scrollbar--background-color);
+    background-color: var(--ez-grid-config__scrollbar--background-color-primary);
     border-radius: var(--ez-grid-config__scrollbar--border-radius);
 }
 
 .grid-config__main::-webkit-scrollbar {
-    background-color: #f0f2f5;
-
     /*public*/
     width: var(--ez-grid-config__scrollbar--width);
     max-width: var(--ez-grid-config__scrollbar--width);
     min-width: var(--ez-grid-config__scrollbar--width);
+    background-color: var(--ez-grid-config__scrollbar--background-color-secondary);
 }
 
 .group-name {

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

@@ -75,7 +75,7 @@ export class EzGridConfig {
   }
   buildColumnListSlot(item, group) {
     return (h("div", null,
-      h("ez-check", { mode: 'switch', id: 'switch' + item + group, value: group.group === "Visíveis", onEzChange: (ev) => { this.switchColumnGroup(ev, item); } })));
+      h("ez-check", { mode: 'switch', id: 'switch' + ((item === null || item === void 0 ? void 0 : item.label) || '') + ((group === null || group === void 0 ? void 0 : group.group) || ''), value: group.group === "Visíveis", onEzChange: (ev) => { this.switchColumnGroup(ev, item); } })));
   }
   buildOrderListSlot(item) {
     let selectedOption = "na";
@@ -158,7 +158,6 @@ export class EzGridConfig {
     this.columns = newColumnList;
     this._dataChanged = false;
     this.closeConfig();
-    ApplicationUtils.info("As configurações foram salvas com sucesso!");
     this.save();
   }
   save() {

package/dist/collection/components/ez-grid/subcomponents/ez-select-box/ez-select-box.js

@@ -23,11 +23,12 @@ export class SelectBox {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "Option | string",
-        "resolved": "Option | string",
+        "original": "IOption | string",
+        "resolved": "IOption | string",
         "references": {
-          "Option": {
-            "location": "global"
+          "IOption": {
+            "location": "import",
+            "path": "../../../ez-combo-box/ez-combo-box"
           }
         }
       },

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

@@ -27,7 +27,7 @@
   --ez-list__item--border-color: var(--title--primary, #2b3a54);
 
   /* @doc Define o estilo do texto do item da lista. */
-  --ez-list__item--font-family: var(--font-pattern, "Sora");
+  --ez-list__item--font-family: var(--font-pattern, "Roboto");
 
   /* @doc Define o tamanho do texto do item da lista. */
   --ez-list__item--font-size: var(--text--medium, 14px);
@@ -45,7 +45,7 @@
   --ez-list__selected-item--background-color: var(--color--primary-300, #E2F4EF);
 
   /* @doc Define o estilo do texto do grupo da lista. */
-  --ez-list__group--font-family: var(--font-pattern, "Sora");
+  --ez-list__group--font-family: var(--font-pattern, "Roboto");
   
   /* @doc Define o tamanho do texto do grupo da lista. */
   --ez-list__group--font-size: var(--text--medium, 14px);
@@ -57,7 +57,7 @@
   --ez-list__group--padding-bottom: var(--space-small, 6px);
 
   /* @doc Define o estilo do texto da área de transferência de grupos. */
-  --ez-list__group-overlay--font-family: var(--font-pattern, "Sora");
+  --ez-list__group-overlay--font-family: var(--font-pattern, "Roboto");
 
   /* @doc Define o tamanho do texto da área de transferência de grupos. */
   --ez-list__group-overlay--font-size: var(--text--medium, 14px);
@@ -145,7 +145,15 @@ p {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  width: calc(100% - 41px);
+  width: 100%;
+}
+
+.group-container .item-content {
+  max-width: calc(100% - 41px);
+}
+
+.items-container .item-content {
+  max-width: calc(100% - 100px);
 }
 
 .draggable-list {

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

@@ -0,0 +1,38 @@
+:host {
+  display: grid;
+  grid-template-rows: 0 auto 1fr auto 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ez-modal-container__header{
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.ez-modal-container__content {
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+
+.ez-modal-container__title{
+  display: grid;
+}
+
+.ez-modal-container__close-button{
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
+.ez-modal-container__close-icon{
+  --icon--color: var(--title--primary, #2B3A54)
+}
+
+.ez-modal-container__focus-ctrl{
+  height: 0px;
+  background-color: transparent;
+  border: none;
+}