@sankhyalabs/sankhyablocks 0.0.0-feat-dev-kb-4158.0

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

@@ -0,0 +1,1027 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as draggable_bundle, d as defineCustomElement$1 } from './snk-tab-config2.js';
+import { ObjectUtils, ElementIDUtils, ArrayUtils, ApplicationContext } from '@sankhyalabs/core';
+import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
+import { C as CONFIG_EVENTS, b as TAB_NAMES, A as ACTION_CONFIG, D as DEFAULT_TYPE } from './constants.js';
+import { U as UserConfigType } from './form-config-fetcher.js';
+import { buildFormConfigFromDataUnit } from '@sankhyalabs/ezui/dist/collection/utils/form';
+import { d as defineCustomElement$3 } from './snk-config-options2.js';
+import { d as defineCustomElement$2 } from './snk-field-config2.js';
+
+const snkFormConfigCss = ".sc-snk-form-config-h{--snk-form-config--z-index:var(--more-visible, 2);--snk-form-config--background-color:var(--background--xlight, #fff);--snk-form-config__icon--color:var(--text--disable, #AFB6C0);--snk-form-config__label-counter--font-weight:var(--text-weight--extra-small, 200);--snk-form-config__add-group-container--border-radius:var(--border--radius-medium, 12px);--snk-form-config__add-group-container--background-color:var(--background--medium, #d2dce9);--snk-form-config__add-group-container--padding:var(--space--small, 6px);--snk-form-config__add-group-content--border:2px dashed var(--color-strokes, #DCE0E8);--snk-form-config__add-group-content--border-radius:var(--border--radius-small, 6px);--snk-form-config__add-group-label--padding:var(--space--large, 24px);--snk-form-config__btn-add-group--padding:var(--space--large, 24px) var(--space--medium, 12px) 0;--snk-form-config__btn-add-group-container--padding:var(--space--medium, 12px);--snk-form-config__btn-add-group-container--border-radius:var(--border--radius-medium, 12px);--snk-form-config__btn-add-group-container--border:2px solid var(--color-strokes, #DCE0E8);--snk-form-config__btn-add-group-container--background-color:var(--background--body, #fafcff);display:flex;flex-direction:column;position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--snk-form-config--z-index);background-color:var(--snk-form-config--background-color)}.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(--snk-form-config__icon--color)}.ez-box__label-counter.sc-snk-form-config{margin-top:-7px;font-weight:var(--snk-form-config__label-counter--font-weight)}.form-config__btn-options.sc-snk-form-config{--ez-button--min-width:300px;--ez-button--background-color:var(--snk-form-config--background-color)}[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(--snk-form-config--z-index)}.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:235px}.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(--snk-form-config__add-group-container--border-radius);background-color:var(--snk-form-config__add-group-container--background-color);padding:var(--snk-form-config__add-group-container--padding)}.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:var(--snk-form-config__add-group-content--border);border-radius:var(--snk-form-config__add-group-content--border-radius)}.form-config__add-group-label.sc-snk-form-config{display:flex;justify-content:center;box-sizing:border-box;padding:var(--snk-form-config__add-group-label--padding)}.form-config__btn-add-group.sc-snk-form-config{position:relative;padding:var(--snk-form-config__btn-add-group--padding)}.form-config__btn-add-group-container.sc-snk-form-config{padding:var(--snk-form-config__btn-add-group-container--padding);border-radius:var(--snk-form-config__btn-add-group-container--border-radius);border:var(--snk-form-config__btn-add-group-container--border);background-color:var(--snk-form-config__btn-add-group-container--background-color)}ez-collapsible-box.draggable-mirror.sc-snk-form-config{display:table;background-color:var(--snk-form-config--background-color)}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{left:calc(100% / 1 * -1)}.form-config__field-config--selected.sc-snk-form-config:nth-child(3n+3) .ez-flex.form-config__config-options.sc-snk-form-config{left:calc(100% / 1 * -2)}}";
+
+const CONTAINER_ID = {
+  collapsibleBox: "EZ-COLLAPSIBLE-BOX",
+  withoutGroup: "fieldsWithoutGroupContainer",
+  fieldsAvailable: "fieldsAvailableContainer",
+  addNewGroup: "addNewGroupContainer"
+};
+const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.configChange = createEvent(this, "configChange", 7);
+    this.configClose = createEvent(this, "configClose", 7);
+    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._formConfigOptions = [];
+    this._fieldConfigSelected = undefined;
+    this._layoutFormConfig = undefined;
+    this._fieldsAvailable = undefined;
+    this._formConfig = {};
+    this._formConfigChanged = false;
+    this._optionFormConfigSelected = undefined;
+    this._optionFormConfigChanged = false;
+    this._tempGroups = [];
+    this.dataUnit = undefined;
+    this.configManager = undefined;
+    this.messagesBuilder = undefined;
+  }
+  observeConfigManager() {
+    this.loadConfig();
+  }
+  loadFields() {
+    this._layoutFormConfig = [];
+    this.buildFields();
+  }
+  buildFields() {
+    this.buildFormConfig();
+    this.buildAvailableFields();
+  }
+  loadFormConfig() {
+    var _a;
+    this._formConfig = this.getConfig();
+    this.loadFields();
+    this.controlFieldConfig();
+    if (((_a = this._filterFieldsAvailable) === null || _a === void 0 ? void 0 : _a.value) != undefined) {
+      this._filterFieldsAvailable.value = "";
+    }
+  }
+  getConfig() {
+    let config = this.configManager.getConfig(false, 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();
+    }
+  }
+  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.clearTempGroups();
+  }
+  resetChangeOptionConfig() {
+    this._formConfigChanged = false;
+    this.loadConfig();
+    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() {
+    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"));
+      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();
+    }
+  }
+  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 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")))));
+  }
+  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.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();
+        }
+      }
+    }
+  }
+  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 = [];
+      this.buildAvailableFields();
+      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;
+  }
+  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);
+        }
+        this.updateFieldsToSave();
+      }, 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() {
+    const fields = this.getFieldsToSave();
+    if ((fields === null || fields === void 0 ? void 0 : fields.length) > 0) {
+      this._formConfig.fields = fields;
+    }
+    this.loadFields();
+    this._formConfigChanged = true;
+  }
+  controlSortableField() {
+    if (this._sortableContainer == undefined) {
+      return;
+    }
+    if (this._sortableField) {
+      this._sortableField.destroy();
+    }
+    this._sortableField = new draggable_bundle.Sortable(this._sortableContainer.querySelectorAll('[data-draggable-parent="field"]'), {
+      draggable: '[data-draggable-element="field"]',
+      mirror: {
+        constrainDimensions: true
+      }
+    });
+    this._sortableField.on(CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingField(evt));
+    this._sortableField.on(CONFIG_EVENTS.dragSorted, (evt) => this.controlSortedDraggingField(evt));
+    this._sortableField.on(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._renderTimer);
+    }
+  }
+  controlSortableGroup() {
+    if (this._sortableContainer == undefined) {
+      return;
+    }
+    if (this._sortableGroup) {
+      this._sortableGroup.destroy();
+    }
+    this._sortableGroup = new draggable_bundle.Sortable(this._sortableContainer.querySelectorAll('[data-draggable-parent="group"]'), {
+      draggable: '[data-draggable-element="group"]',
+      mirror: {
+        constrainDimensions: true
+      }
+    });
+    this._sortableGroup.on(CONFIG_EVENTS.dragStart, (evt) => this.controlStartDraggingGroup(evt));
+    this._sortableGroup.on(CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingGroup(evt));
+  }
+  loadUserConfig() {
+    if (this._applicationResourceID == undefined) {
+      return;
+    }
+    if (this.configManager == undefined) {
+      return;
+    }
+    this.configManager.fetchUserAvailableConfigs(this._applicationResourceID)
+      .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;
+  }
+  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.controlFieldConfig();
+      this._formConfigChanged = true;
+    }
+  }
+  async loadConfigByUser() {
+    if (this._applicationResourceID == undefined) {
+      return;
+    }
+    if (this.configManager == undefined) {
+      return;
+    }
+    if (this._optionFormConfigSelected == undefined) {
+      return;
+    }
+    let config;
+    switch (this._optionFormConfigSelected.origin) {
+      case UserConfigType.DEFAULT:
+        config = await this.configManager.fetchDefaultConfig(this._applicationResourceID);
+        break;
+      case UserConfigType.DEFAULT:
+        config = await this.configManager.fetchDefaultConfig(this._applicationResourceID);
+        break;
+    }
+    if (config != undefined) {
+      this._formConfig = config;
+      this._tabSelected = 1;
+      this.loadFields();
+      this.controlFieldConfig();
+      this.clearTempGroups();
+    }
+  }
+  loadConfig() {
+    this.loadFormConfig();
+    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();
+    }
+  }
+  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;
+    }
+    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.controlFieldConfig();
+    this._formConfigChanged = true;
+  }
+  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));
+      }
+    });
+  }
+  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;
+          }
+          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) {
+    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 };
+    });
+  }
+  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;
+  }
+  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;
+      }
+    }
+  }
+  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);
+    }
+  }
+  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) {
+    var _a;
+    this._formConfigChanged = false;
+    if (fieldConfig == undefined) {
+      return;
+    }
+    this._formConfig.fields = (_a = this._formConfig.fields) === null || _a === void 0 ? void 0 : _a.filter((field) => field.name !== fieldConfig.name);
+    this.loadFields();
+    this.controlFieldConfig();
+    this._formConfigChanged = true;
+    this.resetSortables();
+  }
+  resetSortables() {
+    this.controlSortableField();
+    this.controlSortableGroup();
+  }
+  handleFieldConfigChange(evt) {
+    const { field: fieldConfig, type: actionType } = evt.detail;
+    if (actionType === ACTION_CONFIG.configuration) {
+      this.controlFieldConfig(fieldConfig);
+      return;
+    }
+    if (actionType === ACTION_CONFIG.remove) {
+      this.controlRemoveFieldConfig(fieldConfig);
+      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.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 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.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.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);
+  }
+  componentDidRender() {
+    this.controlSortableField();
+    this.controlSortableGroup();
+  }
+  componentWillLoad() {
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    this._application.getResourceID().then(resourceID => {
+      this._applicationResourceID = resourceID;
+      this.loadConfig();
+    });
+  }
+  componentDidLoad() {
+    const dataInfo = { dataUnit: this.dataUnit };
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
+  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 })))))))));
+  }
+  get _element() { return this; }
+  static get watchers() { return {
+    "configManager": ["observeConfigManager"]
+  }; }
+  static get style() { return snkFormConfigCss; }
+}, [2, "snk-form-config", {
+    "dataUnit": [16],
+    "configManager": [16],
+    "messagesBuilder": [1040],
+    "_formConfigOptions": [32],
+    "_fieldConfigSelected": [32],
+    "_layoutFormConfig": [32],
+    "_fieldsAvailable": [32],
+    "_formConfig": [32],
+    "_formConfigChanged": [32],
+    "_optionFormConfigSelected": [32],
+    "_optionFormConfigChanged": [32],
+    "_tempGroups": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-form-config", "snk-config-options", "snk-field-config", "snk-tab-config"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-form-config":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkFormConfig);
+      }
+      break;
+    case "snk-config-options":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "snk-field-config":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "snk-tab-config":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { SnkFormConfig as S, defineCustomElement as d };