@sankhyalabs/sankhyablocks 9.0.1 → 9.1.0-dev.2

package/dist/cjs/field-config_2.cjs.entry.js

@@ -0,0 +1,324 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1cf293c1.js');
+const core = require('@sankhyalabs/core');
+const constants = require('./constants-6d82e405.js');
+const DataType = require('@sankhyalabs/core/dist/dataunit/metadata/DataType');
+const utils = require('@sankhyalabs/ezui/dist/collection/utils');
+const FormConfigHelper = require('./FormConfigHelper-c664dbae.js');
+
+const fieldConfigCss = ".field-config-container.sc-field-config{font-family:'Roboto';color:#2b3a54;display:flex;flex-direction:column;gap:10px;width:330px;justify-content:space-between}.header.sc-field-config{display:flex;font-weight:500;font-size:16px}.actions.sc-field-config{display:flex;align-items:flex-end;gap:12px}";
+
+const FieldConfig = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fieldConfigChanged = index.createEvent(this, "fieldConfigChanged", 7);
+    this.fieldLabel = undefined;
+    this.fieldLabelErrorMessage = undefined;
+    this.fieldDefaultValue = undefined;
+    this.fieldCleanOnCopy = undefined;
+    this.fieldRequired = undefined;
+    this.fieldReadOnly = undefined;
+    this._defaultType = undefined;
+    this.dataUnit = undefined;
+    this.fieldConfig = undefined;
+    this.fieldDescriptor = undefined;
+    this.messagesBuilder = undefined;
+  }
+  observeFieldLabel() {
+    if (this.validateFieldLabel) {
+      this.fieldLabelErrorMessage = undefined;
+    }
+  }
+  async show(_anchorElement) {
+    this._popoupElement.opened = true;
+    this.initializeValues();
+    index.forceUpdate(this);
+  }
+  validateFieldLabel() {
+    var _a;
+    if ((_a = this.fieldLabel) === null || _a === void 0 ? void 0 : _a.trim())
+      return true;
+    this.applyErrorMessage();
+    return false;
+  }
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
+  isAllowDefault() {
+    var _a;
+    const allowDefault = (_a = this.fieldDescriptor.properties) === null || _a === void 0 ? void 0 : _a.allowDefault;
+    if (allowDefault == undefined) {
+      return true;
+    }
+    return allowDefault === 'true';
+  }
+  enabledValueDefault() {
+    var _a, _b, _c;
+    const allowDefault = (_a = this.fieldDescriptor.properties) === null || _a === void 0 ? void 0 : _a.allowDefault;
+    const hasVariableVar = (constants.VARS_BY_TYPE.UserInterface.hasOwnProperty((_b = this.fieldDescriptor) === null || _b === void 0 ? void 0 : _b.userInterface)
+      || ((_c = this.fieldDescriptor) === null || _c === void 0 ? void 0 : _c.userInterface) === core.UserInterface.SEARCH);
+    return hasVariableVar && (allowDefault == undefined || allowDefault === 'true');
+  }
+  getDefaultType() {
+    var _a, _b;
+    return (_b = (_a = this.fieldDefaultValue) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : constants.DEFAULT_TYPE.fixed;
+  }
+  emitFieldChanged() {
+    this.fieldConfigChanged.emit(this.fieldConfig);
+  }
+  handleLabelChanged({ detail }) {
+    this.fieldLabel = detail;
+  }
+  handleDefaultTypeChanged({ detail }) {
+    const optionSelected = detail.value;
+    if (optionSelected == undefined)
+      return;
+    this._defaultType = optionSelected;
+    this.fieldDefaultValue = { type: this._defaultType };
+  }
+  handleDefaultValueChanged({ detail }) {
+    this.fieldDefaultValue.value = detail === null || detail === void 0 ? void 0 : detail.value;
+  }
+  onChangeDefaultValue(fieldValue) {
+    this.fieldDefaultValue.value = FormConfigHelper.getValidatedFieldValue(fieldValue, this.dataUnit, this.fieldConfig.name);
+  }
+  handleClearDuplicateChanged({ detail }) {
+    this.fieldCleanOnCopy = detail;
+  }
+  handleRequiredChanged({ detail }) {
+    this.fieldRequired = detail;
+  }
+  handleReadOnlyChanged({ detail }) {
+    this.fieldReadOnly = detail;
+  }
+  loadDefaultValue() {
+    var _a;
+    if ((_a = this.fieldConfig.defaultValue) === null || _a === void 0 ? void 0 : _a.type) {
+      this._defaultType = this.fieldConfig.defaultValue.type;
+      return;
+    }
+    this._defaultType = constants.DEFAULT_TYPE.fixed;
+    this.fieldConfig.defaultValue = { type: this._defaultType };
+  }
+  buildOptions() {
+    let interfaceField = this.fieldDescriptor.userInterface;
+    if (interfaceField === core.UserInterface.SEARCH) {
+      interfaceField = core.UserInterface.INTEGERNUMBER;
+    }
+    return constants.VARS_BY_TYPE.UserInterface[interfaceField];
+  }
+  renderDefaultValueEditor() {
+    if (this._defaultType === constants.DEFAULT_TYPE.variable) {
+      return (index.h("ez-combo-box", { label: this.getMessage('snkConfigOptions.label.valueDefault'), enabled: this.isAllowDefault(), onEzChange: (e) => this.handleDefaultValueChanged(e), value: this.fieldDefaultValue.value, options: this.buildOptions() }));
+    }
+    return this.fieldDescriptor.userInterface &&
+      this.buildFieldDefaultValueElement();
+  }
+  buildFieldDefaultValueElement() {
+    var _a;
+    const { userInterface, properties, dataType } = this.fieldDescriptor;
+    const allowDefault = properties === null || properties === void 0 ? void 0 : properties.allowDefault;
+    let value;
+    let enabled = core.StringUtils.getBooleanValue(allowDefault, !this.fieldReadOnly);
+    if (userInterface === core.UserInterface.FILE) {
+      enabled = false;
+    }
+    if (enabled) {
+      value = (_a = this.fieldDefaultValue) === null || _a === void 0 ? void 0 : _a.value;
+      if (value != undefined) {
+        value = DataType.getConvertedValue(dataType, value);
+      }
+    }
+    const configField = {
+      value,
+      enabled,
+      label: this.fieldConfig.label,
+      name: this.fieldConfig.name,
+      required: this.fieldRequired,
+      userInterface,
+    };
+    switch (userInterface) {
+      case core.UserInterface.SWITCH:
+        return this.buildInputDefault(configField, undefined, utils.CheckMode.SWITCH);
+      case core.UserInterface.CHECKBOX:
+        return this.buildInputDefault(configField, undefined, utils.CheckMode.REGULAR);
+      case core.UserInterface.OPTIONSELECTOR:
+      case core.UserInterface.DECIMALNUMBER:
+        return this.buildInputDefault(configField, properties);
+      default:
+        return this.buildInputDefault(configField);
+    }
+  }
+  buildInputDefault({ value, enabled, label, name, required, userInterface }, properties = undefined, mode = undefined) {
+    let options;
+    let precision = 0;
+    let prettyPrecision = 0;
+    const TagName = userInterface == undefined || constants.TAGS_BY_TYPE[userInterface] == undefined
+      ? constants.TAGS_BY_TYPE.DEFAULT
+      : constants.TAGS_BY_TYPE[userInterface];
+    if (userInterface === core.UserInterface.OPTIONSELECTOR) {
+      const prop = properties === null || properties === void 0 ? void 0 : properties.options;
+      if (typeof prop === 'string') {
+        const parsed = core.ObjectUtils.stringToObject(prop);
+        options = Object.keys(parsed).map(key => {
+          return { value: key, label: parsed[key] };
+        });
+      }
+      else {
+        options = prop;
+      }
+    }
+    else if (userInterface === core.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 index.h(TagName, Object.assign({ value: value, enabled: enabled, label: label, "data-field-name": name, key: name, onEzChange: (evt) => this.onChangeDefaultValue(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 == core.UserInterface.SEARCHPLUS;
+    switch (userInterface) {
+      case core.UserInterface.SEARCH:
+      case core.UserInterface.SEARCHPLUS:
+        return {
+          suppressEmptyOption: required,
+          optionLoader: (searchArgument) => this.onSearchDefaultValue(searchArgument, { useSearchPlus }),
+        };
+      case core.UserInterface.OPTIONSELECTOR:
+        return {
+          suppressEmptyOption: required,
+          options,
+        };
+      case core.UserInterface.CHECKBOX:
+      case core.UserInterface.SWITCH:
+        return {
+          mode,
+        };
+      case core.UserInterface.INTEGERNUMBER:
+      case core.UserInterface.DECIMALNUMBER:
+        return {
+          precision,
+          prettyPrecision,
+          onEzStartChange: (evt) => this.onChangeDefaultValue(evt === null || evt === void 0 ? void 0 : evt.detail),
+        };
+      case core.UserInterface.DATE:
+      case core.UserInterface.DATETIME:
+      case core.UserInterface.TIME:
+        return {
+          onEzStartChange: (evt) => this.onChangeDefaultValue(evt === null || evt === void 0 ? void 0 : evt.detail),
+        };
+      default:
+        return {};
+    }
+  }
+  onSearchDefaultValue(searchArgument, ctxOptions) {
+    if (this._application && this.fieldConfig) {
+      return this._application.executeSearch(searchArgument, this.fieldConfig.name, this.dataUnit, ctxOptions);
+    }
+  }
+  initializeValues() {
+    this.fieldLabel = this.fieldConfig.label;
+    this.fieldDefaultValue = this.fieldConfig.defaultValue;
+    this.fieldRequired = this.fieldConfig.required;
+    this.fieldReadOnly = this.fieldConfig.readOnly;
+    this.fieldCleanOnCopy = this.fieldConfig.cleanOnCopy;
+  }
+  handleApplyChanges() {
+    if (!this.validateFieldLabel())
+      return;
+    this.fieldConfig.label = this.fieldLabel;
+    this.fieldConfig.defaultValue = this.fieldDefaultValue;
+    this.fieldConfig.required = this.fieldRequired;
+    this.fieldConfig.readOnly = this.fieldReadOnly;
+    this.fieldConfig.cleanOnCopy = this.fieldCleanOnCopy;
+    this.emitFieldChanged();
+    this._popoupElement.opened = false;
+  }
+  applyErrorMessage() {
+    this.fieldLabelErrorMessage = `Informe um valor para ${this.getMessage('snkConfigOptions.label.nameField')}`;
+  }
+  handleDiscardChanges() {
+    this.initializeValues();
+    this._popoupElement.opened = false;
+  }
+  componentWillLoad() {
+    this.loadDefaultValue();
+    this._application = core.ApplicationContext.getContextValue('__SNK__APPLICATION__');
+  }
+  render() {
+    return (index.h("ez-popup", { heightMode: 'auto', size: 'auto', "ez-title": 'Configuração do campo', onEzClosePopup: () => this.handleDiscardChanges(), ref: ref => this._popoupElement = ref }, index.h("div", { class: 'field-config-container' }, index.h("ez-text-input", { label: this.getMessage('snkConfigOptions.label.nameField'), value: this.fieldLabel, errorMessage: this.fieldLabelErrorMessage, hasInvalid: !!this.fieldLabelErrorMessage, onEzChange: (e) => this.handleLabelChanged(e) }), index.h("ez-combo-box", { label: this.getMessage('snkConfigOptions.label.typeValueDefault'), suppressEmptyOption: true, enabled: this.enabledValueDefault(), onEzChange: (e) => this.handleDefaultTypeChanged(e), value: this.getDefaultType() }, index.h("option", { value: constants.DEFAULT_TYPE.fixed }, this.getMessage('snkConfigOptions.options.valueFixed')), index.h("option", { value: constants.DEFAULT_TYPE.variable }, this.getMessage('snkConfigOptions.options.variable'))), this.renderDefaultValueEditor(), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.clearDuplicate'), value: this.fieldCleanOnCopy, onEzChange: (e) => this.handleClearDuplicateChanged(e) }), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.requiredField'), enabled: FormConfigHelper.getEnabledByProperty('required', 'systemRequired', this.fieldDescriptor), value: FormConfigHelper.getValueByProperty('required', this.fieldDescriptor, this.fieldRequired), onEzChange: (e) => this.handleRequiredChanged(e) }), index.h("ez-check", { label: this.getMessage('snkConfigOptions.label.protectedField'), enabled: FormConfigHelper.getEnabledByProperty('readOnly', 'systemReadOnly', this.fieldDescriptor), value: FormConfigHelper.getValueByProperty('readOnly', this.fieldDescriptor, this.fieldReadOnly), onEzChange: (e) => this.handleReadOnlyChanged(e) }), index.h("div", { class: 'actions' }, index.h("ez-button", { label: 'Cancelar', onClick: () => this.handleDiscardChanges() }), index.h("ez-button", { label: 'Confirmar', class: "ez-button--primary", onClick: () => this.handleApplyChanges() })))));
+  }
+  static get watchers() { return {
+    "fieldLabel": ["observeFieldLabel"]
+  }; }
+};
+FieldConfig.style = fieldConfigCss;
+
+const fieldItemCss = ".sc-field-item-h {\n  width: 32%;\n  min-width: 200px;\n  display: flex;\n  padding: 12px 8px;\n  border-radius: var(--border--radius-small, 4px);\n  border: 1px solid #dce0e8;\n  cursor: grab;\n  align-items: center;\n  height: 42px;\n  max-height: 42px;\n  background: #FAFCFF;\n}\n\n.ghost.sc-field-item-h{\n  width: 32% !important;\n}\n\n@container (max-width: 430px) {\n  .sc-field-item-h,\n  .sc-field-item-h.ghost{\n    width: 100% !important;\n  }\n}\n\n@container (min-width: 431px) and (max-width: 632px) {\n  .sc-field-item-h,\n  .sc-field-item-h.ghost {\n    width: 48% !important;\n  }\n}\n\n.full-width.sc-field-item-h{\n  width: 100%;\n}\n\nez-icon.sc-field-item {\n  --ez-icon--color: #A2ABB9;\n}\n\n.icons.sc-field-item {\n  display: flex;\n}\n\n.label.sc-field-item {\n  display: flex;\n  flex-grow: 1;\n  padding-left: 8px;\n  font-size: 14px;\n  align-items: center;\n  gap: 4px;\n  height: 22px;\n}\n\n.label-text.sc-field-item {\n  overflow: hidden;\n  -webkit-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  height: auto;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  display: -webkit-box;\n  -o-text-overflow: ellipsis;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n\n.required-mark.sc-field-item {\n  color: #cf3105;\n  background: #F7E0E5;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 5px;\n  font-size: 16px;\n  align-self: self-start;\n}\n\n\n.actions.sc-field-item {\n  display: flex;\n  flex-direction: row;\n  align-content: center;\n  gap: 4px;\n}\n\nez-button.sc-field-item {\n  width: 24px;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n}\n\n.sc-field-item-h .hiddeble.sc-field-item {\n  transition: 0.2s ease-in-out;\n  visibility: hidden;\n  opacity: 0;\n}\n\n.sc-field-item-h:hover .hiddeble.sc-field-item {\n  visibility: visible;\n  opacity: 1;\n}";
+
+const FieldItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.setFieldAsAvailable = index.createEvent(this, "setFieldAsAvailable", 7);
+    this.addFieldToGuide = index.createEvent(this, "addFieldToGuide", 7);
+    this.fieldDescriptor = undefined;
+    this.fieldConfig = undefined;
+    this.onLayoutConfig = false;
+    this.dataUnit = undefined;
+    this.messagesBuilder = undefined;
+  }
+  observeDataUnit() {
+    this.loadFieldDescriptor();
+  }
+  isRequired() {
+    var _a, _b;
+    const fieldMD = this.dataUnit && this.dataUnit.getField((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.name);
+    return (fieldMD === null || fieldMD === void 0 ? void 0 : fieldMD.required) === true || ((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.required) === true;
+  }
+  async showFieldConfig() {
+    var _a;
+    await ((_a = this._refFieldConfig) === null || _a === void 0 ? void 0 : _a.show(this._editIconRef));
+  }
+  renderFieldConfig() {
+    if (this.onLayoutConfig && this.dataUnit && this.messagesBuilder) {
+      return (index.h("field-config", { ref: ref => this._refFieldConfig = ref, fieldConfig: this.fieldConfig, dataUnit: this.dataUnit, fieldDescriptor: this.fieldDescriptor, messagesBuilder: this.messagesBuilder, onFieldConfigChanged: () => index.forceUpdate(this) }));
+    }
+  }
+  renderActions() {
+    if (this.onLayoutConfig) {
+      return (index.h("div", { class: 'actions hiddeble' }, index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.setFieldAsAvailable.emit(this.fieldConfig), size: "medium", iconName: 'minus', title: 'Remover' }), index.h("ez-button", { ref: ref => this._editIconRef = ref, mode: "icon", class: "ez-button--tertiary", onClick: this.showFieldConfig.bind(this), iconName: 'edit', size: "medium", title: 'Editar' })));
+    }
+    return (index.h("div", { class: 'actions hiddeble' }, index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.addFieldToGuide.emit(this.fieldConfig), iconName: 'plus', size: "medium", title: 'Adicionar ao Layout' })));
+  }
+  loadFieldDescriptor() {
+    if (this.dataUnit) {
+      this.fieldDescriptor = this.dataUnit.getField(this.fieldConfig.name);
+    }
+  }
+  renderRequiredMark() {
+    if (this.isRequired())
+      return index.h("span", { class: 'required-mark' }, "*");
+  }
+  componentWillLoad() {
+    this.loadFieldDescriptor();
+  }
+  getFieldLabel() {
+    var _a, _b;
+    if ((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.label)
+      return this.fieldConfig.label;
+    return (_b = this.fieldDescriptor) === null || _b === void 0 ? void 0 : _b.label;
+  }
+  render() {
+    var _a;
+    return (index.h(index.Host, { class: !this.onLayoutConfig ? 'full-width' : "" }, index.h("div", { class: 'icons' }, index.h("ez-icon", { iconName: "drag-indicator" }), index.h("ez-icon", { iconName: FormConfigHelper.getIconName((_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) })), index.h("span", { class: 'label' }, index.h("span", { class: 'label-text', title: this.getFieldLabel() }, this.getFieldLabel()), this.renderRequiredMark()), this.renderActions(), this.renderFieldConfig()));
+  }
+  static get watchers() { return {
+    "dataUnit": ["observeDataUnit"]
+  }; }
+};
+FieldItem.style = fieldItemCss;
+
+exports.field_config = FieldConfig;
+exports.field_item = FieldItem;

package/dist/cjs/fields-layout.cjs.entry.js

@@ -0,0 +1,341 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1cf293c1.js');
+const core = require('@sankhyalabs/core');
+const sortable_esm = require('./sortable.esm-9a110bb7.js');
+const FormConfigHelper = require('./FormConfigHelper-c664dbae.js');
+const constants = require('./constants-6d82e405.js');
+const utils = require('@sankhyalabs/ezui/dist/collection/utils');
+
+const fieldsLayoutCss = ".sc-fields-layout-h{display:flex;padding:12px;box-shadow:var(--shadow--small, 0 0 16px rgba(0, 38, 111, 0.07));border-radius:var(--border--radius-medium, 6px);height:var(--snk-form-config-container-height);flex-direction:column}.layout-container.sc-fields-layout{container-type:inline-size;display:flex;flex-direction:column;overflow:auto;height:calc(100vh - 225px)}.guide-header.sc-fields-layout{display:flex;width:100%;font-size:20px;border-bottom:1px solid #dce0e8;margin-bottom:6px;align-items:center;height:45px}.guide-header.sc-fields-layout ez-button.sc-fields-layout{transition:all 0.2s ease-in-out;visibility:hidden;opacity:0}.guide-header.sc-fields-layout:hover ez-button.sc-fields-layout{visibility:visible;opacity:1}.guide-header-label.sc-fields-layout{display:block;padding:10px 0}.group-config.sc-fields-layout{padding:12px 0;display:flex;flex-direction:column;width:100%}.group-content.sc-fields-layout{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;min-height:65px;width:100%;padding:6px 0}.group-content.empty-content.sc-fields-layout{position:relative}.group-content.empty-content.sc-fields-layout::before{content:\"Arraste e solte um campo aqui\";color:#cbcfd7;font-size:16px;font-weight:500;text-align:center;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity 0.3s;width:100%;height:100%;box-sizing:border-box;padding:10px;background:#f9f9f9;border:1px dashed #dce0e8;border-radius:6px}.no-group-container.sc-fields-layout{padding:12px 0;width:100%;border-bottom:1px solid #dce0e8}.no-group-container.sc-fields-layout::before{content:\"Inclua estes campos nos grupos ou deixe-os separados no topo do formulário\";width:100%;display:block;font-size:16px;font-weight:400;color:#AFB6C0;padding-bottom:12px}.add-group-container.sc-fields-layout{display:flex;align-items:center;border-top:1px solid #dce0e8;padding-top:22px;padding-bottom:12px;gap:6px;cursor:pointer;justify-content:center;width:100%;height:55px}.no-guide-selected.sc-fields-layout{display:block;margin:auto;font-size:24px;color:#AFB6C0;font-weight:500}.ghost.sc-fields-layout{opacity:.5;background:#c8fbe2}";
+
+const FieldLayoutComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isEditingGuideName = index.createEvent(this, "isEditingGuideName", 7);
+    this.isEditingGroupName = index.createEvent(this, "isEditingGroupName", 7);
+    this.layoutChanged = index.createEvent(this, "layoutChanged", 7);
+    this.setFieldListAsAvailable = index.createEvent(this, "setFieldListAsAvailable", 7);
+    this.guideRenamed = index.createEvent(this, "guideRenamed", 7);
+    this.ID_GROUPS = 'container-groups';
+    this.ID_FIELDS = 'container-fields';
+    this.reservedGuideNames = [constants.TAB_NAMES.main.toLowerCase(), constants.TAB_NAMES.general.toLocaleLowerCase()];
+    this.groupsListMemory = [];
+    this.groupsRefList = [];
+    this.isEditGuideNameActive = false;
+    this.selectedGuide = undefined;
+    this.groupsList = [];
+    this.guideNames = [];
+    this.dataUnit = undefined;
+    this.messagesBuilder = undefined;
+  }
+  handleFieldConfigChanged({ detail }) {
+    const updatedField = detail;
+    const groupToUpdate = this.groupsListMemory.find(g => g.name === updatedField.group);
+    if (!groupToUpdate)
+      return;
+    const updatedFields = groupToUpdate.fields.map(field => {
+      return (field.name === updatedField.name) ? updatedField : field;
+    });
+    const updatedGroupList = this.groupsListMemory.map(group => {
+      return (group.name === groupToUpdate.name)
+        ? { name: group.name, fields: updatedFields }
+        : group;
+    });
+    this.applyGroupUpdate(updatedGroupList);
+  }
+  observeSelectedGuide() {
+    this.isEditGuideNameActive = false;
+    index.forceUpdate(this);
+    this.isEditingGroupName.emit(false);
+  }
+  observeGroupList(newValue) {
+    this.groupsListMemory = [...newValue];
+  }
+  observeIsEditGuideNameActive(newValue) {
+    this.isEditingGuideName.emit(newValue);
+  }
+  async addFieldToLayout(incomingField) {
+    incomingField.group = constants.GROUP_NAMES.noGroup;
+    incomingField.tab = this.selectedGuide.name;
+    const fixedFieldsGroup = this.getFixedFieldsGroup();
+    const newFixedFieldsGroup = {
+      name: constants.GROUP_NAMES.noGroup,
+      fields: fixedFieldsGroup ? [...fixedFieldsGroup.fields, incomingField] : [incomingField],
+    };
+    const updatedGroupListMemory = fixedFieldsGroup
+      ? [newFixedFieldsGroup, ...this.groupsListMemory.slice(1)]
+      : [newFixedFieldsGroup, ...this.groupsListMemory];
+    this.applyGroupUpdate(updatedGroupListMemory);
+  }
+  getFixedFieldsGroup() {
+    return this.groupsListMemory.find(g => g.name === constants.GROUP_NAMES.noGroup);
+  }
+  getMessage(key, params) {
+    return this.messagesBuilder.getMessage(key, params);
+  }
+  handleAddGroup() {
+    const newGroup = { name: this.buildNewGroupName(), fields: [] };
+    const updatedGroupsList = [...this.groupsListMemory, newGroup];
+    this.applyGroupUpdate(updatedGroupsList);
+  }
+  buildNewGroupName() {
+    var _a, _b;
+    const qtdWithNewGroupName = (_b = (_a = this.groupsListMemory.filter(g => g.name.includes(constants.GROUP_NAMES.newGroup))) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    return qtdWithNewGroupName === 0
+      ? constants.GROUP_NAMES.newGroup
+      : `${constants.GROUP_NAMES.newGroup} (${qtdWithNewGroupName})`;
+  }
+  makeDynamicFieldsContainersDraggable() {
+    const draggableGroups = this.groupsList.filter((g) => g.name !== constants.GROUP_NAMES.noGroup);
+    draggableGroups.forEach(group => {
+      this.makeFieldContainerDraggable(this.getFieldsContainerId(group.name));
+    });
+  }
+  getFieldsContainerId(groupName) {
+    return `${this.ID_FIELDS}-${core.StringUtils.replaceBlankCharacters(groupName)}`;
+  }
+  handleSortGroups(evt) {
+    var _a;
+    const htmlStructure = (_a = evt.to) === null || _a === void 0 ? void 0 : _a.children;
+    if (!htmlStructure)
+      return;
+    const groupsOrder = Array.from(htmlStructure).map(el => el.getAttribute('data-group-name'));
+    const updatedOrderGroupsList = [];
+    const fixedGroup = this.getFixedFieldsGroup();
+    if (fixedGroup) {
+      updatedOrderGroupsList.push(fixedGroup);
+    }
+    groupsOrder.forEach(groupName => {
+      const group = this.groupsListMemory.find(g => g.name === groupName);
+      if (group) {
+        updatedOrderGroupsList.push(group);
+      }
+    });
+    this.applyGroupUpdate(updatedOrderGroupsList);
+  }
+  handleFieldsChanged(evt) {
+    let updatedGroupsList = [...this.groupsListMemory];
+    updatedGroupsList = [...this.handleFieldsOnGroupUpdate(updatedGroupsList, evt, FormConfigHelper.SORTABLE_PATH.FROM)];
+    updatedGroupsList = [...this.handleFieldsOnGroupUpdate(updatedGroupsList, evt, FormConfigHelper.SORTABLE_PATH.TO)];
+    this.applyGroupUpdate(updatedGroupsList);
+  }
+  applyGroupUpdate(updatedGroupList) {
+    var _a;
+    (_a = this.groupsRefList) === null || _a === void 0 ? void 0 : _a.forEach((group) => group === null || group === void 0 ? void 0 : group.cancelEdition());
+    if (core.ObjectUtils.equals(updatedGroupList, this.groupsListMemory)) {
+      return false;
+    }
+    this.groupsListMemory = [...updatedGroupList];
+    this.layoutChanged.emit(this.groupsListMemory);
+    return true;
+  }
+  handleFieldsOnGroupUpdate(groupList, evt, path) {
+    const element = evt[path];
+    const isAvailableFields = element.id === FormConfigHelper.ID_AVAILABLE_FIELDS;
+    return isAvailableFields ? groupList : this.updateGroupList(groupList, element, path, evt);
+  }
+  updateGroupList(groupList, element, path, evt) {
+    const groupName = element.getAttribute('data-group-name');
+    const updatedGroup = {
+      name: groupName,
+      fields: FormConfigHelper.getFieldsStructure(evt, path, groupName, this.selectedGuide.name),
+    };
+    return this.replaceGroup(groupList, updatedGroup);
+  }
+  replaceGroup(groupList, newGroup) {
+    return groupList.map(group => group.name === newGroup.name ? newGroup : group);
+  }
+  makeGroupsDraggable() {
+    try {
+      const element = this.getContainerElement(this.ID_GROUPS);
+      if (!element)
+        return;
+      new sortable_esm.Sortable(element, {
+        group: 'groups',
+        ghostClass: 'ghost',
+        direction: 'horizontal',
+        animation: 15,
+        onSort: (evt) => this.handleSortGroups(evt),
+      });
+    }
+    catch (e) {
+      console.error('Falha ao tornar container de grupos arrastável: ', this.ID_GROUPS);
+    }
+  }
+  makeFieldContainerDraggable(containerId) {
+    try {
+      const element = this.getContainerElement(containerId);
+      if (!element)
+        return;
+      new sortable_esm.Sortable(element, {
+        group: 'fields',
+        ghostClass: 'ghost',
+        direction: 'vertical',
+        animation: 15,
+        onAdd: (evt) => this.handleFieldsChanged(evt),
+        onRemove: (evt) => this.handleFieldsChanged(evt),
+        onSort: (evt) => this.handleFieldsChanged(evt),
+      });
+    }
+    catch (e) {
+      console.error('Falha ao tornar grupo arrastável: ', containerId);
+    }
+  }
+  getContainerElement(id) {
+    return this.el.querySelector(`[id="${id}"]`);
+  }
+  handleSetFieldAsAvailable(field) {
+    var _a;
+    const groupName = (_a = field.group) !== null && _a !== void 0 ? _a : constants.GROUP_NAMES.noGroup;
+    const group = this.groupsListMemory.find(group => group.name === groupName);
+    const fields = group.fields.filter(f => f.name !== field.name);
+    const updatedGroup = { name: groupName, fields };
+    const updatedList = [...this.replaceGroup(this.groupsListMemory, updatedGroup)];
+    this.applyGroupUpdate(updatedList);
+  }
+  removeGroup(group) {
+    var _a, _b;
+    const groupFields = (_b = (_a = this.groupsListMemory.find(f => f.name === group.name)) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : [];
+    const updatedGroupList = [...this.groupsListMemory.filter(g => g.name !== group.name)];
+    if (this.applyGroupUpdate(updatedGroupList)) {
+      this.setFieldListAsAvailable.emit(groupFields);
+    }
+  }
+  handleRenameGroup(editDetails) {
+    const { value: actualName, newValue: newGroupName } = editDetails.detail;
+    const updatedGroupList = this.groupsListMemory.map(group => {
+      if (group.name !== actualName)
+        return Object.assign({}, group);
+      const updatedFields = group.fields.map(f => {
+        return Object.assign(Object.assign({}, f), { group: newGroupName });
+      });
+      return { name: newGroupName, fields: updatedFields };
+    });
+    this.applyGroupUpdate(updatedGroupList);
+  }
+  canSaveGroup(newLabel, index) {
+    const hasOtherWithThisName = this.groupsList.some(group => {
+      var _a;
+      return ((_a = group.name) !== null && _a !== void 0 ? _a : '').toLocaleLowerCase() === (newLabel !== null && newLabel !== void 0 ? newLabel : '').toLocaleLowerCase();
+    });
+    if (!hasOtherWithThisName)
+      return true;
+    const title = this.getMessage('snkFormConfig.confirm.title');
+    const message = this.buildDuplicatedGroupNameContent(newLabel);
+    utils.ApplicationUtils.alert(title, message).then(() => { var _a; return (_a = this.groupsRefList[index]) === null || _a === void 0 ? void 0 : _a.applyFocusTextEdit(); });
+    return false;
+  }
+  buildDuplicatedGroupNameContent(newLabel) {
+    const tabName = this.selectedGuide.name;
+    return `
+        ${this.getMessage('snkFormConfig.alert.titleGroupExists')}
+        <b>${newLabel}</b>
+        ${this.getMessage('snkFormConfig.alert.inTab')}
+        <b>${tabName === constants.TAB_NAMES.main ? this.getMessage('snkFormConfig.form.mainArea') : tabName}</b>.
+        <br/><br/>
+        ${this.getMessage('snkFormConfig.alert.infoValidTitle')}
+      `;
+  }
+  buildDuplicatedTabNameContent(newLabel) {
+    return `
+        ${this.getMessage('snkFormConfig.alert.titleGuideExists')}
+        <b>${newLabel}</b>.
+        <br/><br/>
+        ${this.getMessage('snkFormConfig.alert.infoValidTitle')}
+      `;
+  }
+  buildReservedTabNameContent(newLabel) {
+    return `
+        ${this.getMessage('snkFormConfig.alert.titleGuideReservedName')}
+        <br/><br/>
+        <b>${newLabel}</b>.
+        <br/><br/>
+        ${this.getMessage('snkFormConfig.alert.infoValidTitle')}
+      `;
+  }
+  renderFields(fields) {
+    if (fields.length === 0)
+      return;
+    return fields.map(field => (index.h("field-item", { key: field.name, fieldConfig: field, onLayoutConfig: true, dataUnit: this.dataUnit, messagesBuilder: this.messagesBuilder, onSetFieldAsAvailable: (e) => this.handleSetFieldAsAvailable(e.detail) })));
+  }
+  renderDraggableGroups() {
+    const draggableGroups = this.groupsList.filter(g => g.name !== constants.GROUP_NAMES.noGroup);
+    return (draggableGroups.map((group, index$1) => {
+      var _a;
+      return (index.h("div", { key: group.name, class: 'group-config', "data-group-name": group.name }, index.h("ez-collapsible-box", { ref: ref => this.groupsRefList[index$1] = ref, label: group.name, headerSize: "large", editable: true, removable: true, "icon-placement": "left", onEzRemove: () => this.removeGroup(group), onEzSaveEditLabel: (event => this.handleRenameGroup(event)), onEzEditLabelMode: ({ detail }) => this.isEditingGroupName.emit(detail), conditionalSave: (newLabel) => this.canSaveGroup(newLabel, index$1) }, index.h("div", { id: this.getFieldsContainerId(group.name), class: `group-content ${!((_a = group.fields) === null || _a === void 0 ? void 0 : _a.length) ? 'empty-content' : ''}`, "data-group-name": group.name }, this.renderFields(group.fields)))));
+    }));
+  }
+  renderFixedFields() {
+    var _a, _b;
+    const noGroupFields = (_b = (_a = this.groupsList.find(g => g.name === constants.GROUP_NAMES.noGroup)) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : [];
+    return this.renderFields(noGroupFields);
+  }
+  handleRenameGuide(editDetails) {
+    const { value: actualValue, newValue } = editDetails.detail;
+    this.isEditGuideNameActive = false;
+    if (newValue === actualValue) {
+      return;
+    }
+    const duplicatedName = this.guideNames.includes(newValue.toLowerCase());
+    const forbiddenName = this.reservedGuideNames.includes(newValue.toLowerCase());
+    if (forbiddenName || duplicatedName) {
+      const title = this.getMessage('snkFormConfig.confirm.title');
+      const message = forbiddenName ? this.buildReservedTabNameContent(newValue) : this.buildDuplicatedTabNameContent(newValue);
+      utils.ApplicationUtils.alert(title, message).then(() => this._refTextEdit.applyFocusSelect());
+      return;
+    }
+    this.guideRenamed.emit(newValue);
+  }
+  cancelEditGuideName() {
+    this.isEditGuideNameActive = false;
+  }
+  async startGuideNameEdition() {
+    this.isEditGuideNameActive = true;
+    setTimeout(async () => {
+      await this._refTextEdit.applyFocusSelect();
+    }, 200);
+  }
+  getTextEditStyle() {
+    return {
+      fontSize: '20px',
+      fontWeight: '500',
+      fontFamily: 'Roboto',
+    };
+  }
+  renderGuideName() {
+    var _a, _b;
+    if (this.isEditGuideNameActive) {
+      return (index.h("div", { class: 'guide-header' }, index.h("ez-text-edit", { class: "collapsible-box__text-edit", ref: ref => this._refTextEdit = ref, value: (_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.label, styled: this.getTextEditStyle(), onSaveEdition: (ev) => this.handleRenameGuide(ev), onCancelEdition: () => this.cancelEditGuideName() })));
+    }
+    return (index.h("div", { class: 'guide-header' }, index.h("span", { class: 'guide-header-label' }, (_b = this.selectedGuide) === null || _b === void 0 ? void 0 : _b.label), this.renderEditGuideNameButton()));
+  }
+  renderEditGuideNameButton() {
+    var _a;
+    if (((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.name) === constants.TAB_NAMES.main)
+      return;
+    return (index.h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.startGuideNameEdition(), size: "medium", iconName: 'edit', title: 'Renomear' }));
+  }
+  componentDidRender() {
+    this.makeGroupsDraggable();
+    this.makeDynamicFieldsContainersDraggable();
+    this.makeFieldContainerDraggable(constants.GROUP_NAMES.noGroup);
+  }
+  render() {
+    if (!this.selectedGuide) {
+      return (index.h(index.Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, index.h("span", { class: 'no-guide-selected' }, "Selecione uma guia e comece a configurar")));
+    }
+    return (index.h(index.Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, this.renderGuideName(), index.h("div", { class: 'layout-container' }, index.h("ez-scroller", { direction: 'vertical', activeShadow: true }, index.h("div", { class: 'no-group-container' }, index.h("div", { id: constants.GROUP_NAMES.noGroup, class: 'group-content', "data-group-name": constants.GROUP_NAMES.noGroup }, this.renderFixedFields())), index.h("hr", null), index.h("div", { id: this.ID_GROUPS, class: 'groups-container' }, this.renderDraggableGroups()))), index.h("div", { class: 'add-group-container', onClick: this.handleAddGroup.bind(this) }, index.h("ez-icon", { slot: "leftIcon", iconName: "plus" }), index.h("span", null, "Criar novo grupo"))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "selectedGuide": ["observeSelectedGuide"],
+    "groupsList": ["observeGroupList"],
+    "isEditGuideNameActive": ["observeIsEditGuideNameActive"]
+  }; }
+};
+FieldLayoutComponent.style = fieldsLayoutCss;
+
+exports.fields_layout = FieldLayoutComponent;