@sankhyalabs/sankhyablocks 10.1.0-dev.52 → 10.1.0-dev.54

package/dist/components/snk-dynaform-fields-selector2.js

@@ -0,0 +1,104 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { S as Sortable } from './sortable.esm.js';
+import { I as ID_AVAILABLE_FIELDS, d as defineCustomElement$2 } from './snk-dynaform-field-config2.js';
+import { ArrayUtils } from '@sankhyalabs/core';
+import { d as defineCustomElement$1 } from './snk-dynaform-field-item2.js';
+
+const snkDynaformFieldsSelectorCss = ".sc-snk-dynaform-fields-selector-h{width:33.33333%;display:flex;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);max-width:260px}.fields-label.sc-snk-dynaform-fields-selector{display:block;font-size:16px;font-weight:500;width:100%}.fields-count.sc-snk-dynaform-fields-selector{display:block;color:#AFB6C0;font-size:14px;padding:12px 0;font-weight:400;width:100%}.fields-container.sc-snk-dynaform-fields-selector{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 220px);width:100%}.ghost.sc-snk-dynaform-fields-selector{opacity:.5;background:#c8fbe2}.filter-input.sc-snk-dynaform-fields-selector{padding-right:var(--space--2xs, 8px)}";
+
+const SnkDynaformFieldsSelector = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.fieldListChanged = createEvent(this, "fieldListChanged", 7);
+    this.availableFields = [];
+    this.dataUnit = undefined;
+    this.filterTerm = '';
+    this.messagesBuilder = undefined;
+  }
+  onAddField(evt) {
+    const newIndex = evt.newIndex;
+    const item = evt.item;
+    const fieldConfig = item.fieldConfig;
+    const updatedFields = this.addItemInPosition(newIndex, fieldConfig);
+    this.fieldListChanged.emit(updatedFields);
+  }
+  addItemInPosition(newIndex, fieldConfig) {
+    return [
+      ...this.availableFields.slice(0, newIndex),
+      fieldConfig,
+      ...this.availableFields.slice(newIndex),
+    ];
+  }
+  onRemoveField(evt) {
+    const item = evt.item;
+    const fieldName = item.fieldConfig.name;
+    const updatedFields = [...this.availableFields.filter(f => f.name !== fieldName)];
+    this.fieldListChanged.emit(updatedFields);
+    requestAnimationFrame(() => item.remove());
+    return;
+  }
+  renderFields() {
+    const fieldsToShow = ArrayUtils.applyStringFilter(this.filterTerm, this.availableFields);
+    return fieldsToShow.map(field => (h("snk-dynaform-field-item", { key: field.name, dataUnit: this.dataUnit, fieldConfig: field, messagesBuilder: this.messagesBuilder })));
+  }
+  getCountText() {
+    if (!this.availableFields.length)
+      return this.getMessage('snkFormConfig.availableFields.labelNoFields');
+    if (this.availableFields.length === 1)
+      return this.getMessage('snkFormConfig.availableFields.labelOneField');
+    return `${this.availableFields.length} ${this.getMessage('snkFormConfig.availableFields.labelAvailableFields')}`;
+  }
+  initializeDraggableContainer() {
+    new Sortable(this.el.querySelector(`#${ID_AVAILABLE_FIELDS}`), {
+      group: 'fields',
+      direction: 'vertical',
+      ghostClass: 'ghost',
+      animation: 15,
+      onAdd: (evt) => this.onAddField(evt),
+      onRemove: (evt) => this.onRemoveField(evt),
+    });
+  }
+  getMessage(key, params) {
+    var _a;
+    return (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, params);
+  }
+  componentDidRender() {
+    this.initializeDraggableContainer();
+  }
+  render() {
+    return (h(Host, { class: 'ez-col ez-col--sd-4 ez-col--tb-4 ez-padding--medium' }, h("span", { class: 'fields-label ez-padding-bottom--small' }, this.getMessage('snkFormConfig.availableFields.title')), h("ez-filter-input", { class: 'filter-input', slot: "content", mode: "slim", label: this.getMessage('snkFormConfig.availableFields.labelSearchField'), onEzChange: evt => this.filterTerm = evt.detail }), h("span", { class: 'fields-count' }, this.getCountText()), h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { id: ID_AVAILABLE_FIELDS, class: 'fields-container' }, this.renderFields()))));
+  }
+  get el() { return this; }
+  static get style() { return snkDynaformFieldsSelectorCss; }
+}, [2, "snk-dynaform-fields-selector", {
+    "availableFields": [16],
+    "dataUnit": [16],
+    "messagesBuilder": [1040],
+    "filterTerm": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-dynaform-fields-selector", "snk-dynaform-field-config", "snk-dynaform-field-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-dynaform-fields-selector":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkDynaformFieldsSelector);
+      }
+      break;
+    case "snk-dynaform-field-config":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "snk-dynaform-field-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { SnkDynaformFieldsSelector as S, defineCustomElement as d };

package/dist/components/snk-dynaform-form-config.d.ts

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

package/dist/components/snk-dynaform-form-config.js

@@ -0,0 +1,6 @@
+import { S as SnkDynaformFormConfig$1, d as defineCustomElement$1 } from './snk-dynaform-form-config2.js';
+
+const SnkDynaformFormConfig = SnkDynaformFormConfig$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkDynaformFormConfig, defineCustomElement };

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

@@ -0,0 +1,430 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { ObjectUtils, ApplicationContext } from '@sankhyalabs/core';
+import { buildFormConfigFromDataUnit } from '@sankhyalabs/ezui/dist/collection/utils/form';
+import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
+import { U as UserConfigType } from './form-config-fetcher.js';
+import { T as TAB_NAMES, G as GROUP_NAMES } from './constants.js';
+import { c as buildGuides, e as buildChildrenGuides, f as buildCustomGuides, h as buildGuidesMap, i as getFieldsToSave, u as updateTabInFieldsFromGroupList, j as buildNewGuideName, d as defineCustomElement$5 } from './snk-dynaform-field-config2.js';
+import { d as defineCustomElement$7 } from './snk-dynaform-config-header2.js';
+import { d as defineCustomElement$6 } from './snk-dynaform-configs-button2.js';
+import { d as defineCustomElement$4 } from './snk-dynaform-field-item2.js';
+import { d as defineCustomElement$3 } from './snk-dynaform-fields-layout2.js';
+import { d as defineCustomElement$2 } from './snk-dynaform-fields-selector2.js';
+import { d as defineCustomElement$1 } from './snk-dynaform-guides-configurator2.js';
+
+const snkDynaformFormConfigCss = ".sc-snk-dynaform-form-config-h{display:flex;flex-direction:column;height:100vh;width:100%;font-family:var(--font-pattern, \"Roboto\");background:white;color:#2b3a54;--snk-form-config-container-height:calc(100vh - 95px);outline:none}.form-config-body.sc-snk-dynaform-form-config{height:var(--snk-form-config-container-height);overflow:hidden;padding-top:var(--space--12, 12px)}.form-config-layout.sc-snk-dynaform-form-config{display:flex;flex-direction:row;height:100%;gap:20px;align-items:stretch}.main-editing-area.sc-snk-dynaform-form-config{display:flex;flex-direction:column;flex:1;min-width:0;height:100%;overflow:hidden;gap:12px}.main-editing-area.sc-snk-dynaform-form-config>snk-dynaform-fields-layout.sc-snk-dynaform-form-config{flex:1 1 auto;min-height:0;overflow:auto;flex-direction:row}.main-editing-area.sc-snk-dynaform-form-config>snk-dynaform-guides-configurator.sc-snk-dynaform-form-config{flex:0 0 auto}.main-fields-section.sc-snk-dynaform-form-config{flex:0 0 40vh;display:flex;flex-direction:column;min-height:0;overflow:hidden}.guide-header.sc-snk-dynaform-form-config{display:flex;width:100%;padding-bottom:12px;border-bottom:1px solid #dce0e8;height:30px;font-weight:500;font-size:16px}";
+
+const SnkDynaformFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.configClose = createEvent(this, "configClose", 7);
+    this.configChange = createEvent(this, "configChange", 7);
+    this.guidesMap = new Map();
+    this.availableFields = [];
+    this.guidesList = [];
+    this.groupsList = [];
+    this.mainGuide = undefined;
+    this.mainGroupsList = [];
+    this.selectedGuide = undefined;
+    this._formConfig = {};
+    this.configOptions = [];
+    this.originalConfigSelected = undefined;
+    this.configSelected = undefined;
+    this.hasChanges = false;
+    this.optionConfigChanged = false;
+    this.dataUnit = undefined;
+    this.configManager = undefined;
+    this.ignoreReadOnlyFormFields = undefined;
+    this.messagesBuilder = undefined;
+    this.customGuidesConfig = [];
+  }
+  handleFieldConfigChanged() {
+    this.hasChanges = true;
+  }
+  async handleFormConfigOptionSelected({ detail }) {
+    this.configSelected = detail;
+    this.selectedGuide = undefined;
+    await this.loadConfigByUser();
+    this.optionConfigChanged = !ObjectUtils.equals(this.configSelected, this.originalConfigSelected);
+    if (this.configSelected.origin === UserConfigType.DEFAULT) {
+      this.hasChanges = false;
+    }
+  }
+  async handleAddFieldToGuide({ detail: fieldItem }) {
+    var _a, _b;
+    const hasValidSecondaryGuide = this.selectedGuide
+      && !this.selectedGuide.isCustom
+      && !this.selectedGuide.isDetail;
+    if (!hasValidSecondaryGuide && this.selectedGuide && (this.selectedGuide.isCustom || this.selectedGuide.isDetail)) {
+      this.showCanNotAddFieldToGuideDialog();
+      return;
+    }
+    if (!hasValidSecondaryGuide && !this.mainGuide) {
+      this.showNoGuideSelectedDialog();
+      return;
+    }
+    this.availableFields = [...this.availableFields.filter(f => f.name !== fieldItem.name)];
+    if (hasValidSecondaryGuide) {
+      await ((_a = this.refFieldsLayout) === null || _a === void 0 ? void 0 : _a.addFieldToLayout(fieldItem));
+    }
+    else {
+      await ((_b = this.refMainFieldsLayout) === null || _b === void 0 ? void 0 : _b.addFieldToLayout(fieldItem));
+    }
+  }
+  async handleSetFieldAsAvailable({ detail }) {
+    const hasField = this.availableFields.some(f => f.name === detail.name);
+    if (hasField)
+      return;
+    this.availableFields = [...this.availableFields, detail];
+  }
+  async handleRemoveFieldFromAvailable({ detail }) {
+    this.availableFields = this.availableFields.filter(f => f.name !== detail.name);
+  }
+  observeSelectedGuide(guide) {
+    var _a, _b;
+    if ((guide === null || guide === void 0 ? void 0 : guide.name) && ((_a = this.mainGuide) === null || _a === void 0 ? void 0 : _a.name) && guide.name === this.mainGuide.name) {
+      this.selectedGuide = undefined;
+      return;
+    }
+    const guideGroups = (_b = this.guidesMap.get(guide === null || guide === void 0 ? void 0 : guide.name)) !== null && _b !== void 0 ? _b : [];
+    this.groupsList = [...guideGroups];
+  }
+  observeConfigManager() {
+    this.loadFormConfig();
+  }
+  showNoGuideSelectedDialog() {
+    const title = this.getMessage('snkFormConfig.noGuideSelected.title');
+    const message = this.getMessage('snkFormConfig.noGuideSelected.message');
+    ApplicationUtils.alert(title, message);
+  }
+  showCanNotAddFieldToGuideDialog() {
+    const title = this.getMessage('snkFormConfig.canNotAddFieldToGuide.title');
+    const message = this.getMessage('snkFormConfig.canNotAddFieldToGuide.message');
+    ApplicationUtils.alert(title, message);
+  }
+  /**
+   * 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);
+  }
+  async initializeUserConfig() {
+    if (this.configManager == undefined)
+      return;
+    try {
+      const userConfig = await this.configManager.fetchUserAvailableConfigs();
+      this.configOptions = userConfig;
+      const isDefault = this._formConfig != undefined ? this._formConfig.defaultConfiguration : true;
+      const origin = (isDefault ? UserConfigType.DEFAULT : UserConfigType.USER);
+      this.configSelected = userConfig === null || userConfig === void 0 ? void 0 : userConfig.find((config) => config.origin === origin);
+      this.originalConfigSelected = userConfig === null || userConfig === void 0 ? void 0 : userConfig.find((config) => config.origin === origin);
+    }
+    catch (error) {
+      console.error(this.getMessage('snkFormConfig.errors.failFetchUserConfig'));
+      console.error(error);
+    }
+  }
+  async loadConfigByUser() {
+    if (!this.configManager || !this.configSelected)
+      return;
+    if (this.isConfigDefaultSelected()) {
+      await this.handleLoadDefaultConfig();
+    }
+    else {
+      this.loadFormConfig();
+    }
+  }
+  async handleLoadDefaultConfig() {
+    const defaultConfig = await this.configManager.fetchDefaultConfig();
+    if (defaultConfig) {
+      this.loadFormConfig(defaultConfig);
+      return;
+    }
+    const emptyConfig = this.configManager.getEmptyConfig();
+    if (emptyConfig) {
+      this.loadFormConfig(emptyConfig);
+    }
+  }
+  isConfigDefaultSelected() {
+    return this.configSelected.origin === UserConfigType.DEFAULT;
+  }
+  loadFormConfig(config) {
+    this._formConfig = config ? config : this.getConfig();
+    this.loadGuides();
+    this.initializeAvailableFields();
+  }
+  initializeAvailableFields() {
+    var _a;
+    if (((_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.fields) == undefined)
+      return;
+    const fieldsFormConfig = [...this._formConfig.fields];
+    const fieldsMetadata = this.dataUnit.metadata.fields;
+    this.availableFields = fieldsMetadata.filter(({ name: fieldName, visible: fieldVisible, properties }) => {
+      const hasCfg = fieldsFormConfig.some(({ name: fieldFormName }) => fieldFormName === fieldName);
+      /**
+       * 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 && !fieldVisible)
+        return properties.visibleOnConfig;
+      return fieldVisible === true && hasCfg === false;
+    });
+  }
+  getInitialOrder(guidesList) {
+    var _a, _b;
+    if (Array.isArray((_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.tabs)) {
+      return (_b = this._formConfig.tabs) === null || _b === void 0 ? void 0 : _b.length;
+    }
+    if (guidesList.length > 0) {
+      return Math.max(...guidesList.map(g => g.order));
+    }
+    return 0;
+  }
+  loadGuides() {
+    var _a, _b, _c, _d;
+    this.guidesList = [];
+    this.guidesList.push(...buildGuides(this._formConfig, this.getMessage('snkFormConfig.form.mainArea'), this.dataUnit, TAB_NAMES.general));
+    this.guidesList.push(...buildChildrenGuides(this.dataUnit, this.getInitialOrder(this.guidesList), this.guidesList));
+    this.guidesList.push(...buildCustomGuides(this.customGuidesConfig, this.guidesList));
+    this.guidesMap = buildGuidesMap((_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.fields, this.guidesList, this.dataUnit, TAB_NAMES.general);
+    this.mainGuide = this.guidesList.find(g => g.name === TAB_NAMES.main);
+    this.mainGroupsList = ((_b = this.mainGuide) === null || _b === void 0 ? void 0 : _b.name)
+      ? [...((_d = (_c = this.guidesMap) === null || _c === void 0 ? void 0 : _c.get(this.mainGuide.name)) !== null && _d !== void 0 ? _d : [])]
+      : [];
+    this.ensureSelectedGuide();
+  }
+  ensureSelectedGuide() {
+    const stillValid = this.selectedGuide
+      && this.guidesList.some(g => g.name === this.selectedGuide.name);
+    if (stillValid)
+      return;
+    const firstSelectable = this.guidesList
+      .filter(g => { var _a; return g.visible && g.name !== ((_a = this.mainGuide) === null || _a === void 0 ? void 0 : _a.name); })
+      .sort((a, b) => { var _a, _b; return ((_a = a.order) !== null && _a !== void 0 ? _a : Number.MAX_VALUE) - ((_b = b.order) !== null && _b !== void 0 ? _b : Number.MAX_VALUE); })[0];
+    this.selectedGuide = firstSelectable;
+  }
+  getConfig() {
+    let config = this.configManager.getConfig(this.dataUnit, false);
+    if (config.fields && config.fields.length === 0) {
+      config = undefined;
+    }
+    if (config == undefined) {
+      config = buildFormConfigFromDataUnit(this.dataUnit);
+    }
+    return ObjectUtils.copy(config);
+  }
+  handleSelectGuide({ detail: selectedGuide }) {
+    this.selectedGuide = selectedGuide;
+  }
+  handleLayoutChanged({ detail: newGroupList }) {
+    if (!this.selectedGuide)
+      return;
+    this.hasChanges = true;
+    this.groupsList = [...newGroupList];
+    this.guidesMap.set(this.selectedGuide.name, [...newGroupList]);
+  }
+  handleMainLayoutChanged({ detail: newGroupList }) {
+    var _a;
+    if (!((_a = this.mainGuide) === null || _a === void 0 ? void 0 : _a.name))
+      return;
+    this.hasChanges = true;
+    this.mainGroupsList = [...newGroupList];
+    this.guidesMap.set(this.mainGuide.name, [...newGroupList]);
+  }
+  getIsDefaultConfig() {
+    var _a;
+    const optionSelected = (_a = this.configSelected) === null || _a === void 0 ? void 0 : _a.origin;
+    return optionSelected === UserConfigType.DEFAULT
+      && this.optionConfigChanged === true
+      && this.hasChanges === false;
+  }
+  getTabsToSave() {
+    return this.guidesList.map(tab => {
+      return {
+        name: tab.name,
+        label: tab.name === TAB_NAMES.main ? tab.name : tab.label,
+        order: tab.name === TAB_NAMES.main ? 0 : tab.order,
+        visible: tab.visible,
+      };
+    });
+  }
+  async handleSaveConfig() {
+    var _a;
+    const savedConfig = await this.configManager.saveConfig(this.buildConfigToSave());
+    this.configSelected = (_a = this.configOptions) === null || _a === void 0 ? void 0 : _a.find((config) => {
+      return config.origin === (this.hasChanges ? UserConfigType.USER : UserConfigType.DEFAULT);
+    });
+    this.originalConfigSelected = this.configSelected;
+    this.hasChanges = false;
+    this.optionConfigChanged = false;
+    ApplicationUtils.info(this.getMessage('snkFormConfig.info.successfullyConfigSaved'), { iconName: 'check' });
+    this.configChange.emit(savedConfig);
+  }
+  buildConfigToSave() {
+    const formConfig = ObjectUtils.copy(this._formConfig);
+    formConfig.tabs = this.getTabsToSave();
+    formConfig.fields = getFieldsToSave(this.guidesMap);
+    formConfig.defaultConfiguration = this.getIsDefaultConfig();
+    return formConfig;
+  }
+  handleAvailableFieldListChanged({ detail: updatedList }) {
+    this.availableFields = [...updatedList];
+  }
+  handleSetFieldListAsAvailable({ detail: updatedList }) {
+    this.availableFields = [...this.availableFields, ...updatedList];
+  }
+  handleGuideDeleted({ detail: guide }) {
+    var _a, _b;
+    const guideName = guide.name;
+    const guideGroups = (_a = this.guidesMap.get(guideName)) !== null && _a !== void 0 ? _a : [];
+    const fieldsToAvailable = [];
+    guideGroups.forEach(group => fieldsToAvailable.push(...group.fields));
+    this.availableFields = [...this.availableFields, ...fieldsToAvailable];
+    this.guidesList = [...this.guidesList.filter(g => g.name !== guideName)];
+    this.guidesMap.delete(guideName);
+    if (((_b = this.selectedGuide) === null || _b === void 0 ? void 0 : _b.name) === guideName) {
+      this.selectedGuide = undefined;
+      this.ensureSelectedGuide();
+    }
+    this.hasChanges = true;
+  }
+  handleGuideListChanged({ detail: updatedList }) {
+    this.hasChanges = true;
+    this.guidesList = [...updatedList];
+  }
+  handleGuideRenamed({ detail: updatedName }) {
+    var _a;
+    const previousGuide = this.selectedGuide;
+    if (!(previousGuide === null || previousGuide === void 0 ? void 0 : previousGuide.name))
+      return;
+    const previousName = previousGuide.name;
+    const guideGroups = (_a = this.guidesMap.get(previousName)) !== null && _a !== void 0 ? _a : [];
+    const updatedGroups = updateTabInFieldsFromGroupList(guideGroups, updatedName);
+    this.guidesMap.delete(previousName);
+    this.guidesMap.set(updatedName, updatedGroups);
+    const updatedGuide = {
+      name: updatedName,
+      label: updatedName,
+      visible: previousGuide.visible,
+      order: previousGuide.order,
+    };
+    this.guidesList = [...this.guidesList.map(guide => (guide.name === previousName) ? updatedGuide : guide)];
+    this.groupsList = [...updatedGroups];
+    this.selectedGuide = updatedGuide;
+    this.hasChanges = true;
+  }
+  handleCreateNewGuide() {
+    const newGuideName = buildNewGuideName(this.guidesList, this.getMessage.bind(this));
+    const newGuide = {
+      name: newGuideName,
+      label: newGuideName,
+      visible: true,
+      order: this.guidesList.length + 1,
+    };
+    const newGuideFixedGroup = {
+      name: GROUP_NAMES.noGroup,
+      fields: [],
+    };
+    this.guidesList = [...this.guidesList, newGuide];
+    this.guidesMap.set(newGuideName, [newGuideFixedGroup]);
+    this.selectedGuide = newGuide;
+    this.hasChanges = true;
+  }
+  getGuideNames() {
+    return [
+      ...this.guidesList.map(g => g.name.toLowerCase()),
+      this.getMessage('snkFormConfig.form.mainArea').toLowerCase(),
+    ];
+  }
+  async componentWillRender() {
+    if (this.messagesBuilder == undefined) {
+      const application = ApplicationContext.getContextValue('__SNK__APPLICATION__');
+      this.messagesBuilder = application.messagesBuilder;
+    }
+  }
+  async componentWillLoad() {
+    this.loadFormConfig();
+    await this.initializeUserConfig();
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("snk-dynaform-config-header", { configOptions: this.configOptions, selectedConfig: this.configSelected, messagesBuilder: this.messagesBuilder, hasChanges: this.hasChanges, optionConfigChanged: this.optionConfigChanged, onConfigClose: () => this.configClose.emit(), onSaveConfig: async () => await this.handleSaveConfig() }), h("div", { class: "form-config-body" }, h("div", { class: "form-config-layout" }, h("snk-dynaform-fields-selector", { dataUnit: this.dataUnit, availableFields: this.availableFields, onFieldListChanged: this.handleAvailableFieldListChanged.bind(this), messagesBuilder: this.messagesBuilder }), h("div", { class: "main-editing-area" }, this.mainGuide && (h("div", { class: "main-fields-section" }, h("snk-dynaform-fields-layout", { ref: ref => this.refMainFieldsLayout = ref, selectedGuide: this.mainGuide, guideNames: this.getGuideNames(), groupsList: this.mainGroupsList, messagesBuilder: this.messagesBuilder, dataUnit: this.dataUnit, isMainSection: true, onLayoutChanged: this.handleMainLayoutChanged.bind(this), onSetFieldListAsAvailable: this.handleSetFieldListAsAvailable.bind(this) }))), h("snk-dynaform-guides-configurator", { messagesBuilder: this.messagesBuilder, guidesList: this.guidesList, selectedGuide: this.selectedGuide, mainGuideName: (_a = this.mainGuide) === null || _a === void 0 ? void 0 : _a.name, onGuideSelected: this.handleSelectGuide.bind(this), onGuideListChanged: this.handleGuideListChanged.bind(this), onCreateNewGuide: this.handleCreateNewGuide.bind(this), onGuideDeleted: this.handleGuideDeleted.bind(this) }), h("snk-dynaform-fields-layout", { ref: ref => this.refFieldsLayout = ref, selectedGuide: this.selectedGuide, guideNames: this.getGuideNames(), groupsList: this.groupsList, messagesBuilder: this.messagesBuilder, dataUnit: this.dataUnit, onGuideRenamed: this.handleGuideRenamed.bind(this), onLayoutChanged: this.handleLayoutChanged.bind(this), onSetFieldListAsAvailable: this.handleSetFieldListAsAvailable.bind(this) }))))));
+  }
+  static get watchers() { return {
+    "selectedGuide": ["observeSelectedGuide"],
+    "configManager": ["observeConfigManager"]
+  }; }
+  static get style() { return snkDynaformFormConfigCss; }
+}, [2, "snk-dynaform-form-config", {
+    "dataUnit": [16],
+    "configManager": [16],
+    "ignoreReadOnlyFormFields": [4, "ignore-read-only-form-fields"],
+    "messagesBuilder": [1040],
+    "customGuidesConfig": [16],
+    "availableFields": [32],
+    "guidesList": [32],
+    "groupsList": [32],
+    "mainGuide": [32],
+    "mainGroupsList": [32],
+    "selectedGuide": [32],
+    "_formConfig": [32],
+    "configOptions": [32],
+    "originalConfigSelected": [32],
+    "configSelected": [32],
+    "hasChanges": [32],
+    "optionConfigChanged": [32]
+  }, [[16, "fieldConfigChanged", "handleFieldConfigChanged"], [16, "formConfigOptionSelected", "handleFormConfigOptionSelected"], [16, "addFieldToGuide", "handleAddFieldToGuide"], [16, "setFieldAsAvailable", "handleSetFieldAsAvailable"], [16, "removeFieldFromAvailable", "handleRemoveFieldFromAvailable"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-dynaform-form-config", "snk-dynaform-config-header", "snk-dynaform-configs-button", "snk-dynaform-field-config", "snk-dynaform-field-item", "snk-dynaform-fields-layout", "snk-dynaform-fields-selector", "snk-dynaform-guides-configurator"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-dynaform-form-config":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkDynaformFormConfig);
+      }
+      break;
+    case "snk-dynaform-config-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "snk-dynaform-configs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "snk-dynaform-field-config":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "snk-dynaform-field-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "snk-dynaform-fields-layout":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "snk-dynaform-fields-selector":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "snk-dynaform-guides-configurator":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { SnkDynaformFormConfig as S, defineCustomElement as d };

package/dist/components/snk-dynaform-form-view.d.ts

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

package/dist/components/snk-dynaform-form-view.js

@@ -0,0 +1,6 @@
+import { S as SnkDynaformFormView$1, d as defineCustomElement$1 } from './snk-dynaform-form-view2.js';
+
+const SnkDynaformFormView = SnkDynaformFormView$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkDynaformFormView, defineCustomElement };