@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-121322.0 → 0.0.0-bugfix-dev-KB-132407.0

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

@@ -1,12 +1,41 @@
-import { ApplicationContext, ElementIDUtils } from "@sankhyalabs/core";
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { Action, ApplicationContext, ElementIDUtils, UserInterface } from "@sankhyalabs/core";
 import { Host, h } from "@stencil/core";
 import { DataBinder } from "@sankhyalabs/ezui/dist/collection/utils/form";
 import { focusOnFieldSerch, SEARCH_FIELD_FULL_WIDTH, FormLayout } from '@sankhyalabs/ezui/dist/collection/utils';
+import { getPKs } from "../../snk-image-input/utils/ImageUtils";
 export class SnkFormView {
   constructor() {
     this._customEditors = new Map();
     this._fieldProps = new Map();
+    this.dataUnitObserver = async (action) => {
+      if (action.type === Action.RECORDS_COPIED) {
+        const sourcePK = this.buildSourceRecordPK(action);
+        this.getImageField().forEach(async (field) => {
+          this.dataUnit.setFieldValue(field.name, JSON.stringify(sourcePK));
+        });
+      }
+    };
+    this.customUiBuilders = new Map([
+      [UserInterface.IMAGE, (_a) => {
+          var { name } = _a, props = __rest(_a, ["name"]);
+          return h("snk-image-input", Object.assign({ dataUnit: this.dataUnit, maxSize: Infinity, fieldName: name, entityName: this.entityPath }, props));
+        }
+      ]
+    ]);
     this._singleColumn = false;
+    this._currentFormLayout = undefined;
     this.levelPath = undefined;
     this.fieldSearch = undefined;
     this.label = undefined;
@@ -23,6 +52,7 @@ export class SnkFormView {
     this.fieldToFocus = undefined;
     this.customEditors = undefined;
     this.fieldsProps = undefined;
+    this.entityPath = undefined;
   }
   async showUp() {
     if (this._formView) {
@@ -72,6 +102,11 @@ export class SnkFormView {
       }
     }
   }
+  async observeDataUnit(newValue, oldValue) {
+    if (newValue !== oldValue && newValue) {
+      newValue.subscribe(this.dataUnitObserver);
+    }
+  }
   changeFix() {
     this.fixed = !this.fixed;
     this.emitEvent("fixed");
@@ -129,28 +164,41 @@ export class SnkFormView {
     if (this._dataBinder != undefined) {
       this._dataBinder.onDisconnectedCallback();
     }
+    if (this.dataUnit) {
+      this.dataUnit.unsubscribe(this.dataUnitObserver);
+    }
+  }
+  async componentWillLoad() {
+    await this.initLayoutFormConfig();
+  }
+  async componentWillLoad() {
+    await this.initLayoutFormConfig();
   }
   componentDidLoad() {
     this.observePropsCustomEditor(this.customEditors);
     this.observeFieldsProps(this.fieldsProps);
-    this.initLayoutFormConfig();
   }
   async initLayoutFormConfig() {
-    const _application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-    const layoutFormConfig = await (_application === null || _application === void 0 ? void 0 : _application.getLayoutFormConfig());
+    var _a;
+    if (!this._application) {
+      this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    }
+    const layoutFormConfig = await ((_a = this._application) === null || _a === void 0 ? void 0 : _a.getLayoutFormConfig());
     if (layoutFormConfig) {
       this.setSingleColumn(layoutFormConfig);
       this.registerNotifyListeners(layoutFormConfig);
     }
   }
   setSingleColumn(layoutFormConfig) {
-    this._singleColumn = (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CASCADE;
+    this._singleColumn = (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CASCADE || (layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config) === FormLayout.CLASSIC_CASCADE;
+    this._currentFormLayout = layoutFormConfig === null || layoutFormConfig === void 0 ? void 0 : layoutFormConfig.config;
   }
   registerNotifyListeners(layoutFormConfig) {
     if (!layoutFormConfig)
       return;
     layoutFormConfig.onConfigChange((config) => {
-      this._singleColumn = (config === FormLayout.CASCADE);
+      this._singleColumn = (config === FormLayout.CASCADE || config === FormLayout.CLASSIC_CASCADE);
+      this._currentFormLayout = config;
     });
   }
   componentDidRender() {
@@ -187,6 +235,22 @@ export class SnkFormView {
       });
     }
   }
+  buildSourceRecordPK(action) {
+    var _a, _b;
+    const currentRecord = ((_a = action.payload) === null || _a === void 0 ? void 0 : _a[0]) || {};
+    const sourceBase64 = currentRecord["__record__source__id__"];
+    const sourceRecord = JSON.parse(atob(sourceBase64 || ''));
+    delete sourceRecord["__DATA_UNIT_NAME__"];
+    const pkFields = Object.keys(getPKs(this.dataUnit));
+    const filteredSourceRecord = {};
+    for (const pkField of pkFields) {
+      filteredSourceRecord[pkField] = (_b = sourceRecord[pkField]) === null || _b === void 0 ? void 0 : _b.value;
+    }
+    return filteredSourceRecord;
+  }
+  getImageField() {
+    return this.dataUnit.metadata.fields.filter(field => field.userInterface === UserInterface.IMAGE);
+  }
   render() {
     return (h(Host, { class: "ez-box__container" }, h("div", { class: "summary-header ez-flex ez-size-width--full", ref: ref => this._headerContainer = ref }, h("div", { class: "ez-flex ez-text ez-title--primary ez-text--bold ez-flex--justify-start ez-flex--align-items-center ez-col--sd-9" }, this.levelPath ? h("span", { class: "level-path" }, this.levelPath + " /") : undefined, this.label), h("div", { class: "ez-flex ez-flex--justify-end ez-col--sd-3" }, this.canFix &&
       h("ez-button", { class: "ez-padding-left--medium", mode: "icon", size: "small", iconName: this.fixed ? "un-pin" : "push-pin", "data-element-id": ElementIDUtils.getInternalIDInfo("toggleFixed_ezFormCard"), onClick: () => this.changeFix(), title: this.fixed ? "Desafixar" : "Fixar" }), this.canExpand &&
@@ -194,7 +258,7 @@ export class SnkFormView {
       ?
         h("snk-form-summary", { summary: this.getCardSummary() })
       :
-        h("ez-form-view", { ref: ref => this._formView = ref, fields: this.fields, onEzContentReady: evt => this.bindFields(evt.detail), onFormItemsReady: (event) => this.handleFormItemsReady(event), singleColumn: this._singleColumn }), this.fieldSearch && h("ez-popover", { ref: elem => (this._ezPopoverFieldColumn = elem), overlayType: "none" }, this.fieldSearch)));
+        h("ez-form-view", { ref: ref => this._formView = ref, fields: this.fields, onEzContentReady: evt => this.bindFields(evt.detail), onFormItemsReady: (event) => this.handleFormItemsReady(event), singleColumn: this._singleColumn, customUiBuilders: this.customUiBuilders, formLayout: this._currentFormLayout }), this.fieldSearch && h("ez-popover", { ref: elem => (this._ezPopoverFieldColumn = elem), overlayType: "none" }, this.fieldSearch)));
   }
   static get is() { return "snk-form-view"; }
   static get encapsulation() { return "scoped"; }
@@ -510,12 +574,30 @@ export class SnkFormView {
           "tags": [],
           "text": "Lista de propriedades que ser\u00E3o alteradas/adicionadas por coluna."
         }
+      },
+      "entityPath": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina todo o caminho de entidades."
+        },
+        "attribute": "entity-path",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "_singleColumn": {}
+      "_singleColumn": {},
+      "_currentFormLayout": {}
     };
   }
   static get events() {
@@ -675,6 +757,9 @@ export class SnkFormView {
       }, {
         "propName": "fieldsProps",
         "methodName": "observeFieldsProps"
+      }, {
+        "propName": "dataUnit",
+        "methodName": "observeDataUnit"
       }];
   }
 }

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

@@ -12,8 +12,6 @@ const FORM_NAME_PREFIX = "__FORM:";
 export class SnkGuidesViewer {
   constructor() {
     this._guideBuilders = new Map();
-    this.CUSTOM_GUIDE_ID_PREFIX = "CUSTOM_GUIDE_";
-    this.CUSTOM_GUIDE_DATA_CUSTOM_ID = "CUSTOM_GUIDE";
     this.dataUnit = undefined;
     this.dataState = undefined;
     this.configName = undefined;
@@ -47,8 +45,12 @@ export class SnkGuidesViewer {
   observeDataUnit() {
     this.loadGuides(true);
   }
-  observeFormConfigManager(value) {
-    this.formConfigVisibilityChanged.emit(!!value);
+  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;
@@ -98,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.
@@ -159,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;
@@ -273,7 +283,7 @@ export class SnkGuidesViewer {
       if (sheet == undefined) {
         return;
       }
-      return h("snk-form-view", { levelPath: params.levelPath, label: sheet.label, name: formName, fields: sheet.fields, formMetadata: params.formMetadata, dataUnit: params.dataUnit, recordsValidator: params.recordsValidator, contracted: (cardConfig === null || cardConfig === void 0 ? void 0 : cardConfig.presentation) === "CONTRACTED", fixed: cardConfig === null || cardConfig === void 0 ? void 0 : cardConfig.fixed, summaryFields: (_b = (_a = params.formConfig) === null || _a === void 0 ? void 0 : _a.summary) === null || _b === void 0 ? void 0 : _b.get(formName), fieldToFocus: params.fieldToFocus, key: formName, onSnkRequestClearFieldToFocus: _ => { var _a; return (_a = params.onRequestClearFieldToFocus) === null || _a === void 0 ? void 0 : _a.call(params); }, customEditors: params.propsCustomEditor, fieldsProps: params.fieldsProps });
+      return h("snk-form-view", { levelPath: params.levelPath, label: sheet.label, name: formName, fields: sheet.fields, formMetadata: params.formMetadata, dataUnit: params.dataUnit, recordsValidator: params.recordsValidator, contracted: (cardConfig === null || cardConfig === void 0 ? void 0 : cardConfig.presentation) === "CONTRACTED", fixed: cardConfig === null || cardConfig === void 0 ? void 0 : cardConfig.fixed, summaryFields: (_b = (_a = params.formConfig) === null || _a === void 0 ? void 0 : _a.summary) === null || _b === void 0 ? void 0 : _b.get(formName), fieldToFocus: params.fieldToFocus, key: formName, onSnkRequestClearFieldToFocus: _ => { var _a; return (_a = params.onRequestClearFieldToFocus) === null || _a === void 0 ? void 0 : _a.call(params); }, customEditors: params.propsCustomEditor, fieldsProps: params.fieldsProps, entityPath: params.entityPath });
     })));
   }
   wrapDetail(levels, content) {
@@ -295,11 +305,13 @@ export class SnkGuidesViewer {
   }
   getContent() {
     if (!this.selectedGuide) {
+      this.snkShowGuide.emit(undefined);
       return;
     }
     const guideId = this.selectedGuide.id;
+    this.snkShowGuide.emit(guideId);
     if (this.isCustomGuide(guideId)) {
-      return h("div", { "data-custom-id": `${this.CUSTOM_GUIDE_DATA_CUSTOM_ID}`, "data-reserved-slot-id": guideId, id: this.buildCustomGuideContainerId(guideId) });
+      return h("slot", { name: guideId });
     }
     const levels = guideId.split("::");
     const currentLevel = levels.pop();
@@ -310,16 +322,13 @@ export class SnkGuidesViewer {
     }
     return this.buildFormViewGuideContent(guideId);
   }
-  buildCustomGuideContainerId(guideId) {
-    return `${this.CUSTOM_GUIDE_ID_PREFIX}${guideId}`;
-  }
   buildFormViewGuideContent(cardId) {
     var _a, _b, _c, _d;
     const sheet = this._masterFormMetadata.getSheet(cardId);
     if (!sheet)
       return;
     const cardConfig = (_b = (_a = this.masterFormConfig) === null || _a === void 0 ? void 0 : _a.cardsState) === null || _b === void 0 ? void 0 : _b.get(cardId);
-    return (h("snk-form-view", { ref: ref => this._mainForm = ref, fixed: cardConfig === null || cardConfig === void 0 ? void 0 : cardConfig.fixed, summaryFields: (_d = (_c = this.masterFormConfig) === null || _c === void 0 ? void 0 : _c.summary) === null || _d === void 0 ? void 0 : _d.get(cardId), name: cardId, label: sheet.label, fields: sheet.fields, dataUnit: this.dataUnit, formMetadata: this._masterFormMetadata, recordsValidator: this.recordsValidator, fieldToFocus: this._fieldToGetFocus, key: cardId, onSnkRequestClearFieldToFocus: _ => this.clearFieldToFocusHandler(), customEditors: this._customEditors, fieldsProps: this._fieldsProps, fieldSearch: this._fieldSearch }, this.presentationMode == PresentationMode.SECONDARY && this.buildTaskBar()));
+    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, entityPath: this.entityPath }, this.presentationMode == PresentationMode.SECONDARY && this.buildTaskBar()));
   }
   isDetailGuide(childEntityName, levels) {
     return childEntityName || levels.length > 0;
@@ -342,20 +351,6 @@ export class SnkGuidesViewer {
     var _a;
     return (_a = this.customGuidesConfig) === null || _a === void 0 ? void 0 : _a.map(g => g.id).includes(guideId);
   }
-  attachCustomGuideInView() {
-    //As guias customizadas ficam em slots reservados na DOM e
-    // precisam ser acessadas via querySelector e colocadas no container correto na view.
-    var _a;
-    const guideId = (_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.id;
-    if (!this.isCustomGuide(guideId))
-      return;
-    const customGuideSlot = document.querySelector(`#${guideId}`);
-    const customGuideElement = customGuideSlot === null || customGuideSlot === void 0 ? void 0 : customGuideSlot.firstElementChild;
-    const customGuideViewContainer = document.querySelector(`#${this.buildCustomGuideContainerId(guideId)}`);
-    if (!customGuideElement || !customGuideViewContainer)
-      return;
-    customGuideViewContainer.appendChild(customGuideElement);
-  }
   onBreadcrumbClickHandler(item) {
     if ((item === null || item === void 0 ? void 0 : item.id) == undefined) {
       return;
@@ -437,29 +432,7 @@ export class SnkGuidesViewer {
     this.addFormLegacyConfigName();
     this._configManager.loadConfig();
   }
-  componentWillRender() {
-    this.detachCustomGuideFromView();
-  }
-  detachCustomGuideFromView() {
-    // Antes de cada renderização, o componente remove a guia customizada da view
-    // e a coloca de volta no slot reservado na DOM para que não seja perdida sua referência.
-    if (!this.customGuidesConfig || this.customGuidesConfig.length === 0)
-      return;
-    const viewCustomGuideContainer = this._element.querySelector(`[data-custom-id="${this.CUSTOM_GUIDE_DATA_CUSTOM_ID}"]`);
-    const reservedSlotId = viewCustomGuideContainer === null || viewCustomGuideContainer === void 0 ? void 0 : viewCustomGuideContainer.getAttribute('data-reserved-slot-id');
-    if (!(viewCustomGuideContainer === null || viewCustomGuideContainer === void 0 ? void 0 : viewCustomGuideContainer.hasChildNodes()) || !reservedSlotId)
-      return;
-    const customGuideReservedSlot = document.querySelector(`#${reservedSlotId}`);
-    const customGuideElement = viewCustomGuideContainer === null || viewCustomGuideContainer === void 0 ? void 0 : viewCustomGuideContainer.firstElementChild;
-    if (!customGuideReservedSlot || !customGuideElement)
-      return;
-    customGuideReservedSlot.appendChild(customGuideElement);
-  }
   componentDidRender() {
-    var _a;
-    if (this.isCustomGuide((_a = this.selectedGuide) === null || _a === void 0 ? void 0 : _a.id)) {
-      this.attachCustomGuideInView();
-    }
     if (!this._guideHasChanged) {
       return;
     }
@@ -607,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, 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) })
       :
@@ -630,8 +600,17 @@ export class SnkGuidesViewer {
       fieldToFocus: this._fieldToGetFocus,
       onRequestClearFieldToFocus: this.clearFieldToFocusHandler.bind(this),
       propsCustomEditor: this._customEditors,
-      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 })));
+      fieldsProps: this._fieldsProps,
+      entityPath: this.entityPath
+    }), 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, layoutFormConfig: false, disableNumberingConfig: true })));
+  }
+  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"; }
@@ -786,7 +765,7 @@ export class SnkGuidesViewer {
       },
       "selectedGuide": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "IGuideItem",
           "resolved": "IGuideItem",
@@ -1026,6 +1005,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,
@@ -1290,3 +1284,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;

package/dist/collection/components/snk-filter-bar/filter-item/editors/snk-filter-number.js

@@ -17,16 +17,20 @@ export class SnkFilterPeriod {
   /**
    * Emitido quando acontece a alteração de valor do componente snk-filter-number
    */
-  ezChangeListener(evt) {
+  ezInputListener(evt) {
     this.errorMessage = undefined;
+    const value = evt.detail;
     if (this.getVariation() === FilterNumberVariation.INTERVAL) {
-      const start = this._startInterval.value;
-      const end = this._endInterval.value;
-      this.value = (!isNaN(start) || !isNaN(end) ? { start, end } : undefined);
+      if (evt.target === this._startInterval && !isNaN(value)) {
+        this.value = Object.assign(this.value, { start: value });
+      }
+      if (evt.target === this._endInterval && !isNaN(value)) {
+        this.value = Object.assign(this.value, { end: value });
+      }
       this.valueChanged.emit(this.value);
       return;
     }
-    this.value = evt.detail;
+    this.value = value;
     this.valueChanged.emit(this.value);
   }
   /**
@@ -101,7 +105,7 @@ export class SnkFilterPeriod {
     if (this.getVariation() === FilterNumberVariation.INTERVAL) {
       return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("div", { class: "ez-col ez-col--nowrap" }, h("ez-number-input", { id: `${this.config.id}_start`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding-right--medium' : '', label: this._startIntervalLabel, ref: ref => this._startInterval = ref, value: this.getIntervalValue("start"), enabled: this.config.enabled, precision: (_a = this.config.props) === null || _a === void 0 ? void 0 : _a.precision, errorMessage: this.errorMessage }), this.buildLabel(), h("ez-number-input", { id: `${this.config.id}_end`, label: this._endIntervalLabel, ref: ref => this._endInterval = ref, value: this.getIntervalValue("end"), enabled: this.config.enabled, precision: (_b = this.config.props) === null || _b === void 0 ? void 0 : _b.precision, errorMessage: this.errorMessage }))));
     }
-    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("ez-number-input", { id: this.config.id, ref: ref => this._numberElement = ref, value: this.config.value, precision: (_c = this.config.props) === null || _c === void 0 ? void 0 : _c.precision, enabled: this.config.enabled, errorMessage: this.errorMessage })));
+    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("ez-number-input", { id: this.config.id, label: this.config.label, ref: ref => this._numberElement = ref, value: this.config.value, precision: (_c = this.config.props) === null || _c === void 0 ? void 0 : _c.precision, enabled: this.config.enabled, errorMessage: this.errorMessage })));
   }
   static get is() { return "snk-filter-number"; }
   static get properties() {
@@ -143,7 +147,7 @@ export class SnkFilterPeriod {
       },
       "value": {
         "type": "number",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "FilterNumberValueType",
           "resolved": "number | { start: number; end: number; }",
@@ -281,8 +285,8 @@ export class SnkFilterPeriod {
   static get elementRef() { return "_element"; }
   static get listeners() {
     return [{
-        "name": "ezChange",
-        "method": "ezChangeListener",
+        "name": "ezInput",
+        "method": "ezInputListener",
         "target": undefined,
         "capture": false,
         "passive": false

package/dist/collection/components/snk-filter-bar/filter-item/editors/snk-filter-period.js

@@ -7,16 +7,17 @@ export class SnkFilterPeriod {
     this._startDateLabel = 'Inicial';
     this._endDateLabel = 'Final';
     this._toLabel = 'até';
+    this._defaultEmptyValue = {
+      start: null,
+      end: null
+    };
     this.internalChange = {
       start: false,
       end: false
     };
     this.config = undefined;
     this.getMessage = undefined;
-    this.value = {
-      start: null,
-      end: null
-    };
+    this.value = this._defaultEmptyValue;
     this.presentationMode = EPresentationMode.CHIP;
     this.errorMessage = undefined;
   }
@@ -29,6 +30,10 @@ export class SnkFilterPeriod {
       this.internalChange.start = false;
       return;
     }
+    if ((!newValue && oldValue) || (!(newValue === null || newValue === void 0 ? void 0 : newValue.start) && !(newValue === null || newValue === void 0 ? void 0 : newValue.end))) {
+      this.clearValue();
+      return;
+    }
     if (newValue && (newValue.start !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.start) || newValue.end !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.end))) {
       this.valueStart = this.parseDate(newValue.start);
       this.valueEnd = this.parseDate(newValue.end);
@@ -50,9 +55,11 @@ export class SnkFilterPeriod {
    * Limpa o valor do componente restaurando o valor original da configuração.
    */
   async clearValue() {
-    this.value = this.config.value;
+    this.value = this.config.value || this._defaultEmptyValue;
     this.valueStart = this.getDate("start");
     this.valueEnd = this.getDate("end");
+    this._startDate.value = this.valueStart;
+    this._endDate.value = this.valueEnd;
   }
   componentDidLoad() {
     if (this._element) {
@@ -102,7 +109,7 @@ export class SnkFilterPeriod {
     if (!this.config || this.config.type !== FilterItemType.PERIOD) {
       return undefined;
     }
-    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("div", { class: "ez-col ez-col--nowrap" }, h("ez-date-input", { id: `${this.config.id}_start`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding-right--medium' : '', label: this._startDateLabel, ref: ref => this._startDate = ref, enabled: this.config.enabled, value: this.valueStart, errorMessage: this.errorMessage, onEzChange: (event) => this.ezChangeListener(event, 'start') }), this.buildLabel(), h("ez-date-input", { id: `${this.config.id}_end`, label: this._endDateLabel, ref: ref => this._endDate = ref, enabled: this.config.enabled, value: this.valueEnd, errorMessage: this.errorMessage, onEzChange: (event) => this.ezChangeListener(event, 'end') }))));
+    return (h("ez-tooltip", { active: this.config.enabled === false, message: this.config.disabledMessage, type: 'warning' }, h("div", { class: "ez-col ez-col--nowrap" }, h("ez-date-input", { id: `${this.config.id}_start`, class: this.presentationMode === EPresentationMode.MODAL ? 'ez-padding-right--medium' : '', label: this._startDateLabel, ref: ref => this._startDate = ref, enabled: this.config.enabled, value: this.valueStart, errorMessage: this.errorMessage, onEzInput: (event) => this.ezChangeListener(event, 'start') }), this.buildLabel(), h("ez-date-input", { id: `${this.config.id}_end`, label: this._endDateLabel, ref: ref => this._endDate = ref, enabled: this.config.enabled, value: this.valueEnd, errorMessage: this.errorMessage, onEzInput: (event) => this.ezChangeListener(event, 'end') }))));
   }
   static get is() { return "snk-filter-period"; }
   static get properties() {
@@ -160,7 +167,7 @@ export class SnkFilterPeriod {
           "tags": [],
           "text": "Define o valor do componente snk-filter-period"
         },
-        "defaultValue": "{\n    start: null,\n    end: null\n  }"
+        "defaultValue": "this._defaultEmptyValue"
       },
       "presentationMode": {
         "type": "number",