@sankhyalabs/ezui 1.1.74 → 1.1.77

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);
+}