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

package/dist/cjs/snk-form-config.cjs.entry.js

@@ -0,0 +1,957 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-188190ee.js');
+const draggable_bundle = require('./draggable.bundle-82a25c06.js');
+const core = require('@sankhyalabs/core');
+const utils = require('@sankhyalabs/ezui/dist/collection/utils');
+const constants = require('./constants-aebcc2f5.js');
+const formConfigFetcher = require('./form-config-fetcher-2de7c16a.js');
+require('./_commonjsHelpers-537d719a.js');
+
+const snkFormConfigCss = ".sc-snk-form-config-h{--snk-form-config__title--font-pattern:var(--font-pattern, \"'Sora', 'Algerian'\");--snk-form-config__title--weight--large:var(--text-weight--large, 600);display:flex;flex-direction:column;position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--more-visible, 2);background-color:var(--background--xlight)}.form-config__title.sc-snk-form-config{display:flex;margin:0;line-height:1.3;font-family:var(--snk-form-config__title--font-pattern);font-weight:var(--snk-form-config__title--weight--large)}.form-config__header-container.sc-snk-form-config{display:flex}.form-config__field-container.sc-snk-form-config{width:32%;padding:6px}.form-config__hide-content.sc-snk-form-config{display:none}ez-icon.sc-snk-form-config .left-icon.sc-snk-form-config{--ez-icon--color:var(--text--disable)}.ez-box__label-counter.sc-snk-form-config{font-weight:var(--text-weight--extra-small);margin-top:-7px}.form-config__btn-options.sc-snk-form-config{--ez-button--min-width:300px;--ez-button--background-color:#FFFFFF}[data-draggable-parent].sc-snk-form-config{position:relative}.form-config__field-config--selected.sc-snk-form-config{position:static}.form-config__field-config--dragged.sc-snk-form-config .draggable-mirror.sc-snk-form-config{z-index:var(--more-visible, 2)}.form-config__config-options.sc-snk-form-config{position:relative;margin-top:-3px;min-width:100%;z-index:1}.form-config__tab-container.sc-snk-form-config,.form-config__fields-available.sc-snk-form-config{position:relative;height:100%;max-height:calc(100vh - 92px)}.form-config__tab-container.sc-snk-form-config .ez-box__container.sc-snk-form-config,.form-config__fields-available.sc-snk-form-config .ez-box__container.sc-snk-form-config{align-content:flex-start;height:100%}.form-config__fields-available.sc-snk-form-config [data-draggable-parent].sc-snk-form-config{align-content:flex-start;overflow-y:auto;height:100%;max-height:calc(100% - 122px)}.form-config__tab-content.sc-snk-form-config{align-content:flex-start;overflow-y:auto;height:auto;max-height:calc(100% - 128px)}[data-draggable-element].sc-snk-form-config{cursor:grab}.form-config__actions-button.sc-snk-form-config{--ez-actions-button__btn-action--min-width:250px}.form-config__add-group.sc-snk-form-config{position:relative;min-height:120px;margin-bottom:10px}.form-config__add-group-container.sc-snk-form-config{position:absolute;display:flex;flex-wrap:wrap;width:100%;box-sizing:border-box;border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #d2dce9);padding:var(--space--small, 6px)}.form-config__add-group-content.sc-snk-form-config{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;box-sizing:border-box;border:2px dashed var(--color-strokes, #DCE0E8);border-radius:var(--border--radius-small, 6px)}.form-config__add-group-label.sc-snk-form-config{display:flex;justify-content:center;box-sizing:border-box;padding:var(--space--large, 24px)}.form-config__btn-add-group.sc-snk-form-config{position:relative;padding:var(--space--large, 24px) var(--space--medium, 12px) 0}.form-config__btn-add-group-container.sc-snk-form-config{padding:var(--space--medium, 12px);border-radius:var(--border--radius-medium, 12px);border:2px solid var(--color-strokes, #DCE0E8);background-color:var(--background--body, #fafcff)}.form-config__left-icon--eye-off.sc-snk-form-config{padding-top:var(--space--medium, 8px)}ez-collapsible-box.draggable-mirror.sc-snk-form-config{display:table;background-color:#FFFFFF}ez-collapsible-box.sc-snk-form-config{margin-bottom:10px}@media screen and (min-width: 480px){.form-config__field-config--selected.sc-snk-form-config .ez-flex.form-config__config-options.sc-snk-form-config{min-width:calc(300% + 12px)}.form-config__field-config--selected.sc-snk-form-config:nth-child(3n+2) .ez-flex.form-config__config-options.sc-snk-form-config{transform:translate(calc(100% / 3 * -1))}.form-config__field-config--selected.sc-snk-form-config:nth-child(3n+3) .ez-flex.form-config__config-options.sc-snk-form-config{transform:translate(calc(100% / 3 * -2))}}";
+
+const CONTAINER_ID = {
+  collapsibleBox: "EZ-COLLAPSIBLE-BOX",
+  withoutGroup: "fieldsWithoutGroupContainer",
+  fieldsAvailable: "fieldsAvailableContainer",
+  addNewGroup: "addNewGroupContainer"
+};
+const SnkFormConfig = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.configChange = index.createEvent(this, "configChange", 7);
+    this._listEnabledFields = [];
+    this._renderTimer = 500;
+    this._sortableTimer = 100;
+    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._formConfigOptions = [];
+    this._formConfig = {};
+    this._formConfigChanged = false;
+    this._optionFormConfigChanged = false;
+    this._tempGroups = [];
+    /**
+     * Campos de configuração de formulário.
+     */
+    this.formConfig = {};
+  }
+  observeFormConfig() {
+    this.loadConfig(this._sortableTimer);
+  }
+  loadFields(updateTimer = 0) {
+    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();
+    }
+  }
+  buildFields() {
+    this.buildFormConfig();
+    this.buildAvailableFields();
+  }
+  loadFormConfig(updateTimer) {
+    var _a;
+    this._formConfig = core.ObjectUtils.copy(this.formConfig);
+    this.loadFields(updateTimer);
+    this.controlFieldConfig();
+    if (((_a = this._filterFieldsAvailable) === null || _a === void 0 ? void 0 : _a.value) != undefined) {
+      this._filterFieldsAvailable.value = "";
+    }
+  }
+  cancelChangeConfig() {
+    if (this._formConfigChanged === true) {
+      this.openConfirmDialog(this.getMessage("snkFormConfig.confirm.cancel")).then((canCancel) => {
+        if (canCancel) {
+          this._formConfigChanged = false;
+          this.resetChangeConfig();
+        }
+      });
+    }
+    else {
+      this.resetChangeConfig();
+    }
+  }
+  cancelChangeOptionConfig() {
+    if (this._optionFormConfigChanged === true) {
+      this.openConfirmDialog(this.getMessage("snkFormConfig.confirm.cancel")).then((canCancel) => {
+        if (canCancel) {
+          this._optionFormConfigChanged = false;
+          this.resetChangeOptionConfig();
+        }
+      });
+    }
+    else {
+      this.resetChangeOptionConfig();
+    }
+  }
+  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) {
+        const fieldToSave = {
+          cleanOnCopy: fieldConfig.cleanOnCopy || false,
+          group: fieldConfig.group,
+          label: fieldConfig.label,
+          name: fieldConfig.name,
+          required: fieldConfig.required,
+          readOnly: fieldConfig.readOnly,
+          tab: fieldConfig.tab,
+          defaultValue: fieldConfig.defaultValue
+        };
+        fields.push(fieldToSave);
+      }
+    });
+    return fields;
+  }
+  isDefaultConfiguration() {
+    var _a;
+    const optionSelected = (_a = this._optionFormConfigSelected) === null || _a === void 0 ? void 0 : _a.origin;
+    return optionSelected === formConfigFetcher.UserConfigType.DEFAULT
+      && this._optionFormConfigChanged === true
+      && this._formConfigChanged === false;
+  }
+  saveConfig() {
+    var _a;
+    if (((_a = this._tempGroups) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      utils.ApplicationUtils.alert(this.getMessage("snkFormConfig.confirm.title"), this.getMessage("snkFormConfig.confirm.group"));
+      return;
+    }
+    const isDefault = this.isDefaultConfiguration();
+    let formConfig = {};
+    if (isDefault) {
+      formConfig = core.ObjectUtils.copy(this.formConfig);
+    }
+    else {
+      formConfig = core.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;
+    this.configChange.emit(formConfig);
+    this._formConfigChanged = false;
+    this._optionFormConfigChanged = false;
+  }
+  applyOptionConfig() {
+    if (this._optionFormConfigChanged === true && this._optionFormConfigSelected != undefined) {
+      const name = this._optionFormConfigSelected.name || "configuração selecionada";
+      const origin = this._optionFormConfigSelected.origin === formConfigFetcher.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();
+    }
+  }
+  controlFieldConfig(fieldConfig = undefined) {
+    var _a;
+    if (fieldConfig == undefined) {
+      this._fieldConfigSelected = undefined;
+      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" : "");
+  }
+  getFieldsByGroup(group) {
+    var _a;
+    return ((_a = group.fields) === null || _a === void 0 ? void 0 : _a.length) ? group.fields.map((field) => {
+      var _a, _b;
+      return index.h("div", { key: field.name, class: this.getFieldConfigStyle(field), "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, index.h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, modeInsertion: false, fieldConfig: field, isConfigActive: ((_a = this._fieldConfigSelected) === null || _a === void 0 ? void 0 : _a.name) === field.name }), ((_b = this._fieldConfigSelected) === null || _b === void 0 ? void 0 : _b.name) === field.name &&
+        index.h("div", { class: "ez-flex form-config__config-options" }, index.h("snk-config-options", { idConfig: field.name, dataUnit: this.dataUnit, fieldConfig: this._fieldConfigSelected, onConfigOptionsChanged: (ev) => this.handleconfigOptionsChanged(ev.detail) })));
+    }) : index.h("div", { class: "form-config__add-group-container" }, index.h("div", { class: "form-config__add-group-content" }, index.h("div", { class: "form-config__add-group-label" }, index.h("label", { class: "ez-text ez-text--center ez-text--medium ez-text--primary ez-text--bold" }, this.getMessage("snkFormConfig.form.labelDropField")))));
+  }
+  handleconfigOptionsChanged(fieldEdited) {
+    var _a;
+    (_a = this._formConfig.fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
+    });
+    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.setShowFormConfig(false);
+        }
+      });
+    }
+    else {
+      this.setShowFormConfig(false);
+    }
+  }
+  openConfirmDialog(msg = "", title = this.getMessage("snkFormConfig.confirm.title")) {
+    return utils.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();
+        }
+      }
+    }
+  }
+  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: constants.ACTION_CONFIG.remove
+        }
+      };
+      setTimeout(() => {
+        this.handleFieldConfigChange(eventDetail, this._sortableTimer);
+      }, this._renderTimer);
+      return true;
+    }
+    return false;
+  }
+  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;
+  }
+  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;
+  }
+  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)) {
+      return;
+    }
+  }
+  updateFieldsToSave(updateTimer = 0) {
+    const fields = this.getFieldsToSave();
+    if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
+      this._formConfig.fields = fields;
+    }
+    this.loadFields(updateTimer);
+    this._formConfigChanged = true;
+  }
+  controlSortableField() {
+    if (this._sortableContainer == undefined) {
+      return;
+    }
+    if (this._sortableField) {
+      this._sortableField.destroy();
+    }
+    this._sortableField = new draggable_bundle.draggable_bundle.Sortable(this._sortableContainer.querySelectorAll('[data-draggable-parent="field"]'), {
+      draggable: '[data-draggable-element="field"]',
+      mirror: {
+        constrainDimensions: true
+      }
+    });
+    this._sortableField.on(constants.CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingField(evt));
+    this._sortableField.on(constants.CONFIG_EVENTS.dragSorted, (evt) => this.controlSortedDraggingField(evt));
+    this._sortableField.on(constants.CONFIG_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);
+    }
+  }
+  controlSortableGroup() {
+    if (this._sortableContainer == undefined) {
+      return;
+    }
+    if (this._sortableGroup) {
+      this._sortableGroup.destroy();
+    }
+    this._sortableGroup = new draggable_bundle.draggable_bundle.Sortable(this._sortableContainer.querySelectorAll('[data-draggable-parent="group"]'), {
+      draggable: '[data-draggable-element="group"]',
+      mirror: {
+        constrainDimensions: true
+      }
+    });
+    this._sortableGroup.on(constants.CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingGroup(evt));
+    this._sortableGroup.on(constants.CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingGroup(evt));
+  }
+  loadUserConfig() {
+    var _a;
+    if (this._application != undefined) {
+      this._application.fetchUserAvailableConfigs((_a = this.parentForm) === null || _a === void 0 ? void 0 : _a.configName)
+        .then((userConfig) => {
+        this._formConfigOptions = userConfig;
+        let isDefault = this._formConfig != undefined ? this._formConfig.defaultConfiguration : true;
+        const selectedOption = userConfig
+          .find((config) => {
+          return config.origin === (isDefault ? formConfigFetcher.UserConfigType.DEFAULT : formConfigFetcher.UserConfigType.USER);
+        });
+        this.setFormConfig(selectedOption);
+      });
+    }
+  }
+  setFormConfig(config) {
+    this._optionFormConfigSelected = config;
+  }
+  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;
+    }
+  }
+  loadConfigByUser() {
+    var _a;
+    if (this._application != undefined) {
+      const option = this._optionFormConfigSelected;
+      const fetchActionName = (option === null || option === void 0 ? void 0 : option.origin) === formConfigFetcher.UserConfigType.DEFAULT ? "fetchDefaultConfig" :
+        (option === null || option === void 0 ? void 0 : option.origin) === formConfigFetcher.UserConfigType.USER ? "fetchLegacyConfig" :
+          undefined;
+      if (fetchActionName != undefined) {
+        this._application[fetchActionName]((_a = this.parentForm) === null || _a === void 0 ? void 0 : _a.configName)
+          .then((formConfig) => {
+          if (formConfig != undefined) {
+            this._formConfig = formConfig;
+            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);
+    });
+    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) {
+    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 = [];
+      }
+    }
+  }
+  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 === constants.TAB_NAMES.main ? this.getMessage("snkFormConfig.form.mainArea") : tabName}</b>. 
+        <br/><br/> 
+        ${this.getMessage("snkFormConfig.alert.infoValidTitle")}
+      `;
+      utils.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;
+    }
+    return true;
+  }
+  saveEditLabelTempGroup(editDetails, index) {
+    const { newValue: newLabel } = editDetails.detail;
+    if (this._newGroupBoxes != undefined && this._newGroupBoxes[index] != undefined) {
+      this._newGroupBoxes[index].dataset.groupName = newLabel;
+    }
+  }
+  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;
+  }
+  renderTempGroupByTab(tabName) {
+    return this._tempGroups.map((tempGroup, indexGroup) => {
+      if (tempGroup.tab === tabName) {
+        return index.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));
+      }
+    });
+  }
+  handleDuplicateGroups(titleNewGroup, currentTab) {
+    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;
+  }
+  captureHighestValueTitle(groupsTemp) {
+    let valuesNumericTitle = [];
+    groupsTemp === null || groupsTemp === void 0 ? void 0 : groupsTemp.map(group => {
+      if (group != undefined) {
+        valuesNumericTitle.push(group.replace(/[^0-9]/g, ''));
+      }
+    });
+    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;
+          }
+          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) {
+    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 };
+    }).filter((layoutConfig) => {
+      return (layoutConfig === null || layoutConfig === void 0 ? void 0 : layoutConfig.tab) != undefined;
+    });
+  }
+  configureTabMain(layoutFormConfig) {
+    if (layoutFormConfig == undefined) {
+      layoutFormConfig = [];
+    }
+    const hasTabMain = layoutFormConfig.find((layoutTab) => {
+      return layoutTab.tab === constants.TAB_NAMES.main;
+    });
+    if (hasTabMain == undefined) {
+      layoutFormConfig.unshift({ tab: constants.TAB_NAMES.main, groups: [], visible: true });
+    }
+    return layoutFormConfig;
+  }
+  updateTabs() {
+    const tabs = this.getTabsToSave();
+    if ((tabs === null || tabs === void 0 ? void 0 : tabs.length) > 0) {
+      this._formConfig.tabs = tabs;
+    }
+  }
+  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();
+  }
+  buildAvailableFields() {
+    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);
+    }
+  }
+  setShowFormConfig(value) {
+    this.parentForm.setShowFormConfig(value);
+  }
+  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 = core.ArrayUtils.applyStringFilter(value, this._listEnabledFields, true, "label");
+  }
+  orderFieldsAvailable(fields) {
+    return core.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) {
+    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 === constants.ACTION_CONFIG.configuration) {
+      this.controlFieldConfig(fieldConfig);
+      return;
+    }
+    if (actionType === constants.ACTION_CONFIG.remove) {
+      this.controlRemoveFieldConfig(fieldConfig, updateTimer);
+      return;
+    }
+    if (actionType === constants.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.labelNo"),
+      labelConfirm: this.getMessage("snkFormConfig.confirm.labelYes"),
+      btnConfirmDanger: false
+    };
+    const title = this.getMessage("snkFormConfig.confirm.title");
+    const deleteTab = this.getMessage("snkFormConfig.confirm.deleteTab");
+    utils.ApplicationUtils.confirm(title, `${deleteTab} <b>${tabSelected.detail.label}</b>?`, "delete", utils.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._application.messagesBuilder.getMessage(key, params);
+  }
+  componentDidRender() {
+    this.controlSortableField();
+    this.controlSortableGroup();
+  }
+  componentWillLoad() {
+    this._application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    this.loadConfig();
+  }
+  render() {
+    var _a, _b, _c, _d;
+    const configOptions = this._formConfigOptions.map((option) => {
+      return { value: option.origin, label: option.name };
+    });
+    return (index.h(index.Host, null, index.h("div", { class: "ez-row ez-padding--medium" }, index.h("div", { class: "ez-col ez-col--sd-7 ez-col--tb-9 ez-align--middle" }, index.h("ez-button", { mode: "icon", iconName: "arrow_back", class: "ez-padding--small", size: "small", onClick: () => this.closeFormConfig() }), index.h("h1", { class: "ez-title ez-title--extra-large ez-padding--small" }, this.getMessage("snkFormConfig.title")), index.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, iconName: "chevron-down", checkOption: true, size: "small", actions: configOptions, onEzAction: (evt) => this.controlSelectFormConfig(evt) })), index.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 &&
+      index.h("div", { class: "ez-row ez-align--middle ez-align--right" }, index.h("ez-button", { label: "Cancelar", class: "ez-padding-left--medium", size: "small", onClick: () => this.cancelChangeConfig() }), index.h("ez-button", { label: "Salvar", class: "ez-button--primary ez-padding-left--medium", size: "small", onClick: () => this.saveConfig() }, index.h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "save" }))), this._optionFormConfigChanged === true &&
+      index.h("div", { class: "ez-row ez-align--middle ez-align--right" }, index.h("ez-button", { label: "Cancelar", class: "ez-padding-left--medium", size: "small", onClick: () => this.cancelChangeOptionConfig() }), index.h("ez-button", { label: this.getMessage("snkFormConfig.applyConfig"), class: "ez-button--primary ez-padding-left--medium", size: "small", onClick: () => this.applyOptionConfig() })))), index.h("div", { class: "ez-row ez-padding--medium", ref: ref => this._sortableContainer = ref }, index.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 &&
+      index.h("section", { class: "ez-box__container", ref: ref => this._formContainer = ref }, index.h("snk-tab-config", { ref: ref => this._tabConfig = ref, selectedIndex: this._tabSelected, 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) => index.h("snk-tab", { tabKey: tab.tab || "Geral", label: tab.tab || this.getMessage("snkFormConfig.form.tabGeneral"), visible: tab.visible }))), this._layoutFormConfig.map((tab, indexTab) => index.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 index.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 index.h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, index.h("label", { class: "ez-text ez-text--secondary ez-margin-vertical--small" }, this.getMessage("snkFormConfig.form.subTitleInfo")), index.h("div", { id: CONTAINER_ID.withoutGroup, class: "ez-row", "data-draggable-parent": "field" }, this.getFieldsByGroup(group)), index.h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" }));
+        }
+      }), this.renderTempGroupByTab(tab.tab))), index.h("div", { class: "form-config__btn-add-group ez-row" }, index.h("div", { class: "form-config__btn-add-group-container ez-col ez-col--sd-12 ez-col--tb-12 ez-align--center" }, index.h("ez-button", { label: this.getMessage("snkFormConfig.form.labelNewGroup"), class: "ez-padding-horizontal--small ez-button--primary", size: "small", onClick: () => this.addNewGroup() }, index.h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "plus" })))))), index.h("div", { class: "form-config__fields-available ez-col ez-col--sd-3 ez-col--tb-3" }, index.h("section", { class: "ez-box__container ez-col ez-col--pn-12" }, index.h("h1", { class: "ez-title ez-title--large ez-title--primary ez-padding-bottom--medium" }, this.getMessage("snkFormConfig.availableFields.title")), index.h("ez-filter-input", { ref: ref => this._filterFieldsAvailable = ref, label: this.getMessage("snkFormConfig.availableFields.labelSearchField"), onEzChange: evt => this.onFilterChange(evt.detail) }), index.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 &&
+      index.h("div", { id: CONTAINER_ID.fieldsAvailable, class: "ez-row", "data-draggable-parent": "field" }, this.orderFieldsAvailable(this._fieldsAvailable).map((field) => index.h("div", { key: field.name, class: this._fieldsAvailableStyle, "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, index.h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, fieldConfig: field })))))))));
+  }
+  static get watchers() { return {
+    "formConfig": ["observeFormConfig"]
+  }; }
+};
+SnkFormConfig.style = snkFormConfigCss;
+
+exports.snk_form_config = SnkFormConfig;