@sankhyalabs/ezui 5.11.0-dev.5 → 5.11.0-dev.7

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;
@@ -290,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" }))));
   }
@@ -550,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"
       }
     };
   }

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

@@ -15,6 +15,7 @@ export class EzSearch {
     this.canShowError = true;
     this.hideErrorOnFocusOut = true;
     this.listOptionsPosition = undefined;
+    this.isTextSearch = false;
   }
   observeErrorMessage() {
     if (this._comboElement) {
@@ -72,7 +73,7 @@ export class EzSearch {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, hideErrorOnFocusOut: this.hideErrorOnFocusOut, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode, canShowError: this.canShowError, listOptionsPosition: this.listOptionsPosition }));
+    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, hideErrorOnFocusOut: this.hideErrorOnFocusOut, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode, canShowError: this.canShowError, listOptionsPosition: this.listOptionsPosition, isTextSearch: this.isTextSearch }));
   }
   ;
   static get is() { return "ez-search"; }
@@ -320,6 +321,24 @@ export class EzSearch {
           "tags": [],
           "text": "Define um posicionamento fixo para a lista de op\u00E7\u00F5es do CheckBox."
         }
+      },
+      "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"
       }
     };
   }