@sankhyalabs/sankhyablocks 8.15.0-dev.3 → 8.15.0-dev.31

package/dist/esm/{snk-actions-button_2.entry.js → snk-actions-button_4.entry.js}

@@ -1,17 +1,19 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-a7d3d3f1.js';
 import { ApplicationContext, StringUtils, ErrorException, WarningException, ObjectUtils, DateUtils, ArrayUtils, ElementIDUtils } from '@sankhyalabs/core';
-import { D as DataFetcher } from './DataFetcher-aa159c5a.js';
+import { D as DataFetcher } from './DataFetcher-a650ae58.js';
 import { P as ParamType } from './ParamType-d5152b06.js';
-import './pesquisa-fetcher-dd3ca0a5.js';
-import './index-1564817d.js';
-import './ISave-4412b20c.js';
+import './pesquisa-fetcher-f05a12ca.js';
+import './index-0ece87a6.js';
+import './ISave-d8c8bc59.js';
 import '@sankhyalabs/ezui/dist/collection/utils/constants';
 import '@sankhyalabs/core/dist/dataunit/metadata/UnitMetadata';
-import './dataunit-fetcher-e218c6d2.js';
-import './PreloadManager-c1c2f2b4.js';
 import './filter-item-type.enum-d45e026f.js';
-import './form-config-fetcher-36219cd3.js';
+import './form-config-fetcher-f121f880.js';
 import { R as ResourceIDUtils } from './ResourceIDUtils-a114189a.js';
+import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
+import { CheckMode } from '@sankhyalabs/ezui/dist/collection/components/ez-check/CheckMode';
+import { C as ConfigStorage } from './ConfigStorage-39ed8aeb.js';
+import { O as ORDER_VALUES } from './constants-8457af36.js';
 import './PrintUtils-3e4ff0f5.js';
 import '@sankhyalabs/ezui/dist/collection/components/ez-grid/utils';
 
@@ -713,6 +715,516 @@ const SnkActionsButton = class {
 };
 SnkActionsButton.style = snkActionsButtonCss;
 
+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__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);--snk-grid-config__scrollbar--color-default:var(--scrollbar--default, #626e82);--snk-grid-config__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--snk-grid-config__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--snk-grid-config__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--snk-grid-config__scrollbar--border-radius:var(--border--radius-small, 6px);--snk-grid-config__scrollbar--width:var(--space--medium, 12px);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--color-clicked) var(--snk-grid-config__scrollbar--color-background);padding-right:var(--snk-grid-config__main--padding-right)}.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--color-background)}.grid-config__main.sc-snk-grid-config::-webkit-scrollbar-track{background-color:var(--snk-grid-config__scrollbar--color-background);border-radius:var(--snk-grid-config__scrollbar--border-radius)}.grid-config__main.sc-snk-grid-config::-webkit-scrollbar-thumb{background-color:var(--snk-grid-config__scrollbar--color-default);border-radius:var(--snk-grid-config__scrollbar--border-radius)}.grid-config__main.sc-snk-grid-config::-webkit-scrollbar-thumb:vertical:hover,.grid-config__main.sc-snk-grid-config::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--snk-grid-config__scrollbar--color-hover)}.grid-config__main.sc-snk-grid-config::-webkit-scrollbar-thumb:vertical:active,.grid-config__main.sc-snk-grid-config::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--snk-grid-config__scrollbar--color-clicked)}.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 SnkGridConfig = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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();
+    this.selectedIndex = 0;
+    this.columns = undefined;
+    this.config = undefined;
+    this.configName = undefined;
+    this.resourceID = undefined;
+  }
+  /* Creation Methods */
+  /**
+   * 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) {
+    const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
+    return application.messagesBuilder.getMessage(key, params);
+  }
+  getSortableColumns() {
+    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);
+      }
+    });
+    return newList;
+  }
+  createOrderList() {
+    let newSortableList = this.getSortableColumns();
+    newSortableList.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 = newSortableList;
+  }
+  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];
+  }
+  createColumnListSlotDataElementId(item) {
+    return `configItem_${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(item.label))}`;
+  }
+  buildColumnListSlot(item, group) {
+    const dataElementId = this.createColumnListSlotDataElementId(item);
+    return (h("div", null, h("ez-check", { mode: CheckMode.SWITCH, id: CheckMode.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"), "data-element-id": dataElementId, onEzChange: (evt) => { this.switchColumnGroup(evt, item); } })));
+  }
+  createOrderListSlotDataElementId(item) {
+    return `${this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)}_configItem_${StringUtils.toCamelCase(item.label)}`;
+  }
+  buildOrderListSlot(item) {
+    const dataElementId = this.createOrderListSlotDataElementId(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, "data-element-id": dataElementId, 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).forEach((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();
+  }
+  saveGridConfigOnStorage(_newConfig) {
+    ConfigStorage.saveGridConfig(_newConfig, this.configName, this.resourceID)
+      .then((savedConfig) => {
+      this.configChange.emit(savedConfig);
+      this._orderList.clearHistory();
+      ApplicationUtils.info(this.getMessage("snkGridConfig.info.successfullyConfigSaved"), { iconName: "check" });
+    });
+  }
+  reOrderPriorityColumns(columns, orderPriorityList) {
+    let orderArray = [];
+    orderArray = columns.filter((item) => item.sort && item.hidden !== true)
+      .map((item) => {
+      return { label: item.label, orderIndex: 0 };
+    });
+    let indexCount = 0;
+    let newOrderArray = [];
+    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;
+    }
+    return orderArray;
+  }
+  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.reOrderPriorityColumns(this.columns, this._orderPriorityList);
+    }
+    this.columns.forEach((column) => {
+      let _newColumnConfig = _newConfig.columns.find((_newColumnConfig) => column.name === _newColumnConfig.name);
+      if (column.hidden === true && _newColumnConfig)
+        return;
+      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.saveGridConfigOnStorage(_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";
+    searchingText = searchingText || ((_a = evt.currentTarget) === null || _a === void 0 ? void 0 : _a.value);
+    if (!searchingText) {
+      this.removeSelection();
+      return;
+    }
+    const matchedIndexes = await this.getMatchedIndexes(searchingText);
+    const newSelected = this.getNewSelectedIndex(matchedIndexes, hitEnter);
+    this._selectedIndex = newSelected;
+    if (this.selectedIndex === 1) {
+      this.updateOrderListSelection(newSelected);
+    }
+    else {
+      this.updateColumnListSelection(newSelected);
+    }
+  }
+  async getMatchedIndexes(searchingText) {
+    const matchedIndexes = [];
+    if (this.selectedIndex === 1) {
+      const orderListDatasource = await this._orderList.getList();
+      orderListDatasource.forEach((column, index) => {
+        if (this.compareWords(column, searchingText)) {
+          matchedIndexes.push(index);
+        }
+      });
+    }
+    else {
+      this.columns.forEach((column, index) => {
+        if (this.compareWords(column, searchingText)) {
+          matchedIndexes.push(index);
+        }
+      });
+    }
+    return matchedIndexes;
+  }
+  getNewSelectedIndex(matchedIndexes, hitEnter) {
+    if (matchedIndexes.length === 0)
+      return -1;
+    if (hitEnter) {
+      for (const index of matchedIndexes) {
+        if (index > this._selectedIndex) {
+          return index;
+        }
+      }
+    }
+    return matchedIndexes[0];
+  }
+  updateOrderListSelection(newSelected) {
+    if (newSelected === -1) {
+      this._orderList.removeSelection();
+      return;
+    }
+    this._orderList.getList().then((orderListDatasource) => {
+      const selectedColumn = orderListDatasource[newSelected];
+      if (selectedColumn) {
+        this._orderList.setSelection(selectedColumn, true);
+      }
+      else {
+        this._orderList.removeSelection();
+      }
+    });
+  }
+  updateColumnListSelection(newSelected) {
+    if (newSelected === -1) {
+      this._columnList.removeSelection();
+      return;
+    }
+    const selectedColumn = this.columns[newSelected];
+    if (selectedColumn) {
+      const listItem = this._columListItems
+        .map(group => group.items)
+        .flat()
+        .find(item => item.label === selectedColumn.label);
+      if (listItem) {
+        this._columnList.setSelection(listItem, true);
+      }
+      else {
+        this._columnList.removeSelection();
+      }
+    }
+    else {
+      this._columnList.removeSelection();
+    }
+  }
+  removeSelection() {
+    if (this.selectedIndex === 1) {
+      this._orderList.removeSelection();
+    }
+    else {
+      this._columnList.removeSelection();
+    }
+  }
+  compareWords(column, searchingText) {
+    var _a, _b;
+    const columnLabel = (_a = StringUtils.replaceAccentuatedChars(column === null || column === void 0 ? void 0 : column.label)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    const argument = (_b = StringUtils.replaceAccentuatedChars(searchingText)) === null || _b === void 0 ? void 0 : _b.toUpperCase();
+    if (StringUtils.isEmpty(columnLabel) || StringUtils.isEmpty(argument)) {
+      return false;
+    }
+    return columnLabel.includes(argument);
+  }
+  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);
+    }
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+  }
+  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", { "data-element-id": "searchColums", 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, "data-element-id": "configCols" }), 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), "data-element-id": "configDataOrder" })), 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"]; }
+  get _element() { return getElement(this); }
+};
+SnkGridConfig.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) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.selectedOption = ORDER_VALUES.none;
+  }
+  render() {
+    return (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(ORDER_VALUES).map((key) => {
+      return h("option", { value: ORDER_VALUES[key].value }, ORDER_VALUES[key].label);
+    })));
+  }
+  static get assetsDirs() { return ["../assets"]; }
+};
+SelectBox.style = snkSelectBoxCss;
+
 const taskbarActionsButtonCss = ".sc-taskbar-actions-button-h{display:flex;width:fit-content;height:fit-content}";
 
 const TaskbarActionsButton = class {
@@ -779,12 +1291,28 @@ const TaskbarActionsButton = class {
     return this._showDropdown && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
   onSelectAction(iAction) {
-    const selectedAction = this.actions.find(action => action.value === iAction.id);
+    const actions = this.actions.map(action => (Object.assign(Object.assign({}, action), { id: action.value })));
+    const selectedAction = this.getSelectedAction(iAction.id, actions);
     this.taskbarActionSelected.emit(selectedAction);
     if (!selectedAction.disableCloseOnSelect) {
       this._showDropdown = false;
     }
   }
+  getSelectedAction(id, actions) {
+    let selectedItem = null;
+    for (const item of actions) {
+      if (item.id === id) {
+        selectedItem = item;
+        break;
+      }
+      if (!(item === null || item === void 0 ? void 0 : item.children))
+        continue;
+      selectedItem = this.getSelectedAction(id, item.children);
+      if (selectedItem)
+        break;
+    }
+    return selectedItem;
+  }
   dropdownItemBuilder(item, _level) {
     const itemAction = this.actions.find(action => action.value === item.id);
     if (!itemAction || !itemAction.itemBuilder) {
@@ -822,10 +1350,10 @@ const TaskbarActionsButton = class {
     this.taskbarActionsButtonDisconnected.emit();
   }
   render() {
-    return (h(Host, null, h("div", { class: `ez-padding-left--medium ${this.canShowDropdown() ? ' ez-elevation--16' : ''}` }, h("ez-button", { title: this.title, mode: 'icon', iconName: 'dots-vertical', size: 'small', enabled: this.enabled, onClick: () => this.controlDropdown() }), this.canShowDropdown() && h("ez-dropdown", { items: this.loadItems(), onEzClick: (evt) => this.onSelectAction(evt.detail), onEzOutsideClick: () => this._showDropdown = false, itemBuilder: (item, level) => this.dropdownItemBuilder(item, level) }))));
+    return (h(Host, null, h("div", { class: `${this.canShowDropdown() ? ' ez-elevation--16' : ''}` }, h("ez-button", { title: this.title, mode: 'icon', iconName: 'dots-vertical', size: 'small', enabled: this.enabled, onClick: () => this.controlDropdown() }), this.canShowDropdown() && h("ez-dropdown", { items: this.loadItems(), onEzClick: (evt) => this.onSelectAction(evt.detail), onEzOutsideClick: () => this._showDropdown = false, itemBuilder: (item, level) => this.dropdownItemBuilder(item, level) }))));
   }
   get _element() { return getElement(this); }
 };
 TaskbarActionsButton.style = taskbarActionsButtonCss;
 
-export { SnkActionsButton as snk_actions_button, TaskbarActionsButton as taskbar_actions_button };
+export { SnkActionsButton as snk_actions_button, SnkGridConfig as snk_grid_config, SelectBox as snk_select_box, TaskbarActionsButton as taskbar_actions_button };