@sankhyalabs/sankhyablocks 5.13.0 → 5.14.0

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-form-config2.js

@@ -24,7 +24,6 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.configClose = createEvent(this, "configClose", 7);
     this._listEnabledFields = [];
     this._renderTimer = 500;
-    this._sortableTimer = 100;
     this._tabSelected = 1;
     this._labelNewGroup = "Novo grupo";
     this._mouseOnFieldConfig = false;
@@ -49,36 +48,20 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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 = "";
@@ -121,12 +104,12 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   resetChangeConfig() {
-    this.loadFormConfig(this._sortableTimer);
+    this.loadFormConfig();
     this.clearTempGroups();
   }
   resetChangeOptionConfig() {
     this._formConfigChanged = false;
-    this.loadConfig(this._sortableTimer);
+    this.loadConfig();
     this.clearTempGroups();
   }
   getTabsToSave() {
@@ -251,7 +234,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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")))));
   }
@@ -341,9 +324,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       && oldContainer.id === newContainer.id) {
       evt.cancel();
       this._fieldsAvailable = [];
-      setTimeout(() => {
-        this.buildAvailableFields();
-      }, this._sortableTimer);
+      this.buildAvailableFields();
       return true;
     }
     return false;
@@ -362,7 +343,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         }
       };
       setTimeout(() => {
-        this.handleFieldConfigChange(eventDetail, this._sortableTimer);
+        this.handleFieldConfigChange(eventDetail);
       }, this._renderTimer);
       return true;
     }
@@ -386,11 +367,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         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;
     }
@@ -420,12 +397,12 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       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() {
@@ -454,7 +431,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   controlStopDraggingGroup(evt) {
     if (evt.data.newIndex !== evt.data.oldIndex) {
       setTimeout(() => {
-        this.updateFieldsToSave(this._sortableTimer);
+        this.updateFieldsToSave();
       }, this._renderTimer);
     }
   }
@@ -529,7 +506,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
     if (tabs.length > 0) {
       this._formConfig.tabs = tabs;
-      this.loadFields(this._sortableTimer);
+      this.loadFields();
       this.controlFieldConfig();
       this._formConfigChanged = true;
     }
@@ -556,13 +533,13 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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() {
@@ -603,7 +580,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       });
     }
     else {
-      this.updateFieldsToSave(this._sortableTimer);
+      this.updateFieldsToSave();
     }
   }
   checkGroupExists(newLabel, indexGroup, isTempGroup = false) {
@@ -614,11 +591,11 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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)
@@ -649,7 +626,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         field.group = newLabel;
       }
     });
-    this.loadFields(this._sortableTimer);
+    this.loadFields();
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -863,14 +840,14 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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();
@@ -879,14 +856,14 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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) {
@@ -907,7 +884,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         tab.label = newLabel;
       }
     });
-    this.loadFields(this._sortableTimer);
+    this.loadFields();
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -927,7 +904,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         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;
       }
@@ -940,7 +917,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         tab.visible = !tab.visible;
       }
     });
-    this.loadFields(this._sortableTimer);
+    this.loadFields();
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -984,7 +961,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         }), 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) {