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

package/dist/collection/components/snk-crud/subcomponents/snk-guides-viewer.js

@@ -12,6 +12,8 @@ const FORM_NAME_PREFIX = "__FORM:";
 export class SnkGuidesViewer {
   constructor() {
     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;
@@ -30,6 +32,7 @@ export class SnkGuidesViewer {
     this.enableGridInsert = false;
     this.ignoreReadOnlyFormFields = undefined;
     this.getCustomTitle = undefined;
+    this.customGuidesConfig = [];
     this._hasToCreateFieldSearch = true;
     this._breadcrumbItems = [];
     this._guides = undefined;
@@ -44,6 +47,9 @@ export class SnkGuidesViewer {
   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__'];
@@ -142,7 +148,7 @@ export class SnkGuidesViewer {
     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);
@@ -288,38 +294,67 @@ export class SnkGuidesViewer {
     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) {
@@ -402,7 +437,29 @@ export class SnkGuidesViewer {
     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;
     }
@@ -531,6 +588,9 @@ export class SnkGuidesViewer {
     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();
@@ -550,7 +610,7 @@ export class SnkGuidesViewer {
   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;
@@ -924,6 +984,29 @@ export class SnkGuidesViewer {
           "tags": [],
           "text": "Fornece  uma fun\u00E7\u00E3o para obter um t\u00EDtulo customizado do formul\u00E1rio."
         }
+      },
+      "customGuidesConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<CustomGuideItem>",
+          "resolved": "CustomGuideItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "CustomGuideItem": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Fornece as informa\u00E7\u00F5es das guias personalizadas."
+        },
+        "defaultValue": "[]"
       }
     };
   }
@@ -962,6 +1045,21 @@ export class SnkGuidesViewer {
             }
           }
         }
+      }, {
+        "method": "formConfigVisibilityChanged",
+        "name": "formConfigVisibilityChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando a visibilidade do configurador do formul\u00E1rio \u00E9 alterada."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
       }, {
         "method": "exit",
         "name": "exit",
@@ -1159,6 +1257,9 @@ export class SnkGuidesViewer {
     return [{
         "propName": "dataUnit",
         "methodName": "observeDataUnit"
+      }, {
+        "propName": "_formEditorConfigManager",
+        "methodName": "observeFormConfigManager"
       }, {
         "propName": "dataState",
         "methodName": "observeDataState"

package/dist/collection/components/snk-form-config/FormConfigHelper.js

@@ -108,6 +108,46 @@ export function buildGuides(config, mainArea) {
   tabs = initializeTabsNames(tabs);
   return handleMainTab(tabs, mainArea);
 }
+export 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;
+}
+export 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 => {

package/dist/collection/components/snk-form-config/SnkFormConfigManager.js

@@ -1,5 +1,5 @@
-import { ConfigStorage } from '../../lib/configs/ConfigStorage';
 import { ObjectUtils, StringUtils } from '@sankhyalabs/core';
+import { ConfigStorage } from '../../lib/configs/ConfigStorage';
 import { FormConfigFetcher } from '../../lib/http/data-fetcher/fetchers/form-config-fetcher';
 import { TAB_NAMES } from '../../lib/utils/constants';
 export class SnkFormConfigManager {
@@ -82,7 +82,7 @@ export 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) {
@@ -98,7 +98,7 @@ export 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/collection/components/snk-form-config/fields-layout/fields-layout.js

@@ -320,6 +320,9 @@ export class FieldLayoutComponent {
     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')))));
   }
   static get is() { return "fields-layout"; }

package/dist/collection/components/snk-form-config/guides-configurator/guides-configurator.js

@@ -92,7 +92,9 @@ export class GuidesConfigurator {
       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/collection/components/snk-form-config/snk-form-config.js

@@ -1,10 +1,10 @@
-import { h, Host } from '@stencil/core';
 import { ApplicationContext, ObjectUtils } from '@sankhyalabs/core';
 import { buildFormConfigFromDataUnit } from '@sankhyalabs/ezui/dist/collection/utils/form';
-import { updateTabInFieldsFromGroupList, buildGuides, buildGuidesMap, buildNewGuideName, getFieldsToSave, } from './FormConfigHelper';
-import { GROUP_NAMES, TAB_NAMES } from '../../lib/utils/constants';
+import { h, Host } from '@stencil/core';
 import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
 import { UserConfigType } from '../../lib/http/data-fetcher/fetchers/form-config-fetcher';
+import { GROUP_NAMES, TAB_NAMES } from '../../lib/utils/constants';
+import { buildChildrenGuides, buildCustomGuides, buildGuides, buildGuidesMap, buildNewGuideName, getFieldsToSave, updateTabInFieldsFromGroupList, } from './FormConfigHelper';
 export class SnkFormConfig {
   constructor() {
     this.guidesMap = new Map();
@@ -22,6 +22,7 @@ export class SnkFormConfig {
     this.configManager = undefined;
     this.ignoreReadOnlyFormFields = undefined;
     this.messagesBuilder = undefined;
+    this.customGuidesConfig = [];
   }
   handleFieldConfigChanged() {
     this.hasChanges = true;
@@ -41,6 +42,10 @@ export class SnkFormConfig {
       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));
   }
@@ -66,6 +71,11 @@ export class SnkFormConfig {
     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:
@@ -138,9 +148,12 @@ export class SnkFormConfig {
     });
   }
   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);
@@ -368,6 +381,30 @@ export class SnkFormConfig {
           "tags": [],
           "text": "Respons\u00E1vel por flexibilizar e padronizar o uso de mensagens nos blocos de constru\u00E7\u00E3o."
         }
+      },
+      "customGuidesConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<CustomGuideItem>",
+          "resolved": "CustomGuideItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "CustomGuideItem": {
+              "location": "import",
+              "path": "../snk-crud/subcomponents/snk-guides-viewer"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Informa\u00E7\u00F5es das guias personalizadas."
+        },
+        "defaultValue": "[]"
       }
     };
   }

package/dist/collection/components/snk-taskbar/snk-taskbar.js

@@ -1,8 +1,8 @@
-import { Action as DUAction, ApplicationContext, ElementIDUtils, LockManager, LockManagerOperation, OverflowDirection, OVERFLOWED_CLASS_NAME, OverflowWatcher, SilentException, StringUtils, } from '@sankhyalabs/core';
+import { ApplicationContext, Action as DUAction, ElementIDUtils, LockManager, LockManagerOperation, OverflowDirection, OVERFLOWED_CLASS_NAME, OverflowWatcher, SilentException, StringUtils, } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
+import { PresentationMode } from '../../lib/@types';
 import { AuthorizationConfig } from '../snk-configurator/AuthorizationConfig';
 import { AuthorizationElements, buildCustomButton, buildElem, TaskbarElement, VisibleWhenForbidden, } from './elements/taskbar-elements';
-import { PresentationMode } from '../../lib/@types';
 export class SnkTaskbar {
   constructor() {
     this.TASKBAR_ITEM_ID_PREFIX = 'TASKBAR_ITEM_';
@@ -11,6 +11,7 @@ export class SnkTaskbar {
     this.TASKBAR_CUSTOM_ELEMENTS = 'taskbar-custom-elements-container';
     this.TASKBAR_ADDITIONAL_SLOT_CONTAINER_CLASS_NAME = 'taskbar-additional-slot-container';
     this.TASKBAR_ADDITIONAL_SLOT = 'taskbar-additional-slot-container';
+    this._dataUnitInitialized = false;
     this._titleKeyByElement = {
       [TaskbarElement.UPDATE_MULTIPLE]: "snkTaskbar.titleUpdateMultiple",
       [TaskbarElement.UPDATE]: "snkTaskbar.titleUpdate",
@@ -109,6 +110,17 @@ export class SnkTaskbar {
       this.taskbarSaveUnlocker.emit();
     }
   }
+  observeDataUnit(newValue) {
+    this.initializeDataUnit(newValue);
+  }
+  initializeDataUnit(dataUnit) {
+    if (!!dataUnit && !this._dataUnitInitialized) {
+      this._dataUnitInitialized = true;
+      const dataInfo = { dataUnit: this.dataUnit };
+      ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+      this.dataUnit.subscribe(this.onSaveEvent);
+    }
+  }
   // Internal methods
   elementsFromString(strButtons) {
     const elements = [];
@@ -154,45 +166,46 @@ export class SnkTaskbar {
   }
   elementClick(elem) {
     LockManager.whenResolve(this._element, LockManagerOperation.TASKBAR_CLICK).then(() => {
-      if (this.dataUnit) {
-        switch (elem) {
-          case TaskbarElement.PREVIOUS:
-            this.dataUnit.previousRecord();
-            break;
-          case TaskbarElement.NEXT:
-            this.dataUnit.nextRecord();
-            break;
-          case TaskbarElement.REFRESH:
-            this.dataUnit.loadData();
-            break;
-          case TaskbarElement.CLONE:
-            this.dataUnit.copySelected();
-            break;
-          case TaskbarElement.REMOVE:
-            this.dataUnit.removeSelectedRecords();
-            break;
-          case TaskbarElement.INSERT:
-            this.dataUnit.addRecord();
-            break;
-          case TaskbarElement.CANCEL:
-            this.dataUnit.cancelEdition();
-            break;
-          case TaskbarElement.SAVE:
-            if (!this._isWaitingForSave) {
-              this._isWaitingForSave = true;
-              this.dataUnit.saveData().catch((err) => {
-                if (err instanceof SilentException) {
-                  return;
-                }
-                else {
-                  throw err;
-                }
-              }).finally(() => {
-                this._isWaitingForSave = false;
-              });
-            }
-            break;
-        }
+      if (!this.dataUnit) {
+        return;
+      }
+      switch (elem) {
+        case TaskbarElement.PREVIOUS:
+          this.dataUnit.previousRecord();
+          break;
+        case TaskbarElement.NEXT:
+          this.dataUnit.nextRecord();
+          break;
+        case TaskbarElement.REFRESH:
+          this.dataUnit.loadData();
+          break;
+        case TaskbarElement.CLONE:
+          this.dataUnit.copySelected();
+          break;
+        case TaskbarElement.REMOVE:
+          this.dataUnit.removeSelectedRecords();
+          break;
+        case TaskbarElement.INSERT:
+          this.dataUnit.addRecord();
+          break;
+        case TaskbarElement.CANCEL:
+          this.dataUnit.cancelEdition();
+          break;
+        case TaskbarElement.SAVE:
+          if (!this._isWaitingForSave) {
+            this._isWaitingForSave = true;
+            this.dataUnit.saveData().catch((err) => {
+              if (err instanceof SilentException) {
+                return;
+              }
+              else {
+                throw err;
+              }
+            }).finally(() => {
+              this._isWaitingForSave = false;
+            });
+          }
+          break;
       }
       if (this.isEnabled(elem))
         this.actionClick.emit(elem);
@@ -391,10 +404,8 @@ export class SnkTaskbar {
     };
   }
   componentDidLoad() {
-    const dataInfo = { dataUnit: this.dataUnit };
-    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    this.initializeDataUnit(this.dataUnit);
     this.handleOverFlowStrategy();
-    this.dataUnit.subscribe(this.onSaveEvent);
   }
   componentDidRender() {
     this.appendCustomElementsInTaskbar();
@@ -914,6 +925,9 @@ export class SnkTaskbar {
       }, {
         "propName": "_isWaitingForSave",
         "methodName": "observeIsWaitingForSave"
+      }, {
+        "propName": "dataUnit",
+        "methodName": "observeDataUnit"
       }];
   }
   static get listeners() {

package/dist/collection/lib/message/resources/en-us/snk-form.msg.js

@@ -39,6 +39,7 @@ export const snkFormConfigMessages = {
     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",
@@ -66,6 +67,10 @@ export const snkFormConfigMessages = {
     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.",
@@ -96,6 +101,7 @@ export const snkFormConfigMessages = {
     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",

package/dist/collection/lib/message/resources/es-es/snk-form.msg.js

@@ -39,6 +39,7 @@ export 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",
@@ -66,6 +67,10 @@ export 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.",
@@ -96,6 +101,7 @@ export 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/collection/lib/message/resources/pt-br/snk-form.msg.js

@@ -39,6 +39,7 @@ export const snkFormConfigMessages = {
     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",
@@ -66,6 +67,10 @@ export const snkFormConfigMessages = {
     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.",
@@ -96,10 +101,11 @@ export const snkFormConfigMessages = {
     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",
     }
   }
 };