@sankhyalabs/sankhyablocks 9.0.3 → 9.1.0-dev.10

package/dist/components/field-config2.js

@@ -0,0 +1,525 @@
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h } from '@stencil/core/internal/client';
+import { UserInterface, DataType, StringUtils, ObjectUtils, ApplicationContext } from '@sankhyalabs/core';
+import { T as TAB_NAMES, G as GROUP_NAMES, D as DEFAULT_TYPE, a as VARS_BY_TYPE, b as TAGS_BY_TYPE } from './constants.js';
+import { getConvertedValue } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
+import { CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
+
+const iconMap = new Map([
+  [UserInterface.DATE, 'calendar'],
+  [UserInterface.DATETIME, 'calendar-clock'],
+  [UserInterface.ELAPSEDTIME, 'timer-outline'],
+  [UserInterface.TIME, 'timer-outline'],
+  [UserInterface.DECIMALNUMBER, 'number'],
+  [UserInterface.INTEGERNUMBER, 'number'],
+  [UserInterface.FILE, 'zip'],
+  [UserInterface.IMAGE, 'pdf'],
+  [UserInterface.HTML, 'tag_code'],
+  [UserInterface.SEARCH, 'search'],
+  [UserInterface.SEARCHPLUS, 'search'],
+  [UserInterface.OPTIONSELECTOR, 'list'],
+  [UserInterface.CHECKBOX, 'list'],
+  [UserInterface.SWITCH, 'boolean'],
+  [UserInterface.PASSWORD, 'eye-off'],
+]);
+const ID_AVAILABLE_FIELDS = 'container-available-fields';
+var SORTABLE_PATH;
+(function (SORTABLE_PATH) {
+  SORTABLE_PATH["FROM"] = "from";
+  SORTABLE_PATH["TO"] = "to";
+})(SORTABLE_PATH || (SORTABLE_PATH = {}));
+function getFieldsStructure(evt, path, group, tab) {
+  var _a;
+  const htmlStructure = (_a = evt === null || evt === void 0 ? void 0 : evt[path]) === null || _a === void 0 ? void 0 : _a.children;
+  if (!htmlStructure)
+    return [];
+  return Array.from(htmlStructure).map(({ fieldConfig }) => {
+    return Object.assign(Object.assign({}, fieldConfig), { group, tab });
+  });
+}
+function updateTabInFieldsFromGroupList(guideGroups, updatedName) {
+  return guideGroups.map(group => {
+    return Object.assign(Object.assign({}, group), { fields: group.fields.map(field => (Object.assign(Object.assign({}, field), { tab: updatedName }))) });
+  });
+}
+function getValidatedFieldValue(fieldValue, dataUnit, fieldName) {
+  var _a;
+  if (fieldValue == undefined || !dataUnit || !fieldName)
+    return;
+  const dataType = (_a = dataUnit.getField(fieldName)) === null || _a === void 0 ? void 0 : _a.dataType;
+  if (dataType == undefined)
+    return;
+  if ((fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.waitmessage) !== undefined)
+    return undefined;
+  const isNonObjectValue = dataType !== DataType.OBJECT &&
+    dataType !== DataType.DATE &&
+    typeof fieldValue === 'object';
+  const processedValue = isNonObjectValue ? fieldValue.value : fieldValue;
+  return dataType === DataType.OBJECT
+    ? JSON.stringify(processedValue)
+    : processedValue;
+}
+function getEnabledByProperty(attribName, propertyName, fieldDescriptor) {
+  if (!fieldDescriptor)
+    return true;
+  const fieldProperties = fieldDescriptor.properties || {};
+  const fromAttribName = fieldDescriptor[attribName] !== true;
+  return fieldProperties.hasOwnProperty(propertyName)
+    ? fieldProperties[propertyName] !== 'S'
+    : fromAttribName;
+}
+function getValueByProperty(property, fieldDescriptor, defaultValue) {
+  if (fieldDescriptor && fieldDescriptor[property] === true) {
+    return true;
+  }
+  return defaultValue;
+}
+function getIconName(userInterface) {
+  return iconMap.get(userInterface) || 'text';
+}
+function buildNewGuideName(guidesList) {
+  var _a, _b;
+  const qtdWithNewGuideName = (_b = (_a = guidesList.filter(g => g.name.includes(TAB_NAMES.newGuide))) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+  return qtdWithNewGuideName === 0
+    ? TAB_NAMES.newGuide
+    : `${TAB_NAMES.newGuide} (${qtdWithNewGuideName})`;
+}
+function getFieldsToSave(guidesMap) {
+  const fieldsToSave = [];
+  guidesMap.forEach(groups => {
+    groups.forEach(({ fields }) => {
+      fields === null || fields === void 0 ? void 0 : fields.forEach((fieldConfig) => {
+        fieldsToSave.push(buildFieldToSave(fieldConfig));
+      });
+    });
+  });
+  return fieldsToSave;
+}
+function buildGuidesMap(rawFields, tabs, dataUnit, generalTab) {
+  const fields = handleFieldsTabNames(rawFields);
+  const guidesMap = initGuidesMap(tabs);
+  if (!(fields === null || fields === void 0 ? void 0 : fields.length))
+    return;
+  for (let guideName of guidesMap.keys()) {
+    const fieldsFromGuide = getFieldsFromGuide(fields, guideName, generalTab);
+    const fieldsByGroupMap = getGroupsFromGuide(fieldsFromGuide, dataUnit, generalTab);
+    const groupsList = parserGroupMapIntoList(fieldsByGroupMap);
+    guidesMap.set(guideName, groupsList);
+  }
+  return guidesMap;
+}
+function buildGuides(config, mainArea) {
+  let tabs = config.tabs ? [...config.tabs] : buildTabsFromFields(config === null || config === void 0 ? void 0 : config.fields);
+  tabs = getPossibleGuides(tabs);
+  tabs = initializeTabsNames(tabs);
+  return handleMainTab(tabs, mainArea);
+}
+function handleFieldsTabNames(allFields) {
+  // Campos que não fazem parte de nenhuma aba ou da aba "Geral", devem ser movidos para a aba __main.
+  return allFields.map(field => {
+    const tabName = field.tab;
+    return Object.assign(Object.assign({}, field), { tab: (!tabName || tabName === TAB_NAMES.general) ? TAB_NAMES.main : field.tab });
+  });
+}
+function initializeTabsNames(tabs) {
+  return tabs.map((tab) => {
+    return Object.assign(Object.assign({}, tab), { name: tab.name ? tab.name : tab.label });
+  });
+}
+function handleMainTab(tabs, mainTabName) {
+  const mainTab = { name: TAB_NAMES.main, label: mainTabName, visible: true };
+  const hasTabMain = tabs.some((tab) => tab.name === TAB_NAMES.main);
+  if (hasTabMain) {
+    tabs = tabs.map(tab => tab.name === TAB_NAMES.main ? mainTab : tab);
+  }
+  else {
+    tabs.unshift(mainTab);
+  }
+  return tabs;
+}
+function getPossibleGuides(tabs) {
+  //O usuário não pode criar uma guia com o nome "Geral".
+  // Nesses casos, precisamos mover os campos dessa guia, para a guia __main.
+  return [...tabs.filter(tab => tab.label !== TAB_NAMES.general)];
+}
+function initGuidesMap(tabs) {
+  const map = new Map();
+  let possibleGuides = getPossibleGuides(tabs);
+  possibleGuides.forEach(tab => {
+    map.set(tab.name, []);
+  });
+  return map;
+}
+function handleFieldLabel(field, fieldDescriptor) {
+  if (!field.label) {
+    field.label = fieldDescriptor.label;
+  }
+}
+function handleFieldTab(field, generalTabName) {
+  if (!field.tab) {
+    field.tab = generalTabName;
+  }
+}
+function handleFieldGroup(field) {
+  if (!field.group) {
+    field.group = GROUP_NAMES.noGroup;
+  }
+}
+function isVisibleOnConfig(fieldDescriptor) {
+  var _a;
+  /**
+   * Quando um campo é ocultado pelo dev, mas queremos manter ele na config precisamos fazer essa tratativa.
+   */
+  return ((_a = fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.properties) === null || _a === void 0 ? void 0 : _a.visibleOnConfig) === true && (fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.visible) === false;
+}
+function getGroupsFromGuide(fieldsFromGuide, dataUnit, generalTabName) {
+  const groupsMap = new Map();
+  groupsMap.set(GROUP_NAMES.noGroup, []);
+  for (let field of fieldsFromGuide) {
+    const fieldDescriptor = dataUnit.getField(field.name);
+    if (!(fieldDescriptor === null || fieldDescriptor === void 0 ? void 0 : fieldDescriptor.visible) && !isVisibleOnConfig(fieldDescriptor))
+      continue;
+    handleFieldLabel(field, fieldDescriptor);
+    handleFieldTab(field, generalTabName);
+    handleFieldGroup(field);
+    if (groupsMap.has(field.group)) {
+      groupsMap.get(field.group).push(field);
+    }
+    else {
+      groupsMap.set(field.group, [field]);
+    }
+  }
+  return groupsMap;
+}
+function getFieldsFromGuide(fields, guideName, generalTabName) {
+  return fields.filter(field => {
+    const fieldTab = getTabName(field.tab, generalTabName);
+    return fieldTab === guideName;
+  });
+}
+function getTabName(tab, generalTabName) {
+  var _a;
+  if (typeof tab === 'string')
+    return tab;
+  return (_a = tab === null || tab === void 0 ? void 0 : tab.label) !== null && _a !== void 0 ? _a : generalTabName;
+}
+function parserGroupMapIntoList(groupsMap) {
+  const groupsList = [];
+  for (let groupName of groupsMap.keys()) {
+    groupsList.push({ name: groupName, fields: groupsMap.get(groupName) });
+  }
+  return groupsList;
+}
+function canAddTab(tab, guideList) {
+  return tab && !(guideList.map(g => g.name).includes(tab));
+}
+function buildTabsFromFields(fields) {
+  const guideList = [];
+  let order = 1;
+  fields === null || fields === void 0 ? void 0 : fields.forEach((field) => {
+    const tab = field.tab;
+    if (canAddTab(tab, guideList)) {
+      guideList.push({ name: tab, label: tab, visible: true, order });
+      order = order + 1;
+    }
+  });
+  return guideList;
+}
+function buildFieldToSave(fieldConfig) {
+  const fieldToSave = {
+    cleanOnCopy: fieldConfig.cleanOnCopy || false,
+    group: fieldConfig.group === GROUP_NAMES.noGroup ? undefined : 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;
+    }
+  }
+  return fieldToSave;
+}
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.fieldConfigChanged = 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();
+    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 = (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) === 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 : 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 = 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 = DEFAULT_TYPE.fixed;
+    this.fieldConfig.defaultValue = { type: this._defaultType };
+  }
+  buildOptions() {
+    let interfaceField = this.fieldDescriptor.userInterface;
+    if (interfaceField === UserInterface.SEARCH) {
+      interfaceField = UserInterface.INTEGERNUMBER;
+    }
+    return VARS_BY_TYPE.UserInterface[interfaceField];
+  }
+  renderDefaultValueEditor() {
+    if (this._defaultType === DEFAULT_TYPE.variable) {
+      return (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 = StringUtils.getBooleanValue(allowDefault, !this.fieldReadOnly);
+    if (userInterface === UserInterface.FILE) {
+      enabled = false;
+    }
+    if (enabled) {
+      value = (_a = this.fieldDefaultValue) === null || _a === void 0 ? void 0 : _a.value;
+      if (value != undefined) {
+        value = getConvertedValue(dataType, value);
+      }
+    }
+    const configField = {
+      value,
+      enabled,
+      label: this.fieldConfig.label,
+      name: this.fieldConfig.name,
+      required: this.fieldRequired,
+      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);
+    }
+  }
+  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.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 == UserInterface.SEARCHPLUS;
+    switch (userInterface) {
+      case UserInterface.SEARCH:
+      case UserInterface.SEARCHPLUS:
+        return {
+          suppressEmptyOption: required,
+          optionLoader: (searchArgument) => this.onSearchDefaultValue(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.onChangeDefaultValue(evt === null || evt === void 0 ? void 0 : evt.detail),
+        };
+      case UserInterface.DATE:
+      case UserInterface.DATETIME:
+      case 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 = ApplicationContext.getContextValue('__SNK__APPLICATION__');
+  }
+  render() {
+    return (h("ez-popup", { heightMode: 'auto', size: 'auto', "ez-title": 'Configuração do campo', onEzClosePopup: () => this.handleDiscardChanges(), ref: ref => this._popoupElement = ref }, h("div", { class: 'field-config-container' }, h("ez-text-input", { label: this.getMessage('snkConfigOptions.label.nameField'), value: this.fieldLabel, errorMessage: this.fieldLabelErrorMessage, hasInvalid: !!this.fieldLabelErrorMessage, onEzChange: (e) => this.handleLabelChanged(e) }), h("ez-combo-box", { label: this.getMessage('snkConfigOptions.label.typeValueDefault'), suppressEmptyOption: true, enabled: this.enabledValueDefault(), onEzChange: (e) => this.handleDefaultTypeChanged(e), 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'))), this.renderDefaultValueEditor(), h("ez-check", { label: this.getMessage('snkConfigOptions.label.clearDuplicate'), value: this.fieldCleanOnCopy, onEzChange: (e) => this.handleClearDuplicateChanged(e) }), h("ez-check", { label: this.getMessage('snkConfigOptions.label.requiredField'), enabled: getEnabledByProperty('required', 'systemRequired', this.fieldDescriptor), value: getValueByProperty('required', this.fieldDescriptor, this.fieldRequired), onEzChange: (e) => this.handleRequiredChanged(e) }), h("ez-check", { label: this.getMessage('snkConfigOptions.label.protectedField'), enabled: getEnabledByProperty('readOnly', 'systemReadOnly', this.fieldDescriptor), value: getValueByProperty('readOnly', this.fieldDescriptor, this.fieldReadOnly), onEzChange: (e) => this.handleReadOnlyChanged(e) }), h("div", { class: 'actions' }, h("ez-button", { label: 'Cancelar', onClick: () => this.handleDiscardChanges() }), h("ez-button", { label: 'Confirmar', class: "ez-button--primary", onClick: () => this.handleApplyChanges() })))));
+  }
+  static get watchers() { return {
+    "fieldLabel": ["observeFieldLabel"]
+  }; }
+  static get style() { return fieldConfigCss; }
+}, [2, "field-config", {
+    "dataUnit": [16],
+    "fieldConfig": [1544, "field-config"],
+    "fieldDescriptor": [16],
+    "messagesBuilder": [1040],
+    "fieldLabel": [32],
+    "fieldLabelErrorMessage": [32],
+    "fieldDefaultValue": [32],
+    "fieldCleanOnCopy": [32],
+    "fieldRequired": [32],
+    "fieldReadOnly": [32],
+    "_defaultType": [32],
+    "show": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["field-config"];
+  components.forEach(tagName => { switch (tagName) {
+    case "field-config":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FieldConfig);
+      }
+      break;
+  } });
+}
+
+export { FieldConfig as F, ID_AVAILABLE_FIELDS as I, SORTABLE_PATH as S, getFieldsStructure as a, buildGuides as b, buildGuidesMap as c, defineCustomElement as d, getFieldsToSave as e, buildNewGuideName as f, getIconName as g, updateTabInFieldsFromGroupList as u };

package/dist/components/field-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FieldItem extends Components.FieldItem, HTMLElement {}
+export const FieldItem: {
+  prototype: FieldItem;
+  new (): FieldItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/field-item.js

@@ -0,0 +1,6 @@
+import { F as FieldItem$1, d as defineCustomElement$1 } from './field-item2.js';
+
+const FieldItem = FieldItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FieldItem, defineCustomElement };

package/dist/components/field-item2.js

@@ -0,0 +1,93 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, forceUpdate, Host } from '@stencil/core/internal/client';
+import { g as getIconName, d as defineCustomElement$1 } from './field-config2.js';
+
+const fieldItemCss = ".sc-field-item-h{width:100%;display:flex;padding:12px 8px;border-radius:var(--border--radius-small, 4px);border:1px solid #dce0e8;cursor:grab;align-items:center;height:42px;max-height:42px;background:#FAFCFF}.full-width.sc-field-item-h{width:100%}ez-icon.sc-field-item{--ez-icon--color:#A2ABB9}.icons.sc-field-item{display:flex}.label.sc-field-item{display:flex;flex-grow:1;padding-left:8px;font-size:14px;align-items:center;gap:4px;height:22px}.label-text.sc-field-item{overflow:hidden;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;-o-text-overflow:ellipsis;text-overflow:ellipsis;word-break:break-word}.required-mark.sc-field-item{color:#cf3105;background:#F7E0E5;width:12px;height:12px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding-top:5px;font-size:16px;align-self:self-start}.actions.sc-field-item{display:flex;flex-direction:row;align-content:center;gap:4px}ez-button.sc-field-item{width:24px;align-items:center;justify-content:center;display:flex}.sc-field-item-h .hiddeble.sc-field-item{transition:0.2s ease-in-out;visibility:hidden;opacity:0}.sc-field-item-h:hover .hiddeble.sc-field-item{visibility:visible;opacity:1}";
+
+const FieldItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.setFieldAsAvailable = createEvent(this, "setFieldAsAvailable", 7);
+    this.addFieldToGuide = 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 (h("field-config", { ref: ref => this._refFieldConfig = ref, fieldConfig: this.fieldConfig, dataUnit: this.dataUnit, fieldDescriptor: this.fieldDescriptor, messagesBuilder: this.messagesBuilder, onFieldConfigChanged: () => forceUpdate(this) }));
+    }
+  }
+  renderActions() {
+    if (this.onLayoutConfig) {
+      return (h("div", { class: 'actions hiddeble' }, h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: () => this.setFieldAsAvailable.emit(this.fieldConfig), size: "medium", iconName: 'minus', title: 'Remover' }), 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 (h("div", { class: 'actions hiddeble' }, 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 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 (h(Host, { class: !this.onLayoutConfig ? 'full-width' : "" }, h("div", { class: 'icons' }, h("ez-icon", { iconName: "drag-indicator" }), h("ez-icon", { iconName: getIconName((_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) })), h("span", { class: 'label' }, h("span", { class: 'label-text', title: this.getFieldLabel() }, this.getFieldLabel()), this.renderRequiredMark()), this.renderActions(), this.renderFieldConfig()));
+  }
+  static get watchers() { return {
+    "dataUnit": ["observeDataUnit"]
+  }; }
+  static get style() { return fieldItemCss; }
+}, [2, "field-item", {
+    "fieldConfig": [8, "field-config"],
+    "onLayoutConfig": [4, "on-layout-config"],
+    "dataUnit": [16],
+    "messagesBuilder": [1040],
+    "fieldDescriptor": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["field-item", "field-config"];
+  components.forEach(tagName => { switch (tagName) {
+    case "field-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FieldItem);
+      }
+      break;
+    case "field-config":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { FieldItem as F, defineCustomElement as d };

package/dist/components/fields-layout.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FieldsLayout extends Components.FieldsLayout, HTMLElement {}
+export const FieldsLayout: {
+  prototype: FieldsLayout;
+  new (): FieldsLayout;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/fields-layout.js

@@ -0,0 +1,6 @@
+import { F as FieldLayoutComponent, d as defineCustomElement$1 } from './fields-layout2.js';
+
+const FieldsLayout = FieldLayoutComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { FieldsLayout, defineCustomElement };