@sankhyalabs/sankhyablocks 8.15.0-dev.6 → 8.15.0-dev.60

package/dist/collection/components/snk-filter-bar/snk-filter-bar.js

@@ -11,6 +11,7 @@ export class SnkFilterBar {
     this._updateSequence = [];
     this._loadingPending = false;
     this._configUpdated = false;
+    this._firstLoad = true;
     this._pendingVariables = false;
     this._customfiltersToBeUpdated = [];
     this._calculateSortIndex = (item) => {
@@ -27,16 +28,25 @@ export class SnkFilterBar {
       return this._calculateSortIndex(b) - this._calculateSortIndex(a);
     };
     this.dataUnit = undefined;
+    this.title = undefined;
     this.configName = undefined;
     this.resourceID = undefined;
+    this.mode = "regular";
     this.filterConfig = undefined;
     this.messagesBuilder = undefined;
+    this.disablePersonalizedFilter = undefined;
+    this.filterBarLegacyConfigName = undefined;
     this.allowDefault = undefined;
     this.scrollerLocked = false;
     this.showPersonalizedFilter = false;
     this.personalizedFilterId = undefined;
   }
   observeFilterConfig(newValue, oldValue) {
+    if (ObjectUtils.equals(newValue, oldValue))
+      return;
+    this.handleFilterConfigsChanged(oldValue, newValue);
+  }
+  handleFilterConfigsChanged(oldValue, newValue) {
     if (oldValue != undefined && newValue == undefined) {
       this._loadingPending = true;
       this._configUpdated = true;
@@ -74,7 +84,7 @@ export class SnkFilterBar {
    * Faz o recarregamento da filterbar buscando o state no servidor.
    */
   async reload() {
-    this.loadConfigFromStorage();
+    this.loadConfigFromStorage(true);
   }
   /**
    * Retorna um item de filtro pelo ID.
@@ -164,13 +174,27 @@ export class SnkFilterBar {
         return;
       }
       this._loadingPending = false;
-      this.dataUnit.loadData(undefined, undefined, true);
+      this.doLoadData(this.dataUnit.getLastLoadRequest() != undefined);
     }
     if (this._configUpdated) {
       this._configUpdated = false;
       ConfigStorage.saveFilterBarConfig(this.filterConfig, this.configName, this.resourceID);
     }
   }
+  async doLoadData(forceReload = false) {
+    try {
+      if (this._firstLoad && !forceReload) {
+        let autoLoad = await this._application.getBooleanParam("global.carregar.registros.iniciar.tela");
+        if (!autoLoad) {
+          return;
+        }
+      }
+      this.dataUnit.loadData(undefined, undefined, true);
+    }
+    finally {
+      this._firstLoad = false;
+    }
+  }
   /**
    * 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:
@@ -179,6 +203,9 @@ export class SnkFilterBar {
    */
   getMessage(key, params, defaultValue) {
     var _a;
+    if (this.messagesBuilder == undefined && this._application) {
+      this.messagesBuilder = this._application.messagesBuilder;
+    }
     return ((_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, params)) || defaultValue;
   }
   getFilter(_dataUnit) {
@@ -205,7 +232,7 @@ export class SnkFilterBar {
   registryFilterProvider() {
     this.dataUnit.addFilterProvider(this);
     if (this.filterConfig) {
-      this.dataUnit.loadData(undefined, undefined, true);
+      this.doLoadData();
     }
   }
   itemFocused(selectedItem) {
@@ -223,6 +250,17 @@ export class SnkFilterBar {
   filterActiveFilter(item) {
     return item.visible || item.removalBlocked;
   }
+  filterPersonalizedItems(item) {
+    return item.type === FilterItemType.PERSONALIZED;
+  }
+  getPersonalizedFilterVariableItems() {
+    return this.filterConfig
+      .filter(this.filterPersonalizedItems)
+      .map(item => {
+      const itemId = `filter-${item.id}`;
+      return (h("snk-filter-item", { key: item.id, id: itemId, config: Object.assign({}, item), onFocusin: () => this.itemFocused(itemId), onVisibleChanged: (evt) => this.scrollerLocked = evt.detail, onFilterChange: (event) => this.updateFilter(event.detail), getMessage: (key, props) => this.getMessage(key, props), showChips: false }));
+    });
+  }
   getFilterItems() {
     const pinnedItems = [];
     const unpinnedItems = [];
@@ -282,7 +320,15 @@ export class SnkFilterBar {
   loadPermitions() {
     this._application.isUserSup().then(value => this.allowDefault = value);
   }
-  loadConfigFromStorage() {
+  addFilterBarLegacyConfigName() {
+    if (this.filterBarLegacyConfigName && this.configName) {
+      ConfigStorage.addFilterBarLegacyConfig(this.configName, this.filterBarLegacyConfigName);
+    }
+  }
+  async loadConfigFromStorage(clearCache) {
+    if (clearCache) {
+      await ConfigStorage.deleteFilterBarConfigCache(this.configName, this.resourceID);
+    }
     return new Promise(accept => {
       ConfigStorage.loadFilterBarConfig(this.configName, this.resourceID, { contextURI: this.dataUnit.name })
         .then((filters) => {
@@ -325,6 +371,9 @@ export class SnkFilterBar {
   filterChangeListener(evt) {
     this.updateFilter(evt.detail);
   }
+  /**
+   * Abre o modal de filtros
+  */
   async showFilterModal() {
     const callbackOnApplyFilter = (filters) => {
       this.filterConfig = filters.map(this.normalizeItem).sort((a, b) => this._filtersComparator(a, b));
@@ -337,6 +386,7 @@ export class SnkFilterBar {
       filterConfig: filtersConfigCopy,
       configName: this.configName,
       onComplete: callbackOnApplyFilter,
+      disablePersonalizedFilter: this.disablePersonalizedFilter,
       getMessage: (key, props) => this.getMessage(key, props),
       onAddPersonalizedFilter: () => this.addPersonalizedFilter(),
       onEditPersonalizedFilter: (id) => this.editPersonalizedFilter(id),
@@ -381,6 +431,7 @@ export class SnkFilterBar {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     if (this._application) {
       this.loadPermitions();
+      this.addFilterBarLegacyConfigName();
       this.loadConfigFromStorage();
     }
     this.attachDataUnit();
@@ -395,7 +446,10 @@ export class SnkFilterBar {
     if (this.showPersonalizedFilter) {
       return h("snk-personalized-filter", { class: "filter-bar__personalized-filter", filterId: this.personalizedFilterId, ref: (el) => this._elPersonalizedFilter = el, onEzCancel: () => this.handleHidePersonalizedFilter(false), onEzAfterSave: () => this.handleHidePersonalizedFilter(true), entityUri: this.dataUnit.name, configName: this.configName, resourceID: this.resourceID });
     }
-    return (h(Host, null, h("ez-scroller", { class: "snk-filter-bar__scroller", direction: EzScrollDirection.HORIZONTAL, activeShadow: true, locked: this.scrollerLocked }, h("section", { class: "snk-filter-bar__filter-item-container" }, this.getFilterItems())), h("ez-button", { class: "ez-padding-left--medium", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus", class: "ez-padding-right--small" }))));
+    if (this.mode !== "regular") {
+      return (h(Host, { "data-mode": this.mode }, this.getPersonalizedFilterVariableItems(), this.mode === 'button' && (h("ez-button", { class: "ez-margin-left--medium", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) }))));
+    }
+    return (h(Host, null, h("div", null, h("span", { class: "snk-filter-bar__title", title: this.title, "data-tooltip": this.title, "data-flow": "bottom" }, this.title)), h("ez-scroller", { class: "snk-filter-bar__scroller", direction: EzScrollDirection.HORIZONTAL, activeShadow: true, locked: this.scrollerLocked }, h("section", { class: "snk-filter-bar__filter-item-container" }, this.getFilterItems())), h("ez-button", { class: "ez-padding-left--medium", size: "small", label: this.getMessage('snkFilterBar.filters', undefined, 'Filtros'), onClick: this.showFilterModal.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus", class: "ez-padding-right--small" }))));
   }
   static get is() { return "snk-filter-bar"; }
   static get encapsulation() { return "scoped"; }
@@ -431,6 +485,23 @@ export class SnkFilterBar {
           "text": "Recebe o DataUnit do ambiente. Se n\u00E3o for informado, procura pela refer\u00EAncia\ndo SnkDataUnit. Necess\u00E1rio para se registrar como provedor de filtros."
         }
       },
+      "title": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "T\u00EDtulo que ser\u00E1 apresentado na barra de filtros"
+        },
+        "attribute": "title",
+        "reflect": false
+      },
       "configName": {
         "type": "string",
         "mutable": false,
@@ -465,6 +536,24 @@ export class SnkFilterBar {
         "attribute": "resource-i-d",
         "reflect": false
       },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"regular\" | \"button\" | \"hidden\"",
+          "resolved": "\"button\" | \"hidden\" | \"regular\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Modo de apresenta\u00E7\u00E3o da filterbar."
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "\"regular\""
+      },
       "filterConfig": {
         "type": "unknown",
         "mutable": true,
@@ -507,6 +596,40 @@ export class SnkFilterBar {
           "tags": [],
           "text": "Respons\u00E1vel por flexibilizar e padronizar o uso de mensagens nos blocos de constru\u00E7\u00E3o."
         }
+      },
+      "disablePersonalizedFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Desabilita a apresenta\u00E7\u00E3o da op\u00E7\u00E3o de filtros personalizados na filter bar (chip de filtros)\ne no modal lateral de filtros (container de filtros personalizados)."
+        },
+        "attribute": "disable-personalized-filter",
+        "reflect": false
+      },
+      "filterBarLegacyConfigName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Chave da configura\u00E7\u00E3o legado da barra de filtros."
+        },
+        "attribute": "filter-bar-legacy-config-name",
+        "reflect": false
       }
     };
   }
@@ -668,6 +791,37 @@ export class SnkFilterBar {
               "text": "- Retorna o item de filtro removido, ou undefined caso n\u00E3o encontrado."
             }]
         }
+      },
+      "showFilterModal": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "SnkFilterItemConfig": {
+              "location": "import",
+              "path": "./filter-item/snk-filter-item"
+            },
+            "Array": {
+              "location": "global"
+            },
+            "SnkFilterModalFactoryParams": {
+              "location": "import",
+              "path": "./utils/SnkFilterModalFactory"
+            },
+            "IPersonalizedFilter": {
+              "location": "import",
+              "path": "../snk-personalized-filter/interfaces/IPersonalizedFilter"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Abre o modal de filtros",
+          "tags": []
+        }
       }
     };
   }

package/dist/collection/components/snk-filter-bar/utils/SnkFilterModalFactory.js

@@ -1,10 +1,11 @@
 import { ApplicationUtils } from "@sankhyalabs/ezui/dist/collection/utils";
 class SnkFilterModalFactory {
-  constructor({ filterConfig, configName, onComplete, getMessage, onAddPersonalizedFilter, onEditPersonalizedFilter, onDeletePersonalizedFilter }) {
+  constructor({ filterConfig, configName, onComplete, getMessage, disablePersonalizedFilter, onAddPersonalizedFilter, onEditPersonalizedFilter, onDeletePersonalizedFilter }) {
     this._filterConfig = filterConfig;
     this._configName = configName;
     this._onComplete = onComplete;
     this._getMessage = getMessage;
+    this._disablePersonalizedFilter = disablePersonalizedFilter;
     this._addPersonalizedFilterFn = onAddPersonalizedFilter;
     this._editPersonalizedFilterFn = onEditPersonalizedFilter;
     this._onDeletePersonalizedFilter = onDeletePersonalizedFilter;
@@ -18,6 +19,7 @@ class SnkFilterModalFactory {
     filterModal.className = "ez-size-height--full";
     filterModal.filters = this._filterConfig;
     filterModal.configName = this._configName;
+    filterModal.disablePersonalizedFilter = this._disablePersonalizedFilter;
     filterModal.getMessage = this._getMessage.bind(this);
     filterModal.applyFilters = this.applyFilters.bind(this);
     filterModal.closeModal = () => this._closeModal();

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

@@ -1,6 +1,6 @@
 import { ElementIDUtils } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
-import { SnkFormConfigManager } from './SnkFormConfigManager';
+import { SnkFormConfigManager } from '../snk-form-config/SnkFormConfigManager';
 import ResourceIDUtils from '../../lib/resourceid/ResourceIDUtils';
 export class SnkForm {
   constructor() {
@@ -11,6 +11,7 @@ export class SnkForm {
     this.configName = undefined;
     this.recordsValidator = undefined;
     this.messagesBuilder = undefined;
+    this.formLegacyConfigName = undefined;
     this.resourceID = undefined;
   }
   /**
@@ -58,8 +59,14 @@ export class SnkForm {
       this.resourceID = await ResourceIDUtils.getResourceID();
     }
     this._configManager = new SnkFormConfigManager(this.configName, this.resourceID);
+    this.addFormLegacyConfig();
     this._configManager.loadConfig();
   }
+  addFormLegacyConfig() {
+    if (this.formLegacyConfigName) {
+      this._configManager.addFormLegacyConfig(this.formLegacyConfigName);
+    }
+  }
   render() {
     if (!this._dataUnit || !this._dataState) {
       return undefined;
@@ -138,6 +145,23 @@ export class SnkForm {
           "text": "Respons\u00E1vel por flexibilizar e padronizar o uso de mensagens nos blocos de constru\u00E7\u00E3o."
         }
       },
+      "formLegacyConfigName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Chave da configura\u00E7\u00E3o legado do formul\u00E1rio."
+        },
+        "attribute": "form-legacy-config-name",
+        "reflect": false
+      },
       "resourceID": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/{snk-form → snk-form-config}/SnkFormConfigManager.js

@@ -1,4 +1,4 @@
-import { ConfigStorage } from "../../lib/configs/ConfigStorage";
+import { ConfigStorage } from '../../lib/configs/ConfigStorage';
 import { ObjectUtils, StringUtils } from "@sankhyalabs/core";
 import { FormConfigFetcher } from "../../lib/http/data-fetcher/fetchers/form-config-fetcher";
 export class SnkFormConfigManager {
@@ -7,6 +7,11 @@ export class SnkFormConfigManager {
     this._configName = configName;
     this._onConfigChange = onConfigChange;
   }
+  addFormLegacyConfig(legacyConfigName) {
+    if (this._configName) {
+      ConfigStorage.addFormLegacyConfig(this._configName, legacyConfigName);
+    }
+  }
   async loadConfig() {
     return new Promise(resolve => {
       ConfigStorage.loadFormConfig(this._configName, this._resourceID)
@@ -92,16 +97,19 @@ export class SnkFormConfigManager {
     const normalizedFilter = StringUtils.replaceAccentuatedCharsLower(descriptionFilter.toLocaleLowerCase());
     return normalizedText.includes(normalizedFilter);
   }
-  getInsertionConfig(dataUnit) {
-    const fields = this.getFieldsList(dataUnit).filter(field => {
-      if (dataUnit) {
-        const def = dataUnit.getField(field.name);
-        if (def && def.readOnly) {
-          return false;
+  getInsertionConfig(dataUnit, ignoreReadOnlyFormFields) {
+    let fields = this.getFieldsList(dataUnit);
+    if (ignoreReadOnlyFormFields) {
+      fields = fields.filter(field => {
+        if (dataUnit) {
+          const def = dataUnit.getField(field.name);
+          if (def && def.readOnly) {
+            return false;
+          }
         }
-      }
-      return !field.readOnly;
-    });
+        return !field.readOnly;
+      });
+    }
     return Object.assign(Object.assign({}, this._config), { fields });
   }
   setConfig(config) {
@@ -121,8 +129,8 @@ export class SnkFormConfigManager {
       this._onConfigChange(Object.assign({}, this._config));
     }
   }
-  getConfig(insertionMode, dataUnit) {
-    return insertionMode ? this.getInsertionConfig(dataUnit) : Object.assign({}, this._config);
+  getConfig(insertionMode, dataUnit, ignoreReadOnlyFormFields) {
+    return insertionMode ? this.getInsertionConfig(dataUnit, ignoreReadOnlyFormFields !== null && ignoreReadOnlyFormFields !== void 0 ? ignoreReadOnlyFormFields : true) : Object.assign({}, this._config);
   }
   getFormConfigFetcher() {
     if (this._formConfigFetcher == undefined) {

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

@@ -1,9 +1,9 @@
 import { h, Host } from "@stencil/core";
 import { Sortable } from '@shopify/draggable';
-import { ObjectUtils, ArrayUtils, ElementIDUtils } from '@sankhyalabs/core';
+import { ObjectUtils, ArrayUtils, ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from "@sankhyalabs/ezui/dist/collection/utils";
-import { ACTION_CONFIG, CONFIG_EVENTS, CONFIG_SORTABLE_EVENTS, DEFAULT_TYPE, TAB_NAMES } from "../../../../lib/utils/constants";
-import { UserConfigType } from "../../../../lib/http/data-fetcher/fetchers/form-config-fetcher";
+import { ACTION_CONFIG, CONFIG_EVENTS, CONFIG_SORTABLE_EVENTS, DEFAULT_TYPE, TAB_NAMES } from "../../lib/utils/constants";
+import { UserConfigType } from "../../lib/http/data-fetcher/fetchers/form-config-fetcher";
 import { buildFormConfigFromDataUnit } from "@sankhyalabs/ezui/dist/collection/utils/form";
 const CONTAINER_ID = {
   collapsibleBox: "EZ-COLLAPSIBLE-BOX",
@@ -25,6 +25,7 @@ export class SnkFormConfig {
     this._formFieldsStyle = "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding-right--small ez-padding-bottom--medium sc-snk-form-config";
     this._fieldsAvailableStyle = "ez-col ez-col--sd-12 ez-col--tb-12 ez-margin-bottom--medium ez-margin-right--medium sc-snk-form-config";
     this._fieldFloatingStyle = "form-config__field-config--dragged";
+    this._sortableTimer = 100;
     this._formConfigOptions = [];
     this._fieldConfigSelected = undefined;
     this._layoutFormConfig = undefined;
@@ -39,20 +40,27 @@ export class SnkFormConfig {
     this.messagesBuilder = undefined;
   }
   observeConfigManager() {
-    this.loadConfig();
+    this.loadConfig(this._sortableTimer);
   }
-  loadFields() {
+  loadFields(updateTimer = 0) {
     this._layoutFormConfig = [];
-    this.buildFields();
+    if (updateTimer > 0) {
+      setTimeout(() => {
+        this.buildFields();
+      }, updateTimer);
+    }
+    else {
+      this.buildFields();
+    }
   }
   buildFields() {
     this.buildFormConfig();
     this.buildAvailableFields();
   }
-  loadFormConfig() {
+  loadFormConfig(updateTimer) {
     var _a;
     this._formConfig = this.getConfig();
-    this.loadFields();
+    this.loadFields(updateTimer);
     this.controlFieldConfig();
     if (((_a = this._filterFieldsAvailable) === null || _a === void 0 ? void 0 : _a.value) != undefined) {
       this._filterFieldsAvailable.value = "";
@@ -95,12 +103,12 @@ export class SnkFormConfig {
     }
   }
   resetChangeConfig() {
-    this.loadFormConfig();
+    this.loadFormConfig(this._sortableTimer);
     this.clearTempGroups();
   }
   resetChangeOptionConfig() {
     this._formConfigChanged = false;
-    this.loadConfig();
+    this.loadConfig(this._sortableTimer);
     this.clearTempGroups();
   }
   getTabsToSave() {
@@ -318,7 +326,9 @@ export class SnkFormConfig {
       && oldContainer.id === newContainer.id) {
       evt.cancel();
       this._fieldsAvailable = [];
-      this.buildAvailableFields();
+      setTimeout(() => {
+        this.buildAvailableFields();
+      }, this._sortableTimer);
       return true;
     }
     return false;
@@ -361,7 +371,11 @@ export class SnkFormConfig {
         if (isNewGroup) {
           this.clearTempGroups(true);
         }
-        this.updateFieldsToSave();
+        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._renderTimer);
       return true;
     }
@@ -391,12 +405,12 @@ export class SnkFormConfig {
       return;
     }
   }
-  updateFieldsToSave() {
+  updateFieldsToSave(updateTimer = 0) {
     const fields = this.getFieldsToSave();
     if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
       this._formConfig.fields = fields;
     }
-    this.loadFields();
+    this.loadFields(updateTimer);
     this._formConfigChanged = true;
   }
   controlSortableField() {
@@ -426,7 +440,7 @@ export class SnkFormConfig {
   controlStopDraggingGroup(evt) {
     if (evt.data.newIndex !== evt.data.oldIndex) {
       setTimeout(() => {
-        this.updateFieldsToSave();
+        this.updateFieldsToSave(this._sortableTimer);
       }, this._renderTimer);
     }
   }
@@ -499,7 +513,7 @@ export class SnkFormConfig {
     });
     if (tabs.length > 0) {
       this._formConfig.tabs = tabs;
-      this.loadFields();
+      this.loadFields(this._sortableTimer);
       this.controlFieldConfig();
       this._formConfigChanged = true;
     }
@@ -523,13 +537,13 @@ export class SnkFormConfig {
     if (config != undefined) {
       this._formConfig = config;
       this._tabSelected = 1;
-      this.loadFields();
+      this.loadFields(this._sortableTimer);
       this.controlFieldConfig();
       this.clearTempGroups();
     }
   }
-  loadConfig() {
-    this.loadFormConfig();
+  loadConfig(updateTimer = 0) {
+    this.loadFormConfig(updateTimer);
     this.loadUserConfig();
   }
   addNewGroup() {
@@ -570,7 +584,7 @@ export class SnkFormConfig {
       });
     }
     else {
-      this.updateFieldsToSave();
+      this.updateFieldsToSave(this._sortableTimer);
     }
   }
   checkGroupExists(newLabel, indexGroup, isTempGroup = false) {
@@ -616,7 +630,7 @@ export class SnkFormConfig {
         field.group = newLabel;
       }
     });
-    this.loadFields();
+    this.loadFields(this._sortableTimer);
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -830,14 +844,14 @@ export class SnkFormConfig {
     this._formConfigChanged = true;
     this.resetSortables();
   }
-  controlRemoveFieldConfig(fieldConfig) {
+  controlRemoveFieldConfig(fieldConfig, updateTimer) {
     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();
+    this.loadFields(updateTimer);
     this.controlFieldConfig();
     this._formConfigChanged = true;
     this.resetSortables();
@@ -846,14 +860,14 @@ export class SnkFormConfig {
     this.controlSortableField();
     this.controlSortableGroup();
   }
-  handleFieldConfigChange(evt) {
+  handleFieldConfigChange(evt, updateTimer = 0) {
     const { field: fieldConfig, type: actionType } = evt.detail;
     if (actionType === ACTION_CONFIG.configuration) {
       this.controlFieldConfig(fieldConfig);
       return;
     }
     if (actionType === ACTION_CONFIG.remove) {
-      this.controlRemoveFieldConfig(fieldConfig);
+      this.controlRemoveFieldConfig(fieldConfig, updateTimer);
       return;
     }
     if (actionType === ACTION_CONFIG.add) {
@@ -874,7 +888,7 @@ export class SnkFormConfig {
         tab.label = newLabel;
       }
     });
-    this.loadFields();
+    this.loadFields(this._sortableTimer);
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -894,7 +908,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.loadFields(this._sortableTimer);
         this.controlFieldConfig();
         this._formConfigChanged = true;
       }
@@ -907,7 +921,7 @@ export class SnkFormConfig {
         tab.visible = !tab.visible;
       }
     });
-    this.loadFields();
+    this.loadFields(this._sortableTimer);
     this.controlFieldConfig();
     this._formConfigChanged = true;
   }
@@ -932,6 +946,12 @@ export class SnkFormConfig {
     this.controlSortableField();
     this.controlSortableGroup();
   }
+  async componentWillRender() {
+    if (this.messagesBuilder == undefined) {
+      const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      this.messagesBuilder = application.messagesBuilder;
+    }
+  }
   componentWillLoad() {
     this.loadConfig();
   }
@@ -1005,7 +1025,7 @@ export class SnkFormConfig {
           "references": {
             "SnkFormConfigManager": {
               "location": "import",
-              "path": "../../SnkFormConfigManager"
+              "path": "./SnkFormConfigManager"
             }
           }
         },
@@ -1025,7 +1045,7 @@ export class SnkFormConfig {
           "references": {
             "SnkMessageBuilder": {
               "location": "import",
-              "path": "../../../../lib/message/SnkMessageBuilder"
+              "path": "../../lib/message/SnkMessageBuilder"
             }
           }
         },