@sankhyalabs/sankhyablocks 5.12.0 → 5.14.0

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

@@ -31,6 +31,20 @@ export class SnkCrud {
   async goToView(mode) {
     this.executeAction(mode);
   }
+  /**
+   * Usado para abrir o configurator do CRUD
+   */
+  async openConfigurator() {
+    var _a;
+    (_a = this._snkConfigurator) === null || _a === void 0 ? void 0 : _a.open();
+  }
+  /**
+   * Usado para fechar o configurator do CRUD
+   */
+  async closeConfigurator() {
+    var _a;
+    (_a = this._snkConfigurator) === null || _a === void 0 ? void 0 : _a.close();
+  }
   currentViewModeWatcher(currentView) {
     this._viewHistory = [...this._viewHistory.slice(-1), currentView];
   }
@@ -123,8 +137,16 @@ export class SnkCrud {
       this.messagesBuilder = this._snkDataUnit.messagesBuilder;
     }
   }
+  handleConfiguratorEvent(evt, type) {
+    evt.stopImmediatePropagation();
+    if (type === 'SAVE') {
+      this.configuratorSave.emit();
+      return;
+    }
+    this.configuratorCancel.emit();
+  }
   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), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-guides-viewer", { ref: ref => this._guidesViewer = ref, entityPath: this._snkDataUnit.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: evt => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form" }, h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this._snkDataUnit.entityName, onBack: this.backView.bind(this) })), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showActionButtons }, h("div", { slot: "SnkConfigContainerSlot" }, h("slot", { name: "SnkConfigContainerSlot" })))));
+    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), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-guides-viewer", { ref: ref => this._guidesViewer = ref, entityPath: this._snkDataUnit.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: evt => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form" }, h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this._snkDataUnit.entityName, onBack: this.backView.bind(this) })), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showActionButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL') }, h("div", { slot: "SnkConfigContainerSlot" }, h("slot", { name: "SnkConfigContainerSlot" })))));
   }
   static get is() { return "snk-crud"; }
   static get encapsulation() { return "scoped"; }
@@ -349,6 +371,36 @@ export class SnkCrud {
           "resolved": "string",
           "references": {}
         }
+      }, {
+        "method": "configuratorSave",
+        "name": "configuratorSave",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando salva a configura\u00E7\u00E3o no configurator do CRUD."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "configuratorCancel",
+        "name": "configuratorCancel",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando cancela o salvamento da configura\u00E7\u00E3o no configurator do CRUD."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -371,6 +423,38 @@ export class SnkCrud {
           "text": "Usado para alternar a vis\u00E3o entre GRID e FORM externamente.",
           "tags": []
         }
+      },
+      "openConfigurator": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Usado para abrir o configurator do CRUD",
+          "tags": []
+        }
+      },
+      "closeConfigurator": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Usado para fechar o configurator do CRUD",
+          "tags": []
+        }
       }
     };
   }

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

@@ -15,7 +15,6 @@ export class SnkFormConfig {
   constructor() {
     this._listEnabledFields = [];
     this._renderTimer = 500;
-    this._sortableTimer = 100;
     this._tabSelected = 1;
     this._labelNewGroup = "Novo grupo";
     this._mouseOnFieldConfig = false;
@@ -40,36 +39,20 @@ export class SnkFormConfig {
     this.messagesBuilder = undefined;
   }
   observeConfigManager() {
-    this.loadConfig(this._sortableTimer);
+    this.loadConfig();
   }
-  loadFields(updateTimer = 0) {
+  loadFields() {
     this._layoutFormConfig = [];
-    // this._layoutFormConfig ? this._layoutFormConfig.length = 0 : this._layoutFormConfig = [];
-    /*
-    TODO: Validar a possibilidade de fazer diretamente this._layoutFormConfig.length = 0
-    sem a necessidade do ternario abaixo, para isso definir um default para o this._layoutFormConfig
-    na declaração da variavel
-    - Impactou:
-      - Inserir um field, alterar a tab de lugar e inserir um novo campo
-      - Ocultar/Deletar sequencialmente mais de uma aba
-    */
-    if (updateTimer > 0) {
-      setTimeout(() => {
-        this.buildFields();
-      }, updateTimer);
-    }
-    else {
-      this.buildFields();
-    }
+    this.buildFields();
   }
   buildFields() {
     this.buildFormConfig();
     this.buildAvailableFields();
   }
-  loadFormConfig(updateTimer) {
+  loadFormConfig() {
     var _a;
     this._formConfig = this.getConfig();
-    this.loadFields(updateTimer);
+    this.loadFields();
     this.controlFieldConfig();
     if (((_a = this._filterFieldsAvailable) === null || _a === void 0 ? void 0 : _a.value) != undefined) {
       this._filterFieldsAvailable.value = "";
@@ -112,12 +95,12 @@ export class SnkFormConfig {
     }
   }
   resetChangeConfig() {
-    this.loadFormConfig(this._sortableTimer);
+    this.loadFormConfig();
     this.clearTempGroups();
   }
   resetChangeOptionConfig() {
     this._formConfigChanged = false;
-    this.loadConfig(this._sortableTimer);
+    this.loadConfig();
     this.clearTempGroups();
   }
   getTabsToSave() {
@@ -242,7 +225,7 @@ export class SnkFormConfig {
     var _a;
     return ((_a = group.fields) === null || _a === void 0 ? void 0 : _a.length) ? group.fields.map((field) => {
       var _a, _b;
-      return h("div", { key: field.name, class: this.getFieldConfigStyle(field), "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { messagesBuilder: this.messagesBuilder, onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, modeInsertion: false, fieldConfig: field, dataUnit: this.dataUnit, isConfigActive: ((_a = this._fieldConfigSelected) === null || _a === void 0 ? void 0 : _a.name) === field.name, id: field.name }), ((_b = this._fieldConfigSelected) === null || _b === void 0 ? void 0 : _b.name) === field.name &&
+      return h("div", { key: field.name, class: this.getFieldConfigStyle(field), "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { messagesBuilder: this.messagesBuilder, onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, modeInsertion: false, fieldConfig: field, dataUnit: this.dataUnit, isConfigActive: ((_a = this._fieldConfigSelected) === null || _a === void 0 ? void 0 : _a.name) === field.name, id: field.name, key: field.name }), ((_b = this._fieldConfigSelected) === null || _b === void 0 ? void 0 : _b.name) === field.name &&
         h("div", { class: "ez-flex form-config__config-options" }, h("snk-config-options", { idConfig: field.name, messagesBuilder: this.messagesBuilder, dataUnit: this.dataUnit, fieldConfig: this._fieldConfigSelected, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), onConfigOptionsChanged: (evt) => this.handleconfigOptionsChanged(evt.detail) })));
     }) : h("div", { class: "form-config__add-group-container" }, h("div", { class: "form-config__add-group-content" }, h("div", { class: "form-config__add-group-label" }, h("label", { class: "ez-text ez-text--center ez-text--medium ez-text--primary ez-text--bold" }, this.getMessage("snkFormConfig.form.labelDropField")))));
   }
@@ -335,9 +318,7 @@ export class SnkFormConfig {
       && oldContainer.id === newContainer.id) {
       evt.cancel();
       this._fieldsAvailable = [];
-      setTimeout(() => {
-        this.buildAvailableFields();
-      }, this._sortableTimer);
+      this.buildAvailableFields();
       return true;
     }
     return false;
@@ -356,7 +337,7 @@ export class SnkFormConfig {
         }
       };
       setTimeout(() => {
-        this.handleFieldConfigChange(eventDetail, this._sortableTimer);
+        this.handleFieldConfigChange(eventDetail);
       }, this._renderTimer);
       return true;
     }
@@ -380,11 +361,7 @@ export class SnkFormConfig {
         if (isNewGroup) {
           this.clearTempGroups(true);
         }
-        const sortableTimer = oldContainer.dataset.groupName !== newContainer.dataset.groupName
-          || (newContainer.id === CONTAINER_ID.withoutGroup && oldContainer.id === CONTAINER_ID.fieldsAvailable)
-          ? this._sortableTimer
-          : 0;
-        this.updateFieldsToSave(sortableTimer);
+        this.updateFieldsToSave();
       }, this._renderTimer);
       return true;
     }
@@ -414,12 +391,12 @@ export class SnkFormConfig {
       return;
     }
   }
-  updateFieldsToSave(updateTimer = 0) {
+  updateFieldsToSave() {
     const fields = this.getFieldsToSave();
     if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
       this._formConfig.fields = fields;
     }
-    this.loadFields(updateTimer);
+    this.loadFields();
     this._formConfigChanged = true;
   }
   controlSortableField() {
@@ -448,7 +425,7 @@ export class SnkFormConfig {
   controlStopDraggingGroup(evt) {
     if (evt.data.newIndex !== evt.data.oldIndex) {
       setTimeout(() => {
-        this.updateFieldsToSave(this._sortableTimer);
+        this.updateFieldsToSave();
       }, this._renderTimer);
     }
   }
@@ -523,7 +500,7 @@ export class SnkFormConfig {
     });
     if (tabs.length > 0) {
       this._formConfig.tabs = tabs;
-      this.loadFields(this._sortableTimer);
+      this.loadFields();
       this.controlFieldConfig();
       this._formConfigChanged = true;
     }
@@ -550,13 +527,13 @@ export class SnkFormConfig {
     if (config != undefined) {
       this._formConfig = config;
       this._tabSelected = 1;
-      this.loadFields(this._sortableTimer);
+      this.loadFields();
       this.controlFieldConfig();
       this.clearTempGroups();
     }
   }
-  loadConfig(updateTimer = 0) {
-    this.loadFormConfig(updateTimer);
+  loadConfig() {
+    this.loadFormConfig();
     this.loadUserConfig();
   }
   addNewGroup() {
@@ -597,7 +574,7 @@ export class SnkFormConfig {
       });
     }
     else {
-      this.updateFieldsToSave(this._sortableTimer);
+      this.updateFieldsToSave();
     }
   }
   checkGroupExists(newLabel, indexGroup, isTempGroup = false) {
@@ -608,11 +585,11 @@ export class SnkFormConfig {
     if (tabGroupsNames === null || tabGroupsNames === void 0 ? void 0 : tabGroupsNames.includes(newLabel === null || newLabel === void 0 ? void 0 : newLabel.toLowerCase())) {
       const title = this.getMessage("snkFormConfig.confirm.title");
       const message = `
-        ${this.getMessage("snkFormConfig.alert.titleGroupExists")} 
-        <b>${newLabel}</b> 
-        ${this.getMessage("snkFormConfig.alert.inTab")} 
-        <b>${tabName === TAB_NAMES.main ? this.getMessage("snkFormConfig.form.mainArea") : tabName}</b>. 
-        <br/><br/> 
+        ${this.getMessage("snkFormConfig.alert.titleGroupExists")}
+        <b>${newLabel}</b>
+        ${this.getMessage("snkFormConfig.alert.inTab")}
+        <b>${tabName === TAB_NAMES.main ? this.getMessage("snkFormConfig.form.mainArea") : tabName}</b>.
+        <br/><br/>
         ${this.getMessage("snkFormConfig.alert.infoValidTitle")}
       `;
       ApplicationUtils.alert(title, message)
@@ -643,7 +620,7 @@ export class SnkFormConfig {
         field.group = newLabel;
       }
     });
-    this.loadFields(this._sortableTimer);
+    this.loadFields();
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -857,14 +834,14 @@ export class SnkFormConfig {
     this._formConfigChanged = true;
     this.resetSortables();
   }
-  controlRemoveFieldConfig(fieldConfig, updateTimer) {
+  controlRemoveFieldConfig(fieldConfig) {
     var _a;
     this._formConfigChanged = false;
     if (fieldConfig == undefined) {
       return;
     }
     this._formConfig.fields = (_a = this._formConfig.fields) === null || _a === void 0 ? void 0 : _a.filter((field) => field.name !== fieldConfig.name);
-    this.loadFields(updateTimer);
+    this.loadFields();
     this.controlFieldConfig();
     this._formConfigChanged = true;
     this.resetSortables();
@@ -873,14 +850,14 @@ export class SnkFormConfig {
     this.controlSortableField();
     this.controlSortableGroup();
   }
-  handleFieldConfigChange(evt, updateTimer = 0) {
+  handleFieldConfigChange(evt) {
     const { field: fieldConfig, type: actionType } = evt.detail;
     if (actionType === ACTION_CONFIG.configuration) {
       this.controlFieldConfig(fieldConfig);
       return;
     }
     if (actionType === ACTION_CONFIG.remove) {
-      this.controlRemoveFieldConfig(fieldConfig, updateTimer);
+      this.controlRemoveFieldConfig(fieldConfig);
       return;
     }
     if (actionType === ACTION_CONFIG.add) {
@@ -901,7 +878,7 @@ export class SnkFormConfig {
         tab.label = newLabel;
       }
     });
-    this.loadFields(this._sortableTimer);
+    this.loadFields();
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -921,7 +898,7 @@ export class SnkFormConfig {
         this._formConfig.tabs = (_a = this._formConfig.tabs) === null || _a === void 0 ? void 0 : _a.filter((tab) => {
           return tab.label !== tabSelected.detail.label;
         });
-        this.loadFields(this._sortableTimer);
+        this.loadFields();
         this.controlFieldConfig();
         this._formConfigChanged = true;
       }
@@ -934,7 +911,7 @@ export class SnkFormConfig {
         tab.visible = !tab.visible;
       }
     });
-    this.loadFields(this._sortableTimer);
+    this.loadFields();
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -978,7 +955,7 @@ export class SnkFormConfig {
         }), onEzAction: (evt) => this.controlSelectFormConfig(evt), id: "selectConfig" })), h("div", { class: "ez-col ez-col--sd-5 ez-col--tb-3 ez-align--middle ez-align--right" }, this._formConfigChanged === true && this._optionFormConfigChanged === false &&
       h("div", { class: "ez-row ez-align--middle ez-align--right" }, h("ez-button", { label: "Cancelar", class: "ez-padding-left--medium", size: "small", onClick: () => this.cancelChangeConfig() }), h("ez-button", { label: "Salvar", class: "ez-button--primary ez-padding-left--medium", size: "small", onClick: () => this.saveConfig() }, h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "save" }))), this._optionFormConfigChanged === true &&
       h("div", { class: "ez-row ez-align--middle ez-align--right" }, h("ez-button", { label: "Cancelar", class: "ez-padding-left--medium", size: "small", onClick: () => this.cancelChangeOptionConfig() }), h("ez-button", { label: this.getMessage("snkFormConfig.applyConfig"), class: "ez-button--primary ez-padding-left--medium", size: "small", onClick: () => this.applyOptionConfig() })))), h("div", { class: "ez-row ez-padding--medium", ref: ref => this._sortableContainer = ref }, h("div", { class: "form-config__tab-container ez-col ez-col--sd-9 ez-col--tb-9 ez-padding-right--medium" }, ((_b = this._layoutFormConfig) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
-      h("section", { class: "ez-box__container", ref: ref => this._formContainer = ref }, h("snk-tab-config", { ref: ref => this._tabConfig = ref, selectedIndex: this._tabSelected, messagesBuilder: this.messagesBuilder, onEzTabChange: (ev) => this.changeTabSelected(ev.detail), onEzOrderChange: (ev) => this.changeTabOrder(ev.detail), onEditionTitleTab: (ev) => this.changeTabLabel(ev), onDeleteTab: (ev) => this.handleDeleteTab(ev), onHideTab: (ev) => this.changeHideTab(ev), onCanStartDrag: () => this.handleCanStartDragTab() }, this._layoutFormConfig.map((tab) => h("snk-tab", { tabKey: tab.tab, label: tab.tab, visible: tab.visible }))), this._layoutFormConfig.map((tab, indexTab) => h("div", { id: "tab" + indexTab, "data-draggable-parent": "group", class: this._tabSelected === indexTab
+      h("section", { class: "ez-box__container", ref: ref => this._formContainer = ref }, h("snk-tab-config", { ref: ref => this._tabConfig = ref, selectedIndex: this._tabSelected, messagesBuilder: this.messagesBuilder, onEzTabChange: (ev) => this.changeTabSelected(ev.detail), onEzOrderChange: (ev) => this.changeTabOrder(ev.detail), onEditionTitleTab: (ev) => this.changeTabLabel(ev), onDeleteTab: (ev) => this.handleDeleteTab(ev), onHideTab: (ev) => this.changeHideTab(ev), onCanStartDrag: () => this.handleCanStartDragTab(), tabItems: this._layoutFormConfig.map((tab) => { return { tabKey: tab.tab, label: tab.tab, visible: tab.visible }; }) }), this._layoutFormConfig.map((tab, indexTab) => h("div", { id: "tab" + indexTab, "data-draggable-parent": "group", class: this._tabSelected === indexTab
           ? "form-config__tab-content ez-flex ez-flex--column ez-size-width--full ez-padding--medium"
           : "form-config__hide-content" }, tab.groups.map((group, indexGroup) => {
         if (group.group) {

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

@@ -13,6 +13,7 @@ export class SnkTabConfig {
     this.selectedIndex = undefined;
     this.selectedTab = undefined;
     this.tabs = undefined;
+    this.tabItems = undefined;
     this.messagesBuilder = undefined;
   }
   /**
@@ -120,7 +121,7 @@ export class SnkTabConfig {
     window.clearTimeout(this._scrollCallBackFocus);
     this._scrollCallBackFocus = window.setTimeout(() => {
       const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
-      tabtoscroll.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      tabtoscroll === null || tabtoscroll === void 0 ? void 0 : tabtoscroll.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
     }, 200);
   }
   controlKeyEventEnter(evt) {
@@ -270,27 +271,18 @@ export class SnkTabConfig {
     }
   }
   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);
+    this._processedTabs = [];
+    if (this.tabs) {
+      this.tabs.split(",").forEach((label) => {
+        label = label.trim();
+        this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
       });
     }
+    this.tabItems.forEach((tab) => {
+      tab.label = tab.label !== TAB_NAMES.main ? tab.label : this.getMessage("snkFormConfig.form.mainArea");
+      tab.index = this._processedTabs.length;
+      this._processedTabs.push(tab);
+    });
   }
   componentDidRender() {
     this.updateScroll();
@@ -311,7 +303,7 @@ export class SnkTabConfig {
         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) ||
+      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), key: tab.label }, (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() }));
@@ -382,6 +374,25 @@ export class SnkTabConfig {
         "attribute": "tabs",
         "reflect": false
       },
+      "tabItems": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ITab[]",
+          "resolved": "ITab[]",
+          "references": {
+            "ITab": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o nome das abas do componente separadas por v\u00EDrgulas \",\"."
+        }
+      },
       "messagesBuilder": {
         "type": "unknown",
         "mutable": true,

package/dist/components/snk-configurator2.js

@@ -87,7 +87,7 @@ const SnkConfigurator = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     }
   }
   render() {
-    return (h("ez-modal", { opened: this._opened, "close-esc": false, "close-outside-click": false, "modal-size": "small", scrim: "light" }, h("div", { class: "snk-configurator" }, h("div", { class: "snk-configurator__header" }, h("label", { class: "snk-configurator__title" }, this.getMessage('snkConfigurator.titleConfigurations')), h("div", { class: "snk-configurator__button-close" }, h("ez-button", { mode: "icon", iconName: "close", size: "medium", onClick: () => this.closeConfig() }))), h("div", { class: "snk-configurator__main" }, h("ez-collapsible-box", { boxBordered: true, label: "Modo de visualiza\u00E7\u00E3o ", headerSize: "medium", class: "snk-configurator__collapsable-box" }, h("ez-radio-button", { value: this.getViewModeValue().toString(), onEzChange: (evt) => this.onViewModeChanged(evt), enabled: this.enableModeConfig() }, h("ez-radio-button-option", { label: this.getMessage('snkConfigurator.labelGrid'), value: VIEW_MODE.GRID }), h("ez-radio-button-option", { label: this.getMessage('snkConfigurator.labelForm'), value: VIEW_MODE.FORM })), h("div", { class: "snk-configurator__collsable-box-action" }, h("ez-button", { label: this.viewMode === VIEW_MODE.GRID ? this.getMessage('snkConfigurator.labelConfigGrid') : this.getMessage('snkConfigurator.labelConfigForm'), class: "snk-configurator__button-config ez-button--secondary", onClick: () => this.onClickOpenConfig(), id: "openConfigurator" }))), h("div", { class: "snk-configurator__outline" }, h("slot", { name: "SnkConfigContainerSlot" }))), this.showActionButtons && (h("div", { class: "snk-configurator__action-buttons" }, h("ez-button", { label: "Cancelar", onClick: () => this.cancel.emit(true) }), h("ez-button", { label: "Salvar", onClick: () => this.save.emit(true), class: "ez-button--primary" }))))));
+    return (h("ez-modal", { opened: this._opened, "close-esc": false, "close-outside-click": false, "modal-size": "small", scrim: "light" }, h("div", { class: "snk-configurator" }, h("div", { class: "snk-configurator__header" }, h("label", { class: "snk-configurator__title" }, this.getMessage('snkConfigurator.titleConfigurations')), h("div", { class: "snk-configurator__button-close" }, h("ez-button", { mode: "icon", iconName: "close", size: "medium", onClick: () => this.closeConfig() }))), h("div", { class: "snk-configurator__main" }, h("ez-collapsible-box", { boxBordered: true, label: "Modo de visualiza\u00E7\u00E3o ", headerSize: "medium", class: "snk-configurator__collapsable-box" }, h("ez-radio-button", { value: this.getViewModeValue().toString(), onEzChange: (evt) => this.onViewModeChanged(evt), enabled: this.enableModeConfig() }, h("ez-radio-button-option", { label: this.getMessage('snkConfigurator.labelGrid'), value: VIEW_MODE.GRID }), h("ez-radio-button-option", { label: this.getMessage('snkConfigurator.labelForm'), value: VIEW_MODE.FORM })), h("div", { class: "snk-configurator__collsable-box-action" }, h("ez-button", { label: this.viewMode === VIEW_MODE.GRID ? this.getMessage('snkConfigurator.labelConfigGrid') : this.getMessage('snkConfigurator.labelConfigForm'), class: "snk-configurator__button-config ez-button--secondary", onClick: () => this.onClickOpenConfig(), id: "openConfigurator" }))), h("div", { class: "snk-configurator__outline" }, h("slot", { name: "SnkConfigContainerSlot" }))), this.showActionButtons && (h("div", { class: "snk-configurator__action-buttons" }, h("ez-button", { label: "Cancelar", onClick: () => this.cancel.emit() }), h("ez-button", { label: "Salvar", onClick: () => this.save.emit(), class: "ez-button--primary" }))))));
   }
   static get style() { return snkConfiguratorCss; }
 }, [6, "snk-configurator", {

package/dist/components/snk-crud.js

@@ -33,6 +33,8 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.actionClick = createEvent(this, "actionClick", 7);
+    this.configuratorSave = createEvent(this, "configuratorSave", 7);
+    this.configuratorCancel = createEvent(this, "configuratorCancel", 7);
     this._viewHistory = [];
     this._dataUnit = undefined;
     this._dataState = undefined;
@@ -54,6 +56,20 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async goToView(mode) {
     this.executeAction(mode);
   }
+  /**
+   * Usado para abrir o configurator do CRUD
+   */
+  async openConfigurator() {
+    var _a;
+    (_a = this._snkConfigurator) === null || _a === void 0 ? void 0 : _a.open();
+  }
+  /**
+   * Usado para fechar o configurator do CRUD
+   */
+  async closeConfigurator() {
+    var _a;
+    (_a = this._snkConfigurator) === null || _a === void 0 ? void 0 : _a.close();
+  }
   currentViewModeWatcher(currentView) {
     this._viewHistory = [...this._viewHistory.slice(-1), currentView];
   }
@@ -146,8 +162,16 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.messagesBuilder = this._snkDataUnit.messagesBuilder;
     }
   }
+  handleConfiguratorEvent(evt, type) {
+    evt.stopImmediatePropagation();
+    if (type === 'SAVE') {
+      this.configuratorSave.emit();
+      return;
+    }
+    this.configuratorCancel.emit();
+  }
   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), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-guides-viewer", { ref: ref => this._guidesViewer = ref, entityPath: this._snkDataUnit.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: evt => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form" }, h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this._snkDataUnit.entityName, onBack: this.backView.bind(this) })), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showActionButtons }, h("div", { slot: "SnkConfigContainerSlot" }, h("slot", { name: "SnkConfigContainerSlot" })))));
+    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), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-guides-viewer", { ref: ref => this._guidesViewer = ref, entityPath: this._snkDataUnit.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: evt => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form" }, h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this._snkDataUnit.entityName, onBack: this.backView.bind(this) })), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showActionButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL') }, h("div", { slot: "SnkConfigContainerSlot" }, h("slot", { name: "SnkConfigContainerSlot" })))));
   }
   get _element() { return this; }
   static get watchers() { return {
@@ -168,7 +192,9 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "_dataState": [32],
     "attachmentRegisterKey": [32],
     "_currentViewMode": [32],
-    "goToView": [64]
+    "goToView": [64],
+    "openConfigurator": [64],
+    "closeConfigurator": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {