@sankhyalabs/sankhyablocks 9.1.0-dev.2 → 9.1.0-dev.21

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

@@ -1,6 +1,5 @@
-import { StringUtils, ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
+import { ApplicationContext, ElementIDUtils, StringUtils } from '@sankhyalabs/core';
 import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
-import { CheckMode } from '@sankhyalabs/ezui/dist/collection/components/ez-check/CheckMode';
 import { h, Host } from '@stencil/core';
 import { ConfigStorage } from '../../lib/configs/ConfigStorage';
 import { ORDER_VALUES } from '../../lib/utils/constants';
@@ -8,8 +7,9 @@ export class SnkGridConfig {
   constructor() {
     this._orderListItems = [];
     this._orderPriorityList = [];
+    this._visibleList = [];
+    this._hiddenList = [];
     this._columListItems = [];
-    this._selectedIndex = -1;
     this._dataChanged = false;
     this._componenteInternalKey = Date.now();
     this.selectedIndex = 0;
@@ -17,6 +17,8 @@ export class SnkGridConfig {
     this.config = undefined;
     this.configName = undefined;
     this.resourceID = undefined;
+    this._collapsibleBoxListOrder = true;
+    this._collapsibleBoxListSelect = false;
   }
   /* Creation Methods */
   /**
@@ -26,15 +28,15 @@ export class SnkGridConfig {
    * 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__");
+    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;
+    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, _b;
       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 };
+      let item = { label: column.label, sort: (_b = column === null || column === void 0 ? void 0 : column.sort) !== null && _b !== void 0 ? _b : ORDER_VALUES.asc.value, id: column.name };
       if (configItem) {
         item['orderIndex'] = configItem.orderIndex;
         item['ascending'] = configItem.ascending;
@@ -73,17 +75,10 @@ export class SnkGridConfig {
     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 };
+    const visibleGroup = this.buildVisibleGroup();
+    const hiddenGroup = this.buildHiddenGroup();
+    this.columns.forEach(column => {
+      const item = this.buildListItemFromColumn(column);
       if (column.hidden) {
         hiddenGroup.items.push(item);
       }
@@ -92,13 +87,22 @@ export class SnkGridConfig {
       }
     });
     this._columListItems = [visibleGroup, hiddenGroup];
+    this._visibleList = visibleGroup.items;
+    this._hiddenList = hiddenGroup.items;
+    this.createOrderList();
   }
-  createColumnListSlotDataElementId(item) {
-    return `configItem_${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(item.label))}`;
+  buildVisibleGroup() {
+    return {
+      group: this.getMessage('snkGridConfig.group.visible'),
+      items: [],
+    };
   }
-  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); } })));
+  buildHiddenGroup() {
+    return {
+      group: this.getMessage('snkGridConfig.group.hidden'),
+      items: [],
+      sort: ORDER_VALUES.asc.value,
+    };
   }
   createOrderListSlotDataElementId(item) {
     return `${this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)}_configItem_${StringUtils.toCamelCase(item.label)}`;
@@ -109,7 +113,10 @@ export class SnkGridConfig {
     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); } })));
+    return (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);
+      }, preventAutoFocus: true }));
   }
   updateOrder(sortOrder, updatedItemLabel) {
     var _a;
@@ -139,64 +146,31 @@ export class SnkGridConfig {
     }
     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.updateColumns();
     this._dataChanged = false;
     this.closeConfig();
     this.save();
   }
+  updateColumns() {
+    this.columns = this._columListItems.flatMap((group) => group.items.map((item) => this.buildColumnFromListItem(item, group)));
+  }
+  buildColumnFromListItem(item, group) {
+    const baseColumn = this.columns.find((column) => column.label === item.label);
+    if (!baseColumn) {
+      throw new Error(`Column with label "${item.label}" not found.`);
+    }
+    return Object.assign(Object.assign({}, baseColumn), { hidden: group.group === this.getMessage('snkGridConfig.group.hidden') });
+  }
   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" });
+      ApplicationUtils.info(this.getMessage('snkGridConfig.info.successfullyConfigSaved'), { iconName: 'check' });
     });
   }
   reOrderPriorityColumns(columns, orderPriorityList) {
@@ -295,132 +269,19 @@ export class SnkGridConfig {
     });
     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
+        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)
+      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 {
@@ -430,31 +291,12 @@ export class SnkGridConfig {
     }
     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;
+      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;
@@ -476,17 +318,72 @@ export class SnkGridConfig {
       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);
   }
+  handleRightListChange(rightList) {
+    const visibleGroup = this._columListItems.find(group => group.group === this.getMessage('snkGridConfig.group.visible'));
+    if (visibleGroup && visibleGroup.items != rightList) {
+      visibleGroup.items = rightList;
+      this._dataChanged = true;
+    }
+  }
+  getListSlots() {
+    return {
+      RIGHT_LIST: {
+        itemRightSlotBuilder: (item) => this.buildOrderListSlot(item),
+      },
+    };
+  }
+  renderResetConfigBtn() {
+    if (!this.resourceID)
+      return;
+    return h("ez-button", { class: "padding-right--medium", label: this.getMessage('snkGridConfig.reset'), onClick: () => this.setDefaultConfig() });
+  }
+  async setDefaultConfig() {
+    var _a;
+    if (!this.resourceID)
+      return;
+    this._dataChanged = true;
+    const config = await ConfigStorage.getDefaultGridConfig(this.resourceID);
+    const defaultVisibleCols = (_a = config === null || config === void 0 ? void 0 : config.columns.map(col => col.name)) !== null && _a !== void 0 ? _a : [];
+    const visibleGroup = this.buildVisibleGroup();
+    const hiddenGroup = this.buildHiddenGroup();
+    const visibleItemsMap = new Map();
+    this.columns.forEach(column => {
+      const item = this.buildListItemFromColumn(column);
+      if (defaultVisibleCols.includes(column.name)) {
+        visibleItemsMap.set(column.name, item);
+      }
+      else {
+        hiddenGroup.items.push(item);
+      }
+    });
+    visibleGroup.items = defaultVisibleCols
+      .map(name => visibleItemsMap.get(name))
+      .filter(item => item);
+    this._columListItems = [visibleGroup, hiddenGroup];
+    this._visibleList = visibleGroup.items;
+    this._hiddenList = hiddenGroup.items;
+    this.updateColumns();
+    this.createOrderList();
+  }
+  buildListItemFromColumn(column) {
+    var _a;
+    return {
+      label: column.label,
+      selected: false,
+      sort: (_a = column === null || column === void 0 ? void 0 : column.sort) !== null && _a !== void 0 ? _a : ORDER_VALUES.asc.value,
+      id: column.name,
+    };
+  }
   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() }))));
+    return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "ez-margin-bottom--medium" }, 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", class: "ez-button--tertiary", onClick: () => this.closeConfig() })))), h("div", { class: 'grid-config__body' }, h("ez-collapsible-box", { id: 'group-select-columns', label: this.getMessage('snkGridConfig.columnsSelection'), "header-size": "medium", key: 'key_group-select-columns', value: this._collapsibleBoxListSelect, onEzChange: ({ detail }) => this._collapsibleBoxListOrder = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { leftList: this._hiddenList, leftTitle: this.getMessage('snkGridConfig.availableColumns'), rightList: this._visibleList, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), onEzRightListChanged: ({ detail }) => this.handleRightListChange(detail), emptyMessage: {
+        LEFT_LIST: this.getMessage('snkGridConfig.emptyMensage.left'),
+        RIGHT_LIST: this.getMessage('snkGridConfig.emptyMensage.right'),
+      }, entityLabel: 'coluna', entityLabelPlural: 'colunas' }))), h("ez-collapsible-box", { id: 'ID_group-order-columns', label: this.getMessage('snkGridConfig.dataOrdering'), "header-size": "medium", key: 'KEY_group-order-columns', value: this._collapsibleBoxListOrder, onEzChange: ({ detail }) => this._collapsibleBoxListSelect = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { rightList: this._orderListItems, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), useOnlyRightList: true, slotsListBuilder: this.getListSlots(), emptyMessage: {
+        RIGHT_LIST: this.getMessage('snkGridConfig.emptyMensage.right'),
+      }, entityLabel: 'coluna', entityLabelPlural: 'colunas' })))), h("div", { class: "grid-config__footer" }, this.renderResetConfigBtn(), 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 is() { return "snk-grid-config"; }
   static get encapsulation() { return "scoped"; }
@@ -600,6 +497,12 @@ export class SnkGridConfig {
       }
     };
   }
+  static get states() {
+    return {
+      "_collapsibleBoxListOrder": {},
+      "_collapsibleBoxListSelect": {}
+    };
+  }
   static get events() {
     return [{
         "method": "configChange",

package/dist/collection/components/snk-grid-config/snk-select-box/snk-select-box.css

@@ -1,5 +1,6 @@
 ez-combo-box {
     width: 100px;
+    --ez-text-input__margin-bottom: 0px;
 }
 
 .grid-config-combo {

package/dist/collection/components/snk-grid-config/snk-select-box/snk-select-box.js

@@ -3,9 +3,10 @@ import { ORDER_VALUES } from '../../../lib/utils/constants';
 export class SelectBox {
   constructor() {
     this.selectedOption = ORDER_VALUES.none;
+    this.preventAutoFocus = false;
   }
   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("ez-combo-box", { class: "grid-config-combo ez-input--inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true, preventAutoFocus: this.preventAutoFocus }, Object.keys(ORDER_VALUES).map((key) => {
       return h("option", { value: ORDER_VALUES[key].value }, ORDER_VALUES[key].label);
     })));
   }
@@ -46,6 +47,24 @@ export class SelectBox {
         "attribute": "selected-option",
         "reflect": false,
         "defaultValue": "ORDER_VALUES.none"
+      },
+      "preventAutoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true, impede que o campo de texto receba foco automaticamente ao abrir as op\u00E7\u00F5es."
+        },
+        "attribute": "prevent-auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/snk-layout-form-config/snk-layout-form-config.js

@@ -6,6 +6,7 @@ const FORM_COL_CONFIG_PREFIX = 'formColCfg.';
 export class SnkLayoutFormConfig {
   constructor() {
     this._formConfigFetcher = new FormConfigFetcher();
+    this.messagesBuilder = undefined;
     this.layoutType = FormLayout.CASCADE;
   }
   /**
@@ -30,8 +31,12 @@ export class SnkLayoutFormConfig {
   toggleLayout(key) {
     this.layoutType = key;
   }
+  getMessage(key, params) {
+    var _a;
+    return (_a = this.messagesBuilder) === null || _a === void 0 ? void 0 : _a.getMessage(key, params);
+  }
   render() {
-    return (h("div", { class: "ez-flex ez-flex--column" }, h("div", { class: "ez-margin-bottom--small" }, h("ez-check", { label: "Layout em cascata", class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.CASCADE), value: this.layoutType === FormLayout.CASCADE }), h("snk-view-representation", { mode: FormLayout.CASCADE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, "Todos os campos ser\u00E3o organizados em uma coluna \u00FAnica.")), h("div", null, h("ez-check", { label: "Layout lado a lado", class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.SIDE_BY_SIDE), value: this.layoutType === FormLayout.SIDE_BY_SIDE }), h("snk-view-representation", { mode: FormLayout.SIDE_BY_SIDE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, "Todos os campos ser\u00E3o dispostos lado a lado, ajustando-se automaticamente \u00E0 largura da tela."))));
+    return (h("div", { class: "ez-flex ez-flex--column" }, h("div", { class: "ez-margin-bottom--small" }, h("ez-check", { label: this.getMessage('snkLayoutFormConfig.cascadeLayout.label'), class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.CASCADE), value: this.layoutType === FormLayout.CASCADE }), h("snk-view-representation", { mode: FormLayout.CASCADE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, this.getMessage('snkLayoutFormConfig.cascadeLayout.description'))), h("div", null, h("ez-check", { label: this.getMessage('snkLayoutFormConfig.sideBySideLayout.label'), class: "ez-margin-bottom--small", onEzChange: () => this.toggleLayout(FormLayout.SIDE_BY_SIDE), value: this.layoutType === FormLayout.SIDE_BY_SIDE }), h("snk-view-representation", { mode: FormLayout.SIDE_BY_SIDE }), h("label", { class: "ez-label ez-margin--small ez-flex ez-text--medium" }, this.getMessage('snkLayoutFormConfig.sideBySideLayout.description')))));
   }
   static get is() { return "snk-layout-form-config"; }
   static get encapsulation() { return "scoped"; }
@@ -45,6 +50,30 @@ export class SnkLayoutFormConfig {
       "$": ["snk-layout-form-config.css"]
     };
   }
+  static get properties() {
+    return {
+      "messagesBuilder": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SnkMessageBuilder",
+          "resolved": "SnkMessageBuilder",
+          "references": {
+            "SnkMessageBuilder": {
+              "location": "import",
+              "path": "../../lib/message/SnkMessageBuilder"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
   static get states() {
     return {
       "layoutType": {}

package/dist/collection/components/snk-personalized-filter/snk-personalized-filter.js

@@ -51,7 +51,7 @@ export class SnkPersonalizedFilter {
             entityName: "",
             fieldName: "",
             description: "",
-            fieldLabel: "Valor",
+            fieldLabel: this.getMessage("snkPersonalizedFilter.info.labelDefaultValue"),
             type: undefined,
             expression: undefined,
             operand: undefined,

package/dist/collection/components/snk-personalized-filter/subcomponents/snk-expression-group/snk-expression-group.js

@@ -117,7 +117,7 @@ export class SnkExpressionGroup {
       entityName: "",
       fieldName: "",
       description: "",
-      label: "Valor",
+      label: this.getMessage("snkPersonalizedFilter.info.labelDefaultValue"),
       type: undefined,
       expression: undefined,
       operand: undefined,
@@ -142,7 +142,7 @@ export class SnkExpressionGroup {
           entityName: "",
           fieldName: "",
           description: "",
-          label: "Valor",
+          label: this.getMessage("snkPersonalizedFilter.info.labelDefaultValue"),
           type: undefined,
           expression: undefined,
           operand: undefined,
@@ -229,7 +229,7 @@ export class SnkExpressionGroup {
   }
   render() {
     const canAddGroup = this.canAddGroup();
-    return (h(Host, null, h("div", { class: !this.isFirstLevel() && this._showDashes ? 'dashes' : 'hidden', style: this.buildGroupStyle() }), h("div", { class: !this.isFirstLevel() && this._showDashes ? 'horizontal-dashes' : 'hidden' }), h("div", { class: 'ez-flex ez-flex--align-items-center' }, h("div", { class: 'snk-expression-group__container-condition ez-flex ez-flex-item--align-center ez-flex--align-items-center', "data-condition": this._conditionOperator, title: this.getTooltipMessageForOperator() }, h("label", { class: "ez-label ez-padding-right--medium ez-padding-left--medium ez-title--primary" }, this.getMessage("snkPersonalizedFilter.info.condition")), h("div", null, h("ez-combo-box", Object.assign({ class: "snk-expression-group__container-option", canShowError: false, mode: "slim", suppressEmptyOption: true, enabled: this.canChangeGroupCondition(), value: this._conditionOperator, onEzChange: (evt) => this.handleConditionOperatorChange(evt.detail.value) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `comboBoxConditions_level_${this.getDataGroupLevel()}` }), h("option", { value: FilterGroupCondition.AND }, "E"), h("option", { value: FilterGroupCondition.OR }, "OU")))), h("ez-button", { class: "ez-padding-right--medium ez-padding-left--medium", mode: "icon", iconName: "plus", size: "small", enabled: this.canAddExpression, title: this.getMessageAddTooltip(), onClick: () => this.handleAddExpression() }), h("ez-button", { label: this.getMessage("snkPersonalizedFilter.info.addGroup"), size: "small", enabled: canAddGroup, title: !canAddGroup ? this.getMessage('snkPersonalizedFilter.info.labelDisabledAddGroupButton', { LIMIT_GROUP_LEVEL: this.LIMIT_GROUP_LEVEL + 1 }) : '', onClick: () => this.handleAddGroup() }, h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: "plus" })), !this.isFirstLevel() && h("ez-button", { title: this.getMessage("snkPersonalizedFilter.info.labelDeleteExpression"), class: "ez-padding-left--medium", mode: "icon", iconName: "delete", size: "small", onClick: (evt) => this.confirmRemoveGroup(evt) })), h("div", { class: "ez-padding-top--small snk-expression-group__container-expression" }, h("div", { class: "ez-padding-top--small" }, this.renderExpressionItems())), h("div", { class: "ez-padding-top--small snk-expression-group__container-expression" }, h("div", { class: "ez-padding-top--small" }, this.renderGroups()))));
+    return (h(Host, null, h("div", { class: !this.isFirstLevel() && this._showDashes ? 'dashes' : 'hidden', style: this.buildGroupStyle() }), h("div", { class: !this.isFirstLevel() && this._showDashes ? 'horizontal-dashes' : 'hidden' }), h("div", { class: 'ez-flex ez-flex--align-items-center' }, h("div", { class: 'snk-expression-group__container-condition ez-flex ez-flex-item--align-center ez-flex--align-items-center', "data-condition": this._conditionOperator, title: this.getTooltipMessageForOperator() }, h("label", { class: "ez-label ez-padding-right--medium ez-padding-left--medium ez-title--primary" }, this.getMessage("snkPersonalizedFilter.info.condition")), h("div", null, h("ez-combo-box", Object.assign({ class: "snk-expression-group__container-option", canShowError: false, mode: "slim", suppressEmptyOption: true, enabled: this.canChangeGroupCondition(), value: this._conditionOperator, onEzChange: (evt) => this.handleConditionOperatorChange(evt.detail.value) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `comboBoxConditions_level_${this.getDataGroupLevel()}` }), h("option", { value: FilterGroupCondition.AND }, this.getMessage("snkPersonalizedFilter.info.conditionAnd")), h("option", { value: FilterGroupCondition.OR }, this.getMessage("snkPersonalizedFilter.info.conditionOr"))))), h("ez-button", { class: "ez-padding-right--medium ez-padding-left--medium", mode: "icon", iconName: "plus", size: "small", enabled: this.canAddExpression, title: this.getMessageAddTooltip(), onClick: () => this.handleAddExpression() }), h("ez-button", { label: this.getMessage("snkPersonalizedFilter.info.addGroup"), size: "small", enabled: canAddGroup, title: !canAddGroup ? this.getMessage('snkPersonalizedFilter.info.labelDisabledAddGroupButton', { LIMIT_GROUP_LEVEL: this.LIMIT_GROUP_LEVEL + 1 }) : '', onClick: () => this.handleAddGroup() }, h("ez-icon", { class: "ez-padding-right--small", slot: "leftIcon", iconName: "plus" })), !this.isFirstLevel() && h("ez-button", { title: this.getMessage("snkPersonalizedFilter.info.labelDeleteExpression"), class: "ez-padding-left--medium", mode: "icon", iconName: "delete", size: "small", onClick: (evt) => this.confirmRemoveGroup(evt) })), h("div", { class: "ez-padding-top--small snk-expression-group__container-expression" }, h("div", { class: "ez-padding-top--small" }, this.renderExpressionItems())), h("div", { class: "ez-padding-top--small snk-expression-group__container-expression" }, h("div", { class: "ez-padding-top--small" }, this.renderGroups()))));
   }
   static get is() { return "snk-expression-group"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/snk-personalized-filter/subcomponents/snk-expression-item/filter-operands/filter-operands.js

@@ -1,19 +1,19 @@
 import { UserInterface } from '@sankhyalabs/core';
 const defaultsOperand = [
-  { label: "Igual (=)", value: "EQUAL" },
-  { label: "Diferente (<>)", value: "DIFFERENT" },
-  { label: "Contendo (LIKE)", value: "LIKE" },
-  { label: "Contido em (IN)", value: "IN" },
-  { label: "Iniciado com (%?)", value: "START_WITH" },
-  { label: "Terminado com (?%)", value: "FINISHED_WITH" },
-  { label: "Vazio (NULL)", value: "NULL" },
-  { label: "Não Vazio (NOT NULL)", value: "NOT_NULL" },
+  { label: "snkPersonalizedFilter.operands.equal", value: "EQUAL" },
+  { label: "snkPersonalizedFilter.operands.different", value: "DIFFERENT" },
+  { label: "snkPersonalizedFilter.operands.like", value: "LIKE" },
+  { label: "snkPersonalizedFilter.operands.in", value: "IN" },
+  { label: "snkPersonalizedFilter.operands.startWith", value: "START_WITH" },
+  { label: "snkPersonalizedFilter.operands.finishedWith", value: "FINISHED_WITH" },
+  { label: "snkPersonalizedFilter.operands.null", value: "NULL" },
+  { label: "snkPersonalizedFilter.operands.notNull", value: "NOT_NULL" },
 ];
 export const FilterOperandDefault = defaultsOperand.concat([
-  { label: "Maior (>)", value: "LARGER" },
-  { label: "Maior ou Igual (>=)", value: "LARGER_EQUAL" },
-  { label: "Menor (<)", value: "SMALLER" },
-  { label: "Menor ou Igual (<=)", value: "SMALLER_EQUAL" }
+  { label: "snkPersonalizedFilter.operands.larger", value: "LARGER" },
+  { label: "snkPersonalizedFilter.operands.largerEqual", value: "LARGER_EQUAL" },
+  { label: "snkPersonalizedFilter.operands.smaller", value: "SMALLER" },
+  { label: "snkPersonalizedFilter.operands.smallerEqual", value: "SMALLER_EQUAL" }
 ]);
 export const FilterOperandTypeTextSearch = defaultsOperand;
 export const FIELD_TYPE_SEARCH_AND_TEXT = [