@sankhyalabs/sankhyablocks 8.16.0-dev.114 → 8.16.0-dev.116

package/dist/esm/snk-config-options_3.entry.js

@@ -1,1384 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7d3d3f1.js';
-import { UserInterface, ObjectUtils, StringUtils, ApplicationContext, ElementIDUtils, ArrayUtils } from '@sankhyalabs/core';
-import { DataType, getConvertedValue } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
-import { CheckMode, ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
-import { d as VARS_BY_TYPE, D as DEFAULT_TYPE, e as TAGS_BY_TYPE, C as CONFIG_EVENTS, a as CONFIG_SORTABLE_EVENTS, c as TAB_NAMES, A as ACTION_CONFIG } from './constants-7db1128a.js';
-import { S as SnkFormConfigManager } from './SnkFormConfigManager-327dfdd4.js';
-import { R as ResourceIDUtils } from './ResourceIDUtils-a114189a.js';
-import { S as Sortable } from './Sortable-83960219.js';
-import { U as UserConfigType } from './form-config-fetcher-fa208a6c.js';
-import { buildFormConfigFromDataUnit } from '@sankhyalabs/ezui/dist/collection/utils/form';
-import './ConfigStorage-79b9e180.js';
-import './filter-item-type.enum-d45e026f.js';
-import './DataFetcher-88e56266.js';
-import './PrintUtils-3e4ff0f5.js';
-import '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
-
-const snkConfigOptionsCss = ".sc-snk-config-options-h{--snk-config-options--border:2px solid var(--color--secondary-200, #D2D3DA);width:100%;border-radius:15px;border:var(--snk-config-options--border)}.config-options__switch-row.sc-snk-config-options{margin-top:-30px}";
-
-const SnkConfigOptions = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.configOptionsChanged = createEvent(this, "configOptionsChanged", 7);
-    this._defaultType = undefined;
-    this.fieldConfig = {};
-    this.idConfig = undefined;
-    this.dataUnit = undefined;
-    this.messagesBuilder = undefined;
-  }
-  onConfigDefault(optionSelected) {
-    if (optionSelected != undefined) {
-      this._defaultType = optionSelected;
-      this.fieldConfig.defaultValue = {
-        type: this._defaultType
-      };
-      this.configOptionsChanged.emit(this.fieldConfig);
-    }
-  }
-  buildOptions() {
-    var _a, _b, _c;
-    let interfaceField = (_c = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.name)) === null || _c === void 0 ? void 0 : _c.userInterface;
-    if (interfaceField === UserInterface.SEARCH) {
-      interfaceField = UserInterface.INTEGERNUMBER;
-    }
-    return VARS_BY_TYPE.UserInterface[interfaceField];
-  }
-  enabledValueDefault() {
-    var _a, _b, _c;
-    const field = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.name);
-    const allowDefault = (_c = field === null || field === void 0 ? void 0 : field.properties) === null || _c === void 0 ? void 0 : _c.allowDefault;
-    const hasVariableVar = VARS_BY_TYPE.UserInterface.hasOwnProperty(field === null || field === void 0 ? void 0 : field.userInterface)
-      || (field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH;
-    if ((allowDefault == undefined || allowDefault === "true") && hasVariableVar) {
-      return true;
-    }
-    return false;
-  }
-  isAllowDefault() {
-    var _a, _b;
-    const allowDefault = (_b = (_a = this._fieldProperties) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.allowDefault;
-    if (allowDefault == undefined) {
-      return true;
-    }
-    return allowDefault === "true";
-  }
-  loadDefaultValue() {
-    var _a;
-    if (this.fieldConfig == undefined) {
-      this._defaultType = DEFAULT_TYPE.fixed;
-      this.fieldConfig = {
-        defaultValue: {
-          type: this._defaultType
-        }
-      };
-    }
-    else if (((_a = this.fieldConfig.defaultValue) === null || _a === void 0 ? void 0 : _a.type) == undefined) {
-      this._defaultType = DEFAULT_TYPE.fixed;
-      this.fieldConfig.defaultValue = {
-        type: this._defaultType
-      };
-    }
-    else {
-      this._defaultType = this.fieldConfig.defaultValue.type;
-    }
-  }
-  getFieldProperties(field) {
-    var _a;
-    if (field != undefined) {
-      return (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField(field);
-    }
-  }
-  getMessage(key, params) {
-    return this.messagesBuilder.getMessage(key, params);
-  }
-  getDefaultType() {
-    var _a;
-    return (_a = this.fieldConfig.defaultValue.type) !== null && _a !== void 0 ? _a : DEFAULT_TYPE.fixed;
-  }
-  getEnabledByProperty(attribName, propertyName) {
-    const fieldDescriptor = this._fieldProperties;
-    if (fieldDescriptor == undefined) {
-      return true;
-    }
-    const fieldProperties = fieldDescriptor.properties || {};
-    return fieldProperties.hasOwnProperty(propertyName) ? fieldProperties[propertyName] !== "S" : fieldDescriptor[attribName] !== true;
-  }
-  getValueByProperty(property) {
-    const properties = this._fieldProperties;
-    if (properties != undefined && properties[property] === true) {
-      return true;
-    }
-    return this.fieldConfig[property];
-  }
-  getValidatedValue(fieldValue) {
-    var _a, _b;
-    if (fieldValue == undefined) {
-      return;
-    }
-    const field = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.name);
-    const dataType = field === null || field === void 0 ? void 0 : field.dataType;
-    if (dataType == undefined) {
-      return;
-    }
-    const value = (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.waitmessage) != undefined ? undefined :
-      dataType !== DataType.OBJECT && dataType !== DataType.DATE
-        && typeof fieldValue === "object"
-        ? fieldValue.value
-        : fieldValue;
-    return dataType === DataType.OBJECT ? JSON.stringify(value) : value;
-  }
-  buildInputDefault({ value, enabled, label, name, required, userInterface }, properties = undefined, mode = undefined) {
-    let options;
-    let precision = 0;
-    let prettyPrecision = 0;
-    const TagName = userInterface == undefined || TAGS_BY_TYPE[userInterface] == undefined
-      ? TAGS_BY_TYPE.DEFAULT
-      : TAGS_BY_TYPE[userInterface];
-    if (userInterface === UserInterface.OPTIONSELECTOR) {
-      const prop = properties === null || properties === void 0 ? void 0 : properties.options;
-      if (typeof prop === "string") {
-        const parsed = ObjectUtils.stringToObject(prop);
-        options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
-      }
-      else {
-        options = prop;
-      }
-    }
-    else if (userInterface === UserInterface.DECIMALNUMBER) {
-      precision = Number((properties === null || properties === void 0 ? void 0 : properties.precision) || 2);
-      prettyPrecision = Number((properties === null || properties === void 0 ? void 0 : properties.prettyPrecision) || precision);
-    }
-    return h(TagName, Object.assign({ value: value, enabled: enabled, label: label, "data-field-name": name, key: name, onEzChange: (evt) => this.onChange(evt === null || evt === void 0 ? void 0 : evt.detail) }, (this.getConditionalAttributes(userInterface, required, options, precision, prettyPrecision, mode))));
-  }
-  getConditionalAttributes(userInterface, required, options, precision, prettyPrecision, mode) {
-    const useSearchPlus = userInterface == UserInterface.SEARCHPLUS;
-    switch (userInterface) {
-      case UserInterface.SEARCH:
-      case UserInterface.SEARCHPLUS:
-        return {
-          suppressEmptyOption: required,
-          optionLoader: (searchArgument) => this.onSearch(searchArgument, { useSearchPlus })
-        };
-      case UserInterface.OPTIONSELECTOR:
-        return {
-          suppressEmptyOption: required,
-          options
-        };
-      case UserInterface.CHECKBOX:
-      case UserInterface.SWITCH:
-        return {
-          mode
-        };
-      case UserInterface.INTEGERNUMBER:
-      case UserInterface.DECIMALNUMBER:
-        return {
-          precision,
-          prettyPrecision,
-          onEzStartChange: (evt) => this.onChange(evt === null || evt === void 0 ? void 0 : evt.detail)
-        };
-      case UserInterface.DATE:
-      case UserInterface.DATETIME:
-      case UserInterface.TIME:
-        return {
-          onEzStartChange: (evt) => this.onChange(evt === null || evt === void 0 ? void 0 : evt.detail)
-        };
-      default:
-        return {};
-    }
-  }
-  onChange(fieldValue) {
-    this.fieldConfig.defaultValue.value = this.getValidatedValue(fieldValue);
-    this.configOptionsChanged.emit(this.fieldConfig);
-  }
-  onSearch(searchArgument, ctxOptions) {
-    if (this._application != undefined && this.fieldConfig != undefined) {
-      return this._application.executeSearch(searchArgument, this.fieldConfig.name, this.dataUnit, ctxOptions);
-    }
-  }
-  buildField(descriptor, config) {
-    const { name, label, readOnly, required, defaultValue } = config;
-    const { userInterface, properties } = descriptor;
-    const allowDefault = properties === null || properties === void 0 ? void 0 : properties.allowDefault;
-    let value;
-    let enabled = StringUtils.getBooleanValue(allowDefault, !readOnly);
-    if (userInterface === UserInterface.FILE) {
-      enabled = false;
-    }
-    if (enabled) {
-      value = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value;
-      if (value != undefined) {
-        value = getConvertedValue(descriptor === null || descriptor === void 0 ? void 0 : descriptor.dataType, value);
-      }
-    }
-    const configField = { value, enabled, label, name, required, userInterface };
-    switch (userInterface) {
-      case UserInterface.SWITCH:
-        return this.buildInputDefault(configField, undefined, CheckMode.SWITCH);
-      case UserInterface.CHECKBOX:
-        return this.buildInputDefault(configField, undefined, CheckMode.REGULAR);
-      case UserInterface.OPTIONSELECTOR:
-      case UserInterface.DECIMALNUMBER:
-        return this.buildInputDefault(configField, properties);
-      default:
-        return this.buildInputDefault(configField);
-    }
-  }
-  componentWillLoad() {
-    var _a;
-    this.loadDefaultValue();
-    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-    this._fieldProperties = this.getFieldProperties((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.name);
-  }
-  componentDidLoad() {
-    ElementIDUtils.addIDInfo(this._element, this.fieldConfig.name);
-  }
-  render() {
-    var _a, _b;
-    return (h(Host, null, h("div", { id: this.idConfig }, h("div", { class: "ez-row ez-padding--medium" }, h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-text-input", { label: this.getMessage("snkConfigOptions.label.nameField"), value: (_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.label, onEzChange: (evt) => { this.fieldConfig.label = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-combo-box", { label: this.getMessage("snkConfigOptions.label.typeValueDefault"), suppressEmptyOption: true, enabled: this.enabledValueDefault(), onEzChange: (evt) => { var _a; return this.onConfigDefault((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value); }, value: this.getDefaultType() }, h("option", { value: DEFAULT_TYPE.fixed }, this.getMessage("snkConfigOptions.options.valueFixed")), h("option", { value: DEFAULT_TYPE.variable }, this.getMessage("snkConfigOptions.options.variable")))), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, this._defaultType === DEFAULT_TYPE.variable ?
-      h("ez-combo-box", { label: this.getMessage("snkConfigOptions.label.valueDefault"), enabled: this.isAllowDefault(), onEzChange: (evt) => { var _a; this.fieldConfig.defaultValue.value = (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value; this.configOptionsChanged.emit(this.fieldConfig); }, value: this.fieldConfig.defaultValue.value, options: this.buildOptions() })
-      :
-        ((_b = this._fieldProperties) === null || _b === void 0 ? void 0 : _b.userInterface) &&
-          this.buildField(this._fieldProperties, this.fieldConfig))), h("div", { class: "ez-row ez-padding--medium config-options__switch-row" }, h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: CheckMode.SWITCH, label: this.getMessage("snkConfigOptions.label.clearDuplicate"), value: this.fieldConfig.cleanOnCopy, onEzChange: (evt) => { this.fieldConfig.cleanOnCopy = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: CheckMode.SWITCH, label: this.getMessage("snkConfigOptions.label.requiredField"), enabled: this.getEnabledByProperty("required", "systemRequired"), value: this.getValueByProperty("required"), onEzChange: (evt) => { this.fieldConfig.required = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: CheckMode.SWITCH, label: this.getMessage("snkConfigOptions.label.protectedField"), enabled: this.getEnabledByProperty("readOnly", "systemReadOnly"), value: this.getValueByProperty("readOnly"), onEzChange: (evt) => { this.fieldConfig.readOnly = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } }))))));
-  }
-  get _element() { return getElement(this); }
-};
-SnkConfigOptions.style = snkConfigOptionsCss;
-
-const snkFormCss = ".sc-snk-form-h{--snk-form__header--min-height:94px;display:block}.snk-form__form--hidden.sc-snk-form{display:none}";
-
-const SnkForm = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.exit = createEvent(this, "exit", 7);
-    this.actionClick = createEvent(this, "actionClick", 7);
-    this.formItemsReady = createEvent(this, "formItemsReady", 7);
-    this._customEditors = new Map();
-    this._dataUnit = undefined;
-    this._dataState = undefined;
-    this._showFormConfig = false;
-    this._configManager = undefined;
-    this.configName = undefined;
-    this.recordsValidator = undefined;
-    this.messagesBuilder = undefined;
-    this.formLegacyConfigName = undefined;
-    this.resourceID = undefined;
-  }
-  /**
-   * Exibe a janela de configurações do formulário.
-   */
-  async showConfig() {
-    this._showFormConfig = true;
-  }
-  /**
-   * Fecha a janela de configurações do formulário.
-   */
-  async hideConfig() {
-    this._showFormConfig = false;
-  }
-  /**
-   * Registra um editor customizado para campos da grade e formulário.
-   */
-  async addCustomEditor(fieldName, customEditor) {
-    if (this._form) {
-      this._form.addCustomEditor(fieldName, customEditor);
-      return;
-    }
-    const newCustomEditors = new Map(this._customEditors);
-    newCustomEditors.set(fieldName, customEditor);
-    this._customEditors = newCustomEditors;
-  }
-  /**
-   * Altera/adiciona uma propriedade nos metadados do campo.
-   */
-  async setFieldProp(fieldName, propName, value) {
-    await this._form.setFieldProp(fieldName, propName, value);
-  }
-  closeConfig() {
-    this.hideConfig();
-  }
-  dataunitReady() {
-    const dataInfo = { dataUnit: this._dataUnit };
-    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-  }
-  setCustomEditors() {
-    if (!this._form) {
-      return;
-    }
-    for (const [fieldName, customEditor] of this._customEditors) {
-      this._form.addCustomEditor(fieldName, customEditor);
-      this._customEditors.delete(fieldName);
-    }
-  }
-  async componentDidRender() {
-    this.setCustomEditors();
-  }
-  async componentWillLoad() {
-    let parent = this._element.parentElement;
-    while (parent) {
-      if (parent.tagName.toUpperCase() === "SNK-DATA-UNIT") {
-        this._snkDataUnit = parent;
-        this._dataUnit = this._snkDataUnit.dataUnit;
-        this._dataState = this._snkDataUnit.dataState;
-        if (this._dataUnit) {
-          this.dataunitReady();
-        }
-        else {
-          this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
-            this._dataUnit = evt.detail;
-          });
-        }
-        this._snkDataUnit.addEventListener("dataStateChange", this.handleDataStateChange.bind(this));
-        break;
-      }
-      parent = parent.parentElement;
-    }
-    if (this.resourceID == undefined) {
-      this.resourceID = await ResourceIDUtils.getResourceID();
-    }
-    this._configManager = new SnkFormConfigManager(this.configName, this.resourceID, undefined, this._dataUnit);
-    this.addFormLegacyConfig();
-    await this._configManager.loadConfig();
-  }
-  async handleDataStateChange(evt) {
-    var _a;
-    this._dataState = evt.detail;
-    const fieldsWithRmPrecision = await this._snkDataUnit.getFieldsWithRmPrecision();
-    for (const field of fieldsWithRmPrecision || []) {
-      if (!field) {
-        continue;
-      }
-      const rmPrecision = (_a = this._dataState.rowMetadata) === null || _a === void 0 ? void 0 : _a.getProp('rm_precision', field);
-      if (!rmPrecision && rmPrecision !== 0) {
-        continue;
-      }
-      await this.setFieldProp(field, 'precision', rmPrecision);
-      await this.setFieldProp(field, 'prettyPrecision', rmPrecision);
-    }
-  }
-  addFormLegacyConfig() {
-    if (this.formLegacyConfigName) {
-      this._configManager.addFormLegacyConfig(this.formLegacyConfigName);
-    }
-  }
-  render() {
-    if (!this._dataUnit || !this._dataState) {
-      return undefined;
-    }
-    return (h("section", null, h("div", { class: "ez-row" }, h("div", { class: "ez-col ez-col--sd-12" }, h("ez-form", { ref: (ref) => this._form = ref, key: "ezForm" + this._snkDataUnit.entityName, "data-element-id": "embedded", dataUnit: this._dataUnit, config: this._configManager.getConfig(this._dataUnit), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
-      h("snk-form-config", { messagesBuilder: this.messagesBuilder, dataUnit: this._dataUnit, configManager: this._configManager, onConfigClose: () => this.closeConfig() })))));
-  }
-  get _element() { return getElement(this); }
-};
-SnkForm.style = snkFormCss;
-
-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)}div.sc-snk-form-config:focus-visible,div.sc-snk-form-config:focus{outline:none}.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 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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._sortableTimer = 100;
-    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;
-    this.ignoreReadOnlyFormFields = undefined;
-  }
-  observeConfigManager() {
-    this.loadConfig(this._sortableTimer);
-  }
-  loadFields(updateTimer = 0) {
-    this._layoutFormConfig = [];
-    if (updateTimer > 0) {
-      setTimeout(() => {
-        this.buildFields();
-      }, updateTimer);
-    }
-    else {
-      this.buildFields();
-    }
-  }
-  buildFields() {
-    this.buildFormConfig();
-    this.buildAvailableFields();
-  }
-  loadFormConfig(updateTimer) {
-    var _a;
-    this._formConfig = this.getConfig();
-    this.loadFields(updateTimer);
-    this.controlFieldConfig();
-    if (((_a = this._filterFieldsAvailable) === null || _a === void 0 ? void 0 : _a.value) != undefined) {
-      this._filterFieldsAvailable.value = "";
-    }
-  }
-  getConfig() {
-    let config = this.configManager.getConfig(this.dataUnit, this.ignoreReadOnlyFormFields);
-    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._sortableTimer);
-    this.clearTempGroups();
-  }
-  resetChangeOptionConfig() {
-    this._formConfigChanged = false;
-    this.loadConfig(this._sortableTimer);
-    this.clearTempGroups();
-  }
-  getTabsToSave() {
-    return this._layoutFormConfig
-      .map((layoutConfig, index) => {
-      return {
-        label: layoutConfig.tab,
-        order: index,
-        visible: layoutConfig.visible
-      };
-    });
-  }
-  getFieldsToSave() {
-    const fields = [];
-    const snkFieldConfigs = this._formContainer.querySelectorAll('snk-field-config');
-    snkFieldConfigs.forEach((snkField) => {
-      const fieldConfig = snkField.fieldConfig;
-      if (fieldConfig == undefined) {
-        return;
-      }
-      const fieldToSave = {
-        cleanOnCopy: fieldConfig.cleanOnCopy || false,
-        group: fieldConfig.group,
-        label: fieldConfig.label,
-        name: fieldConfig.name,
-        required: fieldConfig.required,
-        readOnly: fieldConfig.readOnly,
-        tab: fieldConfig.tab
-      };
-      if (fieldConfig.defaultValue != undefined) {
-        if (fieldConfig.defaultValue.type == undefined) {
-          fieldToSave.defaultValue = {
-            type: DEFAULT_TYPE.fixed,
-            value: fieldConfig.defaultValue
-          };
-        }
-        else {
-          fieldToSave.defaultValue = fieldConfig.defaultValue;
-        }
-      }
-      fields.push(fieldToSave);
-    });
-    return fields;
-  }
-  isDefaultConfiguration() {
-    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 => {
-      var _a;
-      ApplicationUtils.info(this.getMessage("snkFormConfig.info.successfullyConfigSaved"), { iconName: "check" });
-      const userOption = (_a = this._formConfigOptions) === null || _a === void 0 ? void 0 : _a.find((config) => {
-        return config.origin === UserConfigType.USER;
-      });
-      this.setFormConfig(userOption);
-      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 = [];
-      setTimeout(() => {
-        this.buildAvailableFields();
-      }, this._sortableTimer);
-      return true;
-    }
-    return false;
-  }
-  isRemoveField(newContainer, oldContainer, fieldConfig) {
-    if (newContainer == undefined || oldContainer == undefined || fieldConfig == undefined) {
-      return false;
-    }
-    if ((oldContainer.tagName === CONTAINER_ID.collapsibleBox
-      || oldContainer.id === CONTAINER_ID.withoutGroup)
-      && newContainer.id === CONTAINER_ID.fieldsAvailable) {
-      const eventDetail = {
-        detail: {
-          field: fieldConfig,
-          type: ACTION_CONFIG.remove
-        }
-      };
-      setTimeout(() => {
-        this.handleFieldConfigChange(eventDetail);
-      }, this._renderTimer);
-      return true;
-    }
-    return false;
-  }
-  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 Sortable(this._sortableContainer.querySelectorAll('[data-draggable-parent="field"]'), {
-      draggable: '[data-draggable-element="field"]',
-      mirror: {
-        constrainDimensions: true
-      },
-      distance: CONFIG_EVENTS.dragStartDistance
-    });
-    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingField(evt));
-    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragSorted, (evt) => this.controlSortedDraggingField(evt));
-    this._sortableField.on(CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingField(evt));
-  }
-  controlStartDraggingGroup(evt) {
-    if (this._mouseOnFieldConfig || this._editingTitleGroup) {
-      evt === null || evt === void 0 ? void 0 : evt.cancel();
-      this._mouseOnFieldConfig = false;
-    }
-  }
-  controlStopDraggingGroup(evt) {
-    if (evt.data.newIndex !== evt.data.oldIndex) {
-      setTimeout(() => {
-        this.updateFieldsToSave(this._sortableTimer);
-      }, this._renderTimer);
-    }
-  }
-  controlSortableGroup() {
-    if (this._sortableContainer == undefined) {
-      return;
-    }
-    if (this._sortableGroup) {
-      this._sortableGroup.destroy();
-    }
-    this._sortableGroup = new Sortable(this._sortableContainer.querySelectorAll('[data-draggable-parent="group"]'), {
-      draggable: '[data-draggable-element="group"]',
-      mirror: {
-        constrainDimensions: true
-      },
-      distance: CONFIG_EVENTS.dragStartDistance
-    });
-    this._sortableGroup.on(CONFIG_SORTABLE_EVENTS.dragStart, (evt) => this.controlStartDraggingGroup(evt));
-    this._sortableGroup.on(CONFIG_SORTABLE_EVENTS.dragStop, (evt) => this.controlStopDraggingGroup(evt));
-  }
-  loadUserConfig() {
-    if (this.configManager == undefined) {
-      return;
-    }
-    this.configManager.fetchUserAvailableConfigs()
-      .then((userConfig) => {
-      this._formConfigOptions = userConfig;
-      if (this._formConfigOptions == undefined) {
-        return;
-      }
-      let isDefault = this._formConfig != undefined ? this._formConfig.defaultConfiguration : true;
-      const selectedOption = userConfig
-        .find((config) => {
-        return config.origin === (isDefault ? UserConfigType.DEFAULT : UserConfigType.USER);
-      });
-      this.setFormConfig(selectedOption);
-    });
-  }
-  setFormConfig(config) {
-    this._optionFormConfigSelected = config;
-  }
-  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;
-    }
-  }
-  async loadConfigByUser() {
-    if (this.configManager == undefined) {
-      return;
-    }
-    if (this._optionFormConfigSelected == undefined) {
-      return;
-    }
-    let config;
-    switch (this._optionFormConfigSelected.origin) {
-      case UserConfigType.DEFAULT:
-        config = await this.configManager.fetchDefaultConfig();
-        if (!config) {
-          config = this.configManager.getEmptyConfig();
-        }
-        break;
-      default:
-        config = this.getConfig();
-        break;
-    }
-    if (config != undefined) {
-      this._formConfig = config;
-      this._tabSelected = 1;
-      this.loadFields(this._sortableTimer);
-      this.controlFieldConfig();
-      this.clearTempGroups();
-    }
-  }
-  loadConfig(updateTimer = 0) {
-    this.loadFormConfig(updateTimer);
-    this.loadUserConfig();
-  }
-  addNewGroup() {
-    var _a, _b;
-    const tab = (_a = this._tabConfig) === null || _a === void 0 ? void 0 : _a.selectedTab;
-    const hasGroup = (_b = this._tempGroups) === null || _b === void 0 ? void 0 : _b.find((tempGroup) => {
-      return tempGroup.tab === tab && tempGroup.group.includes(this._labelNewGroup);
-    });
-    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 === 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._sortableTimer);
-    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, _c;
-    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);
-        /**
-         * Quando um campo é ocultado pelo dev, mas queremos manter ele na config precisamos fazer essa tratativa.
-         */
-        const visibleOnConfig = ((_b = fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.properties) === null || _b === void 0 ? void 0 : _b.visibleOnConfig) === true && (fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.visible) === false;
-        if ((fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.visible) || visibleOnConfig) {
-          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 = ((_c = field.tab) === null || _c === void 0 ? void 0 : _c.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 = [];
-    }
-    if (this._formConfig.defaultConfiguration) {
-      return 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, properties }) => {
-      const hasCfg = fieldsFormConfig.some(({ name: _nameFieldForm }) => _nameFieldForm === _nameFieldMetadado);
-      /**
-       * Quando a visibilidade de um campo é alterada pelo dataunit, mas o desenvolvedor deseja que o mesmo continue
-       * sendo apresentado no configurador, precisamos fazer essa tratativa, verificando se o campo não tem configuração
-      */
-      if (!hasCfg && properties.visibleOnConfig === true && !_visibleMetadado)
-        return properties.visibleOnConfig;
-      return _visibleMetadado === true && hasCfg === false;
-    });
-    this._fieldsAvailable = listFieldsAvailable;
-    this._listEnabledFields = listFieldsAvailable;
-    if (((_b = this._filterFieldsAvailable) === null || _b === void 0 ? void 0 : _b.value) != undefined) {
-      const filterValue = this._filterFieldsAvailable.value;
-      this.onFilterChange(filterValue);
-    }
-  }
-  changeTabSelected(tabSelected) {
-    this._tabSelected = tabSelected.index;
-    const selectorTab = this._formContainer.querySelector("div#tab" + tabSelected.index);
-    this._formContainer.querySelectorAll(".form-config__tab-content").forEach(container => container.className = "form-config__hide-content sc-snk-form-config");
-    if (selectorTab) {
-      selectorTab.className = "form-config__tab-content ez-flex ez-flex--column ez-size-width--full ez-padding--medium sc-snk-form-config";
-    }
-  }
-  onFilterChange(value) {
-    this._fieldsAvailable = ArrayUtils.applyStringFilter(value, this._listEnabledFields, true, "label");
-  }
-  orderFieldsAvailable(fields) {
-    return ArrayUtils.sortAlphabetically(fields);
-  }
-  handleLabelCounter(sizeList) {
-    const labels = [this.getMessage("snkFormConfig.availableFields.labelNoFields"), this.getMessage("snkFormConfig.availableFields.labelOneField")];
-    return sizeList > 1 ? `${sizeList} ${this.getMessage("snkFormConfig.availableFields.labelAvailableFields")}` : labels[sizeList];
-  }
-  controlAddFieldConfig(fieldConfig) {
-    var _a;
-    this._formConfigChanged = false;
-    if (fieldConfig == undefined) {
-      return;
-    }
-    if (this._formConfig.fields == undefined) {
-      this._formConfig.fields = [];
-    }
-    const fieldFinded = this._formConfig.fields.filter((field) => {
-      return field.name === fieldConfig.name && field.tab && fieldConfig.tab;
-    });
-    if (fieldFinded.length > 0) {
-      fieldFinded.forEach((field) => {
-        field.name = fieldConfig.name;
-        field.label = fieldConfig.label;
-        field.required = fieldConfig.required;
-        field.readOnly = fieldConfig.readOnly;
-        field.group = fieldConfig.group;
-      });
-    }
-    else {
-      this._formConfig.fields.push({
-        name: fieldConfig.name,
-        label: fieldConfig.label,
-        required: fieldConfig.required,
-        readOnly: fieldConfig.readOnly,
-        group: fieldConfig.group,
-        tab: (_a = this._tabConfig) === null || _a === void 0 ? void 0 : _a.selectedTab
-      });
-    }
-    this.loadFields();
-    this.controlFieldConfig();
-    this._formConfigChanged = true;
-    this.resetSortables();
-  }
-  controlRemoveFieldConfig(fieldConfig, updateTimer) {
-    var _a;
-    this._formConfigChanged = false;
-    if (fieldConfig == undefined) {
-      return;
-    }
-    this._formConfig.fields = (_a = this._formConfig.fields) === null || _a === void 0 ? void 0 : _a.filter((field) => field.name !== fieldConfig.name);
-    this.loadFields(updateTimer);
-    this.controlFieldConfig();
-    this._formConfigChanged = true;
-    this.resetSortables();
-  }
-  resetSortables() {
-    this.controlSortableField();
-    this.controlSortableGroup();
-  }
-  handleFieldConfigChange(evt, updateTimer = 0) {
-    const { field: fieldConfig, type: actionType } = evt.detail;
-    if (actionType === ACTION_CONFIG.configuration) {
-      this.controlFieldConfig(fieldConfig);
-      return;
-    }
-    if (actionType === ACTION_CONFIG.remove) {
-      this.controlRemoveFieldConfig(fieldConfig, updateTimer);
-      return;
-    }
-    if (actionType === ACTION_CONFIG.add) {
-      this.controlAddFieldConfig(fieldConfig);
-      return;
-    }
-  }
-  changeTabLabel(editDetails) {
-    var _a, _b;
-    const { value: oldLabel, newValue: newLabel } = editDetails.detail.detail;
-    (_a = this._formConfig.fields) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
-      if (field.tab === oldLabel) {
-        field.tab = newLabel;
-      }
-    });
-    (_b = this._formConfig.tabs) === null || _b === void 0 ? void 0 : _b.forEach((tab) => {
-      if (tab.label === oldLabel) {
-        tab.label = newLabel;
-      }
-    });
-    this.loadFields(this._sortableTimer);
-    this.controlFieldConfig();
-    this._formConfigChanged = true;
-  }
-  handleDeleteTab(tabSelected) {
-    let options = {
-      canClose: false,
-      labelCancel: this.getMessage("snkFormConfig.confirm.labelCancel"),
-      labelConfirm: this.getMessage("snkFormConfig.confirm.labelDelete"),
-      btnConfirmDanger: false
-    };
-    const title = this.getMessage("snkFormConfig.confirm.title");
-    const deleteTab = this.getMessage("snkFormConfig.confirm.deleteTab") + ` <b>${tabSelected.detail.label}</b>?`;
-    ApplicationUtils.confirm(title, deleteTab, null, DialogType.WARN, options)
-      .then(response => {
-      var _a;
-      if (response) {
-        this._formConfig.tabs = (_a = this._formConfig.tabs) === null || _a === void 0 ? void 0 : _a.filter((tab) => {
-          return tab.label !== tabSelected.detail.label;
-        });
-        this.loadFields(this._sortableTimer);
-        this.controlFieldConfig();
-        this._formConfigChanged = true;
-      }
-    });
-  }
-  changeHideTab(tabSelected) {
-    var _a;
-    (_a = this._formConfig.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => {
-      if (tab.label === tabSelected.detail.label) {
-        tab.visible = !tab.visible;
-      }
-    });
-    this.loadFields(this._sortableTimer);
-    this.controlFieldConfig();
-    this._formConfigChanged = true;
-  }
-  handleCanStartDragTab() {
-    var _a, _b;
-    const tabs = this._layoutFormConfig.map(tab => tab.tab);
-    for (const tab of tabs) {
-      (_a = this._currentGroupBoxes[tab]) === null || _a === void 0 ? void 0 : _a.map(collapsibleBox => collapsibleBox === null || collapsibleBox === void 0 ? void 0 : collapsibleBox.cancelEdition());
-    }
-    (_b = this._newGroupBoxes) === null || _b === void 0 ? void 0 : _b.map(collapsibleBox => collapsibleBox === null || collapsibleBox === void 0 ? void 0 : collapsibleBox.cancelEdition());
-  }
-  /**
-   * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
-   * através de um pequeno modulo na estrutura da aplicação:
-   * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
-   * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-form.msg.ts"
-   */
-  getMessage(key, params) {
-    return this.messagesBuilder.getMessage(key, params);
-  }
-  componentDidRender() {
-    this.controlSortableField();
-    this.controlSortableGroup();
-  }
-  async componentWillRender() {
-    if (this.messagesBuilder == undefined) {
-      const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-      this.messagesBuilder = application.messagesBuilder;
-    }
-  }
-  componentWillLoad() {
-    this.loadConfig();
-  }
-  componentDidLoad() {
-    const dataInfo = { dataUnit: this.dataUnit };
-    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-  }
-  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 getElement(this); }
-  static get watchers() { return {
-    "configManager": ["observeConfigManager"]
-  }; }
-};
-SnkFormConfig.style = snkFormConfigCss;
-
-export { SnkConfigOptions as snk_config_options, SnkForm as snk_form, SnkFormConfig as snk_form_config };