@sankhyalabs/sankhyablocks 2.9.0 → 2.11.0

package/dist/components/snk-application2.js

@@ -238,6 +238,13 @@ class DataUnitFetcher {
                     type
                     expression
                   }
+                },
+                children{
+                  name
+                  links{
+                    source
+                    target
+                  }
                 }
                 children{
                   name
@@ -248,9 +255,9 @@ class DataUnitFetcher {
                 }
               }
             }`);
-    this.templateByQuery.set("fetchData", dist.gql `query($dataunit: String! $limit: Int $offset:Int $filters: [InputFilter!] $sort: [InputSort!]) {
+    this.templateByQuery.set("fetchData", dist.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
@@ -287,8 +294,8 @@ 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);
@@ -351,6 +358,7 @@ 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 = [];
@@ -418,6 +426,9 @@ 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) => {
@@ -916,13 +927,13 @@ const SnkApplication = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * 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);
@@ -941,14 +952,14 @@ const SnkApplication = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   /**
    * 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));
       }

package/dist/components/snk-config-options2.js

@@ -4,7 +4,7 @@ import { DataType, getConvertedValue } from '@sankhyalabs/core/dist/dataunit/met
 import { CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
 import { a as VARS_BY_TYPE, D as DEFAULT_TYPE, T as TAGS_BY_TYPE } from './constants.js';
 
-const snkConfigOptionsCss = ".sc-snk-config-options-h{width:100%;border:2px solid var(--color--secondary-200);border-radius:15px}.config-options__switch-row.sc-snk-config-options{margin-top:-30px}";
+const snkConfigOptionsCss = ".sc-snk-config-options-h{--snk-config-options--border:2px solid var(--color--secondary-200, #D2D3DA);width:100%;border-radius:15px;border:var(--snk-config-options--border)}.config-options__switch-row.sc-snk-config-options{margin-top:-30px}";
 
 const SnkConfigOptions = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/snk-crud.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
+import { ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
 import { V as VIEW_MODE } from './constants.js';
-import { T as TaskbarElement, d as defineCustomElement$2 } from './snk-taskbar2.js';
+import { P as PresentationMode, T as TaskbarElement, d as defineCustomElement$2 } from './snk-taskbar2.js';
 import { d as defineCustomElement$i } from './snk-config-options2.js';
 import { d as defineCustomElement$h } from './snk-configurator2.js';
 import { d as defineCustomElement$g } from './snk-data-exporter2.js';
@@ -37,6 +37,10 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * 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.
@@ -72,6 +76,16 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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();
   }
@@ -110,12 +124,11 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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) })));
   }
   get _element() { return this; }
   static get style() { return snkCrudCss; }
@@ -127,6 +140,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "statusResolver": [16],
     "multipleSelection": [4, "multiple-selection"],
     "enableDataExporter": [4, "enable-data-exporter"],
+    "presentationMode": [1, "presentation-mode"],
     "_dataUnit": [32],
     "_dataState": [32],
     "_viewMode": [32],

package/dist/components/snk-data-exporter2.js

@@ -191,7 +191,7 @@ class ItemBuilder {
   }
 }
 
-const snkDataExporterCss = ".sc-snk-data-exporter-h{--snk-data-exporter--z-index:var(--more-visible, 2);display:flex;width:fit-content;height:fit-content}.snk-data-exporter.sc-snk-data-exporter{display:flex;width:fit-content;height:fit-content;z-index:var(--snk-data-exporter--z-index)}";
+const snkDataExporterCss = ".sc-snk-data-exporter-h{--snk-data-exporter--z-index:var(--most-visible, 3);display:flex;width:fit-content;height:fit-content}.snk-data-exporter.sc-snk-data-exporter{display:flex;width:fit-content;height:fit-content}.snk-data-exporter--overlap.sc-snk-data-exporter{z-index:var(--snk-data-exporter--z-index)}";
 
 const SnkDataExporter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -338,9 +338,11 @@ const SnkDataExporter = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     }
   }
   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) })));
   }
   get _element() { return this; }
   static get style() { return snkDataExporterCss; }

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

@@ -9,10 +9,10 @@ const SnkDataUnit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    this.dataStateChange = createEvent(this, "dataStateChange", 7);
-    this.dataUnitReady = createEvent(this, "dataUnitReady", 7);
-    this.insertionMode = createEvent(this, "insertionMode", 7);
-    this.cancelEdition = createEvent(this, "cancelEdition", 7);
+    this.dataStateChange = createEvent(this, "dataStateChange", 3);
+    this.dataUnitReady = createEvent(this, "dataUnitReady", 3);
+    this.insertionMode = createEvent(this, "insertionMode", 3);
+    this.cancelEdition = createEvent(this, "cancelEdition", 3);
     this._onDataUnitResolve = [];
     /**
      * Determina quantas linhas são retornadas por página.
@@ -26,12 +26,13 @@ const SnkDataUnit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         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;
@@ -85,6 +86,7 @@ const SnkDataUnit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   observeDataUnit() {
+    this.handlerLinkFields();
     this.dataUnitReady.emit(this.dataUnit);
   }
   /**
@@ -230,11 +232,21 @@ const SnkDataUnit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
     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);
@@ -246,12 +258,39 @@ const SnkDataUnit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
     }
   }
+  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();

package/dist/components/snk-field-config2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
 import { A as ACTION_CONFIG } from './constants.js';
 
-const snkFieldConfigCss = ".sc-snk-field-config-h{--snk-field-config--height:42px;--snk-field-config--width:100%;--snk-field-config__icon--width:48px;--snk-field-config--height--slim:32px;--snk-field-config--border-radius:var(--border--radius-medium, 12px);--snk-field-config--font-size:var(--text--medium, 14px);--snk-field-config--font-family:var(--font-pattern, Arial);--snk-field-config--font-weight:var(--text-weight--medium, 400);--snk-field-config--color:var(--title--primary, #000);--snk-field-config__input--background-color:var(--background--medium, #e0e0e0);--snk-field-config__input--border:var(--border--medium, 2px solid);--snk-field-config__input--border-color:var(--background--xlight, #fff);--snk-field-config__required--color:var(--color--error, #FF0000);--snk-field-config__transition--visibility:var(--transition, 0.2s linear);--snk-field-config__transition--opacity:var(--transition, 0.15s linear);display:flex;flex-wrap:wrap;position:relative;width:var(--snk-field-config--width)}.field-config.sc-snk-field-config{width:100%;box-sizing:border-box;display:flex;align-items:center;padding-left:var(--space--medium, 6px);font-weight:var(--snk-field-config--font-weight);height:var(--snk-field-config--height);border-radius:var(--snk-field-config--border-radius);font-family:var(--snk-field-config--font-family);font-size:var(--snk-field-config--font-size);border:var(--snk-field-config__input--border);border-color:var(--snk-field-config__input--border-color);background-color:var(--snk-field-config__input--background-color);color:var(--snk-field-config--color)}.field-config__config-popover.sc-snk-field-config{width:40px;margin-left:auto;z-index:var(--more-visible, 2)}.field-config__required-label.sc-snk-field-config{padding-left:var(--space--extra-small, 3px);color:var(--snk-field-config__required--color)}.field-config__add.sc-snk-field-config{display:flex;margin-left:auto;visibility:hidden;opacity:0;transition:visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity)}.field-config__options.sc-snk-field-config{display:flex;margin-left:auto;visibility:hidden;opacity:0;transition:visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity)}.field-config__options--is-active.sc-snk-field-config{display:flex;visibility:visible;opacity:1}.field-config__remove-icon.sc-snk-field-config{margin-right:-15px}.field-config.sc-snk-field-config:hover .field-config__options.sc-snk-field-config{display:flex;visibility:visible;opacity:1}.field-config.sc-snk-field-config:hover .field-config__add.sc-snk-field-config{visibility:visible;opacity:1}.field-config__draggable.sc-snk-field-config{padding-right:var(--space--small, 6px)}.field-config__config-outer-arrow.sc-snk-field-config{background-color:var(--color--secondary-200);clip-path:polygon(50% 0, 90% 100%, 10% 100%);border-radius:0.25em 0 0 0;width:30px;height:15px;padding-top:3px;border-bottom:1px solid #FFFFFF}.field-config__config-inner-arrow.sc-snk-field-config{background-color:#FFFFFF;clip-path:polygon(50% 0, 90% 100%, 10% 100%);border-radius:0.25em 0 0 0;width:30px;height:15px}.ez-box__container.sc-snk-field-config ez-collapsible-box.sc-snk-field-config{--snk-collapsible-box__header--padding-left:6px}ez-icon.sc-snk-field-config{--snk-icon--color:var(--snk-field-config--color)}ez-popover.sc-snk-field-config{--snk-popover__box--background-color:transparent;--snk-popover__box--box-shadow:none}.field-config__options.sc-snk-field-config ez-button.sc-snk-field-config{--snk-button--background-color:transparent;--snk-button--focus--border:none;--snk-button--focus--box-shadow:none}";
+const snkFieldConfigCss = ".sc-snk-field-config-h{--snk-field-config--height:42px;--snk-field-config--width:100%;--snk-field-config__icon--width:48px;--snk-field-config-slim--height:32px;--snk-field-config--border-radius:var(--border--radius-medium, 12px);--snk-field-config--font-size:var(--text--medium, 14px);--snk-field-config--font-family:var(--font-pattern, Arial);--snk-field-config--font-weight:var(--text-weight--medium, 400);--snk-field-config--color:var(--title--primary, #000);--snk-field-config--padding-left:var(--space--medium, 6px);--snk-field-config__input--background-color:var(--background--medium, #e0e0e0);--snk-field-config__input--border:var(--border--medium, 2px solid);--snk-field-config__input--border-color:var(--background--xlight, #fff);--snk-field-config__required--color:var(--color--error, #FF0000);--snk-field-config__required--padding-left:var(--space--extra-small, 3px);--snk-field-config__transition--visibility:var(--transition, 0.2s linear);--snk-field-config__transition--opacity:var(--transition, 0.15s linear);--snk-field-config__config-popover--z-index:var(--more-visible, 2);--snk-field-config__config-outer-arrow--background-color:var(--color--secondary-200, #D2D3DA);--snk-field-config__draggable--padding-right:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--snk-field-config--width)}.field-config.sc-snk-field-config{width:100%;box-sizing:border-box;display:flex;align-items:center;padding-left:var(--snk-field-config--padding-left);font-weight:var(--snk-field-config--font-weight);height:var(--snk-field-config--height);border-radius:var(--snk-field-config--border-radius);font-family:var(--snk-field-config--font-family);font-size:var(--snk-field-config--font-size);border:var(--snk-field-config__input--border);border-color:var(--snk-field-config__input--border-color);background-color:var(--snk-field-config__input--background-color);color:var(--snk-field-config--color)}.field-config__config-popover.sc-snk-field-config{width:40px;margin-left:auto;z-index:var(--snk-field-config__config-popover--z-index)}.field-config__required-label.sc-snk-field-config{color:var(--snk-field-config__required--color);padding-left:var(--snk-field-config__required--padding-left)}.field-config__add.sc-snk-field-config{display:flex;margin-left:auto;visibility:hidden;opacity:0;transition:visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity)}.field-config__options.sc-snk-field-config{display:flex;margin-left:auto;visibility:hidden;opacity:0;transition:visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity)}.field-config__options--is-active.sc-snk-field-config{display:flex;visibility:visible;opacity:1}.field-config__remove-icon.sc-snk-field-config{margin-right:-15px}.field-config.sc-snk-field-config:hover .field-config__options.sc-snk-field-config{display:flex;visibility:visible;opacity:1}.field-config.sc-snk-field-config:hover .field-config__add.sc-snk-field-config{visibility:visible;opacity:1}.field-config__draggable.sc-snk-field-config{padding-right:var(--snk-field-config__draggable--padding-right)}.field-config__config-outer-arrow.sc-snk-field-config{clip-path:polygon(50% 0, 90% 100%, 10% 100%);border-radius:0.25em 0 0 0;width:30px;height:15px;padding-top:3px;border-bottom:1px solid #FFFFFF;background-color:var(--snk-field-config__config-outer-arrow--background-color)}.field-config__config-inner-arrow.sc-snk-field-config{background-color:#FFFFFF;clip-path:polygon(50% 0, 90% 100%, 10% 100%);border-radius:0.25em 0 0 0;width:30px;height:15px}.ez-box__container.sc-snk-field-config ez-collapsible-box.sc-snk-field-config{--snk-collapsible-box__header--padding-left:6px}ez-icon.sc-snk-field-config{--snk-icon--color:var(--snk-field-config--color)}ez-popover.sc-snk-field-config{--snk-popover__box--background-color:transparent;--snk-popover__box--box-shadow:none}.field-config__options.sc-snk-field-config ez-button.sc-snk-field-config{--snk-button--background-color:transparent;--snk-button--focus--border:none;--snk-button--focus--box-shadow:none}";
 
 const SnkFieldConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/snk-filter-bar2.js

@@ -105,7 +105,7 @@ function buildPersonalized(item) {
   };
 }
 
-const snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns:minmax(100px, 100%) 1fr 1fr}.snk-filter__popover-container.sc-snk-filter-bar{display:flex;cursor:auto}.snk-filter__popover.sc-snk-filter-bar{display:flex;flex-direction:column;position:absolute;width:fit-content;height:fit-content;min-width:265px;z-index:var(--more-visible, 2);background-color:var(--background--xlight, #fff);border-radius:var(--border--radius-medium, 12px);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.snk-filter-item__editor-header.sc-snk-filter-bar{flex-grow:1;font-weight:var(--text-weight--medium, 400);color:var(--color--title-primary, #2B3A54)}.snk-filter__popover-rule.sc-snk-filter-bar{border-style:solid;border-color:var(--color--disable-secondary, #F2F5F8);border-radius:1px;border-width:1px;width:100%}.editor__ez-check.sc-snk-filter-bar{--ez-check__label--padding-left:0}.snk-filter-item__editor-header-button.sc-snk-filter-bar{cursor:pointer;background-color:transparent;border:none;padding:3px;outline-color:var(--color--primary)}.snk-filter-bar__divider.sc-snk-filter-bar{margin-bottom:var(--space--small)}.snk-filter-bar__filter-list-items-container.sc-snk-filter-bar{overflow-y:auto;max-height:360px;margin-top:var(--space--small, 6px)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar{cursor:pointer;border-radius:var(--border--radius-small, 6px);border:none;background-color:transparent}.snk-filter-bar__filter-list-item__label.sc-snk-filter-bar{color:var(--title--primary)}.snk-filter-bar__filter-list-item__label--secondary.sc-snk-filter-bar{color:var(--text--primary)}.snk-filter-bar__filter-list-item__icon.sc-snk-filter-bar{--ez-icon--color:var(--title--primary)}.snk-filter-bar__filter-list-item__icon--secondary.sc-snk-filter-bar{--ez-icon--color:var(--text--secondary)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:focus-visible{outline:none;background-color:var(--background--medium)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:hover{background-color:var(--background--medium)}.snk-filter-bar__filter-list-items-container--empty.sc-snk-filter-bar{width:100%;height:100px;display:flex;justify-content:center;align-self:center;align-items:center}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar{position:relative}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar::after{display:flex;position:absolute;content:\"\";width:8px;height:8px;top:7px;left:17px;background-color:var(--icon--alert--color, #008561);border-radius:50%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar{--modal-item-border-width:2px;display:flex;flex-direction:row;margin-left:var(--modal-item-border-width);border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #f0f3f7);border:none;width:100%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar:focus-visible{outline:var(--color--primary) solid var(--modal-item-border-width)}.snk-filter-bar__filter-modal-item__check.sc-snk-filter-bar{width:auto}.snk-filter-bar__filter-modal-item__label.sc-snk-filter-bar{font-weight:var(--text-weight--medium)}.snk-filter-bar__filter-modal-content.sc-snk-filter-bar{display:grid;grid-template-rows:auto auto 1fr auto;width:99%;height:100%}";
+const snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns:minmax(100px, 100%) 1fr 1fr}.snk-filter__popover-container.sc-snk-filter-bar{display:flex;cursor:auto}.snk-filter__popover.sc-snk-filter-bar{display:flex;flex-direction:column;position:absolute;width:fit-content;height:fit-content;min-width:265px;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)}.snk-filter-item__editor-header.sc-snk-filter-bar{flex-grow:1;font-weight:var(--text-weight--medium, 400);color:var(--color--title-primary, #2B3A54)}.snk-filter__popover-rule.sc-snk-filter-bar{border-style:solid;border-color:var(--color--disable-secondary, #F2F5F8);border-radius:1px;border-width:1px;width:100%}.editor__ez-check.sc-snk-filter-bar{--ez-check__label--padding-left:0}.snk-filter-item__editor-header-button.sc-snk-filter-bar{cursor:pointer;background-color:transparent;border:none;padding:3px;outline-color:var(--color--primary)}.snk-filter-bar__divider.sc-snk-filter-bar{margin-bottom:var(--space--small)}.snk-filter-bar__filter-list-items-container.sc-snk-filter-bar{overflow-y:auto;max-height:360px;margin-top:var(--space--small, 6px)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar{cursor:pointer;border-radius:var(--border--radius-small, 6px);border:none;background-color:transparent}.snk-filter-bar__filter-list-item__label.sc-snk-filter-bar{color:var(--title--primary)}.snk-filter-bar__filter-list-item__label--secondary.sc-snk-filter-bar{color:var(--text--primary)}.snk-filter-bar__filter-list-item__icon.sc-snk-filter-bar{--ez-icon--color:var(--title--primary)}.snk-filter-bar__filter-list-item__icon--secondary.sc-snk-filter-bar{--ez-icon--color:var(--text--secondary)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:focus-visible{outline:none;background-color:var(--background--medium)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:hover{background-color:var(--background--medium)}.snk-filter-bar__filter-list-items-container--empty.sc-snk-filter-bar{width:100%;height:100px;display:flex;justify-content:center;align-self:center;align-items:center}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar{position:relative}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar::after{display:flex;position:absolute;content:\"\";width:8px;height:8px;top:7px;left:17px;background-color:var(--icon--alert--color, #008561);border-radius:50%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar{--modal-item-border-width:2px;display:flex;flex-direction:row;margin-left:var(--modal-item-border-width);border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #f0f3f7);border:none;width:100%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar:focus-visible{outline:var(--color--primary) solid var(--modal-item-border-width)}.snk-filter-bar__filter-modal-item__check.sc-snk-filter-bar{width:auto}.snk-filter-bar__filter-modal-item__label.sc-snk-filter-bar{font-weight:var(--text-weight--medium)}.snk-filter-bar__filter-modal-content.sc-snk-filter-bar{display:grid;grid-template-rows:auto auto 1fr auto;width:99%;height:100%}";
 
 const PERSONALIZED_FILTER = "PERSONALIZED_FILTER";
 const DEFAULT_FILTER = "DEFAULT_FILTER";

package/dist/components/snk-filter-item2.js

@@ -50,7 +50,7 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       left: this.getScrollOffsetLeft(),
       top: this.getScrollOffsetTop(),
       useOverlay: true,
-      overlayClassName: 'ez-scrim ez-scrim-light',
+      overlayClassName: 'ez-scrim ez-scrim--light',
       isFixed: true
     };
   }

package/dist/components/snk-form-config2.js

@@ -7,7 +7,7 @@ import { U as UserConfigType, C as ConfigStorage } from './ConfigStorage.js';
 import { d as defineCustomElement$3 } from './snk-config-options2.js';
 import { d as defineCustomElement$2 } from './snk-field-config2.js';
 
-const snkFormConfigCss = ".sc-snk-form-config-h{--snk-form-config__title--font-pattern:var(--font-pattern, \"Roboto\");--snk-form-config__title--weight--large:var(--text-weight--large, 600);display:flex;flex-direction:column;position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--more-visible, 2);background-color:var(--background--xlight)}.form-config__title.sc-snk-form-config{display:flex;margin:0;line-height:1.3;font-family:var(--snk-form-config__title--font-pattern);font-weight:var(--snk-form-config__title--weight--large)}.form-config__header-container.sc-snk-form-config{display:flex}.form-config__field-container.sc-snk-form-config{width:32%;padding:6px}.form-config__hide-content.sc-snk-form-config{display:none}ez-icon.sc-snk-form-config .left-icon.sc-snk-form-config{--ez-icon--color:var(--text--disable)}.ez-box__label-counter.sc-snk-form-config{font-weight:var(--text-weight--extra-small);margin-top:-7px}.form-config__btn-options.sc-snk-form-config{--ez-button--min-width:300px;--ez-button--background-color:#FFFFFF}[data-draggable-parent].sc-snk-form-config{position:relative}.form-config__field-config--selected.sc-snk-form-config{position:static}.form-config__field-config--dragged.sc-snk-form-config .draggable-mirror.sc-snk-form-config{z-index:var(--more-visible, 2)}.form-config__config-options.sc-snk-form-config{position:relative;margin-top:-3px;min-width:100%;z-index:1}.form-config__tab-container.sc-snk-form-config,.form-config__fields-available.sc-snk-form-config{position:relative;height:100%;max-height:calc(100vh - 92px)}.form-config__tab-container.sc-snk-form-config .ez-box__container.sc-snk-form-config,.form-config__fields-available.sc-snk-form-config .ez-box__container.sc-snk-form-config{align-content:flex-start;height:100%}.form-config__fields-available.sc-snk-form-config [data-draggable-parent].sc-snk-form-config{align-content:flex-start;overflow-y:auto;height:100%;max-height:calc(100% - 122px)}.form-config__tab-content.sc-snk-form-config{align-content:flex-start;overflow-y:auto;height:auto;max-height:calc(100% - 128px)}[data-draggable-element].sc-snk-form-config{cursor:grab}.form-config__actions-button.sc-snk-form-config{--ez-actions-button__btn-action--min-width:235px}.form-config__add-group.sc-snk-form-config{position:relative;min-height:120px;margin-bottom:10px}.form-config__add-group-container.sc-snk-form-config{position:absolute;display:flex;flex-wrap:wrap;width:100%;box-sizing:border-box;border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #d2dce9);padding:var(--space--small, 6px)}.form-config__add-group-content.sc-snk-form-config{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;box-sizing:border-box;border:2px dashed var(--color-strokes, #DCE0E8);border-radius:var(--border--radius-small, 6px)}.form-config__add-group-label.sc-snk-form-config{display:flex;justify-content:center;box-sizing:border-box;padding:var(--space--large, 24px)}.form-config__btn-add-group.sc-snk-form-config{position:relative;padding:var(--space--large, 24px) var(--space--medium, 12px) 0}.form-config__btn-add-group-container.sc-snk-form-config{padding:var(--space--medium, 12px);border-radius:var(--border--radius-medium, 12px);border:2px solid var(--color-strokes, #DCE0E8);background-color:var(--background--body, #fafcff)}.form-config__left-icon--eye-off.sc-snk-form-config{padding-top:var(--space--medium, 8px)}ez-collapsible-box.draggable-mirror.sc-snk-form-config{display:table;background-color:#FFFFFF}ez-collapsible-box.sc-snk-form-config{margin-bottom:10px}@media screen and (min-width: 480px){.form-config__field-config--selected.sc-snk-form-config .ez-flex.form-config__config-options.sc-snk-form-config{min-width:calc(300% + 12px)}.form-config__field-config--selected.sc-snk-form-config:nth-child(3n+2) .ez-flex.form-config__config-options.sc-snk-form-config{transform:translate(calc(100% / 3 * -1))}.form-config__field-config--selected.sc-snk-form-config:nth-child(3n+3) .ez-flex.form-config__config-options.sc-snk-form-config{transform:translate(calc(100% / 3 * -2))}}";
+const snkFormConfigCss = ".sc-snk-form-config-h{--snk-form-config--z-index:var(--more-visible, 2);--snk-form-config--background-color:var(--background--xlight, #fff);--snk-form-config__icon--color:var(--text--disable, #AFB6C0);--snk-form-config__label-counter--font-weight:var(--text-weight--extra-small, 200);--snk-form-config__add-group-container--border-radius:var(--border--radius-medium, 12px);--snk-form-config__add-group-container--background-color:var(--background--medium, #d2dce9);--snk-form-config__add-group-container--padding:var(--space--small, 6px);--snk-form-config__add-group-content--border:2px dashed var(--color-strokes, #DCE0E8);--snk-form-config__add-group-content--border-radius:var(--border--radius-small, 6px);--snk-form-config__add-group-label--padding:var(--space--large, 24px);--snk-form-config__btn-add-group--padding:var(--space--large, 24px) var(--space--medium, 12px) 0;--snk-form-config__btn-add-group-container--padding:var(--space--medium, 12px);--snk-form-config__btn-add-group-container--border-radius:var(--border--radius-medium, 12px);--snk-form-config__btn-add-group-container--border:2px solid var(--color-strokes, #DCE0E8);--snk-form-config__btn-add-group-container--background-color:var(--background--body, #fafcff);display:flex;flex-direction:column;position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--snk-form-config--z-index);background-color:var(--snk-form-config--background-color)}.form-config__header-container.sc-snk-form-config{display:flex}.form-config__field-container.sc-snk-form-config{width:32%;padding:6px}.form-config__hide-content.sc-snk-form-config{display:none}ez-icon.sc-snk-form-config .left-icon.sc-snk-form-config{--ez-icon--color:var(--snk-form-config__icon--color)}.ez-box__label-counter.sc-snk-form-config{margin-top:-7px;font-weight:var(--snk-form-config__label-counter--font-weight)}.form-config__btn-options.sc-snk-form-config{--ez-button--min-width:300px;--ez-button--background-color:var(--snk-form-config--background-color)}[data-draggable-parent].sc-snk-form-config{position:relative}.form-config__field-config--selected.sc-snk-form-config{position:static}.form-config__field-config--dragged.sc-snk-form-config .draggable-mirror.sc-snk-form-config{z-index:var(--snk-form-config--z-index)}.form-config__config-options.sc-snk-form-config{position:relative;margin-top:-3px;min-width:100%;z-index:1}.form-config__tab-container.sc-snk-form-config,.form-config__fields-available.sc-snk-form-config{position:relative;height:100%;max-height:calc(100vh - 92px)}.form-config__tab-container.sc-snk-form-config .ez-box__container.sc-snk-form-config,.form-config__fields-available.sc-snk-form-config .ez-box__container.sc-snk-form-config{align-content:flex-start;height:100%}.form-config__fields-available.sc-snk-form-config [data-draggable-parent].sc-snk-form-config{align-content:flex-start;overflow-y:auto;height:100%;max-height:calc(100% - 122px)}.form-config__tab-content.sc-snk-form-config{align-content:flex-start;overflow-y:auto;height:auto;max-height:calc(100% - 128px)}[data-draggable-element].sc-snk-form-config{cursor:grab}.form-config__actions-button.sc-snk-form-config{--ez-actions-button__btn-action--min-width:235px}.form-config__add-group.sc-snk-form-config{position:relative;min-height:120px;margin-bottom:10px}.form-config__add-group-container.sc-snk-form-config{position:absolute;display:flex;flex-wrap:wrap;width:100%;box-sizing:border-box;border-radius:var(--snk-form-config__add-group-container--border-radius);background-color:var(--snk-form-config__add-group-container--background-color);padding:var(--snk-form-config__add-group-container--padding)}.form-config__add-group-content.sc-snk-form-config{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;box-sizing:border-box;border:var(--snk-form-config__add-group-content--border);border-radius:var(--snk-form-config__add-group-content--border-radius)}.form-config__add-group-label.sc-snk-form-config{display:flex;justify-content:center;box-sizing:border-box;padding:var(--snk-form-config__add-group-label--padding)}.form-config__btn-add-group.sc-snk-form-config{position:relative;padding:var(--snk-form-config__btn-add-group--padding)}.form-config__btn-add-group-container.sc-snk-form-config{padding:var(--snk-form-config__btn-add-group-container--padding);border-radius:var(--snk-form-config__btn-add-group-container--border-radius);border:var(--snk-form-config__btn-add-group-container--border);background-color:var(--snk-form-config__btn-add-group-container--background-color)}ez-collapsible-box.draggable-mirror.sc-snk-form-config{display:table;background-color:var(--snk-form-config--background-color)}ez-collapsible-box.sc-snk-form-config{margin-bottom:10px}@media screen and (min-width: 480px){.form-config__field-config--selected.sc-snk-form-config .ez-flex.form-config__config-options.sc-snk-form-config{min-width:calc(300% + 12px)}.form-config__field-config--selected.sc-snk-form-config:nth-child(3n+2) .ez-flex.form-config__config-options.sc-snk-form-config{transform:translate(calc(100% / 3 * -1))}.form-config__field-config--selected.sc-snk-form-config:nth-child(3n+3) .ez-flex.form-config__config-options.sc-snk-form-config{transform:translate(calc(100% / 3 * -2))}}";
 
 const CONTAINER_ID = {
   collapsibleBox: "EZ-COLLAPSIBLE-BOX",

package/dist/components/snk-form2.js

@@ -1,16 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { DateUtils, ObjectUtils, ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
-import { T as TaskbarProcessor } from './taskbar-processor.js';
 import { C as ConfigStorage } from './ConfigStorage.js';
+import { P as PresentationMode, d as defineCustomElement$1 } from './snk-taskbar2.js';
+import { T as TaskbarProcessor } from './taskbar-processor.js';
 import { d as defineCustomElement$7 } from './snk-config-options2.js';
 import { d as defineCustomElement$6 } from './snk-data-exporter2.js';
 import { d as defineCustomElement$5 } from './snk-exporter-email-sender2.js';
 import { d as defineCustomElement$4 } from './snk-field-config2.js';
 import { d as defineCustomElement$3 } from './snk-form-config2.js';
 import { d as defineCustomElement$2 } from './snk-tab-config2.js';
-import { d as defineCustomElement$1 } from './snk-taskbar2.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -19,13 +19,13 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.exit = createEvent(this, "exit", 7);
     this.actionClick = createEvent(this, "actionClick", 7);
     this._renderTimer = 500;
-    this._taskbarProcessor = new 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 = PresentationMode.PRIMARY;
   }
   /**
    * Exibe a janela de configurações do formulário.
@@ -39,6 +39,22 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async hideConfig() {
     this._showFormConfig = false;
   }
+  getFinishEditionTaskbarButtons() {
+    if (this.presentationMode === PresentationMode.PRIMARY) {
+      return ["CANCEL", "SAVE"];
+    }
+    else {
+      return ["SAVE", "CANCEL"];
+    }
+  }
+  getRegularTaskbarButtons() {
+    if (this.presentationMode === 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;
@@ -142,6 +158,33 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   closeConfig() {
     this.hideConfig();
   }
+  validatePresentationMode() {
+    if (Object.values(PresentationMode).includes(this.presentationMode)) {
+      return;
+    }
+    this.presentationMode = PresentationMode.PRIMARY;
+  }
+  dataunitReady() {
+    this.loadInsertionConfig();
+    const dataInfo = { dataUnit: this._dataUnit };
+    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({
+      "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) {
@@ -152,11 +195,6 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     return disabled;
   }
-  dataunitReady() {
-    this.loadInsertionConfig();
-    const dataInfo = { dataUnit: this._dataUnit };
-    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-  }
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     let parent = this._element.parentElement;
@@ -184,23 +222,20 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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 (h("section", { class: "snk-form" }, h("div", { class: "snk-form__header snk-form__header--fixed ez-row" }, h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, 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" }), h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.getMessage("snkForm.title"))), h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, 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 }))), h("section", null, h("div", { class: "ez-row" }, h("div", { class: "ez-col ez-col--sd-12" }, 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 (h("section", { class: "snk-form" }, h("div", { class: `snk-form__header ez-row
+          ${this.presentationMode === PresentationMode.PRIMARY ? 'snk-form__header--fixed' : ''}
+        ` }, this.presentationMode === PresentationMode.PRIMARY &&
+      h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, 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" }), h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.getMessage("snkForm.title"))), h("div", { class: `ez-col
+            ${this.presentationMode === PresentationMode.PRIMARY ? "ez-col--sd-6 ez-col--tb-6 ez-align--right" : ""}
+          ` }, 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 }))), h("section", null, h("div", { class: "ez-row" }, h("div", { class: "ez-col ez-col--sd-12" }, 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 &&
       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 this; }
@@ -210,6 +245,7 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "recordsValidator": [16],
     "actionsList": [16],
     "taskbarManager": [16],
+    "presentationMode": [1, "presentation-mode"],
     "_dataUnit": [32],
     "_dataState": [32],
     "_editionFormConfig": [32],

package/dist/components/snk-grid2.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { ApplicationContext, ElementIDUtils, DataType } from '@sankhyalabs/core';
+import { ElementIDUtils, ApplicationContext, DataType } from '@sankhyalabs/core';
 import { UserInterface } from '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
-import { T as TaskbarProcessor } from './taskbar-processor.js';
 import { C as ConfigStorage } from './ConfigStorage.js';
-import { s as store, d as defineCustomElement$1 } from './snk-taskbar2.js';
+import { P as PresentationMode, s as store, d as defineCustomElement$1 } from './snk-taskbar2.js';
+import { T as TaskbarProcessor } from './taskbar-processor.js';
 import { d as defineCustomElement$a } from './snk-data-exporter2.js';
 import { d as defineCustomElement$9 } from './snk-exporter-email-sender2.js';
 import { d as defineCustomElement$8 } from './snk-filter-bar2.js';
@@ -34,6 +34,10 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * 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.
@@ -153,6 +157,19 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     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;
@@ -184,16 +201,13 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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() }))));
   }
   get _element() { return this; }
   static get style() { return snkGridCss; }
@@ -204,6 +218,7 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "statusResolver": [16],
     "multipleSelection": [4, "multiple-selection"],
     "enableDataExporter": [4, "enable-data-exporter"],
+    "presentationMode": [1, "presentation-mode"],
     "_dataUnit": [32],
     "_dataState": [32],
     "_gridConfig": [32],