@sankhyalabs/sankhyablocks 2.1.3 → 2.1.5

package/dist/cjs/snk-form-config.cjs.entry.js

@@ -6,11 +6,11 @@ const index = require('./index-20e8b68a.js');
 const draggable_bundle = require('./draggable.bundle-82a25c06.js');
 const core = require('@sankhyalabs/core');
 const utils = require('@sankhyalabs/ezui/dist/collection/utils');
-const constants = require('./constants-9056ca9e.js');
-const formConfigFetcher = require('./form-config-fetcher-2de7c16a.js');
+const constants = require('./constants-a47a5190.js');
+const ConfigStorage = require('./ConfigStorage-c112de1d.js');
 require('./_commonjsHelpers-537d719a.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:250px}.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__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 CONTAINER_ID = {
   collapsibleBox: "EZ-COLLAPSIBLE-BOX",
@@ -22,6 +22,7 @@ const SnkFormConfig = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.configChange = index.createEvent(this, "configChange", 7);
+    this.configClose = index.createEvent(this, "configClose", 7);
     this._listEnabledFields = [];
     this._renderTimer = 500;
     this._sortableTimer = 100;
@@ -161,18 +162,13 @@ const SnkFormConfig = class {
   isDefaultConfiguration() {
     var _a;
     const optionSelected = (_a = this._optionFormConfigSelected) === null || _a === void 0 ? void 0 : _a.origin;
-    return optionSelected === formConfigFetcher.UserConfigType.DEFAULT
+    return optionSelected === ConfigStorage.UserConfigType.DEFAULT
       && this._optionFormConfigChanged === true
       && this._formConfigChanged === false;
   }
-  saveConfig() {
-    var _a;
-    if (((_a = this._tempGroups) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      utils.ApplicationUtils.alert(this.getMessage("snkFormConfig.confirm.title"), this.getMessage("snkFormConfig.confirm.group"));
-      return;
-    }
-    const isDefault = this.isDefaultConfiguration();
+  buildConfigToSave() {
     let formConfig = {};
+    const isDefault = this.isDefaultConfiguration();
     if (isDefault) {
       formConfig = core.ObjectUtils.copy(this.formConfig);
     }
@@ -190,14 +186,29 @@ const SnkFormConfig = class {
       }
     }
     formConfig.defaultConfiguration = isDefault;
-    this.configChange.emit(formConfig);
+    return formConfig;
+  }
+  saveConfig() {
+    var _a;
+    if (((_a = this._tempGroups) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      utils.ApplicationUtils.alert(this.getMessage("snkFormConfig.confirm.title"), this.getMessage("snkFormConfig.confirm.group"));
+      return;
+    }
+    const formConfig = this.buildConfigToSave();
     this._formConfigChanged = false;
     this._optionFormConfigChanged = false;
+    ConfigStorage.ConfigStorage.saveFormConfig(formConfig, this.configName)
+      .then((response) => {
+      if ((response === null || response === void 0 ? void 0 : response.resource) != undefined) {
+        utils.ApplicationUtils.info(this.getMessage("snkFormConfig.info.successfullyConfigSaved"), { iconName: "check" });
+        this.configChange.emit(formConfig);
+      }
+    });
   }
   applyOptionConfig() {
     if (this._optionFormConfigChanged === true && this._optionFormConfigSelected != undefined) {
       const name = this._optionFormConfigSelected.name || "configuração selecionada";
-      const origin = this._optionFormConfigSelected.origin === formConfigFetcher.UserConfigType.DEFAULT ? "pessoal" : "padrão";
+      const origin = this._optionFormConfigSelected.origin === ConfigStorage.UserConfigType.DEFAULT ? "pessoal" : "padrão";
       const msg = this.getMessage("snkFormConfig.confirm.apply").replace('{0}', name).replace('{1}', origin);
       this.openConfirmDialog(msg).then((canCancel) => {
         if (canCancel) {
@@ -246,12 +257,12 @@ const SnkFormConfig = class {
       this.openConfirmDialog(this.getMessage("snkFormConfig.confirm.exit")).then((canClose) => {
         if (canClose) {
           this._formConfigChanged = false;
-          this.setShowFormConfig(false);
+          this.configClose.emit();
         }
       });
     }
     else {
-      this.setShowFormConfig(false);
+      this.configClose.emit();
     }
   }
   openConfirmDialog(msg = "", title = this.getMessage("snkFormConfig.confirm.title")) {
@@ -455,15 +466,14 @@ const SnkFormConfig = class {
     this._sortableGroup.on(constants.CONFIG_EVENTS.dragStop, (evt) => this.controlStopDraggingGroup(evt));
   }
   loadUserConfig() {
-    var _a;
     if (this._application != undefined) {
-      this._application.fetchUserAvailableConfigs((_a = this.parentForm) === null || _a === void 0 ? void 0 : _a.configName)
+      this._application.fetchUserAvailableConfigs(this.configName)
         .then((userConfig) => {
         this._formConfigOptions = userConfig;
         let isDefault = this._formConfig != undefined ? this._formConfig.defaultConfiguration : true;
         const selectedOption = userConfig
           .find((config) => {
-          return config.origin === (isDefault ? formConfigFetcher.UserConfigType.DEFAULT : formConfigFetcher.UserConfigType.USER);
+          return config.origin === (isDefault ? ConfigStorage.UserConfigType.DEFAULT : ConfigStorage.UserConfigType.USER);
         });
         this.setFormConfig(selectedOption);
       });
@@ -509,14 +519,13 @@ const SnkFormConfig = class {
     }
   }
   loadConfigByUser() {
-    var _a;
     if (this._application != undefined) {
       const option = this._optionFormConfigSelected;
-      const fetchActionName = (option === null || option === void 0 ? void 0 : option.origin) === formConfigFetcher.UserConfigType.DEFAULT ? "fetchDefaultConfig" :
-        (option === null || option === void 0 ? void 0 : option.origin) === formConfigFetcher.UserConfigType.USER ? "fetchLegacyConfig" :
+      const fetchActionName = (option === null || option === void 0 ? void 0 : option.origin) === ConfigStorage.UserConfigType.DEFAULT ? "fetchDefaultConfig" :
+        (option === null || option === void 0 ? void 0 : option.origin) === ConfigStorage.UserConfigType.USER ? "fetchLegacyConfig" :
           undefined;
       if (fetchActionName != undefined) {
-        this._application[fetchActionName]((_a = this.parentForm) === null || _a === void 0 ? void 0 : _a.configName)
+        this._application[fetchActionName](this.configName)
           .then((formConfig) => {
           if (formConfig != undefined) {
             this._formConfig = formConfig;
@@ -773,9 +782,6 @@ const SnkFormConfig = class {
       this.onFilterChange(filterValue);
     }
   }
-  setShowFormConfig(value) {
-    this.parentForm.setShowFormConfig(value);
-  }
   changeTabSelected(tabSelected) {
     this._tabSelected = tabSelected.index;
     const selectorTab = this._formContainer.querySelector("div#tab" + tabSelected.index);
@@ -941,7 +947,7 @@ const SnkFormConfig = class {
     const configOptions = this._formConfigOptions.map((option) => {
       return { value: option.origin, label: option.name };
     });
-    return (index.h(index.Host, null, index.h("div", { class: "ez-row ez-padding--medium" }, index.h("div", { class: "ez-col ez-col--sd-7 ez-col--tb-9 ez-align--middle" }, index.h("ez-button", { mode: "icon", iconName: "arrow_back", class: "ez-padding--small", size: "small", onClick: () => this.closeFormConfig() }), index.h("h1", { class: "ez-title ez-title--extra-large ez-padding--small" }, this.getMessage("snkFormConfig.title")), index.h("ez-actions-button", { class: "form-config__actions-button ez-margin-left--medium", value: (_a = this._optionFormConfigSelected) === null || _a === void 0 ? void 0 : _a.origin, showLabel: true, iconName: "chevron-down", checkOption: true, size: "small", actions: configOptions, onEzAction: (evt) => this.controlSelectFormConfig(evt) })), index.h("div", { class: "ez-col ez-col--sd-5 ez-col--tb-3 ez-align--middle ez-align--right" }, this._formConfigChanged === true && this._optionFormConfigChanged === false &&
+    return (index.h(index.Host, null, index.h("div", { class: "ez-row ez-padding--medium" }, index.h("div", { class: "ez-col ez-col--sd-7 ez-col--tb-9 ez-align--middle" }, index.h("ez-button", { mode: "icon", iconName: "arrow_back", class: "ez-padding--small", size: "small", onClick: () => this.closeFormConfig() }), index.h("h1", { class: "ez-title ez-title--extra-large ez-padding--small" }, this.getMessage("snkFormConfig.title")), index.h("ez-actions-button", { class: "form-config__actions-button ez-margin-left--medium", value: (_a = this._optionFormConfigSelected) === null || _a === void 0 ? void 0 : _a.origin, showLabel: true, displayIcon: "chevron-down", checkOption: true, size: "small", actions: configOptions, onEzAction: (evt) => this.controlSelectFormConfig(evt) })), index.h("div", { class: "ez-col ez-col--sd-5 ez-col--tb-3 ez-align--middle ez-align--right" }, this._formConfigChanged === true && this._optionFormConfigChanged === false &&
       index.h("div", { class: "ez-row ez-align--middle ez-align--right" }, index.h("ez-button", { label: "Cancelar", class: "ez-padding-left--medium", size: "small", onClick: () => this.cancelChangeConfig() }), index.h("ez-button", { label: "Salvar", class: "ez-button--primary ez-padding-left--medium", size: "small", onClick: () => this.saveConfig() }, index.h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "save" }))), this._optionFormConfigChanged === true &&
       index.h("div", { class: "ez-row ez-align--middle ez-align--right" }, index.h("ez-button", { label: "Cancelar", class: "ez-padding-left--medium", size: "small", onClick: () => this.cancelChangeOptionConfig() }), index.h("ez-button", { label: this.getMessage("snkFormConfig.applyConfig"), class: "ez-button--primary ez-padding-left--medium", size: "small", onClick: () => this.applyOptionConfig() })))), index.h("div", { class: "ez-row ez-padding--medium", ref: ref => this._sortableContainer = ref }, index.h("div", { class: "form-config__tab-container ez-col ez-col--sd-9 ez-col--tb-9 ez-padding-right--medium" }, ((_b = this._layoutFormConfig) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
       index.h("section", { class: "ez-box__container", ref: ref => this._formContainer = ref }, index.h("snk-tab-config", { ref: ref => this._tabConfig = ref, selectedIndex: this._tabSelected, onEzTabChange: (ev) => this.changeTabSelected(ev.detail), onEzOrderChange: (ev) => this.changeTabOrder(ev.detail), onEditionTitleTab: (ev) => this.changeTabLabel(ev), onDeleteTab: (ev) => this.handleDeleteTab(ev), onHideTab: (ev) => this.changeHideTab(ev), onCanStartDrag: () => this.handleCanStartDragTab() }, this._layoutFormConfig.map((tab) => index.h("snk-tab", { tabKey: tab.tab || "Geral", label: tab.tab || this.getMessage("snkFormConfig.form.tabGeneral"), visible: tab.visible }))), this._layoutFormConfig.map((tab, indexTab) => index.h("div", { id: "tab" + indexTab, "data-draggable-parent": "group", class: this._tabSelected === indexTab

package/dist/cjs/snk-form.cjs.entry.js

@@ -4,8 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-20e8b68a.js');
 const core = require('@sankhyalabs/core');
-const configurableElementsStorage = require('./configurableElementsStorage-93459c72.js');
 const taskbarProcessor = require('./taskbar-processor-6bd0d35c.js');
+const ConfigStorage = require('./ConfigStorage-c112de1d.js');
+require('./_commonjsHelpers-537d719a.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}";
 
@@ -14,7 +15,6 @@ const SnkForm = class {
     index.registerInstance(this, hostRef);
     this.exit = index.createEvent(this, "exit", 7);
     this.actionClick = index.createEvent(this, "actionClick", 7);
-    this.configChanged = index.createEvent(this, "configChanged", 7);
     this._renderTimer = 500;
     this._taskbarProcessor = new taskbarProcessor.TaskbarProcessor({
       "snkForm.regular": ["PREVIOUS", "NEXT", "DIVIDER", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "GRID_MODE", "CONFIGURATOR", "INSERT"],
@@ -25,21 +25,30 @@ const SnkForm = class {
     this._showFormConfig = false;
   }
   /**
-   * Método responsável em abrir ou fechar o modal de configurações do form.
+   * Método responsável em abrir o modal de configurações do form.
    */
-  async setShowFormConfig(value) {
-    this._showFormConfig = value;
+  async showConfig() {
+    this._showFormConfig = true;
   }
   /**
-   * Método responsável por setar as configurações do form.
+   * Método responsável em fechar o modal de configurações do form.
    */
-  async setConfig(config) {
-    this._editionFormConfig = {};
-    if (!this.loadConfig(config)) {
-      this.loadInsertionConfig();
-    }
+  async hideConfig() {
+    this._showFormConfig = false;
+  }
+  loadConfig() {
+    ConfigStorage.ConfigStorage.get()
+      .loadFormConfig(this.configName)
+      .then((config) => {
+      if (!this.setConfig(config)) {
+        this.loadInsertionConfig();
+      }
+    })
+      .catch((error) => {
+      console.warn(error);
+    });
   }
-  loadConfig(config) {
+  setConfig(config) {
     if ((config === null || config === void 0 ? void 0 : config.fields) == undefined) {
       return false;
     }
@@ -117,7 +126,13 @@ const SnkForm = class {
     return ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.selectedRecords) ? this._dataState.selectedRecords[0] : undefined;
   }
   changeConfig(config) {
-    this.configChanged.emit(config);
+    this._editionFormConfig = {};
+    if (!this.setConfig(config)) {
+      this.loadInsertionConfig();
+    }
+  }
+  closeConfig() {
+    this.hideConfig();
   }
   getDisabledButtons() {
     const disabled = [];
@@ -129,9 +144,6 @@ const SnkForm = class {
     }
     return disabled;
   }
-  componentDidRender() {
-    configurableElementsStorage.ConfigurableElementsStorage.setForm(this.configName, this._element);
-  }
   componentWillLoad() {
     this._application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
     let parent = this._element.parentElement;
@@ -156,6 +168,7 @@ const SnkForm = class {
       }
       parent = parent.parentElement;
     }
+    this.loadConfig();
   }
   componentWillRender() {
     var _a;
@@ -175,7 +188,7 @@ const SnkForm = class {
       return undefined;
     }
     return (index.h("section", { class: "snk-form" }, index.h("div", { class: "snk-form__header snk-form__header--fixed ez-row" }, index.h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, index.h("ez-button", { title: this.getMessage("snkForm.goBackTitle"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm() }), index.h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.getMessage("snkForm.title"))), index.h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, index.h("snk-taskbar", { key: "formTaskbar", 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 }))), index.h("section", null, index.h("div", { class: "ez-row" }, index.h("div", { class: "ez-col ez-col--sd-12" }, index.h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, dataUnit: this._dataUnit, config: this.getFormConfig(), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
-      index.h("snk-form-config", { dataUnit: this._dataUnit, formConfig: this.getFormConfig(), parentForm: this._element, onConfigChange: (evt) => { this.changeConfig(evt.detail); } }))))));
+      index.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 index.getElement(this); }
 };

package/dist/cjs/snk-tab-config.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-20e8b68a.js');
 const draggable_bundle = require('./draggable.bundle-82a25c06.js');
 const core = require('@sankhyalabs/core');
-const constants = require('./constants-9056ca9e.js');
+const constants = require('./constants-a47a5190.js');
 require('./_commonjsHelpers-537d719a.js');
 
 const snkTabConfigCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}.sc-snk-tab-config-h{--snk-tab-config--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--snk-tab-config--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');display:flex;position:relative;width:100%;overflow:hidden}.tab-config__scroll.sc-snk-tab-config{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.tab-config__scroll--start-hidden.sc-snk-tab-config{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.tab-config__scroll--middle.sc-snk-tab-config{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab-config__scroll--end-hidden.sc-snk-tab-config{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab-config__lower-bar.sc-snk-tab-config{position:absolute;left:0%;right:0%;top:91%;bottom:0%;border-radius:2px;background:var(--color--disable-primary);border:2px solid var(--color--disable-primary)}.tab-config__tab.sc-snk-tab-config{display:flex;border:none;background-color:unset;cursor:pointer;align-items:center;justify-content:center;min-width:fit-content;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Roboto\");font-size:var(--title--small, 14px);padding:var(--space--small, 6px) var(--space--medium, 12px)}.tab-config__tab.sc-snk-tab-config:focus,.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{outline:none}.tab-config__tab--is-active.sc-snk-tab-config{position:relative;color:var(--color--primary, #008561)}.tab-config__tab.sc-snk-tab-config:hover{color:var(--color--secondary, #383c45)}.tab-config__tab--is-active.sc-snk-tab-config:hover{color:var(--color--primary, #008561)}.tab-config__tab--is-active.sc-snk-tab-config::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.tab-config__tab--is-focused.sc-snk-tab-config{border:1px dashed var(--color--primary, #000000c5)}.tab-config__tab-label.sc-snk-tab-config{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.tab-config__forward-button.sc-snk-tab-config,.tab-config__backward-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.tab-config__new-button.sc-snk-tab-config ez-icon.sc-snk-tab-config{--ez-icon--color:var(--color--secondary-700, #1C1D22)}.tab-config__backward-button.sc-snk-tab-config{left:0px;box-shadow:10px 10px 5px 5px white;background:white}.tab-config__forward-button.sc-snk-tab-config{box-shadow:10px 10px 5px 20px white;background:white}.tab-config__forward-button.sc-snk-tab-config::after,.tab-config__backward-button.sc-snk-tab-config::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.tab-config__forward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--forward-icon);mask-image:var(--snk-tab-config--forward-icon)}.tab-config__backward-button.sc-snk-tab-config::after{-webkit-mask-image:var(--snk-tab-config--backward-icon);mask-image:var(--snk-tab-config--backward-icon)}.tab-config__forward-button.sc-snk-tab-config:hover::after,.tab-config__backward-button.sc-snk-tab-config:hover::after{background-color:var(--color--primary, #4e4e4e)}.tab-config__new-button.sc-snk-tab-config:hover ez-icon.sc-snk-tab-config{--ez-icon--color:var(--color--primary, #4e4e4e)}.tab-config__hidden.sc-snk-tab-config{display:none}.tab-config__scroll.sc-snk-tab-config::-webkit-scrollbar{display:none}.tab-config__left-icon.sc-snk-tab-config{padding-right:var(--space--small);--ez-icon--color:var(--text--disable)}.tab-config__left-icon--eye-off.sc-snk-tab-config{--ez-icon--color:var(--text--disable, #AFB6C0)}.tab-config__right-icon.sc-snk-tab-config{visibility:hidden;padding-left:var(--space--small)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{visibility:visible}.tab-config__tab--is-active.sc-snk-tab-config .tab-config__right-icon.sc-snk-tab-config{visibility:visible;--ez-icon--color:var(--color--primary)}.tab-config__tab.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--color--secondary, #383c45)}.tab-config__tab--is-active.sc-snk-tab-config:hover .tab-config__right-icon.sc-snk-tab-config{--ez-icon--color:var(--color--primary)}.tab-config__actions-button.sc-snk-tab-config{--ez-actions-button__btn-action--min-width:100px;visibility:hidden;opacity:0;transition:visibility 1s linear,opacity 0.3s linear}.tab-config__tab.sc-snk-tab-config:hover .tab-config__actions-button.sc-snk-tab-config{visibility:visible;opacity:1;transition:visibility 0.2s linear, opacity 0.10s linear}[data-draggable-element].sc-snk-tab-config{cursor:grab}.tab-config__tab-label-disabled.sc-snk-tab-config{color:var(--text--disable, #AFB6C0)}.tab-config__slot.sc-snk-tab-config{margin-left:var(--space--small, 6px)}";

package/dist/cjs/{taskbar-elements-d762e436.js → taskbar-elements-997af1c9.js}

@@ -15,7 +15,6 @@ exports.TaskbarElement = void 0;
   TaskbarElement["SAVE"] = "SAVE";
   TaskbarElement["GRID_MODE"] = "GRID_MODE";
   TaskbarElement["FORM_MODE"] = "FORM_MODE";
-  TaskbarElement["CONFIG_GRID"] = "CONFIG_GRID";
   TaskbarElement["MORE_OPTIONS"] = "MORE_OPTIONS";
   TaskbarElement["DIVIDER"] = "DIVIDER";
   TaskbarElement["CONFIGURATOR"] = "CONFIGURATOR";
@@ -26,11 +25,11 @@ exports.AuthorizationElements = void 0;
   AuthorizationElements["CLONE"] = "CLONE";
   AuthorizationElements["REMOVE"] = "REMOVE";
   AuthorizationElements["INSERT"] = "INSERT";
-  AuthorizationElements["CONFIG_GRID"] = "CONFIG_GRID";
+  AuthorizationElements["CONFIGURATOR"] = "CONFIGURATOR";
 })(exports.AuthorizationElements || (exports.AuthorizationElements = {}));
 exports.VisibleWhenForbidden = void 0;
 (function (VisibleWhenForbidden) {
-  VisibleWhenForbidden["CONFIG_GRID"] = "CONFIG_GRID";
+  VisibleWhenForbidden["CONFIGURATOR"] = "CONFIGURATOR";
 })(exports.VisibleWhenForbidden || (exports.VisibleWhenForbidden = {}));
 const buildCustomButton = (def, className, action, isEnabled) => {
   const { hint, text, iconName } = def;
@@ -46,7 +45,7 @@ const buildCustomButton = (def, className, action, isEnabled) => {
     return textButton(def.name, className, text, hint, action, isEnabled);
   }
 };
-const buildElem = (element, className, getTitle, action, isEnabled, actions, configName) => {
+const buildElem = (element, className, getTitle, action, isEnabled, actions) => {
   const title = getTitle(element);
   switch (element) {
     case exports.TaskbarElement.PREVIOUS:
@@ -72,9 +71,9 @@ const buildElem = (element, className, getTitle, action, isEnabled, actions, con
     case exports.TaskbarElement.FORM_MODE:
       return iconButton("list", element, className, title, action, isEnabled);
     case exports.TaskbarElement.CONFIGURATOR:
-      return configButton(element, className, getTitle, action, isEnabled, configName);
+      return iconButton("settings-inverted", element, className, title, action, isEnabled);
     case exports.TaskbarElement.MORE_OPTIONS:
-      return actions && actions.length > 0 ? index.h("ez-actions-button", { title: title, size: "small", class: className, enabled: isEnabled(element), onEzAction: (evt) => action(evt.detail.value), actions: actions }) : undefined;
+      return actionButton(element, className, title, action, isEnabled, actions);
     case exports.TaskbarElement.DIVIDER:
       return index.h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-horizontal--medium", "data-taskbar-divider": true });
   }
@@ -89,8 +88,10 @@ function iconTextButton(iconName, name, className, text, title, action, isEnable
   return index.h("ez-button", { name: iconName, title: title, label: text, size: "small", class: className, enabled: isEnabled(name), onClick: () => action(name) },
     index.h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: iconName }));
 }
-function configButton(element, className, getTitle, action, isEnabled, configName) {
-  return index.h("snk-configurator", { key: "configurator", configName: configName, title: getTitle(element), class: className, enabled: isEnabled(element), onChangeViewMode: (evt) => action(evt === null || evt === void 0 ? void 0 : evt.detail) });
+function actionButton(element, className, title, action, isEnabled, actions) {
+  return actions && actions.length > 0
+    ? index.h("ez-actions-button", { title: title, size: "small", arrowActive: true, class: className, enabled: isEnabled(element), onEzAction: (evt) => action(evt.detail.value), actions: actions })
+    : undefined;
 }
 
 exports.buildCustomButton = buildCustomButton;

package/dist/collection/collection-manifest.json

@@ -2,14 +2,13 @@
   "entries": [
     "./components/snk-filter-bar/filter-item/snk-filter-item.js",
     "./components/snk-application/snk-application.js",
-    "./components/snk-configurator/subcomponents/snk-config-modal/snk-config-modal.js",
     "./components/snk-data-unit/snk-data-unit.js",
     "./components/snk-taskbar/snk-taskbar.js",
     "./components/snk-filter-bar/filter-list/snk-filter-list.js",
+    "./components/snk-filter-bar/filter-modal/snk-filter-modal.js",
     "./components/snk-form/subcomponents/snk-tab-config/snk-tab-config.js",
     "./components/snk-configurator/snk-configurator.js",
     "./components/snk-crud/snk-crud.js",
-    "./components/snk-filter-bar/filter-modal/snk-filter-modal.js",
     "./components/snk-filter-bar/filter-item/editors/snk-filter-personalized.js",
     "./components/snk-filter-bar/snk-filter-bar.js",
     "./components/snk-filter-bar/filter-item/snk-filter-detail.js",
@@ -24,6 +23,8 @@
     "./components/snk-form/subcomponents/snk-field-config/snk-field-config.js",
     "./components/snk-form/subcomponents/snk-form-config/snk-form-config.js",
     "./components/snk-grid/snk-grid.js",
+    "./components/snk-grid/subcomponents/snk-grid-config/snk-grid-config.js",
+    "./components/snk-grid/subcomponents/snk-select-box/snk-select-box.js",
     "./components/snk-pesquisa/snk-pesquisa.js",
     "./components/teste-pesquisa/teste-pesquisa.js"
   ],

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

@@ -8,6 +8,7 @@ import { PesquisaFetcher } from "../../lib/http/data-fetcher/fetchers/pesquisa-f
 import { agGridLicense } from '../../lib/licenses/sankhyalicense.module';
 import { TotalsFetcher } from "../../lib/http/data-fetcher/fetchers/totals-fetcher";
 import { SnkMessageBuilder } from "../../lib/message/SnkMessageBuilder";
+import { ConfigStorage } from "../../lib/configs/ConfigStorage";
 import DataUnitFetcher from "../../lib/http/data-fetcher/fetchers/dataunit-fetcher";
 import UrlUtils from "../../lib/utils/urlutils";
 import Workspace from "../../lib/workspace/workspace";
@@ -196,7 +197,6 @@ export class SnkApplication {
   }
   /**
    * Retorna a configuração de um recurso por service broker
-   * Veja também o método "loadConfig"
    */
   async getConfig(key) {
     let payload = {
@@ -588,6 +588,7 @@ export class SnkApplication {
       });
     }
     ErrorTracking.init();
+    ConfigStorage.get();
     this.getDefaultValues().then((defaultValues) => {
       this._defaultValues = defaultValues;
     });
@@ -962,7 +963,7 @@ export class SnkApplication {
           "return": "Promise<any>"
         },
         "docs": {
-          "text": "Retorna a configura\u00E7\u00E3o de um recurso por service broker\nVeja tamb\u00E9m o m\u00E9todo \"loadConfig\"",
+          "text": "Retorna a configura\u00E7\u00E3o de um recurso por service broker",
           "tags": []
         }
       },

package/dist/collection/components/snk-configurator/AuthorizationConfig.js

@@ -0,0 +1,5 @@
+export var AuthorizationConfig;
+(function (AuthorizationConfig) {
+  AuthorizationConfig["CONFIG_GRID"] = "CONFIG_GRID";
+  AuthorizationConfig["CONFIG"] = "CONFIG";
+})(AuthorizationConfig || (AuthorizationConfig = {}));

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

@@ -0,0 +1,124 @@
+:host {
+    /*@doc Define o espaçamento utilizado à esquerda do botão de fechar do componente.*/
+    --snk-configurator__button-close--padding-left: var(--space--medium, 12px);
+
+    /*@doc Define a cor do texto utilizado para o titulo do componente.*/
+    --snk-configurator__title--color: var(--title--primary, #2B3A54);
+
+    /*@doc Define o estilo da fonte utilizada para o titulo do componente.*/
+    --snk-configurator__title--font-family: var(--font-pattern, "Roboto");
+
+    /*@doc Define o tamanho da fonte utilizada para o titulo do componente.*/
+    --snk-configurator__title--font-size: var(--title--large, 20px);
+
+    /*@doc Define o peso da fonte utilizada para o titulo do componente.*/
+    --snk-configurator__title--font-weight: var(--text-weight--extra-large, 700);
+
+    /*@doc Define a cor do texto utilizado para o subtitulo do componente.*/
+    --snk-configurator__subtitle--color: var(--title--primary, #2B3A54);
+
+    /*@doc Define o estilo da fonte utilizada para o subtitulo do componente.*/
+    --snk-configurator__subtitle--font-family: var(--font-pattern, "Roboto");
+
+    /*@doc Define o tamanho da fonte utilizada para o subtitulo do componente.*/
+    --snk-configurator__subtitle--font-size: var(--text--medium, 14px);
+
+    /*@doc Define o peso da fonte utilizada para o subtitulo do componente.*/
+    --snk-configurator__subtitle--font-weight: var(--text-weight--large, 600);
+
+    /*@doc Define o raio da borda da barra de rolagem do componente.*/
+    --snk-configurator__scrollbar--border-radius: var(--border--radius-small, 6px);
+
+    /*@doc Define a largura da barra de rolagem do componente.*/
+    --snk-configurator__scrollbar--width: var(--space--medium, 12px);
+
+    /*@doc Define a cor da barra de rolagem do componente.*/
+    --snk-configurator__scrollbar--background-color-primary: var(--scrollbar--primary, #2B3A54);
+
+    /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+    --snk-configurator__scrollbar--background-color-secondary: var(--scrollbar--secondary, #E5EAF0);
+}
+
+.snk-configurator {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    max-height: 100%;
+    width: 100%;
+}
+
+@media screen and (min-width: 480px) {
+    .snk-configurator {
+        width: 359px;
+        max-width: 359px;
+    }
+}
+
+.snk-configurator__button-config {
+    --ez-button--min-width: 100%;
+}
+
+.snk-configurator__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.snk-configurator__title {
+    display: flex;
+    margin: 0;
+    line-height: normal;
+    letter-spacing: 0em;
+    text-align: left;
+
+    /*public*/
+    color: var(--snk-configurator__title--color);
+    font-size: var(--snk-configurator__title--font-size);
+    font-family: var(--snk-configurator__title--font-family);
+    font-weight: var(--snk-configurator__title--font-weight);
+}
+
+.snk-configurator__subtitle {
+    display: flex;
+    margin: 0;
+
+    /*public*/
+    padding-top: var(--space--medium);
+    padding-bottom: var(--space--small);
+    color: var(--snk-configurator__subtitle--color);
+    font-size: var(--snk-configurator__subtitle--font-size);
+    font-family: var(--snk-configurator__subtitle--font-family);
+    font-weight: var(--snk-configurator__subtitle--font-weight);
+}
+
+.snk-configurator__button-close {
+    /*public*/
+    padding-left: var(--snk-configurator__button-close--padding-left);
+}
+
+.snk-configurator__main {
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    /*public*/
+    scrollbar-color: var(--snk-configurator__scrollbar--background-color-primary) var(--snk-configurator__scrollbar--background-color-secondary);
+}
+
+.snk-configurator__main::-webkit-scrollbar-track {
+    /*public*/
+    background-color: var(--snk-configurator__scrollbar--background-color-secondary);
+}
+
+.snk-configurator__main::-webkit-scrollbar-thumb {
+    /*public*/
+    background-color: var(--snk-configurator__scrollbar--background-color-primary);
+    border-radius: var(--snk-configurator__scrollbar--border-radius);
+}
+
+.snk-configurator__main::-webkit-scrollbar {
+    /*public*/
+    background-color: var(--snk-configurator__scrollbar--background-color-secondary);
+    width: var(--snk-configurator__scrollbar--width);
+    max-width: var(--snk-configurator__scrollbar--width);
+    min-width: var(--snk-configurator__scrollbar--width);
+}