@sankhyalabs/sankhyablocks 2.1.3 → 2.1.4

package/dist/components/snk-configurator2.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { ObjectUtils, ApplicationContext } from '@sankhyalabs/core';
-import { ApplicationUtils } from '@sankhyalabs/ezui/dist/collection/utils';
-import { C as CONFIG_EVENTS, V as VIEW_MODE } from './constants.js';
-import { C as ConfigurableElementsStorage, d as defineCustomElement$1 } from './snk-config-modal2.js';
+import { ApplicationContext } from '@sankhyalabs/core';
+import { V as VIEW_MODE } from './constants.js';
+import { A as AuthorizationConfig } from './AuthorizationConfig.js';
+
+const snkConfiguratorCss = ".sc-snk-configurator-h{--snk-configurator__button-close--padding-left:var(--space--medium, 12px);--snk-configurator__title--color:var(--title--primary, #2B3A54);--snk-configurator__title--font-family:var(--font-pattern, \"Roboto\");--snk-configurator__title--font-size:var(--title--large, 20px);--snk-configurator__title--font-weight:var(--text-weight--extra-large, 700);--snk-configurator__subtitle--color:var(--title--primary, #2B3A54);--snk-configurator__subtitle--font-family:var(--font-pattern, \"Roboto\");--snk-configurator__subtitle--font-size:var(--text--medium, 14px);--snk-configurator__subtitle--font-weight:var(--text-weight--large, 600);--snk-configurator__scrollbar--border-radius:var(--border--radius-small, 6px);--snk-configurator__scrollbar--width:var(--space--medium, 12px);--snk-configurator__scrollbar--background-color-primary:var(--scrollbar--primary, #2B3A54);--snk-configurator__scrollbar--background-color-secondary:var(--scrollbar--secondary, #E5EAF0)}.snk-configurator.sc-snk-configurator{display:grid;grid-template-rows:auto 1fr auto;max-height:100%;width:100%}@media screen and (min-width: 480px){.snk-configurator.sc-snk-configurator{width:359px;max-width:359px}}.snk-configurator__button-config.sc-snk-configurator{--ez-button--min-width:100%}.snk-configurator__header.sc-snk-configurator{display:flex;justify-content:space-between;align-items:center;width:100%}.snk-configurator__title.sc-snk-configurator{display:flex;margin:0;line-height:normal;letter-spacing:0em;text-align:left;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.sc-snk-configurator{display:flex;margin:0;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.sc-snk-configurator{padding-left:var(--snk-configurator__button-close--padding-left)}.snk-configurator__main.sc-snk-configurator{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--snk-configurator__scrollbar--background-color-primary) var(--snk-configurator__scrollbar--background-color-secondary)}.snk-configurator__main.sc-snk-configurator::-webkit-scrollbar-track{background-color:var(--snk-configurator__scrollbar--background-color-secondary)}.snk-configurator__main.sc-snk-configurator::-webkit-scrollbar-thumb{background-color:var(--snk-configurator__scrollbar--background-color-primary);border-radius:var(--snk-configurator__scrollbar--border-radius)}.snk-configurator__main.sc-snk-configurator::-webkit-scrollbar{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)}";
 
 const GRID_MODE = VIEW_MODE.grid;
 const FORM_MODE = VIEW_MODE.form;
@@ -10,202 +11,99 @@ const SnkConfigurator = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   constructor() {
     super();
     this.__registerHost();
-    this.changeViewMode = createEvent(this, "changeViewMode", 7);
-    /**
-     * Nome do componente que será vinculado ao `data-configurator-parent` para controlar o modal de configurações.
-     */
-    this.name = "snkConfigurator";
+    this.configSelected = createEvent(this, "configSelected", 7);
+    this.openConfig = createEvent(this, "openConfig", 7);
+    this._opened = false;
     /**
-     * Define se o campo está habilitado.
+     * Define qual modo de visualização está ativo.
      */
-    this.enabled = true;
+    this.viewMode = GRID_MODE.name;
   }
-  /**
-   * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
-   * através de um pequeno modulo na estrutura da aplicação:
-   * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
-   * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-configurator.msg.ts"
-   */
-  getMessage(key) {
-    return this._application.messagesBuilder.getMessage(key, {});
+  async open() {
+    this._opened = true;
+    this.configSelected.emit(this.getViewModeValue());
   }
-  controlConfigModal(opened) {
-    var _a;
-    if (this._modal != undefined) {
-      this._modal.opened = opened;
-      if (this._configModal != undefined) {
-        this._configModal.gridMode = ((_a = this._grid) === null || _a === void 0 ? void 0 : _a.offsetParent) != undefined;
-      }
-    }
+  async close() {
+    this.closeConfig();
   }
-  changeConfigModal(evt) {
-    const data = evt === null || evt === void 0 ? void 0 : evt.detail;
-    if (data === null || data === void 0 ? void 0 : data.openConfig) {
-      this.controlConfigModal(false);
-      this.callShowConfig(data === null || data === void 0 ? void 0 : data.viewMode);
-    }
-    else if ((data === null || data === void 0 ? void 0 : data.viewMode) === GRID_MODE.index) {
-      this.changeViewMode.emit(GRID_MODE.name);
-    }
-    else if ((data === null || data === void 0 ? void 0 : data.viewMode) === FORM_MODE.index) {
-      this.changeViewMode.emit(FORM_MODE.name);
-    }
+  closeConfig() {
+    this._opened = false;
   }
-  callShowConfig(viewMode) {
-    if (viewMode === GRID_MODE.index) {
-      if (this._grid == undefined) {
-        this.findGrid();
-      }
-      if (this._grid != undefined) {
-        this._grid.setShowGridConfig(true);
-      }
-    }
-    else if (viewMode === FORM_MODE.index) {
-      if (this._form == undefined) {
-        this.findForm();
-      }
-      if (this._form != undefined) {
-        this._form.setShowFormConfig(true);
-      }
-    }
+  onViewModeChanged(evt) {
+    const value = evt === null || evt === void 0 ? void 0 : evt.detail;
+    this.viewMode = value;
+    this.configSelected.emit(value);
   }
-  getConfigModal() {
-    const modalContainer = document.createElement("ez-modal");
-    modalContainer.modalSize = "small";
-    modalContainer.opened = false;
-    modalContainer.closeEsc = false;
-    modalContainer.closeOutsideClick = false;
-    modalContainer.dataset.configuratorModal = this.name;
-    modalContainer.addEventListener(CONFIG_EVENTS.closeModal, () => {
-      this.controlConfigModal(false);
-    });
-    const modalContent = document.createElement("snk-config-modal");
-    modalContent.addEventListener(CONFIG_EVENTS.cancelConfig, () => {
-      this.controlConfigModal(false);
-    });
-    modalContent.addEventListener(CONFIG_EVENTS.changeConfig, (evt) => {
-      this.changeConfigModal(evt);
-    });
-    modalContent.configName = this.configName;
-    modalContainer.append(modalContent);
-    return modalContainer;
+  onClickOpenConfig() {
+    this.openConfig.emit(this.viewMode);
   }
-  findConfigModal() {
-    let modalContainer = document.body.querySelector(`[data-configurator-modal="${this.name}"]`);
-    if (modalContainer == undefined) {
-      modalContainer = this.getConfigModal();
-      document.body.appendChild(modalContainer);
+  isAllowed(configName) {
+    if (AuthorizationConfig[configName]) {
+      return this._permissions ? this._permissions.isSup || this._permissions[configName] : false;
     }
-    this._modal = modalContainer;
-    this._configModal = modalContainer.querySelector("snk-config-modal");
+    return true;
   }
-  findGrid() {
-    if (this._grid != undefined) {
-      return;
-    }
-    this._grid = ConfigurableElementsStorage.getGrid(this.configName);
-    if (this._grid != undefined && this._grid.dataset.eventConfigChanged == undefined) {
-      this._grid.dataset.eventConfigChanged = "true";
-      this._grid.addEventListener(CONFIG_EVENTS.configChanged, (evt) => {
-        this.saveConfig(evt);
-      });
+  enableModeConfig() {
+    if (!this.isAllowed(AuthorizationConfig.CONFIG_GRID) || !this.isAllowed(AuthorizationConfig.CONFIG)) {
+      return false;
     }
+    return true;
   }
-  findForm() {
-    if (this._form != undefined) {
-      return;
-    }
-    this._form = ConfigurableElementsStorage.getForm(this.configName);
-    if (this._form != undefined && this._form.dataset.eventConfigChanged == undefined) {
-      this._form.dataset.eventConfigChanged = "true";
-      this._form.addEventListener(CONFIG_EVENTS.configChanged, (evt) => {
-        this.saveConfig(evt);
-      });
-    }
-  }
-  saveConfig(evt) {
-    const config = evt === null || evt === void 0 ? void 0 : evt.detail;
-    if (this._application != undefined && config != undefined) {
-      if ((config === null || config === void 0 ? void 0 : config.fields) != undefined) {
-        this._application.saveFormConfig(config, this.configName)
-          .then((response) => {
-          if ((response === null || response === void 0 ? void 0 : response.resource) != undefined) {
-            this.loadFormConfig(true);
-          }
-        });
+  getViewModeValue() {
+    if (this._permissions != undefined) {
+      if (!this.isAllowed(AuthorizationConfig.CONFIG_GRID)) {
+        this.viewMode = FORM_MODE.name;
       }
-      else if ((config === null || config === void 0 ? void 0 : config.columns) != undefined) {
-        this._application.saveGridConfig(config)
-          .then((response) => {
-          if ((response === null || response === void 0 ? void 0 : response.resource) != undefined) {
-            this.setGridConfig(response.resource);
-          }
-        });
+      else if (!this.isAllowed(AuthorizationConfig.CONFIG)) {
+        this.viewMode = GRID_MODE.name;
       }
     }
+    return this.viewMode;
   }
-  setGridConfig(strConfig) {
-    if (this._grid != undefined) {
-      const config = ObjectUtils.stringToObject(strConfig);
-      this._grid.setConfig(config).then(() => {
-        ApplicationUtils.info(this.getMessage("snkConfigurator.msgSaveSuccessfully"), { iconName: "check" });
-      });
-    }
+  /**
+   * Conforme mecanismo de mensagens, é possível customizar as mensagens dos blocos de construção
+   * através de um pequeno modulo na estrutura da aplicação:
+   * - Criar um arquivo no seguinte caminho: /messages/appmessages.msg.js.
+   * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-configurator.msg.ts"
+   */
+  getMessage(key) {
+    var _a, _b;
+    return (_b = (_a = this._application) === null || _a === void 0 ? void 0 : _a.messagesBuilder) === null || _b === void 0 ? void 0 : _b.getMessage(key, {});
   }
-  loadGridConfig() {
-    if (this._application != undefined && this.configName != undefined && this._grid != undefined) {
-      this._application.loadGridConfig(this.configName).then((config) => {
-        this._grid.setConfig(config);
-      });
+  componentWillLoad() {
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    if (this._application) {
+      this._application.getAllAccess().then(access => this._permissions = access);
     }
-  }
-  loadFormConfig(showInfoSuccess = false) {
-    if (this._application != undefined && this.configName != undefined && this._form != undefined) {
-      this._application.loadFormConfig(this.configName).then((config) => {
-        this._form.setConfig(config).then(() => {
-          if (showInfoSuccess) {
-            ApplicationUtils.info(this.getMessage("snkConfigurator.msgSaveSuccessfully"), { iconName: "check" });
-          }
-        });
-      });
+    else {
+      this._permissions = {};
     }
   }
-  loadConfig() {
-    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
-    this.loadGridConfig();
-    this.loadFormConfig();
-  }
-  componentDidLoad() {
-    this.findConfigModal();
-    this.findGrid();
-    this.findForm();
-    this.loadConfig();
-  }
   render() {
-    return (h("ez-button", { mode: "icon", iconName: "settings-inverted", size: "small", enabled: this.enabled, onClick: () => this.controlConfigModal(true) }));
+    return (h("ez-modal", { opened: this._opened, "close-esc": false, "close-outside-click": false, "modal-size": "small" }, h("div", { class: "snk-configurator" }, h("div", { class: "snk-configurator__header" }, h("label", { class: "snk-configurator__title" }, this.getMessage("snkConfigurator.titleConfigurations")), h("div", { class: "snk-configurator__button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "snk-configurator__main" }, h("ez-radio-button", { class: "ez-margin-top--medium", label: this.getMessage("snkConfigurator.subTitleModeConfig"), value: this.getViewModeValue(), onEzChange: (evt) => this.onViewModeChanged(evt), enabled: this.enableModeConfig() }, h("ez-radio-button-option", { label: this.getMessage("snkConfigurator.labelGrid"), value: GRID_MODE.name }), h("ez-radio-button-option", { label: this.getMessage("snkConfigurator.labelForm"), value: FORM_MODE.name })), h("ez-button", { mode: "slim", label: this.viewMode === GRID_MODE.name
+        ? this.getMessage("snkConfigurator.labelConfigGrid")
+        : this.getMessage("snkConfigurator.labelConfigForm"), class: "snk-configurator__button-config ez-button--primary", onClick: () => this.onClickOpenConfig() }), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })))));
   }
-  get _element() { return this; }
+  static get style() { return snkConfiguratorCss; }
 }, [2, "snk-configurator", {
     "configName": [1, "config-name"],
-    "name": [1],
-    "enabled": [4]
+    "viewMode": [1, "view-mode"],
+    "_opened": [32],
+    "_permissions": [32],
+    "open": [64],
+    "close": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-configurator", "snk-config-modal"];
+  const components = ["snk-configurator"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-configurator":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, SnkConfigurator);
       }
       break;
-    case "snk-config-modal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
   } });
 }
 

package/dist/components/snk-crud.js

@@ -2,18 +2,19 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { ApplicationContext } from '@sankhyalabs/core';
 import { V as VIEW_MODE } from './constants.js';
 import { T as TaskbarElement, d as defineCustomElement$2 } from './snk-taskbar2.js';
-import { d as defineCustomElement$f } from './snk-config-modal2.js';
-import { d as defineCustomElement$e } from './snk-config-options2.js';
-import { d as defineCustomElement$d } from './snk-configurator2.js';
-import { d as defineCustomElement$c } from './snk-field-config2.js';
-import { d as defineCustomElement$b } from './snk-filter-bar2.js';
-import { d as defineCustomElement$a } from './snk-filter-detail2.js';
-import { d as defineCustomElement$9 } from './snk-filter-item2.js';
-import { d as defineCustomElement$8 } from './snk-filter-list2.js';
-import { d as defineCustomElement$7 } from './snk-filter-modal2.js';
-import { d as defineCustomElement$6 } from './snk-form2.js';
-import { d as defineCustomElement$5 } from './snk-form-config2.js';
-import { d as defineCustomElement$4 } from './snk-grid2.js';
+import { d as defineCustomElement$g } from './snk-config-options2.js';
+import { d as defineCustomElement$f } from './snk-configurator2.js';
+import { d as defineCustomElement$e } from './snk-field-config2.js';
+import { d as defineCustomElement$d } from './snk-filter-bar2.js';
+import { d as defineCustomElement$c } from './snk-filter-detail2.js';
+import { d as defineCustomElement$b } from './snk-filter-item2.js';
+import { d as defineCustomElement$a } from './snk-filter-list2.js';
+import { d as defineCustomElement$9 } from './snk-filter-modal2.js';
+import { d as defineCustomElement$8 } from './snk-form2.js';
+import { d as defineCustomElement$7 } from './snk-form-config2.js';
+import { d as defineCustomElement$6 } from './snk-grid2.js';
+import { d as defineCustomElement$5 } from './snk-grid-config2.js';
+import { d as defineCustomElement$4 } from './snk-select-box2.js';
 import { d as defineCustomElement$3 } from './snk-tab-config2.js';
 
 const snkCrudCss = ".sc-snk-crud-h{display:flex;flex-direction:column;height:100%;width:100%}";
@@ -25,6 +26,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.actionClick = createEvent(this, "actionClick", 7);
+    this._viewMode = GRID_MODE.name;
     /**
      * Determina se pode haver mais de uma linha selecionada na grade
      */
@@ -38,22 +40,38 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   async gridToForm(keepFormMode = false) {
     this._backToGrid = !keepFormMode && await this._viewStack.getSelectedIndex() === GRID_MODE.index;
-    this._viewStack.show(FORM_MODE.index);
+    this.setViewMode(FORM_MODE);
   }
   async executeAction(act) {
     if (act === TaskbarElement.GRID_MODE) {
-      this._viewStack.show(GRID_MODE.index);
+      this.setViewMode(GRID_MODE);
     }
     else if (act === TaskbarElement.FORM_MODE || act === TaskbarElement.UPDATE) {
       this.gridToForm(act !== TaskbarElement.UPDATE);
     }
+    else if (act === TaskbarElement.CONFIGURATOR) {
+      this._snkConfigurator.open();
+    }
+  }
+  setViewMode(viewMode) {
+    this._viewStack.show(viewMode.index);
+    this._viewMode = viewMode.name;
+  }
+  openConfig(viewMode) {
+    this._snkConfigurator.close();
+    if (viewMode === GRID_MODE.name) {
+      this._snkGrid.showConfig();
+    }
+    else if (viewMode === FORM_MODE.name) {
+      this._snkForm.showConfig();
+    }
   }
   insertionModeHandler() {
     this.gridToForm();
   }
   cancelHandler() {
     if (this._backToGrid) {
-      this._viewStack.show(GRID_MODE.index);
+      this.setViewMode(GRID_MODE);
     }
   }
   componentWillLoad() {
@@ -83,7 +101,7 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   render() {
-    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-configurator-parent": "snkConfigurator" }, h("stack-item", null, h("snk-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 }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { configName: this.configName, actionsList: this.actionsList, onExit: () => this._viewStack.show(GRID_MODE.index), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, h("slot", { name: "SnkFormTaskBar" })))));
+    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, 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 }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { ref: (ref) => this._snkForm = ref, 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) })));
   }
   get _element() { return this; }
   static get style() { return snkCrudCss; }
@@ -96,75 +114,81 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "multipleSelection": [4, "multiple-selection"],
     "_dataUnit": [32],
     "_dataState": [32],
+    "_viewMode": [32],
     "goToView": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-crud", "snk-config-modal", "snk-config-options", "snk-configurator", "snk-field-config", "snk-filter-bar", "snk-filter-detail", "snk-filter-item", "snk-filter-list", "snk-filter-modal", "snk-form", "snk-form-config", "snk-grid", "snk-tab-config", "snk-taskbar"];
+  const components = ["snk-crud", "snk-config-options", "snk-configurator", "snk-field-config", "snk-filter-bar", "snk-filter-detail", "snk-filter-item", "snk-filter-list", "snk-filter-modal", "snk-form", "snk-form-config", "snk-grid", "snk-grid-config", "snk-select-box", "snk-tab-config", "snk-taskbar"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-crud":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, SnkCrud$1);
       }
       break;
-    case "snk-config-modal":
+    case "snk-config-options":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "snk-configurator":
       if (!customElements.get(tagName)) {
         defineCustomElement$f();
       }
       break;
-    case "snk-config-options":
+    case "snk-field-config":
       if (!customElements.get(tagName)) {
         defineCustomElement$e();
       }
       break;
-    case "snk-configurator":
+    case "snk-filter-bar":
       if (!customElements.get(tagName)) {
         defineCustomElement$d();
       }
       break;
-    case "snk-field-config":
+    case "snk-filter-detail":
       if (!customElements.get(tagName)) {
         defineCustomElement$c();
       }
       break;
-    case "snk-filter-bar":
+    case "snk-filter-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$b();
       }
       break;
-    case "snk-filter-detail":
+    case "snk-filter-list":
       if (!customElements.get(tagName)) {
         defineCustomElement$a();
       }
       break;
-    case "snk-filter-item":
+    case "snk-filter-modal":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }
       break;
-    case "snk-filter-list":
+    case "snk-form":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "snk-filter-modal":
+    case "snk-form-config":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
       break;
-    case "snk-form":
+    case "snk-grid":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "snk-form-config":
+    case "snk-grid-config":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "snk-grid":
+    case "snk-select-box":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

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

@@ -3,7 +3,7 @@ import { a as draggable_bundle, d as defineCustomElement$1 } from './snk-tab-con
 import { ObjectUtils, ArrayUtils, ApplicationContext } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
 import { C as CONFIG_EVENTS, b as TAB_NAMES, A as ACTION_CONFIG, D as DEFAULT_TYPE } from './constants.js';
-import { a as UserConfigType } from './form-config-fetcher.js';
+import { a as UserConfigType, C as ConfigStorage } from './ConfigStorage.js';
 import { d as defineCustomElement$3 } from './snk-config-options2.js';
 import { d as defineCustomElement$2 } from './snk-field-config2.js';
 
@@ -20,6 +20,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.configChange = createEvent(this, "configChange", 7);
+    this.configClose = createEvent(this, "configClose", 7);
     this._listEnabledFields = [];
     this._renderTimer = 500;
     this._sortableTimer = 100;
@@ -163,14 +164,9 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       && this._optionFormConfigChanged === true
       && this._formConfigChanged === false;
   }
-  saveConfig() {
-    var _a;
-    if (((_a = this._tempGroups) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      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 = ObjectUtils.copy(this.formConfig);
     }
@@ -188,9 +184,24 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
     }
     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) {
+      ApplicationUtils.alert(this.getMessage("snkFormConfig.confirm.title"), this.getMessage("snkFormConfig.confirm.group"));
+      return;
+    }
+    const formConfig = this.buildConfigToSave();
     this._formConfigChanged = false;
     this._optionFormConfigChanged = false;
+    ConfigStorage.saveFormConfig(formConfig, this.configName)
+      .then((response) => {
+      if ((response === null || response === void 0 ? void 0 : response.resource) != undefined) {
+        ApplicationUtils.info(this.getMessage("snkFormConfig.info.successfullyConfigSaved"), { iconName: "check" });
+        this.configChange.emit(formConfig);
+      }
+    });
   }
   applyOptionConfig() {
     if (this._optionFormConfigChanged === true && this._optionFormConfigSelected != undefined) {
@@ -244,12 +255,12 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       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")) {
@@ -453,9 +464,8 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this._sortableGroup.on(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;
@@ -507,14 +517,13 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   loadConfigByUser() {
-    var _a;
     if (this._application != undefined) {
       const option = this._optionFormConfigSelected;
       const fetchActionName = (option === null || option === void 0 ? void 0 : option.origin) === UserConfigType.DEFAULT ? "fetchDefaultConfig" :
         (option === null || option === void 0 ? void 0 : option.origin) === 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;
@@ -771,9 +780,6 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.onFilterChange(filterValue);
     }
   }
-  setShowFormConfig(value) {
-    this.parentForm.setShowFormConfig(value);
-  }
   changeTabSelected(tabSelected) {
     this._tabSelected = tabSelected.index;
     const selectorTab = this._formContainer.querySelector("div#tab" + tabSelected.index);
@@ -964,7 +970,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
 }, [2, "snk-form-config", {
     "dataUnit": [16],
     "formConfig": [16],
-    "parentForm": [16],
+    "configName": [513, "config-name"],
     "_formConfigOptions": [32],
     "_fieldConfigSelected": [32],
     "_layoutFormConfig": [32],