@sankhyalabs/sankhyablocks 1.4.0-beta.6 → 1.4.0-beta.8

package/dist/components/snk-config-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkConfigModal extends Components.SnkConfigModal, HTMLElement {}
+export const SnkConfigModal: {
+  prototype: SnkConfigModal;
+  new (): SnkConfigModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-config-modal.js

@@ -0,0 +1,6 @@
+import { S as SnkConfigModal$1, d as defineCustomElement$1 } from './snk-config-modal2.js';
+
+const SnkConfigModal = SnkConfigModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkConfigModal, defineCustomElement };

package/dist/components/snk-config-modal2.js

@@ -0,0 +1,91 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { ApplicationContext } from '@sankhyalabs/core';
+import { V as VIEW_MODE } from './constants.js';
+
+class ConfigurableElementsStorage {
+  static setGrid(id, grid) {
+    this._gridById.set(id, grid);
+  }
+  static setForm(id, form) {
+    this._formById.set(id, form);
+  }
+  static getGrid(id) {
+    return this._gridById.get(id);
+  }
+  static getForm(id) {
+    return this._formById.get(id);
+  }
+}
+ConfigurableElementsStorage._gridById = new Map();
+ConfigurableElementsStorage._formById = new Map();
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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" }))));
+  }
+  static get style() { return snkConfigModalCss; }
+}, [2, "snk-config-modal", {
+    "configName": [1, "config-name"],
+    "gridMode": [4, "grid-mode"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-config-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-config-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkConfigModal);
+      }
+      break;
+  } });
+}
+
+export { ConfigurableElementsStorage as C, SnkConfigModal as S, defineCustomElement as d };

package/dist/components/snk-config-options.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkConfigOptions extends Components.SnkConfigOptions, HTMLElement {}
+export const SnkConfigOptions: {
+  prototype: SnkConfigOptions;
+  new (): SnkConfigOptions;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-config-options.js

@@ -0,0 +1,6 @@
+import { S as SnkConfigOptions$1, d as defineCustomElement$1 } from './snk-config-options2.js';
+
+const SnkConfigOptions = SnkConfigOptions$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkConfigOptions, defineCustomElement };

package/dist/components/snk-config-options2.js

@@ -0,0 +1,178 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { ApplicationContext } from '@sankhyalabs/core';
+import { formFieldBuilder } from '@sankhyalabs/ezui/dist/collection/utils';
+import { DataType, getConvertedValue } from '@sankhyalabs/core/dist/dataunit/metadata/DataType';
+import { a as VARS_BY_TYPE, D as DEFAULT_TYPE, C as CONFIG_EVENTS } from './constants.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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);
+    if (((_c = field === null || field === void 0 ? void 0 : field.properties) === null || _c === void 0 ? void 0 : _c.allowDefault) === "true" && VARS_BY_TYPE.UserInterface.hasOwnProperty(field === null || field === void 0 ? void 0 : field.userInterface)) {
+      return true;
+    }
+    return false;
+  }
+  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;
+  }
+  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 = dataType !== DataType.OBJECT && dataType !== DataType.DATE
+      && typeof fieldValue === "object" && "value" in fieldValue
+      ? fieldValue.value
+      : fieldValue;
+    return dataType === DataType.OBJECT ? JSON.stringify(value) : value;
+  }
+  onChange(evt) {
+    this.fieldConfig.defaultValue.value = this.getValidatedValue(evt === null || evt === void 0 ? void 0 : evt.detail);
+    this.configOptionsChanged.emit(this.fieldConfig);
+  }
+  onSearch(searchArgument) {
+    if (this._application != undefined && this.fieldConfig != undefined) {
+      return this._application.executeSearch(searchArgument, this.fieldConfig.name, this.dataUnit);
+    }
+  }
+  loadDataField() {
+    this._element.querySelectorAll("[data-field-name]")
+      .forEach((field) => {
+      var _a, _b, _c, _d;
+      field.enabled = ((_b = (_a = this._fieldProperties) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.allowDefault) === "true";
+      if (field.enabled) {
+        const value = this.fieldConfig.defaultValue.value;
+        if (value != undefined) {
+          const fieldName = field.dataset.fieldName;
+          const dataType = (_d = (_c = this.dataUnit) === null || _c === void 0 ? void 0 : _c.getField(fieldName)) === null || _d === void 0 ? void 0 : _d.dataType;
+          field.value = getConvertedValue(dataType, value);
+        }
+        field.addEventListener(CONFIG_EVENTS.fieldChanged, (evt) => {
+          return this.onChange(evt);
+        });
+        if (field.tagName === "EZ-SEARCH") {
+          field.optionLoader = (searchArgument) => {
+            return this.onSearch(searchArgument);
+          };
+        }
+      }
+    });
+  }
+  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;
+    }
+  }
+  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];
+  }
+  componentWillLoad() {
+    var _a;
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    this.loadDefaultValue();
+    this._fieldProperties = this.getFieldProperties((_a = this.fieldConfig) === null || _a === void 0 ? void 0 : _a.name);
+  }
+  componentDidRender() {
+    this.loadDataField();
+  }
+  render() {
+    var _a, _b, _c, _d;
+    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: ((_c = (_b = this._fieldProperties) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.allowDefault) === "true", 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.enabledValueDefault(), 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() })
+      :
+        ((_d = this._fieldProperties) === null || _d === void 0 ? void 0 : _d.userInterface) &&
+          formFieldBuilder({
+            descriptor: this._fieldProperties,
+            config: this.fieldConfig
+          }).$children$)), 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: "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: "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: "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 this; }
+  static get style() { return snkConfigOptionsCss; }
+}, [2, "snk-config-options", {
+    "fieldConfig": [16],
+    "idConfig": [513, "id-config"],
+    "dataUnit": [16],
+    "_defaultType": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-config-options"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-config-options":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SnkConfigOptions);
+      }
+      break;
+  } });
+}
+
+export { SnkConfigOptions as S, defineCustomElement as d };

package/dist/components/snk-configurator.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SnkConfigurator extends Components.SnkConfigurator, HTMLElement {}
+export const SnkConfigurator: {
+  prototype: SnkConfigurator;
+  new (): SnkConfigurator;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/snk-configurator.js

@@ -0,0 +1,6 @@
+import { S as SnkConfigurator$1, d as defineCustomElement$1 } from './snk-configurator2.js';
+
+const SnkConfigurator = SnkConfigurator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkConfigurator, defineCustomElement };

package/dist/components/snk-configurator2.js

@@ -0,0 +1,212 @@
+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';
+
+const GRID_MODE = VIEW_MODE.grid;
+const FORM_MODE = VIEW_MODE.form;
+const SnkConfigurator = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  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";
+    /**
+     * 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 this; }
+}, [2, "snk-configurator", {
+    "configName": [1, "config-name"],
+    "name": [1],
+    "enabled": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-configurator", "snk-config-modal"];
+  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;
+  } });
+}
+
+export { SnkConfigurator as S, defineCustomElement as d };