@sankhyalabs/sankhyablocks 2.9.0 → 2.11.0

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;

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

@@ -1,74 +1,103 @@
 :host {
-  /* Título */
-  /*@doc Define o estilo da mensagem exibida no título.*/
-  --snk-form-config__title--font-pattern: var(--font-pattern, "Roboto");
-  /*@doc Define o peso do título.*/
-  --snk-form-config__title--weight--large: var(--text-weight--large, 600);
-  
+  /*@doc Define o z-index do componente.*/
+  --snk-form-config--z-index: var(--more-visible, 2);
+  /*@doc Define a cor de fundo do componente.*/
+  --snk-form-config--background-color: var(--background--xlight, #fff);
+  /*@doc Define a cor dos icones do componente.*/
+  --snk-form-config__icon--color: var(--text--disable, #AFB6C0);
+  /*@doc Define o peso do texto do label de contagem de campos disponíveis.*/
+  --snk-form-config__label-counter--font-weight: var(--text-weight--extra-small, 200);
+  /*@doc Define o raio da borda externa do bloco para adicionar novo grupo.*/
+  --snk-form-config__add-group-container--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define a cor de fundo do bloco para adicionar novo grupo.*/
+  --snk-form-config__add-group-container--background-color: var(--background--medium, #d2dce9);
+  /*@doc Define o espaçamento interno do bloco para adicionar novo grupo.*/
+  --snk-form-config__add-group-container--padding: var(--space--small, 6px);
+  /*@doc Define a borda interna do bloco para adicionar novo grupo.*/
+  --snk-form-config__add-group-content--border: 2px dashed var(--color-strokes, #DCE0E8);
+  /*@doc Define o raio da borda interna do bloco para adicionar novo grupo.*/
+  --snk-form-config__add-group-content--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define o espaçamento interno do label do bloco para adicionar novo grupo.*/
+  --snk-form-config__add-group-label--padding: var(--space--large, 24px);
+  /*@doc Define o espaçamento interno da área interna do bloco para adicionar novo grupo.*/
+  --snk-form-config__btn-add-group--padding: var(--space--large, 24px) var(--space--medium, 12px) 0;
+  /*@doc Define o espaçamento interno do botão para adicionar novo grupo.*/
+  --snk-form-config__btn-add-group-container--padding: var(--space--medium, 12px);
+  /*@doc Define o raio da borda do botão para adicionar novo grupo.*/
+  --snk-form-config__btn-add-group-container--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define a borda do botão para adicionar novo grupo.*/
+  --snk-form-config__btn-add-group-container--border: 2px solid var(--color-strokes, #DCE0E8);
+  /*@doc Define a cor de fundo do botão para adicionar novo grupo.*/
+  --snk-form-config__btn-add-group-container--background-color: var(--background--body, #fafcff);
+
   /*private*/
   display: flex;
   flex-direction: column;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 
   /*public*/
-  z-index: var(--more-visible, 2);
-  background-color: var(--background--xlight); 
-}
-
-.form-config__title {
-  display: flex;
-  margin: 0;
-  line-height: 1.3;
-
-  /*public*/
-  font-family: var(--snk-form-config__title--font-pattern);
-  font-weight: var(--snk-form-config__title--weight--large);
+  z-index: var(--snk-form-config--z-index);
+  background-color: var(--snk-form-config--background-color);
 }
 
 .form-config__header-container {
+  /*private*/
   display: flex;
 }
 
 .form-config__field-container {
+  /*private*/
   width: 32%;
   padding: 6px;
 }
 
 .form-config__hide-content {
+  /*private*/
   display: none;
 } 
 
 ez-icon .left-icon {
-  --ez-icon--color: var(--text--disable);
+  /*public*/
+  --ez-icon--color: var(--snk-form-config__icon--color);
 }
 
 .ez-box__label-counter {
-  font-weight: var(--text-weight--extra-small);
-  margin-top: -7px;  
+  /*private*/
+  margin-top: -7px;
+
+  /*public*/
+  font-weight: var(--snk-form-config__label-counter--font-weight);
 }
 
 .form-config__btn-options {
+  /*private*/
   --ez-button--min-width: 300px;
-  --ez-button--background-color: #FFFFFF;
+
+  /*public*/
+  --ez-button--background-color: var(--snk-form-config--background-color);
 }
 
 [data-draggable-parent] {
+  /*private*/
   position: relative;
 }
 
 .form-config__field-config--selected {
+  /*private*/
   position: static;
 }
 
 .form-config__field-config--dragged .draggable-mirror {
-  z-index: var(--more-visible, 2);
+  /*public*/
+  z-index: var(--snk-form-config--z-index);
 }
 
 .form-config__config-options {
+  /*private*/
   position: relative;
   margin-top: -3px;
   min-width: 100%;
@@ -77,6 +106,7 @@ ez-icon .left-icon {
 
 .form-config__tab-container,
 .form-config__fields-available {
+  /*private*/
   position: relative;
   height: 100%;
   max-height: calc(100vh - 92px);
@@ -84,11 +114,13 @@ ez-icon .left-icon {
 
 .form-config__tab-container .ez-box__container,
 .form-config__fields-available .ez-box__container {
+  /*private*/
   align-content: flex-start;
   height: 100%;
 }
 
 .form-config__fields-available [data-draggable-parent] {
+  /*private*/
   align-content: flex-start;
   overflow-y: auto;
   height: 100%;
@@ -96,6 +128,7 @@ ez-icon .left-icon {
 }
 
 .form-config__tab-content {
+  /*private*/
   align-content: flex-start;
   overflow-y: auto;
   height: auto;
@@ -103,83 +136,102 @@ ez-icon .left-icon {
 }
 
 [data-draggable-element] {
+  /*private*/
   cursor: grab;
 }
 
 .form-config__actions-button {
+  /*private*/
   --ez-actions-button__btn-action--min-width: 235px;
 }
 
 .form-config__add-group {
+  /*private*/
   position: relative;
   min-height: 120px;
   margin-bottom: 10px;
 }
 
 .form-config__add-group-container {
+  /*private*/
   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);
+
+  /*public*/
+  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 {
+  /*private*/
   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);
+
+  /*public*/
+  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 {
+  /*private*/
   display: flex;
   justify-content: center;
   box-sizing: border-box;
-  padding: var(--space--large, 24px);
+
+  /*public*/
+  padding: var(--snk-form-config__add-group-label--padding);
 }
 
 .form-config__btn-add-group {
+  /*private*/
   position: relative;
-  padding: var(--space--large, 24px) var(--space--medium, 12px) 0;
-}
 
-.form-config__btn-add-group-container {
-  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);
+  /*public*/
+  padding: var(--snk-form-config__btn-add-group--padding);
 }
 
-.form-config__left-icon--eye-off{
-  padding-top: var(--space--medium, 8px);
+.form-config__btn-add-group-container {
+  /*public*/
+  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 {
+  /*private*/
   display: table;
-  background-color: #FFFFFF;
+
+  /*public*/
+  background-color: var(--snk-form-config--background-color);
 }
 
 ez-collapsible-box{
+  /*private*/
   margin-bottom: 10px;
 }
 
 @media screen and (min-width: 480px) {
   .form-config__field-config--selected .ez-flex.form-config__config-options {
+    /*private*/
     min-width: calc(300% + 12px);
   }
 
   .form-config__field-config--selected:nth-child(3n+2) .ez-flex.form-config__config-options {
+    /*private*/
     transform: translate(calc(100% / 3 * -1));
   }
   
   .form-config__field-config--selected:nth-child(3n+3) .ez-flex.form-config__config-options {
+    /*private*/
     transform: translate(calc(100% / 3 * -2));
   }
 }