@sankhyalabs/sankhyablocks 1.4.0-beta.7 → 1.4.0-beta.9

package/dist/esm/snk-config-modal.entry.js

@@ -0,0 +1,58 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-e4121713.js';
+import { ApplicationContext } from '@sankhyalabs/core';
+import { c as VIEW_MODE } from './constants-c6039d3d.js';
+import { C as ConfigurableElementsStorage } from './configurableElementsStorage-cdc144b5.js';
+
+const snkConfigModalCss = ".sc-snk-config-modal-h{--snk-config-modal__button-close--padding-left:var(--space--medium, 12px);--snk-config-modal__title--color:var(--title--primary, #2B3A54);--snk-config-modal__title--font-family:var(--font-pattern, \"Sora\");--snk-config-modal__title--font-size:var(--title--large, 20px);--snk-config-modal__title--font-weight:var(--text-weight--extra-large, 700);--snk-config-modal__subtitle--color:var(--title--primary, #2B3A54);--snk-config-modal__subtitle--font-family:var(--font-pattern, \"Sora\");--snk-config-modal__subtitle--font-size:var(--text--medium, 14px);--snk-config-modal__subtitle--font-weight:var(--text-weight--large, 600);--snk-config-modal__scrollbar--border-radius:var(--border--radius-small, 6px);--snk-config-modal__scrollbar--width:var(--space--medium, 12px);--snk-config-modal__scrollbar--background-color-primary:var(--scrollbar--primary, #2B3A54);--snk-config-modal__scrollbar--background-color-secondary:var(--scrollbar--secondary, #E5EAF0);display:grid;grid-template-rows:auto 1fr auto;max-height:100%;width:100%}@media screen and (min-width: 480px){.sc-snk-config-modal-h{width:359px;max-width:359px}}.snk-config-modal__button-config.sc-snk-config-modal{--ez-button--min-width:100%}.snk-config-modal__header.sc-snk-config-modal{display:flex;justify-content:space-between;align-items:center;width:100%}.snk-config-modal__title.sc-snk-config-modal{display:flex;margin:0;line-height:normal;letter-spacing:0em;text-align:left;color:var(--snk-config-modal__title--color);font-size:var(--snk-config-modal__title--font-size);font-family:var(--snk-config-modal__title--font-family);font-weight:var(--snk-config-modal__title--font-weight)}.snk-config-modal__subtitle.sc-snk-config-modal{display:flex;margin:0;padding-top:var(--space--medium);padding-bottom:var(--space--small);color:var(--snk-config-modal__subtitle--color);font-size:var(--snk-config-modal__subtitle--font-size);font-family:var(--snk-config-modal__subtitle--font-family);font-weight:var(--snk-config-modal__subtitle--font-weight)}.snk-config-modal__button-close.sc-snk-config-modal{padding-left:var(--snk-config-modal__button-close--padding-left)}.snk-config-modal__main.sc-snk-config-modal{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--snk-config-modal__scrollbar--background-color-primary) var(--snk-config-modal__scrollbar--background-color-secondary)}.snk-config-modal__main.sc-snk-config-modal::-webkit-scrollbar-track{background-color:var(--snk-config-modal__scrollbar--background-color-secondary)}.snk-config-modal__main.sc-snk-config-modal::-webkit-scrollbar-thumb{background-color:var(--snk-config-modal__scrollbar--background-color-primary);border-radius:var(--snk-config-modal__scrollbar--border-radius)}.snk-config-modal__main.sc-snk-config-modal::-webkit-scrollbar{background-color:var(--snk-config-modal__scrollbar--background-color-secondary);width:var(--snk-config-modal__scrollbar--width);max-width:var(--snk-config-modal__scrollbar--width);min-width:var(--snk-config-modal__scrollbar--width)}";
+
+const GRID_MODE = VIEW_MODE.grid;
+const FORM_MODE = VIEW_MODE.form;
+const SnkConfigModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cancelConfig = createEvent(this, "cancelConfig", 7);
+    this.changeConfig = createEvent(this, "changeConfig", 7);
+    /**
+     * Define se o modo grid está ativo.
+     */
+    this.gridMode = true;
+  }
+  dispatchChange(openConfig = false) {
+    const data = {
+      viewMode: this.gridMode ? GRID_MODE.index : FORM_MODE.index,
+      openConfig
+    };
+    this.changeConfig.emit(data);
+  }
+  closeConfig() {
+    this.cancelConfig.emit();
+  }
+  onChecked(evt) {
+    const value = evt === null || evt === void 0 ? void 0 : evt.detail;
+    this.gridMode = value === "G" ? true : false;
+    this.dispatchChange();
+  }
+  onClicked() {
+    this.dispatchChange(true);
+  }
+  /**
+   * 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, {});
+  }
+  componentWillLoad() {
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "snk-config-modal__header" }, h("label", { class: "snk-config-modal__title" }, this.getMessage("snkConfigModal.titleConfigurations")), h("div", { class: "snk-config-modal__button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "snk-config-modal__main" }, h("ez-radio-button", { class: "ez-margin-top--medium", label: this.getMessage("snkConfigModal.subTitleModeConfig"), value: this.gridMode ? "G" : "F", onEzChange: (evt) => this.onChecked(evt) }, ConfigurableElementsStorage.getForm(this.configName) && h("ez-radio-button-option", { label: this.getMessage("snkConfigModal.labelGrid"), value: "G" }), ConfigurableElementsStorage.getGrid(this.configName) && h("ez-radio-button-option", { label: this.getMessage("snkConfigModal.labelForm"), value: "F" })), h("ez-button", { mode: "slim", label: this.gridMode
+        ? this.getMessage("snkConfigModal.labelConfigGrid")
+        : this.getMessage("snkConfigModal.labelConfigForm"), class: "snk-config-modal__button-config ez-button--primary", onClick: () => this.onClicked() }), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" }))));
+  }
+};
+SnkConfigModal.style = snkConfigModalCss;
+
+export { SnkConfigModal as snk_config_modal };

package/dist/esm/snk-config-options.entry.js

@@ -0,0 +1,226 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e4121713.js';
+import { UserInterface, ObjectUtils, ApplicationContext } from '@sankhyalabs/core';
+import { DataType, getConvertedValue } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
+import { CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
+import { V as VARS_BY_TYPE, D as DEFAULT_TYPE, a as TAGS_BY_TYPE } from './constants-c6039d3d.js';
+
+const snkConfigOptionsCss = ".sc-snk-config-options-h{width:100%;border:2px solid var(--color--secondary-200);border-radius:15px}.config-options__switch-row.sc-snk-config-options{margin-top:-30px}";
+
+const SnkConfigOptions = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.configOptionsChanged = createEvent(this, "configOptionsChanged", 7);
+    /**
+     * Armazena as propriedades do campo
+     */
+    this.fieldConfig = {};
+  }
+  onConfigDefault(optionSelected) {
+    if (optionSelected != undefined) {
+      this._defaultType = optionSelected;
+      this.fieldConfig.defaultValue = {
+        type: this._defaultType
+      };
+      this.configOptionsChanged.emit(this.fieldConfig);
+    }
+  }
+  buildOptions() {
+    var _a, _b, _c;
+    const interfaceField = (_c = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.name)) === null || _c === void 0 ? void 0 : _c.userInterface;
+    return VARS_BY_TYPE.UserInterface[interfaceField];
+  }
+  enabledValueDefault() {
+    var _a, _b, _c;
+    const field = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.name);
+    const allowDefault = (_c = field === null || field === void 0 ? void 0 : field.properties) === null || _c === void 0 ? void 0 : _c.allowDefault;
+    const hasVariableVar = VARS_BY_TYPE.UserInterface.hasOwnProperty(field === null || field === void 0 ? void 0 : field.userInterface);
+    if ((allowDefault == undefined || allowDefault === "true") && hasVariableVar) {
+      return true;
+    }
+    return false;
+  }
+  isAllowDefault() {
+    var _a, _b;
+    const allowDefault = (_b = (_a = this._fieldProperties) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.allowDefault;
+    if (allowDefault == undefined) {
+      return true;
+    }
+    return allowDefault === "true";
+  }
+  loadDefaultValue() {
+    var _a;
+    if (this.fieldConfig == undefined) {
+      this._defaultType = DEFAULT_TYPE.fixed;
+      this.fieldConfig = {
+        defaultValue: {
+          type: this._defaultType
+        }
+      };
+    }
+    else if (((_a = this.fieldConfig.defaultValue) === null || _a === void 0 ? void 0 : _a.type) == undefined) {
+      this._defaultType = DEFAULT_TYPE.fixed;
+      this.fieldConfig.defaultValue = {
+        type: this._defaultType
+      };
+    }
+    else {
+      this._defaultType = this.fieldConfig.defaultValue.type;
+    }
+  }
+  getFieldProperties(field) {
+    var _a;
+    if (field != undefined) {
+      return (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField(field);
+    }
+  }
+  getMessage(key, params) {
+    return this._application.messagesBuilder.getMessage(key, params);
+  }
+  getDefaultType() {
+    var _a;
+    return (_a = this.fieldConfig.defaultValue.type) !== null && _a !== void 0 ? _a : DEFAULT_TYPE.fixed;
+  }
+  getEnabledByProperty(property) {
+    const properties = this._fieldProperties;
+    if (properties != undefined && properties[property] === true) {
+      return false;
+    }
+    return true;
+  }
+  getValueByProperty(property) {
+    const properties = this._fieldProperties;
+    if (properties != undefined && properties[property] === true) {
+      return true;
+    }
+    return this.fieldConfig[property];
+  }
+  getValidatedValue(fieldValue) {
+    var _a, _b;
+    if (fieldValue == undefined) {
+      return;
+    }
+    const field = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getField((_b = this.fieldConfig) === null || _b === void 0 ? void 0 : _b.name);
+    const dataType = field === null || field === void 0 ? void 0 : field.dataType;
+    if (dataType == undefined) {
+      return;
+    }
+    const value = (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.waitmessage) != undefined ? undefined :
+      dataType !== DataType.OBJECT && dataType !== DataType.DATE
+        && typeof fieldValue === "object"
+        ? fieldValue.value
+        : fieldValue;
+    return dataType === DataType.OBJECT ? JSON.stringify(value) : value;
+  }
+  buildInputDefault({ value, enabled, label, name, required, userInterface }, properties = undefined, mode = undefined) {
+    let options;
+    let precision = 0;
+    let prettyPrecision = 0;
+    const TagName = userInterface == undefined || TAGS_BY_TYPE[userInterface] == undefined
+      ? TAGS_BY_TYPE.DEFAULT
+      : TAGS_BY_TYPE[userInterface];
+    if (userInterface === UserInterface.OPTIONSELECTOR) {
+      const prop = properties === null || properties === void 0 ? void 0 : properties.options;
+      if (typeof prop === "string") {
+        const parsed = ObjectUtils.stringToObject(prop);
+        options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
+      }
+      else {
+        options = prop;
+      }
+    }
+    else if (userInterface === UserInterface.DECIMALNUMBER) {
+      precision = Number((properties === null || properties === void 0 ? void 0 : properties.precision) || 2);
+      prettyPrecision = Number((properties === null || properties === void 0 ? void 0 : properties.prettyPrecision) || precision);
+    }
+    return h(TagName, Object.assign({ value: value, enabled: enabled, label: label, "data-field-name": name, key: name, onEzChange: (evt) => this.onChange(evt === null || evt === void 0 ? void 0 : evt.detail) }, (this.getConditionalAttributes(userInterface, required, options, precision, prettyPrecision, mode))));
+  }
+  getConditionalAttributes(userInterface, required, options, precision, prettyPrecision, mode) {
+    switch (userInterface) {
+      case UserInterface.SEARCH:
+        return {
+          suppressEmptyOption: required,
+          optionLoader: (searchArgument) => this.onSearch(searchArgument)
+        };
+      case UserInterface.OPTIONSELECTOR:
+        return {
+          suppressEmptyOption: required,
+          options
+        };
+      case UserInterface.CHECKBOX:
+      case UserInterface.SWITCH:
+        return {
+          mode
+        };
+      case UserInterface.INTEGERNUMBER:
+      case UserInterface.DECIMALNUMBER:
+        return {
+          precision,
+          prettyPrecision,
+          onEzStartChange: (evt) => this.onChange(evt === null || evt === void 0 ? void 0 : evt.detail)
+        };
+      case UserInterface.DATE:
+      case UserInterface.DATETIME:
+      case UserInterface.TIME:
+        return {
+          onEzStartChange: (evt) => this.onChange(evt === null || evt === void 0 ? void 0 : evt.detail)
+        };
+      default:
+        return {};
+    }
+  }
+  onChange(fieldValue) {
+    this.fieldConfig.defaultValue.value = this.getValidatedValue(fieldValue);
+    this.configOptionsChanged.emit(this.fieldConfig);
+  }
+  onSearch(searchArgument) {
+    if (this._application != undefined && this.fieldConfig != undefined) {
+      return this._application.executeSearch(searchArgument, this.fieldConfig.name, this.dataUnit);
+    }
+  }
+  buildField(field) {
+    const { config, descriptor } = field;
+    const { name, label, readOnly, required, defaultValue } = config;
+    const { userInterface, properties } = descriptor;
+    const enabled = (properties === null || properties === void 0 ? void 0 : properties.allowDefault) != undefined ? properties.allowDefault === "true" : !readOnly;
+    let value;
+    if (enabled) {
+      value = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value;
+      if (value != undefined) {
+        value = getConvertedValue(descriptor === null || descriptor === void 0 ? void 0 : descriptor.dataType, value);
+      }
+    }
+    const configField = { value, enabled, label, name, required, userInterface };
+    switch (userInterface) {
+      case UserInterface.SWITCH:
+        return this.buildInputDefault(configField, undefined, CheckMode.SWITCH);
+      case UserInterface.CHECKBOX:
+        return this.buildInputDefault(configField, undefined, CheckMode.REGULAR);
+      case UserInterface.OPTIONSELECTOR:
+      case UserInterface.DECIMALNUMBER:
+        return this.buildInputDefault(configField, properties);
+      default:
+        return this.buildInputDefault(configField);
+    }
+  }
+  componentWillLoad() {
+    var _a;
+    this.loadDefaultValue();
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    this._fieldProperties = this.getFieldProperties((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.name);
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, null, h("div", { id: this.idConfig }, h("div", { class: "ez-row ez-padding--medium" }, h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-text-input", { label: this.getMessage("snkConfigOptions.label.nameField"), value: (_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.label, onEzChange: (evt) => { this.fieldConfig.label = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-combo-box", { label: this.getMessage("snkConfigOptions.label.typeValueDefault"), suppressEmptyOption: true, enabled: this.enabledValueDefault(), onEzChange: (evt) => { var _a; return this.onConfigDefault((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value); }, value: this.getDefaultType() }, h("option", { value: DEFAULT_TYPE.fixed }, this.getMessage("snkConfigOptions.options.valueFixed")), h("option", { value: DEFAULT_TYPE.variable }, this.getMessage("snkConfigOptions.options.variable")))), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, this._defaultType === DEFAULT_TYPE.variable ?
+      h("ez-combo-box", { label: this.getMessage("snkConfigOptions.label.valueDefault"), enabled: this.isAllowDefault(), onEzChange: (evt) => { var _a; this.fieldConfig.defaultValue.value = (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.value; this.configOptionsChanged.emit(this.fieldConfig); }, value: this.fieldConfig.defaultValue.value, options: this.buildOptions() })
+      :
+        ((_b = this._fieldProperties) === null || _b === void 0 ? void 0 : _b.userInterface) &&
+          this.buildField({
+            descriptor: this._fieldProperties,
+            config: this.fieldConfig
+          }))), h("div", { class: "ez-row ez-padding--medium config-options__switch-row" }, h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: CheckMode.SWITCH, label: this.getMessage("snkConfigOptions.label.clearDuplicate"), value: this.fieldConfig.cleanOnCopy, onEzChange: (evt) => { this.fieldConfig.cleanOnCopy = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: CheckMode.SWITCH, label: this.getMessage("snkConfigOptions.label.requiredField"), enabled: this.getEnabledByProperty("required"), value: this.getValueByProperty("required"), onEzChange: (evt) => { this.fieldConfig.required = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } })), h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-4 ez-padding--small" }, h("ez-check", { mode: CheckMode.SWITCH, label: this.getMessage("snkConfigOptions.label.protectedField"), enabled: this.getEnabledByProperty("readOnly"), value: this.getValueByProperty("readOnly"), onEzChange: (evt) => { this.fieldConfig.readOnly = evt.detail; this.configOptionsChanged.emit(this.fieldConfig); } }))))));
+  }
+  get _element() { return getElement(this); }
+};
+SnkConfigOptions.style = snkConfigOptionsCss;
+
+export { SnkConfigOptions as snk_config_options };

package/dist/esm/{snk-filter-bar_5.entry.js → snk-configurator_6.entry.js}

@@ -1,9 +1,194 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-81dda3cf.js';
-import { DataType, ObjectUtils, StringUtils, ErrorException, ApplicationContext, FloatingManager, ArrayUtils } from '@sankhyalabs/core';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-e4121713.js';
+import { ObjectUtils, ApplicationContext, DataType, StringUtils, ErrorException, FloatingManager, ArrayUtils } from '@sankhyalabs/core';
+import { ApplicationUtils, CheckMode } from '@sankhyalabs/ezui/dist/collection/utils';
+import { C as CONFIG_EVENTS, c as VIEW_MODE } from './constants-c6039d3d.js';
+import { C as ConfigurableElementsStorage } from './configurableElementsStorage-cdc144b5.js';
 import { F as FilterItemType } from './filter-item-type.enum-a79b2fa8.js';
 import { ModalAction, ModalButtonStatus } from '@sankhyalabs/ezui/dist/collection/components/ez-modal-container';
 import { toString } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
-import { T as TaskbarElement, V as VisibleWhenForbidden, A as AuthorizationElements, b as buildElem, a as buildCustomButton } from './taskbar-elements-38eb5d51.js';
+import { T as TaskbarElement, V as VisibleWhenForbidden, A as AuthorizationElements, b as buildElem, a as buildCustomButton } from './taskbar-elements-e2ed0536.js';
+
+const GRID_MODE = VIEW_MODE.grid;
+const FORM_MODE = VIEW_MODE.form;
+const SnkConfigurator = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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";
+    /**
+     * Define se o campo está habilitado.
+     */
+    this.enabled = true;
+  }
+  /**
+   * 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, {});
+  }
+  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;
+      }
+    }
+  }
+  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);
+    }
+  }
+  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);
+      }
+    }
+  }
+  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;
+  }
+  findConfigModal() {
+    let modalContainer = document.body.querySelector(`[data-configurator-modal="${this.name}"]`);
+    if (modalContainer == undefined) {
+      modalContainer = this.getConfigModal();
+      document.body.appendChild(modalContainer);
+    }
+    this._modal = modalContainer;
+    this._configModal = modalContainer.querySelector("snk-config-modal");
+  }
+  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);
+      });
+    }
+  }
+  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);
+          }
+        });
+      }
+      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);
+          }
+        });
+      }
+    }
+  }
+  setGridConfig(strConfig) {
+    if (this._grid != undefined) {
+      const config = ObjectUtils.stringToObject(strConfig);
+      this._grid.setConfig(config).then(() => {
+        ApplicationUtils.info(this.getMessage("snkConfigurator.msgSaveSuccessfully"), { iconName: "check" });
+      });
+    }
+  }
+  loadGridConfig() {
+    if (this._application != undefined && this.configName != undefined && this._grid != undefined) {
+      this._application.loadGridConfig(this.configName).then((config) => {
+        this._grid.setConfig(config);
+      });
+    }
+  }
+  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" });
+          }
+        });
+      });
+    }
+  }
+  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) }));
+  }
+  get _element() { return getElement(this); }
+};
 
 const buildFilter = (item) => {
   switch (item.type) {
@@ -102,7 +287,7 @@ function buildPersonalized(item) {
   };
 }
 
-const snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns:minmax(100px, 100%) 1fr 1fr}.snk-filter__popover-container.sc-snk-filter-bar{display:flex;cursor:auto}.snk-filter__popover.sc-snk-filter-bar{display:flex;flex-direction:column;position:absolute;width:fit-content;height:fit-content;min-width:265px;z-index:var(--more-visible, 1);background-color:var(--background--xlight, #fff);border-radius:var(--border--radius-medium, 12px);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.snk-filter-item__editor-header.sc-snk-filter-bar{flex-grow:1;font-weight:var(--text-weight--medium, 400);color:var(--color--title-primary, #2B3A54)}.snk-filter__popover-rule.sc-snk-filter-bar{border-style:solid;border-color:var(--color--disable-secondary, #F2F5F8);border-radius:1px;border-width:1px;width:100%}.editor__ez-check.sc-snk-filter-bar{--ez-check__label--padding-left:0}.snk-filter-item__editor-header-button.sc-snk-filter-bar{cursor:pointer;background-color:transparent;border:none;padding:3px;outline-color:var(--color--primary)}.snk-filter-bar__divider.sc-snk-filter-bar{margin-bottom:var(--space--small)}.snk-filter-bar__filter-list-items-container.sc-snk-filter-bar{overflow-y:auto;max-height:360px;margin-top:var(--space--small, 6px)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar{cursor:pointer;border-radius:var(--border--radius-small, 6px);border:none;background-color:transparent}.snk-filter-bar__filter-list-item__label.sc-snk-filter-bar{color:var(--title--primary)}.snk-filter-bar__filter-list-item__label--secondary.sc-snk-filter-bar{color:var(--text--primary)}.snk-filter-bar__filter-list-item__icon.sc-snk-filter-bar{--ez-icon--color:var(--title--primary)}.snk-filter-bar__filter-list-item__icon--secondary.sc-snk-filter-bar{--ez-icon--color:var(--text--secondary)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:focus-visible{outline:none;background-color:var(--background--medium)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:hover{background-color:var(--background--medium)}.snk-filter-bar__filter-list-items-container--empty.sc-snk-filter-bar{width:100%;height:100px;display:flex;justify-content:center;align-self:center;align-items:center}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar{position:relative}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar::after{display:flex;position:absolute;content:\"\";width:8px;height:8px;top:7px;left:17px;background-color:var(--icon--alert--color, #008561);border-radius:50%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar{--modal-item-border-width:2px;display:flex;flex-direction:row;margin-left:var(--modal-item-border-width);border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #f0f3f7);border:none;width:100%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar:focus-visible{outline:var(--color--primary) solid var(--modal-item-border-width)}.snk-filter-bar__filter-modal-item__check.sc-snk-filter-bar{width:auto}.snk-filter-bar__filter-modal-item__label.sc-snk-filter-bar{font-weight:var(--text-weight--medium)}.snk-filter-bar__filter-modal-content.sc-snk-filter-bar{display:grid;grid-template-rows:auto auto 1fr auto;width:100%;height:100%}";
+const snkFilterBarCss = ".sc-snk-filter-bar-h{display:grid;grid-template-columns:minmax(100px, 100%) 1fr 1fr}.snk-filter__popover-container.sc-snk-filter-bar{display:flex;cursor:auto}.snk-filter__popover.sc-snk-filter-bar{display:flex;flex-direction:column;position:absolute;width:fit-content;height:fit-content;min-width:265px;z-index:var(--more-visible, 2);background-color:var(--background--xlight, #fff);border-radius:var(--border--radius-medium, 12px);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.snk-filter-item__editor-header.sc-snk-filter-bar{flex-grow:1;font-weight:var(--text-weight--medium, 400);color:var(--color--title-primary, #2B3A54)}.snk-filter__popover-rule.sc-snk-filter-bar{border-style:solid;border-color:var(--color--disable-secondary, #F2F5F8);border-radius:1px;border-width:1px;width:100%}.editor__ez-check.sc-snk-filter-bar{--ez-check__label--padding-left:0}.snk-filter-item__editor-header-button.sc-snk-filter-bar{cursor:pointer;background-color:transparent;border:none;padding:3px;outline-color:var(--color--primary)}.snk-filter-bar__divider.sc-snk-filter-bar{margin-bottom:var(--space--small)}.snk-filter-bar__filter-list-items-container.sc-snk-filter-bar{overflow-y:auto;max-height:360px;margin-top:var(--space--small, 6px)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar{cursor:pointer;border-radius:var(--border--radius-small, 6px);border:none;background-color:transparent}.snk-filter-bar__filter-list-item__label.sc-snk-filter-bar{color:var(--title--primary)}.snk-filter-bar__filter-list-item__label--secondary.sc-snk-filter-bar{color:var(--text--primary)}.snk-filter-bar__filter-list-item__icon.sc-snk-filter-bar{--ez-icon--color:var(--title--primary)}.snk-filter-bar__filter-list-item__icon--secondary.sc-snk-filter-bar{--ez-icon--color:var(--text--secondary)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:focus-visible{outline:none;background-color:var(--background--medium)}.snk-filter-bar__filter-list-item.sc-snk-filter-bar:hover{background-color:var(--background--medium)}.snk-filter-bar__filter-list-items-container--empty.sc-snk-filter-bar{width:100%;height:100px;display:flex;justify-content:center;align-self:center;align-items:center}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar{position:relative}.snk-filter-bar__filter-list-items-button--active.sc-snk-filter-bar::after{display:flex;position:absolute;content:\"\";width:8px;height:8px;top:7px;left:17px;background-color:var(--icon--alert--color, #008561);border-radius:50%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar{--modal-item-border-width:2px;display:flex;flex-direction:row;margin-left:var(--modal-item-border-width);border-radius:var(--border--radius-medium, 12px);background-color:var(--background--medium, #f0f3f7);border:none;width:100%}.snk-filter-bar__filter-modal-item.sc-snk-filter-bar:focus-visible{outline:var(--color--primary) solid var(--modal-item-border-width)}.snk-filter-bar__filter-modal-item__check.sc-snk-filter-bar{width:auto}.snk-filter-bar__filter-modal-item__label.sc-snk-filter-bar{font-weight:var(--text-weight--medium)}.snk-filter-bar__filter-modal-content.sc-snk-filter-bar{display:grid;grid-template-rows:auto auto 1fr auto;width:100%;height:100%}";
 
 const PERSONALIZED_FILTER = "PERSONALIZED_FILTER";
 const DEFAULT_FILTER = "DEFAULT_FILTER";
@@ -778,7 +963,7 @@ const SnkFilterModal = class {
   }
   buildItems(list) {
     return list.map(item => {
-      return (h("button", { onClick: () => this.updateValue(item.id), class: "ez-padding--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item ez-align--middle ez-margin-bottom--small" }, h("ez-check", { id: `checkbox_${item.id}`, tabIndex: "-1", class: "sc-snk-filter-bar snk-filter-bar__filter-modal-item__check", onEzChange: evt => this.updateValue(item.id, evt.detail), enabled: item.enabled, value: item.active, mode: "switch" }), h("div", { class: "ez-text ez-title--primary ez-text--medium ez-margin-left--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item__label" }, item.label)));
+      return (h("button", { onClick: () => this.updateValue(item.id), class: "ez-padding--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item ez-align--middle ez-margin-bottom--small" }, h("ez-check", { id: `checkbox_${item.id}`, tabIndex: "-1", class: "sc-snk-filter-bar snk-filter-bar__filter-modal-item__check", onEzChange: evt => this.updateValue(item.id, evt.detail), enabled: item.enabled, value: item.active, mode: CheckMode.SWITCH }), h("div", { class: "ez-text ez-title--primary ez-text--medium ez-margin-left--medium sc-snk-filter-bar snk-filter-bar__filter-modal-item__label" }, item.label)));
     });
   }
   itemKeyBoardSelect(event, item) {
@@ -813,6 +998,7 @@ const SnkTaskbar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.actionClick = createEvent(this, "actionClick", 7);
+    this.actionChange = createEvent(this, "actionChange", 7);
     this._titleKeyByElement = {
       [TaskbarElement.UPDATE]: "snkTaskbar.titleUpdate",
       [TaskbarElement.PREVIOUS]: "snkTaskbar.titlePrevious",
@@ -825,8 +1011,8 @@ const SnkTaskbar = class {
       [TaskbarElement.CANCEL]: "snkTaskbar.titleCancel",
       [TaskbarElement.SAVE]: "snkTaskbar.titleSave",
       [TaskbarElement.GRID_MODE]: "snkTaskbar.titleGridMode",
-      [TaskbarElement.CONFIG_GRID]: "snkTaskbar.titleConfigGrid",
-      [TaskbarElement.FORM_MODE]: "snkTaskbar.titleFormMode"
+      [TaskbarElement.FORM_MODE]: "snkTaskbar.titleFormMode",
+      [TaskbarElement.CONFIGURATOR]: "snkTaskbar.titleConfigurator"
     };
   }
   observeButtons() {
@@ -910,7 +1096,7 @@ const SnkTaskbar = class {
       className += "ez-padding-left--medium";
     }
     if (TaskbarElement[def.toString()]) {
-      return buildElem(def, className, elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), this.actionsList);
+      return buildElem(def, className, elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), this.actionsList, this.configName);
     }
     else {
       return buildCustomButton(def, className, elem => this.elementClick(elem), elem => this.isEnabled(elem));
@@ -958,4 +1144,4 @@ const SnkTaskbar = class {
 };
 SnkTaskbar.style = snkTaskbarCss;
 
-export { SnkFilterBar as snk_filter_bar, SnkFilterItem as snk_filter_item, SnkFilterList as snk_filter_list, SnkFilterModal as snk_filter_modal, SnkTaskbar as snk_taskbar };
+export { SnkConfigurator as snk_configurator, SnkFilterBar as snk_filter_bar, SnkFilterItem as snk_filter_item, SnkFilterList as snk_filter_list, SnkFilterModal as snk_filter_modal, SnkTaskbar as snk_taskbar };

package/dist/esm/snk-crud.entry.js

@@ -1,10 +1,12 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-81dda3cf.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-e4121713.js';
 import { ApplicationContext } from '@sankhyalabs/core';
+import { c as VIEW_MODE } from './constants-c6039d3d.js';
+import { T as TaskbarElement } from './taskbar-elements-e2ed0536.js';
 
 const snkCrudCss = ".sc-snk-crud-h{display:flex;flex-direction:column;height:100%;width:100%}";
 
-const GRID_MODE = 0;
-const FORM_MODE = 1;
+const GRID_MODE = VIEW_MODE.grid;
+const FORM_MODE = VIEW_MODE.form;
 const SnkCrud = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -17,15 +19,15 @@ const SnkCrud = class {
     this.executeAction(mode);
   }
   async gridToForm(keepFormMode = false) {
-    this._backToGrid = !keepFormMode && await this._viewStack.getSelectedIndex() === GRID_MODE;
-    this._viewStack.show(FORM_MODE);
+    this._backToGrid = !keepFormMode && await this._viewStack.getSelectedIndex() === GRID_MODE.index;
+    this._viewStack.show(FORM_MODE.index);
   }
   async executeAction(act) {
-    if (act === "GRID_MODE") {
-      this._viewStack.show(GRID_MODE);
+    if (act === TaskbarElement.GRID_MODE) {
+      this._viewStack.show(GRID_MODE.index);
     }
-    else if (act === "FORM_MODE" || act === "UPDATE") {
-      this.gridToForm(act !== "UPDATE");
+    else if (act === TaskbarElement.FORM_MODE || act === TaskbarElement.UPDATE) {
+      this.gridToForm(act !== TaskbarElement.UPDATE);
     }
   }
   insertionModeHandler() {
@@ -33,7 +35,7 @@ const SnkCrud = class {
   }
   cancelHandler() {
     if (this._backToGrid) {
-      this._viewStack.show(GRID_MODE);
+      this._viewStack.show(GRID_MODE.index);
     }
   }
   componentWillLoad() {
@@ -63,7 +65,7 @@ const SnkCrud = class {
     }
   }
   render() {
-    return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref }, 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 }, 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), 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, "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 }, 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" })))));
   }
   get _element() { return getElement(this); }
 };

package/dist/esm/snk-data-unit.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-81dda3cf.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-e4121713.js';
 import { Action, ApplicationContext } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
-import { O as OperationMap } from './SnkMessageBuilder-d440381c.js';
+import { O as OperationMap } from './SnkMessageBuilder-5792c260.js';
 
 const snkDataUnitCss = ".sc-snk-data-unit-h{display:flex;flex-direction:column;height:100%}";