@sankhyalabs/sankhyablocks 10.1.0-dev.4 → 10.1.0-dev.5

package/dist/components/DataFetcher.js

@@ -7438,6 +7438,7 @@ const snkFormConfigMessages$2 = {
     labelNewGroup: "Adicionar novo grupo",
     mainArea: "Área principal",
     tabGeneral: "Geral",
+    canNotEditCustomGuide: "Não é possível editar guias detalhe e guias personalizadas",
     createNewGroup: "Criar novo grupo",
     newGroup: "Criar novo grupo",
     noGuideSelected: "Selecione uma guia e comece a configurar",
@@ -7465,6 +7466,10 @@ const snkFormConfigMessages$2 = {
     title: "Atenção",
     message: "Selecione uma guia para iniciar a configuração!"
   },
+  canNotAddFieldToGuide: {
+    title: "Atenção",
+    message: "Não é possível adicionar campos à guias customizadas ou guias detalhe!"
+  },
   alert: {
     titleGroupExists: "Já existe um grupo com título",
     titleGroupEditing: "Há um <b>grupo<b/> em edição. <br/> Finalize a edição para salvar as configurações.",
@@ -7495,10 +7500,11 @@ const snkFormConfigMessages$2 = {
     createNewGuide: "Criar nova guia",
     noHiddenGuides: "Nenhuma guia oculta",
     noVisibleGuides: "Nenhuma guia visível",
+    canNotDeleteCustomGuide: "Não é possível excluir guias detalhe e guias personalizadas",
     actions: {
       hide: "Ocultar",
       show: "Tornar visível",
-      delete: "Excluir"
+      delete: "Excluir",
     }
   }
 };
@@ -8296,6 +8302,7 @@ const snkFormConfigMessages$1 = {
     labelNewGroup: "Add new group",
     mainArea: "Main area",
     tabGeneral: "General",
+    canNotEditCustomGuide: "It is not possible to edit detail tabs and custom tabs",
     createNewGroup: "Create new group",
     newGroup: "New group",
     noGuideSelected: "Select a tab and start configuring",
@@ -8323,6 +8330,10 @@ const snkFormConfigMessages$1 = {
     title: "Attention",
     message: "Select a guide to start configuration!"
   },
+  canNotAddFieldToGuide: {
+    title: "Attention",
+    message: "It is not possible to add fields to detail tabs or custom tabs!"
+  },
   alert: {
     titleGroupExists: "A group with this title already exists",
     titleGroupEditing: "There is a <b>group<b/> being edited. <br/> Finish editing to save the settings.",
@@ -8353,6 +8364,7 @@ const snkFormConfigMessages$1 = {
     createNewGuide: "Create new tab",
     noHiddenGuides: "No hidden tabs",
     noVisibleGuides: "No visible tabs",
+    canNotDeleteCustomGuide: "Is not possible to detail detail tabs os a custom tabs",
     actions: {
       hide: "Hide",
       show: "Make visible",
@@ -9154,6 +9166,7 @@ const snkFormConfigMessages = {
     labelNewGroup: "Añadir nuevo grupo",
     mainArea: "Área principal",
     tabGeneral: "General",
+    canNotEditCustomGuide: "No es posible editar pestañas de detalles y pestañas personalizadas",
     createNewGroup: "Crear nuevo grupo",
     newGroup: "Nuevo grupo",
     noGuideSelected: "Seleccione una pestaña y comience a configurar",
@@ -9181,6 +9194,10 @@ const snkFormConfigMessages = {
     title: "Atención",
     message: "¡Seleccione una guía para iniciar la configuración!"
   },
+  canNotAddFieldToGuide: {
+    title: "Atención",
+    message: "¡No es posible agregar campos a pestañas de detalles o pestañas personalizadas!"
+  },
   alert: {
     titleGroupExists: "Ya existe un grupo con título",
     titleGroupEditing: "Hay un <b>grupo<b/> en edición. <br/> Finalice la edición para guardar las configuraciones.",
@@ -9211,6 +9228,7 @@ const snkFormConfigMessages = {
     createNewGuide: "Crear nueva pestaña",
     noHiddenGuides: "No hay pestañas ocultas",
     noVisibleGuides: "No hay pestañas visibles",
+    canNotDeleteCustomGuide: "No es posible eliminar pestañas de detalles o pestañas personalizadas",
     actions: {
       hide: "Ocultar",
       show: "Hacer visible",

package/dist/components/SnkFormConfigManager.js

@@ -1,5 +1,5 @@
-import { C as ConfigStorage } from './ConfigStorage.js';
 import { ObjectUtils, StringUtils } from '@sankhyalabs/core';
+import { C as ConfigStorage } from './ConfigStorage.js';
 import { F as FormConfigFetcher } from './form-config-fetcher.js';
 import { T as TAB_NAMES } from './constants.js';
 
@@ -83,7 +83,7 @@ class SnkFormConfigManager {
     return false;
   }
   getFieldsList(descriptionFilter, forceEmptyConfig = false) {
-    var _a;
+    var _a, _b;
     const fields = (_a = this._config) === null || _a === void 0 ? void 0 : _a.fields;
     const hasConfig = this.hasConfig();
     if (hasConfig && !forceEmptyConfig) {
@@ -99,7 +99,7 @@ class SnkFormConfigManager {
       })
         .filter(field => this.isFieldVisible(field, descriptionFilter));
     }
-    if (!this._dataUnit) {
+    if (!this._dataUnit || !((_b = this._dataUnit.metadata) === null || _b === void 0 ? void 0 : _b.fields)) {
       return [];
     }
     const filteredFields = this._dataUnit.metadata.fields

package/dist/components/field-config2.js

@@ -112,6 +112,46 @@ function buildGuides(config, mainArea) {
   tabs = initializeTabsNames(tabs);
   return handleMainTab(tabs, mainArea);
 }
+function buildChildrenGuides(dataUnit, initialOrderIndex = 0, guidesList) {
+  var _a;
+  if (!dataUnit || !dataUnit.metadata) {
+    return [];
+  }
+  const children = ((_a = dataUnit.metadata) === null || _a === void 0 ? void 0 : _a.children) || [];
+  const childrenWithNoGuide = [];
+  for (const child of children) {
+    if (guidesList.some((guide) => child.label === guide.label)) {
+      continue;
+    }
+    childrenWithNoGuide.push({
+      label: child.label,
+      name: child.name,
+      visible: true,
+      isCustom: true,
+      order: initialOrderIndex++
+    });
+  }
+  return childrenWithNoGuide;
+}
+function buildCustomGuides(customGuidesList, guidesList) {
+  let initialOrderIndex = guidesList.length;
+  const customGuidesToAdd = getCustomGuidesNotIncludedInList(customGuidesList, guidesList);
+  return customGuidesToAdd.map(guide => {
+    return {
+      name: guide.id,
+      label: guide.label,
+      visible: true,
+      isCustom: true,
+      order: initialOrderIndex++
+    };
+  });
+}
+function isCustomGuideIncludedInList(guidesList, guide) {
+  return guidesList.some(fromList => fromList.name === guide.id || fromList.label === guide.label);
+}
+function getCustomGuidesNotIncludedInList(customGuidesList, guidesList) {
+  return customGuidesList.filter(guide => !isCustomGuideIncludedInList(guidesList, guide));
+}
 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 => {
@@ -521,4 +561,4 @@ function defineCustomElement() {
   } });
 }
 
-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 };
+export { FieldConfig as F, ID_AVAILABLE_FIELDS as I, SORTABLE_PATH as S, getFieldsStructure as a, buildGuides as b, buildChildrenGuides as c, defineCustomElement as d, buildCustomGuides as e, buildGuidesMap as f, getIconName as g, getFieldsToSave as h, buildNewGuideName as i, updateTabInFieldsFromGroupList as u };

package/dist/components/fields-layout2.js

@@ -331,6 +331,9 @@ const FieldLayoutComponent = /*@__PURE__*/ proxyCustomElement(class extends HTML
     if (!this.selectedGuide) {
       return (h(Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, h("span", { class: 'no-guide-selected' }, this.getMessage('snkFormConfig.form.noGuideSelected'))));
     }
+    if (this.selectedGuide.isCustom || this.selectedGuide.isDetail) {
+      return (h(Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, h("span", { class: 'no-guide-selected' }, this.getMessage('snkFormConfig.form.canNotEditCustomGuide'))));
+    }
     return (h(Host, { class: 'ez-flex-item--auto ez-size-height--full ez-box ez-padding--medium content-container' }, this.renderGuideName(), h("div", { class: 'layout-container' }, h("ez-scroller", { direction: 'vertical', activeShadow: true }, h("div", { class: 'no-group-container' }, h("div", { id: GROUP_NAMES.noGroup, class: 'group-content', "data-group-name": GROUP_NAMES.noGroup }, this.renderFixedFields())), h("hr", null), h("div", { id: this.ID_GROUPS, class: 'groups-container' }, this.renderDraggableGroups()))), h("div", { class: 'add-group-container', onClick: this.handleAddGroup.bind(this) }, h("ez-icon", { slot: "leftIcon", iconName: "plus" }), h("span", null, this.getMessage('snkFormConfig.form.createNewGroup')))));
   }
   get el() { return this; }

package/dist/components/guides-configurator2.js

@@ -101,7 +101,9 @@ const GuidesConfigurator = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       var _a;
       return (h("div", { key: guide.name, "data-guide-name": guide.name, title: guide.label, class: `guide-item ${((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.label) === guide.label ? 'selected' : ''} ${this.filterTerm.length ? 'disable-sort' : ''}`, onClick: e => this.handleSelectGuide(guide, e) }, h("span", null, h("ez-icon", { iconName: "drag-indicator", class: 'ez-margin-right--small' })), h("span", { class: 'item-label' }, guide.label), h("div", { class: 'actions' }, h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: e => this.toggleGuideVisibility(guide, e), size: "medium", iconName: guide.visible ? 'eye-off' : 'eye', title: guide.visible ?
           this.getMessage('snkFormConfig.guidesConfigurator.actions.hide') :
-          this.getMessage('snkFormConfig.guidesConfigurator.actions.show') }), h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: e => this.handleDeleteGuide(guide, e), size: "medium", iconName: 'delete', title: this.getMessage('snkFormConfig.guidesConfigurator.actions.delete') }))));
+          this.getMessage('snkFormConfig.guidesConfigurator.actions.show') }), h("ez-button", { mode: "icon", class: "ez-button--tertiary", onClick: e => this.handleDeleteGuide(guide, e), size: "medium", isDisabled: guide.isCustom || guide.isDetail, iconName: 'delete', title: guide.isCustom || guide.isDetail ?
+          this.getMessage('snkFormConfig.guidesConfigurator.canNotDeleteCustomGuide') :
+          this.getMessage('snkFormConfig.guidesConfigurator.actions.delete') }))));
     });
   }
   getContainerElement(id) {

package/dist/components/snk-crud.js

@@ -109,6 +109,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this._dataUnit = undefined;
     this._dataState = undefined;
+    this._suppressEntitySearch = false;
     this.attachmentRegisterKey = undefined;
     this._currentViewMode = VIEW_MODE.GRID;
     this._canEdit = undefined;
@@ -145,6 +146,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.layoutFormConfig = true;
     this.multipleEditionEnabled = true;
     this.paginationCounterMode = 'auto';
+    this.customGuidesConfig = [];
     this.showEntitySearch = true;
     this.disableNumberingConfig = false;
   }
@@ -592,7 +594,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   renderDynamicSearch(slotName) {
     var _a;
-    if (!this.showEntitySearch || ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.insertionMode) === true)
+    if (this._suppressEntitySearch || !this.showEntitySearch || ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.insertionMode) === true)
       return;
     return (h("div", { slot: slotName, class: "entity-search-container", style: { position: 'relative', display: 'inline-block', marginLeft: '10px', minWidth: '200px' } }, h("ez-search", { label: "Buscar registros", optionLoader: this.loadEntitySuggestions, onEzChange: (evt) => this.searchEntitySelect(evt.detail), mode: "slim", showMore: this._showMoreOnSearch, suppressEmptyOption: true, suppressInputPersist: true })));
   }
@@ -601,7 +603,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     }
     this._snkDataUnit.ignoreSaveMessage = (this._currentViewMode === VIEW_MODE.GRID && !this.enableGridInsert);
-    return (h(Host, null, h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", { class: 'ez-flex ez-flex--column ez-size-height--full ez-size-width--full ez-padding--medium' }, h("snk-grid", { ref: (ref) => this._snkGrid = ref, class: 'ez-flex ez-flex--column ez-size-height--full ez-size-width--full', filterBarTitle: this.filterBarTitle, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode, recordsValidator: this.recordsValidator, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, canEdit: this._canEdit, resourceID: this._resourceID, disablePersonalizedFilter: this.disablePersonalizedFilter, gridLegacyConfigName: this.gridLegacyConfigName, filterBarLegacyConfigName: this.filterBarLegacyConfigName, autoLoad: this.autoLoad, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, strategyExporter: this.strategyExporter, multipleEditionEnabled: this.multipleEditionEnabled, paginationCounterMode: this.paginationCounterMode }, h("slot", { name: "GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }), this.renderDynamicSearch("GRID_HEADER_DYNAMIC_SEARCH"))), h("stack-item", null, h("snk-guides-viewer", { ref: ref => this._guidesViewer = ref, entityPath: this._snkDataUnit.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: evt => this.executeAction(evt.detail), presentationMode: this.presentationMode, "data-element-id": "crud_form", canEdit: this._canEdit, recordsValidator: this.recordsValidator, resourceID: this._resourceID, detailTaskbarCustomContainerId: this.customContainerId, formLegacyConfigName: this.formLegacyConfigName, enableGridInsert: this.enableGridInsert, getCustomTitle: this.setCustomFormTitle, ignoreReadOnlyFormFields: this.ignoreReadOnlyFormFields }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" }), this.renderDynamicSearch("GUIDES_VIEWER_DYNAMIC_SEARCH"), h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", { tabIndex: "0" }, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this._snkDataUnit.entityName, onBack: this.backView.bind(this) })), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, entityName: this._snkDataUnit.entityName, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showActionButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this._resourceID, customContainerId: this.customContainerId, layoutFormConfig: this.layoutFormConfig })), h("div", { id: `${this.customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }), h("slot", { name: "DETAIL_GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_TASKBAR_CUSTOM_ELEMENTS" }))));
+    return (h(Host, null, h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", { class: 'ez-flex ez-flex--column ez-size-height--full ez-size-width--full ez-padding--medium' }, h("snk-grid", { ref: (ref) => this._snkGrid = ref, class: 'ez-flex ez-flex--column ez-size-height--full ez-size-width--full', filterBarTitle: this.filterBarTitle, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), messagesBuilder: this.messagesBuilder, actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, presentationMode: this.presentationMode, recordsValidator: this.recordsValidator, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, canEdit: this._canEdit, resourceID: this._resourceID, disablePersonalizedFilter: this.disablePersonalizedFilter, gridLegacyConfigName: this.gridLegacyConfigName, filterBarLegacyConfigName: this.filterBarLegacyConfigName, autoLoad: this.autoLoad, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, strategyExporter: this.strategyExporter, multipleEditionEnabled: this.multipleEditionEnabled, paginationCounterMode: this.paginationCounterMode }, h("slot", { name: "GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }), this.renderDynamicSearch("GRID_HEADER_DYNAMIC_SEARCH"))), h("stack-item", null, h("snk-guides-viewer", { ref: ref => this._guidesViewer = ref, customGuidesConfig: this.customGuidesConfig, entityPath: this._snkDataUnit.entityName, messagesBuilder: this.messagesBuilder, onExit: () => this.setViewMode(VIEW_MODE.GRID), dataState: this._dataState, dataUnit: this._dataUnit, actionsList: this.actionsList, taskbarManager: this.taskbarManager, configName: this.configName, onActionClick: evt => this.executeAction(evt.detail), onFormConfigVisibilityChanged: evt => this._suppressEntitySearch = evt.detail, presentationMode: this.presentationMode, "data-element-id": "crud_form", canEdit: this._canEdit, recordsValidator: this.recordsValidator, resourceID: this._resourceID, detailTaskbarCustomContainerId: this.customContainerId, formLegacyConfigName: this.formLegacyConfigName, enableGridInsert: this.enableGridInsert, getCustomTitle: this.setCustomFormTitle, ignoreReadOnlyFormFields: this.ignoreReadOnlyFormFields }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" }), this.renderDynamicSearch("GUIDES_VIEWER_DYNAMIC_SEARCH"), h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", { tabIndex: "0" }, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this._snkDataUnit.entityName, onBack: this.backView.bind(this) })), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, entityName: this._snkDataUnit.entityName, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.setViewMode(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showActionButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this._resourceID, customContainerId: this.customContainerId, layoutFormConfig: this.layoutFormConfig })), h("div", { id: `${this.customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }), h("slot", { name: "DETAIL_GRID_HEADER_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_GRID_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "DETAIL_TASKBAR_CUSTOM_ELEMENTS" }))));
   }
   get _element() { return this; }
   static get watchers() { return {
@@ -637,10 +639,12 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "layoutFormConfig": [4, "layout-form-config"],
     "multipleEditionEnabled": [4, "multiple-edition-enabled"],
     "paginationCounterMode": [1, "pagination-counter-mode"],
+    "customGuidesConfig": [16],
     "showEntitySearch": [4, "show-entity-search"],
     "disableNumberingConfig": [4, "disable-numbering-config"],
     "_dataUnit": [32],
     "_dataState": [32],
+    "_suppressEntitySearch": [32],
     "attachmentRegisterKey": [32],
     "_currentViewMode": [32],
     "_canEdit": [32],

package/dist/components/snk-detail-view2.js

@@ -63,10 +63,13 @@ const SnkGuidesViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     super();
     this.__registerHost();
     this.snkMasterFormConfigChange = createEvent(this, "snkMasterFormConfigChange", 7);
+    this.formConfigVisibilityChanged = createEvent(this, "formConfigVisibilityChanged", 7);
     this.exit = createEvent(this, "exit", 7);
     this.actionClick = createEvent(this, "actionClick", 7);
     this.formItemsReady = createEvent(this, "formItemsReady", 7);
     this._guideBuilders = new Map();
+    this.CUSTOM_GUIDE_ID_PREFIX = "CUSTOM_GUIDE_";
+    this.CUSTOM_GUIDE_DATA_CUSTOM_ID = "CUSTOM_GUIDE";
     this.dataUnit = undefined;
     this.dataState = undefined;
     this.configName = undefined;
@@ -85,6 +88,7 @@ const SnkGuidesViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.enableGridInsert = false;
     this.ignoreReadOnlyFormFields = undefined;
     this.getCustomTitle = undefined;
+    this.customGuidesConfig = [];
     this._hasToCreateFieldSearch = true;
     this._breadcrumbItems = [];
     this._guides = undefined;
@@ -99,6 +103,9 @@ const SnkGuidesViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   observeDataUnit() {
     this.loadGuides(true);
   }
+  observeFormConfigManager(value) {
+    this.formConfigVisibilityChanged.emit(!!value);
+  }
   observeDataState(newValue, oldValue) {
     var _a, _b, _c, _d, _e, _f;
     const newRecordsIds = (_b = (_a = newValue === null || newValue === void 0 ? void 0 : newValue.selectionInfo) === null || _a === void 0 ? void 0 : _a.recordIds) !== null && _b !== void 0 ? _b : (_c = newValue === null || newValue === void 0 ? void 0 : newValue.selectedRecord) === null || _c === void 0 ? void 0 : _c['__record__id__'];
@@ -197,7 +204,7 @@ const SnkGuidesViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     if (!this._configManager.isLoaded) {
       return;
     }
-    this._masterFormMetadata = buildFormMetadata(this.masterFormConfig, this.dataUnit, true);
+    this._masterFormMetadata = buildFormMetadata(this.masterFormConfig, this.dataUnit, true, this.customGuidesConfig);
     const allSheets = this._masterFormMetadata.getAllSheets();
     const currentRecord = this.dataUnit.getSelectedRecord();
     const disableDetails = this.hasToDisableDetails(currentRecord);
@@ -343,38 +350,67 @@ const SnkGuidesViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     return `${this.entityPath}/${entityName}`;
   }
   getContent() {
-    var _a, _b, _c, _d, _e;
     if (!this.selectedGuide) {
       return;
     }
     const guideId = this.selectedGuide.id;
-    let content;
+    if (this.isCustomGuide(guideId)) {
+      return h("div", { "data-custom-id": `${this.CUSTOM_GUIDE_DATA_CUSTOM_ID}`, "data-reserved-slot-id": guideId, id: this.buildCustomGuideContainerId(guideId) });
+    }
     const levels = guideId.split("::");
     const currentLevel = levels.pop();
     const childEntityName = FormMetadata.getDetailName(currentLevel);
     let detailId = guideId;
-    if (childEntityName || levels.length > 0) {
-      let formName;
-      let detailBranch;
-      if (guideId.includes(FORM_NAME_PREFIX)) {
-        [detailId, formName] = guideId.split(FORM_NAME_PREFIX);
-        const pathSize = ((_a = this._breadcrumbItems) === null || _a === void 0 ? void 0 : _a.length) || 0;
-        detailBranch = pathSize > 1 ? this._breadcrumbItems[pathSize - 2] : this.selectedGuide;
-      }
-      else {
-        detailBranch = this.selectedGuide;
-      }
-      content = this.wrapDetail(levels, h("snk-detail-view", { ref: (ref) => this._currentDetail = ref, dataUnitName: this.getDataUnitName(levels, childEntityName), onSnkDetailGuidesChange: (evt) => this.updateGuide(evt.detail), entityName: childEntityName, selectedForm: formName, branchGuide: detailBranch, guideItemPath: this._breadcrumbItems, key: `detail${detailId}`, canEdit: this.canEdit, onSnkSwitchGuide: evt => this._guideNavigator.selectGuide(evt.detail), resourceID: this.resourceID, taskbarCustomContainerId: this.detailTaskbarCustomContainerId, customEditors: this._customEditors, customRenders: this._customRenders, presentationMode: this.presentationMode }));
+    if (this.isDetailGuide(childEntityName, levels)) {
+      return this.buildDetailGuideContent(guideId, detailId, levels, childEntityName);
+    }
+    return this.buildFormViewGuideContent(guideId);
+  }
+  buildCustomGuideContainerId(guideId) {
+    return `${this.CUSTOM_GUIDE_ID_PREFIX}${guideId}`;
+  }
+  buildFormViewGuideContent(cardId) {
+    var _a, _b, _c, _d;
+    const sheet = this._masterFormMetadata.getSheet(cardId);
+    if (!sheet)
+      return;
+    const cardConfig = (_b = (_a = this.masterFormConfig) === null || _a === void 0 ? void 0 : _a.cardsState) === null || _b === void 0 ? void 0 : _b.get(cardId);
+    return (h("snk-form-view", { ref: ref => this._mainForm = ref, fixed: cardConfig === null || cardConfig === void 0 ? void 0 : cardConfig.fixed, summaryFields: (_d = (_c = this.masterFormConfig) === null || _c === void 0 ? void 0 : _c.summary) === null || _d === void 0 ? void 0 : _d.get(cardId), name: cardId, label: sheet.label, fields: sheet.fields, dataUnit: this.dataUnit, formMetadata: this._masterFormMetadata, recordsValidator: this.recordsValidator, fieldToFocus: this._fieldToGetFocus, key: cardId, onSnkRequestClearFieldToFocus: _ => this.clearFieldToFocusHandler(), customEditors: this._customEditors, fieldsProps: this._fieldsProps, fieldSearch: this._fieldSearch }, this.presentationMode == PresentationMode.SECONDARY && this.buildTaskBar()));
+  }
+  isDetailGuide(childEntityName, levels) {
+    return childEntityName || levels.length > 0;
+  }
+  buildDetailGuideContent(guideId, detailId, levels, childEntityName) {
+    var _a;
+    let formName;
+    let detailBranch;
+    if (guideId.includes(FORM_NAME_PREFIX)) {
+      [detailId, formName] = guideId.split(FORM_NAME_PREFIX);
+      const pathSize = ((_a = this._breadcrumbItems) === null || _a === void 0 ? void 0 : _a.length) || 0;
+      detailBranch = pathSize > 1 ? this._breadcrumbItems[pathSize - 2] : this.selectedGuide;
     }
     else {
-      const cardId = this.selectedGuide.id;
-      const sheet = this._masterFormMetadata.getSheet(cardId);
-      if (sheet) {
-        const cardConfig = (_c = (_b = this.masterFormConfig) === null || _b === void 0 ? void 0 : _b.cardsState) === null || _c === void 0 ? void 0 : _c.get(cardId);
-        content = h("snk-form-view", { ref: ref => this._mainForm = ref, fixed: cardConfig === null || cardConfig === void 0 ? void 0 : cardConfig.fixed, summaryFields: (_e = (_d = this.masterFormConfig) === null || _d === void 0 ? void 0 : _d.summary) === null || _e === void 0 ? void 0 : _e.get(cardId), name: cardId, label: sheet.label, fields: sheet.fields, dataUnit: this.dataUnit, formMetadata: this._masterFormMetadata, recordsValidator: this.recordsValidator, fieldToFocus: this._fieldToGetFocus, key: guideId, onSnkRequestClearFieldToFocus: _ => this.clearFieldToFocusHandler(), customEditors: this._customEditors, fieldsProps: this._fieldsProps, fieldSearch: this._fieldSearch }, this.presentationMode == PresentationMode.SECONDARY && this.buildTaskBar());
-      }
+      detailBranch = this.selectedGuide;
     }
-    return content;
+    return this.wrapDetail(levels, h("snk-detail-view", { ref: (ref) => this._currentDetail = ref, dataUnitName: this.getDataUnitName(levels, childEntityName), onSnkDetailGuidesChange: (evt) => this.updateGuide(evt.detail), entityName: childEntityName, selectedForm: formName, branchGuide: detailBranch, guideItemPath: this._breadcrumbItems, key: `detail${detailId}`, canEdit: this.canEdit, onSnkSwitchGuide: evt => this._guideNavigator.selectGuide(evt.detail), resourceID: this.resourceID, taskbarCustomContainerId: this.detailTaskbarCustomContainerId, customEditors: this._customEditors, customRenders: this._customRenders, presentationMode: this.presentationMode }));
+  }
+  isCustomGuide(guideId) {
+    var _a;
+    return (_a = this.customGuidesConfig) === null || _a === void 0 ? void 0 : _a.map(g => g.id).includes(guideId);
+  }
+  attachCustomGuideInView() {
+    //As guias customizadas ficam em slots reservados na DOM e
+    // precisam ser acessadas via querySelector e colocadas no container correto na view.
+    var _a;
+    const guideId = (_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.id;
+    if (!this.isCustomGuide(guideId))
+      return;
+    const customGuideSlot = document.querySelector(`#${guideId}`);
+    const customGuideElement = customGuideSlot === null || customGuideSlot === void 0 ? void 0 : customGuideSlot.firstElementChild;
+    const customGuideViewContainer = document.querySelector(`#${this.buildCustomGuideContainerId(guideId)}`);
+    if (!customGuideElement || !customGuideViewContainer)
+      return;
+    customGuideViewContainer.appendChild(customGuideElement);
   }
   onBreadcrumbClickHandler(item) {
     if ((item === null || item === void 0 ? void 0 : item.id) == undefined) {
@@ -457,7 +493,29 @@ const SnkGuidesViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.addFormLegacyConfigName();
     this._configManager.loadConfig();
   }
+  componentWillRender() {
+    this.detachCustomGuideFromView();
+  }
+  detachCustomGuideFromView() {
+    // Antes de cada renderização, o componente remove a guia customizada da view
+    // e a coloca de volta no slot reservado na DOM para que não seja perdida sua referência.
+    if (!this.customGuidesConfig || this.customGuidesConfig.length === 0)
+      return;
+    const viewCustomGuideContainer = this._element.querySelector(`[data-custom-id="${this.CUSTOM_GUIDE_DATA_CUSTOM_ID}"]`);
+    const reservedSlotId = viewCustomGuideContainer === null || viewCustomGuideContainer === void 0 ? void 0 : viewCustomGuideContainer.getAttribute('data-reserved-slot-id');
+    if (!(viewCustomGuideContainer === null || viewCustomGuideContainer === void 0 ? void 0 : viewCustomGuideContainer.hasChildNodes()) || !reservedSlotId)
+      return;
+    const customGuideReservedSlot = document.querySelector(`#${reservedSlotId}`);
+    const customGuideElement = viewCustomGuideContainer === null || viewCustomGuideContainer === void 0 ? void 0 : viewCustomGuideContainer.firstElementChild;
+    if (!customGuideReservedSlot || !customGuideElement)
+      return;
+    customGuideReservedSlot.appendChild(customGuideElement);
+  }
   componentDidRender() {
+    var _a;
+    if (this.isCustomGuide((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.id)) {
+      this.attachCustomGuideInView();
+    }
     if (!this._guideHasChanged) {
       return;
     }
@@ -586,6 +644,9 @@ const SnkGuidesViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     const labels = selectedRecords.map(record => this.messagesBuilder.getMessage("snkCrud.title", record));
     return `[${labels.join(", ")}]`;
   }
+  getCustomGuidesConfig() {
+    return this._currentDetail ? [] : this.customGuidesConfig;
+  }
   componentDidLoad() {
     this.dataUnit.subscribe(this.dataUnitActionHandler.bind(this));
     this.initKeyboardManager();
@@ -605,7 +666,7 @@ const SnkGuidesViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   render() {
     var _a, _b;
     if (this._formEditorConfigManager != undefined) {
-      return (h("snk-form-config", { ref: ref => this._container = ref, tabindex: -1, dataUnit: this._formEditorDataUnit, messagesBuilder: this.messagesBuilder, configManager: this._formEditorConfigManager, onConfigClose: () => this._formEditorConfigManager = null }));
+      return (h("snk-form-config", { ref: ref => this._container = ref, tabindex: -1, dataUnit: this._formEditorDataUnit, messagesBuilder: this.messagesBuilder, configManager: this._formEditorConfigManager, onConfigClose: () => this._formEditorConfigManager = null, customGuidesConfig: this.getCustomGuidesConfig() }));
     }
     if (!this.dataUnit || !this._configManager.isLoaded) {
       return;
@@ -631,6 +692,7 @@ const SnkGuidesViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   get _element() { return this; }
   static get watchers() { return {
     "dataUnit": ["observeDataUnit"],
+    "_formEditorConfigManager": ["observeFormConfigManager"],
     "dataState": ["observeDataState"],
     "masterFormConfig": ["observeMasterFormConfig"]
   }; }
@@ -654,6 +716,7 @@ const SnkGuidesViewer = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "enableGridInsert": [4, "enable-grid-insert"],
     "ignoreReadOnlyFormFields": [4, "ignore-read-only-form-fields"],
     "getCustomTitle": [16],
+    "customGuidesConfig": [16],
     "_hasToCreateFieldSearch": [32],
     "_breadcrumbItems": [32],
     "_guides": [32],

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

@@ -1,10 +1,10 @@
 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 { b as buildGuides, c as buildGuidesMap, e as getFieldsToSave, u as updateTabInFieldsFromGroupList, f as buildNewGuideName, d as defineCustomElement$5 } from './field-config2.js';
-import { T as TAB_NAMES, G as GROUP_NAMES } from './constants.js';
 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 { b as buildGuides, c as buildChildrenGuides, e as buildCustomGuides, f as buildGuidesMap, h as getFieldsToSave, u as updateTabInFieldsFromGroupList, i as buildNewGuideName, d as defineCustomElement$5 } from './field-config2.js';
 import { d as defineCustomElement$7 } from './config-header2.js';
 import { d as defineCustomElement$6 } from './configs-button2.js';
 import { d as defineCustomElement$4 } from './field-item2.js';
@@ -35,6 +35,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.configManager = undefined;
     this.ignoreReadOnlyFormFields = undefined;
     this.messagesBuilder = undefined;
+    this.customGuidesConfig = [];
   }
   handleFieldConfigChanged() {
     this.hasChanges = true;
@@ -54,6 +55,10 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.showNoGuideSelectedDialog();
       return;
     }
+    if (this.selectedGuide.isCustom || this.selectedGuide.isDetail) {
+      this.showCanNotAddFieldToGuideDialog();
+      return;
+    }
     this.availableFields = [...this.availableFields.filter(f => f.name !== fieldItem.name)];
     await ((_a = this.refFieldsLayout) === null || _a === void 0 ? void 0 : _a.addFieldToLayout(fieldItem));
   }
@@ -79,6 +84,11 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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:
@@ -151,9 +161,12 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
   }
   loadGuides() {
-    var _a;
-    this.guidesList = [...buildGuides(this._formConfig, this.getMessage('snkFormConfig.form.mainArea'))];
-    this.guidesMap = buildGuidesMap((_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.fields, this.guidesList, this.dataUnit, this.getMessage('snkFormConfig.form.tabGeneral'));
+    var _a, _b, _c, _d;
+    this.guidesList = [];
+    this.guidesList.push(...buildGuides(this._formConfig, this.getMessage('snkFormConfig.form.mainArea')));
+    this.guidesList.push(...buildChildrenGuides(this.dataUnit, (_c = (_b = (_a = this._formConfig) === null || _a === void 0 ? void 0 : _a.tabs) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0, this.guidesList));
+    this.guidesList.push(...buildCustomGuides(this.customGuidesConfig, this.guidesList));
+    this.guidesMap = buildGuidesMap((_d = this._formConfig) === null || _d === void 0 ? void 0 : _d.fields, this.guidesList, this.dataUnit, this.getMessage('snkFormConfig.form.tabGeneral'));
   }
   getConfig() {
     let config = this.configManager.getConfig(this.dataUnit, false);
@@ -301,6 +314,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "configManager": [16],
     "ignoreReadOnlyFormFields": [4, "ignore-read-only-form-fields"],
     "messagesBuilder": [1040],
+    "customGuidesConfig": [16],
     "availableFields": [32],
     "guidesList": [32],
     "groupsList": [32],