@sankhyalabs/sankhyablocks 2.9.0 → 2.11.0

package/dist/collection/components/snk-form/subcomponents/snk-tab-config/snk-tab-config.css

@@ -13,7 +13,44 @@
   --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>');
   /*@doc Contém o ícone de avançar para a aba posterior.*/
   --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>');
-
+  /*@doc Define a cor de fundo da barra do componente.*/
+  --snk-tab-config__lower-bar--background-color: var(--color--disable-primary, #e5eaf0);
+  /*@doc Define a borda da barra do componente.*/
+  --snk-tab-config__lower-bar--border: 2px solid var(--color--disable-primary, #e5eaf0);
+  /*@doc Define a cor do texto do componente.*/
+  --snk-tab-config__tab--color: var(--text--primary, #626e82);
+  /*@doc Define a fonte do texto do componente.*/
+  --snk-tab-config__tab--font-family: var(--font-pattern, "Roboto");
+  /*@doc Define o tamanho do texto do componente.*/
+  --snk-tab-config__tab--font-size: var(--title--small, 14px);
+  /*@doc Define o espaçamento interno do componente.*/
+  --snk-tab-config__tab--padding: var(--space--small, 6px) var(--space--medium, 12px);
+  /*@doc Define a cor do texto ativo do componente.*/
+  --snk-tab-config__tab-is-active--color: var(--color--primary, #008561);
+  /*@doc Define a cor no hover do texto do componente.*/
+  --snk-tab-config__tab-hover--color: var(--color--secondary, #383c45);
+  /*@doc Define a borda no foco do componente.*/
+  --snk-tab-config__tab-is-focused--border: 1px dashed var(--color--primary, #008561);
+  /*@doc Define a sombra do label do componente.*/
+  --snk-tab-config__tab-label--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
+  /*@doc Define o espaçamento externo inferior do label do componente.*/
+  --snk-tab-config__tab-label--margin-bottom: var(--space--extra-small, 3px);
+  /*@doc Define a cor do icone do botão de nova aba do componente.*/
+  --snk-tab-config__new-button-icon--color: var(--color--secondary-700, #1C1D22);
+  /*@doc Define a cor de fundo dos botões de navegação na barra do componente.*/
+  --snk-tab-config__forward-button--background-color: var(--text--primary, #626e82);
+  /*@doc Define a cor de fundo no hover dos botões de navegação na barra do componente.*/
+  --snk-tab-config__forward-button-hover--background-color: var(--color--primary, #008561);
+  /*@doc Define o espaçamento interno direito do icone esquerdo do componente.*/
+  --snk-tab-config__left-icon--padding-right: var(--space--small, 6px);
+  /*@doc Define a cor do icone esquerdo do componente.*/
+  --snk-tab-config__left-icon--color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor do label desabilitado do componente.*/
+  --snk-tab-config__tab-label-disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Define o espaçamento externo esquerdo no slot do componente.*/
+  --snk-tab-config__slot--margin-left: var(--space--small, 6px);
+
+  /*private*/
   display: flex;
   position: relative;
   width: 100%;
@@ -21,6 +58,7 @@
 }
 
 .tab-config__scroll {
+  /*private*/
   display: flex;
   width: 100%;
   scroll-behavior: smooth;
@@ -28,19 +66,8 @@
   scrollbar-width: none;
 }
 
-.tab-config__scroll--start-hidden {
-  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px);
-}
-
-.tab-config__scroll--middle {
-  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px));
-}
-
-.tab-config__scroll--end-hidden {
-  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px));
-}
-
 .tab-config__lower-bar {
+  /*private*/
   position: absolute;
   left: 0%;
   right: 0%;
@@ -49,11 +76,12 @@
   border-radius: 2px;
 
   /*public*/
-  background: var(--color--disable-primary);
-  border: 2px solid var(--color--disable-primary)
+  background-color: var(--snk-tab-config__lower-bar--background-color);
+  border: var(--snk-tab-config__lower-bar--border);
 }
 
 .tab-config__tab {
+  /*private*/
   display: flex;
   border: none;
   background-color: unset;
@@ -63,62 +91,69 @@
   min-width: fit-content;
 
   /*public*/
-  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);
+  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:focus,
 .tab-config__forward-button,
 .tab-config__backward-button {
+  /*private*/
   outline: none;
 }
 
 .tab-config__tab--is-active {
+  /*private*/
   position: relative;
 
   /*public*/
-  color: var(--color--primary, #008561);
+  color: var(--snk-tab-config__tab-is-active--color);
 }
 
 .tab-config__tab:hover {
   /*public*/
-  color: var(--color--secondary, #383c45);
+  color: var(--snk-tab-config__tab-hover--color);
 }
 
 .tab-config__tab--is-active:hover {
   /*public*/
-  color: var(--color--primary, #008561);
+  color: var(--snk-tab-config__tab-is-active--color);
 }
 
 .tab-config__tab--is-active::after {
+  /*private*/
   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;
+
+  /*public*/
+  background-color: var(--snk-tab-config__tab-is-active--color);
 }
 
 .tab-config__tab--is-focused {
   /*public*/
-  border: 1px dashed var(--color--primary, #000000c5);
+  border: var(--snk-tab-config__tab-is-focused--border);
 }
 
 .tab-config__tab-label {
+  /*private*/
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 
   /*public*/
-  text-shadow: var(--text-shadow);
-  margin-bottom: var(--space--extra-small, 3px);
+  text-shadow: var(--snk-tab-config__tab-label--text-shadow);
+  margin-bottom: var(--snk-tab-config__tab-label--margin-bottom);
 }
 
 .tab-config__forward-button,
-.tab-config__backward-button{
+.tab-config__backward-button {
+  /*private*/
   position: absolute;
   z-index: 1;
   display: flex;
@@ -136,6 +171,7 @@
 }
 
 .tab-config__new-button {
+  /*private*/
   position: absolute;
   z-index: 1;
   display: flex;
@@ -152,27 +188,33 @@
 }
 
 .tab-config__new-button ez-icon {
-  --ez-icon--color: var(--color--secondary-700, #1C1D22);
+  /*public*/
+  --ez-icon--color: var(--snk-tab-config__new-button-icon--color);
 }
 
 .tab-config__backward-button {
+  /*private*/
   left: 0px;
   box-shadow: 10px 10px 5px 5px white;
   background: white;
 }
 
 .tab-config__forward-button {
+  /*private*/
   box-shadow: 10px 10px 5px 20px white;
   background: white;
 }
 
 .tab-config__forward-button::after,
 .tab-config__backward-button::after {
+  /*private*/
   content: '';
   display: flex;
-  background-color: var(--text--primary, #008561);
   width: 10px;
   height: 16px;
+
+  /*public*/
+  background-color: var(--snk-tab-config__forward-button--background-color);
 }
 
 .tab-config__forward-button::after {
@@ -190,83 +232,92 @@
 .tab-config__forward-button:hover::after,
 .tab-config__backward-button:hover::after {
   /*public*/
-  background-color: var(--color--primary, #4e4e4e);
+  background-color: var(--snk-tab-config__forward-button-hover--background-color);
 }
 
 .tab-config__new-button:hover ez-icon {
-  --ez-icon--color: var(--color--primary, #4e4e4e);
+  /*public*/
+  --ez-icon--color: var(--snk-tab-config__forward-button-hover--background-color);
 }
 
 .tab-config__hidden {
+  /*private*/
   display: none;
 }
 
 .tab-config__scroll::-webkit-scrollbar {
+  /*private*/
   display: none;
 }
 
 .tab-config__left-icon {
   /*public*/
-  padding-right: var(--space--small);
-  --ez-icon--color: var(--text--disable);
+  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 {
   /*public*/
-  --ez-icon--color: var(--text--disable, #AFB6C0);
+  --ez-icon--color: var(--snk-tab-config__left-icon--color);
 }
 
-.tab-config__right-icon {  
+.tab-config__right-icon {
+  /*private*/
   visibility: hidden;
 
   /*public*/
-  padding-left: var(--space--small);
+  padding-left: var(--snk-tab-config__left-icon--padding-right);
 }
 
 .tab-config__tab:hover .tab-config__right-icon {
+  /*private*/
   visibility: visible;
 }
 
-.tab-config__tab--is-active .tab-config__right-icon{
+.tab-config__tab--is-active .tab-config__right-icon {
+  /*private*/
   visibility: visible;
 
   /*public*/
-  --ez-icon--color: var(--color--primary);
+  --ez-icon--color: var(--snk-tab-config__tab-is-active--color);
 }
 
-.tab-config__tab:hover .tab-config__right-icon{
+.tab-config__tab:hover .tab-config__right-icon {
   /*public*/
-  --ez-icon--color: var(--color--secondary, #383c45);
+  --ez-icon--color: var(--snk-tab-config__tab-hover--color);
 }
 
-.tab-config__tab--is-active:hover .tab-config__right-icon{
+.tab-config__tab--is-active:hover .tab-config__right-icon {
   /*public*/
-  --ez-icon--color: var(--color--primary);
+  --ez-icon--color: var(--snk-tab-config__tab-is-active--color);
 }
 
 .tab-config__actions-button {
+  /*private*/
   --ez-actions-button__btn-action--min-width: 100px;
   visibility: hidden;
   opacity: 0;
-  transition:visibility 1s linear,opacity 0.3s linear;
+  transition: visibility 1s linear, opacity 0.3s linear;
 }
 
 .tab-config__tab:hover .tab-config__actions-button {
+  /*private*/
   visibility: visible;
   opacity: 1;
   transition: visibility 0.2s linear, opacity 0.10s linear;
 }
 
 [data-draggable-element] {
+  /*private*/
   cursor: grab;
 }
 
 .tab-config__tab-label-disabled {
   /*public*/
-  color: var(--text--disable, #AFB6C0);
+  color: var(--snk-tab-config__tab-label-disabled--color);
 }
 
 .tab-config__slot {
   /*public*/
-  margin-left: var(--space--small, 6px);
+  margin-left: var(--snk-tab-config__slot--margin-left);
 }

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

@@ -1,8 +1,9 @@
 import { h } from '@stencil/core';
 import { ApplicationContext, DataType, ElementIDUtils } from '@sankhyalabs/core';
 import { UserInterface } from '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
-import TaskbarProcessor from '../snk-taskbar/processor/taskbar-processor';
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
+import { PresentationMode } from '../../lib/@types';
+import TaskbarProcessor from '../snk-taskbar/processor/taskbar-processor';
 import store from "../../lib/store";
 export class SnkGrid {
   constructor() {
@@ -18,6 +19,10 @@ export class SnkGrid {
      * 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;
   }
   /**
    * Exibe a janela de configurações da grade.
@@ -137,6 +142,19 @@ export class SnkGrid {
     };
     store.set("exporterProviders", Object.assign(Object.assign({}, store.get("exporterProviders")), { [this.configName]: dataExporterProvider }));
   }
+  getPrimaryButton() {
+    return this.presentationMode === PresentationMode.PRIMARY ? "INSERT" : "";
+  }
+  validatePresentationMode() {
+    if (Object.values(PresentationMode).includes(this.presentationMode)) {
+      return;
+    }
+    this.presentationMode = PresentationMode.PRIMARY;
+  }
+  addElementID() {
+    const dataInfo = { dataUnit: this._dataUnit };
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     let parent = this._element.parentElement;
@@ -168,16 +186,13 @@ export class SnkGrid {
     this._headerTaskbarProcessor.process(headerTaskbarId, this.taskbarManager, this._dataState, undefined, invisibleButtons);
     this._topTaskbarProcessor.process("snkGridTopTaskbar", this.taskbarManager, this._dataState, undefined, invisibleButtons);
     this.dataExporterProviderStore();
-  }
-  addElementID() {
-    const dataInfo = { dataUnit: this._dataUnit };
-    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    this.validatePresentationMode();
   }
   render() {
     if (!this._dataUnit) {
       return undefined;
     }
-    return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("snk-taskbar", { dataUnit: this._dataUnit, configName: this.configName, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), application: this._application, selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
+    return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: this.getPrimaryButton() })), h("ez-grid", { ref: ref => this._grid = ref, "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("snk-taskbar", { dataUnit: this._dataUnit, configName: this.configName, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), application: this._application, selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
   }
   static get is() { return "snk-grid"; }
   static get encapsulation() { return "scoped"; }
@@ -307,6 +322,29 @@ export class SnkGrid {
         "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-taskbar/elements/taskbar-elements.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { PresentationMode } from "../../../lib/@types";
 import store from "../../../lib/store";
 export var TaskbarElement;
 (function (TaskbarElement) {
@@ -44,7 +45,7 @@ export const buildCustomButton = (def, className, dataElementId, action, isEnabl
     return textButton(def.name, className, dataElementId, text, hint, action, isEnabled);
   }
 };
-export const buildElem = (element, className, dataElementId, getTitle, action, isEnabled, actions, configName) => {
+export const buildElem = (element, className, dataElementId, getTitle, action, isEnabled, actions, configName, presentationMode) => {
   var _a;
   const title = getTitle(element);
   switch (element) {
@@ -61,11 +62,21 @@ export const buildElem = (element, className, dataElementId, getTitle, action, i
     case TaskbarElement.REMOVE:
       return iconButton("delete", element, className, dataElementId, title, action, isEnabled);
     case TaskbarElement.INSERT:
-      return iconTextButton("plus", element, className, dataElementId, title, title, action, isEnabled);
+      if (presentationMode === PresentationMode.PRIMARY) {
+        return iconTextButton("plus", element, className, dataElementId, title, title, action, isEnabled);
+      }
+      else {
+        return iconButton("plus", element, className, dataElementId, title, action, isEnabled);
+      }
     case TaskbarElement.CANCEL:
       return textButton(element, className, dataElementId, title, title, action, isEnabled);
     case TaskbarElement.SAVE:
-      return iconTextButton("save", element, className, dataElementId, title, title, action, isEnabled);
+      if (presentationMode === PresentationMode.PRIMARY) {
+        return iconTextButton("save", element, className, dataElementId, title, title, action, isEnabled);
+      }
+      else {
+        return iconButton("save", element, className, dataElementId, title, action, isEnabled);
+      }
     case TaskbarElement.GRID_MODE:
       return iconButton("table", element, className, dataElementId, title, action, isEnabled);
     case TaskbarElement.FORM_MODE:

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

@@ -2,8 +2,13 @@ import { ApplicationContext, ElementIDUtils, StringUtils } from '@sankhyalabs/co
 import { h, Host } from '@stencil/core';
 import { AuthorizationConfig } from '../snk-configurator/AuthorizationConfig';
 import { TaskbarElement, buildElem, AuthorizationElements, buildCustomButton, VisibleWhenForbidden } from './elements/taskbar-elements';
+import { PresentationMode } from '../../lib/@types';
 export class SnkTaskbar {
   constructor() {
+    /**
+     * Altera o modo de apresentação dos botões do snk-taskbar.
+    */
+    this.presentationMode = PresentationMode.PRIMARY;
     this._titleKeyByElement = {
       [TaskbarElement.UPDATE]: "snkTaskbar.titleUpdate",
       [TaskbarElement.PREVIOUS]: "snkTaskbar.titlePrevious",
@@ -103,13 +108,19 @@ export class SnkTaskbar {
     }
     return !(this.disabledButtons && this.disabledButtons.includes(elem));
   }
+  validatePresentationMode() {
+    if (Object.values(PresentationMode).includes(this.presentationMode)) {
+      return;
+    }
+    this.presentationMode = PresentationMode.PRIMARY;
+  }
   getElement(index, def) {
     let className = def === this.primaryButton ? "ez-button--primary " : "";
     if (index > 1) {
       className += "ez-padding-left--medium";
     }
     if (TaskbarElement[def.toString()]) {
-      return buildElem(def, className, this.getIdElemBtnNative(def), elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), this.actionsList, this.configName);
+      return buildElem(def, className, this.getIdElemBtnNative(def), elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), this.actionsList, this.configName, this.presentationMode);
     }
     else {
       return buildCustomButton(def, className, this.getIdElemBtnCustom(def), elem => this.elementClick(elem), elem => this.isEnabled(elem));
@@ -154,6 +165,7 @@ export class SnkTaskbar {
     if (this._definitions == undefined && this._permissions) {
       this._definitions = this.elementsFromString(this.buttons);
     }
+    this.validatePresentationMode();
   }
   componentDidLoad() {
     const dataInfo = { dataUnit: this.dataUnit };
@@ -247,7 +259,7 @@ export class SnkTaskbar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Mapa com defini\u00E7\u00E3o de bot\u00F5es personalizados. A chave do mapa deve ser \npassada na lista \"buttons\" no lugar onde o bot\u00E3o ir\u00E1 aparecer."
+          "text": "Mapa com defini\u00E7\u00E3o de bot\u00F5es personalizados. A chave do mapa deve ser\npassada na lista \"buttons\" no lugar onde o bot\u00E3o ir\u00E1 aparecer."
         }
       },
       "actionsList": {
@@ -327,6 +339,29 @@ export class SnkTaskbar {
           "tags": [],
           "text": "Inst\u00E2ncia do DataUnit."
         }
+      },
+      "presentationMode": {
+        "type": "string",
+        "mutable": true,
+        "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": true,
+        "defaultValue": "PresentationMode.PRIMARY"
       }
     };
   }

package/dist/collection/lib/@types/index.js

@@ -0,0 +1,5 @@
+export var PresentationMode;
+(function (PresentationMode) {
+  PresentationMode["PRIMARY"] = "primary";
+  PresentationMode["SECONDARY"] = "secondary";
+})(PresentationMode || (PresentationMode = {}));

package/dist/collection/lib/http/data-fetcher/fetchers/dataunit-fetcher.js

@@ -31,6 +31,13 @@ export default class DataUnitFetcher {
                     type
                     expression
                   }
+                },
+                children{
+                  name
+                  links{
+                    source
+                    target
+                  }
                 }
                 children{
                   name
@@ -41,9 +48,9 @@ export default class DataUnitFetcher {
                 }
               }
             }`);
-    this.templateByQuery.set("fetchData", gql `query($dataunit: String! $limit: Int $offset:Int $filters: [InputFilter!] $sort: [InputSort!]) {
+    this.templateByQuery.set("fetchData", gql `query($dataunit: String! $limit: Int $offset:Int $filters: [InputFilter!] $sort: [InputSort!] $parentRecordId: String) {
             $queryAlias$: fetchDataUnit(name: $dataunit){
-              data(limit: $limit offset: $offset filters: $filters sort: $sort){
+              data(limit: $limit offset: $offset filters: $filters sort: $sort parentRecordId: $parentRecordId){
                 limit
                 offset
                 total
@@ -80,8 +87,8 @@ export default class DataUnitFetcher {
             }
           }`);
   }
-  getDataUnit(entityName, resourceID) {
-    const dataUnit = new DataUnit(`dd://${entityName}/${resourceID}`);
+  getDataUnit(entityName, resourceID, parentDataUnit) {
+    const dataUnit = parentDataUnit != undefined ? parentDataUnit.getChildDataunit(`dd://${entityName}/${resourceID}`) : new DataUnit(`dd://${entityName}/${resourceID}`);
     dataUnit.metadataLoader = (dataUnit) => this.loadMetadata(dataUnit);
     dataUnit.dataLoader = (dataUnit, request) => this.loadData(dataUnit, request);
     dataUnit.saveLoader = (dataUnit, changes) => this.saveData(dataUnit, changes);
@@ -144,6 +151,7 @@ export default class DataUnitFetcher {
       const variables = { dataunit: dataUnit.name, sort, filters };
       variables.limit = limit;
       variables.offset = offset;
+      variables.parentRecordId = request.parentRecordId;
       if (!StringUtils.isEmpty(quickFilter === null || quickFilter === void 0 ? void 0 : quickFilter.term)) {
         if (variables.filter === undefined) {
           variables.filter = [];
@@ -211,6 +219,9 @@ export default class DataUnitFetcher {
       if (change.sourceId) {
         reqChange.sourceId = change.sourceId;
       }
+      if (record.__parent__record__id__) {
+        reqChange.parentRecordId = record.__parent__record__id__;
+      }
       return reqChange;
     });
     return new Promise((resolve, reject) => {