@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-11997.0

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

@@ -0,0 +1,634 @@
+import { StringUtils, ElementIDUtils } 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';
+export class SnkGridConfig {
+  constructor() {
+    this._orderListItems = [];
+    this._orderPriorityList = [];
+    this._columListItems = [];
+    this._selectedIndex = -1;
+    this._dataChanged = false;
+    this._componenteInternalKey = Date.now();
+    this.selectedIndex = 0;
+    this.application = undefined;
+    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) {
+    return this.application.messagesBuilder.getMessage(key, params);
+  }
+  createOrderList() {
+    let newList = [];
+    this.columns.filter(col => { var _a; return StringUtils.getBooleanValue((_a = col === null || col === void 0 ? void 0 : col.props) === null || _a === void 0 ? void 0 : _a.get("sortable"), true); }).forEach((column) => {
+      var _a;
+      let configItem = (_a = this.config) === null || _a === void 0 ? void 0 : _a.columns.find((item) => item.name === column.name);
+      let item = { name: column.name, label: column.label };
+      if (configItem) {
+        item['orderIndex'] = configItem.orderIndex;
+        item['ascending'] = configItem.ascending;
+      }
+      if (!column.hidden) {
+        newList.push(item);
+      }
+    });
+    newList.sort((a, b) => {
+      //OS dois tem order index 0 e pelo menos um deles tem orientação de ordenação.
+      if (a.orderIndex == 0 && b.orderIndex == 0 && (a.ascending != undefined || b.ascending != undefined)) {
+        if (a.ascending != undefined)
+          return -1;
+        if (b.ascending != undefined)
+          return 1;
+        return 0;
+        //Pelo menos um deles tem order index diferente de 0 e os dois tem orientação de ordenação.
+      }
+      else if (a.ascending != undefined && b.ascending != undefined) {
+        return (a.orderIndex - b.orderIndex);
+        //Pelo menos um deles tem order index diferente de 0 e pelo menos um deles tem orientação de ordenação.
+      }
+      else if (a.ascending != undefined || b.ascending != undefined) {
+        if (a.ascending != undefined)
+          return -1;
+        if (b.ascending != undefined)
+          return 1;
+        return 0;
+      }
+      return (a.orderIndex - b.orderIndex);
+    });
+    this._orderListItems = newList;
+  }
+  createColumnList() {
+    let visibleGroup = {
+      group: this.getMessage("snkGridConfig.group.visible"),
+      items: [],
+    };
+    let hiddenGroup = {
+      group: this.getMessage("snkGridConfig.group.hidden"),
+      items: [],
+      sort: ORDER_VALUES.asc.value
+    };
+    this.columns.forEach((column) => {
+      let item = { label: column.label };
+      if (column.hidden) {
+        hiddenGroup.items.push(item);
+      }
+      else {
+        visibleGroup.items.push(item);
+      }
+    });
+    this._columListItems = [visibleGroup, hiddenGroup];
+  }
+  buildColumnListSlot(item, group) {
+    const dataElementId = `configItem_${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(item.label))}`;
+    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); } })));
+  }
+  buildOrderListSlot(item) {
+    const dataElementId = `${this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)}_configItem_${StringUtils.toCamelCase(item.label)}`;
+    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).map((item, index) => {
+        if (item.label === newItem.label) {
+          newItem.sortIndex = index;
+        }
+      });
+    }
+    else {
+      orderArray = newList.filter((item) => item.sort && item.hidden !== true)
+        .map((item, index) => {
+        return { label: item.label, orderIndex: index };
+      });
+      orderArray.forEach((element) => {
+        newList.find((item) => item.label === element.label).sortIndex = element.orderIndex;
+      });
+    }
+    this.columns = newList;
+  }
+  /* Actions Methods */
+  switchColumnGroup(evt, switchedItem) {
+    evt.stopPropagation();
+    let newList = [...this._columListItems];
+    this._dataChanged = true;
+    if (evt.detail === true) {
+      let hiddenGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.hidden"));
+      let index = hiddenGroup.items.findIndex((item) => item.label === switchedItem.label);
+      if (index >= 0) {
+        hiddenGroup.items.splice(index, 1);
+      }
+      let visibleGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.visible"));
+      visibleGroup.items.push(switchedItem);
+      this._columListItems = newList;
+      this.createOrderList();
+    }
+    else if (evt.detail === false) {
+      let visibleGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.visible"));
+      let index = visibleGroup.items.findIndex((item) => item.label === switchedItem.label);
+      if (index >= 0) {
+        visibleGroup.items.splice(index, 1);
+      }
+      let hiddenGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.hidden"));
+      hiddenGroup.items.push(switchedItem);
+      this._columListItems = newList;
+      this.createOrderList();
+    }
+  }
+  finish() {
+    if (!this._dataChanged) {
+      this.closeConfig();
+      return;
+    }
+    let newColumnList = [];
+    this._columListItems.forEach((group) => {
+      group.items.forEach((item) => {
+        const baseColumn = this.columns.find((column) => column.label === item.label);
+        let newColumnItem = Object.assign({}, baseColumn);
+        if (group.group === this.getMessage("snkGridConfig.group.hidden")) {
+          newColumnItem.hidden = true;
+        }
+        else {
+          newColumnItem.hidden = false;
+        }
+        newColumnList.push(newColumnItem);
+      });
+    });
+    this.columns = newColumnList;
+    this._dataChanged = false;
+    this.closeConfig();
+    this.save();
+  }
+  save() {
+    var _a;
+    let _newConfig;
+    if (this.config) {
+      _newConfig = this.config;
+    }
+    else {
+      _newConfig = this.createConfigFromState(this.columns);
+    }
+    let _newColumnConfigList = [];
+    let orderArray;
+    if (((_a = this._orderPriorityList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      orderArray = this.columns.filter((item) => item.sort && item.hidden !== true)
+        .map((item) => {
+        return { label: item.label, orderIndex: 0 };
+      });
+      let indexCount = 0;
+      let newOrderArray = [];
+      this._orderPriorityList.forEach((orderPriorityItem) => {
+        let item = orderArray.find((column) => column.label === orderPriorityItem.label);
+        if (item) {
+          item.orderIndex = indexCount;
+          newOrderArray.push(item);
+          indexCount++;
+        }
+      });
+      if (newOrderArray.length > 0) {
+        orderArray = newOrderArray;
+      }
+    }
+    for (let i = 0; i < this.columns.length; i++) {
+      const column = this.columns[i];
+      let _newColumnConfig = _newConfig.columns.find((_newColumnConfig) => column.name === _newColumnConfig.name);
+      if (column.hidden === true && _newColumnConfig) {
+        continue;
+      }
+      if (_newColumnConfig) {
+        _newColumnConfig.width = column.width;
+      }
+      else if (column.hidden === false) {
+        _newColumnConfig = { name: column.name, width: column.width, orderIndex: 0 };
+      }
+      if (_newColumnConfig) {
+        if (column.sort) {
+          _newColumnConfig.ascending = column.sort.toUpperCase() === ORDER_VALUES.asc.value ? true : false;
+          if (orderArray) {
+            adjustPriorityOrder(column, _newColumnConfig);
+          }
+          else {
+            _newColumnConfig.orderIndex = column.sortIndex;
+          }
+        }
+        else {
+          delete _newColumnConfig.ascending;
+          _newColumnConfig.orderIndex = 0;
+        }
+        _newColumnConfigList.push(_newColumnConfig);
+      }
+    }
+    _newConfig.columns = _newColumnConfigList;
+    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" });
+    });
+    function adjustPriorityOrder(column, _newColumnConfig) {
+      if (orderArray) {
+        let orderItem = orderArray.find((item) => item.label === column.label);
+        if (orderItem) {
+          _newColumnConfig.orderIndex = orderItem.orderIndex;
+        }
+      }
+    }
+  }
+  createConfigFromState(state) {
+    let newConfig = { columns: [] };
+    state.forEach((columnState) => {
+      if (!columnState.hidden) {
+        let newConfigColumn = { name: columnState.name };
+        if (columnState.width) {
+          newConfigColumn['width'] = columnState.width;
+        }
+        if (columnState.sort) {
+          newConfigColumn['ascending'] = (columnState.sort.toUpperCase() === ORDER_VALUES.asc.value);
+          newConfigColumn['orderIndex'] = columnState.sortIndex;
+        }
+        else {
+          newConfigColumn['orderIndex'] = 0;
+        }
+        if (newConfigColumn) {
+          newConfig.columns.push(newConfigColumn);
+        }
+      }
+    });
+    return newConfig;
+  }
+  async locateColumn(evt, searchingText) {
+    var _a;
+    const hitEnter = evt.key === "Enter";
+    if (!searchingText) {
+      searchingText = (_a = evt.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    let newSelected = -1;
+    if (this.selectedIndex === 1) {
+      if (searchingText) {
+        const matchedIndexes = [];
+        let orderListDatasource;
+        await this._orderList.getList().then((listGroup) => {
+          orderListDatasource = listGroup;
+          orderListDatasource.forEach((column, index) => {
+            if (this.compareWords(column, searchingText)) {
+              matchedIndexes.push(index);
+            }
+          });
+        });
+        if (matchedIndexes.length > 0) {
+          if (hitEnter) {
+            for (let j = 0; j < matchedIndexes.length; j++) {
+              if (matchedIndexes[j] > this._selectedIndex) {
+                newSelected = matchedIndexes[j];
+                break;
+              }
+            }
+          }
+          if (newSelected === -1) {
+            newSelected = matchedIndexes[0];
+          }
+        }
+        this._selectedIndex = newSelected;
+        let selectedColumn;
+        selectedColumn = orderListDatasource[newSelected];
+        if (selectedColumn) {
+          this._orderList.setSelection(selectedColumn, true);
+        }
+        else {
+          this._orderList.removeSelection();
+        }
+      }
+      else {
+        this._orderList.removeSelection();
+      }
+    }
+    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) {
+          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();
+      }
+    }
+  }
+  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 is() { return "snk-grid-config"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-grid-config.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-grid-config.css"]
+    };
+  }
+  static get assetsDirs() { return ["../assets"]; }
+  static get properties() {
+    return {
+      "selectedIndex": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aba selecionada das configura\u00E7\u00F5es da grade."
+        },
+        "attribute": "selected-index",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "application": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "SnkApplication",
+          "resolved": "SnkApplication",
+          "references": {
+            "SnkApplication": {
+              "location": "import",
+              "path": "../../../snk-application/snk-application"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Refer\u00EAncia para o SnkApplication"
+        }
+      },
+      "columns": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<EzGridColumn>",
+          "resolved": "EzGridColumn[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "EzGridColumn": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-grid/controller/EzGridController"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Colunas da grade."
+        }
+      },
+      "config": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "IGridConfig",
+          "resolved": "IGridConfig",
+          "references": {
+            "IGridConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-grid/controller/EzGridController"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Configura\u00E7\u00F5es da grade."
+        }
+      },
+      "configName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome usado para salvar/recuperar a configura\u00E7\u00E3o."
+        },
+        "attribute": "config-name",
+        "reflect": false
+      },
+      "resourceID": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome usado para salvar/recuperar a configura\u00E7\u00E3o."
+        },
+        "attribute": "resource-i-d",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "configChange",
+        "name": "configChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao salvar a altera\u00E7\u00E3o das configura\u00E7\u00F5es."
+        },
+        "complexType": {
+          "original": "IGridConfig",
+          "resolved": "IGridConfig",
+          "references": {
+            "IGridConfig": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-grid/controller/EzGridController"
+            }
+          }
+        }
+      }, {
+        "method": "configCancel",
+        "name": "configCancel",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido ao cancelar a altera\u00E7\u00E3o das configura\u00E7\u00F5es."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+}

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

@@ -0,0 +1,9 @@
+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;
+}