@sankhyalabs/ezui 1.1.75 → 1.1.78

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

@@ -0,0 +1,69 @@
+export default class Server {
+  constructor(data) {
+    this._data = data;
+  }
+  getData(request) {
+    const finalArray = this.sort(this.filter(this._data, request), request);
+    return { rowData: finalArray.slice(request.startRow, request.endRow), rowCount: finalArray.length };
+  }
+  filter(data, _request) {
+    return data;
+  }
+  sort(data, _request) {
+    return data;
+  }
+}
+/*    alasql.options.cache = false;
+  
+    return {
+      getData: function (request) {
+        var results = executeQuery(request);
+  
+        return {
+          success: true,
+          rows: results,
+          lastRow: getLastRowIndex(request, results),
+        };
+      },
+    };
+  
+    function executeQuery(request) {
+      var sql = buildSql(request);
+  
+      console.log("[FakeServer] - about to execute query:", sql);
+  
+      return alasql(sql, [allData]);
+    }
+  
+    function buildSql(request) {
+      return "SELECT * FROM ?" + orderBySql(request) + limitSql(request);
+    }
+  
+    function orderBySql(request) {
+      var sortModel = request.sortModel;
+  
+      if (sortModel.length === 0) return "";
+  
+      var sorts = sortModel.map(function (s) {
+        return s.colId + " " + s.sort.toUpperCase();
+      });
+  
+      return " ORDER BY " + sorts.join(", ");
+    }
+  
+    function limitSql(request) {
+      var blockSize = request.endRow - request.startRow;
+  
+      return " LIMIT " + (blockSize + 1) + " OFFSET " + request.startRow;
+    }
+  
+    function getLastRowIndex(request, results) {
+      if (!results || results.length === 0) {
+        return null;
+      }
+  
+      var currentLastRow = request.startRow + results.length;
+  
+      return currentLastRow <= request.endRow ? currentLastRow : -1;
+    }
+  }*/ 

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

@@ -0,0 +1,12 @@
+const HeaderColumnTemplate = `<div class="ag-cell-label-container" role="presentation">
+    <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>
+    <div ref="eLabel" class="ag-header-cell-label" role="presentation" unselectable="on">
+        <span ref="eText" class="ag-header-cell-text" unselectable="on"></span>
+        <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true"></span>
+        <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" aria-hidden="true"></span>
+        <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" aria-hidden="true"></span>
+        <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" aria-hidden="true"></span>
+    </div>
+</div>`;
+
+export default HeaderColumnTemplate;

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

@@ -0,0 +1,15 @@
+:host {
+
+  /*@doc Define a cor de fundo do header do componente.*/
+  --ezgrid__header--background-color: var(--background--xlight, #FFF)
+}
+
+.grid__header {
+  /*private*/
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  /*public*/
+  background-color: var(--ezgrid__header--background-color);
+}

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

@@ -0,0 +1,414 @@
+import { Component, h, Host, Prop, Method, Event, State } from "@stencil/core";
+import AgGridController from "./controller/ag-grid/AgGridController";
+import { getSpritePath } from "../../utils/AssetsUtils";
+import DataUnitBridge from "./controller/DataUnitBridge";
+export class EzGrid {
+  constructor() {
+    this._gridController = new AgGridController(false);
+    this._popUpVisible = false;
+    /**
+    * Determina o número de linhas de cada página. Caso informado o valor -1
+    * não haverá paginação.
+    */
+    this.pageSize = -1;
+  }
+  /**
+  * Método responsável por receber a definição das colunas
+  */
+  async setColumnsDef(cols) {
+    this._gridController.setColumnsDef(cols, this.multipleSelection);
+  }
+  /**
+  * Adiciona item de menu nas colunas.
+  */
+  async addColumnMenuItem(label, name, action) {
+    this._gridController.addColumnMenuItem({ label, name, action });
+  }
+  /**
+  * Método responsável por aplicar estado pré-existente nas colunas do grid.
+  */
+  async setColumnsState(state) {
+    this._gridController.setColumnsState(state);
+  }
+  /**
+  * Método de carga dos registros. Os objetos deste array devem conter atributos
+  * para as colunas desejadas.
+  */
+  async setData(data) {
+    this._gridController.setData(data);
+  }
+  /**
+  * Retorna as linhas selecionadas na grade.
+  */
+  async getSelection() {
+    return Promise.resolve(this._gridController.getSelection());
+  }
+  /**
+  * Método retornar o estado atual das colunas do grid.
+  */
+  async getColumnsState() {
+    return Promise.resolve(this._gridController.getColumnsState());
+  }
+  /**
+  * Método retornar o estado atual das colunas do grid.
+  */
+  async getColumns() {
+    return Promise.resolve(this._gridController.getColumnsDef());
+  }
+  componentWillLoad() {
+    if (this.dataUnit) {
+      this._dataUnitBridge = new DataUnitBridge(this._gridController, this.dataUnit);
+      addEventListener("ezSelectionChange", (evt) => this.dataUnit.setSelection(evt.detail.map((r) => r.__record__id__)));
+    }
+  }
+  componentDidLoad() {
+    this._gridController.initDatagrid(this._container, {
+      onColumnStateChange: (type, state) => this.ezColumnStateChange.emit({ type, state }),
+      onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
+      onPaginationChange: (status) => {
+        this._navigationHasPrevious = status.hasPrevious;
+        this._navigationHasNext = status.hasNext;
+        this._navigationFirstRow = status.pageStart;
+        this._navigationLastRow = status.pageEnd;
+        this._navigationTotalRows = status.totalRows;
+      },
+      allowMultipleSelection: this.multipleSelection,
+      pageSize: this.pageSize,
+      serverURL: this.serverUrl,
+      dataUnit: this.dataUnit
+    });
+  }
+  getPaginationControl() {
+    if (this.pageSize === -1) {
+      return null;
+    }
+    return [
+      h("div", { class: "text text--primary text--medium margin-right--medium" },
+        h("strong", { class: "text text--primary text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`),
+        ` de ${this._navigationTotalRows}`),
+      h("ez-button", { size: "small", image: getSpritePath("chevron-left"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
+      h("ez-button", { size: "small", image: getSpritePath("chevron-right"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
+    ];
+  }
+  applyConfig(cols) {
+    this._gridController.setColumnsState(cols);
+    this.closeConfig();
+  }
+  closeConfig() {
+    this._popUpVisible = false;
+  }
+  openConfig() {
+    this._gridConfig.columns = this._gridController.getColumnsState().filter(c => c.name);
+    this._gridConfig.selectedTab = "Colunas";
+    this._popUpVisible = true;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "box box--shadow padding--medium grid__header margin-bottom--small" },
+        this.getPaginationControl(),
+        h("ez-button", { size: "small", image: getSpritePath("settings"), class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } })),
+      h("div", { class: "grid__container ag-sankhya-theme", ref: elem => this._container = elem }),
+      h("div", { class: "grid__footer" }),
+      h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false },
+        h("grid-config", { ref: ref => this._gridConfig = ref, selectedTab: "Colunas", onConfigFinish: evt => this.applyConfig(evt.detail), onConfigCancel: _evt => this.closeConfig() }))));
+  }
+  static get is() { return "ez-grid"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-grid.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-grid.css"]
+  }; }
+  static get assetsDirs() { return ["../assets"]; }
+  static get properties() { return {
+    "multipleSelection": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Habilita a sele\u00E7\u00E3o de v\u00E1rias linhas"
+      },
+      "attribute": "multiple-selection",
+      "reflect": false
+    },
+    "pageSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determina o n\u00FAmero de linhas de cada p\u00E1gina. Caso informado o valor -1\nn\u00E3o haver\u00E1 pagina\u00E7\u00E3o."
+      },
+      "attribute": "page-size",
+      "reflect": false,
+      "defaultValue": "-1"
+    },
+    "serverUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Endere\u00E7o do servidor. Se informado, o pr\u00F3prio datagrid controlar\u00E1 a obten\u00E7\u00E3o\ndos dados, anulando a necessidade de acionar o m\u00E9todo \"setData(data)\""
+      },
+      "attribute": "server-url",
+      "reflect": false
+    },
+    "dataUnit": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DataUnit",
+        "resolved": "DataUnit",
+        "references": {
+          "DataUnit": {
+            "location": "import",
+            "path": "@sankhyalabs/core"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "_navigationHasPrevious": {},
+    "_navigationHasNext": {},
+    "_navigationFirstRow": {},
+    "_navigationLastRow": {},
+    "_navigationTotalRows": {},
+    "_popUpVisible": {}
+  }; }
+  static get events() { return [{
+      "method": "ezColumnStateChange",
+      "name": "ezColumnStateChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado ao mudar o estado das colunas do grid. Ordena\u00E7\u00E3o, largura, etc."
+      },
+      "complexType": {
+        "original": "EzGridColumStateEvent",
+        "resolved": "EzGridColumStateEvent",
+        "references": {
+          "EzGridColumStateEvent": {
+            "location": "import",
+            "path": "./controller/EzGridController"
+          }
+        }
+      }
+    }, {
+      "method": "ezSelectionChange",
+      "name": "ezSelectionChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado ao selecionar linhas da grade."
+      },
+      "complexType": {
+        "original": "Array<any>",
+        "resolved": "any[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "setColumnsDef": {
+      "complexType": {
+        "signature": "(cols: Array<EzGridColumn>) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          },
+          "EzGridColumn": {
+            "location": "import",
+            "path": "./controller/EzGridController"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "M\u00E9todo respons\u00E1vel por receber a defini\u00E7\u00E3o das colunas",
+        "tags": []
+      }
+    },
+    "addColumnMenuItem": {
+      "complexType": {
+        "signature": "(label: string, name: string, action: Function) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Function": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "Adiciona item de menu nas colunas.",
+        "tags": []
+      }
+    },
+    "setColumnsState": {
+      "complexType": {
+        "signature": "(state: Array<EzGridColumn>) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          },
+          "EzGridColumn": {
+            "location": "import",
+            "path": "./controller/EzGridController"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "M\u00E9todo respons\u00E1vel por aplicar estado pr\u00E9-existente nas colunas do grid.",
+        "tags": []
+      }
+    },
+    "setData": {
+      "complexType": {
+        "signature": "(data: Array<any>) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "M\u00E9todo de carga dos registros. Os objetos deste array devem conter atributos\npara as colunas desejadas.",
+        "tags": []
+      }
+    },
+    "getSelection": {
+      "complexType": {
+        "signature": "() => Promise<Array<any>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any[]>"
+      },
+      "docs": {
+        "text": "Retorna as linhas selecionadas na grade.",
+        "tags": []
+      }
+    },
+    "getColumnsState": {
+      "complexType": {
+        "signature": "() => Promise<Array<EzGridColumn>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "EzGridColumn": {
+            "location": "import",
+            "path": "./controller/EzGridController"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<EzGridColumn[]>"
+      },
+      "docs": {
+        "text": "M\u00E9todo retornar o estado atual das colunas do grid.",
+        "tags": []
+      }
+    },
+    "getColumns": {
+      "complexType": {
+        "signature": "() => Promise<Array<EzGridColumn>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "EzGridColumn": {
+            "location": "import",
+            "path": "./controller/EzGridController"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<EzGridColumn[]>"
+      },
+      "docs": {
+        "text": "M\u00E9todo retornar o estado atual das colunas do grid.",
+        "tags": []
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,105 @@
+:host {
+
+    /*@doc Define o espaçamento utilizado no rodapé do componente.*/
+    --ez-grid-config__footer--padding-top: var(--space--medium, 12px);
+
+    /*@doc Define o espaçamento utilizado no centro do componente.*/
+    --ez-grid-config__main--padding-right: var(--space--medium, 12px);
+
+    /*@doc Define o espaçamento utilizado no seletor de abas do componente.*/
+    --ez-grid-config__tabselector-container--padding: var(--space--medium, 12px);
+
+    /*@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");
+
+    --ez-grid-config__title--font-family: var(--font-pattern, "Sora");
+
+    --ez-grid-config__title--font-weight: var(--text-weight--large, 14px);
+
+    /*@doc Define o tamanho da fonte utilizada para o subtitulo do componente.*/
+    --ez-grid-config__subtitle--font-size: var(--text--medium, 14px);
+
+    /*@doc Define a largura da barra de rolagem do componente.*/
+    --ez-grid-config__scrollbar--width: var(--space--medium, 12px);
+
+    /*@doc Define a cor da barra de rolagem do componente.*/
+    --ez-grid-config__main__scrollbar--background-color: var(--text--primary, #626e82);
+
+    /*@doc Define o raio da borda da barra de rolagem do componente.*/
+    --ez-grid-config__main__scrollbar--border-radius: var(--border--radius-medium, 12px);
+
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    max-height: 100%;
+    width: 100%;
+}
+
+.padding-right--medium {
+    padding-right: var(--space--medium);
+}
+
+ez-list {
+    height: 100%;
+}
+
+.grid-config__footer {
+    padding-top: var(--ez-grid-config__footer--padding-top);
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+.hidden {
+    display: none;
+}
+
+.grid-config__main {
+    padding-right: var(--ez-grid-config__main--padding-right);
+    overflow-y: auto;
+}
+
+.tabselector-container {
+    padding: var(--ez-grid-config__tabselector-container--padding) 0;
+}
+
+.button-close {
+    padding-left: var(--ez-grid-config__button-close--padding-left);
+}
+
+.title-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.subtitle {
+    font-family: var(--ez-grid-config__subtitle--font-family);
+    font-size: var(--ez-grid-config__subtitle--font-size);
+}
+
+.title {
+    display: flex;
+    font-family: var(--ez-grid-config__title--font-family);
+    margin: 0;
+    font-weight: var(--ez-grid-config__title--font-weight);
+    line-height: 1.3;
+}
+
+.grid-config__main::-webkit-scrollbar-track {
+    background-color: #f0f2f5;
+}
+
+.grid-config__main::-webkit-scrollbar-thumb {
+    background-color: var(--ez-grid-config__main__scrollbar--background-color);
+    border-radius: var(--ez-grid-config__main__scrollbar--border-radius);
+}
+
+.grid-config__main::-webkit-scrollbar {
+    background-color: #f0f2f5;
+    width: var(--ez-grid-config__scrollbar--width);
+    max-width: var(--ez-grid-config__scrollbar--width);
+    min-width: var(--ez-grid-config__scrollbar--width);
+}