@sankhyalabs/sankhyablocks 2.9.0 → 2.11.0

package/dist/cjs/snk-form.cjs.entry.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2cd6f753.js');
 const core = require('@sankhyalabs/core');
-const taskbarProcessor = require('./taskbar-processor-6f3d2a75.js');
 const ConfigStorage = require('./ConfigStorage-8b5e3261.js');
+const index$1 = require('./index-9c584423.js');
+const taskbarProcessor = require('./taskbar-processor-6f3d2a75.js');
 require('./_commonjsHelpers-537d719a.js');
 
-const snkFormCss = ".sc-snk-form-h{display:block}.snk-form.sc-snk-form{position:relative;padding:var(--space--large);padding-top:var(--space--medium)}.snk-form__header.sc-snk-form{position:relative;padding-top:var(--space--medium);padding-bottom:var(--space--medium);margin-bottom:var(--space--medium)}.snk-form__header--fixed.sc-snk-form{position:sticky;top:0;background:var(--background--body);z-index:var(--more-visible, 2);padding-left:var(--space--large);padding-right:var(--space--large);margin-left:calc(var(--space--large) * -1);margin-right:calc(var(--space--large) * -1);width:calc(100% + (var(--space--large) * 2))}.snk-form__form--hidden.sc-snk-form{display:none}";
+const snkFormCss = ".sc-snk-form-h{display:block}.snk-form.sc-snk-form{position:relative;padding:var(--space--large);padding-top:var(--space--medium)}.snk-form__header.sc-snk-form{position:relative;padding-top:var(--space--medium);padding-bottom:var(--space--medium);margin-bottom:var(--space--medium)}.snk-form__header--fixed.sc-snk-form{position:sticky;top:0;background:var(--background--body);z-index:var(--visible);padding-left:var(--space--large);padding-right:var(--space--large);margin-left:calc(var(--space--large) * -1);margin-right:calc(var(--space--large) * -1);width:calc(100% + (var(--space--large) * 2))}.snk-form__form--hidden.sc-snk-form{display:none}";
 
 const SnkForm = class {
   constructor(hostRef) {
@@ -16,13 +17,13 @@ const SnkForm = class {
     this.exit = index.createEvent(this, "exit", 7);
     this.actionClick = index.createEvent(this, "actionClick", 7);
     this._renderTimer = 500;
-    this._taskbarProcessor = new taskbarProcessor.TaskbarProcessor({
-      "snkForm.regular": ["PREVIOUS", "NEXT", "DIVIDER", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "GRID_MODE", "CONFIGURATOR", "INSERT"],
-      "snkForm.finish_edition": ["CANCEL", "SAVE"]
-    });
     this._editionFormConfig = {};
     this._insertionFormConfig = {};
     this._showFormConfig = false;
+    /**
+     * Altera o modo de apresentação dos botões do snk-taskbar.
+    */
+    this.presentationMode = index$1.PresentationMode.PRIMARY;
   }
   /**
    * Exibe a janela de configurações do formulário.
@@ -36,6 +37,22 @@ const SnkForm = class {
   async hideConfig() {
     this._showFormConfig = false;
   }
+  getFinishEditionTaskbarButtons() {
+    if (this.presentationMode === index$1.PresentationMode.PRIMARY) {
+      return ["CANCEL", "SAVE"];
+    }
+    else {
+      return ["SAVE", "CANCEL"];
+    }
+  }
+  getRegularTaskbarButtons() {
+    if (this.presentationMode === index$1.PresentationMode.PRIMARY) {
+      return ["PREVIOUS", "NEXT", "DIVIDER", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "GRID_MODE", "CONFIGURATOR", "INSERT"];
+    }
+    else {
+      return ["INSERT", "PREVIOUS", "NEXT", "DIVIDER", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "GRID_MODE", "CONFIGURATOR"];
+    }
+  }
   loadConfig() {
     if (this.configName == undefined) {
       return;
@@ -139,6 +156,33 @@ const SnkForm = class {
   closeConfig() {
     this.hideConfig();
   }
+  validatePresentationMode() {
+    if (Object.values(index$1.PresentationMode).includes(this.presentationMode)) {
+      return;
+    }
+    this.presentationMode = index$1.PresentationMode.PRIMARY;
+  }
+  dataunitReady() {
+    this.loadInsertionConfig();
+    const dataInfo = { dataUnit: this._dataUnit };
+    core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
+  loadTaskbarProcessor() {
+    var _a;
+    const taskbarId = ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "snkForm.finish_edition" : "snkForm.regular";
+    const disabledButtons = [];
+    if (!this._dataState || !this._dataState.hasPrevious) {
+      disabledButtons.push("PREVIOUS");
+    }
+    if (!this._dataState || !this._dataState.hasNext) {
+      disabledButtons.push("NEXT");
+    }
+    this._taskbarProcessor = new taskbarProcessor.TaskbarProcessor({
+      "snkForm.regular": this.getRegularTaskbarButtons(),
+      "snkForm.finish_edition": this.getFinishEditionTaskbarButtons(),
+    });
+    this._taskbarProcessor.process(taskbarId, this.taskbarManager, this._dataState, disabledButtons);
+  }
   getDisabledButtons() {
     const disabled = [];
     if (!this._dataState.hasPrevious) {
@@ -149,11 +193,6 @@ const SnkForm = class {
     }
     return disabled;
   }
-  dataunitReady() {
-    this.loadInsertionConfig();
-    const dataInfo = { dataUnit: this._dataUnit };
-    core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-  }
   componentWillLoad() {
     this._application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
     let parent = this._element.parentElement;
@@ -181,23 +220,20 @@ const SnkForm = class {
     this.loadConfig();
   }
   componentWillRender() {
-    var _a;
-    const taskbarId = ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "snkForm.finish_edition" : "snkForm.regular";
-    const disabledButtons = [];
-    if (!this._dataState || !this._dataState.hasPrevious) {
-      disabledButtons.push("PREVIOUS");
-    }
-    if (!this._dataState || !this._dataState.hasNext) {
-      disabledButtons.push("NEXT");
-    }
-    this._taskbarProcessor.process(taskbarId, this.taskbarManager, this._dataState, disabledButtons);
+    this.validatePresentationMode();
+    this.loadTaskbarProcessor();
   }
   render() {
     var _a;
     if (!this._dataUnit || !this._dataState) {
       return undefined;
     }
-    return (index.h("section", { class: "snk-form" }, index.h("div", { class: "snk-form__header snk-form__header--fixed ez-row" }, index.h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, index.h("ez-button", { title: this.getMessage("snkForm.goBackTitle"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm(), "data-element-id": "formToBack" }), index.h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.getMessage("snkForm.title"))), index.h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, index.h("snk-taskbar", { key: "formTaskbar", "data-element-id": "form", configName: this.configName, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.actionsList, primaryButton: ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", dataUnit: this._dataUnit }))), index.h("section", null, index.h("div", { class: "ez-row" }, index.h("div", { class: "ez-col ez-col--sd-12" }, index.h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, "data-element-id": "embedded", dataUnit: this._dataUnit, config: this.getFormConfig(), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
+    return (index.h("section", { class: "snk-form" }, index.h("div", { class: `snk-form__header ez-row
+          ${this.presentationMode === index$1.PresentationMode.PRIMARY ? 'snk-form__header--fixed' : ''}
+        ` }, this.presentationMode === index$1.PresentationMode.PRIMARY &&
+      index.h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, index.h("ez-button", { title: this.getMessage("snkForm.goBackTitle"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm(), "data-element-id": "formToBack" }), index.h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.getMessage("snkForm.title"))), index.h("div", { class: `ez-col
+            ${this.presentationMode === index$1.PresentationMode.PRIMARY ? "ez-col--sd-6 ez-col--tb-6 ez-align--right" : ""}
+          ` }, index.h("snk-taskbar", { key: "formTaskbar", "data-element-id": "form", configName: this.configName, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.actionsList, primaryButton: ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", dataUnit: this._dataUnit, presentationMode: this.presentationMode }))), index.h("section", null, index.h("div", { class: "ez-row" }, index.h("div", { class: "ez-col ez-col--sd-12" }, index.h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, "data-element-id": "embedded", dataUnit: this._dataUnit, config: this.getFormConfig(), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
       index.h("snk-form-config", { dataUnit: this._dataUnit, formConfig: this.getFormConfig(), configName: this.configName, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigClose: () => this.closeConfig() }))))));
   }
   get _element() { return index.getElement(this); }

package/dist/cjs/snk-tab-config.cjs.entry.js

@@ -8,7 +8,7 @@ const core = require('@sankhyalabs/core');
 const constants = require('./constants-a47a5190.js');
 require('./_commonjsHelpers-537d719a.js');
 
-const snkTabConfigCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}.sc-snk-tab-config-h{--snk-tab-config--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--snk-tab-config--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');display:flex;position:relative;width:100%;overflow:hidden}.tab-config__scroll.sc-snk-tab-config{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.tab-config__scroll--start-hidden.sc-snk-tab-config{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.tab-config__scroll--middle.sc-snk-tab-config{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab-config__scroll--end-hidden.sc-snk-tab-config{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab-config__lower-bar.sc-snk-tab-config{position:absolute;left:0%;right:0%;top:91%;bottom:0%;border-radius:2px;background:var(--color--disable-primary);border:2px solid var(--color--disable-primary)}.tab-config__tab.sc-snk-tab-config{display:flex;border:none;background-color:unset;cursor:pointer;align-items:center;justify-content:center;min-width:fit-content;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Roboto\");font-size:var(--title--small, 14px);padding:var(--space--small, 6px) var(--space--medium, 12px)}.tab-config__tab.sc-snk-tab-config:focus,.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{outline:none}.tab-config__tab--is-active.sc-snk-tab-config{position:relative;color:var(--color--primary, #008561)}.tab-config__tab.sc-snk-tab-config:hover{color:var(--color--secondary, #383c45)}.tab-config__tab--is-active.sc-snk-tab-config:hover{color:var(--color--primary, #008561)}.tab-config__tab--is-active.sc-snk-tab-config::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.tab-config__tab--is-focused.sc-snk-tab-config{border:1px dashed var(--color--primary, #000000c5)}.tab-config__tab-label.sc-snk-tab-config{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config ez-icon.sc-snk-tab-config{--ez-icon--color:var(--color--secondary-700, #1C1D22)}.tab-config__backward-button.sc-snk-tab-config{left:0px;box-shadow:10px 10px 5px 5px white;background:white}.tab-config__forward-button.sc-snk-tab-config{box-shadow:10px 10px 5px 20px white;background:white}.tab-config__forward-button.sc-snk-tab-config::after,.tab-config__backward-button.sc-snk-tab-config::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.tab-config__forward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--forward-icon);mask-image:var(--snk-tab-config--forward-icon)}.tab-config__backward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--backward-icon);mask-image:var(--snk-tab-config--backward-icon)}.tab-config__forward-button.sc-snk-tab-config:hover::after,.tab-config__backward-button.sc-snk-tab-config:hover::after{background-color:var(--color--primary, #4e4e4e)}.tab-config__new-button.sc-snk-tab-config:hover ez-icon.sc-snk-tab-config{--ez-icon--color:var(--color--primary, #4e4e4e)}.tab-config__hidden.sc-snk-tab-config{display:none}.tab-config__scroll.sc-snk-tab-config::-webkit-scrollbar{display:none}.tab-config__left-icon.sc-snk-tab-config{padding-right:var(--space--small);--ez-icon--color:var(--text--disable)}.tab-config__left-icon--eye-off.sc-snk-tab-config{--ez-icon--color:var(--text--disable, #AFB6C0)}.tab-config__right-icon.sc-snk-tab-config{visibility:hidden;padding-left:var(--space--small)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{visibility:visible}.tab-config__tab--is-active.sc-snk-tab-config .tab-config__right-icon.sc-snk-tab-config{visibility:visible;--ez-icon--color:var(--color--primary)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--color--secondary, #383c45)}.tab-config__tab--is-active.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--color--primary)}.tab-config__actions-button.sc-snk-tab-config{--ez-actions-button__btn-action--min-width:100px;visibility:hidden;opacity:0;transition:visibility 1s linear,opacity 0.3s linear}.tab-config__tab.sc-snk-tab-config:hover .tab-config__actions-button.sc-snk-tab-config{visibility:visible;opacity:1;transition:visibility 0.2s linear, opacity 0.10s linear}[data-draggable-element].sc-snk-tab-config{cursor:grab}.tab-config__tab-label-disabled.sc-snk-tab-config{color:var(--text--disable, #AFB6C0)}.tab-config__slot.sc-snk-tab-config{margin-left:var(--space--small, 6px)}";
+const snkTabConfigCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}.sc-snk-tab-config-h{--snk-tab-config--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--snk-tab-config--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');--snk-tab-config__lower-bar--background-color:var(--color--disable-primary, #e5eaf0);--snk-tab-config__lower-bar--border:2px solid var(--color--disable-primary, #e5eaf0);--snk-tab-config__tab--color:var(--text--primary, #626e82);--snk-tab-config__tab--font-family:var(--font-pattern, \"Roboto\");--snk-tab-config__tab--font-size:var(--title--small, 14px);--snk-tab-config__tab--padding:var(--space--small, 6px) var(--space--medium, 12px);--snk-tab-config__tab-is-active--color:var(--color--primary, #008561);--snk-tab-config__tab-hover--color:var(--color--secondary, #383c45);--snk-tab-config__tab-is-focused--border:1px dashed var(--color--primary, #008561);--snk-tab-config__tab-label--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--snk-tab-config__tab-label--margin-bottom:var(--space--extra-small, 3px);--snk-tab-config__new-button-icon--color:var(--color--secondary-700, #1C1D22);--snk-tab-config__forward-button--background-color:var(--text--primary, #626e82);--snk-tab-config__forward-button-hover--background-color:var(--color--primary, #008561);--snk-tab-config__left-icon--padding-right:var(--space--small, 6px);--snk-tab-config__left-icon--color:var(--text--disable, #AFB6C0);--snk-tab-config__tab-label-disabled--color:var(--text--disable, #AFB6C0);--snk-tab-config__slot--margin-left:var(--space--small, 6px);display:flex;position:relative;width:100%;overflow:hidden}.tab-config__scroll.sc-snk-tab-config{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.tab-config__lower-bar.sc-snk-tab-config{position:absolute;left:0%;right:0%;top:91%;bottom:0%;border-radius:2px;background-color:var(--snk-tab-config__lower-bar--background-color);border:var(--snk-tab-config__lower-bar--border)}.tab-config__tab.sc-snk-tab-config{display:flex;border:none;background-color:unset;cursor:pointer;align-items:center;justify-content:center;min-width:fit-content;color:var(--snk-tab-config__tab--color);font-family:var(--snk-tab-config__tab--font-family);font-size:var(--snk-tab-config__tab--font-size);padding:var(--snk-tab-config__tab--padding)}.tab-config__tab.sc-snk-tab-config:focus,.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{outline:none}.tab-config__tab--is-active.sc-snk-tab-config{position:relative;color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab.sc-snk-tab-config:hover{color:var(--snk-tab-config__tab-hover--color)}.tab-config__tab--is-active.sc-snk-tab-config:hover{color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab--is-active.sc-snk-tab-config::after{content:\"\";position:absolute;width:100%;height:100%;clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out;background-color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab--is-focused.sc-snk-tab-config{border:var(--snk-tab-config__tab-is-focused--border)}.tab-config__tab-label.sc-snk-tab-config{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--snk-tab-config__tab-label--text-shadow);margin-bottom:var(--snk-tab-config__tab-label--margin-bottom)}.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config ez-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__new-button-icon--color)}.tab-config__backward-button.sc-snk-tab-config{left:0px;box-shadow:10px 10px 5px 5px white;background:white}.tab-config__forward-button.sc-snk-tab-config{box-shadow:10px 10px 5px 20px white;background:white}.tab-config__forward-button.sc-snk-tab-config::after,.tab-config__backward-button.sc-snk-tab-config::after{content:'';display:flex;width:10px;height:16px;background-color:var(--snk-tab-config__forward-button--background-color)}.tab-config__forward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--forward-icon);mask-image:var(--snk-tab-config--forward-icon)}.tab-config__backward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--backward-icon);mask-image:var(--snk-tab-config--backward-icon)}.tab-config__forward-button.sc-snk-tab-config:hover::after,.tab-config__backward-button.sc-snk-tab-config:hover::after{background-color:var(--snk-tab-config__forward-button-hover--background-color)}.tab-config__new-button.sc-snk-tab-config:hover ez-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__forward-button-hover--background-color)}.tab-config__hidden.sc-snk-tab-config{display:none}.tab-config__scroll.sc-snk-tab-config::-webkit-scrollbar{display:none}.tab-config__left-icon.sc-snk-tab-config{padding-right:var(--snk-tab-config__left-icon--padding-right);--ez-icon--color:var(--snk-tab-config__left-icon--color)}.tab-config__left-icon--eye-off.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__left-icon--color)}.tab-config__right-icon.sc-snk-tab-config{visibility:hidden;padding-left:var(--snk-tab-config__left-icon--padding-right)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{visibility:visible}.tab-config__tab--is-active.sc-snk-tab-config .tab-config__right-icon.sc-snk-tab-config{visibility:visible;--ez-icon--color:var(--snk-tab-config__tab-is-active--color)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__tab-hover--color)}.tab-config__tab--is-active.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--snk-tab-config__tab-is-active--color)}.tab-config__actions-button.sc-snk-tab-config{--ez-actions-button__btn-action--min-width:100px;visibility:hidden;opacity:0;transition:visibility 1s linear, opacity 0.3s linear}.tab-config__tab.sc-snk-tab-config:hover .tab-config__actions-button.sc-snk-tab-config{visibility:visible;opacity:1;transition:visibility 0.2s linear, opacity 0.10s linear}[data-draggable-element].sc-snk-tab-config{cursor:grab}.tab-config__tab-label-disabled.sc-snk-tab-config{color:var(--snk-tab-config__tab-label-disabled--color)}.tab-config__slot.sc-snk-tab-config{margin-left:var(--snk-tab-config__slot--margin-left)}";
 
 const SnkTabConfig = class {
   constructor(hostRef) {

package/dist/cjs/{taskbar-elements-bbb89cdb.js → taskbar-elements-89bf9399.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 const index = require('./index-2cd6f753.js');
+const index$2 = require('./index-9c584423.js');
 const index$1 = require('./index-696b5c3b.js');
 
 exports.TaskbarElement = void 0;
@@ -47,7 +48,7 @@ const buildCustomButton = (def, className, dataElementId, action, isEnabled) =>
     return textButton(def.name, className, dataElementId, text, hint, action, isEnabled);
   }
 };
-const buildElem = (element, className, dataElementId, getTitle, action, isEnabled, actions, configName) => {
+const buildElem = (element, className, dataElementId, getTitle, action, isEnabled, actions, configName, presentationMode) => {
   var _a;
   const title = getTitle(element);
   switch (element) {
@@ -64,11 +65,21 @@ const buildElem = (element, className, dataElementId, getTitle, action, isEnable
     case exports.TaskbarElement.REMOVE:
       return iconButton("delete", element, className, dataElementId, title, action, isEnabled);
     case exports.TaskbarElement.INSERT:
-      return iconTextButton("plus", element, className, dataElementId, title, title, action, isEnabled);
+      if (presentationMode === index$2.PresentationMode.PRIMARY) {
+        return iconTextButton("plus", element, className, dataElementId, title, title, action, isEnabled);
+      }
+      else {
+        return iconButton("plus", element, className, dataElementId, title, action, isEnabled);
+      }
     case exports.TaskbarElement.CANCEL:
       return textButton(element, className, dataElementId, title, title, action, isEnabled);
     case exports.TaskbarElement.SAVE:
-      return iconTextButton("save", element, className, dataElementId, title, title, action, isEnabled);
+      if (presentationMode === index$2.PresentationMode.PRIMARY) {
+        return iconTextButton("save", element, className, dataElementId, title, title, action, isEnabled);
+      }
+      else {
+        return iconButton("save", element, className, dataElementId, title, action, isEnabled);
+      }
     case exports.TaskbarElement.GRID_MODE:
       return iconButton("table", element, className, dataElementId, title, action, isEnabled);
     case exports.TaskbarElement.FORM_MODE:

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

@@ -270,13 +270,13 @@ export class SnkApplication {
    * Cria o DataUnit a partir do nome da entidade. É possível armazená-lo no cache
    * passando o dataUnitName, assim, se mais de uma chamada for feita, o mesmo DataUnit será usado.
    */
-  async createDataunit(entityName, dataUnitName) {
+  async createDataunit(entityName, dataUnitName, parentDataUnit) {
     return new Promise((resolve, reject) => {
       const duPromisses = this.getDuPromissesStack(dataUnitName);
       const waitingDu = duPromisses.length > 0;
       duPromisses.push(new PendingPromise(resolve, reject));
       if (!waitingDu) {
-        const dataUnit = this.dataUnitFetcher.getDataUnit(entityName, this.resourceID);
+        const dataUnit = this.dataUnitFetcher.getDataUnit(entityName, this.resourceID, parentDataUnit);
         dataUnit.loadMetadata().then(() => {
           if (dataUnitName) {
             this._duCache.set(dataUnitName, dataUnit);
@@ -295,14 +295,14 @@ export class SnkApplication {
   /**
    * Obtem um DataUnit do cache ou cria um caso ainda não tenha sido criado.
    */
-  async getDataUnit(entityName, dataUnitName) {
+  async getDataUnit(entityName, dataUnitName, parentDataUnit) {
     return new Promise((resolve, reject) => {
       const dataUnit = this._duCache.get(dataUnitName);
       if (dataUnit) {
         resolve(dataUnit);
       }
       else {
-        this.createDataunit(entityName, dataUnitName).then(dataUnit => {
+        this.createDataunit(entityName, dataUnitName, parentDataUnit).then(dataUnit => {
           resolve(dataUnit);
         }).catch(reason => reject(reason));
       }
@@ -1075,13 +1075,16 @@ export class SnkApplication {
       },
       "createDataunit": {
         "complexType": {
-          "signature": "(entityName: string, dataUnitName?: string) => Promise<DataUnit>",
+          "signature": "(entityName: string, dataUnitName?: string, parentDataUnit?: DataUnit) => Promise<DataUnit>",
           "parameters": [{
               "tags": [],
               "text": ""
             }, {
               "tags": [],
               "text": ""
+            }, {
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -1101,13 +1104,16 @@ export class SnkApplication {
       },
       "getDataUnit": {
         "complexType": {
-          "signature": "(entityName: string, dataUnitName: string) => Promise<DataUnit>",
+          "signature": "(entityName: string, dataUnitName: string, parentDataUnit?: DataUnit) => Promise<DataUnit>",
           "parameters": [{
               "tags": [],
               "text": ""
             }, {
               "tags": [],
               "text": ""
+            }, {
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {

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

@@ -2,6 +2,7 @@ import { h } from '@stencil/core';
 import { ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
 import { VIEW_MODE } from '../../lib/utils/constants';
 import { TaskbarElement } from '../snk-taskbar/elements/taskbar-elements';
+import { PresentationMode } from '../../lib/@types';
 const GRID_MODE = VIEW_MODE.grid;
 const FORM_MODE = VIEW_MODE.form;
 /**
@@ -20,6 +21,10 @@ export class SnkCrud {
      * Determina se haverá exportação de dados
      */
     this.enableDataExporter = false;
+    /**
+     * Altera o modo de apresentação dos botões do snk-taskbar.
+    */
+    this.presentationMode = PresentationMode.PRIMARY;
   }
   /**
    * Usado para alternar a visão entre GRID e FORM externamente.
@@ -55,6 +60,16 @@ export class SnkCrud {
       this._snkForm.showConfig();
     }
   }
+  validatePresentationMode() {
+    if (Object.values(PresentationMode).includes(this.presentationMode)) {
+      return;
+    }
+    this.presentationMode = PresentationMode.PRIMARY;
+  }
+  addDataElementID() {
+    const dataInfo = { dataUnit: this._dataUnit };
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
   insertionModeHandler() {
     this.gridToForm();
   }
@@ -93,12 +108,11 @@ export class SnkCrud {
       this.configName = application.configName;
     }
   }
-  addDataElementID() {
-    const dataInfo = { dataUnit: this._dataUnit };
-    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  componentWillRender() {
+    this.validatePresentationMode();
   }
   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), actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, enableDataExporter: this.enableDataExporter }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { ref: (ref) => this._snkForm = ref, "data-element-id": "crud_form", configName: this.configName, actionsList: this.actionsList, onExit: () => this.setViewMode(GRID_MODE), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, h("slot", { name: "SnkFormTaskBar" }))), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._viewMode, onConfigSelected: (evt) => this.executeAction(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), actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection, enableDataExporter: this.enableDataExporter, presentationMode: this.presentationMode }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { ref: (ref) => this._snkForm = ref, "data-element-id": "crud_form", configName: this.configName, actionsList: this.actionsList, onExit: () => this.setViewMode(GRID_MODE), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), presentationMode: this.presentationMode }, h("slot", { name: "SnkFormTaskBar" }))), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._viewMode, onConfigSelected: (evt) => this.executeAction(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail) })));
   }
   static get is() { return "snk-crud"; }
   static get encapsulation() { return "scoped"; }
@@ -249,6 +263,29 @@ export class SnkCrud {
         "attribute": "enable-data-exporter",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "presentationMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PresentationMode",
+          "resolved": "PresentationMode.PRIMARY | PresentationMode.SECONDARY",
+          "references": {
+            "PresentationMode": {
+              "location": "import",
+              "path": "../../lib/@types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Altera o modo de apresenta\u00E7\u00E3o dos bot\u00F5es do snk-taskbar."
+        },
+        "attribute": "presentation-mode",
+        "reflect": false,
+        "defaultValue": "PresentationMode.PRIMARY"
       }
     };
   }

package/dist/collection/components/snk-data-exporter/snk-data-exporter.css

@@ -1,6 +1,6 @@
 :host {
   /*@doc Define o posicionamento de z-index do componente.*/
-  --snk-data-exporter--z-index: var(--more-visible, 2);
+  --snk-data-exporter--z-index: var(--most-visible, 3);
 
   /*private*/
   display: flex;
@@ -13,7 +13,9 @@
   display: flex;
   width: fit-content;
   height: fit-content;
+}
 
+.snk-data-exporter--overlap {
   /*public*/
   z-index: var(--snk-data-exporter--z-index);
 }

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

@@ -148,9 +148,11 @@ export class SnkDataExporter {
     }
   }
   render() {
-    return (h(Host, null, h("div", { class: "snk-data-exporter" }, h("ez-button", Object.assign({ ref: (ref) => this._ezButton = ref, iconName: "file-download", size: "small", mode: "icon", onClick: () => this.controlDropdown() }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("button")}` })), this._showDropdown &&
+    return (h(Host, null, h("div", { class: `snk-data-exporter
+          ${this._showDropdown ? " snk-data-exporter--overlap" : ""}
+        ` }, h("ez-button", Object.assign({ ref: (ref) => this._ezButton = ref, iconName: "file-download", size: "small", mode: "icon", onClick: () => this.controlDropdown() }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("button")}` })), this._showDropdown &&
       h("ez-dropdown", Object.assign({ ref: (ref) => this._ezDropdown = ref, items: this._items, onEzClick: (evt) => this.processExporter(evt) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("dropdown")}` }))), this._showDropdown &&
-      h("div", Object.assign({ class: "ez-scrim ez-scrim-light" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("ezScrim")}` })), h("snk-exporter-email-sender", { ref: ref => this._snkEmailSender = ref, getMessage: (key, params) => this.getMessage(key, params) })));
+      h("div", Object.assign({ class: "ez-scrim ez-scrim--light" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("ezScrim")}` })), h("snk-exporter-email-sender", { ref: ref => this._snkEmailSender = ref, getMessage: (key, params) => this.getMessage(key, params) })));
   }
   static get is() { return "snk-data-exporter"; }
   static get encapsulation() { return "scoped"; }

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

@@ -17,12 +17,13 @@ export class SnkDataUnit {
         copyMode: false,
         isDirty: this.dataUnit.isDirty(),
         hasDirtyRecords: this.dataUnit.hasDirtyRecords(),
-        selectedRecords: this.dataUnit.getSelectedRecords()
+        selectedRecords: this.dataUnit.getSelectedRecords(),
+        selectedRecord: this.dataUnit.getSelectedRecord()
       };
-      this.dataUnit.records.forEach(r => {
-        if (r.__record__id__.startsWith('NEW_')) {
+      this.dataUnit.records.forEach(record => {
+        if (record.__record__id__.startsWith('NEW_')) {
           duState.insertionMode = true;
-          duState.copyMode || (duState.copyMode = r['__record__source__id__'] != undefined);
+          duState.copyMode || (duState.copyMode = record['__record__source__id__'] != undefined);
         }
       });
       this.dataState = duState;
@@ -76,6 +77,7 @@ export class SnkDataUnit {
     }
   }
   observeDataUnit() {
+    this.handlerLinkFields();
     this.dataUnitReady.emit(this.dataUnit);
   }
   /**
@@ -221,11 +223,21 @@ export class SnkDataUnit {
     }
     return OperationMap.CLEAN;
   }
+  async getDataUnitParentOrChild() {
+    var _a;
+    const cacheName = this.dataUnitName ? this.dataUnitName : this.entityName;
+    if (this._parentSnkDataUnit) {
+      this._parentDataUnit = await ((_a = this._parentSnkDataUnit) === null || _a === void 0 ? void 0 : _a.getDataUnit());
+      return await this._application.getDataUnit(this.entityName, undefined, this._parentDataUnit);
+    }
+    else {
+      return await this._application.getDataUnit(this.entityName, cacheName);
+    }
+  }
   async loadDataUnit() {
     if (!this.dataUnit) {
       if (this._application && this.entityName) {
-        const cacheName = this.dataUnitName ? this.dataUnitName : this.entityName;
-        this.dataUnit = await this._application.getDataUnit(this.entityName, cacheName);
+        this.dataUnit = await this.getDataUnitParentOrChild();
         this.dataUnit.pageSize = this.pageSize;
         this.dataUnit.unsubscribe(this._dataUnitObserver);
         this.dataUnit.addInterceptor(this);
@@ -237,12 +249,39 @@ export class SnkDataUnit {
       }
     }
   }
+  getParentSnkDataUnit() {
+    let currentElement = this.element;
+    while (currentElement.parentNode) {
+      if (currentElement.parentNode.nodeName === 'SNK-DATA-UNIT') {
+        return currentElement.parentNode;
+      }
+      currentElement = currentElement.parentNode;
+    }
+    return;
+  }
+  handlerLinkFields() {
+    var _a, _b;
+    const metadata = Object.assign({}, this.dataUnit.metadata);
+    if (!this._parentDataUnit)
+      return;
+    const child = this._parentDataUnit.getChildInfo(this.entityName);
+    if (!child)
+      return;
+    const fieldsLink = (_a = child === null || child === void 0 ? void 0 : child.links) === null || _a === void 0 ? void 0 : _a.map(link => link.target);
+    (_b = metadata === null || metadata === void 0 ? void 0 : metadata.fields) === null || _b === void 0 ? void 0 : _b.forEach(field => {
+      if (fieldsLink === null || fieldsLink === void 0 ? void 0 : fieldsLink.includes(field.name)) {
+        field.visible = false;
+      }
+    });
+    this.dataUnit.metadata = metadata;
+  }
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     this._application.getAllAccess().then(access => this._permissions = access);
+    this._parentSnkDataUnit = this.getParentSnkDataUnit();
   }
   componentDidLoad() {
     this.loadDataUnit();
@@ -404,7 +443,7 @@ export class SnkDataUnit {
     return [{
         "method": "dataStateChange",
         "name": "dataStateChange",
-        "bubbles": true,
+        "bubbles": false,
         "cancelable": true,
         "composed": true,
         "docs": {
@@ -423,7 +462,7 @@ export class SnkDataUnit {
       }, {
         "method": "dataUnitReady",
         "name": "dataUnitReady",
-        "bubbles": true,
+        "bubbles": false,
         "cancelable": true,
         "composed": true,
         "docs": {
@@ -443,7 +482,7 @@ export class SnkDataUnit {
       }, {
         "method": "insertionMode",
         "name": "insertionMode",
-        "bubbles": true,
+        "bubbles": false,
         "cancelable": true,
         "composed": true,
         "docs": {
@@ -458,7 +497,7 @@ export class SnkDataUnit {
       }, {
         "method": "cancelEdition",
         "name": "cancelEdition",
-        "bubbles": true,
+        "bubbles": false,
         "cancelable": true,
         "composed": true,
         "docs": {

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

@@ -44,7 +44,7 @@ export class SnkFilterItem {
       left: this.getScrollOffsetLeft(),
       top: this.getScrollOffsetTop(),
       useOverlay: true,
-      overlayClassName: 'ez-scrim ez-scrim-light',
+      overlayClassName: 'ez-scrim ez-scrim--light',
       isFixed: true
     };
   }

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

@@ -19,7 +19,7 @@
   min-width: 265px;
   
   /*public*/
-  z-index: var(--more-visible, 2);
+  z-index: var(--most-visible, 3);
   background-color: var(--background--xlight, #fff);
   border-radius: var(--border--radius-medium, 12px);
   box-shadow: var(--shadow, 0px 0px 16px 0px #000);

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

@@ -25,7 +25,7 @@
 
   /*public*/
   background: var(--background--body);
-  z-index: var(--more-visible, 2);
+  z-index: var(--visible);
   padding-left: var(--space--large);
   padding-right: var(--space--large);
   margin-left: calc(var(--space--large) * -1);