@sankhyalabs/sankhyablocks 8.2.0-dev.5 → 8.2.0-dev.6

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

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
+import { h, Host } from '@stencil/core';
+import { ApplicationContext, ElementIDUtils, StringUtils } from '@sankhyalabs/core';
 import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
 import { PresentationMode } from '../../lib';
 import { VIEW_MODE } from '../../lib/utils/constants';
@@ -29,6 +29,7 @@ export class SnkCrud {
     this.presentationMode = PresentationMode.PRIMARY;
     this.messagesBuilder = undefined;
     this.useEnterLikeTab = false;
+    this.customContainerId = `SNK-CRUD-CUSTOM-CONTAINER-${StringUtils.generateUUID()}`;
   }
   /**
    * Usado para alternar a visão entre GRID e FORM externamente.
@@ -170,7 +171,7 @@ export class SnkCrud {
       return;
     }
     this._snkDataUnit.ignoreSaveMessage = this._currentViewMode === VIEW_MODE.GRID;
-    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "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, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, canEdit: this._canEdit, resourceID: this._resourceID }, 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, resourceID: this._resourceID }, h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, 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, 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 }, h("div", { slot: "SnkConfigContainerSlot" }, h("slot", { name: "SnkConfigContainerSlot" })))));
+    return (h(Host, null, h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "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, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, canEdit: this._canEdit, resourceID: this._resourceID }, 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, resourceID: this._resourceID, detailTaskbarCustomContainerId: this.customContainerId }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, 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, 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 }, h("div", { slot: "SnkConfigContainerSlot" }, h("slot", { name: "SnkConfigContainerSlot" })))), h("div", { id: `${this.customContainerId}` }, 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"; }
@@ -416,7 +417,8 @@ export class SnkCrud {
       "attachmentRegisterKey": {},
       "_currentViewMode": {},
       "_canEdit": {},
-      "_resourceID": {}
+      "_resourceID": {},
+      "customContainerId": {}
     };
   }
   static get events() {

package/dist/collection/components/snk-crud/subcomponents/snk-detail-view/snk-detail-view.js

@@ -24,6 +24,7 @@ export class SnkDetailView {
     this.messagesBuilder = undefined;
     this.branchGuide = undefined;
     this.canEdit = true;
+    this.taskbarCustomContainerId = undefined;
   }
   observerDataState(newValue, oldValue) {
     const openInsertion = !(oldValue === null || oldValue === void 0 ? void 0 : oldValue.insertionMode) && (newValue === null || newValue === void 0 ? void 0 : newValue.insertionMode);
@@ -193,7 +194,7 @@ export class SnkDetailView {
   render() {
     this.updateLabel();
     //const cardConfig: IFormCardConfig = this._cardsState?.get(this.selectedForm);
-    return (h(Host, null, h("snk-data-unit", { ref: (el) => this._snkDataUnit = el, dataUnitName: `${this.dataUnitName}`, onDataUnitReady: evt => this.dataUnitReadyHandler(evt), entityName: this.entityName, onDataStateChange: this.handleDataStateChange.bind(this), ignoreSaveMessage: this._currentView === VIEW_MODE.GRID, messagesBuilder: this.messagesBuilder, configName: this._configName }, h("ez-view-stack", { ref: (ref) => this.updateViewStack(ref) }, h("stack-item", null, h("div", { class: "ez-box ez-box--shadow grid-container" }, h("div", { class: "ez-flex ez-title--primary ez-size-width--full ez-padding--large detail-header" }, h("div", { class: "ez-flex ez-text ez-text--bold ez-flex--justify-start ez-flex--align-items-center" }, this._levelPath ? h("span", { class: "level-path" }, this._levelPath + " /") : undefined, this.label)), h("snk-grid", { class: "ez-size-width--full ez-size-height--full", ref: (ref) => this._snkGrid = ref, configName: this._configName, messagesBuilder: this.messagesBuilder, onGridDoubleClick: () => this.emitSwitchEvent(VIEW_MODE.FORM), onActionClick: (evt) => this.executeActionHandler(evt), presentationMode: PresentationMode.SECONDARY, canEdit: this.canEdit, isDetail: true }))), h("stack-item", null, h("snk-form-view", { ref: (ref) => this._snkFormView = ref, canExpand: false, canFix: false, name: this.selectedForm, formMetadata: this._formMetadata, dataUnit: this.dataUnit, fields: this.getFormFields(), label: this.label, levelPath: this._levelPath, onFormItemsReady: ({ detail: formItems }) => this.formItemsReady.emit(formItems) }, h("snk-taskbar", { key: "guideViewerTaskbar", class: "form-taskbar", "data-element-id": "guideViewer", configName: this._configName, messagesBuilder: this.messagesBuilder, disabledButtons: this._disabledButtons, buttons: "INSERT,PREVIOUS,NEXT,DIVIDER,CLONE,REMOVE,MORE_OPTIONS,DIVIDER,GRID_MODE,CONFIGURATOR", primaryButton: "INSERT", presentationMode: PresentationMode.SECONDARY, onActionClick: evt => this.executeActionHandler(evt), dataUnit: this.dataUnit, resourceID: this.resourceID }))), h("stack-item", null, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this.entityName, onBack: this.handleAttachBack.bind(this) }))))));
+    return (h(Host, null, h("snk-data-unit", { ref: (el) => this._snkDataUnit = el, dataUnitName: `${this.dataUnitName}`, onDataUnitReady: evt => this.dataUnitReadyHandler(evt), entityName: this.entityName, onDataStateChange: this.handleDataStateChange.bind(this), ignoreSaveMessage: this._currentView === VIEW_MODE.GRID, messagesBuilder: this.messagesBuilder, configName: this._configName }, h("ez-view-stack", { ref: (ref) => this.updateViewStack(ref) }, h("stack-item", null, h("div", { class: "ez-box ez-box--shadow grid-container" }, h("div", { class: "ez-flex ez-title--primary ez-size-width--full ez-padding--large detail-header" }, h("div", { class: "ez-flex ez-text ez-text--bold ez-flex--justify-start ez-flex--align-items-center" }, this._levelPath ? h("span", { class: "level-path" }, this._levelPath + " /") : undefined, this.label)), h("snk-grid", { class: "ez-size-width--full ez-size-height--full", ref: (ref) => this._snkGrid = ref, configName: this._configName, messagesBuilder: this.messagesBuilder, onGridDoubleClick: () => this.emitSwitchEvent(VIEW_MODE.FORM), onActionClick: (evt) => this.executeActionHandler(evt), presentationMode: PresentationMode.SECONDARY, canEdit: this.canEdit, isDetail: true, taskbarCustomContainerId: this.taskbarCustomContainerId, gridHeaderCustomSlotId: "DETAIL_GRID_HEADER_CUSTOM_ELEMENTS", topTaskbarCustomSlotId: "DETAIL_GRID_TASKBAR_CUSTOM_ELEMENTS" }))), h("stack-item", null, h("snk-form-view", { ref: (ref) => this._snkFormView = ref, canExpand: false, canFix: false, name: this.selectedForm, formMetadata: this._formMetadata, dataUnit: this.dataUnit, fields: this.getFormFields(), label: this.label, levelPath: this._levelPath, onFormItemsReady: ({ detail: formItems }) => this.formItemsReady.emit(formItems) }, h("snk-taskbar", { key: "guideViewerTaskbar", class: "form-taskbar", "data-element-id": "guideViewer", configName: this._configName, messagesBuilder: this.messagesBuilder, disabledButtons: this._disabledButtons, buttons: "INSERT,PREVIOUS,NEXT,DIVIDER,CLONE,REMOVE,MORE_OPTIONS,DIVIDER,GRID_MODE,CONFIGURATOR", primaryButton: "INSERT", presentationMode: PresentationMode.SECONDARY, onActionClick: evt => this.executeActionHandler(evt), dataUnit: this.dataUnit, resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: "DETAIL_TASKBAR_CUSTOM_ELEMENTS" }, h("slot", { name: "DETAIL_TASKBAR_CUSTOM_ELEMENTS" })))), h("stack-item", null, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this.entityName, onBack: this.handleAttachBack.bind(this) }))))));
   }
   static get is() { return "snk-detail-view"; }
   static get encapsulation() { return "scoped"; }
@@ -434,6 +435,23 @@ export class SnkDetailView {
         "attribute": "can-edit",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "taskbarCustomContainerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o identificador do container de elementos customizados da Taskbar."
+        },
+        "attribute": "taskbar-custom-container-id",
+        "reflect": false
       }
     };
   }

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

@@ -24,6 +24,7 @@ export class SnkGuidesViewer {
     this.canEdit = true;
     this.presentationMode = undefined;
     this.resourceID = undefined;
+    this.detailTaskbarCustomContainerId = undefined;
     this._breadcrumbItems = [];
     this._guides = undefined;
     this._formEditorConfigManager = undefined;
@@ -225,7 +226,7 @@ export class SnkGuidesViewer {
       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 }));
+      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 }));
     }
     else {
       const cardId = this.selectedGuide.id;
@@ -296,7 +297,7 @@ export class SnkGuidesViewer {
   }
   buildTaskBar() {
     var _a;
-    return h("div", { class: `ez-col ez-flex-item--align-center ez-col--sd-6 ez-col--tb-6 ${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.actionsList, messagesBuilder: this.messagesBuilder, presentationMode: this.presentationMode, primaryButton: ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", "data-taskbar-owner": "master", dataUnit: this.dataUnit, resourceID: this.resourceID }));
+    return h("div", { class: `ez-col ez-flex-item--align-center ez-col--sd-6 ez-col--tb-6 ${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.actionsList, messagesBuilder: this.messagesBuilder, presentationMode: this.presentationMode, primaryButton: ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", "data-taskbar-owner": "master", dataUnit: this.dataUnit, resourceID: this.resourceID, customSlotId: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" })));
   }
   render() {
     var _a, _b;
@@ -584,6 +585,23 @@ export class SnkGuidesViewer {
         },
         "attribute": "resource-i-d",
         "reflect": false
+      },
+      "detailTaskbarCustomContainerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o identificador do container de elementos customizados da Taskbar da aba de detalhes."
+        },
+        "attribute": "detail-taskbar-custom-container-id",
+        "reflect": false
       }
     };
   }

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

@@ -40,6 +40,9 @@ export class SnkGrid {
     this.useEnterLikeTab = false;
     this.recordsValidator = undefined;
     this.canEdit = true;
+    this.taskbarCustomContainerId = undefined;
+    this.gridHeaderCustomSlotId = 'GRID_HEADER_CUSTOM_ELEMENTS';
+    this.topTaskbarCustomSlotId = 'GRID_TASKBAR_CUSTOM_ELEMENTS';
   }
   /**
    * Exibe a janela de configurações da grade.
@@ -306,7 +309,7 @@ export class SnkGrid {
       return undefined;
     }
     return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-margin-bottom--medium" }, h("snk-filter-bar", { ref: (ref) => this._snkFilterBar = ref, dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName, messagesBuilder: this.messagesBuilder, resourceID: this.resourceID }), ((_b = (_a = this._snkFilterBar) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
-      h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, messagesBuilder: this.messagesBuilder, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: this.getPrimaryButton(), resourceID: this.resourceID })), h("ez-grid", { ref: ref => this._grid = ref, class: (this.presentationMode === PresentationMode.SECONDARY ? "snk-grid-container__without-shadow " : "") + "snk-grid__table", "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.gridConfigChangeHandler(evt); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, onComponentReady: () => this.onEzGridReady(), columnfilterDataSource: this.columnFilterDataSource, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, recordsValidator: this.recordsValidator, canEdit: this.canEdit }, h("snk-taskbar", { dataUnit: this._dataUnit, configName: this.configName, messagesBuilder: this.messagesBuilder, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList, resourceID: this.resourceID })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), application: this._application, selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resourceID }))));
+      h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, messagesBuilder: this.messagesBuilder, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: this.getPrimaryButton(), resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.topTaskbarCustomSlotId }, h("slot", { name: this.topTaskbarCustomSlotId }))), h("ez-grid", { ref: ref => this._grid = ref, class: (this.presentationMode === PresentationMode.SECONDARY ? "snk-grid-container__without-shadow " : "") + "snk-grid__table", "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.gridConfigChangeHandler(evt); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, onComponentReady: () => this.onEzGridReady(), columnfilterDataSource: this.columnFilterDataSource, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, recordsValidator: this.recordsValidator, canEdit: this.canEdit }, h("snk-taskbar", { dataUnit: this._dataUnit, configName: this.configName, messagesBuilder: this.messagesBuilder, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList, resourceID: this.resourceID, customContainerId: this.taskbarCustomContainerId, customSlotId: this.gridHeaderCustomSlotId }, h("slot", { name: this.gridHeaderCustomSlotId }))), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), application: this._application, selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resourceID }))));
   }
   static get is() { return "snk-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -595,6 +598,59 @@ export class SnkGrid {
         "attribute": "can-edit",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "taskbarCustomContainerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o identificador do container de elementos customizados da Taskbar."
+        },
+        "attribute": "taskbar-custom-container-id",
+        "reflect": false
+      },
+      "gridHeaderCustomSlotId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome do slot de elementos customizados da Taskbar do cabe\u00E7alho da grade."
+        },
+        "attribute": "grid-header-custom-slot-id",
+        "reflect": false,
+        "defaultValue": "'GRID_HEADER_CUSTOM_ELEMENTS'"
+      },
+      "topTaskbarCustomSlotId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome do slot de elementos customizados da Taskbar principal do componente."
+        },
+        "attribute": "top-taskbar-custom-slot-id",
+        "reflect": false,
+        "defaultValue": "'GRID_TASKBAR_CUSTOM_ELEMENTS'"
       }
     };
   }

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

@@ -174,7 +174,7 @@ export class SnkSimpleCrud {
   }
   render() {
     var _a;
-    return (h("snk-data-unit", { class: "simple-crud__container", dataUnit: this.dataUnit, useCancelConfirm: this.useCancelConfirm, onDataStateChange: evt => this.onDataStateChange(evt), onCancelEdition: this.handleCancelEdit.bind(this), onInsertionMode: () => this.goToView(VIEW_MODE.FORM), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), ignoreSaveMessage: this._currentViewMode === VIEW_MODE.GRID, onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail }, h("header", null, h("slot", { name: "snkSimpleCrudHeader" })), h("section", { class: "ez-flex ez-box ez-box--shadow" }, h("snk-taskbar", { class: "ez-box ez-box--shadow ez-padding--medium ez-margin-bottom--large", dataUnit: this.dataUnit, primaryButton: ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", "data-element-id": "grid_left", messagesBuilder: this.messagesBuilder, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, slot: "leftButtons", presentationMode: PresentationMode.SECONDARY }), h("ez-view-stack", { class: "ez-flex ez-flex--column", ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, h("stack-item", null, h("ez-grid", { dataUnit: this.dataUnit, config: this.gridConfig, "no-header": true, multipleSelection: this.multipleSelection, onEzDoubleClick: () => this.goToView(VIEW_MODE.FORM), columnfilterDataSource: this.dataUnit.name.includes(InMemoryLoader.IN_MEMORY_DATA_UNIT_NAME)
+    return (h("snk-data-unit", { class: "simple-crud__container", dataUnit: this.dataUnit, useCancelConfirm: this.useCancelConfirm, onDataStateChange: evt => this.onDataStateChange(evt), onCancelEdition: this.handleCancelEdit.bind(this), onInsertionMode: () => this.goToView(VIEW_MODE.FORM), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), ignoreSaveMessage: this._currentViewMode === VIEW_MODE.GRID, onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail }, h("header", null, h("slot", { name: "snkSimpleCrudHeader" })), h("section", { class: "ez-flex ez-box ez-box--shadow" }, h("snk-taskbar", { class: "ez-box ez-box--shadow ez-padding--medium ez-margin-bottom--large", dataUnit: this.dataUnit, primaryButton: ((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", "data-element-id": "grid_left", messagesBuilder: this.messagesBuilder, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, slot: "leftButtons", presentationMode: PresentationMode.SECONDARY }, h("slot", { name: "TASKBAR_CUSTOM_ELEMENTS" })), h("ez-view-stack", { class: "ez-flex ez-flex--column", ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, h("stack-item", null, h("ez-grid", { dataUnit: this.dataUnit, config: this.gridConfig, "no-header": true, multipleSelection: this.multipleSelection, onEzDoubleClick: () => this.goToView(VIEW_MODE.FORM), columnfilterDataSource: this.dataUnit.name.includes(InMemoryLoader.IN_MEMORY_DATA_UNIT_NAME)
         ? undefined
         : this._multiSelectionListDataSource, useEnterLikeTab: this.useEnterLikeTab }, h("div", { slot: "footer" }, h("slot", { name: "snkSimpleCrudFooter" })))), h("stack-item", null, h("ez-form", { dataUnit: this.dataUnit, config: this.formConfig }))))));
   }

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

@@ -99,16 +99,16 @@ export const buildElem = (element, className, dataElementId, getTitle, action, i
   }
 };
 function textButton(name, className, dataElementId, text, title, action, isEnabled) {
-  return h("ez-button", { title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) });
+  return h("ez-button", { key: dataElementId, title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) });
 }
 function iconButton(iconName, name, className, dataElementId, title, action, isEnabled) {
-  return h("ez-button", { title: title, mode: "icon", size: "small", class: className, "data-element-id": dataElementId, iconName: iconName, enabled: isEnabled(name), onClick: () => action(name) });
+  return h("ez-button", { key: dataElementId, title: title, mode: "icon", size: "small", class: className, "data-element-id": dataElementId, iconName: iconName, enabled: isEnabled(name), onClick: () => action(name) });
 }
 function iconTextButton(iconName, name, className, dataElementId, text, title, action, isEnabled) {
-  return h("ez-button", { title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) }, h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: iconName }));
+  return h("ez-button", { key: dataElementId, title: title, label: text, size: "small", class: className, "data-element-id": dataElementId, enabled: isEnabled(name), onClick: () => action(name) }, h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: iconName }));
 }
 function actionButton(element, className, dataElementId, title, action, isEnabled, actions) {
   return actions && actions.length > 0
-    ? h("ez-actions-button", { title: title, size: "small", "data-element-id": dataElementId, arrowActive: true, class: className, enabled: isEnabled(element), onEzAction: (evt) => action(evt.detail.value), actions: actions })
+    ? h("ez-actions-button", { key: dataElementId, title: title, size: "small", "data-element-id": dataElementId, arrowActive: true, class: className, enabled: isEnabled(element), onEzAction: (evt) => action(evt.detail.value), actions: actions })
     : undefined;
 }

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

@@ -0,0 +1,43 @@
+import { h, Host } from '@stencil/core';
+export class SnkTaskbarCustomElements {
+  constructor() {
+    this.slot = 'TASKBAR_CUSTOM_ELEMENTS';
+  }
+  render() {
+    return (h(Host, { slot: this.slot }, h("div", { id: this.slot, class: "taskbar-custom-elements-container" }, h("slot", null))));
+  }
+  static get is() { return "snk-taskbar-custom-elements"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-taskbar.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-taskbar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "slot": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome do slot da Taskbar onde os elementos customizados dever\u00E3o aparecer."
+        },
+        "attribute": "slot",
+        "reflect": false,
+        "defaultValue": "'TASKBAR_CUSTOM_ELEMENTS'"
+      }
+    };
+  }
+}

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

@@ -1,3 +1,7 @@
 :host {
   display: flex;
 }
+
+.taskbar-custom-elements-container{
+  display: none;
+}

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

@@ -1,10 +1,11 @@
 import { ApplicationContext, ElementIDUtils, StringUtils } from '@sankhyalabs/core';
 import { h, Host } from '@stencil/core';
 import { AuthorizationConfig } from '../snk-configurator/AuthorizationConfig';
-import { TaskbarElement, buildElem, AuthorizationElements, buildCustomButton, VisibleWhenForbidden } from './elements/taskbar-elements';
+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_';
     this._titleKeyByElement = {
       [TaskbarElement.UPDATE]: "snkTaskbar.titleUpdate",
       [TaskbarElement.PREVIOUS]: "snkTaskbar.titlePrevious",
@@ -22,6 +23,11 @@ export class SnkTaskbar {
       [TaskbarElement.ATTACH]: "snkTaskbar.titleAttach",
     };
     this._permissions = undefined;
+    this._customElements = undefined;
+    this._customElementsId = undefined;
+    this._slotContainer = undefined;
+    this.customSlotId = "TASKBAR_CUSTOM_ELEMENTS";
+    this.customContainerId = undefined;
     this.configName = undefined;
     this.resourceID = undefined;
     this.buttons = undefined;
@@ -162,6 +168,43 @@ export class SnkTaskbar {
       return true;
     });
   }
+  appendCustomElementsInTaskbar() {
+    this._customElementsId.forEach(id => {
+      const elementId = id.replace(this.TASKBAR_ITEM_ID_PREFIX, '');
+      const customElement = this._customElements.get(elementId);
+      const container = this._element.querySelector(`#${id}`);
+      if (container) {
+        container === null || container === void 0 ? void 0 : container.appendChild(customElement);
+      }
+      else {
+        this.unlinkCustomElementFromTaskbar(customElement);
+      }
+    });
+  }
+  addCustomElementContainer(elem) {
+    const elementId = `${this.TASKBAR_ITEM_ID_PREFIX}${elem}`;
+    if (!this._customElementsId.includes(elementId)) {
+      this._customElementsId.push(elementId);
+    }
+    return h("span", { key: elementId, id: elementId });
+  }
+  getCustomElements() {
+    var _a, _b;
+    this._customElementsId = [];
+    this._customElements = new Map();
+    this._slotContainer = this.buildSlotContainer();
+    const customElementsArray = Array.from((_b = (_a = this._slotContainer) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []);
+    customElementsArray.forEach(item => this._customElements.set(item.id, item));
+  }
+  buildSlotContainer() {
+    if (this.customContainerId) {
+      const container = document.querySelector(`#${this.customContainerId}`);
+      return container === null || container === void 0 ? void 0 : container.querySelector(`#${this.customSlotId}`);
+    }
+    else {
+      return this._element.querySelector(`#${this.customSlotId}`);
+    }
+  }
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     if (this._application) {
@@ -170,6 +213,7 @@ export class SnkTaskbar {
     else {
       this._permissions = {};
     }
+    this.getCustomElements();
   }
   componentWillRender() {
     if (this._definitions == undefined && this._permissions) {
@@ -181,12 +225,30 @@ export class SnkTaskbar {
     const dataInfo = { dataUnit: this.dataUnit };
     ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
+  componentDidRender() {
+    this.appendCustomElementsInTaskbar();
+  }
+  disconnectedCallback() {
+    this.unlinkAllCustomElements();
+  }
+  unlinkAllCustomElements() {
+    var _a;
+    (_a = this._customElementsId) === null || _a === void 0 ? void 0 : _a.forEach(id => {
+      const elementId = id.replace(this.TASKBAR_ITEM_ID_PREFIX, '');
+      const customElement = this._customElements.get(elementId);
+      this.unlinkCustomElementFromTaskbar(customElement);
+    });
+  }
+  unlinkCustomElementFromTaskbar(customElement) {
+    this._slotContainer.appendChild(customElement);
+  }
   render() {
     if (this._definitions === undefined) {
       return undefined;
     }
     let index = 0;
     return (h(Host, null, this.removeEmpty(this._definitions.map((elem) => {
+      var _a;
       if (elem === TaskbarElement.DIVIDER) {
         index = 0;
       }
@@ -196,11 +258,14 @@ export class SnkTaskbar {
       if (TaskbarElement[elem]) {
         return this.getElement(index, TaskbarElement[elem]);
       }
-      if (this.customButtons.has(elem)) {
+      if ((_a = this.customButtons) === null || _a === void 0 ? void 0 : _a.has(elem)) {
         return this.getElement(index, this.customButtons.get(elem));
       }
+      if (this._customElements.has(elem)) {
+        return this.addCustomElementContainer(elem);
+      }
       return h("slot", { name: elem });
-    }))));
+    })), h("div", { class: "taskbar-custom-elements-container" }, h("slot", { name: this.customSlotId }))));
   }
   static get is() { return "snk-taskbar"; }
   static get encapsulation() { return "scoped"; }
@@ -216,6 +281,41 @@ export class SnkTaskbar {
   }
   static get properties() {
     return {
+      "customSlotId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado para determinar o identificador do slot que recebe elementos personalizados."
+        },
+        "attribute": "custom-slot-id",
+        "reflect": false,
+        "defaultValue": "\"TASKBAR_CUSTOM_ELEMENTS\""
+      },
+      "customContainerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Usado para determinar o identificador do container na DOM que \u00E9 responsavel por guardar os elementos personalizados\nque n\u00E3o podem ser passados por slot.\n\nExemplo: Elementos customizados na Taskbar da aba de detalhes."
+        },
+        "attribute": "custom-container-id",
+        "reflect": false
+      },
       "configName": {
         "type": "string",
         "mutable": false,
@@ -414,7 +514,10 @@ export class SnkTaskbar {
   }
   static get states() {
     return {
-      "_permissions": {}
+      "_permissions": {},
+      "_customElements": {},
+      "_customElementsId": {},
+      "_slotContainer": {}
     };
   }
   static get events() {

package/dist/components/index.d.ts

@@ -47,6 +47,7 @@ export { SnkSimpleBar as SnkSimpleBar } from '../types/components/snk-simple-bar
 export { SnkSimpleCrud as SnkSimpleCrud } from '../types/components/snk-simple-crud/snk-simple-crud';
 export { SnkTabConfig as SnkTabConfig } from '../types/components/snk-form/subcomponents/snk-tab-config/snk-tab-config';
 export { SnkTaskbar as SnkTaskbar } from '../types/components/snk-taskbar/snk-taskbar';
+export { SnkTaskbarCustomElements as SnkTaskbarCustomElements } from '../types/components/snk-taskbar/snk-taskbar-custom-elements';
 export { TestePesquisa as TestePesquisa } from '../types/components/teste-pesquisa/teste-pesquisa';
 
 /**

package/dist/components/index.js

@@ -47,4 +47,5 @@ export { SnkSimpleBar, defineCustomElement as defineCustomElementSnkSimpleBar }
 export { SnkSimpleCrud, defineCustomElement as defineCustomElementSnkSimpleCrud } from './snk-simple-crud.js';
 export { SnkTabConfig, defineCustomElement as defineCustomElementSnkTabConfig } from './snk-tab-config.js';
 export { SnkTaskbar, defineCustomElement as defineCustomElementSnkTaskbar } from './snk-taskbar.js';
+export { SnkTaskbarCustomElements, defineCustomElement as defineCustomElementSnkTaskbarCustomElements } from './snk-taskbar-custom-elements.js';
 export { TestePesquisa, defineCustomElement as defineCustomElementTestePesquisa } from './teste-pesquisa.js';

package/dist/components/snk-crud.js

@@ -1,5 +1,5 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { StringUtils, ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
 import { T as TaskbarElement, d as defineCustomElement$2 } from './snk-taskbar2.js';
 import './DataFetcher.js';
 import './pesquisa-fetcher.js';
@@ -67,6 +67,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.presentationMode = PresentationMode.PRIMARY;
     this.messagesBuilder = undefined;
     this.useEnterLikeTab = false;
+    this.customContainerId = `SNK-CRUD-CUSTOM-CONTAINER-${StringUtils.generateUUID()}`;
   }
   /**
    * Usado para alternar a visão entre GRID e FORM externamente.
@@ -208,7 +209,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     }
     this._snkDataUnit.ignoreSaveMessage = this._currentViewMode === VIEW_MODE.GRID;
-    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "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, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, canEdit: this._canEdit, resourceID: this._resourceID }, 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, resourceID: this._resourceID }, h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, 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, 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 }, h("div", { slot: "SnkConfigContainerSlot" }, h("slot", { name: "SnkConfigContainerSlot" })))));
+    return (h(Host, null, h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "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, selectionToastConfig: this.selectionToastConfig, useEnterLikeTab: this.useEnterLikeTab, canEdit: this._canEdit, resourceID: this._resourceID }, 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, resourceID: this._resourceID, detailTaskbarCustomContainerId: this.customContainerId }, h("slot", { name: "GUIDES_VIEWER_TASKBAR_CUSTOM_ELEMENTS" }), h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, 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, 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 }, h("div", { slot: "SnkConfigContainerSlot" }, h("slot", { name: "SnkConfigContainerSlot" })))), h("div", { id: `${this.customContainerId}` }, 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 {
@@ -233,6 +234,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "_currentViewMode": [32],
     "_canEdit": [32],
     "_resourceID": [32],
+    "customContainerId": [32],
     "goToView": [64],
     "openConfigurator": [64],
     "closeConfigurator": [64],