@sankhyalabs/sankhyablocks 1.4.0-beta.7 → 1.4.0-beta.8

package/dist/collection/components/snk-form/subcomponents/snk-tab-config/snk-tab-config.js

@@ -0,0 +1,476 @@
+import { h, Host, Fragment } from "@stencil/core";
+import { Sortable } from '@shopify/draggable';
+import { ApplicationContext } from "@sankhyalabs/core";
+import { CONFIG_EVENTS, KEY_EVENTS, TAB_NAMES, TYPE_ACTIONS } from "../../../../lib/utils/constants";
+export class SnkTabConfig {
+  constructor() {
+    this._refTabActions = [];
+    this._actionsHide = [];
+    this._actionsShow = [];
+  }
+  /**
+   * 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-form.msg.ts"
+   */
+  getMessage(key, params) {
+    return this._application.messagesBuilder.getMessage(key, params);
+  }
+  controlSortableTab() {
+    if (this._sortableTab) {
+      this._sortableTab.destroy();
+    }
+    this._sortableTab = new Sortable(this._hostElem.querySelectorAll('[data-draggable-parent="tab"]'), {
+      draggable: '[data-draggable-element="tab"]',
+      mirror: {
+        constrainDimensions: true
+      }
+    });
+    this._sortableTab.on(CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingTab(evt));
+    this._sortableTab.on(CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingTab(evt));
+  }
+  controlStartDraggingTab(evt) {
+    var _a, _b;
+    const mouseEvent = (_a = evt === null || evt === void 0 ? void 0 : evt.dragEvent) === null || _a === void 0 ? void 0 : _a.originalEvent;
+    const targetElement = mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.target;
+    const targetName = (_b = targetElement === null || targetElement === void 0 ? void 0 : targetElement.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase();
+    if (this._activeEditText === true || targetName === "EZ-ACTIONS-BUTTON") {
+      evt === null || evt === void 0 ? void 0 : evt.cancel();
+    }
+    else {
+      this.canStartDrag.emit();
+    }
+  }
+  controlStopDraggingTab(evt) {
+    const updateTimer = 500;
+    if (evt.data.newIndex !== evt.data.oldIndex) {
+      setTimeout(() => {
+        const newIndex = (evt.data.newIndex || 0) + 1;
+        this.ezOrderChange.emit(newIndex);
+      }, updateTimer);
+    }
+  }
+  handleTabClick(tab) {
+    this.selectedIndex = tab.index;
+    this._focusedIndex = tab.index;
+    this.selectedTab = tab.tabKey;
+    this.ezTabChange.emit(tab);
+    this.setFocusedBtn(false, tab.index);
+    this.setFocusedTab(tab.index);
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (content) {
+      content.classList.add("tab-config__slot");
+    }
+  }
+  scrollBackward() {
+    const container = this._scrollContainer;
+    if (container) {
+      container.scrollLeft -= container.clientWidth;
+    }
+  }
+  scrollFoward() {
+    const container = this._scrollContainer;
+    if (container) {
+      let lastTab = null;
+      container.querySelectorAll(".tab-config__tab").forEach((tab) => {
+        if (tab.getBoundingClientRect().right < container.clientWidth) {
+          lastTab = tab;
+        }
+      });
+      container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
+    }
+  }
+  updateScroll() {
+    const container = this._scrollContainer;
+    if (container) {
+      const { scrollWidth, clientWidth, scrollLeft } = container;
+      const remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
+      this._startHidden = container.scrollLeft > 0;
+      this._endHidden = remainingScroll > 0;
+      if (this._startHidden) {
+        this._backwardButton.classList.remove("tab-config__hidden");
+      }
+      else {
+        this._backwardButton.classList.add("tab-config__hidden");
+      }
+      if (this._endHidden) {
+        this._forwardButton.classList.remove("tab-config__hidden");
+      }
+      else {
+        this._forwardButton.classList.add("tab-config__hidden");
+      }
+    }
+  }
+  domScrollHandler() {
+    window.clearTimeout(this._scrollCallBackScroll);
+    this._scrollCallBackScroll = window.setTimeout(() => { this.updateScroll(); }, 200);
+  }
+  setFocusedTab(index) {
+    window.clearTimeout(this._scrollCallBackFocus);
+    this._scrollCallBackFocus = window.setTimeout(() => {
+      const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
+      tabtoscroll.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    }, 200);
+  }
+  controlKeyEventEnter(evt) {
+    evt.preventDefault();
+    const selectedTab = this._processedTabs[this._focusedIndex];
+    this.handleTabClick(selectedTab);
+    this.setFocusedTab(selectedTab.index);
+  }
+  controlKeyEventArrow(evt) {
+    let operator = undefined;
+    if (evt.key === KEY_EVENTS.arrowLeft) {
+      operator = false;
+    }
+    else if (evt.key === KEY_EVENTS.arrowRight) {
+      operator = true;
+    }
+    else {
+      return;
+    }
+    if (this._focusedIndex === undefined) {
+      if (operator === false) {
+        this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex - 1 : undefined;
+      }
+      else {
+        this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex + 1 : undefined;
+      }
+    }
+    else {
+      if (operator === false) {
+        this._focusedIndex = this._focusedIndex - 1;
+      }
+      else {
+        this._focusedIndex = this._focusedIndex + 1;
+      }
+    }
+    if (this._focusedIndex < 0) {
+      this._focusedIndex = 0;
+    }
+    else if (this._focusedIndex > this._processedTabs.length - 1) {
+      this._focusedIndex = this._processedTabs.length - 1;
+    }
+    this.setFocusedBtn(true, this._focusedIndex);
+    this.setFocusedTab(this._focusedIndex);
+  }
+  controlKeyEventEscape(evt) {
+    evt.preventDefault();
+    const currentTab = this._processedTabs[this.selectedIndex];
+    this._focusedIndex = undefined;
+    this.handleTabClick(currentTab);
+    this.setFocusedTab(this.selectedIndex);
+  }
+  setFocusedParam(evt) {
+    if (this._activeEditText === true || evt == undefined) {
+      return;
+    }
+    if (evt.key === KEY_EVENTS.enter) {
+      this.controlKeyEventEnter(evt);
+      return;
+    }
+    if (evt.key === KEY_EVENTS.arrowLeft || evt.key === KEY_EVENTS.arrowRight) {
+      this.controlKeyEventArrow(evt);
+      return;
+    }
+    if (evt.key === KEY_EVENTS.tab || evt.key === KEY_EVENTS.escape) {
+      this.controlKeyEventEscape(evt);
+      return;
+    }
+  }
+  setFocusedBtn(visible, parameter) {
+    const tabsButtons = this._scrollContainer.querySelectorAll(".tab-config__tab");
+    tabsButtons.forEach((el) => {
+      el.classList.remove("tab-config__tab--is-focused");
+      if (el.id === "tab" + parameter && visible) {
+        el.classList.add("tab-config__tab--is-focused");
+      }
+    });
+  }
+  getStyledLabel(tabId) {
+    const tabElem = this._hostElem.querySelector(`#${tabId}`);
+    if (tabElem == undefined) {
+      return;
+    }
+    let styledLabel = {
+      fontSize: window.getComputedStyle(tabElem).getPropertyValue('font-size'),
+      fontWeight: window.getComputedStyle(tabElem).getPropertyValue('font-weight'),
+      fontFamily: window.getComputedStyle(tabElem).getPropertyValue('font-family')
+    };
+    return styledLabel;
+  }
+  cancelEditText() {
+    var _a;
+    this._activeEditText = false;
+    if (this._scrollContainer != undefined) {
+      (_a = this._scrollContainer.querySelector('.tab-config__tab--is-active')) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }
+  handleActions(actionSelect, tab) {
+    const { value: typeAction } = actionSelect.detail;
+    if (typeAction === TYPE_ACTIONS.rename) {
+      this._activeEditText = true;
+      this._activeEditTextIndex = tab.index;
+    }
+    else if (typeAction === TYPE_ACTIONS.hide || typeAction === TYPE_ACTIONS.show) {
+      this.hideTab.emit(tab);
+    }
+    else if (typeAction === TYPE_ACTIONS.delete) {
+      this.deleteTab.emit(tab);
+    }
+  }
+  handleSaveEditionText(editDetails) {
+    const { value, newValue } = editDetails.detail;
+    this._processedTabs.forEach((tab) => {
+      if (tab.label === value) {
+        tab.label = newValue;
+        this.cancelEditText();
+        this.editionTitleTab.emit(editDetails);
+      }
+    });
+  }
+  onHideActions(index) {
+    const elementActionsBtn = this._refTabActions[index];
+    if (elementActionsBtn) {
+      elementActionsBtn.isOpened().then((isOpened) => {
+        if (isOpened) {
+          elementActionsBtn === null || elementActionsBtn === void 0 ? void 0 : elementActionsBtn.hideActions();
+        }
+      });
+    }
+  }
+  componentWillLoad() {
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (this._application != undefined) {
+      this._actionsHide = [
+        { value: TYPE_ACTIONS.rename, label: this.getMessage("snkTabConfig.labelRename") },
+        { value: TYPE_ACTIONS.hide, label: this.getMessage("snkTabConfig.labelHide") },
+        { value: TYPE_ACTIONS.delete, label: this.getMessage("snkTabConfig.labelDelete") }
+      ];
+      this._actionsShow = [
+        { value: TYPE_ACTIONS.rename, label: this.getMessage("snkTabConfig.labelRename") },
+        { value: TYPE_ACTIONS.show, label: this.getMessage("snkTabConfig.labelShow") },
+        { value: TYPE_ACTIONS.delete, label: this.getMessage("snkTabConfig.labelDelete") }
+      ];
+    }
+  }
+  componentWillRender() {
+    if (this._processedTabs == undefined) {
+      this._processedTabs = [];
+      if (this.tabs) {
+        this.tabs.split(",").forEach((label) => {
+          label = label.trim();
+          this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
+        });
+      }
+      this._hostElem.querySelectorAll("snk-tab").forEach((elem) => {
+        const tabKey = elem.getAttribute("tabKey");
+        const label = elem.getAttribute("label") !== TAB_NAMES.main ? elem.getAttribute("label") : this.getMessage("snkFormConfig.form.mainArea");
+        const visible = elem.hasAttribute("visible");
+        const tab = { label, tabKey, index: this._processedTabs.length, visible };
+        const content = elem.firstChild;
+        if (content) {
+          content.setAttribute("slot", "tab" + tab.index);
+          this._hostElem.appendChild(content);
+        }
+        this._processedTabs.push(tab);
+      });
+    }
+  }
+  componentDidRender() {
+    this.updateScroll();
+    this.controlSortableTab();
+  }
+  render() {
+    return (h(Host, null, h("button", { class: "tab-config__backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), h("div", { class: "tab-config__lower-bar" }), h("div", { class: "tab-config__scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev), "data-draggable-parent": "tab" }, this._processedTabs.map((tab, index) => {
+      const tabId = "tab" + index;
+      const isSelected = index === this.selectedIndex || (this.selectedTab && tab.tabKey === this.selectedTab);
+      if (isSelected) {
+        this.selectedTab = tab.tabKey;
+        this.selectedIndex = index;
+      }
+      return h("button", { id: tabId, class: `tab-config__tab${isSelected ? " tab-config__tab--is-active" : ""}`, onClick: () => this.handleTabClick(tab), onDblClick: () => { this._activeEditText = true; this._activeEditTextIndex = index; }, "data-draggable-element": index > 0 ? "tab" : "", onMouseLeave: () => this.onHideActions(index) }, (this._activeEditText === true && this._activeEditTextIndex === index && index > 0) ||
+        h(Fragment, null, index > 0 && h("ez-icon", { iconName: tab.leftIcon || "drag-indicator", class: "tab-config__left-icon" }), (tab.visible === false && index > 0) && h("ez-icon", { iconName: tab.leftIcon || "eye-off", class: "tab-config__left-icon tab-config__left-icon--eye-off" }), h("span", { class: "tab-config__tab-label" + (tab.visible === false && index > 0 ? " tab-config__tab-label-disabled" : ""), title: tab.label }, tab.label), index > 0 &&
+          h("ez-actions-button", { class: "tab-config__actions-button", size: "small", ref: elem => this._refTabActions[index] = elem, actions: tab.visible === false ? this._actionsShow : this._actionsHide, isTransparent: true, arrowActive: true, onEzAction: (ev) => this.handleActions(ev, tab) }), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } })), (this._activeEditText === true && index > 0 && this._activeEditTextIndex === index) &&
+        h("ez-text-edit", { value: tab.label, styled: this.getStyledLabel(tabId), class: "tab-config__edit-text", onSaveEdition: (ev) => this.handleSaveEditionText(ev), onCancelEdition: () => this.cancelEditText() }));
+    })), h("button", { class: "tab-config__forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
+  }
+  static get is() { return "snk-tab-config"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-tab-config.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-tab-config.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selectedIndex": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o index da aba selecionada."
+        },
+        "attribute": "selected-index",
+        "reflect": true
+      },
+      "selectedTab": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a aba selecionada."
+        },
+        "attribute": "selected-tab",
+        "reflect": true
+      },
+      "tabs": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o nome das abas do componente, separadas por v\u00EDrgulas \",\"."
+        },
+        "attribute": "tabs",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_processedTabs": {},
+      "_activeEditText": {},
+      "_activeEditTextIndex": {},
+      "_actionsHide": {},
+      "_actionsShow": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezTabChange",
+        "name": "ezTabChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido ao clicar para abrir o popup (ezTabChange).\nO detail desse evento carrega tanto o tabKey quanto o index da aba\nselecionada."
+        },
+        "complexType": {
+          "original": "ITab",
+          "resolved": "ITab",
+          "references": {
+            "ITab": {
+              "location": "local"
+            }
+          }
+        }
+      }, {
+        "method": "editionTitleTab",
+        "name": "editionTitleTab",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido ao salvar uma altera\u00E7\u00E3o realizada no t\u00EDtulo da tab"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "deleteTab",
+        "name": "deleteTab",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido ao deletar uma aba."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "hideTab",
+        "name": "hideTab",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido ao ocultar uma aba."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "ezOrderChange",
+        "name": "ezOrderChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido ao mover a aba mudando a sua ordem."
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "canStartDrag",
+        "name": "canStartDrag",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido ao ocultar uma aba."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "_hostElem"; }
+}

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

@@ -1,38 +1,43 @@
-import { ApplicationContext } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
-import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
 import TaskbarProcessor from '../snk-taskbar/processor/taskbar-processor';
+import ConfigurableElementsStorage from '../snk-configurator/subcomponents/configModalProvider/configurableElementsStorage';
 export class SnkGrid {
   constructor() {
     this._topTaskbarProcessor = new TaskbarProcessor({
-      "snkGridTopTaskbar": ["FORM_MODE", "CONFIG_GRID", "INSERT"]
+      "snkGridTopTaskbar": ["FORM_MODE", "CONFIGURATOR", "INSERT"]
     });
     this._headerTaskbarProcessor = new TaskbarProcessor({
       "snkGridHeaderTaskbar.unselected": ["REFRESH"],
       "snkGridHeaderTaskbar.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "REFRESH"]
     });
   }
-  actionClickHandler(evt) {
-    if (evt.detail === TaskbarElement.CONFIG_GRID && this._grid) {
+  /**
+   * Método responsável em abrir ou fechar o modal de configurações da grade.
+   */
+  async setShowGridConfig(value) {
+    if (this._grid == undefined) {
+      return;
+    }
+    if (value === true) {
       this._grid.openGridConfig();
     }
-  }
-  saveConfig(config) {
-    const snkApplication = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-    if (snkApplication) {
-      snkApplication.saveGridConfig(config);
+    else {
+      this._grid.closeGridConfig();
     }
   }
+  /**
+   * Método responsável por setar as configurações da grade.
+   */
+  async setConfig(config) {
+    this._gridConfig = config;
+  }
+  changeConfig(config) {
+    this.configChanged.emit(config);
+  }
+  componentDidRender() {
+    ConfigurableElementsStorage.setGrid(this.configName, this._element);
+  }
   componentWillLoad() {
-    const snkApplication = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-    if (snkApplication) {
-      snkApplication.loadGridConfig(this.configName).then(cfg => {
-        this._gridConfig = cfg;
-        this._configLoaded = true;
-      });
-      //Forçamos a carga dos acessos pra aproveitar a request inicial.
-      snkApplication.getAllAccess();
-    }
     let parent = this._element.parentElement;
     while (parent) {
       if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
@@ -57,10 +62,10 @@ export class SnkGrid {
     this._topTaskbarProcessor.process("snkGridTopTaskbar", this.taskbarManager, this._dataState);
   }
   render() {
-    if (!this._configLoaded || !this._dataUnit) {
+    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, 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", onActionClick: evt => this.actionClickHandler(evt), key: "topTaskbar", 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, dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: evt => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver }, h("snk-taskbar", { dataUnit: this._dataUnit, 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" }))));
+    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, 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", 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, dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.changeConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver }, h("snk-taskbar", { dataUnit: this._dataUnit, 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" }))));
   }
   static get is() { return "snk-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -161,7 +166,6 @@ export class SnkGrid {
   static get states() {
     return {
       "_dataUnit": {},
-      "_configLoaded": {},
       "_dataState": {},
       "_gridConfig": {}
     };
@@ -197,7 +201,73 @@ export class SnkGrid {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "configChanged",
+        "name": "configChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando as configura\u00E7\u00F5es s\u00E3o alteradas."
+        },
+        "complexType": {
+          "original": "IGridConfig",
+          "resolved": "IGridConfig",
+          "references": {
+            "IGridConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-grid/controller/EzGridController"
+            }
+          }
+        }
       }];
   }
+  static get methods() {
+    return {
+      "setShowGridConfig": {
+        "complexType": {
+          "signature": "(value: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo respons\u00E1vel em abrir ou fechar o modal de configura\u00E7\u00F5es da grade.",
+          "tags": []
+        }
+      },
+      "setConfig": {
+        "complexType": {
+          "signature": "(config: IGridConfig) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IGridConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-grid/controller/EzGridController"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo respons\u00E1vel por setar as configura\u00E7\u00F5es da grade.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "_element"; }
 }

package/dist/collection/components/snk-taskbar/elements/taskbar-elements.js

@@ -12,9 +12,9 @@ export var TaskbarElement;
   TaskbarElement["SAVE"] = "SAVE";
   TaskbarElement["GRID_MODE"] = "GRID_MODE";
   TaskbarElement["FORM_MODE"] = "FORM_MODE";
-  TaskbarElement["CONFIG_GRID"] = "CONFIG_GRID";
   TaskbarElement["MORE_OPTIONS"] = "MORE_OPTIONS";
   TaskbarElement["DIVIDER"] = "DIVIDER";
+  TaskbarElement["CONFIGURATOR"] = "CONFIGURATOR";
 })(TaskbarElement || (TaskbarElement = {}));
 export var AuthorizationElements;
 (function (AuthorizationElements) {
@@ -22,11 +22,12 @@ export var AuthorizationElements;
   AuthorizationElements["CLONE"] = "CLONE";
   AuthorizationElements["REMOVE"] = "REMOVE";
   AuthorizationElements["INSERT"] = "INSERT";
-  AuthorizationElements["CONFIG_GRID"] = "CONFIG_GRID";
+  AuthorizationElements["CONFIGURATOR"] = "CONFIGURATOR";
 })(AuthorizationElements || (AuthorizationElements = {}));
 export var VisibleWhenForbidden;
 (function (VisibleWhenForbidden) {
   VisibleWhenForbidden["CONFIG_GRID"] = "CONFIG_GRID";
+  VisibleWhenForbidden["CONFIGURATOR"] = "CONFIGURATOR";
 })(VisibleWhenForbidden || (VisibleWhenForbidden = {}));
 export const buildCustomButton = (def, className, action, isEnabled) => {
   const { hint, text, iconName } = def;
@@ -42,7 +43,7 @@ export const buildCustomButton = (def, className, action, isEnabled) => {
     return textButton(def.name, className, text, hint, action, isEnabled);
   }
 };
-export const buildElem = (element, className, getTitle, action, isEnabled, actions) => {
+export const buildElem = (element, className, getTitle, action, isEnabled, actions, configName) => {
   const title = getTitle(element);
   switch (element) {
     case TaskbarElement.PREVIOUS:
@@ -67,8 +68,8 @@ export const buildElem = (element, className, getTitle, action, isEnabled, actio
       return iconButton("table", element, className, title, action, isEnabled);
     case TaskbarElement.FORM_MODE:
       return iconButton("list", element, className, title, action, isEnabled);
-    case TaskbarElement.CONFIG_GRID:
-      return iconButton("settings-inverted", element, className, title, action, isEnabled);
+    case TaskbarElement.CONFIGURATOR:
+      return configButton(element, className, getTitle, action, isEnabled, configName);
     case TaskbarElement.MORE_OPTIONS:
       return actions && actions.length > 0 ? h("ez-actions-button", { title: title, size: "small", class: className, enabled: isEnabled(element), onEzAction: (evt) => action(evt.detail.value), actions: actions }) : undefined;
     case TaskbarElement.DIVIDER:
@@ -84,3 +85,6 @@ function iconButton(iconName, name, className, title, action, isEnabled) {
 function iconTextButton(iconName, name, className, text, title, action, isEnabled) {
   return h("ez-button", { name: iconName, title: title, label: text, size: "small", class: className, enabled: isEnabled(name), onClick: () => action(name) }, h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: iconName }));
 }
+function configButton(element, className, getTitle, action, isEnabled, configName) {
+  return h("snk-configurator", { key: "configurator", configName: configName, title: getTitle(element), class: className, enabled: isEnabled(element), onChangeViewMode: (evt) => action(evt === null || evt === void 0 ? void 0 : evt.detail) });
+}