@sankhyalabs/sankhyablocks 8.16.0-dev.12 → 8.16.0-dev.120

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

@@ -1,986 +1,282 @@
-import { h, Host } from "@stencil/core";
-import { Sortable } from '@shopify/draggable';
-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 { buildFormConfigFromDataUnit } from "@sankhyalabs/ezui/dist/collection/utils/form";
-const CONTAINER_ID = {
-  collapsibleBox: "EZ-COLLAPSIBLE-BOX",
-  withoutGroup: "fieldsWithoutGroupContainer",
-  fieldsAvailable: "fieldsAvailableContainer",
-  addNewGroup: "addNewGroupContainer"
-};
+import { h, Host } from '@stencil/core';
+import { ApplicationContext, ObjectUtils } from '@sankhyalabs/core';
+import { buildFormConfigFromDataUnit } from '@sankhyalabs/ezui/dist/collection/utils/form';
+import { updateTabInFieldsFromGroupList, buildGuides, buildGuidesMap, buildNewGuideName, getFieldsToSave, } from './FormConfigHelper';
+import { GROUP_NAMES, TAB_NAMES } from '../../lib/utils/constants';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+import { UserConfigType } from '../../lib/http/data-fetcher/fetchers/form-config-fetcher';
 export class SnkFormConfig {
   constructor() {
-    this._listEnabledFields = [];
-    this._renderTimer = 500;
-    this._tabSelected = 1;
-    this._labelNewGroup = "Novo grupo";
-    this._mouseOnFieldConfig = false;
-    this._mouseOnConfigOptions = false;
-    this._editingTitleGroup = false;
-    this._newGroupBoxes = [];
-    this._currentGroupBoxes = [];
-    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;
-    this._fieldsAvailable = undefined;
+    this.guidesMap = new Map();
+    this.availableFields = [];
+    this.guidesList = [];
+    this.groupsList = [];
+    this.selectedGuide = undefined;
     this._formConfig = {};
-    this._formConfigChanged = false;
-    this._optionFormConfigSelected = undefined;
-    this._optionFormConfigChanged = false;
-    this._tempGroups = [];
+    this.configOptions = [];
+    this.originalConfigSelected = undefined;
+    this.configSelected = undefined;
+    this.hasChanges = false;
+    this.optionConfigChanged = false;
     this.dataUnit = undefined;
     this.configManager = undefined;
+    this.ignoreReadOnlyFormFields = undefined;
     this.messagesBuilder = undefined;
   }
-  observeConfigManager() {
-    this.loadConfig(this._sortableTimer);
-  }
-  loadFields(updateTimer = 0) {
-    this._layoutFormConfig = [];
-    if (updateTimer > 0) {
-      setTimeout(() => {
-        this.buildFields();
-      }, updateTimer);
-    }
-    else {
-      this.buildFields();
-    }
-  }
-  buildFields() {
-    this.buildFormConfig();
-    this.buildAvailableFields();
-  }
-  loadFormConfig(updateTimer) {
-    var _a;
-    this._formConfig = this.getConfig();
-    this.loadFields(updateTimer);
-    this.controlFieldConfig();
-    if (((_a = this._filterFieldsAvailable) === null || _a === void 0 ? void 0 : _a.value) != undefined) {
-      this._filterFieldsAvailable.value = "";
-    }
-  }
-  getConfig() {
-    let config = this.configManager.getConfig(this.dataUnit);
-    if (config.fields && config.fields.length === 0) {
-      config = undefined;
-    }
-    if (config == undefined) {
-      config = buildFormConfigFromDataUnit(this.dataUnit);
-    }
-    return ObjectUtils.copy(config);
-  }
-  cancelChangeConfig() {
-    if (this._formConfigChanged === true) {
-      this.openConfirmDialog(this.getMessage("snkFormConfig.confirm.cancel")).then((canCancel) => {
-        if (canCancel) {
-          this._formConfigChanged = false;
-          this.resetChangeConfig();
-        }
-      });
-    }
-    else {
-      this.resetChangeConfig();
-    }
+  handleFieldConfigChanged() {
+    this.hasChanges = true;
   }
-  cancelChangeOptionConfig() {
-    if (this._optionFormConfigChanged === true) {
-      this.openConfirmDialog(this.getMessage("snkFormConfig.confirm.cancel")).then((canCancel) => {
-        if (canCancel) {
-          this._optionFormConfigChanged = false;
-          this.resetChangeOptionConfig();
-        }
-      });
-    }
-    else {
-      this.resetChangeOptionConfig();
+  async handleFormConfigOptionSelected({ detail }) {
+    this.configSelected = detail;
+    await this.loadConfigByUser();
+    this.selectedGuide = undefined;
+    this.optionConfigChanged = !ObjectUtils.equals(this.configSelected, this.originalConfigSelected);
+    if (this.configSelected.origin === UserConfigType.DEFAULT) {
+      this.hasChanges = false;
     }
   }
-  resetChangeConfig() {
-    this.loadFormConfig(this._sortableTimer);
-    this.clearTempGroups();
-  }
-  resetChangeOptionConfig() {
-    this._formConfigChanged = false;
-    this.loadConfig(this._sortableTimer);
-    this.clearTempGroups();
-  }
-  getTabsToSave() {
-    return this._layoutFormConfig
-      .map((layoutConfig, index) => {
-      return {
-        label: layoutConfig.tab,
-        order: index,
-        visible: layoutConfig.visible
-      };
-    });
-  }
-  getFieldsToSave() {
-    const fields = [];
-    const snkFieldConfigs = this._formContainer.querySelectorAll('snk-field-config');
-    snkFieldConfigs.forEach((snkField) => {
-      const fieldConfig = snkField.fieldConfig;
-      if (fieldConfig == undefined) {
-        return;
-      }
-      const fieldToSave = {
-        cleanOnCopy: fieldConfig.cleanOnCopy || false,
-        group: fieldConfig.group,
-        label: fieldConfig.label,
-        name: fieldConfig.name,
-        required: fieldConfig.required,
-        readOnly: fieldConfig.readOnly,
-        tab: fieldConfig.tab
-      };
-      if (fieldConfig.defaultValue != undefined) {
-        if (fieldConfig.defaultValue.type == undefined) {
-          fieldToSave.defaultValue = {
-            type: DEFAULT_TYPE.fixed,
-            value: fieldConfig.defaultValue
-          };
-        }
-        else {
-          fieldToSave.defaultValue = fieldConfig.defaultValue;
-        }
-      }
-      fields.push(fieldToSave);
-    });
-    return fields;
-  }
-  isDefaultConfiguration() {
+  async handleAddFieldToGuide({ detail: fieldItem }) {
     var _a;
-    const optionSelected = (_a = this._optionFormConfigSelected) === null || _a === void 0 ? void 0 : _a.origin;
-    return optionSelected === UserConfigType.DEFAULT
-      && this._optionFormConfigChanged === true
-      && this._formConfigChanged === false;
-  }
-  buildConfigToSave() {
-    let formConfig = {};
-    const isDefault = this.isDefaultConfiguration();
-    if (isDefault) {
-      formConfig = this.getConfig();
-    }
-    else {
-      formConfig = ObjectUtils.copy(this._formConfig);
-    }
-    if (isDefault === false) {
-      const tabs = this.getTabsToSave();
-      if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) > 0) {
-        formConfig.tabs = tabs;
-      }
-      const fields = this.getFieldsToSave();
-      if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
-        formConfig.fields = fields;
-      }
-    }
-    formConfig.defaultConfiguration = isDefault;
-    return formConfig;
-  }
-  saveConfig() {
-    var _a;
-    if (((_a = this._tempGroups) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      ApplicationUtils.alert(this.getMessage("snkFormConfig.confirm.title"), this.getMessage("snkFormConfig.confirm.group"));
+    if (!this.selectedGuide) {
+      this.showNoGuideSelectedDialog();
       return;
     }
-    this._formConfigChanged = false;
-    this._optionFormConfigChanged = false;
-    this.configManager.saveConfig(this.buildConfigToSave())
-      .then(savedConfig => {
-      ApplicationUtils.info(this.getMessage("snkFormConfig.info.successfullyConfigSaved"), { iconName: "check" });
-      this.configChange.emit(savedConfig);
-    });
-  }
-  applyOptionConfig() {
-    if (this._optionFormConfigChanged === true && this._optionFormConfigSelected != undefined) {
-      const name = this._optionFormConfigSelected.name || "configuração selecionada";
-      const origin = this._optionFormConfigSelected.origin === UserConfigType.DEFAULT ? "pessoal" : "padrão";
-      const msg = this.getMessage("snkFormConfig.confirm.apply").replace('{0}', name).replace('{1}', origin);
-      this.openConfirmDialog(msg).then((canCancel) => {
-        if (canCancel) {
-          this.saveConfig();
-        }
-      });
-    }
-    else {
-      this.saveConfig();
-    }
+    this.availableFields = [...this.availableFields.filter(f => f.name !== fieldItem.name)];
+    await ((_a = this.refFieldsLayout) === null || _a === void 0 ? void 0 : _a.addFieldToLayout(fieldItem));
   }
-  controlFieldConfig(fieldConfig = undefined) {
-    var _a;
-    if (fieldConfig == undefined) {
-      this._fieldConfigSelected = undefined;
+  async handleSetFieldAsAvailable({ detail }) {
+    const hasField = this.availableFields.some(f => f.name === detail.name);
+    if (hasField)
       return;
-    }
-    if (((_a = this._fieldConfigSelected) === null || _a === void 0 ? void 0 : _a.name) === (fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.name)) {
-      this._fieldConfigSelected = undefined;
-    }
-    else {
-      this._fieldConfigSelected = fieldConfig;
-    }
-  }
-  getFieldConfigStyle(fieldConfig) {
-    var _a;
-    return this._formFieldsStyle +
-      (((_a = this._fieldConfigSelected) === null || _a === void 0 ? void 0 : _a.name) === fieldConfig.name ? " form-config__field-config--selected" : "");
+    this.availableFields = [...this.availableFields, detail];
   }
-  getFieldsByGroup(group) {
-    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, 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")))));
+  async handleRemoveFieldFromAvailable({ detail }) {
+    this.availableFields = this.availableFields.filter(f => f.name !== detail.name);
   }
-  handleconfigOptionsChanged(fieldEdited) {
+  observeSelectedGuide(guide) {
     var _a;
-    (_a = this._formConfig.fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
-      if (field.name === fieldEdited.name) {
-        field = fieldEdited;
-      }
-    });
-    this._formConfigChanged = true;
-  }
-  closeFormConfig() {
-    if (this._formConfigChanged === true || this._optionFormConfigChanged === true) {
-      this.openConfirmDialog(this.getMessage("snkFormConfig.confirm.exit")).then((canClose) => {
-        if (canClose) {
-          this._formConfigChanged = false;
-          this.configClose.emit();
-        }
-      });
-    }
-    else {
-      this.configClose.emit();
-    }
-  }
-  openConfirmDialog(msg = "", title = this.getMessage("snkFormConfig.confirm.title")) {
-    return ApplicationUtils.confirm(title, msg);
-  }
-  controlMoveField(evt) {
-    const element = evt === null || evt === void 0 ? void 0 : evt.target;
-    if ((element === null || element === void 0 ? void 0 : element.closest('[data-draggable-element="field"]')) != undefined) {
-      this._mouseOnFieldConfig = true;
-      if ((element === null || element === void 0 ? void 0 : element.closest(".form-config__config-options")) != undefined || (element === null || element === void 0 ? void 0 : element.closest('.field-config__options')) != undefined) {
-        this._mouseOnConfigOptions = true;
-      }
-      else {
-        const iconList = ['minus', 'settings-inverted', 'chevron-up'];
-        const iconName = element === null || element === void 0 ? void 0 : element.iconName;
-        if (iconList.includes(iconName) === false) {
-          this.controlFieldConfig();
-        }
-      }
-    }
+    const guideGroups = (_a = this.guidesMap.get(guide === null || guide === void 0 ? void 0 : guide.name)) !== null && _a !== void 0 ? _a : [];
+    this.groupsList = [...guideGroups];
   }
-  controlStartDraggingField(evt) {
-    var _a, _b, _c;
-    if (this._mouseOnConfigOptions) {
-      evt === null || evt === void 0 ? void 0 : evt.cancel();
-      this._mouseOnConfigOptions = false;
-    }
-    else {
-      const sourceContainer = (_c = (_b = (_a = evt === null || evt === void 0 ? void 0 : evt.data) === null || _a === void 0 ? void 0 : _a.dragEvent) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.sourceContainer;
-      if (sourceContainer != undefined) {
-        sourceContainer.classList.add(this._fieldFloatingStyle);
-      }
-    }
-  }
-  controlSortedDraggingField(evt) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const oldContainer = (_a = evt === null || evt === void 0 ? void 0 : evt.data) === null || _a === void 0 ? void 0 : _a.oldContainer;
-    const newContainer = (_b = evt === null || evt === void 0 ? void 0 : evt.data) === null || _b === void 0 ? void 0 : _b.newContainer;
-    const draggingElement = (_e = (_d = (_c = evt === null || evt === void 0 ? void 0 : evt.data) === null || _c === void 0 ? void 0 : _c.dragEvent) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.source;
-    const originalElement = (_h = (_g = (_f = evt === null || evt === void 0 ? void 0 : evt.data) === null || _f === void 0 ? void 0 : _f.dragEvent) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.originalSource;
-    if (oldContainer != undefined && newContainer != undefined && draggingElement != undefined && originalElement != undefined) {
-      if ((newContainer.tagName === CONTAINER_ID.collapsibleBox
-        || newContainer.id === CONTAINER_ID.withoutGroup)
-        && oldContainer.id === CONTAINER_ID.fieldsAvailable) {
-        draggingElement.className = this._formFieldsStyle;
-        draggingElement.querySelector('snk-field-config').modeInsertion = false;
-        originalElement.className = this._formFieldsStyle;
-        originalElement.querySelector('snk-field-config').modeInsertion = false;
-      }
-      else if ((oldContainer.tagName === CONTAINER_ID.collapsibleBox
-        || oldContainer.id === CONTAINER_ID.withoutGroup)
-        && newContainer.id === CONTAINER_ID.fieldsAvailable) {
-        draggingElement.className = this._fieldsAvailableStyle;
-        draggingElement.querySelector('snk-field-config').modeInsertion = true;
-        originalElement.className = this._fieldsAvailableStyle;
-        originalElement.querySelector('snk-field-config').modeInsertion = true;
-      }
-    }
-  }
-  isCancelDragAvailableField(newContainer, oldContainer, evt) {
-    var _a, _b;
-    if (newContainer == undefined || oldContainer == undefined || evt == undefined) {
-      return false;
-    }
-    if (((_a = evt.data) === null || _a === void 0 ? void 0 : _a.newIndex) !== ((_b = evt.data) === null || _b === void 0 ? void 0 : _b.oldIndex)
-      && newContainer.id === CONTAINER_ID.fieldsAvailable
-      && oldContainer.id === newContainer.id) {
-      evt.cancel();
-      this._fieldsAvailable = [];
-      setTimeout(() => {
-        this.buildAvailableFields();
-      }, this._sortableTimer);
-      return true;
-    }
-    return false;
-  }
-  isRemoveField(newContainer, oldContainer, fieldConfig) {
-    if (newContainer == undefined || oldContainer == undefined || fieldConfig == undefined) {
-      return false;
-    }
-    if ((oldContainer.tagName === CONTAINER_ID.collapsibleBox
-      || oldContainer.id === CONTAINER_ID.withoutGroup)
-      && newContainer.id === CONTAINER_ID.fieldsAvailable) {
-      const eventDetail = {
-        detail: {
-          field: fieldConfig,
-          type: ACTION_CONFIG.remove
-        }
-      };
-      setTimeout(() => {
-        this.handleFieldConfigChange(eventDetail);
-      }, this._renderTimer);
-      return true;
-    }
-    return false;
+  observeConfigManager() {
+    this.loadFormConfig();
   }
-  isAddOrMoveField(newContainer, oldContainer, fieldConfig, data) {
-    var _a;
-    if (newContainer == undefined || oldContainer == undefined || fieldConfig == undefined || data == undefined) {
-      return false;
-    }
-    if (data.newIndex !== data.oldIndex
-      || oldContainer.dataset.groupName !== newContainer.dataset.groupName
-      || (newContainer.id === CONTAINER_ID.withoutGroup
-        && oldContainer.id === CONTAINER_ID.fieldsAvailable)) {
-      if (this.isFieldAvailable(newContainer, oldContainer)) {
-        fieldConfig.tab = (_a = this._tabConfig) === null || _a === void 0 ? void 0 : _a.selectedTab;
-      }
-      fieldConfig.group = newContainer.dataset.groupName;
-      setTimeout(() => {
-        const isNewGroup = newContainer.id.includes(CONTAINER_ID.addNewGroup);
-        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._renderTimer);
-      return true;
-    }
-    return false;
+  showNoGuideSelectedDialog() {
+    const title = this.getMessage('snkFormConfig.noGuideSelected.title');
+    const message = this.getMessage('snkFormConfig.noGuideSelected.message');
+    ApplicationUtils.alert(title, message);
   }
-  isFieldAvailable(newContainer, oldContainer) {
-    if (newContainer == undefined || oldContainer == undefined) {
-      return false;
-    }
-    return (newContainer.tagName === CONTAINER_ID.collapsibleBox
-      || newContainer.id === CONTAINER_ID.withoutGroup)
-      && oldContainer.id === CONTAINER_ID.fieldsAvailable;
+  /**
+   * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
+   * através de um pequeno modulo na estrutura da aplicação:
+   * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
+   * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-form.msg.ts"
+   */
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
   }
-  controlStopDraggingField(evt) {
-    var _a, _b, _c, _d, _e, _f;
-    const oldContainer = (_a = evt === null || evt === void 0 ? void 0 : evt.data) === null || _a === void 0 ? void 0 : _a.oldContainer;
-    const newContainer = (_b = evt === null || evt === void 0 ? void 0 : evt.data) === null || _b === void 0 ? void 0 : _b.newContainer;
-    if (this.isCancelDragAvailableField(newContainer, oldContainer, evt)) {
-      return;
-    }
-    const originalElement = (_e = (_d = (_c = evt === null || evt === void 0 ? void 0 : evt.data) === null || _c === void 0 ? void 0 : _c.dragEvent) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.originalSource;
-    const fieldConfig = (_f = originalElement === null || originalElement === void 0 ? void 0 : originalElement.querySelector('snk-field-config')) === null || _f === void 0 ? void 0 : _f.fieldConfig;
-    if (this.isRemoveField(newContainer, oldContainer, fieldConfig)) {
-      return;
-    }
-    if (this.isAddOrMoveField(newContainer, oldContainer, fieldConfig, evt === null || evt === void 0 ? void 0 : evt.data)) {
+  async initializeUserConfig() {
+    if (this.configManager == undefined)
       return;
+    try {
+      const userConfig = await this.configManager.fetchUserAvailableConfigs();
+      this.configOptions = userConfig;
+      const isDefault = this._formConfig != undefined ? this._formConfig.defaultConfiguration : true;
+      const origin = (isDefault ? UserConfigType.DEFAULT : UserConfigType.USER);
+      this.configSelected = userConfig.find((config) => config.origin === origin);
+      this.originalConfigSelected = userConfig.find((config) => config.origin === origin);
     }
-  }
-  updateFieldsToSave(updateTimer = 0) {
-    const fields = this.getFieldsToSave();
-    if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
-      this._formConfig.fields = fields;
+    catch (error) {
+      console.error('Falha ao buscar configurações de formulário definida pelo usuário.');
+      console.error(error);
     }
-    this.loadFields(updateTimer);
-    this._formConfigChanged = true;
   }
-  controlSortableField() {
-    if (this._sortableContainer == undefined) {
+  async loadConfigByUser() {
+    if (!this.configManager || !this.configSelected)
       return;
+    if (this.isConfigDefaultSelected()) {
+      await this.handleLoadDefaultConfig();
     }
-    if (this._sortableField) {
-      this._sortableField.destroy();
-    }
-    this._sortableField = new Sortable(this._sortableContainer.querySelectorAll('[data-draggable-parent="field"]'), {
-      draggable: '[data-draggable-element="field"]',
-      mirror: {
-        constrainDimensions: true
-      },
-      distance: CONFIG_EVENTS.dragStartDistance
-    });
-    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingField(evt));
-    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragSorted, (evt) => this.controlSortedDraggingField(evt));
-    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingField(evt));
-  }
-  controlStartDraggingGroup(evt) {
-    if (this._mouseOnFieldConfig || this._editingTitleGroup) {
-      evt === null || evt === void 0 ? void 0 : evt.cancel();
-      this._mouseOnFieldConfig = false;
-    }
-  }
-  controlStopDraggingGroup(evt) {
-    if (evt.data.newIndex !== evt.data.oldIndex) {
-      setTimeout(() => {
-        this.updateFieldsToSave(this._sortableTimer);
-      }, this._renderTimer);
+    else {
+      this.loadFormConfig();
     }
   }
-  controlSortableGroup() {
-    if (this._sortableContainer == undefined) {
+  async handleLoadDefaultConfig() {
+    const defaultConfig = await this.configManager.fetchDefaultConfig();
+    if (defaultConfig) {
+      this.loadFormConfig(defaultConfig);
       return;
     }
-    if (this._sortableGroup) {
-      this._sortableGroup.destroy();
-    }
-    this._sortableGroup = new Sortable(this._sortableContainer.querySelectorAll('[data-draggable-parent="group"]'), {
-      draggable: '[data-draggable-element="group"]',
-      mirror: {
-        constrainDimensions: true
-      },
-      distance: CONFIG_EVENTS.dragStartDistance
-    });
-    this._sortableGroup.on(CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingGroup(evt));
-    this._sortableGroup.on(CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingGroup(evt));
-  }
-  loadUserConfig() {
-    if (this.configManager == undefined) {
-      return;
+    const emptyConfig = this.configManager.getEmptyConfig();
+    if (emptyConfig) {
+      this.loadFormConfig(emptyConfig);
     }
-    this.configManager.fetchUserAvailableConfigs()
-      .then((userConfig) => {
-      this._formConfigOptions = userConfig;
-      if (this._formConfigOptions == undefined) {
-        return;
-      }
-      let isDefault = this._formConfig != undefined ? this._formConfig.defaultConfiguration : true;
-      const selectedOption = userConfig
-        .find((config) => {
-        return config.origin === (isDefault ? UserConfigType.DEFAULT : UserConfigType.USER);
-      });
-      this.setFormConfig(selectedOption);
-    });
   }
-  setFormConfig(config) {
-    this._optionFormConfigSelected = config;
+  isConfigDefaultSelected() {
+    return this.configSelected.origin === UserConfigType.DEFAULT;
   }
-  controlSelectFormConfig(evt) {
-    const action = evt === null || evt === void 0 ? void 0 : evt.detail;
-    const selectedOption = this._formConfigOptions
-      .find((config) => {
-      return config.origin === (action === null || action === void 0 ? void 0 : action.value);
-    });
-    this.setFormConfig(selectedOption);
-    this._optionFormConfigChanged = true;
-    this.loadConfigByUser();
-  }
-  changeTabOrder(newIndex) {
-    const tabs = [];
-    const tabConfigs = this._tabConfig.querySelectorAll('.tab-config__tab');
-    this._tabSelected = newIndex;
-    tabConfigs.forEach((tabConfig, index) => {
-      var _a;
-      if (index) {
-        const label = (_a = tabConfig.querySelector('.tab-config__tab-label')) === null || _a === void 0 ? void 0 : _a.getAttribute('title');
-        tabs.push({
-          label,
-          order: (index - 1)
-        });
-      }
-    });
-    this._layoutFormConfig.map((tabLayout) => {
-      tabs.forEach((tab) => {
-        tab.label === tabLayout.tab && (tab.visible = tabLayout.visible);
-      });
-    });
-    if (tabs.length > 0) {
-      this._formConfig.tabs = tabs;
-      this.loadFields(this._sortableTimer);
-      this.controlFieldConfig();
-      this._formConfigChanged = true;
-    }
+  loadFormConfig(config) {
+    this._formConfig = config ? config : this.getConfig();
+    this.loadGuides();
+    this.initializeAvailableFields();
   }
-  async loadConfigByUser() {
-    if (this.configManager == undefined) {
-      return;
-    }
-    if (this._optionFormConfigSelected == undefined) {
+  initializeAvailableFields() {
+    var _a;
+    if (((_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.fields) == undefined)
       return;
-    }
-    let config;
-    switch (this._optionFormConfigSelected.origin) {
-      case UserConfigType.DEFAULT:
-        config = await this.configManager.fetchDefaultConfig();
-        break;
-      case UserConfigType.DEFAULT:
-        config = await this.configManager.fetchDefaultConfig();
-        break;
-    }
-    if (config != undefined) {
-      this._formConfig = config;
-      this._tabSelected = 1;
-      this.loadFields(this._sortableTimer);
-      this.controlFieldConfig();
-      this.clearTempGroups();
-    }
-  }
-  loadConfig(updateTimer = 0) {
-    this.loadFormConfig(updateTimer);
-    this.loadUserConfig();
-  }
-  addNewGroup() {
-    var _a, _b;
-    const tab = (_a = this._tabConfig) === null || _a === void 0 ? void 0 : _a.selectedTab;
-    const hasGroup = (_b = this._tempGroups) === null || _b === void 0 ? void 0 : _b.find((tempGroup) => {
-      return tempGroup.tab === tab && tempGroup.group.includes(this._labelNewGroup);
+    const fieldsFormConfig = [...this._formConfig.fields];
+    const fieldsMetadata = this.dataUnit.metadata.fields;
+    this.availableFields = fieldsMetadata.filter(({ name: fieldName, visible: fieldVisible, properties }) => {
+      const hasCfg = fieldsFormConfig.some(({ name: fieldFormName }) => fieldFormName === fieldName);
+      /**
+       * Quando a visibilidade de um campo é alterada pelo dataunit, mas o desenvolvedor deseja que o mesmo continue
+       * sendo apresentado no configurador, precisamos fazer essa tratativa, verificando se o campo não tem configuração
+       */
+      if (!hasCfg && properties.visibleOnConfig === true && !fieldVisible)
+        return properties.visibleOnConfig;
+      return fieldVisible === true && hasCfg === false;
     });
-    if (hasGroup == undefined) {
-      this._tempGroups.push({
-        tab,
-        group: this.handleDuplicateGroups(this._labelNewGroup, this._tabConfig.selectedTab)
-      });
-      this.loadFields();
-      this.controlFieldConfig();
-      this._formConfigChanged = true;
-    }
   }
-  clearTempGroups(clearInTab = false) {
+  loadGuides() {
     var _a;
-    if (((_a = this._tempGroups) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      if (clearInTab) {
-        this._tempGroups = this._tempGroups.filter((tempGroup) => {
-          return tempGroup.tab !== this._tabConfig.selectedTab;
-        });
-      }
-      else {
-        this._tempGroups = [];
-      }
-    }
+    this.guidesList = [...buildGuides(this._formConfig, this.getMessage('snkFormConfig.form.mainArea'))];
+    this.guidesMap = buildGuidesMap((_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.fields, this.guidesList, this.dataUnit, this.getMessage('snkFormConfig.form.tabGeneral'));
   }
-  removeGroup(indexTempGroup = undefined) {
-    if (indexTempGroup != undefined) {
-      this._tempGroups = this._tempGroups.filter((tempGroup, index) => {
-        return (index !== indexTempGroup
-          && tempGroup.tab === this._tabConfig.selectedTab)
-          || tempGroup.tab !== this._tabConfig.selectedTab;
-      });
-    }
-    else {
-      this.updateFieldsToSave(this._sortableTimer);
-    }
-  }
-  checkGroupExists(newLabel, indexGroup, isTempGroup = false) {
-    var _a, _b, _c;
-    const tabName = (_a = this._tabConfig) === null || _a === void 0 ? void 0 : _a.selectedTab;
-    const currentTab = (_b = this._layoutFormConfig) === null || _b === void 0 ? void 0 : _b.find(tab => tab.tab === tabName);
-    const tabGroupsNames = (_c = currentTab === null || currentTab === void 0 ? void 0 : currentTab.groups) === null || _c === void 0 ? void 0 : _c.map(tab => { var _a; return (_a = tab.group) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
-    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.infoValidTitle")}
-      `;
-      ApplicationUtils.alert(title, message)
-        .then(() => {
-        var _a, _b;
-        if (isTempGroup) {
-          (_a = this._newGroupBoxes[indexGroup]) === null || _a === void 0 ? void 0 : _a.applyFocusTextEdit();
-        }
-        else {
-          (_b = this._currentGroupBoxes[tabName][indexGroup]) === null || _b === void 0 ? void 0 : _b.applyFocusTextEdit();
-        }
-      });
-      return false;
+  getConfig() {
+    let config = this.configManager.getConfig(this.dataUnit, false);
+    if (config.fields && config.fields.length === 0) {
+      config = undefined;
     }
-    return true;
-  }
-  saveEditLabelTempGroup(editDetails, index) {
-    const { newValue: newLabel } = editDetails.detail;
-    if (this._newGroupBoxes != undefined && this._newGroupBoxes[index] != undefined) {
-      this._newGroupBoxes[index].dataset.groupName = newLabel;
+    if (config == undefined) {
+      config = buildFormConfigFromDataUnit(this.dataUnit);
     }
+    return ObjectUtils.copy(config);
   }
-  saveEditLabelGroup(editDetails) {
-    var _a;
-    const { value: oldLabel, newValue: newLabel } = editDetails.detail;
-    (_a = this._formConfig.fields) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
-      if (field.group === oldLabel) {
-        field.group = newLabel;
-      }
-    });
-    this.loadFields(this._sortableTimer);
-    this.controlFieldConfig();
-    this._formConfigChanged = true;
+  handleSelectGuide({ detail: selectedGuide }) {
+    this.selectedGuide = selectedGuide;
   }
-  renderTempGroupByTab(tabName) {
-    return this._tempGroups.map((tempGroup, indexGroup) => {
-      if (tempGroup.tab === tabName) {
-        return h("ez-collapsible-box", { ref: ref => this._newGroupBoxes[indexGroup] = ref, id: `${CONTAINER_ID.addNewGroup}-${indexGroup}`, editable: true, removable: true, "header-size": "large", label: tempGroup.group, "icon-placement": "left", "data-group-name": tempGroup.group, "data-draggable-parent": "field", class: "form-config__add-group", onEzRemove: () => this.removeGroup(indexGroup), onEzSaveEditLabel: (evt) => this.saveEditLabelTempGroup(evt, indexGroup), onEzEditLabelMode: (evt) => this._editingTitleGroup = evt.detail, conditionalSave: (newLabel) => this.checkGroupExists(newLabel, indexGroup, true) }, this.getFieldsByGroup(tempGroup));
-      }
-    });
+  handleLayoutChanged({ detail: newGroupList }) {
+    this.hasChanges = true;
+    this.groupsList = [...newGroupList];
+    this.guidesMap.set(this.selectedGuide.name, [...newGroupList]);
   }
-  handleDuplicateGroups(titleNewGroup, currentTab) {
+  getIsDefaultConfig() {
     var _a;
-    const selectedTabGroups = this._layoutFormConfig[this._tabConfig.selectedIndex].groups.map(tab => tab.group);
-    if (selectedTabGroups != undefined) {
-      (_a = this._layoutFormConfig) === null || _a === void 0 ? void 0 : _a.map(tab => {
-        if (tab.tab === currentTab) {
-          if (tab.groups.some(groups => groups.group === titleNewGroup)) {
-            titleNewGroup += `${this.captureHighestValueTitle(selectedTabGroups)}`;
-          }
-        }
-      });
-    }
-    return titleNewGroup;
+    const optionSelected = (_a = this.configSelected) === null || _a === void 0 ? void 0 : _a.origin;
+    return optionSelected === UserConfigType.DEFAULT
+      && this.optionConfigChanged === true
+      && this.hasChanges === false;
   }
-  captureHighestValueTitle(groupsTemp) {
-    let valuesNumericTitle = [];
-    groupsTemp === null || groupsTemp === void 0 ? void 0 : groupsTemp.map(group => {
-      if (group != undefined) {
-        valuesNumericTitle.push(group.replace(/[^0-9]/g, ''));
-      }
+  getTabsToSave() {
+    return this.guidesList.map(tab => {
+      return {
+        name: tab.name,
+        label: tab.name === TAB_NAMES.main ? tab.name : tab.label,
+        order: tab.name === TAB_NAMES.main ? 0 : tab.order,
+        visible: tab.visible,
+      };
     });
-    if (Math.max.apply(null, valuesNumericTitle) > 0) {
-      return ` (${Math.max.apply(null, valuesNumericTitle) + 1})`;
-    }
-    else {
-      return ' (1)';
-    }
-  }
-  getLayoutFormConfig() {
-    var _a, _b;
-    if (((_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.fields) == undefined) {
-      return;
-    }
-    let layoutFormConfig = [];
-    let fields = [];
-    for (const field of this._formConfig.fields) {
-      const hasField = fields.find((fieldTemp) => {
-        return field.name === fieldTemp.name && field.tab === fieldTemp.tab;
-      });
-      if (hasField == undefined) {
-        fields.push(field);
-        const fieldMD = this.dataUnit.getField(field.name);
-        if (fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.visible) {
-          if (field.label == undefined || field.label === "") {
-            field.label = fieldMD.label;
-          }
-          if (field.tab == undefined || field.tab === "") {
-            field.tab = this.getMessage("snkFormConfig.form.tabGeneral");
-          }
-          let tab = layoutFormConfig.find(value => value.tab === field.tab);
-          if (tab == undefined) {
-            let visible = null;
-            if (this._formConfig.tabs != undefined) {
-              const configTabs = this._formConfig.tabs.filter(configTab => configTab.label === field.tab);
-              if (configTabs.length > 0) {
-                visible = configTabs[0].visible;
-              }
-            }
-            const tabLabel = ((_b = field.tab) === null || _b === void 0 ? void 0 : _b.label) || field.tab;
-            if (visible !== null) {
-              tab = { tab: tabLabel, groups: [], visible };
-            }
-            else {
-              tab = { tab: tabLabel, groups: [], visible: true };
-            }
-            layoutFormConfig.push(tab);
-          }
-          const group = tab.groups.find(value => value.group === field.group);
-          if (group) {
-            group.fields.push(field);
-          }
-          else {
-            const newGroup = { group: field.group, fields: [field] };
-            if (field.group === undefined) {
-              tab.groups.unshift(newGroup);
-            }
-            else {
-              tab.groups.push(newGroup);
-            }
-          }
-        }
-      }
-    }
-    return layoutFormConfig;
   }
-  configureTabs(layoutFormConfig) {
+  async handleSaveConfig() {
     var _a;
-    if (((_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.tabs) == undefined) {
-      return layoutFormConfig;
-    }
-    if (layoutFormConfig == undefined) {
-      layoutFormConfig = [];
-    }
-    return this._formConfig.tabs.map((tab) => {
-      return layoutFormConfig.find(config => { var _a, _b; return ((_a = tab.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = config.tab) === null || _b === void 0 ? void 0 : _b.toLowerCase()); })
-        || { tab: tab.label, groups: [], visible: tab.visible };
+    const savedConfig = await this.configManager.saveConfig(this.buildConfigToSave());
+    this.configSelected = (_a = this.configOptions) === null || _a === void 0 ? void 0 : _a.find((config) => {
+      return config.origin === (this.hasChanges ? UserConfigType.USER : UserConfigType.DEFAULT);
     });
+    this.originalConfigSelected = this.configSelected;
+    this.hasChanges = false;
+    this.optionConfigChanged = false;
+    ApplicationUtils.info(this.getMessage('snkFormConfig.info.successfullyConfigSaved'), { iconName: 'check' });
+    this.configChange.emit(savedConfig);
   }
-  configureTabMain(layoutFormConfig) {
-    if (layoutFormConfig == undefined) {
-      layoutFormConfig = [];
-    }
-    const hasTabMain = layoutFormConfig.find((layoutTab) => {
-      return layoutTab.tab === TAB_NAMES.main;
-    });
-    if (hasTabMain == undefined) {
-      layoutFormConfig.unshift({ tab: TAB_NAMES.main, groups: [], visible: true });
-    }
-    return layoutFormConfig;
+  buildConfigToSave() {
+    if (this.getIsDefaultConfig()) {
+      const formConfig = this._formConfig;
+      formConfig.defaultConfiguration = true;
+      return formConfig;
+    }
+    const formConfig = ObjectUtils.copy(this._formConfig);
+    formConfig.tabs = this.getTabsToSave();
+    formConfig.fields = getFieldsToSave(this.guidesMap);
+    formConfig.defaultConfiguration = false;
+    return formConfig;
   }
-  updateTabs() {
-    const tabs = this.getTabsToSave();
-    if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) > 0) {
-      this._formConfig.tabs = tabs;
-      if (tabs.length === 1) {
-        this._tabSelected = 0;
-      }
-    }
+  handleAvailableFieldListChanged({ detail: updatedList }) {
+    this.availableFields = [...updatedList];
   }
-  buildFormConfig() {
-    var _a;
-    if (((_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.fields) == undefined) {
-      return;
-    }
-    let layoutFormConfig = this.getLayoutFormConfig();
-    layoutFormConfig = this.configureTabs(layoutFormConfig);
-    layoutFormConfig = this.configureTabMain(layoutFormConfig);
-    this._layoutFormConfig = layoutFormConfig;
-    this.updateTabs();
+  handleSetFieldListAsAvailable({ detail: updatedList }) {
+    this.availableFields = [...this.availableFields, ...updatedList];
   }
-  buildAvailableFields() {
+  handleGuideDeleted({ detail: guide }) {
     var _a, _b;
-    if (((_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.fields) == undefined) {
-      return;
-    }
-    let fieldsFormConfig = [];
-    let fieldsMetadata = this.dataUnit.metadata.fields;
-    for (const field of this._formConfig.fields) {
-      fieldsFormConfig.push(field);
-    }
-    const listFieldsAvailable = fieldsMetadata.filter(({ name: _nameFieldMetadado, visible: _visibleMetadado }) => _visibleMetadado === true
-      && fieldsFormConfig.some(({ name: _nameFieldForm }) => _nameFieldForm === _nameFieldMetadado) === false);
-    this._fieldsAvailable = listFieldsAvailable;
-    this._listEnabledFields = listFieldsAvailable;
-    if (((_b = this._filterFieldsAvailable) === null || _b === void 0 ? void 0 : _b.value) != undefined) {
-      const filterValue = this._filterFieldsAvailable.value;
-      this.onFilterChange(filterValue);
-    }
-  }
-  changeTabSelected(tabSelected) {
-    this._tabSelected = tabSelected.index;
-    const selectorTab = this._formContainer.querySelector("div#tab" + tabSelected.index);
-    this._formContainer.querySelectorAll(".form-config__tab-content").forEach(container => container.className = "form-config__hide-content sc-snk-form-config");
-    if (selectorTab) {
-      selectorTab.className = "form-config__tab-content ez-flex ez-flex--column ez-size-width--full ez-padding--medium sc-snk-form-config";
-    }
-  }
-  onFilterChange(value) {
-    this._fieldsAvailable = ArrayUtils.applyStringFilter(value, this._listEnabledFields, true, "label");
-  }
-  orderFieldsAvailable(fields) {
-    return ArrayUtils.sortAlphabetically(fields);
-  }
-  handleLabelCounter(sizeList) {
-    const labels = [this.getMessage("snkFormConfig.availableFields.labelNoFields"), this.getMessage("snkFormConfig.availableFields.labelOneField")];
-    return sizeList > 1 ? `${sizeList} ${this.getMessage("snkFormConfig.availableFields.labelAvailableFields")}` : labels[sizeList];
-  }
-  controlAddFieldConfig(fieldConfig) {
-    var _a;
-    this._formConfigChanged = false;
-    if (fieldConfig == undefined) {
-      return;
-    }
-    if (this._formConfig.fields == undefined) {
-      this._formConfig.fields = [];
-    }
-    const fieldFinded = this._formConfig.fields.filter((field) => {
-      return field.name === fieldConfig.name && field.tab && fieldConfig.tab;
-    });
-    if (fieldFinded.length > 0) {
-      fieldFinded.forEach((field) => {
-        field.name = fieldConfig.name;
-        field.label = fieldConfig.label;
-        field.required = fieldConfig.required;
-        field.readOnly = fieldConfig.readOnly;
-        field.group = fieldConfig.group;
-      });
-    }
-    else {
-      this._formConfig.fields.push({
-        name: fieldConfig.name,
-        label: fieldConfig.label,
-        required: fieldConfig.required,
-        readOnly: fieldConfig.readOnly,
-        group: fieldConfig.group,
-        tab: (_a = this._tabConfig) === null || _a === void 0 ? void 0 : _a.selectedTab
-      });
-    }
-    this.loadFields();
-    this.controlFieldConfig();
-    this._formConfigChanged = true;
-    this.resetSortables();
-  }
-  controlRemoveFieldConfig(fieldConfig, updateTimer) {
+    const guideName = guide.name;
+    const guideGroups = (_a = this.guidesMap.get(guideName)) !== null && _a !== void 0 ? _a : [];
+    const fieldsToAvailable = [];
+    guideGroups.forEach(group => fieldsToAvailable.push(...group.fields));
+    this.availableFields = [...this.availableFields, ...fieldsToAvailable];
+    this.guidesList = [...this.guidesList.filter(g => g.name !== guideName)];
+    this.guidesMap.delete(guideName);
+    if (((_b = this.selectedGuide) === null || _b === void 0 ? void 0 : _b.name) === guideName) {
+      this.selectedGuide = undefined;
+    }
+    this.hasChanges = true;
+  }
+  handleGuideListChanged({ detail: updatedList }) {
+    this.hasChanges = true;
+    this.guidesList = [...updatedList];
+  }
+  handleGuideRenamed({ detail: updatedName }) {
     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.controlFieldConfig();
-    this._formConfigChanged = true;
-    this.resetSortables();
-  }
-  resetSortables() {
-    this.controlSortableField();
-    this.controlSortableGroup();
-  }
-  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, updateTimer);
-      return;
-    }
-    if (actionType === ACTION_CONFIG.add) {
-      this.controlAddFieldConfig(fieldConfig);
-      return;
-    }
-  }
-  changeTabLabel(editDetails) {
-    var _a, _b;
-    const { value: oldLabel, newValue: newLabel } = editDetails.detail.detail;
-    (_a = this._formConfig.fields) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
-      if (field.tab === oldLabel) {
-        field.tab = newLabel;
-      }
-    });
-    (_b = this._formConfig.tabs) === null || _b === void 0 ? void 0 : _b.forEach((tab) => {
-      if (tab.label === oldLabel) {
-        tab.label = newLabel;
-      }
-    });
-    this.loadFields(this._sortableTimer);
-    this.controlFieldConfig();
-    this._formConfigChanged = true;
-  }
-  handleDeleteTab(tabSelected) {
-    let options = {
-      canClose: false,
-      labelCancel: this.getMessage("snkFormConfig.confirm.labelCancel"),
-      labelConfirm: this.getMessage("snkFormConfig.confirm.labelDelete"),
-      btnConfirmDanger: false
+    const guideGroups = (_a = this.guidesMap.get(this.selectedGuide.name)) !== null && _a !== void 0 ? _a : [];
+    const updatedGroups = updateTabInFieldsFromGroupList(guideGroups, updatedName);
+    this.guidesMap.delete(this.selectedGuide.name);
+    this.guidesMap.set(updatedName, updatedGroups);
+    const updatedGuide = {
+      name: updatedName,
+      label: updatedName,
+      visible: this.selectedGuide.visible,
+      order: this.selectedGuide.order,
     };
-    const title = this.getMessage("snkFormConfig.confirm.title");
-    const deleteTab = this.getMessage("snkFormConfig.confirm.deleteTab") + ` <b>${tabSelected.detail.label}</b>?`;
-    ApplicationUtils.confirm(title, deleteTab, null, DialogType.WARN, options)
-      .then(response => {
-      var _a;
-      if (response) {
-        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.controlFieldConfig();
-        this._formConfigChanged = true;
-      }
-    });
-  }
-  changeHideTab(tabSelected) {
-    var _a;
-    (_a = this._formConfig.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => {
-      if (tab.label === tabSelected.detail.label) {
-        tab.visible = !tab.visible;
-      }
-    });
-    this.loadFields(this._sortableTimer);
-    this.controlFieldConfig();
-    this._formConfigChanged = true;
-  }
-  handleCanStartDragTab() {
-    var _a, _b;
-    const tabs = this._layoutFormConfig.map(tab => tab.tab);
-    for (const tab of tabs) {
-      (_a = this._currentGroupBoxes[tab]) === null || _a === void 0 ? void 0 : _a.map(collapsibleBox => collapsibleBox === null || collapsibleBox === void 0 ? void 0 : collapsibleBox.cancelEdition());
-    }
-    (_b = this._newGroupBoxes) === null || _b === void 0 ? void 0 : _b.map(collapsibleBox => collapsibleBox === null || collapsibleBox === void 0 ? void 0 : collapsibleBox.cancelEdition());
-  }
-  /**
-   * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
-   * através de um pequeno modulo na estrutura da aplicação:
-   * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
-   * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-form.msg.ts"
-   */
-  getMessage(key, params) {
-    return this.messagesBuilder.getMessage(key, params);
+    this.guidesList = [...this.guidesList.map(guide => (guide.name === this.selectedGuide.name) ? updatedGuide : guide)];
+    this.groupsList = [...updatedGroups];
+    this.selectedGuide = updatedGuide;
+    this.hasChanges = true;
+  }
+  handleCreateNewGuide() {
+    const newGuideName = buildNewGuideName(this.guidesList);
+    const newGuide = {
+      name: newGuideName,
+      label: newGuideName,
+      visible: true,
+      order: this.guidesList.length + 1,
+    };
+    const newGuideFixedGroup = {
+      name: GROUP_NAMES.noGroup,
+      fields: [],
+    };
+    this.guidesList = [...this.guidesList, newGuide];
+    this.guidesMap.set(newGuideName, [newGuideFixedGroup]);
+    this.selectedGuide = newGuide;
+    this.hasChanges = true;
   }
-  componentDidRender() {
-    this.controlSortableField();
-    this.controlSortableGroup();
+  getGuideNames() {
+    return [
+      ...this.guidesList.map(g => g.name.toLowerCase()),
+      this.getMessage('snkFormConfig.form.mainArea').toLowerCase(),
+    ];
   }
   async componentWillRender() {
     if (this.messagesBuilder == undefined) {
-      const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+      const application = ApplicationContext.getContextValue('__SNK__APPLICATION__');
       this.messagesBuilder = application.messagesBuilder;
     }
   }
-  componentWillLoad() {
-    this.loadConfig();
-  }
-  componentDidLoad() {
-    const dataInfo = { dataUnit: this.dataUnit };
-    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  async componentWillLoad() {
+    this.loadFormConfig();
+    await this.initializeUserConfig();
   }
   render() {
-    var _a, _b, _c, _d;
-    return (h(Host, null, h("div", { class: "ez-row ez-padding--medium" }, h("div", { class: "ez-col ez-col--sd-7 ez-col--tb-9 ez-align--middle" }, h("ez-button", { mode: "icon", title: this.getMessage("snkFormConfig.goBackTitle"), iconName: "arrow_back", class: "ez-padding--small", size: "small", onClick: () => this.closeFormConfig(), id: "formConfigToBack" }), h("h1", { class: "ez-title ez-title--primary ez-title--extra-large ez-padding--small" }, this.getMessage("snkFormConfig.title")), this._formConfigOptions &&
-      h("ez-actions-button", { class: "form-config__actions-button ez-margin-left--medium", value: (_a = this._optionFormConfigSelected) === null || _a === void 0 ? void 0 : _a.origin, showLabel: true, displayIcon: "chevron-down", checkOption: true, size: "small", actions: this._formConfigOptions.map((option) => {
-          return { value: option.origin, label: option.name };
-        }), 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(), 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) {
-          if (this._currentGroupBoxes[tab.tab] == undefined) {
-            this._currentGroupBoxes[tab.tab] = [];
-          }
-          return h("ez-collapsible-box", { ref: ref => this._currentGroupBoxes[tab.tab][indexGroup] = ref, editable: true, removable: true, "header-size": "large", label: group.group, "icon-placement": "left", "data-group-name": group.group, "data-draggable-parent": "field", "data-draggable-element": "group", onEzRemove: () => this.removeGroup(), onEzSaveEditLabel: (evt) => this.saveEditLabelGroup(evt), onEzEditLabelMode: (evt) => this._editingTitleGroup = evt.detail, conditionalSave: (newLabel) => this.checkGroupExists(newLabel, indexGroup) }, this.getFieldsByGroup(group));
-        }
-        else {
-          return h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, h("label", { class: "ez-text ez-text--secondary ez-margin-vertical--small" }, this.getMessage("snkFormConfig.form.subTitleInfo")), h("div", { id: CONTAINER_ID.withoutGroup, class: "ez-row", "data-draggable-parent": "field" }, this.getFieldsByGroup(group)), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" }));
-        }
-      }), this.renderTempGroupByTab(tab.tab))), h("div", { class: "form-config__btn-add-group ez-row" }, h("div", { class: "form-config__btn-add-group-container ez-col ez-col--sd-12 ez-col--tb-12 ez-align--center" }, h("ez-button", { label: this.getMessage("snkFormConfig.form.labelNewGroup"), class: "ez-padding-horizontal--small ez-button--primary", size: "small", onClick: () => this.addNewGroup() }, h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "plus" })))))), h("div", { class: "form-config__fields-available ez-col ez-col--sd-3 ez-col--tb-3" }, h("section", { class: "ez-box__container ez-col ez-col--pn-12" }, h("h1", { class: "ez-title ez-title--large ez-title--primary ez-padding-bottom--medium" }, this.getMessage("snkFormConfig.availableFields.title")), h("ez-filter-input", { id: "searchFields", ref: ref => this._filterFieldsAvailable = ref, label: this.getMessage("snkFormConfig.availableFields.labelSearchField"), onEzChange: evt => this.onFilterChange(evt.detail) }), h("span", { class: "ez-box__label-counter ez-text ez-text--medium ez-text--primary ez-margin-bottom--medium" }, this.handleLabelCounter((_c = this._fieldsAvailable) === null || _c === void 0 ? void 0 : _c.length)), ((_d = this._layoutFormConfig) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
-      h("div", { id: CONTAINER_ID.fieldsAvailable, class: "ez-row", "data-draggable-parent": "field" }, this.orderFieldsAvailable(this._fieldsAvailable).map((field) => h("div", { key: field.name, class: this._fieldsAvailableStyle, "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { messagesBuilder: this.messagesBuilder, onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, dataUnit: this.dataUnit, fieldConfig: field, id: field.name })))))))));
+    return (h(Host, null, h("config-header", { configOptions: this.configOptions, selectedConfig: this.configSelected, messagesBuilder: this.messagesBuilder, hasChanges: this.hasChanges, optionConfigChanged: this.optionConfigChanged, onConfigClose: () => this.configClose.emit(), onSaveConfig: async () => await this.handleSaveConfig() }), h("div", { class: "ez-padding--medium" }, h("div", { class: "ez-flex sidebarNavigator__container" }, h("guides-configurator", { messagesBuilder: this.messagesBuilder, guidesList: this.guidesList, selectedGuide: this.selectedGuide, onGuideSelected: this.handleSelectGuide.bind(this), onGuideListChanged: this.handleGuideListChanged.bind(this), onCreateNewGuide: this.handleCreateNewGuide.bind(this), onGuideDeleted: this.handleGuideDeleted.bind(this) }), h("fields-layout", { ref: ref => this.refFieldsLayout = ref, selectedGuide: this.selectedGuide, guideNames: this.getGuideNames(), groupsList: this.groupsList, messagesBuilder: this.messagesBuilder, dataUnit: this.dataUnit, onGuideRenamed: this.handleGuideRenamed.bind(this), onLayoutChanged: this.handleLayoutChanged.bind(this), onSetFieldListAsAvailable: this.handleSetFieldListAsAvailable.bind(this) }), h("fields-selector", { dataUnit: this.dataUnit, availableFields: this.availableFields, onFieldListChanged: this.handleAvailableFieldListChanged.bind(this) })))));
   }
   static get is() { return "snk-form-config"; }
   static get encapsulation() { return "scoped"; }
@@ -1036,6 +332,23 @@ export class SnkFormConfig {
           "text": "Campos de configura\u00E7\u00E3o de formul\u00E1rio."
         }
       },
+      "ignoreReadOnlyFormFields": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Ignora os campos \"somente leitura\" no modo de inser\u00E7\u00E3o."
+        },
+        "attribute": "ignore-read-only-form-fields",
+        "reflect": false
+      },
       "messagesBuilder": {
         "type": "unknown",
         "mutable": true,
@@ -1060,19 +373,35 @@ export class SnkFormConfig {
   }
   static get states() {
     return {
-      "_formConfigOptions": {},
-      "_fieldConfigSelected": {},
-      "_layoutFormConfig": {},
-      "_fieldsAvailable": {},
+      "availableFields": {},
+      "guidesList": {},
+      "groupsList": {},
+      "selectedGuide": {},
       "_formConfig": {},
-      "_formConfigChanged": {},
-      "_optionFormConfigSelected": {},
-      "_optionFormConfigChanged": {},
-      "_tempGroups": {}
+      "configOptions": {},
+      "originalConfigSelected": {},
+      "configSelected": {},
+      "hasChanges": {},
+      "optionConfigChanged": {}
     };
   }
   static get events() {
     return [{
+        "method": "configClose",
+        "name": "configClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao fechar as configura\u00E7\u00F5es."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
         "method": "configChange",
         "name": "configChange",
         "bubbles": true,
@@ -1092,28 +421,48 @@ export class SnkFormConfig {
             }
           }
         }
-      }, {
-        "method": "configClose",
-        "name": "configClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitido ao fechar as configura\u00E7\u00F5es."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
       }];
   }
-  static get elementRef() { return "_element"; }
   static get watchers() {
     return [{
+        "propName": "selectedGuide",
+        "methodName": "observeSelectedGuide"
+      }, {
         "propName": "configManager",
         "methodName": "observeConfigManager"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "fieldConfigChanged",
+        "method": "handleFieldConfigChanged",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "formConfigOptionSelected",
+        "method": "handleFormConfigOptionSelected",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "addFieldToGuide",
+        "method": "handleAddFieldToGuide",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "setFieldAsAvailable",
+        "method": "handleSetFieldAsAvailable",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "removeFieldFromAvailable",
+        "method": "handleRemoveFieldFromAvailable",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }