@sankhyalabs/sankhyablocks 2.1.3 → 2.1.5

package/dist/cjs/{snk-configurator_6.cjs.entry.js → snk-filter-bar_7.cjs.entry.js}

@@ -4,195 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-20e8b68a.js');
 const core = require('@sankhyalabs/core');
-const utils = require('@sankhyalabs/ezui/dist/collection/utils');
-const constants = require('./constants-9056ca9e.js');
-const configurableElementsStorage = require('./configurableElementsStorage-93459c72.js');
 const filterItemType_enum = require('./filter-item-type.enum-3daf58d3.js');
 const ezModalContainer = require('@sankhyalabs/ezui/dist/collection/components/ez-modal-container');
 const DataType = require('@sankhyalabs/core/dist/dataunit/metadata/DataType');
-const taskbarElements = require('./taskbar-elements-d762e436.js');
-
-const GRID_MODE = constants.VIEW_MODE.grid;
-const FORM_MODE = constants.VIEW_MODE.form;
-const SnkConfigurator = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.changeViewMode = index.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(constants.CONFIG_EVENTS.closeModal, () => {
-      this.controlConfigModal(false);
-    });
-    const modalContent = document.createElement("snk-config-modal");
-    modalContent.addEventListener(constants.CONFIG_EVENTS.cancelConfig, () => {
-      this.controlConfigModal(false);
-    });
-    modalContent.addEventListener(constants.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.ConfigurableElementsStorage.getGrid(this.configName);
-    if (this._grid != undefined && this._grid.dataset.eventConfigChanged == undefined) {
-      this._grid.dataset.eventConfigChanged = "true";
-      this._grid.addEventListener(constants.CONFIG_EVENTS.configChanged, (evt) => {
-        this.saveConfig(evt);
-      });
-    }
-  }
-  findForm() {
-    if (this._form != undefined) {
-      return;
-    }
-    this._form = configurableElementsStorage.ConfigurableElementsStorage.getForm(this.configName);
-    if (this._form != undefined && this._form.dataset.eventConfigChanged == undefined) {
-      this._form.dataset.eventConfigChanged = "true";
-      this._form.addEventListener(constants.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 = core.ObjectUtils.stringToObject(strConfig);
-      this._grid.setConfig(config).then(() => {
-        utils.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) {
-            utils.ApplicationUtils.info(this.getMessage("snkConfigurator.msgSaveSuccessfully"), { iconName: "check" });
-          }
-        });
-      });
-    }
-  }
-  loadConfig() {
-    this._application = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
-    this.loadGridConfig();
-    this.loadFormConfig();
-  }
-  componentDidLoad() {
-    this.findConfigModal();
-    this.findGrid();
-    this.findForm();
-    this.loadConfig();
-  }
-  render() {
-    return (index.h("ez-button", { mode: "icon", iconName: "settings-inverted", size: "small", enabled: this.enabled, onClick: () => this.controlConfigModal(true) }));
-  }
-  get _element() { return index.getElement(this); }
-};
+const utils = require('@sankhyalabs/ezui/dist/collection/utils');
+const ConfigStorage = require('./ConfigStorage-c112de1d.js');
+const constants = require('./constants-a47a5190.js');
+const AuthorizationConfig = require('./AuthorizationConfig-79ffae4b.js');
+const taskbarElements = require('./taskbar-elements-997af1c9.js');
+require('./_commonjsHelpers-537d719a.js');
 
 const buildFilter = (item) => {
   switch (item.type) {
@@ -996,6 +816,488 @@ const SnkFilterModal = class {
   }
 };
 
+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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.configChange = index.createEvent(this, "configChange", 7);
+    this.configCancel = index.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.ConfigStorage.saveGridConfig(config, this._application.configName)
+      .then((response) => {
+      if ((response === null || response === void 0 ? void 0 : response.resource) != undefined) {
+        utils.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 core.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: constants.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 (index.h("div", null, index.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 = constants.ORDER_VALUES.none.value;
+    if ((item === null || item === void 0 ? void 0 : item.ascending) != undefined) {
+      selectedOption = item.ascending == true ? constants.ORDER_VALUES.asc.value : constants.ORDER_VALUES.desc.value;
+    }
+    return (index.h("div", null, index.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 === constants.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() === constants.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() === constants.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 (core.StringUtils.replaceAccentuatedChars(column.label).indexOf(core.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
+      };
+      utils.ApplicationUtils.confirm(this.getMessage("snkGridConfig.confirm.alert"), this.getMessage("snkGridConfig.confirm.msgCancel"), null, utils.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 = core.ApplicationContext.getContextValue("__SNK__APPLICATION__");
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "grid-config__header" }, index.h("div", { class: "title-container" }, index.h("div", { class: "" }, index.h("label", { class: "title" }, this.getMessage("snkGridConfig.gridConfiguration")), index.h("label", { class: "subtitle" }, this.getMessage("snkGridConfig.columnVisibilityOrder"))), index.h("div", { class: "button-close" }, index.h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), index.h("div", { class: "tabselector-container" }, index.h("ez-tabselector", { selectedIndex: this.selectedIndex, onEzChange: (evt) => { this.handleTabChange(evt.detail); }, tabs: this.getColumnNames() })), index.h("div", null, index.h("ez-text-input", { ref: (el) => this._searchElement = el, label: this.getMessage("snkGridConfig.findColumn"), onKeyUp: (evt) => this.locateColumn(evt) }, index.h("ez-icon", { slot: "leftIcon", size: "medium", iconName: "search" })))), index.h("div", { class: "grid-config__main" }, index.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 }), index.h("div", { class: this.selectedIndex === 1 ? "group-name" : "hidden" }, this.getMessage("snkGridConfig.info.sortingSequence")), index.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) })), index.h("div", { class: "grid-config__footer" }, index.h("ez-button", { class: "padding-right--medium", label: this.getMessage("snkGridConfig.cancel"), onClick: () => this.closeConfig() }), index.h("ez-button", { label: this.getMessage("snkGridConfig.complete"), class: "ez-button--primary", onClick: () => this.finish() }))));
+  }
+  static get assetsDirs() { return ["../assets"]; }
+};
+EzGridConfig.style = snkGridConfigCss;
+
+const snkSelectBoxCss = "ez-combo-box{width:100px}.grid-config-combo{--ez-text-input--height:28px;--ez-text-input__input--background-color:#fff;--ez-text-input__input--border-color:#dce0e8}";
+
+const SelectBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ezChange = index.createEvent(this, "ezChange", 7);
+    this.selectedOption = constants.ORDER_VALUES.none;
+  }
+  render() {
+    return (index.h("ez-combo-box", { class: "grid-config-combo ez-input--inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true }, Object.keys(constants.ORDER_VALUES).map((key) => {
+      return index.h("option", { value: constants.ORDER_VALUES[key].value }, constants.ORDER_VALUES[key].label);
+    })));
+  }
+  static get assetsDirs() { return ["../assets"]; }
+};
+SelectBox.style = snkSelectBoxCss;
+
 const snkTaskbarCss = ".sc-snk-taskbar-h{display:flex}";
 
 const SnkTaskbar = class {
@@ -1036,6 +1338,13 @@ const SnkTaskbar = class {
     return elements;
   }
   isAllowed(buttonName) {
+    if (buttonName === taskbarElements.AuthorizationElements.CONFIGURATOR) {
+      return this._permissions
+        ? this._permissions.isSup
+          || this._permissions[AuthorizationConfig.AuthorizationConfig.CONFIG_GRID]
+          || this._permissions[AuthorizationConfig.AuthorizationConfig.CONFIG]
+        : false;
+    }
     if (taskbarElements.AuthorizationElements[buttonName]) {
       return this._permissions ? this._permissions.isSup || this._permissions[buttonName] : false;
     }
@@ -1100,7 +1409,7 @@ const SnkTaskbar = class {
       className += "ez-padding-left--medium";
     }
     if (taskbarElements.TaskbarElement[def.toString()]) {
-      return taskbarElements.buildElem(def, className, elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), this.actionsList, this.configName);
+      return taskbarElements.buildElem(def, className, elem => this.getTitle(elem), elem => this.elementClick(elem), elem => this.isEnabled(elem), this.actionsList);
     }
     else {
       return taskbarElements.buildCustomButton(def, className, elem => this.elementClick(elem), elem => this.isEnabled(elem));
@@ -1168,9 +1477,10 @@ const SnkTaskbar = class {
 };
 SnkTaskbar.style = snkTaskbarCss;
 
-exports.snk_configurator = SnkConfigurator;
 exports.snk_filter_bar = SnkFilterBar;
 exports.snk_filter_item = SnkFilterItem;
 exports.snk_filter_list = SnkFilterList;
 exports.snk_filter_modal = SnkFilterModal;
+exports.snk_grid_config = EzGridConfig;
+exports.snk_select_box = SelectBox;
 exports.snk_taskbar = SnkTaskbar;