@sankhyalabs/ezui 5.10.8 → 5.11.0-dev.10

package/dist/collection/components/ez-grid/controller/ag-grid/editor/EzCellEditor.js

@@ -0,0 +1,49 @@
+import { UserInterface } from "@sankhyalabs/core";
+import { buildEditorMetadata } from "./IEditorMetadata";
+import { buildTextAreaInput, buildTextInput } from "./templates/TextInput.tpl";
+import { buildDate, buildDateTime, buildTime } from "./templates/DateInput.tpl";
+import { buildDecimal, buildInteger } from "./templates/NumberInput.tpl";
+import { buildComboBox, buildSwitch } from "./templates/ComboBox.tpl";
+import { buildSearch } from "./templates/Search.tpl";
+const uiBuilders = new Map();
+uiBuilders.set(UserInterface.DATE, buildDate);
+uiBuilders.set(UserInterface.TIME, buildTime);
+uiBuilders.set(UserInterface.DATETIME, buildDateTime);
+uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);
+uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
+uiBuilders.set(UserInterface.SWITCH, buildSwitch);
+uiBuilders.set(UserInterface.CHECKBOX, buildSwitch);
+uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
+uiBuilders.set(UserInterface.LONGTEXT, buildTextAreaInput);
+uiBuilders.set(UserInterface.SEARCH, buildSearch);
+export default class EzCellEditor {
+  init(params) {
+    const fieldName = params.column.getColId();
+    const dataUnit = params.context.dataUnit;
+    const fieldMetadata = buildEditorMetadata(dataUnit.getField(fieldName), params.eGridCell, dataUnit, params.context.editionManager);
+    const builder = uiBuilders.get(fieldMetadata.userInterface) || buildTextInput;
+    this._gui = builder(fieldMetadata);
+    if (this._gui.valueSetter != undefined) {
+      this._gui.valueSetter(params.value);
+    }
+    else {
+      this._gui.value = params.value;
+    }
+  }
+  getGui() {
+    return this._gui;
+  }
+  afterGuiAttached() {
+    this.focusIn();
+  }
+  focusIn() {
+    this._gui.focus();
+    this._gui.setFocus({ selectText: true });
+  }
+  getValue() {
+    return this._gui.valueGetter != undefined ? this._gui.valueGetter() : this._gui.value;
+  }
+  isPopup() {
+    return this._gui.isPopUp;
+  }
+}

package/dist/collection/components/ez-grid/controller/ag-grid/editor/GridEditorUtils.js

@@ -0,0 +1,10 @@
+export function getViewPortHeight(cell) {
+  let currentElem = cell;
+  while (currentElem) {
+    const viewPort = currentElem.querySelector("[ref=eBodyViewport]");
+    if (viewPort) {
+      return viewPort.getBoundingClientRect().bottom;
+    }
+    currentElem = currentElem.parentElement;
+  }
+}

package/dist/collection/components/ez-grid/controller/ag-grid/editor/IEditorMetadata.js

@@ -0,0 +1,4 @@
+import { buildFieldMetadata } from '../../../../../utils/interfaces/AbstractFieldMetadata';
+export const buildEditorMetadata = (descriptor, eGridCell, dataUnit, editionManager) => {
+  return Object.assign(Object.assign({}, buildFieldMetadata(descriptor)), { eGridCell, dataUnit, editionManager });
+};

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/ComboBox.tpl.js

@@ -0,0 +1,38 @@
+import { HTMLBuilder } from "@sankhyalabs/core";
+import { getViewPortHeight } from '../GridEditorUtils';
+const BOOLEAN_OPTIONS = new Map([[true, { value: "S", label: "Sim" }], [false, { value: "N", label: "Não" }]]);
+export const buildComboBox = ({ required, props, eGridCell }) => {
+  const prop = props === null || props === void 0 ? void 0 : props.options;
+  let options;
+  if (typeof prop === "string") {
+    const parsed = JSON.parse(prop);
+    options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
+  }
+  else {
+    options = prop;
+  }
+  const combo = HTMLBuilder.parseElement(`<ez-combo-box
+        class="grid_editor"
+        suppress-empty-option=${required}
+        mode="slim"
+    />`);
+  combo.options = options;
+  combo.listOptionsPosition = { verticalPosition: 29, bottomLimit: getViewPortHeight(eGridCell), hardPosition: true };
+  return combo;
+};
+export const buildSwitch = (fieldMetadata) => {
+  const combo = buildComboBox(Object.assign(Object.assign({}, fieldMetadata), { props: Object.assign(Object.assign({}, fieldMetadata.props), { options: Array.from(BOOLEAN_OPTIONS.values()) }) }));
+  combo.valueGetter = () => {
+    const value = combo.value;
+    if (value == undefined) {
+      return;
+    }
+    return value.value == "S";
+  };
+  combo.valueSetter = (value) => {
+    if (value != undefined) {
+      combo.value = BOOLEAN_OPTIONS.get(value);
+    }
+  };
+  return combo;
+};

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/DateInput.tpl.js

@@ -0,0 +1,40 @@
+import { HTMLBuilder } from "@sankhyalabs/core";
+const LIMIT_TIME_VALUE = 2359;
+export const buildDate = () => {
+  const dateInput = HTMLBuilder.parseElement(`<ez-date-input
+            class="ez-grid grid_editor"
+            mode="slim"
+            data-is-fixed="true"
+        />`);
+  dateInput.valueGetter = () => dateInput.getValueAsync();
+  return dateInput;
+};
+export const buildTime = ({ readOnly }) => {
+  const timeInputElement = HTMLBuilder.parseElement(`<ez-time-input
+        class="ez-grid grid_editor"
+        enabled=${!readOnly}
+        mode="slim"
+    />`);
+  timeInputElement.valueGetter = () => {
+    const value = timeInputElement.value;
+    const isAllowedTime = parseInt(value) <= LIMIT_TIME_VALUE;
+    return isAllowedTime ? value : null;
+  };
+  timeInputElement.valueSetter = (value) => {
+    const isAllowedTime = parseInt(value) <= LIMIT_TIME_VALUE;
+    if (!isAllowedTime)
+      return timeInputElement.value = null;
+    return timeInputElement.value = value;
+  };
+  return timeInputElement;
+};
+export const buildDateTime = ({ readOnly }) => {
+  const dateTimeInput = HTMLBuilder.parseElement(`<ez-date-time-input
+        class="ez-grid grid_editor"
+        mode="slim"
+        enabled=${!readOnly}
+        data-is-fixed="true"
+    />`);
+  dateTimeInput.valueGetter = () => dateTimeInput.getValueAsync();
+  return dateTimeInput;
+};

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/NumberInput.tpl.js

@@ -0,0 +1,20 @@
+import { HTMLBuilder } from "@sankhyalabs/core";
+export const buildDecimal = ({ readOnly, props }) => {
+  const precision = Number((props === null || props === void 0 ? void 0 : props.precision) || 2);
+  const prettyPrecision = Number((props === null || props === void 0 ? void 0 : props.prettyPrecision) || precision);
+  return buildNumeric(readOnly, precision, prettyPrecision);
+};
+export const buildInteger = ({ readOnly }) => {
+  return buildNumeric(readOnly, 0, 0);
+};
+function buildNumeric(readOnly, precision, prettyPrecision) {
+  const input = HTMLBuilder.parseElement(`<ez-number-input
+        class="ez-grid grid_editor"
+        enabled=${!readOnly}
+        precision=${precision}
+        pretty-precision=${prettyPrecision}
+        mode="slim"
+    />`);
+  input.valueGetter = () => input.getValueAsync();
+  return input;
+}

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/Search.tpl.js

@@ -0,0 +1,15 @@
+import { ApplicationContext, HTMLBuilder } from '@sankhyalabs/core';
+import { getViewPortHeight } from '../GridEditorUtils';
+export const buildSearch = ({ name, required, readOnly, eGridCell, dataUnit }) => {
+  const ezSearch = HTMLBuilder.parseElement(`<ez-search
+          class="ez-grid grid_editor"
+          mode="slim"
+          suppress-empty-option=${required}
+          enabled=${!readOnly}
+    />`);
+  const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
+  ezSearch.optionLoader = (argument) => loader(argument, name, dataUnit);
+  ezSearch.listOptionsPosition = { verticalPosition: 29, bottomLimit: getViewPortHeight(eGridCell), hardPosition: true };
+  ezSearch.valueGetter = () => ezSearch.getValueAsync();
+  return ezSearch;
+};

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/TextInput.tpl.js

@@ -0,0 +1,41 @@
+import { HTMLBuilder } from "@sankhyalabs/core";
+const MINIMIUM_WIDTH_TEXTAREA = 210;
+const PADDING_VALUE_TEXTAREA = 12;
+export const buildTextInput = ({ name, contextName }) => {
+  return HTMLBuilder.parseElement(`<ez-text-input
+        class="ez-grid grid_editor"
+        data-field-name=${name}
+        data-context-name=${contextName}
+        mode="slim"
+    />`);
+};
+export const buildTextAreaInput = ({ eGridCell, editionManager }) => {
+  const element = HTMLBuilder.parseElement(`<ez-text-area
+            can-show-error="false"
+            enable-resize="true"
+        />`);
+  element.addEventListener('keydown', event => handlePressEnterEvent(event, element, editionManager));
+  setElementInitialWidth(eGridCell, element);
+  element.isPopUp = true;
+  return element;
+};
+function setElementInitialWidth(eGridCell, element) {
+  const { width } = eGridCell.getBoundingClientRect();
+  const newValue = width > MINIMIUM_WIDTH_TEXTAREA ? width : MINIMIUM_WIDTH_TEXTAREA;
+  element.style.minWidth = `${newValue - PADDING_VALUE_TEXTAREA}px`;
+  element.style.resize = "both";
+}
+function handlePressEnterEvent(event, element, editionManager) {
+  if (isEnter(event)) {
+    const shouldBreakLine = event.ctrlKey;
+    if (shouldBreakLine) {
+      element.appendTextToSelection('\n');
+      event.preventDefault();
+      return;
+    }
+    editionManager.navigateByEnterKey(event);
+  }
+}
+function isEnter(event) {
+  return [event.key, event.code].includes('Enter');
+}

package/dist/collection/components/ez-grid/ez-grid.js

@@ -1,26 +1,22 @@
-import { ElementIDUtils, JSUtils, UserInterface, DateUtils, Action } from '@sankhyalabs/core';
+import { ElementIDUtils, JSUtils, } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
-import { Host, h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import AgGridController from './controller/ag-grid/AgGridController';
 import { SelectionCounter } from './subcomponents/selection-counter';
 import { ApplicationUtils } from '../../utils';
+import InMemoryFilterColumnDataSource from './utils/InMemoryFilterColumnDataSource';
 const windowInstace = window;
 export class EzGrid {
   constructor() {
     this._gridController = new AgGridController(false);
     this._messageFilterAppliedSuccess = 'Filtro de coluna aplicado com sucesso!';
-    this.onDataUnitAction = (action) => {
-      if (action.type === Action.DATA_SAVED || action.type === Action.RECORDS_REMOVED) {
-        this._originalRecords = this.dataUnit.records;
-      }
-    };
     this._paginationInfo = undefined;
     this._paginationChangedByKeyboard = true;
     this._showSelectionCounter = false;
     this._isAllSelection = false;
     this._currentPageSelected = undefined;
     this._selectionCount = undefined;
-    this._originalRecords = [];
+    this._hasLeftButtons = false;
     this.multipleSelection = undefined;
     this.config = undefined;
     this.selectionToastConfig = undefined;
@@ -28,6 +24,9 @@ export class EzGrid {
     this.dataUnit = undefined;
     this.statusResolver = undefined;
     this.columnfilterDataSource = undefined;
+    this.useEnterLikeTab = false;
+    this.recordsValidator = undefined;
+    this.canEdit = true;
   }
   /**
    * Aplica a definição de colunas.
@@ -261,6 +260,9 @@ export class EzGrid {
       serverURL: this.serverUrl,
       dataUnit: this.dataUnit,
       statusResolver: this.statusResolver,
+      useEnterLikeTab: this.useEnterLikeTab,
+      recordsValidator: this.recordsValidator,
+      editionIsDisabled: () => !this.canEdit
     });
     if (this.config) {
       this.observeConfig(this.config);
@@ -269,6 +271,11 @@ export class EzGrid {
     this.setEvents();
     this.componentReady.emit();
     this._gridController.configFilterColumn(this._filterColumn);
+    this._container.addEventListener('focusout', (event) => {
+      const api = this._gridController.getGridApi();
+      if (api && !this._container.contains(event.relatedTarget))
+        api.clearFocusedCell();
+    });
   }
   componentWillRender() {
     this.configSelectionCounter();
@@ -279,44 +286,20 @@ export class EzGrid {
     });
   }
   componentWillLoad() {
+    this._hasLeftButtons = !!this._element.querySelector('[slot="leftButtons"]');
     if (!this.dataUnit.name.includes("InMemoryDataUnit"))
       return;
-    this.dataUnit.subscribe(this.onDataUnitAction);
   }
   getDataSource() {
-    return this.columnfilterDataSource ? this.columnfilterDataSource : this.buildDefaultDataSource();
-  }
-  buildDefaultDataSource() {
-    var _a, _b;
-    if (this._originalRecords.length === 0) {
-      this._originalRecords = (_b = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.records) !== null && _b !== void 0 ? _b : [];
-    }
-    return {
-      fetchData: (filterTerm, fieldName) => {
-        return new Promise(resolve => {
-          const filteredRecords = this._originalRecords.filter(record => {
-            var _a, _b;
-            const label = typeof record[fieldName] === "object" ? `${(_a = record[fieldName]) === null || _a === void 0 ? void 0 : _a.value} - ${(_b = record[fieldName]) === null || _b === void 0 ? void 0 : _b.label}` : record[fieldName];
-            return label === null || label === void 0 ? void 0 : label.toString().toLowerCase().includes(filterTerm.toLowerCase());
-          });
-          const options = filteredRecords.map(item => {
-            return { value: item[fieldName].toString(), label: this.formatLabel(fieldName, item[fieldName]), check: true };
-          });
-          resolve(options);
-        });
-      }
-    };
+    var _a;
+    return (_a = this.columnfilterDataSource) !== null && _a !== void 0 ? _a : new InMemoryFilterColumnDataSource(this.dataUnit);
   }
-  formatLabel(fieldName, value) {
-    const { userInterface } = this.dataUnit.getField(fieldName);
-    if (userInterface === UserInterface.DATETIME) {
-      return DateUtils.formatDate(this.dataUnit.valueFromString(fieldName, value));
-    }
-    return String(this.dataUnit.getFormattedValue(fieldName, value));
+  hideHeader() {
+    return (!!this._element.getAttribute("no-header") && !this._paginationInfo);
   }
   render() {
     var _a;
-    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: !!this._element.getAttribute("no-header"), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter
+    return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("filter-column", { class: "grid-header__popover", noHeaderTaskBar: !this._hasLeftButtons, dataSource: this.getDataSource(), dataUnit: this.dataUnit, gridHeaderHidden: this.hideHeader(), ref: (element) => (this._filterColumn = element) }), h("div", { class: "grid-header__position" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => (this._refPaginationControl = ref) }, this.getPaginationControl()))), h("div", { ref: (ref) => (this._gridSelectionCounter = ref), class: `grid__selection-counter
           ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
         ` }, h(SelectionCounter, { selectionCount: this._selectionCount, currentPageSelected: this._currentPageSelected, paginationInfo: this._paginationInfo, canSelectAll: (_a = this.selectionToastConfig) === null || _a === void 0 ? void 0 : _a.canSelectAll, allRecordSelected: this._isAllSelection, onSelectAll: () => this.onSelectAllRecords(), onSelectPage: () => this.onSelectPageRecords(), onClearAll: () => this.onClearSelectedRecords(), onClose: () => (this._showSelectionCounter = false) })), h("div", { class: "grid__container ez-grid", ref: elem => (this._container = elem) }), h("div", { class: "grid__footer" }, h("slot", { name: "footer" }))));
   }
@@ -472,6 +455,62 @@ export class EzGrid {
           "tags": [],
           "text": "Define um `IMultiSelectionListDataSource` respons\u00E1vel por alimentar o filtro de colunas."
         }
+      },
+      "useEnterLikeTab": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Quando verdadeiro, o ENTER far\u00E1 a navega\u00E7\u00E3o como se fosse a tecla TAB na grade."
+        },
+        "attribute": "use-enter-like-tab",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "recordsValidator": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IRecordValidator",
+          "resolved": "IRecordValidator",
+          "references": {
+            "IRecordValidator": {
+              "location": "import",
+              "path": "../../utils/form/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define um validador respons\u00E1vel pela integridade dos registros."
+        }
+      },
+      "canEdit": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se a edi\u00E7\u00E3o est\u00E1 habilitada na grid."
+        },
+        "attribute": "can-edit",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }
@@ -483,7 +522,7 @@ export class EzGrid {
       "_isAllSelection": {},
       "_currentPageSelected": {},
       "_selectionCount": {},
-      "_originalRecords": {}
+      "_hasLeftButtons": {}
     };
   }
   static get events() {

package/dist/collection/components/ez-grid/subcomponents/filter-column.js

@@ -8,19 +8,23 @@ const onSubmitFilter = new CustomEvent('onSubmitFilter', {
 });
 export class FilterColumn {
   constructor() {
-    this.TOP_POSITION = '65px';
+    this.TOP_POSITION = '65';
     this.TOP_POSITION_HEADER_HIDDEN = '18';
+    this.TOP_POSITION_NO_TASKBAR = '32';
+    this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN = '20';
     this.DEFAULT_HEIGHT = 430;
     this.opened = true;
     this.columnName = undefined;
     this.columnLabel = undefined;
     this.gridHeaderHidden = false;
+    this.noHeaderTaskBar = false;
     this.dataSource = undefined;
     this.dataUnit = undefined;
     this.options = undefined;
     this.selectedItems = undefined;
     this.fieldDescriptor = undefined;
     this.useOptions = false;
+    this.isTextSearch = false;
   }
   async hide() {
     await this.ezPopoverElement.hide();
@@ -34,26 +38,45 @@ export class FilterColumn {
     if (this.canShow(configs)) {
       await this.hide();
       this.fieldDescriptor = this.dataUnit.getField(configs.columnName);
+      this.buildIsTextSearch();
       this.setOptions(configs.filteredOptions);
       this.columnName = configs.columnName;
       this.columnLabel = configs.columnLabel;
-      await this.ezPopoverElement.show(this.calcTopPosition(), configs.leftPosition);
+      await this.ezPopoverElement.show(this.calcTopPosition(), this.calculateLeftPosition(configs));
     }
   }
+  calculateLeftPosition(configs) {
+    if (!configs.fromIcon) {
+      return configs.leftPosition;
+    }
+    const difference = this.ezPopoverElement.getBoundingClientRect().left;
+    const leftReference = parseInt(configs.leftPosition.replace('px', ''));
+    const leftResolved = (leftReference + 16) - difference;
+    return `${(leftResolved > 0 ? leftResolved : 0)}px`;
+  }
+  buildIsTextSearch() {
+    var _a, _b;
+    const userInterface = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) !== null && _b !== void 0 ? _b : UserInterface.SHORTTEXT;
+    this.isTextSearch = !(userInterface === UserInterface.DECIMALNUMBER || userInterface === UserInterface.INTEGERNUMBER);
+  }
   calcTopPosition() {
-    const referencePosition = this.gridHeaderHidden
-      ? this.TOP_POSITION_HEADER_HIDDEN
-      : this.TOP_POSITION.replace('px', '');
+    const referencePosition = this.buildReferenceTopPosition();
     const totalPopoverHeight = parseInt(referencePosition) + this.DEFAULT_HEIGHT;
     const popoverPosition = Math.round(this.ezPopoverElement.getBoundingClientRect().top);
     const popoverBottomPosition = popoverPosition + totalPopoverHeight;
     const windowHeight = window.innerHeight;
     if (windowHeight > popoverBottomPosition) {
-      return referencePosition;
+      return `${referencePosition}px`;
     }
     const differenceBetween = windowHeight - popoverBottomPosition;
     return `${differenceBetween}px`;
   }
+  buildReferenceTopPosition() {
+    if (this.noHeaderTaskBar) {
+      return this.gridHeaderHidden ? this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN : this.TOP_POSITION_NO_TASKBAR;
+    }
+    return this.gridHeaderHidden ? this.TOP_POSITION_HEADER_HIDDEN : this.TOP_POSITION;
+  }
   async clearConfigs() {
     var _a;
     await ((_a = this.ezMultiSelectionList) === null || _a === void 0 ? void 0 : _a.clearFilteredOptions());
@@ -111,7 +134,7 @@ export class FilterColumn {
     }
   }
   render() {
-    return (h("ez-popover", { class: 'filter-column__popover', "overlay-type": 'none', ref: (element) => (this.ezPopoverElement = element), autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: 'filter-column' }, h("header", { class: 'filter-column__header' }, h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, "Filtro da coluna ", this.columnLabel), h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), h("ez-multi-selection-list", { columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail) }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: 'Aplicar', class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
+    return (h("ez-popover", { class: 'filter-column__popover', "overlay-type": 'none', ref: (element) => (this.ezPopoverElement = element), autoClose: true, onEzVisibilityChange: this.handleEzVisibilityChange.bind(this) }, h("section", { class: 'filter-column' }, h("header", { class: 'filter-column__header' }, h("span", { class: 'ez-text ez-text--medium filter-column__header-title' }, "Filtro da coluna ", this.columnLabel), h("ez-button", { mode: 'icon', "icon-name": 'close', class: 'ez-button--tertiary', onClick: () => this.hide() })), h("ez-multi-selection-list", { columnName: this.columnName, dataSource: this.dataSource, options: this.options, useOptions: this.useOptions, ref: (element) => (this.ezMultiSelectionList = element), onChangeFilteredOptions: (event) => this.changeSelectedItems(event.detail), isTextSearch: this.isTextSearch }), h("footer", { class: 'filter-column__footer' }, h("ez-button", { label: 'Aplicar', class: 'ez-button--primary', onClick: this.submit.bind(this) })))));
   }
   static get is() { return "filter-column"; }
   static get originalStyleUrls() {
@@ -196,6 +219,24 @@ export class FilterColumn {
         "reflect": false,
         "defaultValue": "false"
       },
+      "noHeaderTaskBar": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-header-task-bar",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "dataSource": {
         "type": "unknown",
         "mutable": false,
@@ -262,7 +303,8 @@ export class FilterColumn {
     return {
       "selectedItems": {},
       "fieldDescriptor": {},
-      "useOptions": {}
+      "useOptions": {},
+      "isTextSearch": {}
     };
   }
   static get events() {

package/dist/collection/components/ez-grid/utils/InMemoryFilterColumnDataSource.js

@@ -0,0 +1,78 @@
+import { Action, DataType, DateUtils, UserInterface } from '@sankhyalabs/core';
+export default class InMemoryFilterColumnDataSource {
+  constructor(dataUnit) {
+    var _a;
+    this.onDataUnitAction = (action) => {
+      if (action.type === Action.DATA_SAVED || action.type === Action.RECORDS_REMOVED) {
+        this.originalRecords = this.dataUnit.records;
+      }
+    };
+    this.dataUnit = dataUnit;
+    this.originalRecords = (_a = this.dataUnit.records) !== null && _a !== void 0 ? _a : [];
+    this.dataUnit.subscribe(this.onDataUnitAction);
+  }
+  fetchData(filterTerm, fieldName) {
+    return new Promise(resolve => {
+      const filteredRecords = this.originalRecords.filter(record => this.includesSearchTerm(record, fieldName, filterTerm));
+      const options = filteredRecords.map(item => this.buildFieldOption(item, fieldName));
+      resolve(this.removeDuplicatedOptions(options));
+    });
+  }
+  buildFieldOption(item, fieldName) {
+    return {
+      value: this.buildValue(item, fieldName),
+      label: this.formatLabel(fieldName, item[fieldName]),
+      check: true,
+    };
+  }
+  buildValue(item, fieldName) {
+    var _a;
+    let value = item[fieldName];
+    if (((_a = this.dataUnit.getField(fieldName)) === null || _a === void 0 ? void 0 : _a.dataType) === DataType.OBJECT) {
+      value = value.value;
+    }
+    return value === null || value === void 0 ? void 0 : value.toString();
+  }
+  removeDuplicatedOptions(options) {
+    const noDuplicatedOptions = [];
+    options.forEach(option => {
+      if (!noDuplicatedOptions.find(({ label }) => label === option.label)) {
+        noDuplicatedOptions.push(option);
+      }
+    });
+    return noDuplicatedOptions;
+  }
+  includesSearchTerm(record, fieldName, filterTerm) {
+    let label = this.buildLabel(fieldName, record[fieldName]);
+    return label.toLowerCase().includes(filterTerm.toLowerCase());
+  }
+  buildLabel(fieldName, value) {
+    var _a;
+    const { dataType } = this.dataUnit.getField(fieldName);
+    if (dataType === DataType.NUMBER) {
+      return value === null || value === void 0 ? void 0 : value.toString().replace('.', ',');
+    }
+    if (dataType === DataType.DATE) {
+      return (typeof value === 'object')
+        ? (_a = DateUtils.formatDate(this.dataUnit.valueFromString(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString()
+        : value === null || value === void 0 ? void 0 : value.toString();
+    }
+    if (dataType === DataType.OBJECT) {
+      return `${value === null || value === void 0 ? void 0 : value.value} - ${value === null || value === void 0 ? void 0 : value.label}`;
+    }
+    return value === null || value === void 0 ? void 0 : value.toString();
+  }
+  formatLabel(fieldName, value) {
+    var _a, _b;
+    const { userInterface, dataType } = this.dataUnit.getField(fieldName);
+    if (dataType === DataType.DATE) {
+      return (typeof value === 'object')
+        ? DateUtils.formatDate(this.dataUnit.valueFromString(fieldName, value))
+        : value === null || value === void 0 ? void 0 : value.toString();
+    }
+    if (dataType === DataType.NUMBER && userInterface !== UserInterface.DECIMALNUMBER) {
+      return (_a = parseInt(this.dataUnit.getFormattedValue(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString();
+    }
+    return (_b = this.dataUnit.getFormattedValue(fieldName, value)) === null || _b === void 0 ? void 0 : _b.toString();
+  }
+}

package/dist/collection/components/ez-multi-selection-list/ez-multi-selection-list.js

@@ -14,6 +14,7 @@ export class EzMuiltiSelectionList {
     this.dataSource = undefined;
     this.useOptions = false;
     this.options = undefined;
+    this.isTextSearch = false;
     this.filteredOptions = undefined;
     this.displayOptions = undefined;
     this.viewScenario = undefined;
@@ -96,6 +97,7 @@ export class EzMuiltiSelectionList {
       this.filteredOptions = this.ordenationByCheckStateAndAlphabetically([...optionsToSort, event.detail]);
     }
     this.viewScenario = ViewScenarios.DATASOURCE_RESULTS;
+    this.searchInput.value = "";
   }
   handleRemoveItemFromOptions(item) {
     this.filteredOptions = this.ordenationByCheckStateAndAlphabetically(this.filteredOptions.filter(i => i.value !== item.value));
@@ -159,7 +161,7 @@ export class EzMuiltiSelectionList {
     return scenarios[view];
   }
   render() {
-    return (h(Host, null, h("div", { class: "multi-selection" }, this.useOptions ? (h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: `Buscar..`, onEzChange: this.handleSearchOnOption.bind(this) })) : (h("ez-search", { class: "multi-selection__input", label: `Buscar...`, ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this) })), h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
+    return (h(Host, null, h("div", { class: "multi-selection" }, this.useOptions ? (h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: `Buscar..`, onEzChange: this.handleSearchOnOption.bind(this) })) : (h("ez-search", { class: "multi-selection__input", label: `Buscar...`, ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this), isTextSearch: this.isTextSearch })), h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
   }
   static get is() { return "ez-multi-selection-list"; }
   static get encapsulation() { return "scoped"; }
@@ -249,6 +251,24 @@ export class EzMuiltiSelectionList {
           "tags": [],
           "text": "Op\u00E7\u00F5es de filtros a serem exibidas na listagem."
         }
+      },
+      "isTextSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Informa se a pesquisa \u00E9 do tipo texto."
+        },
+        "attribute": "is-text-search",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }