@sankhyalabs/sankhyablocks 2.1.2 → 2.1.4

package/dist/components/snk-form2.js

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { DateUtils, ObjectUtils, ApplicationContext } from '@sankhyalabs/core';
-import { C as ConfigurableElementsStorage, d as defineCustomElement$7 } from './snk-config-modal2.js';
 import { T as TaskbarProcessor } from './taskbar-processor.js';
-import { d as defineCustomElement$6 } from './snk-config-options2.js';
-import { d as defineCustomElement$5 } from './snk-configurator2.js';
+import { C as ConfigStorage } from './ConfigStorage.js';
+import { d as defineCustomElement$5 } from './snk-config-options2.js';
 import { d as defineCustomElement$4 } from './snk-field-config2.js';
 import { d as defineCustomElement$3 } from './snk-form-config2.js';
 import { d as defineCustomElement$2 } from './snk-tab-config2.js';
@@ -17,7 +16,6 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.exit = createEvent(this, "exit", 7);
     this.actionClick = createEvent(this, "actionClick", 7);
-    this.configChanged = createEvent(this, "configChanged", 7);
     this._renderTimer = 500;
     this._taskbarProcessor = new TaskbarProcessor({
       "snkForm.regular": ["PREVIOUS", "NEXT", "DIVIDER", "CLONE", "REMOVE", "MORE_OPTIONS", "DIVIDER", "GRID_MODE", "CONFIGURATOR", "INSERT"],
@@ -28,21 +26,30 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this._showFormConfig = false;
   }
   /**
-   * Método responsável em abrir ou fechar o modal de configurações do form.
+   * Método responsável em abrir o modal de configurações do form.
    */
-  async setShowFormConfig(value) {
-    this._showFormConfig = value;
+  async showConfig() {
+    this._showFormConfig = true;
   }
   /**
-   * Método responsável por setar as configurações do form.
+   * Método responsável em fechar o modal de configurações do form.
    */
-  async setConfig(config) {
-    this._editionFormConfig = {};
-    if (!this.loadConfig(config)) {
-      this.loadInsertionConfig();
-    }
+  async hideConfig() {
+    this._showFormConfig = false;
   }
-  loadConfig(config) {
+  loadConfig() {
+    ConfigStorage.get()
+      .loadFormConfig(this.configName)
+      .then((config) => {
+      if (!this.setConfig(config)) {
+        this.loadInsertionConfig();
+      }
+    })
+      .catch((error) => {
+      console.warn(error);
+    });
+  }
+  setConfig(config) {
     if ((config === null || config === void 0 ? void 0 : config.fields) == undefined) {
       return false;
     }
@@ -120,7 +127,13 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.selectedRecords) ? this._dataState.selectedRecords[0] : undefined;
   }
   changeConfig(config) {
-    this.configChanged.emit(config);
+    this._editionFormConfig = {};
+    if (!this.setConfig(config)) {
+      this.loadInsertionConfig();
+    }
+  }
+  closeConfig() {
+    this.hideConfig();
   }
   getDisabledButtons() {
     const disabled = [];
@@ -132,9 +145,6 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     return disabled;
   }
-  componentDidRender() {
-    ConfigurableElementsStorage.setForm(this.configName, this._element);
-  }
   componentWillLoad() {
     this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
     let parent = this._element.parentElement;
@@ -159,6 +169,7 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
       parent = parent.parentElement;
     }
+    this.loadConfig();
   }
   componentWillRender() {
     var _a;
@@ -178,7 +189,7 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return undefined;
     }
     return (h("section", { class: "snk-form" }, h("div", { class: "snk-form__header snk-form__header--fixed ez-row" }, h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, h("ez-button", { title: this.getMessage("snkForm.goBackTitle"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm() }), h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.getMessage("snkForm.title"))), h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, h("snk-taskbar", { key: "formTaskbar", configName: this.configName, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.actionsList, primaryButton: ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", dataUnit: this._dataUnit }))), h("section", null, h("div", { class: "ez-row" }, h("div", { class: "ez-col ez-col--sd-12" }, h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, dataUnit: this._dataUnit, config: this.getFormConfig(), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
-      h("snk-form-config", { dataUnit: this._dataUnit, formConfig: this.getFormConfig(), parentForm: this._element, onConfigChange: (evt) => { this.changeConfig(evt.detail); } }))))));
+      h("snk-form-config", { dataUnit: this._dataUnit, formConfig: this.getFormConfig(), configName: this.configName, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigClose: () => this.closeConfig() }))))));
   }
   get _element() { return this; }
   static get style() { return snkFormCss; }
@@ -192,31 +203,21 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "_editionFormConfig": [32],
     "_insertionFormConfig": [32],
     "_showFormConfig": [32],
-    "setShowFormConfig": [64],
-    "setConfig": [64]
+    "showConfig": [64],
+    "hideConfig": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["snk-form", "snk-config-modal", "snk-config-options", "snk-configurator", "snk-field-config", "snk-form-config", "snk-tab-config", "snk-taskbar"];
+  const components = ["snk-form", "snk-config-options", "snk-field-config", "snk-form-config", "snk-tab-config", "snk-taskbar"];
   components.forEach(tagName => { switch (tagName) {
     case "snk-form":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, SnkForm);
       }
       break;
-    case "snk-config-modal":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
     case "snk-config-options":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "snk-configurator":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }

package/dist/components/{snk-config-modal.d.ts → snk-grid-config.d.ts}

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

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

@@ -0,0 +1,6 @@
+import { E as EzGridConfig, d as defineCustomElement$1 } from './snk-grid-config2.js';
+
+const SnkGridConfig = EzGridConfig;
+const defineCustomElement = defineCustomElement$1;
+
+export { SnkGridConfig, defineCustomElement };

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

@@ -0,0 +1,497 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { StringUtils, ApplicationContext } from '@sankhyalabs/core';
+import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
+import { C as ConfigStorage } from './ConfigStorage.js';
+import { O as ORDER_VALUES } from './constants.js';
+import { d as defineCustomElement$1 } from './snk-select-box2.js';
+
+const snkGridConfigCss = ".sc-snk-grid-config-h{--snk-grid-config__footer--padding-top:var(--space--medium, 12px);--snk-grid-config__main--padding-right:var(--space--medium, 12px);--snk-grid-config__tabselector-container--padding:var(--space--medium, 12px);--snk-grid-config__button-close--padding-left:var(--space--medium, 12px);--snk-grid-config__title--color:var(--title--primary, #2B3A54);--snk-grid-config__title--font-family:var(--font-pattern, \"Roboto\");--snk-grid-config__title--font-size:var(--title--large, 20px);--snk-grid-config__title--font-weight:var(--text-weight--extra-large, 700);--snk-grid-config__subtitle--font-family:var(--font-pattern, \"Roboto\");--snk-grid-config__subtitle--font-size:var(--text--medium, 14px);--snk-grid-config__scrollbar--width:var(--space--medium, 12px);--snk-grid-config__scrollbar--background-color-primary:var(--scrollbar--primary, #2B3A54);--snk-grid-config__scrollbar--background-color-secondary:var(--scrollbar--secondary, #E5EAF0);--snk-grid-config__scrollbar--border-radius:var(--border--radius-small, 6px);--snk-grid-config__group--font-family:var(--font-pattern, \"Roboto\");--snk-grid-config__group--font-size:var(--text--medium, 14px);--snk-grid-config__group--font-weight:var(--text-weight--large, 600);--snk-grid-config__group--padding-bottom:var(--space-small, 6px);display:grid;grid-template-rows:auto 1fr auto;max-height:100%;width:100%}@media screen and (min-width: 480px){.sc-snk-grid-config-h{width:359px;max-width:359px}}.padding-right--medium.sc-snk-grid-config{padding-right:var(--space--medium)}ez-list.sc-snk-grid-config{height:100%}.height-calc.sc-snk-grid-config{max-height:calc(100% - 24px)}.grid-config__footer.sc-snk-grid-config{display:flex;justify-content:flex-end;width:100%;padding-top:var(--snk-grid-config__footer--padding-top)}.hidden.sc-snk-grid-config{display:none}.tabselector-container.sc-snk-grid-config{padding:var(--snk-grid-config__tabselector-container--padding) 0}.button-close.sc-snk-grid-config{padding-left:var(--snk-grid-config__button-close--padding-left)}.title-container.sc-snk-grid-config{display:flex;justify-content:space-between;align-items:center;width:100%}.title.sc-snk-grid-config{display:flex;margin:0;line-height:normal;letter-spacing:0em;text-align:left;color:var(--snk-grid-config__title--color);font-size:var(--snk-grid-config__title--font-size);font-family:var(--snk-grid-config__title--font-family);font-weight:var(--snk-grid-config__title--font-weight)}.subtitle.sc-snk-grid-config{color:var(--text--primary);font-size:var(--snk-grid-config__subtitle--font-size);font-family:var(--snk-grid-config__subtitle--font-family)}.grid-config__main.sc-snk-grid-config{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--snk-grid-config__scrollbar--background-color-primary) var(--snk-grid-config__scrollbar--background-color-secondary);padding-right:var(--snk-grid-config__main--padding-right)}.grid-config__main.sc-snk-grid-config::-webkit-scrollbar-track{background-color:var(--snk-grid-config__scrollbar--background-color-secondary)}.grid-config__main.sc-snk-grid-config::-webkit-scrollbar-thumb{background-color:var(--snk-grid-config__scrollbar--background-color-primary);border-radius:var(--snk-grid-config__scrollbar--border-radius)}.grid-config__main.sc-snk-grid-config::-webkit-scrollbar{width:var(--snk-grid-config__scrollbar--width);max-width:var(--snk-grid-config__scrollbar--width);min-width:var(--snk-grid-config__scrollbar--width);background-color:var(--snk-grid-config__scrollbar--background-color-secondary)}.group-name.sc-snk-grid-config{font-family:var(--snk-grid-config__group--font-family);font-size:var(--snk-grid-config__group--font-size);font-weight:var(--snk-grid-config__group--font-weight);padding-bottom:var(--snk-grid-config__group--padding-bottom)}";
+
+const EzGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.configChange = createEvent(this, "configChange", 7);
+    this.configCancel = createEvent(this, "configCancel", 7);
+    this._orderListItems = [];
+    this._orderPriorityList = [];
+    this._columListItems = [];
+    this._selectedIndex = -1;
+    this._dataChanged = false;
+    this._componenteInternalKey = Date.now();
+    /**
+     * Aba selecionada das configurações da grade.
+     */
+    this.selectedIndex = 0;
+  }
+  /* Creation Methods */
+  async saveConfig(config) {
+    var _a;
+    if (config == undefined || ((_a = this._application) === null || _a === void 0 ? void 0 : _a.configName) == undefined) {
+      return;
+    }
+    ConfigStorage.saveGridConfig(config, this._application.configName)
+      .then((response) => {
+      if ((response === null || response === void 0 ? void 0 : response.resource) != undefined) {
+        ApplicationUtils.info(this.getMessage("snkGridConfig.info.successfullyConfigSaved"), { iconName: "check" });
+        this.configChange.emit(config);
+        this._orderList.clearHistory();
+      }
+    });
+  }
+  /**
+   * 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-grid.msg.ts"
+   */
+  getMessage(key, params) {
+    return this._application.messagesBuilder.getMessage(key, params);
+  }
+  createOrderList() {
+    let newList = [];
+    this.columns.filter(col => { var _a; return StringUtils.getBooleanValue((_a = col === null || col === void 0 ? void 0 : col.props) === null || _a === void 0 ? void 0 : _a.get("sortable"), true); }).forEach((column) => {
+      var _a;
+      let configItem = (_a = this.config) === null || _a === void 0 ? void 0 : _a.columns.find((item) => item.name === column.name);
+      let item = { name: column.name, label: column.label };
+      if (configItem) {
+        item['orderIndex'] = configItem.orderIndex;
+        item['ascending'] = configItem.ascending;
+      }
+      if (!column.hidden) {
+        newList.push(item);
+      }
+    });
+    newList.sort((a, b) => {
+      //OS dois tem order index 0 e pelo menos um deles tem orientação de ordenação.
+      if (a.orderIndex == 0 && b.orderIndex == 0 && (a.ascending != undefined || b.ascending != undefined)) {
+        if (a.ascending != undefined)
+          return -1;
+        if (b.ascending != undefined)
+          return 1;
+        return 0;
+        //Pelo menos um deles tem order index diferente de 0 e os dois tem orientação de ordenação.
+      }
+      else if (a.ascending != undefined && b.ascending != undefined) {
+        return (a.orderIndex - b.orderIndex);
+        //Pelo menos um deles tem order index diferente de 0 e pelo menos um deles tem orientação de ordenação.
+      }
+      else if (a.ascending != undefined || b.ascending != undefined) {
+        if (a.ascending != undefined)
+          return -1;
+        if (b.ascending != undefined)
+          return 1;
+        return 0;
+      }
+      return (a.orderIndex - b.orderIndex);
+    });
+    this._orderListItems = newList;
+  }
+  createColumnList() {
+    let visibleGroup = {
+      group: this.getMessage("snkGridConfig.group.visible"),
+      items: [],
+    };
+    let hiddenGroup = {
+      group: this.getMessage("snkGridConfig.group.hidden"),
+      items: [],
+      sort: ORDER_VALUES.asc.value
+    };
+    this.columns.forEach((column) => {
+      let item = { label: column.label };
+      if (column.hidden) {
+        hiddenGroup.items.push(item);
+      }
+      else {
+        visibleGroup.items.push(item);
+      }
+    });
+    this._columListItems = [visibleGroup, hiddenGroup];
+  }
+  buildColumnListSlot(item, group) {
+    return (h("div", null, h("ez-check", { mode: 'switch', id: 'switch' + ((item === null || item === void 0 ? void 0 : item.label) || '') + ((group === null || group === void 0 ? void 0 : group.group) || ''), value: group.group === this.getMessage("snkGridConfig.group.visible"), onEzChange: (evt) => { this.switchColumnGroup(evt, item); } })));
+  }
+  buildOrderListSlot(item) {
+    let selectedOption = ORDER_VALUES.none.value;
+    if ((item === null || item === void 0 ? void 0 : item.ascending) != undefined) {
+      selectedOption = item.ascending == true ? ORDER_VALUES.asc.value : ORDER_VALUES.desc.value;
+    }
+    return (h("div", null, h("snk-select-box", { selectedOption: selectedOption, key: 'snk-select-box-' + this._componenteInternalKey + '-' + item, onEzChange: (evt) => { evt.stopPropagation(); this.updateOrder(evt.detail, item.label); } })));
+  }
+  updateOrder(sortOrder, updatedItemLabel) {
+    var _a;
+    this._dataChanged = true;
+    let newList = [...this.columns];
+    let newItem = newList.find((item) => item.label === updatedItemLabel);
+    if (newItem) {
+      newItem.sort = sortOrder.value === ORDER_VALUES.none.value ? undefined : sortOrder.value;
+    }
+    let orderArray;
+    if (((_a = this._orderPriorityList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this._orderPriorityList.find((item) => item.label === newItem.label).sort = sortOrder;
+      this._orderPriorityList.filter((item) => item.sort).map((item, index) => {
+        if (item.label === newItem.label) {
+          newItem.sortIndex = index;
+        }
+      });
+    }
+    else {
+      orderArray = newList.filter((item) => item.sort && item.hidden !== true)
+        .map((item, index) => {
+        return { label: item.label, orderIndex: index };
+      });
+      orderArray.forEach((element) => {
+        newList.find((item) => item.label === element.label).sortIndex = element.orderIndex;
+      });
+    }
+    this.columns = newList;
+  }
+  /* Actions Methods */
+  switchColumnGroup(evt, switchedItem) {
+    evt.stopPropagation();
+    let newList = [...this._columListItems];
+    this._dataChanged = true;
+    if (evt.detail === true) {
+      let hiddenGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.hidden"));
+      let index = hiddenGroup.items.findIndex((item) => item.label === switchedItem.label);
+      if (index >= 0) {
+        hiddenGroup.items.splice(index, 1);
+      }
+      let visibleGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.visible"));
+      visibleGroup.items.push(switchedItem);
+      this._columListItems = newList;
+      this.createOrderList();
+    }
+    else if (evt.detail === false) {
+      let visibleGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.visible"));
+      let index = visibleGroup.items.findIndex((item) => item.label === switchedItem.label);
+      if (index >= 0) {
+        visibleGroup.items.splice(index, 1);
+      }
+      let hiddenGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.hidden"));
+      hiddenGroup.items.push(switchedItem);
+      this._columListItems = newList;
+      this.createOrderList();
+    }
+  }
+  finish() {
+    if (!this._dataChanged) {
+      this.closeConfig();
+      return;
+    }
+    let newColumnList = [];
+    this._columListItems.forEach((group) => {
+      group.items.forEach((item) => {
+        const baseColumn = this.columns.find((column) => column.label === item.label);
+        let newColumnItem = Object.assign({}, baseColumn);
+        if (group.group === this.getMessage("snkGridConfig.group.hidden")) {
+          newColumnItem.hidden = true;
+        }
+        else {
+          newColumnItem.hidden = false;
+        }
+        newColumnList.push(newColumnItem);
+      });
+    });
+    this.columns = newColumnList;
+    this._dataChanged = false;
+    this.closeConfig();
+    this.save();
+  }
+  save() {
+    var _a;
+    let _newConfig;
+    if (this.config) {
+      _newConfig = this.config;
+    }
+    else {
+      _newConfig = this.createConfigFromState(this.columns);
+    }
+    let _newColumnConfigList = [];
+    let orderArray;
+    if (((_a = this._orderPriorityList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      orderArray = this.columns.filter((item) => item.sort && item.hidden !== true)
+        .map((item) => {
+        return { label: item.label, orderIndex: 0 };
+      });
+      let indexCount = 0;
+      let newOrderArray = [];
+      this._orderPriorityList.forEach((orderPriorityItem) => {
+        let item = orderArray.find((column) => column.label === orderPriorityItem.label);
+        if (item) {
+          item.orderIndex = indexCount;
+          newOrderArray.push(item);
+          indexCount++;
+        }
+      });
+      if (newOrderArray.length > 0) {
+        orderArray = newOrderArray;
+      }
+    }
+    for (let i = 0; i < this.columns.length; i++) {
+      const column = this.columns[i];
+      let _newColumnConfig = _newConfig.columns.find((_newColumnConfig) => column.name === _newColumnConfig.name);
+      if (column.hidden === true && _newColumnConfig) {
+        continue;
+      }
+      if (_newColumnConfig) {
+        _newColumnConfig.width = column.width;
+      }
+      else if (column.hidden === false) {
+        _newColumnConfig = { name: column.name, width: column.width, orderIndex: 0 };
+      }
+      if (_newColumnConfig) {
+        if (column.sort) {
+          _newColumnConfig.ascending = column.sort.toUpperCase() === ORDER_VALUES.asc.value ? true : false;
+          if (orderArray) {
+            adjustPriorityOrder(column, _newColumnConfig);
+          }
+          else {
+            _newColumnConfig.orderIndex = column.sortIndex;
+          }
+        }
+        else {
+          delete _newColumnConfig.ascending;
+          _newColumnConfig.orderIndex = 0;
+        }
+        _newColumnConfigList.push(_newColumnConfig);
+      }
+    }
+    _newConfig.columns = _newColumnConfigList;
+    this.saveConfig(_newConfig);
+    function adjustPriorityOrder(column, _newColumnConfig) {
+      if (orderArray) {
+        let orderItem = orderArray.find((item) => item.label === column.label);
+        if (orderItem) {
+          _newColumnConfig.orderIndex = orderItem.orderIndex;
+        }
+      }
+    }
+  }
+  createConfigFromState(state) {
+    let newConfig = { columns: [] };
+    state.forEach((columnState) => {
+      if (!columnState.hidden) {
+        let newConfigColumn = { name: columnState.name };
+        if (columnState.width) {
+          newConfigColumn['width'] = columnState.width;
+        }
+        if (columnState.sort) {
+          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === ORDER_VALUES.asc.value);
+          newConfigColumn['orderIndex'] = columnState.sortIndex;
+        }
+        else {
+          newConfigColumn['orderIndex'] = 0;
+        }
+        if (newConfigColumn) {
+          newConfig.columns.push(newConfigColumn);
+        }
+      }
+    });
+    return newConfig;
+  }
+  async locateColumn(evt, searchingText) {
+    var _a;
+    const hitEnter = evt.key === "Enter";
+    if (!searchingText) {
+      searchingText = (_a = evt.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    let newSelected = -1;
+    if (this.selectedIndex === 1) {
+      if (searchingText) {
+        const matchedIndexes = [];
+        let orderListDatasource;
+        await this._orderList.getList().then((listGroup) => {
+          orderListDatasource = listGroup;
+          orderListDatasource.forEach((column, index) => {
+            if (this.compareWords(column, searchingText)) {
+              matchedIndexes.push(index);
+            }
+          });
+        });
+        if (matchedIndexes.length > 0) {
+          if (hitEnter) {
+            for (let j = 0; j < matchedIndexes.length; j++) {
+              if (matchedIndexes[j] > this._selectedIndex) {
+                newSelected = matchedIndexes[j];
+                break;
+              }
+            }
+          }
+          if (newSelected === -1) {
+            newSelected = matchedIndexes[0];
+          }
+        }
+        this._selectedIndex = newSelected;
+        let selectedColumn;
+        selectedColumn = orderListDatasource[newSelected];
+        if (selectedColumn) {
+          this._orderList.setSelection({ label: selectedColumn.label }, true);
+        }
+        else {
+          this._orderList.setSelection(undefined);
+        }
+      }
+      else {
+        this._orderList.setSelection(undefined);
+      }
+    }
+    else {
+      if (searchingText) {
+        const matchedIndexes = [];
+        this.columns.forEach((column, index) => {
+          if (this.compareWords(column, searchingText)) {
+            matchedIndexes.push(index);
+          }
+        });
+        if (matchedIndexes.length > 0) {
+          if (hitEnter) {
+            for (let j = 0; j < matchedIndexes.length; j++) {
+              if (matchedIndexes[j] > this._selectedIndex) {
+                newSelected = matchedIndexes[j];
+                break;
+              }
+            }
+          }
+          if (newSelected === -1) {
+            newSelected = matchedIndexes[0];
+          }
+        }
+        this._selectedIndex = newSelected;
+        let selectedColumn = this.columns[newSelected];
+        if (selectedColumn) {
+          this._columnList.setSelection({ label: selectedColumn.label }, true);
+        }
+        else {
+          this._columnList.setSelection(undefined);
+        }
+      }
+      else {
+        this._columnList.setSelection(undefined);
+      }
+    }
+  }
+  compareWords(column, searchingText) {
+    if (StringUtils.replaceAccentuatedChars(column.label).indexOf(StringUtils.replaceAccentuatedChars(searchingText)) > -1) {
+      return true;
+    }
+    return false;
+  }
+  getColumnNames() {
+    const listNames = [];
+    listNames.push(this.getMessage("snkGridConfig.tab.columns"));
+    listNames.push(this.getMessage("snkGridConfig.tab.lineOrdering"));
+    return listNames.join(',');
+  }
+  closeConfig() {
+    this._orderList.scrollToTop();
+    this._columnList.scrollToTop();
+    this._searchElement.value = "";
+    if (this._dataChanged) {
+      let options = {
+        canClose: false,
+        labelCancel: this.getMessage("snkGridConfig.confirm.cancel"),
+        labelConfirm: this.getMessage("snkGridConfig.confirm.save"),
+        btnConfirmDanger: false
+      };
+      ApplicationUtils.confirm(this.getMessage("snkGridConfig.confirm.alert"), this.getMessage("snkGridConfig.confirm.msgCancel"), null, DialogType.WARN, options)
+        .then((response) => {
+        if (!response) {
+          this._dataChanged = false;
+          this.configCancel.emit();
+          this._orderList.clearHistory();
+          this._componenteInternalKey = Date.now();
+        }
+        else {
+          this.finish();
+        }
+      });
+    }
+    else {
+      this.configCancel.emit();
+      this._orderList.clearHistory();
+    }
+  }
+  /* Handlers */
+  handleTabChange(tab) {
+    if ((tab === null || tab === void 0 ? void 0 : tab.index) != undefined) {
+      if (this.selectedIndex !== tab.index) {
+        if (tab.index === 0) {
+          this._orderList.scrollToTop();
+        }
+        else if (tab.index === 1) {
+          this._columnList.scrollToTop();
+        }
+        this._searchElement.value = "";
+      }
+      if (tab.index === 1) {
+        this.createOrderList();
+      }
+      this.selectedIndex = tab.index;
+    }
+  }
+  handleColumnListChange(evt) {
+    var _a;
+    if (evt.detail) {
+      let visibleItems = (_a = evt.detail.find((group) => group.group === this.getMessage("snkGridConfig.group.visible"))) === null || _a === void 0 ? void 0 : _a.items;
+      if (visibleItems) {
+        this._dataChanged = true;
+        this._orderListItems = visibleItems;
+      }
+    }
+  }
+  handleOrderListChange(evt) {
+    if (evt.detail) {
+      let orderPriorityList = evt.detail;
+      if (orderPriorityList) {
+        this._dataChanged = true;
+        this._orderPriorityList = orderPriorityList;
+      }
+    }
+  }
+  componentWillRender() {
+    var _a;
+    if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.createColumnList();
+    }
+  }
+  componentDidRender() {
+    var _a;
+    if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.locateColumn(new KeyboardEvent("arrow-right", { key: "ArrowRight" }), this._searchElement.value);
+    }
+  }
+  componentWillLoad() {
+    this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, this.getMessage("snkGridConfig.gridConfiguration")), h("label", { class: "subtitle" }, this.getMessage("snkGridConfig.columnVisibilityOrder"))), h("div", { class: "button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "tabselector-container" }, h("ez-tabselector", { selectedIndex: this.selectedIndex, onEzChange: (evt) => { this.handleTabChange(evt.detail); }, tabs: this.getColumnNames() })), h("div", null, h("ez-text-input", { ref: (el) => this._searchElement = el, label: this.getMessage("snkGridConfig.findColumn"), onKeyUp: (evt) => this.locateColumn(evt) }, h("ez-icon", { slot: "leftIcon", size: "medium", iconName: "search" })))), h("div", { class: "grid-config__main" }, h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedIndex === 0 ? "" : "hidden", dataSource: this._columListItems, onEzChange: (evt) => this.handleColumnListChange(evt), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }), h("div", { class: this.selectedIndex === 1 ? "group-name" : "hidden" }, this.getMessage("snkGridConfig.info.sortingSequence")), h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedIndex === 1 ? "height-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: (evt) => this.handleOrderListChange(evt), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: this.getMessage("snkGridConfig.cancel"), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage("snkGridConfig.complete"), class: "ez-button--primary", onClick: () => this.finish() }))));
+  }
+  static get assetsDirs() { return ["../assets"]; }
+  static get style() { return snkGridConfigCss; }
+}, [2, "snk-grid-config", {
+    "selectedIndex": [1026, "selected-index"],
+    "columns": [1040],
+    "config": [1040],
+    "saveConfig": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["snk-grid-config", "snk-select-box"];
+  components.forEach(tagName => { switch (tagName) {
+    case "snk-grid-config":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, EzGridConfig);
+      }
+      break;
+    case "snk-select-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { EzGridConfig as E, defineCustomElement as d };