@sankhyalabs/sankhyablocks 2.10.0 → 2.11.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,17 +1,18 @@
 import { ApplicationContext, DateUtils, ObjectUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { h } from '@stencil/core';
-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';
 export class SnkForm {
   constructor() {
     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.
@@ -25,6 +26,22 @@ export class SnkForm {
   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;
@@ -128,6 +145,33 @@ export class SnkForm {
   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) {
@@ -138,11 +182,6 @@ export class SnkForm {
     }
     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;
@@ -170,23 +209,20 @@ export class SnkForm {
     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() }))))));
   }
   static get is() { return "snk-form"; }
@@ -282,6 +318,29 @@ export class SnkForm {
           "tags": [],
           "text": "Gerenciador das barras de tarefas. \u00C9 poss\u00EDvel determinar bot\u00F5es espec\u00EDficos\nou mesmo gerenciar o estado dos bot\u00F5es."
         }
+      },
+      "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-form/subcomponents/snk-config-options/snk-config-options.css

@@ -1,9 +1,16 @@
 :host {
+    /*@doc Define o espaçamento interno direito do componente arrastável.*/
+    --snk-config-options--border: 2px solid var(--color--secondary-200, #D2D3DA);
+
+    /*private*/
     width: 100%;
-    border: 2px solid var(--color--secondary-200);
     border-radius: 15px;
+
+    /*public*/
+    border: var(--snk-config-options--border);
 }
 
 .config-options__switch-row {
+    /*private*/
     margin-top: -30px;
 }

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

@@ -1,5 +1,4 @@
 :host {
-  /* dimensions */
   /*@doc Define a altura do componente.*/
   --snk-field-config--height: 42px;
   /*@doc Define a largura do componente.*/
@@ -7,9 +6,7 @@
   /*@doc Define a largura do slot que contém o ícone.*/
   --snk-field-config__icon--width: 48px;
   /*@doc Define a altura do componente em modo "slim".*/
-  --snk-field-config--height--slim: 32px;
-
-  /* general */
+  --snk-field-config-slim--height: 32px;
   /*@doc Define o raio da borda do input do componente.*/
   --snk-field-config--border-radius: var(--border--radius-medium, 12px);
   /*@doc Define o tamanho da fonte do input e label do componente.*/
@@ -20,20 +17,28 @@
   --snk-field-config--font-weight: var(--text-weight--medium, 400);
   /*@doc Define a cor da fonte do input e label do componente.*/
   --snk-field-config--color: var(--title--primary, #000);
-
-  /* input */
+  /*@doc Define o espaçamento interno esquerdo do componente.*/
+  --snk-field-config--padding-left: var(--space--medium, 6px);
   /*@doc Define a cor de fundo do input.*/
   --snk-field-config__input--background-color: var(--background--medium, #e0e0e0);
   /*@doc Define o estilo da borda do input.*/
   --snk-field-config__input--border: var(--border--medium, 2px solid);
   /*@doc Define a cor da borda do input.*/
   --snk-field-config__input--border-color: var(--background--xlight, #fff);
-  /*no modo normal usamos a borda com a mesma cor do bg*/
+  /*@doc Define no modo normal a borda com a mesma cor do bg.*/
   --snk-field-config__required--color: var(--color--error, #FF0000);
-
-   /*no modo normal usamos a borda com a mesma cor do bg*/
-   --snk-field-config__transition--visibility: var(--transition, 0.2s linear);
-   --snk-field-config__transition--opacity: var(--transition, 0.15s linear);
+  /*@doc Define espeçamento interno esquerdo do label de required.*/
+  --snk-field-config__required--padding-left: var(--space--extra-small, 3px);
+  /*@doc Define o efeito de visualização do componente.*/
+  --snk-field-config__transition--visibility: var(--transition, 0.2s linear);
+  /*@doc Define o efeito de opacidade do componente.*/
+  --snk-field-config__transition--opacity: var(--transition, 0.15s linear);
+  /*@doc Define o z-index do popover.*/
+  --snk-field-config__config-popover--z-index: var(--more-visible, 2);
+  /*@doc Define a cor de fundo da seta externa do popover.*/
+  --snk-field-config__config-outer-arrow--background-color: var(--color--secondary-200, #D2D3DA);
+  /*@doc Define o espaçamento interno direito do componente arrastável.*/
+  --snk-field-config__draggable--padding-right: var(--space--small, 6px);
 
   /***************
   host style  
@@ -55,7 +60,7 @@
   align-items: center;
 
   /*public*/
-  padding-left: var(--space--medium, 6px);
+  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);
@@ -68,74 +73,89 @@
 }
 
 .field-config__config-popover {
+  /*private*/
   width: 40px;
   margin-left: auto;
-  z-index: var(--more-visible, 2);
+
+  /*public*/
+  z-index: var(--snk-field-config__config-popover--z-index);
 }
 
 .field-config__required-label {
-  padding-left: var(--space--extra-small, 3px);
-
   /*public*/
   color: var(--snk-field-config__required--color);
+  padding-left: var(--snk-field-config__required--padding-left);
 }
 
 .field-config__add {
+  /*private*/
   display: flex;
   margin-left: auto;
-
   visibility:hidden;
   opacity:0;
+
+  /*public*/
   transition: visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity);
 }
 
 
 .field-config__options {
+  /*private*/
   display: flex;
   margin-left: auto;
-
   visibility:hidden;
   opacity:0;
+
+  /*public*/
   transition: visibility var(--snk-field-config__transition--visibility), opacity var(--snk-field-config__transition--opacity);
 }
 
 .field-config__options--is-active {
+  /*private*/
   display: flex;
   visibility:visible;
   opacity:1;
 }
 
 .field-config__remove-icon {
+  /*private*/
   margin-right: -15px;
 }
 
 .field-config:hover .field-config__options {
+  /*private*/
   display: flex;
   visibility:visible;
   opacity:1;
 }
 
 .field-config:hover .field-config__add {
+  /*private*/
   visibility:visible;
   opacity:1;
 }
 
 
 .field-config__draggable {
-  padding-right: var(--space--small, 6px);
+  /*public*/
+  padding-right: var(--snk-field-config__draggable--padding-right);
 }
 
 .field-config__config-outer-arrow {
-  background-color: var(--color--secondary-200);
+  /*private*/
   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;
+
+  /*public*/
+  background-color: var(--snk-field-config__config-outer-arrow--background-color);
 }
 
 .field-config__config-inner-arrow {
+  /*private*/
   background-color: #FFFFFF;
   clip-path: polygon(50% 0, 90% 100%, 10% 100%);
   border-radius: 0.25em 0 0 0;
@@ -144,6 +164,7 @@
 }
 
 .ez-box__container ez-collapsible-box {
+  /*private*/
   --snk-collapsible-box__header--padding-left: 6px;
 }
 
@@ -153,11 +174,13 @@ ez-icon {
 }
 
 ez-popover {
+  /*private*/
   --snk-popover__box--background-color: transparent;
   --snk-popover__box--box-shadow: none
 }
 
 .field-config__options ez-button {
+  /*private*/
   --snk-button--background-color: transparent;
   --snk-button--focus--border: none;
   --snk-button--focus--box-shadow: none;