@sankhyalabs/sankhyablocks 5.8.1 → 5.9.1

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

@@ -1,15 +1,16 @@
 import { Host, forceUpdate, h } from '@stencil/core';
-import { SnkFormConfigManager } from '../../snk-form/SnkFormConfigManager';
+import { SnkFormConfigManager } from '../../../snk-form/SnkFormConfigManager';
 import { buildFormMetadata } from "@sankhyalabs/ezui/dist/collection/utils/form";
-import { PresentationMode } from '../../../lib';
-import { TaskbarElement } from '../../snk-taskbar/elements/taskbar-elements';
-import { VIEW_MODE } from '../../../lib/utils/constants';
-import { SnkGuidesViewer } from './snk-guides-viewer';
-import { SnkMessageBuilder } from '../../../lib/message/SnkMessageBuilder';
-import { GuideBuilder } from './GuideBuilder';
+import { PresentationMode } from '../../../../lib';
+import { TaskbarElement } from '../../../snk-taskbar/elements/taskbar-elements';
+import { VIEW_MODE } from '../../../../lib/utils/constants';
+import { SnkGuidesViewer } from '../snk-guides-viewer';
+import { SnkMessageBuilder } from '../../../../lib/message/SnkMessageBuilder';
+import { GuideBuilder } from '../GuideBuilder';
 export class SnkDetailView {
   constructor() {
     this._disabledButtons = undefined;
+    this.attachmentRegisterKey = undefined;
     this.formConfigManager = undefined;
     this.dataUnitName = undefined;
     this.guideItemPath = undefined;
@@ -39,8 +40,8 @@ export class SnkDetailView {
       setTimeout(() => {
         //FIXME: A necessidade de usar esse timeout é por causa da renderização
         //do guide navigator... se esse evento subir antes do guidenavigator ter
-        //um item com esse id, ele fica sem seleção. Acredito que poderíamos 
-        //ajustar o componente para manter o item selecionado e então remover 
+        //um item com esse id, ele fica sem seleção. Acredito que poderíamos
+        //ajustar o componente para manter o item selecionado e então remover
         //esse timeout.
         this.changeViewMode(VIEW_MODE.FORM);
       }, 0);
@@ -131,7 +132,9 @@ export class SnkDetailView {
     this.loadMetadata();
   }
   updateViewStack(viewStack) {
-    viewStack.show(this.selectedForm ? 1 : 0);
+    var _a, _b;
+    this._viewStack = viewStack;
+    (_b = (_a = this._viewStack) === null || _a === void 0 ? void 0 : _a.show) === null || _b === void 0 ? void 0 : _b.call(_a, this.selectedForm ? 1 : 0);
   }
   getFormFields() {
     if (this.selectedForm && this._formMetadata) {
@@ -145,6 +148,9 @@ export class SnkDetailView {
       this.snkSwitchGuide.emit(guideId);
     }
   }
+  handleAttachBack() {
+    this._viewStack.show(VIEW_MODE.GRID);
+  }
   executeActionHandler(evt) {
     if (evt.detail === TaskbarElement.GRID_MODE) {
       this.emitSwitchEvent(VIEW_MODE.GRID);
@@ -154,6 +160,23 @@ export class SnkDetailView {
       this.emitSwitchEvent(VIEW_MODE.FORM);
       evt.stopPropagation();
     }
+    if (evt.detail === TaskbarElement.ATTACH) {
+      this._viewStack.show(VIEW_MODE.ATTACHMENT);
+      evt.stopPropagation();
+    }
+  }
+  async getAttachmentRegisterKey() {
+    if (!this._snkDataUnit)
+      return;
+    const recordCriteria = await this._snkDataUnit.getSelectedRecordsIDsInfo();
+    const joinedPrimaryKeys = recordCriteria.map(({ value }) => value).join('_');
+    return joinedPrimaryKeys;
+  }
+  async handleDataStateChange({ detail: dataState }) {
+    this.dataState = dataState;
+    if (dataState.selectedRecord !== undefined && this._snkDataUnit) {
+      this.attachmentRegisterKey = await this.getAttachmentRegisterKey();
+    }
   }
   componentWillLoad() {
     this._configName = `dynaform.${this.entityName}`;
@@ -166,7 +189,7 @@ export class SnkDetailView {
   render() {
     this.updateLabel();
     //const cardConfig: IFormCardConfig = this._cardsState?.get(this.selectedForm);
-    return (h(Host, null, h("snk-data-unit", { dataUnitName: `${this.dataUnitName}`, onDataUnitReady: evt => this.dataUnitReadyHandler(evt), entityName: this.entityName, onDataStateChange: evt => this.dataState = evt.detail, messagesBuilder: this.messagesBuilder }, 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-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, 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 }, 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 })))))));
+    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), messagesBuilder: this.messagesBuilder }, 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-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, 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 }, 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 }))), 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"; }
@@ -191,7 +214,7 @@ export class SnkDetailView {
           "references": {
             "SnkFormConfigManager": {
               "location": "import",
-              "path": "../../snk-form/SnkFormConfigManager"
+              "path": "../../../snk-form/SnkFormConfigManager"
             }
           }
         },
@@ -322,7 +345,7 @@ export class SnkDetailView {
           "references": {
             "DataState": {
               "location": "import",
-              "path": "../../snk-data-unit/snk-data-unit"
+              "path": "../../../snk-data-unit/snk-data-unit"
             }
           }
         },
@@ -342,7 +365,7 @@ export class SnkDetailView {
           "references": {
             "SnkMessageBuilder": {
               "location": "import",
-              "path": "../../../lib/message/SnkMessageBuilder"
+              "path": "../../../../lib/message/SnkMessageBuilder"
             }
           }
         },
@@ -377,7 +400,8 @@ export class SnkDetailView {
   }
   static get states() {
     return {
-      "_disabledButtons": {}
+      "_disabledButtons": {},
+      "attachmentRegisterKey": {}
     };
   }
   static get events() {
@@ -397,7 +421,7 @@ export class SnkDetailView {
           "references": {
             "GuideBuilder": {
               "location": "import",
-              "path": "./GuideBuilder"
+              "path": "../GuideBuilder"
             }
           }
         }
@@ -436,7 +460,7 @@ export class SnkDetailView {
             },
             "VIEW_MODE": {
               "location": "import",
-              "path": "../../../lib/utils/constants"
+              "path": "../../../../lib/utils/constants"
             }
           },
           "return": "Promise<void>"

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

@@ -139,7 +139,7 @@ export class SnkGuidesViewer {
         disabledButtons.push("REMOVE");
       }
     }
-    const btnsRegularMode = ["PREVIOUS", "NEXT", "DIVIDER", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "GRID_MODE", "CONFIGURATOR"];
+    const btnsRegularMode = ["PREVIOUS", "NEXT", "DIVIDER", "ATTACH", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "GRID_MODE", "CONFIGURATOR"];
     if (this.presentationMode == PresentationMode.SECONDARY) {
       btnsRegularMode.unshift("INSERT");
     }
@@ -612,9 +612,9 @@ export class SnkGuidesViewer {
           "parameters": [{
               "tags": [{
                   "name": "param",
-                  "text": "detail - Define se a configura\u00E7\u00E3o que est\u00E1 sendo carregada \u00E9 \nreferente a um form detail."
+                  "text": "detail - Define se a configura\u00E7\u00E3o que est\u00E1 sendo carregada \u00E9\nreferente a um form detail."
                 }],
-              "text": "- Define se a configura\u00E7\u00E3o que est\u00E1 sendo carregada \u00E9 \nreferente a um form detail."
+              "text": "- Define se a configura\u00E7\u00E3o que est\u00E1 sendo carregada \u00E9\nreferente a um form detail."
             }],
           "references": {
             "Promise": {
@@ -627,7 +627,7 @@ export class SnkGuidesViewer {
           "text": "Abre o configurador do formul\u00E1rio",
           "tags": [{
               "name": "param",
-              "text": "detail - Define se a configura\u00E7\u00E3o que est\u00E1 sendo carregada \u00E9 \nreferente a um form detail."
+              "text": "detail - Define se a configura\u00E7\u00E3o que est\u00E1 sendo carregada \u00E9\nreferente a um form detail."
             }]
         }
       }

package/dist/collection/components/snk-filter-bar/snk-filter-bar.js

@@ -78,7 +78,11 @@ export class SnkFilterBar {
     }
     if (this._loadingPending) {
       this._loadingPending = false;
-      this.dataUnit.loadData();
+      this._inProgressLoadFromConfig = new Promise((resolve) => {
+        this.dataUnit.loadData().then(() => {
+          resolve();
+        });
+      });
     }
     if (this._configUpdated) {
       this._configUpdated = false;
@@ -189,10 +193,13 @@ export class SnkFilterBar {
     ConfigStorage.get().then(instance => {
       instance.loadFilterBarConfig(this.configName)
         .then((filters) => {
+        var _a;
         this.filterConfig = filters.map(item => this.normalizeItem(item));
-        if (this.dataUnit) {
-          this.dataUnit.loadData(undefined, undefined, true);
+        if (this._inProgressLoadFromConfig) {
+          return;
         }
+        (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.loadData(undefined, undefined, true);
+        this._inProgressLoadFromConfig = undefined;
       })
         .catch(reason => {
         throw new ErrorException(this.getMessage("snkFilterBar.failToLoadConfig"), reason);

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

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import { ApplicationContext, DataType, ElementIDUtils, VersionUtils } from '@sankhyalabs/core';
+import { ApplicationContext, DataType, ElementIDUtils } from '@sankhyalabs/core';
 import { UserInterface } from '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
 import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
@@ -16,9 +16,9 @@ export class SnkGrid {
     });
     this._headerTaskbarProcessor = new TaskbarProcessor({
       "snkGridHeaderTaskbar.unselected": ["REFRESH", "DATA_EXPORTER"],
-      "snkGridHeaderTaskbar.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", this.getAttachAvailable(), "REFRESH", "DATA_EXPORTER"],
+      "snkGridHeaderTaskbar.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "ATTACH", "REFRESH", "DATA_EXPORTER"],
       "snkGridHeaderTaskbar.detail.unselected": ["REFRESH"],
-      "snkGridHeaderTaskbar.detail.selected": ["UPDATE", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "REFRESH"]
+      "snkGridHeaderTaskbar.detail.selected": ["UPDATE", "ATTACH", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "REFRESH"]
     });
     this._dataUnit = undefined;
     this._dataState = undefined;
@@ -57,13 +57,6 @@ export class SnkGrid {
   async setConfig(config) {
     this.setGridConfig(config);
   }
-  getAttachAvailable() {
-    var _a;
-    const isValidVersion = VersionUtils.isRequiredVersion((_a = window.envContext) === null || _a === void 0 ? void 0 : _a.sysVersion, '4.22');
-    if (isValidVersion)
-      return TaskbarElement.ATTACH;
-    return "";
-  }
   openGridConfig() {
     this._grid.getColumnsState()
       .then((gridColumns) => {

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

@@ -1,3 +1,12 @@
+import { TaskbarElement } from "../elements/taskbar-elements";
+import { VersionUtils } from "@sankhyalabs/core";
+const MINIMUM_SK_VERSION_TO_ATTACHMENT = "4.22";
+const buttonsWithPermissions = {
+  [TaskbarElement.ATTACH]: () => {
+    var _a;
+    return VersionUtils.isRequiredVersion((_a = window.envContext) === null || _a === void 0 ? void 0 : _a.sysVersion, MINIMUM_SK_VERSION_TO_ATTACHMENT);
+  }
+};
 export default class TaskbarProcessor {
   constructor(defaultButtons) {
     this._defaultButtons = defaultButtons;
@@ -8,8 +17,14 @@ export default class TaskbarProcessor {
     this.buttons = "";
     this.disabledButtons = [].concat(disabledButtons);
     (_a = this.getButtonsArray(taskbarId, taskbarManager, dataState)) === null || _a === void 0 ? void 0 : _a.forEach(btnDef => {
+      var _a;
       let buttonName;
       if (typeof btnDef === "string") {
+        if (buttonsWithPermissions[btnDef]) {
+          const hasPermissions = (_a = buttonsWithPermissions[btnDef]) === null || _a === void 0 ? void 0 : _a.call(buttonsWithPermissions);
+          if (!hasPermissions)
+            return;
+        }
         buttonName = btnDef;
       }
       else {

package/dist/components/index.d.ts

@@ -6,7 +6,7 @@ export { SnkConfigurator as SnkConfigurator } from '../types/components/snk-conf
 export { SnkCrud as SnkCrud } from '../types/components/snk-crud/snk-crud';
 export { SnkDataExporter as SnkDataExporter } from '../types/components/snk-data-exporter/snk-data-exporter';
 export { SnkDataUnit as SnkDataUnit } from '../types/components/snk-data-unit/snk-data-unit';
-export { SnkDetailView as SnkDetailView } from '../types/components/snk-crud/subcomponents/snk-detail-view';
+export { SnkDetailView as SnkDetailView } from '../types/components/snk-crud/subcomponents/snk-detail-view/snk-detail-view';
 export { SnkExporterEmailSender as SnkExporterEmailSender } from '../types/components/snk-data-exporter/exporter-email-sender/snk-exporter-email-sender';
 export { SnkExpressionItem as SnkExpressionItem } from '../types/components/snk-personalized-filter/subcomponents/snk-expression-item/snk-expression-item';
 export { SnkFieldConfig as SnkFieldConfig } from '../types/components/snk-form/subcomponents/snk-field-config/snk-field-config';

package/dist/components/snk-attach2.js

@@ -216,9 +216,8 @@ class AttachmentDataUnitBuilder {
     return new Promise((resolve) => {
       const { records } = dataUnit.getSelectionInfo();
       attachFetcher.delete(records[0]).then(() => {
-        resolve(ids);
+        return resolve(ids);
       });
-      resolve([]);
     });
   }
   getFilters(registerKey) {

package/dist/components/snk-crud.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { ElementIDUtils, ApplicationContext, VersionUtils } from '@sankhyalabs/core';
+import { ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
 import { T as TaskbarElement, d as defineCustomElement$2 } from './snk-taskbar2.js';
 import './DataFetcher.js';
 import './pesquisa-fetcher.js';
@@ -33,6 +33,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.actionClick = createEvent(this, "actionClick", 7);
+    this._viewHistory = [];
     this._dataUnit = undefined;
     this._dataState = undefined;
     this.attachmentRegisterKey = undefined;
@@ -52,6 +53,9 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async goToView(mode) {
     this.executeAction(mode);
   }
+  currentViewModeWatcher(currentView) {
+    this._viewHistory = [...this._viewHistory.slice(-1), currentView];
+  }
   async gridToForm(keepFormMode = false) {
     this._backToGrid = !keepFormMode && await this._viewStack.getSelectedIndex() === VIEW_MODE.GRID;
     this.setViewMode(VIEW_MODE.FORM);
@@ -66,8 +70,9 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (act === "ATTACH")
       return this.setViewMode(VIEW_MODE.ATTACHMENT);
   }
-  handleAttachBack() {
-    this.setViewMode(VIEW_MODE.GRID);
+  backView() {
+    const lastView = this._viewHistory.at(-2) || VIEW_MODE.GRID;
+    this.setViewMode(lastView);
   }
   setViewMode(viewMode) {
     this._viewStack.show(viewMode);
@@ -94,6 +99,13 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.setViewMode(VIEW_MODE.GRID);
     }
   }
+  async getAttachmentRegisterKey() {
+    if (!this._snkDataUnit)
+      return;
+    const recordCriteria = await this._snkDataUnit.getSelectedRecordsIDsInfo();
+    const joinedPrimaryKeys = recordCriteria.map(({ value }) => value).join('_');
+    return joinedPrimaryKeys;
+  }
   componentWillLoad() {
     let parent = this._element.parentElement;
     while (parent) {
@@ -112,8 +124,11 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         else {
           this.initDataUnit();
         }
-        this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
-          this._dataState = evt.detail;
+        this._snkDataUnit.addEventListener("dataStateChange", async ({ detail: dataState }) => {
+          this._dataState = dataState;
+          if (dataState.selectedRecord !== undefined) {
+            this.attachmentRegisterKey = await this.getAttachmentRegisterKey();
+          }
         });
         break;
       }
@@ -130,17 +145,13 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.messagesBuilder = this._snkDataUnit.messagesBuilder;
     }
   }
-  async canRenderAttachment() {
-    var _a, _b, _c, _d, _e;
-    const isValidVersion = VersionUtils.isRequiredVersion((_a = window.envContext) === null || _a === void 0 ? void 0 : _a.sysVersion, '4.22');
-    const recordCriteria = await ((_c = (_b = this._snkDataUnit) === null || _b === void 0 ? void 0 : _b.getSelectedRecordsIDsInfo) === null || _c === void 0 ? void 0 : _c.call(_b));
-    this.attachmentRegisterKey = (_d = recordCriteria.find(criteria => !!criteria.value)) === null || _d === void 0 ? void 0 : _d.value;
-    return isValidVersion && ((_e = this._dataState) === null || _e === void 0 ? void 0 : _e.selectedRecord) !== undefined;
-  }
   render() {
-    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 }, 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" }, h("slot", { name: "SnkFormTaskBar" }))), h("stack-item", null, this.canRenderAttachment() && (h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this._snkDataUnit.entityName, onBack: this.handleAttachBack.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) })));
+    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 }, 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" }, 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) })));
   }
   get _element() { return this; }
+  static get watchers() { return {
+    "_currentViewMode": ["currentViewModeWatcher"]
+  }; }
   static get style() { return snkCrudCss; }
 }, [6, "snk-crud", {
     "configName": [1025, "config-name"],