@sankhyalabs/ezui 5.11.0-dev.4 → 5.11.0-dev.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/cjs/ez-combo-box.cjs.entry.js +8 -2
  2. package/dist/cjs/ez-form-view.cjs.entry.js +37 -1
  3. package/dist/cjs/ez-form.cjs.entry.js +1 -0
  4. package/dist/cjs/ez-grid.cjs.entry.js +87 -38
  5. package/dist/cjs/ez-multi-selection-list.cjs.entry.js +3 -1
  6. package/dist/cjs/ez-search.cjs.entry.js +2 -1
  7. package/dist/cjs/ezui.cjs.js +1 -1
  8. package/dist/cjs/filter-column.cjs.entry.js +30 -7
  9. package/dist/cjs/loader.cjs.js +1 -1
  10. package/dist/collection/components/ez-combo-box/ez-combo-box.js +26 -2
  11. package/dist/collection/components/ez-form/ez-form.js +20 -0
  12. package/dist/collection/components/ez-form-view/ez-form-view.js +23 -0
  13. package/dist/collection/components/ez-form-view/fieldbuilder/FieldBuilder.js +4 -1
  14. package/dist/collection/components/ez-form-view/structure/index.js +29 -0
  15. package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +1 -1
  16. package/dist/collection/components/ez-grid/controller/ag-grid/components/EzGridCustomHeader.js +1 -1
  17. package/dist/collection/components/ez-grid/ez-grid.js +11 -39
  18. package/dist/collection/components/ez-grid/subcomponents/filter-column.js +50 -8
  19. package/dist/collection/components/ez-grid/utils/InMemoryFilterColumnDataSource.js +78 -0
  20. package/dist/collection/components/ez-multi-selection-list/ez-multi-selection-list.js +21 -1
  21. package/dist/collection/components/ez-search/ez-search.js +20 -1
  22. package/dist/custom-elements/index.js +173 -55
  23. package/dist/esm/ez-combo-box.entry.js +8 -2
  24. package/dist/esm/ez-form-view.entry.js +37 -1
  25. package/dist/esm/ez-form.entry.js +1 -0
  26. package/dist/esm/ez-grid.entry.js +88 -39
  27. package/dist/esm/ez-multi-selection-list.entry.js +3 -1
  28. package/dist/esm/ez-search.entry.js +2 -1
  29. package/dist/esm/ezui.js +1 -1
  30. package/dist/esm/filter-column.entry.js +30 -7
  31. package/dist/esm/loader.js +1 -1
  32. package/dist/ezui/ezui.esm.js +1 -1
  33. package/dist/ezui/p-061f4d73.entry.js +1 -0
  34. package/dist/ezui/p-25562cf8.entry.js +1 -0
  35. package/dist/ezui/p-5e55a42b.entry.js +1 -0
  36. package/dist/ezui/{p-9f41b414.entry.js → p-6ab2f7c2.entry.js} +1 -1
  37. package/dist/ezui/p-7526f2b6.entry.js +1 -0
  38. package/dist/ezui/p-8fdff9cd.entry.js +1 -0
  39. package/dist/ezui/{p-fd54b5b4.entry.js → p-964e5571.entry.js} +2 -2
  40. package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +5 -0
  41. package/dist/types/components/ez-form/ez-form.d.ts +5 -0
  42. package/dist/types/components/ez-form-view/ez-form-view.d.ts +5 -0
  43. package/dist/types/components/ez-form-view/structure/index.d.ts +14 -0
  44. package/dist/types/components/ez-grid/controller/ag-grid/components/EzGridCustomHeader.d.ts +1 -1
  45. package/dist/types/components/ez-grid/ez-grid.d.ts +3 -5
  46. package/dist/types/components/ez-grid/subcomponents/filter-column.d.ts +8 -0
  47. package/dist/types/components/ez-grid/utils/InMemoryFilterColumnDataSource.d.ts +16 -0
  48. package/dist/types/components/ez-multi-selection-list/ez-multi-selection-list.d.ts +4 -0
  49. package/dist/types/components/ez-search/ez-search.d.ts +4 -0
  50. package/dist/types/components.d.ts +35 -0
  51. package/package.json +1 -1
  52. package/dist/ezui/p-2a0e1679.entry.js +0 -1
  53. package/dist/ezui/p-411f3579.entry.js +0 -1
  54. package/dist/ezui/p-4c8b029b.entry.js +0 -1
  55. package/dist/ezui/p-4e31b69b.entry.js +0 -1
  56. package/dist/ezui/p-5a1d8bf8.entry.js +0 -1
@@ -32,6 +32,7 @@ export class EzComboBox {
32
32
  this.mode = "regular";
33
33
  this.hideErrorOnFocusOut = true;
34
34
  this.listOptionsPosition = undefined;
35
+ this.isTextSearch = false;
35
36
  }
36
37
  observeErrorMessage() {
37
38
  var _a;
@@ -354,7 +355,6 @@ export class EzComboBox {
354
355
  this._visibleOptions = [];
355
356
  this.clearSource();
356
357
  }
357
- this.setFocus();
358
358
  }
359
359
  loadOptions(mode, argument = "") {
360
360
  this._criteria = argument;
@@ -539,6 +539,12 @@ export class EzComboBox {
539
539
  handlerIconClick() {
540
540
  this.searchMode ? this.loadOptions(SearchMode.ADVANCED) : this.showOptions();
541
541
  }
542
+ buildNumberArgument(argument) {
543
+ if (this.isTextSearch) {
544
+ return NaN;
545
+ }
546
+ return Number(argument || undefined);
547
+ }
542
548
  onTextInputChangeHandler(event) {
543
549
  var _a;
544
550
  this.clearDeboucingTimeout();
@@ -549,7 +555,7 @@ export class EzComboBox {
549
555
  return;
550
556
  }
551
557
  const argument = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
552
- const argumentNumber = Number(argument || undefined);
558
+ const argumentNumber = this.buildNumberArgument(argument);
553
559
  if (!this._criteria) {
554
560
  this._textInput.value = event.data || argument;
555
561
  }
@@ -952,6 +958,24 @@ export class EzComboBox {
952
958
  "tags": [],
953
959
  "text": "Define um posicionamento fixo para a lista de op\u00E7\u00F5es do CheckBox."
954
960
  }
961
+ },
962
+ "isTextSearch": {
963
+ "type": "boolean",
964
+ "mutable": false,
965
+ "complexType": {
966
+ "original": "boolean",
967
+ "resolved": "boolean",
968
+ "references": {}
969
+ },
970
+ "required": false,
971
+ "optional": false,
972
+ "docs": {
973
+ "tags": [],
974
+ "text": "Informa se a pesquisa \u00E9 do tipo texto."
975
+ },
976
+ "attribute": "is-text-search",
977
+ "reflect": false,
978
+ "defaultValue": "false"
955
979
  }
956
980
  };
957
981
  }
@@ -185,6 +185,26 @@ export class EzForm {
185
185
  "resolved": "void",
186
186
  "references": {}
187
187
  }
188
+ }, {
189
+ "method": "formItemsReady",
190
+ "name": "formItemsReady",
191
+ "bubbles": true,
192
+ "cancelable": true,
193
+ "composed": true,
194
+ "docs": {
195
+ "tags": [],
196
+ "text": "Respons\u00E1vel por notificar quando ocorrer a renderiza\u00E7\u00E3o de itens do formul\u00E1rio."
197
+ },
198
+ "complexType": {
199
+ "original": "FormItems",
200
+ "resolved": "FormItems",
201
+ "references": {
202
+ "FormItems": {
203
+ "location": "import",
204
+ "path": "../ez-form-view/structure"
205
+ }
206
+ }
207
+ }
188
208
  }];
189
209
  }
190
210
  static get methods() {
@@ -1,6 +1,7 @@
1
1
  import { Host, h } from '@stencil/core';
2
2
  import { fieldBuilder } from './fieldbuilder/FieldBuilder';
3
3
  import { ElementIDUtils } from '@sankhyalabs/core';
4
+ import { FormItems } from './structure';
4
5
  export class EzFormView {
5
6
  constructor() {
6
7
  this.fields = undefined;
@@ -28,6 +29,8 @@ export class EzFormView {
28
29
  }
29
30
  componentDidRender() {
30
31
  this.ezContentReady.emit(Array.from(this._element.querySelectorAll("[data-field-name]")));
32
+ const formItems = new FormItems(Array.from(this._element.querySelectorAll("[data-form-item]")));
33
+ this.formItemsReady.emit(formItems);
31
34
  }
32
35
  render() {
33
36
  ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFormView');
@@ -105,6 +108,26 @@ export class EzFormView {
105
108
  }
106
109
  }
107
110
  }
111
+ }, {
112
+ "method": "formItemsReady",
113
+ "name": "formItemsReady",
114
+ "bubbles": true,
115
+ "cancelable": true,
116
+ "composed": true,
117
+ "docs": {
118
+ "tags": [],
119
+ "text": "Respons\u00E1vel por notificar quando ocorrer a renderiza\u00E7\u00E3o de itens do formul\u00E1rio."
120
+ },
121
+ "complexType": {
122
+ "original": "FormItems",
123
+ "resolved": "FormItems",
124
+ "references": {
125
+ "FormItems": {
126
+ "location": "import",
127
+ "path": "./structure"
128
+ }
129
+ }
130
+ }
108
131
  }];
109
132
  }
110
133
  static get methods() {
@@ -23,5 +23,8 @@ uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
23
23
  export const fieldBuilder = (field) => {
24
24
  const builder = uiBuilders.get(field.userInterface) || buildTextInput;
25
25
  const label = field.required ? `${field.label}${REQUIRED_INFO}` : field.label;
26
- return builder(Object.assign(Object.assign({}, field), { label }));
26
+ const builtElement = builder(Object.assign(Object.assign({}, field), { label }));
27
+ //@ts-ignore
28
+ builtElement.$attrs$['data-form-item'] = field.name;
29
+ return builtElement;
27
30
  };
@@ -0,0 +1,29 @@
1
+ class FormItem {
2
+ constructor(elem) {
3
+ this.elem = elem;
4
+ }
5
+ addRightElement(el) {
6
+ el.classList.add('ez-padding-left--small');
7
+ this.elem.classList.add('ez-col--nowrap');
8
+ this.elem.appendChild(el);
9
+ }
10
+ get fieldName() {
11
+ return this.elem.getAttribute('data-form-item');
12
+ }
13
+ }
14
+ export class FormItems {
15
+ constructor(items, formId) {
16
+ this.items = new Map();
17
+ this.formId = formId;
18
+ items.forEach(item => {
19
+ const formItem = new FormItem(item);
20
+ this.items.set(formItem.fieldName, formItem);
21
+ });
22
+ }
23
+ getItem(name) {
24
+ return this.items.get(name);
25
+ }
26
+ get formName() {
27
+ return this.formId;
28
+ }
29
+ }
@@ -603,7 +603,7 @@ export default class AgGridController {
603
603
  tooltip: tooltip,
604
604
  isSortable: propSortable,
605
605
  hasFilter: () => this.hasFilterColumn(source.name),
606
- showColumnFilter: (leftPosition) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name) }),
606
+ showColumnFilter: (leftPosition, fromIcon) => this.showFilterColumn({ columnName: source.name, columnLabel: source.label, leftPosition, filteredOptions: this._filteredColumns.get(source.name), fromIcon }),
607
607
  },
608
608
  valueFormatter: params => {
609
609
  if (params.value == undefined) {
@@ -36,7 +36,7 @@ export class EzGridCustomHeader {
36
36
  onClickFilter() {
37
37
  var _a;
38
38
  const iconLeft = (_a = this.filterButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
39
- this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`);
39
+ this.params.showColumnFilter(`${calcFilterColumnLeftPosition(iconLeft)}px`, true);
40
40
  }
41
41
  configSortIcon() {
42
42
  this.sortDownIcon.style.display = this.params.column.isSortDescending() ? 'flex' : 'none';
@@ -1,26 +1,22 @@
1
- import { ElementIDUtils, JSUtils, UserInterface, DateUtils, Action } from '@sankhyalabs/core';
1
+ import { ElementIDUtils, JSUtils, } from '@sankhyalabs/core';
2
2
  import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
3
- import { Host, h } from '@stencil/core';
3
+ import { h, Host } from '@stencil/core';
4
4
  import AgGridController from './controller/ag-grid/AgGridController';
5
5
  import { SelectionCounter } from './subcomponents/selection-counter';
6
6
  import { ApplicationUtils } from '../../utils';
7
+ import InMemoryFilterColumnDataSource from './utils/InMemoryFilterColumnDataSource';
7
8
  const windowInstace = window;
8
9
  export class EzGrid {
9
10
  constructor() {
10
11
  this._gridController = new AgGridController(false);
11
12
  this._messageFilterAppliedSuccess = 'Filtro de coluna aplicado com sucesso!';
12
- this.onDataUnitAction = (action) => {
13
- if (action.type === Action.DATA_SAVED || action.type === Action.RECORDS_REMOVED) {
14
- this._originalRecords = this.dataUnit.records;
15
- }
16
- };
17
13
  this._paginationInfo = undefined;
18
14
  this._paginationChangedByKeyboard = true;
19
15
  this._showSelectionCounter = false;
20
16
  this._isAllSelection = false;
21
17
  this._currentPageSelected = undefined;
22
18
  this._selectionCount = undefined;
23
- this._originalRecords = [];
19
+ this._hasLeftButtons = false;
24
20
  this.multipleSelection = undefined;
25
21
  this.config = undefined;
26
22
  this.selectionToastConfig = undefined;
@@ -290,44 +286,20 @@ export class EzGrid {
290
286
  });
291
287
  }
292
288
  componentWillLoad() {
289
+ this._hasLeftButtons = !!this._element.querySelector('[slot="leftButtons"]');
293
290
  if (!this.dataUnit.name.includes("InMemoryDataUnit"))
294
291
  return;
295
- this.dataUnit.subscribe(this.onDataUnitAction);
296
292
  }
297
293
  getDataSource() {
298
- return this.columnfilterDataSource ? this.columnfilterDataSource : this.buildDefaultDataSource();
299
- }
300
- buildDefaultDataSource() {
301
- var _a, _b;
302
- if (this._originalRecords.length === 0) {
303
- this._originalRecords = (_b = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.records) !== null && _b !== void 0 ? _b : [];
304
- }
305
- return {
306
- fetchData: (filterTerm, fieldName) => {
307
- return new Promise(resolve => {
308
- const filteredRecords = this._originalRecords.filter(record => {
309
- var _a, _b;
310
- 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];
311
- return label === null || label === void 0 ? void 0 : label.toString().toLowerCase().includes(filterTerm.toLowerCase());
312
- });
313
- const options = filteredRecords.map(item => {
314
- return { value: item[fieldName].toString(), label: this.formatLabel(fieldName, item[fieldName]), check: true };
315
- });
316
- resolve(options);
317
- });
318
- }
319
- };
294
+ var _a;
295
+ return (_a = this.columnfilterDataSource) !== null && _a !== void 0 ? _a : new InMemoryFilterColumnDataSource(this.dataUnit);
320
296
  }
321
- formatLabel(fieldName, value) {
322
- const { userInterface } = this.dataUnit.getField(fieldName);
323
- if (userInterface === UserInterface.DATETIME) {
324
- return DateUtils.formatDate(this.dataUnit.valueFromString(fieldName, value));
325
- }
326
- return String(this.dataUnit.getFormattedValue(fieldName, value));
297
+ hideHeader() {
298
+ return (!!this._element.getAttribute("no-header") && !this._paginationInfo);
327
299
  }
328
300
  render() {
329
301
  var _a;
330
- 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
302
+ 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
331
303
  ${this._showSelectionCounter ? 'grid__selection-counter--opened' : ''}
332
304
  ` }, 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" }))));
333
305
  }
@@ -550,7 +522,7 @@ export class EzGrid {
550
522
  "_isAllSelection": {},
551
523
  "_currentPageSelected": {},
552
524
  "_selectionCount": {},
553
- "_originalRecords": {}
525
+ "_hasLeftButtons": {}
554
526
  };
555
527
  }
556
528
  static get events() {
@@ -8,19 +8,23 @@ const onSubmitFilter = new CustomEvent('onSubmitFilter', {
8
8
  });
9
9
  export class FilterColumn {
10
10
  constructor() {
11
- this.TOP_POSITION = '65px';
11
+ this.TOP_POSITION = '65';
12
12
  this.TOP_POSITION_HEADER_HIDDEN = '18';
13
+ this.TOP_POSITION_NO_TASKBAR = '32';
14
+ this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN = '20';
13
15
  this.DEFAULT_HEIGHT = 430;
14
16
  this.opened = true;
15
17
  this.columnName = undefined;
16
18
  this.columnLabel = undefined;
17
19
  this.gridHeaderHidden = false;
20
+ this.noHeaderTaskBar = false;
18
21
  this.dataSource = undefined;
19
22
  this.dataUnit = undefined;
20
23
  this.options = undefined;
21
24
  this.selectedItems = undefined;
22
25
  this.fieldDescriptor = undefined;
23
26
  this.useOptions = false;
27
+ this.isTextSearch = false;
24
28
  }
25
29
  async hide() {
26
30
  await this.ezPopoverElement.hide();
@@ -34,26 +38,45 @@ export class FilterColumn {
34
38
  if (this.canShow(configs)) {
35
39
  await this.hide();
36
40
  this.fieldDescriptor = this.dataUnit.getField(configs.columnName);
41
+ this.buildIsTextSearch();
37
42
  this.setOptions(configs.filteredOptions);
38
43
  this.columnName = configs.columnName;
39
44
  this.columnLabel = configs.columnLabel;
40
- await this.ezPopoverElement.show(this.calcTopPosition(), configs.leftPosition);
45
+ await this.ezPopoverElement.show(this.calcTopPosition(), this.calculateLeftPosition(configs));
41
46
  }
42
47
  }
48
+ calculateLeftPosition(configs) {
49
+ if (!configs.fromIcon) {
50
+ return configs.leftPosition;
51
+ }
52
+ const difference = this.ezPopoverElement.getBoundingClientRect().left;
53
+ const leftReference = parseInt(configs.leftPosition.replace('px', ''));
54
+ const leftResolved = (leftReference + 16) - difference;
55
+ return `${(leftResolved > 0 ? leftResolved : 0)}px`;
56
+ }
57
+ buildIsTextSearch() {
58
+ var _a, _b;
59
+ const userInterface = (_b = (_a = this.fieldDescriptor) === null || _a === void 0 ? void 0 : _a.userInterface) !== null && _b !== void 0 ? _b : UserInterface.SHORTTEXT;
60
+ this.isTextSearch = !(userInterface === UserInterface.DECIMALNUMBER || userInterface === UserInterface.INTEGERNUMBER);
61
+ }
43
62
  calcTopPosition() {
44
- const referencePosition = this.gridHeaderHidden
45
- ? this.TOP_POSITION_HEADER_HIDDEN
46
- : this.TOP_POSITION.replace('px', '');
63
+ const referencePosition = this.buildReferenceTopPosition();
47
64
  const totalPopoverHeight = parseInt(referencePosition) + this.DEFAULT_HEIGHT;
48
65
  const popoverPosition = Math.round(this.ezPopoverElement.getBoundingClientRect().top);
49
66
  const popoverBottomPosition = popoverPosition + totalPopoverHeight;
50
67
  const windowHeight = window.innerHeight;
51
68
  if (windowHeight > popoverBottomPosition) {
52
- return referencePosition;
69
+ return `${referencePosition}px`;
53
70
  }
54
71
  const differenceBetween = windowHeight - popoverBottomPosition;
55
72
  return `${differenceBetween}px`;
56
73
  }
74
+ buildReferenceTopPosition() {
75
+ if (this.noHeaderTaskBar) {
76
+ return this.gridHeaderHidden ? this.TOP_POSITION_NO_TASKBAR_HEADER_HIDDEN : this.TOP_POSITION_NO_TASKBAR;
77
+ }
78
+ return this.gridHeaderHidden ? this.TOP_POSITION_HEADER_HIDDEN : this.TOP_POSITION;
79
+ }
57
80
  async clearConfigs() {
58
81
  var _a;
59
82
  await ((_a = this.ezMultiSelectionList) === null || _a === void 0 ? void 0 : _a.clearFilteredOptions());
@@ -111,7 +134,7 @@ export class FilterColumn {
111
134
  }
112
135
  }
113
136
  render() {
114
- 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) })))));
137
+ 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) })))));
115
138
  }
116
139
  static get is() { return "filter-column"; }
117
140
  static get originalStyleUrls() {
@@ -196,6 +219,24 @@ export class FilterColumn {
196
219
  "reflect": false,
197
220
  "defaultValue": "false"
198
221
  },
222
+ "noHeaderTaskBar": {
223
+ "type": "boolean",
224
+ "mutable": true,
225
+ "complexType": {
226
+ "original": "boolean",
227
+ "resolved": "boolean",
228
+ "references": {}
229
+ },
230
+ "required": false,
231
+ "optional": false,
232
+ "docs": {
233
+ "tags": [],
234
+ "text": ""
235
+ },
236
+ "attribute": "no-header-task-bar",
237
+ "reflect": false,
238
+ "defaultValue": "false"
239
+ },
199
240
  "dataSource": {
200
241
  "type": "unknown",
201
242
  "mutable": false,
@@ -262,7 +303,8 @@ export class FilterColumn {
262
303
  return {
263
304
  "selectedItems": {},
264
305
  "fieldDescriptor": {},
265
- "useOptions": {}
306
+ "useOptions": {},
307
+ "isTextSearch": {}
266
308
  };
267
309
  }
268
310
  static get events() {
@@ -0,0 +1,78 @@
1
+ import { Action, DataType, DateUtils, UserInterface } from '@sankhyalabs/core';
2
+ export default class InMemoryFilterColumnDataSource {
3
+ constructor(dataUnit) {
4
+ var _a;
5
+ this.onDataUnitAction = (action) => {
6
+ if (action.type === Action.DATA_SAVED || action.type === Action.RECORDS_REMOVED) {
7
+ this.originalRecords = this.dataUnit.records;
8
+ }
9
+ };
10
+ this.dataUnit = dataUnit;
11
+ this.originalRecords = (_a = this.dataUnit.records) !== null && _a !== void 0 ? _a : [];
12
+ this.dataUnit.subscribe(this.onDataUnitAction);
13
+ }
14
+ fetchData(filterTerm, fieldName) {
15
+ return new Promise(resolve => {
16
+ const filteredRecords = this.originalRecords.filter(record => this.includesSearchTerm(record, fieldName, filterTerm));
17
+ const options = filteredRecords.map(item => this.buildFieldOption(item, fieldName));
18
+ resolve(this.removeDuplicatedOptions(options));
19
+ });
20
+ }
21
+ buildFieldOption(item, fieldName) {
22
+ return {
23
+ value: this.buildValue(item, fieldName),
24
+ label: this.formatLabel(fieldName, item[fieldName]),
25
+ check: true,
26
+ };
27
+ }
28
+ buildValue(item, fieldName) {
29
+ var _a;
30
+ let value = item[fieldName];
31
+ if (((_a = this.dataUnit.getField(fieldName)) === null || _a === void 0 ? void 0 : _a.dataType) === DataType.OBJECT) {
32
+ value = value.value;
33
+ }
34
+ return value === null || value === void 0 ? void 0 : value.toString();
35
+ }
36
+ removeDuplicatedOptions(options) {
37
+ const noDuplicatedOptions = [];
38
+ options.forEach(option => {
39
+ if (!noDuplicatedOptions.find(({ label }) => label === option.label)) {
40
+ noDuplicatedOptions.push(option);
41
+ }
42
+ });
43
+ return noDuplicatedOptions;
44
+ }
45
+ includesSearchTerm(record, fieldName, filterTerm) {
46
+ let label = this.buildLabel(fieldName, record[fieldName]);
47
+ return label.toLowerCase().includes(filterTerm.toLowerCase());
48
+ }
49
+ buildLabel(fieldName, value) {
50
+ var _a;
51
+ const { dataType } = this.dataUnit.getField(fieldName);
52
+ if (dataType === DataType.NUMBER) {
53
+ return value === null || value === void 0 ? void 0 : value.toString().replace('.', ',');
54
+ }
55
+ if (dataType === DataType.DATE) {
56
+ return (typeof value === 'object')
57
+ ? (_a = DateUtils.formatDate(this.dataUnit.valueFromString(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString()
58
+ : value === null || value === void 0 ? void 0 : value.toString();
59
+ }
60
+ if (dataType === DataType.OBJECT) {
61
+ return `${value === null || value === void 0 ? void 0 : value.value} - ${value === null || value === void 0 ? void 0 : value.label}`;
62
+ }
63
+ return value === null || value === void 0 ? void 0 : value.toString();
64
+ }
65
+ formatLabel(fieldName, value) {
66
+ var _a, _b;
67
+ const { userInterface, dataType } = this.dataUnit.getField(fieldName);
68
+ if (dataType === DataType.DATE) {
69
+ return (typeof value === 'object')
70
+ ? DateUtils.formatDate(this.dataUnit.valueFromString(fieldName, value))
71
+ : value === null || value === void 0 ? void 0 : value.toString();
72
+ }
73
+ if (dataType === DataType.NUMBER && userInterface !== UserInterface.DECIMALNUMBER) {
74
+ return (_a = parseInt(this.dataUnit.getFormattedValue(fieldName, value))) === null || _a === void 0 ? void 0 : _a.toString();
75
+ }
76
+ return (_b = this.dataUnit.getFormattedValue(fieldName, value)) === null || _b === void 0 ? void 0 : _b.toString();
77
+ }
78
+ }
@@ -14,6 +14,7 @@ export class EzMuiltiSelectionList {
14
14
  this.dataSource = undefined;
15
15
  this.useOptions = false;
16
16
  this.options = undefined;
17
+ this.isTextSearch = false;
17
18
  this.filteredOptions = undefined;
18
19
  this.displayOptions = undefined;
19
20
  this.viewScenario = undefined;
@@ -96,6 +97,7 @@ export class EzMuiltiSelectionList {
96
97
  this.filteredOptions = this.ordenationByCheckStateAndAlphabetically([...optionsToSort, event.detail]);
97
98
  }
98
99
  this.viewScenario = ViewScenarios.DATASOURCE_RESULTS;
100
+ this.searchInput.value = "";
99
101
  }
100
102
  handleRemoveItemFromOptions(item) {
101
103
  this.filteredOptions = this.ordenationByCheckStateAndAlphabetically(this.filteredOptions.filter(i => i.value !== item.value));
@@ -159,7 +161,7 @@ export class EzMuiltiSelectionList {
159
161
  return scenarios[view];
160
162
  }
161
163
  render() {
162
- 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)))));
164
+ 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)))));
163
165
  }
164
166
  static get is() { return "ez-multi-selection-list"; }
165
167
  static get encapsulation() { return "scoped"; }
@@ -249,6 +251,24 @@ export class EzMuiltiSelectionList {
249
251
  "tags": [],
250
252
  "text": "Op\u00E7\u00F5es de filtros a serem exibidas na listagem."
251
253
  }
254
+ },
255
+ "isTextSearch": {
256
+ "type": "boolean",
257
+ "mutable": false,
258
+ "complexType": {
259
+ "original": "boolean",
260
+ "resolved": "boolean",
261
+ "references": {}
262
+ },
263
+ "required": false,
264
+ "optional": false,
265
+ "docs": {
266
+ "tags": [],
267
+ "text": "Informa se a pesquisa \u00E9 do tipo texto."
268
+ },
269
+ "attribute": "is-text-search",
270
+ "reflect": false,
271
+ "defaultValue": "false"
252
272
  }
253
273
  };
254
274
  }
@@ -15,6 +15,7 @@ export class EzSearch {
15
15
  this.canShowError = true;
16
16
  this.hideErrorOnFocusOut = true;
17
17
  this.listOptionsPosition = undefined;
18
+ this.isTextSearch = false;
18
19
  }
19
20
  observeErrorMessage() {
20
21
  if (this._comboElement) {
@@ -72,7 +73,7 @@ export class EzSearch {
72
73
  }
73
74
  render() {
74
75
  ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
75
- 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 }));
76
+ 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 }));
76
77
  }
77
78
  ;
78
79
  static get is() { return "ez-search"; }
@@ -320,6 +321,24 @@ export class EzSearch {
320
321
  "tags": [],
321
322
  "text": "Define um posicionamento fixo para a lista de op\u00E7\u00F5es do CheckBox."
322
323
  }
324
+ },
325
+ "isTextSearch": {
326
+ "type": "boolean",
327
+ "mutable": false,
328
+ "complexType": {
329
+ "original": "boolean",
330
+ "resolved": "boolean",
331
+ "references": {}
332
+ },
333
+ "required": false,
334
+ "optional": false,
335
+ "docs": {
336
+ "tags": [],
337
+ "text": "Informa se a pesquisa \u00E9 do tipo texto."
338
+ },
339
+ "attribute": "is-text-search",
340
+ "reflect": false,
341
+ "defaultValue": "false"
323
342
  }
324
343
  };
325
344
  }