@sankhyalabs/sankhyablocks 2.10.0 → 2.11.1

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,13 +31,6 @@ export default class DataUnitFetcher {
                     type
                     expression
                   }
-                },
-                children{
-                  name
-                  links{
-                    source
-                    target
-                  }
                 }
                 children{
                   name

package/dist/components/snk-application2.js

@@ -238,13 +238,6 @@ class DataUnitFetcher {
                     type
                     expression
                   }
-                },
-                children{
-                  name
-                  links{
-                    source
-                    target
-                  }
                 }
                 children{
                   name

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-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],