@sankhyalabs/sankhyablocks 10.1.0-dev.2 → 10.1.0-dev.21

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

@@ -16,6 +16,38 @@ export class SnkCrud {
     this._viewHistory = [];
     this._customEditors = new Map();
     this._customRenders = new Map();
+    this.loadEntitySuggestions = async (argument) => {
+      var _a;
+      const value = (_a = argument === null || argument === void 0 ? void 0 : argument.argument) !== null && _a !== void 0 ? _a : '';
+      const mode = (argument === null || argument === void 0 ? void 0 : argument.mode) || "PREDICTIVE";
+      if (!value || value.trim().length === 0) {
+        return [];
+      }
+      try {
+        this._showMoreOnSearch = false;
+        const entityName = this._snkDataUnit.entityName;
+        if (mode === "PREDICTIVE") {
+          return await this.handlePredictiveSearch(value, entityName);
+        }
+        return await this._application.executePreparedSearch(mode, value, this.buildSearchOptions(entityName));
+      }
+      catch (error) {
+        console.error('Erro ao carregar sugestões de entidades:', error);
+        return [];
+      }
+    };
+    this.searchEntitySelect = async (item) => {
+      if (!this._entityPKField || !item) {
+        return;
+      }
+      try {
+        const pk = [{ name: this._entityPKField, value: item.value }];
+        await this.refreshDataUnitByPk(pk);
+      }
+      catch (error) {
+        console.error('Erro ao selecionar entidade:', error);
+      }
+    };
     this.dataUnitInterceptor = {
       interceptAction: (action) => {
         if (action.type === DUAction.DATA_SAVED) {
@@ -32,6 +64,8 @@ export class SnkCrud {
     this._resourceID = undefined;
     this.customContainerId = `SNK-CRUD-CUSTOM-CONTAINER-${StringUtils.generateUUID()}`;
     this.numberingConfig = undefined;
+    this._showMoreOnSearch = false;
+    this._entityPKField = undefined;
     this.enableLockManagerLoadingComp = false;
     this.enableLockManagerTaskbarClick = false;
     this.configName = undefined;
@@ -60,6 +94,8 @@ export class SnkCrud {
     this.layoutFormConfig = true;
     this.multipleEditionEnabled = true;
     this.paginationCounterMode = 'auto';
+    this.customGuidesConfig = [];
+    this.showEntitySearch = true;
     this.disableNumberingConfig = false;
   }
   /**
@@ -356,6 +392,49 @@ export class SnkCrud {
     var _a;
     (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
   }
+  async handlePredictiveSearch(argument, entityName) {
+    var _a, _b;
+    const response = await this._application.executePreparedSearchWithFullResponse(argument, this.buildSearchOptions(entityName, 5));
+    this._showMoreOnSearch = (_a = response === null || response === void 0 ? void 0 : response.hasMore) !== null && _a !== void 0 ? _a : false;
+    this._entityPKField = response === null || response === void 0 ? void 0 : response.pkField;
+    return (_b = response === null || response === void 0 ? void 0 : response.data) !== null && _b !== void 0 ? _b : [];
+  }
+  async refreshDataUnitByPk(pks) {
+    try {
+      const pkField = pks[0].name;
+      const pkValue = pks[0].value;
+      // Criar filtro para a busca específica
+      const quickFilter = {
+        term: '',
+        filter: {
+          name: '',
+          params: [],
+          expression: `(${pkField} = ${pkValue})`
+        }
+      };
+      // Carregar dados com o filtro aplicado diretamente
+      await this._dataUnit.loadData(quickFilter);
+      // Navegar para o formulário se houver apenas um registro
+      if (this._dataUnit.records.length === 1) {
+        this._dataUnit.selectFirst();
+        this.gridToForm(true);
+      }
+    }
+    catch (error) {
+      console.error('Erro ao atualizar dataset:', error);
+    }
+  }
+  buildSearchOptions(entityName, limit) {
+    return {
+      entity: entityName,
+      entityDescription: entityName,
+      executeOnOpen: true,
+      searchOptions: {
+        localEntityName: entityName,
+        limit,
+      }
+    };
+  }
   async toggleView() {
     const currentView = await this._viewStack.getSelectedIndex();
     this.setViewMode(VIEW_MODE.GRID === currentView ? VIEW_MODE.FORM : VIEW_MODE.GRID);
@@ -462,12 +541,23 @@ export class SnkCrud {
     }
     this.configuratorCancel.emit();
   }
+  renderCustomGuideSlots() {
+    if (!this.customGuidesConfig)
+      return;
+    return this.customGuidesConfig.map(g => h("slot", { name: g.id }));
+  }
+  renderDynamicSearch(slotName) {
+    var _a;
+    if (!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 })));
+  }
   render() {
     if (this._resourceID == undefined) {
       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" }))), 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" }), 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), 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.renderCustomGuideSlots(), 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" }))));
   }
   static get is() { return "snk-crud"; }
   static get encapsulation() { return "scoped"; }
@@ -1004,6 +1094,48 @@ export class SnkCrud {
         "reflect": false,
         "defaultValue": "'auto'"
       },
+      "customGuidesConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<CustomGuideItem>",
+          "resolved": "CustomGuideItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "CustomGuideItem": {
+              "location": "import",
+              "path": "./subcomponents/snk-guides-viewer"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Fornece as informa\u00E7\u00F5es das guias personalizadas."
+        },
+        "defaultValue": "[]"
+      },
+      "showEntitySearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o campo de busca de entidades ser\u00E1 exibido na barra superior."
+        },
+        "attribute": "show-entity-search",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "disableNumberingConfig": {
         "type": "boolean",
         "mutable": false,
@@ -1033,11 +1165,28 @@ export class SnkCrud {
       "_canEdit": {},
       "_resourceID": {},
       "customContainerId": {},
-      "numberingConfig": {}
+      "numberingConfig": {},
+      "_showMoreOnSearch": {},
+      "_entityPKField": {}
     };
   }
   static get events() {
     return [{
+        "method": "snkShowGuide",
+        "name": "snkShowGuide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido pelo guides-viewer sempre que houver mudan\u00E7a de guia."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
         "method": "actionClick",
         "name": "actionClick",
         "bubbles": true,

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

@@ -30,6 +30,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 +45,13 @@ export class SnkGuidesViewer {
   observeDataUnit() {
     this.loadGuides(true);
   }
+  async observeFormConfigManager(value) {
+    const showFormConfig = !!value;
+    await this._viewStack.show(showFormConfig ?
+      GUIDES_VIEWER_VIEW_MODE.CONFIG :
+      GUIDES_VIEWER_VIEW_MODE.GUIDES);
+    this.formConfigVisibilityChanged.emit(showFormConfig);
+  }
   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__'];
@@ -92,7 +100,8 @@ export class SnkGuidesViewer {
    * Atribui o foco para o componente.
    */
   async setFocus() {
-    this._container.focus();
+    var _a;
+    (_a = this._container) === null || _a === void 0 ? void 0 : _a.focus();
   }
   /**
    * Recarrega os guias baseada nos metadados atuais.
@@ -142,7 +151,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);
@@ -153,6 +162,13 @@ export class SnkGuidesViewer {
         item.tooltip = this.getMessage("snkCrud.detail.tooltip.needSingleSelection");
         item.disabled = true;
       }
+      if (sheet.isCustom && sheet.ctxProps) {
+        Object.entries(sheet.ctxProps).forEach(([key, value]) => {
+          if (value !== undefined) {
+            item[key] = value;
+          }
+        });
+      }
       guides.push(item);
     });
     this._guides = guides;
@@ -288,38 +304,52 @@ export class SnkGuidesViewer {
     return `${this.entityPath}/${entityName}`;
   }
   getContent() {
-    var _a, _b, _c, _d, _e;
     if (!this.selectedGuide) {
+      this.snkShowGuide.emit(undefined);
       return;
     }
     const guideId = this.selectedGuide.id;
-    let content;
+    this.snkShowGuide.emit(guideId);
+    if (this.isCustomGuide(guideId)) {
+      return h("slot", { name: 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);
+  }
+  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);
   }
   onBreadcrumbClickHandler(item) {
     if ((item === null || item === void 0 ? void 0 : item.id) == undefined) {
@@ -457,7 +487,7 @@ export class SnkGuidesViewer {
   }
   buildTaskBar() {
     var _a;
-    return h("div", { class: `snk-guides-viewer__header-taskbar ${this.presentationMode != PresentationMode.SECONDARY ? 'ez-align--right' : 'ez-padding-bottom--medium'}` }, h("snk-taskbar", { key: "guideViewerTaskbar", "data-element-id": "guideViewer", configName: this.configName, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.getActionsList(), actionsSettingsList: this.getSettingsListForm(), messagesBuilder: this.messagesBuilder, presentationMode: this.presentationMode, primaryButton: ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? TaskbarElement.SAVE : TaskbarElement.INSERT, "data-taskbar-owner": "master", dataUnit: this.dataUnit, resourceID: this.resourceID, customSlotId: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS", alignRigth: true }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" })));
+    return h("div", { class: `snk-guides-viewer__header-taskbar ${this.presentationMode != PresentationMode.SECONDARY ? 'ez-align--right' : 'ez-padding-bottom--medium'}` }, h("snk-taskbar", { key: "guideViewerTaskbar", "data-element-id": "guideViewer", configName: this.configName, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.getActionsList(), actionsSettingsList: this.getSettingsListForm(), messagesBuilder: this.messagesBuilder, presentationMode: this.presentationMode, primaryButton: ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? TaskbarElement.SAVE : TaskbarElement.INSERT, "data-taskbar-owner": "master", dataUnit: this.dataUnit, resourceID: this.resourceID, customSlotId: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS", additionalSlotId: "GUIDES_VIEWER_DYNAMIC_SEARCH", alignRigth: true }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "GUIDES_VIEWER_DYNAMIC_SEARCH" })));
   }
   async dataUnitActionHandler(action) {
     var _a;
@@ -531,6 +561,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();
@@ -547,17 +580,14 @@ export class SnkGuidesViewer {
       await this._mainForm.showSearchField();
     }, { description: this.getMessage("snkSimpleCrud.findFields"), element: this._element });
   }
-  render() {
-    var _a, _b;
+  renderFormConfig() {
     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;
-    }
-    this.loadTaskbarProcessor();
-    const showGuides = this._guides && (this._guides.length > 1);
-    return (h("section", { class: "snk-guides-viewer", ref: ref => this._container = ref, tabindex: -1 }, h("div", { class: "ez-row snk-guides-viewer__header" }, h("div", { class: "snk-guides-viewer__header-breadcrumb ez-flex--align-items-center ez-flex-item--align-center ez-padding-left--large", key: "header" }, h("ez-button", { onClick: () => this.exitViewer(), title: this.getMessage("snkCrud.goBackTitle"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small" }), h("div", { class: "ez-flex ez-flex--column ez-flex-item--auto" }, h("h1", { class: "ez-title ez-title--primary ez-title--xlarge", title: this.getTitleTooltip() }, this.getTitle()), ((_a = this._breadcrumbItems) === null || _a === void 0 ? void 0 : _a.length) > 1 &&
+  }
+  renderGuidesNavigator(showGuides) {
+    var _a, _b;
+    return (h("section", { class: "snk-guides-viewer", ref: ref => this._container = ref, tabIndex: -1 }, h("div", { class: "ez-row snk-guides-viewer__header" }, h("div", { class: "snk-guides-viewer__header-breadcrumb ez-flex--align-items-center ez-flex-item--align-center ez-padding-left--large", key: "header" }, h("ez-button", { onClick: () => this.exitViewer(), title: this.getMessage("snkCrud.goBackTitle"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small" }), h("div", { class: "ez-flex ez-flex--column ez-flex-item--auto" }, h("h1", { class: "ez-title ez-title--primary ez-title--xlarge", title: this.getTitleTooltip() }, this.getTitle()), ((_a = this._breadcrumbItems) === null || _a === void 0 ? void 0 : _a.length) > 1 &&
       h("div", { class: "ez-margin-top--extra-small" }, h("ez-breadcrumb", Object.assign({ items: this._breadcrumbItems, onSelectedItem: (evt) => this.onBreadcrumbClickHandler(evt === null || evt === void 0 ? void 0 : evt.detail) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("breadcrumb")}` }))))), this.presentationMode != PresentationMode.SECONDARY && this.buildTaskBar()), h("div", { class: "snk-guides-viewer__container" }, showGuides ?
       h("ez-guide-navigator", { ref: (ref) => this._guideNavigator = ref, class: "snk-guides-viewer__guide-navigator", items: this._guides, selectedId: this.selectedGuide ? this.selectedGuide.id : undefined, onEzSelectionChange: evt => this.updateSelectedGuideHandler(evt.detail) })
       :
@@ -573,6 +603,14 @@ export class SnkGuidesViewer {
       fieldsProps: this._fieldsProps
     }), this.getContent())), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this.getConfigViewMode(), onConfigSelected: (evt) => this.changeConfigViewMode(evt.detail), messagesBuilder: this.messagesBuilder, onOpenConfig: (evt) => this.openConfig(evt.detail), resourceID: this.resourceID })));
   }
+  render() {
+    if (!this.dataUnit || !this._configManager.isLoaded) {
+      return;
+    }
+    this.loadTaskbarProcessor();
+    const showGuides = this._guides && (this._guides.length > 1);
+    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "guides-viewer-stack" }, h("stack-item", null, this.renderGuidesNavigator(showGuides)), h("stack-item", null, this.renderFormConfig())));
+  }
   static get is() { return "snk-guides-viewer"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
@@ -726,7 +764,7 @@ export class SnkGuidesViewer {
       },
       "selectedGuide": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "IGuideItem",
           "resolved": "IGuideItem",
@@ -924,6 +962,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": "[]"
       }
     };
   }
@@ -943,6 +1004,21 @@ export class SnkGuidesViewer {
   }
   static get events() {
     return [{
+        "method": "snkShowGuide",
+        "name": "snkShowGuide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando a uma gua \u00E9 exibida no formul\u00E1rio."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
         "method": "snkMasterFormConfigChange",
         "name": "snkMasterFormConfigChange",
         "bubbles": true,
@@ -962,6 +1038,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 +1250,9 @@ export class SnkGuidesViewer {
     return [{
         "propName": "dataUnit",
         "methodName": "observeDataUnit"
+      }, {
+        "propName": "_formEditorConfigManager",
+        "methodName": "observeFormConfigManager"
       }, {
         "propName": "dataState",
         "methodName": "observeDataState"
@@ -1189,3 +1283,8 @@ var TASKBAR_ID;
   TASKBAR_ID["MUTIPLE_EDITION"] = "snkGuideViewer.multiple_edition";
   TASKBAR_ID["REGULAR"] = "snkGuideViewer.regular";
 })(TASKBAR_ID || (TASKBAR_ID = {}));
+var GUIDES_VIEWER_VIEW_MODE;
+(function (GUIDES_VIEWER_VIEW_MODE) {
+  GUIDES_VIEWER_VIEW_MODE[GUIDES_VIEWER_VIEW_MODE["GUIDES"] = 0] = "GUIDES";
+  GUIDES_VIEWER_VIEW_MODE[GUIDES_VIEWER_VIEW_MODE["CONFIG"] = 1] = "CONFIG";
+})(GUIDES_VIEWER_VIEW_MODE || (GUIDES_VIEWER_VIEW_MODE = {}));

package/dist/collection/components/snk-custom-slot-guide/snk-custom-slot-guide.css

@@ -0,0 +1,3 @@
+:host{
+  display: none;
+}

package/dist/collection/components/snk-custom-slot-guide/snk-custom-slot-guide.js

@@ -0,0 +1,95 @@
+import { h, Host } from '@stencil/core';
+export class SnkCustomSlotGuide {
+  constructor() {
+    this.slotName = 'CUSTOM_SLOT_GUIDE';
+  }
+  onGuideChange(evt) {
+    const guideName = evt.detail;
+    if (guideName === this.slotName) {
+      this._element.style.setProperty('display', 'block');
+    }
+    else {
+      this._element.style.setProperty('display', 'none');
+    }
+  }
+  onFormConfigVisibilityChange(evt) {
+    const isFormConfigVisible = evt.detail;
+    if (isFormConfigVisible) {
+      this._element.style.setProperty('display', 'none');
+    }
+  }
+  componentDidLoad() {
+    this.snkCustomSlotGuideLoaded.emit(this.slotName);
+  }
+  render() {
+    return (h(Host, { slot: this.slotName, id: this.slotName, class: "custom-slot-guide-container" }, h("slot", null)));
+  }
+  static get is() { return "snk-custom-slot-guide"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-custom-slot-guide.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-custom-slot-guide.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "slotName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome do slot onde os elementos customizados dever\u00E3o aparecer."
+        },
+        "attribute": "slot-name",
+        "reflect": false,
+        "defaultValue": "'CUSTOM_SLOT_GUIDE'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "snkCustomSlotGuideLoaded",
+        "name": "snkCustomSlotGuideLoaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando elemento \u00E9 carregado na tela."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+  static get listeners() {
+    return [{
+        "name": "snkShowGuide",
+        "method": "onGuideChange",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "formConfigVisibilityChanged",
+        "method": "onFormConfigVisibilityChange",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/snk-data-unit/snk-data-unit.js

@@ -16,6 +16,7 @@ export class SnkDataUnit {
     this._metadataByRow = new Map();
     this._rowMetadataCache = new Map();
     this._formFieldsConfig = [];
+    this._internalDataStateChange = false;
     this.REGEX_DATAUNIT_NAME = /dd:\/\/(.+?)\//;
     this._dataUnitObserver = async (action) => {
       const duState = await this.buildDataState(action.type);
@@ -272,11 +273,17 @@ export class SnkDataUnit {
     if (this.isAllowed("UPDATE") || this.dataUnit.isNewRecord(recordId)) {
       return action;
     }
+    if (this._internalDataStateChange) {
+      this._internalDataStateChange = false;
+      return;
+    }
     if (this._openedAlert) {
+      this._internalDataStateChange = true;
       await this.dataUnit.cancelEdition();
       return;
     }
     this._openedAlert = true;
+    this._internalDataStateChange = true;
     await this.dataUnit.cancelEdition();
     await ApplicationUtils.alert(this.getMessage("snkDataUnit.forbidden"), this.getMessage("snkDataUnit.forbiddenUpdate"));
     this._openedAlert = false;
@@ -479,6 +486,8 @@ export class SnkDataUnit {
       return records;
     const parentSelectedRecord = parentDataUnit.getSelectedRecord();
     const selfInfo = parentDataUnit === null || parentDataUnit === void 0 ? void 0 : parentDataUnit.getChildInfo(this.getCleanDataUnitName());
+    if (!selfInfo)
+      return records;
     const { links } = selfInfo;
     if (!links || links.length === 0)
       return records;