@sankhyalabs/sankhyablocks 2.4.7 → 2.4.9

package/dist/collection/components/snk-configurator/snk-configurator.css

@@ -26,17 +26,19 @@
     /*@doc Define o peso da fonte utilizada para o subtitulo do componente.*/
     --snk-configurator__subtitle--font-weight: var(--text-weight--large, 600);
 
+    /* scrollbar */
+    /*@doc Define a cor da barra de rolagem do componente.*/
+    --snk-configurator__scrollbar--color-default: var(--scrollbar--default, #626e82);
+    /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+    --snk-configurator__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+    /*@doc Define a cor do hover na barra de rolagem do componente.*/
+    --snk-configurator__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+    /*@doc Define a cor do active na barra de rolagem do componente.*/
+    --snk-configurator__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
     /*@doc Define o raio da borda da barra de rolagem do componente.*/
     --snk-configurator__scrollbar--border-radius: var(--border--radius-small, 6px);
-
     /*@doc Define a largura da barra de rolagem do componente.*/
     --snk-configurator__scrollbar--width: var(--space--medium, 12px);
-
-    /*@doc Define a cor da barra de rolagem do componente.*/
-    --snk-configurator__scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
-
-    /*@doc Define a cor de fundo da barra de rolagem do componente.*/
-    --snk-configurator__scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
 }
 
 .snk-configurator {
@@ -101,24 +103,37 @@
     scrollbar-width: thin;
 
     /*public*/
-    scrollbar-color: var(--snk-configurator__scrollbar--background-color-primary) var(--snk-configurator__scrollbar--background-color-secondary);
+    scrollbar-color: var(--snk-configurator__scrollbar--color-clicked) var(--snk-configurator__scrollbar--color-background);
+}
+
+.snk-configurator__main::-webkit-scrollbar {
+    /*public*/
+    background-color: var(--snk-configurator__scrollbar--color-background);
+    width: var(--snk-configurator__scrollbar--width);
+    max-width: var(--snk-configurator__scrollbar--width);
+    min-width: var(--snk-configurator__scrollbar--width);
 }
 
 .snk-configurator__main::-webkit-scrollbar-track {
     /*public*/
-    background-color: var(--snk-configurator__scrollbar--background-color-secondary);
+    background-color: var(--snk-configurator__scrollbar--color-background);
+    border-radius: var(--snk-configurator__scrollbar--border-radius);
 }
 
 .snk-configurator__main::-webkit-scrollbar-thumb {
     /*public*/
-    background-color: var(--snk-configurator__scrollbar--background-color-primary);
+    background-color: var(--snk-configurator__scrollbar--color-default);
     border-radius: var(--snk-configurator__scrollbar--border-radius);
 }
 
-.snk-configurator__main::-webkit-scrollbar {
+.snk-configurator__main::-webkit-scrollbar-thumb:vertical:hover,
+.snk-configurator__main::-webkit-scrollbar-thumb:horizontal:hover {
     /*public*/
-    background-color: var(--snk-configurator__scrollbar--background-color-secondary);
-    width: var(--snk-configurator__scrollbar--width);
-    max-width: var(--snk-configurator__scrollbar--width);
-    min-width: var(--snk-configurator__scrollbar--width);
+    background-color: var(--snk-configurator__scrollbar--color-hover);
+}
+
+.snk-configurator__main::-webkit-scrollbar-thumb:vertical:active,
+.snk-configurator__main::-webkit-scrollbar-thumb:horizontal:active {
+    /*public*/
+    background-color: var(--snk-configurator__scrollbar--color-clicked);
 }

package/dist/collection/components/snk-crud/snk-crud.js

@@ -16,6 +16,10 @@ export class SnkCrud {
      * Determina se pode haver mais de uma linha selecionada na grade.
      */
     this.multipleSelection = true;
+    /**
+     * Determina se haverá exportação de dados
+     */
+    this.enableDataExporter = false;
   }
   /**
    * Usado para alternar a visão entre GRID e FORM externamente.
@@ -94,7 +98,7 @@ export class SnkCrud {
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
   render() {
-    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { ref: (ref) => this._snkForm = ref, "data-element-id": "crud_form", configName: this.configName, actionsList: this.actionsList, onExit: () => this.setViewMode(GRID_MODE), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, h("slot", { name: "SnkFormTaskBar" }))), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._viewMode, onConfigSelected: (evt) => this.executeAction(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail) })));
+    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, enableDataExporter: this.enableDataExporter }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { ref: (ref) => this._snkForm = ref, "data-element-id": "crud_form", configName: this.configName, actionsList: this.actionsList, onExit: () => this.setViewMode(GRID_MODE), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, h("slot", { name: "SnkFormTaskBar" }))), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._viewMode, onConfigSelected: (evt) => this.executeAction(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail) })));
   }
   static get is() { return "snk-crud"; }
   static get encapsulation() { return "scoped"; }
@@ -227,6 +231,24 @@ export class SnkCrud {
         "attribute": "multiple-selection",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "enableDataExporter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina se haver\u00E1 exporta\u00E7\u00E3o de dados"
+        },
+        "attribute": "enable-data-exporter",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/snk-data-exporter/data/attachment.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/snk-data-exporter/data/email.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/snk-data-exporter/data/export-config.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/snk-data-exporter/data/export-result.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/snk-data-exporter/data/report.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/snk-data-exporter/exporter-email-sender/email-info-step.js

@@ -0,0 +1,6 @@
+import { h } from "@stencil/core";
+import { ElementIDUtils } from '@sankhyalabs/core';
+export const EmailInfoStep = ({ getMessage, changeInfo, data }) => {
+  return h("div", null, h("ez-text-input", Object.assign({ label: `${getMessage("snkExporter.emailSenderInfoStep_sendTo")} (obrigatório) *`, required: true, value: data === null || data === void 0 ? void 0 : data.to, onEzChange: evt => changeInfo("to", evt.detail) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("sendTo")}` })), h("ez-text-input", Object.assign({ label: `${getMessage("snkExporter.emailSenderInfoStep_subject")} (obrigatório) *`, required: true, value: data === null || data === void 0 ? void 0 : data.subject, onEzChange: evt => changeInfo("subject", evt.detail) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("subject")}` })), h("ez-text-area", Object.assign({ label: getMessage("snkExporter.emailSenderInfoStep_message"), value: data === null || data === void 0 ? void 0 : data.message, onEzChange: evt => changeInfo("message", evt.detail) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("message")}` })), ((data === null || data === void 0 ? void 0 : data.attachments) || [])
+    .map((file, index) => h("ez-file-item", Object.assign({ class: "ez-padding-bottom--large", fileName: file.name, fileSize: file.size, canRemove: false }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("fileItem_") + (index + 1)}` }))));
+};

package/dist/collection/components/snk-data-exporter/exporter-email-sender/options-step.js

@@ -0,0 +1,21 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { h } from "@stencil/core";
+export const OptionsStep = ({ getMessage, changeInfo, data }) => {
+  const selectionCount = (data === null || data === void 0 ? void 0 : data.selectedRows) || 0;
+  const formatOptions = [
+    { label: getMessage("snkExporter.emailSenderOptStep_formatPDF"), value: "pdf" },
+    { label: getMessage("snkExporter.emailSenderOptStep_formatXLSX"), value: "xlsx" }
+  ];
+  const typeOptions = [
+    { label: getMessage("snkExporter.emailSenderOptStep_allData"), value: "all" },
+    { label: getMessage("snkExporter.emailSenderOptStep_currentPage"), value: "page" },
+  ];
+  if (selectionCount > 0) {
+    const label = getMessage(selectionCount > 1 ? "snkExporter.emailSenderOptStep_someRecords" : "snkExporter.emailSenderOptStep_oneRecord", { SELECTION_COUNT: selectionCount });
+    typeOptions.push({
+      label,
+      value: "selection"
+    });
+  }
+  return h("div", null, h("ez-radio-button", Object.assign({ class: "ez-margin-bottom--large" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("formato")}` }, { label: getMessage("snkExporter.emailSenderOptStep_lblFormat"), direction: "horizontal", value: (data === null || data === void 0 ? void 0 : data.format) || "pdf", onEzChange: evt => changeInfo("format", evt.detail), options: formatOptions })), h("ez-radio-button", Object.assign({ class: "ez-margin-bottom--large" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("type")}` }, { label: getMessage("snkExporter.emailSenderOptStep_export"), value: (data === null || data === void 0 ? void 0 : data.type) || "all", onEzChange: evt => changeInfo("type", evt.detail), options: typeOptions })));
+};

package/dist/collection/components/snk-data-exporter/exporter-email-sender/snk-exporter-email-sender.js

@@ -0,0 +1,141 @@
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { h } from '@stencil/core';
+import { EmailInfoStep } from './email-info-step';
+import { OptionsStep } from './options-step';
+export class SnkExporterEmailSender {
+  constructor() {
+    this._stepInfo = [
+      {
+        subTitle: "snkExporter.emailSenderOptStep_subtitle",
+        firstButton: "snkExporter.emailSenderCancelButton",
+        secondButton: "snkExporter.emailSenderNextButton",
+        firstButtonAction: () => this.close(),
+        secondButtonAction: () => this.changeStep(1)
+      },
+      {
+        subTitle: "snkExporter.emailSenderInfoStep_subtitle",
+        firstButton: "snkExporter.emailSenderBackButton",
+        secondButton: "snkExporter.emailSenderSendButton",
+        firstButtonAction: () => this.changeStep(0),
+        secondButtonAction: () => this.send(),
+        secondButtonEnabledTester: () => this.isFilled()
+      }
+    ];
+    this._opened = false;
+    this._currentStep = 0;
+  }
+  open(config) {
+    this._config = config;
+    this._opened = true;
+    this.changeStep(0);
+    return new Promise(accept => {
+      this._promiseResolver = accept;
+    });
+  }
+  getStepMessage(key) {
+    const stepInfo = this._stepInfo[this._currentStep] || {};
+    return this.getMessage(stepInfo[key]);
+  }
+  executeButtonAction(first) {
+    const stepInfo = this._stepInfo[this._currentStep] || {};
+    stepInfo[first ? "firstButtonAction" : "secondButtonAction"]();
+  }
+  checkButtonEnabled(first) {
+    const stepInfo = this._stepInfo[this._currentStep] || {};
+    const testFunction = stepInfo[first ? "firstButtonEnabledTester" : "secondButtonEnabledTester"];
+    if (testFunction) {
+      return testFunction();
+    }
+    return true;
+  }
+  changeStep(index) {
+    this._currentStep = index;
+    if (this._viewStack) {
+      this._viewStack.show(this._currentStep);
+    }
+  }
+  send() {
+    const { format, type, email } = this._config;
+    this._promiseResolver({ format, type, email, report: undefined });
+  }
+  close() {
+    this._opened = false;
+  }
+  isFilled() {
+    var _a, _b;
+    return ((_a = this._config.email) === null || _a === void 0 ? void 0 : _a.to) && ((_b = this._config.email) === null || _b === void 0 ? void 0 : _b.subject) ? true : false;
+  }
+  updateEmailInfo(field, value) {
+    this._config = Object.assign(Object.assign({}, this._config), { email: Object.assign(Object.assign({}, this._config.email), { [field]: value }) });
+  }
+  updateConfigInfo(field, value) {
+    this._config = Object.assign(Object.assign({}, this._config), { [field]: value });
+  }
+  render() {
+    var _a;
+    ElementIDUtils.addIDInfoIfNotExists(this._element, 'snkExporterEmailSender');
+    return (h("ez-popup", { useHeader: false, size: "x-small", heightMode: "auto", opened: this._opened }, h("ez-modal-container", { onEzModalAction: evt => {
+        if (evt.detail === "CLOSE")
+          this.close();
+      }, modalTitle: this.getMessage("snkExporter.emailSenderTitle"), modalSubTitle: this.getStepMessage("subTitle") }, h("ez-view-stack", { ref: ref => this._viewStack = ref }, h("stack-item", null, h(OptionsStep, { getMessage: this.getMessage, data: this._config, changeInfo: (field, value) => this.updateConfigInfo(field, value) })), h("stack-item", null, h(EmailInfoStep, { getMessage: this.getMessage, data: (_a = this._config) === null || _a === void 0 ? void 0 : _a.email, changeInfo: (field, value) => this.updateEmailInfo(field, value) }))), h("div", { class: "ez-col ez-col--sd-12 ez-flex--justify-end ez-margin-vertical--small" }, h("ez-button", Object.assign({ class: "ez-button--tertiary ez-padding-right--medium", label: this.getStepMessage("firstButton"), onClick: () => this.executeButtonAction(true), enabled: this.checkButtonEnabled(true) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("firstButton")}` })), h("ez-button", Object.assign({ class: "ez-button--secondary", label: this.getStepMessage("secondButton"), onClick: () => this.executeButtonAction(false), enabled: this.checkButtonEnabled(false) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("secondButton")}` }))))));
+  }
+  static get is() { return "snk-exporter-email-sender"; }
+  static get properties() {
+    return {
+      "getMessage": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(key: string, params?: any) => string",
+          "resolved": "(key: string, params?: any) => string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_config": {},
+      "_opened": {},
+      "_currentStep": {}
+    };
+  }
+  static get methods() {
+    return {
+      "open": {
+        "complexType": {
+          "signature": "(config: ExportConfig) => Promise<ExportResult>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ExportResult": {
+              "location": "import",
+              "path": "../data/export-result"
+            },
+            "ExportConfig": {
+              "location": "import",
+              "path": "../data/export-config"
+            }
+          },
+          "return": "Promise<ExportResult>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

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

@@ -1,17 +1,22 @@
-import { ElementIDUtils } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
+import { ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
 import TaskbarProcessor from '../snk-taskbar/processor/taskbar-processor';
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
+import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
 export class SnkGrid {
   constructor() {
     this._topTaskbarProcessor = new TaskbarProcessor({
       "snkGridTopTaskbar": ["FORM_MODE", "CONFIGURATOR", "INSERT"]
     });
     this._headerTaskbarProcessor = new TaskbarProcessor({
-      "snkGridHeaderTaskbar.unselected": ["REFRESH"],
-      "snkGridHeaderTaskbar.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "REFRESH"]
+      "snkGridHeaderTaskbar.unselected": ["REFRESH", "EXPORT"],
+      "snkGridHeaderTaskbar.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "REFRESH", "EXPORT"]
     });
     this._popUpGridConfig = false;
+    /**
+     * Determina se haverá exportação de dados
+     */
+    this.enableDataExporter = false;
   }
   /**
    * Exibe a janela de configurações da grade.
@@ -37,6 +42,37 @@ export class SnkGrid {
   async setConfig(config) {
     this.setGridConfig(config);
   }
+  actionClickHandler(event) {
+    if (event.detail === TaskbarElement.EXPORT) {
+      // TODO: Quando o exportador de grades for implementado, essa ação
+      // vai fazer mostrar as opções disponíveis. Enviar por email será
+      // apenas mais uma
+      const selectedRows = this._dataState.selectedRecords.length;
+      const config = {
+        format: "pdf",
+        type: selectedRows > 0 ? "selection" : "all",
+        selectedRows,
+        email: {
+          attachments: [
+            { name: "Movimentação Financeira.pdf", size: 1024 * 231 }
+          ]
+        }
+      };
+      this._snkEmailSender.open(config)
+        .then((result) => {
+        this._application.message("resultado", JSON.stringify(result));
+      });
+    }
+  }
+  /**
+   * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
+   * através de um pequeno modulo na estrutura da aplicação:
+   * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
+   * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-grid.msg.ts"
+   */
+  getMessage(key, params) {
+    return this._application.messagesBuilder.getMessage(key, params);
+  }
   openGridConfig() {
     this._grid.getColumnsState()
       .then((gridColumns) => {
@@ -72,6 +108,7 @@ export class SnkGrid {
     });
   }
   componentWillLoad() {
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     let parent = this._element.parentElement;
     while (parent) {
       if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
@@ -96,9 +133,10 @@ export class SnkGrid {
     this.loadConfig();
   }
   componentWillRender() {
+    const invisibleButtons = this.enableDataExporter ? [] : ["EXPORT"];
     const headerTaskbarId = this._dataState && this._dataState.selectedRecords.length > 0 ? "snkGridHeaderTaskbar.selected" : "snkGridHeaderTaskbar.unselected";
-    this._headerTaskbarProcessor.process(headerTaskbarId, this.taskbarManager, this._dataState);
-    this._topTaskbarProcessor.process("snkGridTopTaskbar", this.taskbarManager, this._dataState);
+    this._headerTaskbarProcessor.process(headerTaskbarId, this.taskbarManager, this._dataState, undefined, invisibleButtons);
+    this._topTaskbarProcessor.process("snkGridTopTaskbar", this.taskbarManager, this._dataState, undefined, invisibleButtons);
   }
   addElementID() {
     const dataInfo = { dataUnit: this._dataUnit };
@@ -108,7 +146,7 @@ export class SnkGrid {
     if (!this._dataUnit) {
       return undefined;
     }
-    return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("snk-taskbar", { dataUnit: this._dataUnit, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
+    return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("snk-taskbar", { dataUnit: this._dataUnit, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("snk-exporter-email-sender", { ref: ref => this._snkEmailSender = ref, getMessage: (key, params) => this.getMessage(key, params) }), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), application: this._application, selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
   }
   static get is() { return "snk-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -220,6 +258,24 @@ export class SnkGrid {
         },
         "attribute": "multiple-selection",
         "reflect": false
+      },
+      "enableDataExporter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina se haver\u00E1 exporta\u00E7\u00E3o de dados"
+        },
+        "attribute": "enable-data-exporter",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -324,4 +380,13 @@ export class SnkGrid {
     };
   }
   static get elementRef() { return "_element"; }
+  static get listeners() {
+    return [{
+        "name": "actionClick",
+        "method": "actionClickHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -29,18 +29,6 @@
     /*@doc Define o tamanho da fonte utilizada para o subtitulo do componente.*/
     --snk-grid-config__subtitle--font-size: var(--text--medium, 14px);
 
-    /*@doc Define a largura da barra de rolagem do componente.*/
-    --snk-grid-config__scrollbar--width: var(--space--medium, 12px);
-
-    /*@doc Define a cor da barra de rolagem do componente.*/
-    --snk-grid-config__scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
-  
-    /*@doc Define a cor de fundo da barra de rolagem do componente.*/
-    --snk-grid-config__scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
-
-    /*@doc Define o raio da borda da barra de rolagem do componente.*/
-    --snk-grid-config__scrollbar--border-radius: var(--border--radius-small, 6px);
-
     /* @doc Define o estilo do texto do grupo da lista. */
     --snk-grid-config__group--font-family: var(--font-pattern, "Roboto");
 
@@ -53,6 +41,20 @@
     /* @doc Define o espaçamento inferior do grupo da lista. */
     --snk-grid-config__group--padding-bottom: var(--space-small, 6px);
 
+    /* scrollbar */
+    /*@doc Define a cor da barra de rolagem do componente.*/
+    --snk-grid-config__scrollbar--color-default: var(--scrollbar--default, #626e82);
+    /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+    --snk-grid-config__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+    /*@doc Define a cor do hover na barra de rolagem do componente.*/
+    --snk-grid-config__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+    /*@doc Define a cor do active na barra de rolagem do componente.*/
+    --snk-grid-config__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+    /*@doc Define o raio da borda da barra de rolagem do componente.*/
+    --snk-grid-config__scrollbar--border-radius: var(--border--radius-small, 6px);
+    /*@doc Define a largura da barra de rolagem do componente.*/
+    --snk-grid-config__scrollbar--width: var(--space--medium, 12px);
+
     display: grid;
     grid-template-rows: auto 1fr auto;
     max-height: 100%;
@@ -134,27 +136,40 @@ ez-list {
     scrollbar-width: thin;
 
     /*public*/
-    scrollbar-color: var(--snk-grid-config__scrollbar--background-color-primary) var(--snk-grid-config__scrollbar--background-color-secondary);
+    scrollbar-color: var(--snk-grid-config__scrollbar--color-clicked) var(--snk-grid-config__scrollbar--color-background);
     padding-right: var(--snk-grid-config__main--padding-right);
 }
 
+.grid-config__main::-webkit-scrollbar {
+    /*public*/
+    width: var(--snk-grid-config__scrollbar--width);
+    max-width: var(--snk-grid-config__scrollbar--width);
+    min-width: var(--snk-grid-config__scrollbar--width);
+    background-color: var(--snk-grid-config__scrollbar--color-background);
+}
+
 .grid-config__main::-webkit-scrollbar-track {
     /*public*/
-    background-color: var(--snk-grid-config__scrollbar--background-color-secondary);
+    background-color: var(--snk-grid-config__scrollbar--color-background);
+    border-radius: var(--snk-grid-config__scrollbar--border-radius);
 }
 
 .grid-config__main::-webkit-scrollbar-thumb {
     /*public*/
-    background-color: var(--snk-grid-config__scrollbar--background-color-primary);
+    background-color: var(--snk-grid-config__scrollbar--color-default);
     border-radius: var(--snk-grid-config__scrollbar--border-radius);
 }
 
-.grid-config__main::-webkit-scrollbar {
+.grid-config__main::-webkit-scrollbar-thumb:vertical:hover,
+.grid-config__main::-webkit-scrollbar-thumb:horizontal:hover {
     /*public*/
-    width: var(--snk-grid-config__scrollbar--width);
-    max-width: var(--snk-grid-config__scrollbar--width);
-    min-width: var(--snk-grid-config__scrollbar--width);
-    background-color: var(--snk-grid-config__scrollbar--background-color-secondary);
+    background-color: var(--snk-grid-config__scrollbar--color-hover);
+}
+
+.grid-config__main::-webkit-scrollbar-thumb:vertical:active,
+.grid-config__main::-webkit-scrollbar-thumb:horizontal:active {
+    /*public*/
+    background-color: var(--snk-grid-config__scrollbar--color-clicked);
 }
 
 .group-name {

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

@@ -1,4 +1,4 @@
-import { ApplicationContext, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
+import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
 import { h, Host } from '@stencil/core';
 import { ConfigStorage } from '../../../../lib/configs/ConfigStorage';
@@ -13,7 +13,7 @@ export class EzGridConfig {
     this._componenteInternalKey = Date.now();
     /**
      * Aba selecionada das configurações da grade.
-     */
+    */
     this.selectedIndex = 0;
   }
   /* Creation Methods */
@@ -22,10 +22,10 @@ export class EzGridConfig {
    */
   async saveConfig(config) {
     var _a;
-    if (config == undefined || ((_a = this._application) === null || _a === void 0 ? void 0 : _a.configName) == undefined) {
+    if (config == undefined || ((_a = this.application) === null || _a === void 0 ? void 0 : _a.configName) == undefined) {
       return;
     }
-    ConfigStorage.saveGridConfig(config, this._application.configName)
+    ConfigStorage.saveGridConfig(config, this.application.configName)
       .then((response) => {
       if ((response === null || response === void 0 ? void 0 : response.resource) != undefined) {
         this.configChange.emit(config);
@@ -40,7 +40,7 @@ export class EzGridConfig {
    * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-grid.msg.ts"
    */
   getMessage(key, params) {
-    return this._application.messagesBuilder.getMessage(key, params);
+    return this.application.messagesBuilder.getMessage(key, params);
   }
   createOrderList() {
     let newList = [];
@@ -459,9 +459,6 @@ export class EzGridConfig {
       this.locateColumn(new KeyboardEvent("arrow-right", { key: "ArrowRight" }), this._searchElement.value);
     }
   }
-  componentWillLoad() {
-    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-  }
   componentDidLoad() {
     ElementIDUtils.addIDInfo(this._element);
   }
@@ -501,6 +498,26 @@ export class EzGridConfig {
         "reflect": false,
         "defaultValue": "0"
       },
+      "application": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SnkApplication",
+          "resolved": "SnkApplication",
+          "references": {
+            "SnkApplication": {
+              "location": "import",
+              "path": "../../../snk-application/snk-application"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Refer\u00EAncia para o SnkApplication"
+        }
+      },
       "columns": {
         "type": "unknown",
         "mutable": true,