@sankhyalabs/ezui 4.1.0 → 4.2.1

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 (45) hide show
  1. package/dist/cjs/{constants-5a75e2f3.js → constants-5d588e38.js} +2 -0
  2. package/dist/cjs/ez-check.cjs.entry.js +12 -1
  3. package/dist/cjs/ez-combo-box.cjs.entry.js +1 -1
  4. package/dist/cjs/ez-form-view.cjs.entry.js +1 -1
  5. package/dist/cjs/ez-form.cjs.entry.js +64 -36
  6. package/dist/cjs/ez-grid.cjs.entry.js +242 -110
  7. package/dist/cjs/ezui.cjs.js +1 -1
  8. package/dist/cjs/loader.cjs.js +1 -1
  9. package/dist/collection/components/ez-check/ez-check.js +14 -1
  10. package/dist/collection/components/ez-grid/controller/DataUnitBridge.js +15 -0
  11. package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +71 -14
  12. package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js +9 -1
  13. package/dist/collection/components/ez-grid/ez-grid.js +163 -94
  14. package/dist/collection/components/ez-grid/subcomponents/selection-counter.js +2 -2
  15. package/dist/collection/utils/constants.js +1 -0
  16. package/dist/collection/utils/form/DataBinder.js +47 -30
  17. package/dist/collection/utils/form/FormMetadata.js +17 -6
  18. package/dist/custom-elements/index.js +320 -149
  19. package/dist/esm/constants-76d2e931.js +4 -0
  20. package/dist/esm/ez-check.entry.js +12 -1
  21. package/dist/esm/ez-combo-box.entry.js +1 -1
  22. package/dist/esm/ez-form-view.entry.js +1 -1
  23. package/dist/esm/ez-form.entry.js +64 -36
  24. package/dist/esm/ez-grid.entry.js +242 -110
  25. package/dist/esm/ezui.js +1 -1
  26. package/dist/esm/loader.js +1 -1
  27. package/dist/ezui/ezui.esm.js +1 -1
  28. package/dist/ezui/p-1f841f3c.entry.js +1 -0
  29. package/dist/ezui/{p-50883460.entry.js → p-878646a0.entry.js} +1 -1
  30. package/dist/ezui/{p-468799e1.entry.js → p-96df1a0e.entry.js} +2 -2
  31. package/dist/ezui/p-a3ce3710.entry.js +1 -0
  32. package/dist/ezui/p-b01e3085.js +1 -0
  33. package/dist/ezui/{p-e748b5d3.entry.js → p-b7ea9791.entry.js} +1 -1
  34. package/dist/types/components/ez-check/ez-check.d.ts +1 -0
  35. package/dist/types/components/ez-grid/controller/EzGridController.d.ts +10 -2
  36. package/dist/types/components/ez-grid/controller/ag-grid/AgGridController.d.ts +5 -2
  37. package/dist/types/components/ez-grid/ez-grid.d.ts +20 -15
  38. package/dist/types/components/ez-grid/subcomponents/selection-counter.d.ts +2 -1
  39. package/dist/types/utils/constants.d.ts +1 -0
  40. package/dist/types/utils/form/DataBinder.d.ts +3 -2
  41. package/package.json +1 -1
  42. package/dist/esm/constants-ca136201.js +0 -3
  43. package/dist/ezui/p-08f4a048.entry.js +0 -1
  44. package/dist/ezui/p-3f4ae3a3.js +0 -1
  45. package/dist/ezui/p-a323b415.entry.js +0 -1
@@ -15,6 +15,16 @@ export class EzCheck {
15
15
  if (newValue != oldValue) {
16
16
  this._inputElem.checked = newValue;
17
17
  }
18
+ if (this._inputElem.indeterminate != this.indeterminate) {
19
+ this._inputElem.indeterminate = this.indeterminate;
20
+ }
21
+ }
22
+ observeIndeterminate(newValue, oldValue) {
23
+ if (!this._inputElem)
24
+ return;
25
+ if (newValue != oldValue) {
26
+ this._inputElem.indeterminate = newValue;
27
+ }
18
28
  }
19
29
  //---------------------------------------------
20
30
  // Public methods
@@ -125,7 +135,7 @@ export class EzCheck {
125
135
  },
126
136
  "indeterminate": {
127
137
  "type": "boolean",
128
- "mutable": false,
138
+ "mutable": true,
129
139
  "complexType": {
130
140
  "original": "boolean",
131
141
  "resolved": "boolean",
@@ -228,6 +238,9 @@ export class EzCheck {
228
238
  return [{
229
239
  "propName": "value",
230
240
  "methodName": "observeValue"
241
+ }, {
242
+ "propName": "indeterminate",
243
+ "methodName": "observeIndeterminate"
231
244
  }];
232
245
  }
233
246
  }
@@ -18,6 +18,21 @@ export default class DataUnitBridge {
18
18
  const { selection } = action.payload;
19
19
  this._gridController.selectRows(selection);
20
20
  break;
21
+ case Action.SELECTION_REMOVED:
22
+ const { unselection } = action.payload;
23
+ const filteredRecords = this._dataUnit.getSelection()
24
+ .filter((selectedRecord) => {
25
+ return !unselection.some((unselectedRecord) => {
26
+ return unselectedRecord.__record__id__ === selectedRecord.__record__id__;
27
+ });
28
+ });
29
+ if ((filteredRecords === null || filteredRecords === void 0 ? void 0 : filteredRecords.length) > 0) {
30
+ this._gridController.selectRows(filteredRecords);
31
+ }
32
+ else {
33
+ this._gridController.deselectAll();
34
+ }
35
+ break;
21
36
  case Action.NEXT_SELECTED:
22
37
  case Action.PREVIOUS_SELECTED:
23
38
  this._gridController.selectRows(this._dataUnit.getSelection());
@@ -6,6 +6,7 @@ import getHeaderColumnTemplate from "./template/HeaderColumnTemplate.js";
6
6
  import DataSource from "./DataSource";
7
7
  import { CellRenderer } from "./components/cellRenderer";
8
8
  import SelectionHeader from "./components/selectionHeader";
9
+ import { ALL_RECORD } from "../../../../utils/constants";
9
10
  export default class AgGridController {
10
11
  constructor(enterprise) {
11
12
  this.DEFAULT_ROW_HEIGHT = 30;
@@ -161,30 +162,72 @@ export default class AgGridController {
161
162
  opt.suppressDragLeaveHidesColumns = true;
162
163
  opt.suppressMenuHide = true;
163
164
  }
165
+ isAllRecordSetted(allSelection) {
166
+ return allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((selectedRecord) => {
167
+ return selectedRecord.__record__id__ === ALL_RECORD;
168
+ });
169
+ }
164
170
  getSelectionHeaderStatus() {
165
171
  const records = this._dataUnit.records;
166
172
  if (records && records.length === 0) {
167
173
  return false;
168
174
  }
169
- const selection = this._dataUnit.getSelection();
170
- if (selection == undefined || selection.length === 0) {
175
+ const allSelection = this._dataUnit.getSelection();
176
+ if (allSelection == undefined || allSelection.length === 0) {
171
177
  return false;
172
178
  }
173
- if (selection.length != records.length) {
179
+ if (this.isAllRecordSetted(allSelection)) {
180
+ return true;
181
+ }
182
+ if (allSelection.length != records.length) {
183
+ return undefined;
184
+ }
185
+ const selectedRecords = this._dataUnit.getSelectedRecords();
186
+ if (selectedRecords.length < allSelection.length) {
174
187
  return undefined;
175
188
  }
176
189
  let status = undefined;
177
190
  for (let i = 0; i < records.length; i++) {
178
- const current = selection.includes(records[i].__record__id__);
191
+ const current = allSelection.some((selectedRecord) => {
192
+ return selectedRecord.__record__id__ === records[i].__record__id__;
193
+ });
179
194
  if (status != undefined && current !== status) {
180
- return undefined;
195
+ return;
181
196
  }
182
197
  status = current;
183
198
  }
184
199
  return status;
185
200
  }
186
- updateSelectionForAll(selectAll) {
187
- this._dataUnit.setSelection(selectAll ? this._dataUnit.records.map(r => r.__record__id__) : []);
201
+ async updateSelectionForAll(selectAll) {
202
+ if (this._dataUnit == undefined) {
203
+ return;
204
+ }
205
+ let allSelection = this._dataUnit.getSelection();
206
+ if (allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((sel) => sel.__record__id__ === ALL_RECORD)) {
207
+ await this._dataUnit.clearSelection();
208
+ }
209
+ let updateSelection = [];
210
+ const records = this._dataUnit.records;
211
+ const selectedRecords = this._dataUnit.getSelectedRecords();
212
+ allSelection = this._dataUnit.getSelection();
213
+ if (selectAll && selectedRecords.length < records.length) {
214
+ updateSelection = records;
215
+ allSelection.forEach((selectedRecord) => {
216
+ const recordIds = updateSelection.map((record) => record.__record__id__);
217
+ if (!recordIds.includes(selectedRecord.__record__id__)) {
218
+ updateSelection.push(selectedRecord);
219
+ }
220
+ });
221
+ }
222
+ else {
223
+ updateSelection = allSelection.filter((selectedRecord) => {
224
+ return !(records || [])
225
+ .some((record) => {
226
+ return record.__record__id__ === selectedRecord.__record__id__;
227
+ });
228
+ });
229
+ }
230
+ this._dataUnit.setSelection(updateSelection);
188
231
  }
189
232
  setData(data) {
190
233
  if (this._grid === undefined) {
@@ -208,7 +251,7 @@ export default class AgGridController {
208
251
  }
209
252
  this._gridOptions.api.forEachNode(node => {
210
253
  var _a;
211
- if (rowIds && rowIds.includes(node.id)) {
254
+ if (rowIds && rowIds.find(row => row.__record__id__ === node.id)) {
212
255
  node.setSelected(true);
213
256
  (_a = this._gridOptions.api) === null || _a === void 0 ? void 0 : _a.ensureNodeVisible(node);
214
257
  }
@@ -216,10 +259,7 @@ export default class AgGridController {
216
259
  node.setSelected(false);
217
260
  }
218
261
  });
219
- const selectionHeader = this._gridOptions.context.selectionHeader;
220
- if (selectionHeader) {
221
- selectionHeader.updateCheckbox();
222
- }
262
+ this.updateCheckbox();
223
263
  }
224
264
  removeRows() {
225
265
  if (this._grid === undefined) {
@@ -314,7 +354,7 @@ export default class AgGridController {
314
354
  if (this._grid === undefined) {
315
355
  throw new Error("Erro interno: Grid ainda não inicializado.");
316
356
  }
317
- const colDef = this._gridOptions.columnApi.getAllColumns();
357
+ const colDef = this._gridOptions.columnApi.getColumns();
318
358
  return colDef.filter(c => ![this.CHECK_BOX_COL_ID, this.STATUS_COL_ID].includes(c.getColId())).map(c => {
319
359
  const def = c.getColDef();
320
360
  const colDef = { name: def.field, label: def.headerName };
@@ -332,12 +372,16 @@ export default class AgGridController {
332
372
  if (this._grid === undefined) {
333
373
  throw new Error("Erro interno: Grid ainda não inicializado.");
334
374
  }
375
+ const colDef = this._gridOptions.columnApi.getColumns();
335
376
  let columns = this.getColumnsDef();
336
377
  let visibleColumns = [];
378
+ //Existem colunas implícitas que não tem estado, essas colunas são sempre as primeiras.
379
+ //Como vamos reordenar, precisamos considerar o deslocamento provocado por elas.
380
+ const columnsOffset = colDef.length - columns.length;
337
381
  let sort = [];
338
382
  state.forEach((cfgColumn, index) => {
339
383
  const colWidth = this.getColumnWidth(cfgColumn);
340
- this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + 2);
384
+ this._gridOptions.columnApi.moveColumn(cfgColumn.name, index + columnsOffset);
341
385
  this._gridOptions.columnApi.setColumnWidth(cfgColumn.name, colWidth);
342
386
  visibleColumns.push(cfgColumn.name);
343
387
  if (cfgColumn.ascending !== undefined) {
@@ -398,6 +442,19 @@ export default class AgGridController {
398
442
  var _a;
399
443
  (_a = this._gridOptions.api.getDisplayedRowAtIndex(index)) === null || _a === void 0 ? void 0 : _a.setSelected(true);
400
444
  }
445
+ deselectAll() {
446
+ var _a, _b;
447
+ (_b = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.deselectAll();
448
+ this.updateCheckbox();
449
+ }
450
+ updateCheckbox() {
451
+ var _a, _b;
452
+ const selectionHeader = (_b = (_a = this._gridOptions) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.selectionHeader;
453
+ if (selectionHeader == undefined) {
454
+ return;
455
+ }
456
+ selectionHeader.updateCheckbox();
457
+ }
401
458
  buildColDef(source) {
402
459
  var _a, _b, _c;
403
460
  let tooltip = undefined;
@@ -25,6 +25,7 @@ export default class DataSource {
25
25
  this._controller.refresh();
26
26
  break;
27
27
  case Action.SELECTION_CHANGED:
28
+ case Action.SELECTION_REMOVED:
28
29
  case Action.NEXT_SELECTED:
29
30
  case Action.PREVIOUS_SELECTED:
30
31
  this.updateSelection();
@@ -38,7 +39,14 @@ export default class DataSource {
38
39
  this._dataUnit.subscribe(this.duObserver);
39
40
  }
40
41
  updateSelection() {
41
- this._controller.selectRows(this._dataUnit.getSelection());
42
+ var _a;
43
+ const selection = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
44
+ if ((selection === null || selection === void 0 ? void 0 : selection.length) > 0) {
45
+ this._controller.selectRows(selection);
46
+ }
47
+ else {
48
+ this._controller.deselectAll();
49
+ }
42
50
  }
43
51
  getRows(params) {
44
52
  if (this.needReload(params)) {
@@ -2,14 +2,17 @@ import { ElementIDUtils, JSUtils } from "@sankhyalabs/core";
2
2
  import { h, Host } from "@stencil/core";
3
3
  import AgGridController from "./controller/ag-grid/AgGridController";
4
4
  import { SelectionCounter } from "./subcomponents/selection-counter";
5
+ import { ALL_RECORD } from "../../utils/constants";
5
6
  export class EzGrid {
6
7
  constructor() {
7
8
  this._gridController = new AgGridController(false);
8
9
  this._debounceTimer = 500;
10
+ this._selectionAll = false;
9
11
  this._paginationInfo = undefined;
10
12
  this._paginationChangedByKeyboard = true;
11
- this._selectionCount = 0;
12
13
  this._showSelectionCounter = false;
14
+ this._selectionCount = 0;
15
+ this._selectionPageCount = 0;
13
16
  this.multipleSelection = undefined;
14
17
  this.config = undefined;
15
18
  this.serverUrl = undefined;
@@ -64,32 +67,94 @@ export class EzGrid {
64
67
  async quickFilter(term) {
65
68
  this._gridController.quickFilter(term);
66
69
  }
70
+ observeConfig(config) {
71
+ this._gridController.setColumnsState(config.columns);
72
+ }
67
73
  onSelectionChange(evt) {
68
- var _a, _b, _c;
69
- (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.setSelection((_c = (_b = evt === null || evt === void 0 ? void 0 : evt.detail) === null || _b === void 0 ? void 0 : _b.selection) === null || _c === void 0 ? void 0 : _c.map((r) => r.__record__id__));
70
- this.controlSelectionCount();
74
+ const { selection } = evt === null || evt === void 0 ? void 0 : evt.detail;
75
+ if (selection == undefined || this.dataUnit == undefined) {
76
+ return;
77
+ }
78
+ if (this.isAllRecordSetted()) {
79
+ this.updateSelectionPage(selection);
80
+ return;
81
+ }
82
+ this.setSelection(selection);
83
+ }
84
+ updateSelectionPage(selection) {
85
+ if (this._selectionAll) {
86
+ this._selectionAll = false;
87
+ }
88
+ else {
89
+ this.dataUnit.clearSelection()
90
+ .then(() => {
91
+ const records = this.dataUnit.records;
92
+ const selectionPage = selection.filter((selectedRecord) => {
93
+ return records.some((record) => {
94
+ return record.__record__id__ === selectedRecord.__record__id__;
95
+ });
96
+ });
97
+ this._gridController.selectRows(selectionPage);
98
+ });
99
+ }
100
+ }
101
+ isAllRecordSetted() {
102
+ var _a;
103
+ const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
104
+ return allSelection === null || allSelection === void 0 ? void 0 : allSelection.some((selectedRecord) => {
105
+ return selectedRecord.__record__id__ === ALL_RECORD;
106
+ });
107
+ }
108
+ setSelection(selection) {
109
+ if ((selection === null || selection === void 0 ? void 0 : selection.length) > 0) {
110
+ this.dataUnit.setSelection(selection)
111
+ .then(this.controlSelectionCounter.bind(this));
112
+ }
113
+ else {
114
+ this.dataUnit.clearSelection()
115
+ .then(this.controlSelectionCounter.bind(this));
116
+ }
117
+ }
118
+ setAutoSelectAll() {
119
+ var _a, _b, _c, _d;
120
+ const { total } = (_a = this._paginationInfo) !== null && _a !== void 0 ? _a : {};
121
+ if (total == undefined) {
122
+ return;
123
+ }
124
+ this._selectionCount = total;
125
+ this._selectionAll = true;
126
+ this._showSelectionCounter = true;
127
+ (_b = this._gridController) === null || _b === void 0 ? void 0 : _b.selectRows((_d = (_c = this.dataUnit) === null || _c === void 0 ? void 0 : _c.records) !== null && _d !== void 0 ? _d : []);
71
128
  }
72
- controlSelectionCount() {
129
+ controlSelectionCounter() {
130
+ var _a, _b;
131
+ const allSelection = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelection();
132
+ const counter = (_b = allSelection === null || allSelection === void 0 ? void 0 : allSelection.length) !== null && _b !== void 0 ? _b : 0;
133
+ if (this.isAllRecordSetted()) {
134
+ this.setAutoSelectAll();
135
+ return;
136
+ }
73
137
  if (!this.multipleSelection || !this.isPaginationActived()) {
74
138
  this._showSelectionCounter = false;
75
139
  setTimeout(this.setSelectionCount.bind(this), this._debounceTimer);
76
140
  return;
77
141
  }
78
- this.getSelection()
79
- .then((records) => {
80
- var _a;
81
- const counter = (_a = records === null || records === void 0 ? void 0 : records.length) !== null && _a !== void 0 ? _a : 0;
82
- this._showSelectionCounter = counter > 1;
83
- if (this._showSelectionCounter) {
142
+ if (counter > 1) {
143
+ setTimeout(() => {
84
144
  this.setSelectionCount(counter);
85
- }
86
- else {
87
- setTimeout(this.setSelectionCount.bind(this, counter), this._debounceTimer);
88
- }
89
- });
145
+ this._showSelectionCounter = true;
146
+ }, this._debounceTimer);
147
+ }
148
+ else {
149
+ this._showSelectionCounter = false;
150
+ setTimeout(this.setSelectionCount.bind(this, counter), this._debounceTimer);
151
+ }
90
152
  }
91
153
  setSelectionCount(value = 0) {
154
+ var _a, _b;
92
155
  this._selectionCount = value;
156
+ const selectPageRecords = (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.getSelectedRecords();
157
+ this._selectionPageCount = (_b = selectPageRecords === null || selectPageRecords === void 0 ? void 0 : selectPageRecords.length) !== null && _b !== void 0 ? _b : 0;
93
158
  }
94
159
  isPaginationActived() {
95
160
  var _a;
@@ -100,60 +165,23 @@ export class EzGrid {
100
165
  return Math.ceil(total / (lastRecord - firstRecord + 1)) > 1;
101
166
  }
102
167
  onSelectAllRecords() {
103
- var _a;
104
- const { total } = (_a = this._paginationInfo) !== null && _a !== void 0 ? _a : {};
105
- if (total == undefined) {
106
- return;
107
- }
108
- this._selectionCount = total;
168
+ const allRecord = {
169
+ __record__id__: ALL_RECORD,
170
+ filter: this.dataUnit.getFilters(),
171
+ sort: this.dataUnit.getSort()
172
+ };
173
+ this.setSelection([allRecord]);
109
174
  }
110
175
  onSelectPageRecords() {
111
- this.controlSelectionCount();
176
+ var _a;
177
+ (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.clearSelection().then(() => {
178
+ var _a, _b, _c;
179
+ (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.selectRows((_c = (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.records) !== null && _c !== void 0 ? _c : []);
180
+ });
112
181
  }
113
182
  onClearSelectedRecords() {
114
183
  var _a;
115
- (_a = this._gridController) === null || _a === void 0 ? void 0 : _a.selectRows([]);
116
- }
117
- onColumnStateChange(type, state, info) {
118
- var _a;
119
- this.ezColumnStateChange.emit({ type, state, isUserChange: info.isUserChange });
120
- if (info.isUserChange) {
121
- if (type === 'columnMovedEnd' && !info.isElementResize) {
122
- let newConfig;
123
- if (this.config) {
124
- newConfig = { columns: [] };
125
- state.forEach(columnState => {
126
- let newConfigColumn = this.config.columns.find(column => column.name === columnState.name);
127
- if (newConfigColumn) {
128
- newConfigColumn.width = columnState.width;
129
- newConfig.columns.push(newConfigColumn);
130
- }
131
- });
132
- }
133
- else {
134
- newConfig = this.createConfigFromState(state);
135
- }
136
- if (newConfig.columns.length > 0) {
137
- this.configChange.emit(newConfig);
138
- }
139
- }
140
- else if (type === 'columnResize') {
141
- if ((_a = info.column) === null || _a === void 0 ? void 0 : _a.colId) {
142
- let newConfig;
143
- if (this.config) {
144
- newConfig = Object.assign({}, this.config);
145
- }
146
- else {
147
- newConfig = this.createConfigFromState(state);
148
- }
149
- let newColumn = newConfig.columns.find(column => column.name === info.column.colId);
150
- if (newColumn) {
151
- newColumn.customWidth = info.column.actualWidth;
152
- this.configChange.emit(newConfig);
153
- }
154
- }
155
- }
156
- }
184
+ (_a = this.dataUnit) === null || _a === void 0 ? void 0 : _a.clearSelection();
157
185
  }
158
186
  createConfigFromState(state) {
159
187
  let newConfig = { columns: [] };
@@ -219,34 +247,46 @@ export class EzGrid {
219
247
  this._resizeObserver.observe(this._element);
220
248
  this.resizeSelectionCounter();
221
249
  }
222
- componentDidLoad() {
223
- this._gridController.initDatagrid(this._container, {
224
- onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
225
- onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
226
- onPaginationChange: (paginationInfo) => {
227
- var _a;
228
- if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > (paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.currentPage) && this._paginationChangedByKeyboard) {
229
- this._gridController.setFocusLastRow();
250
+ onColumnStateChange(type, state, info) {
251
+ var _a;
252
+ this.ezColumnStateChange.emit({ type, state, isUserChange: info.isUserChange });
253
+ if (info.isUserChange) {
254
+ if (type === 'columnMovedEnd' && !info.isElementResize) {
255
+ let newConfig;
256
+ if (this.config) {
257
+ newConfig = { columns: [] };
258
+ state.forEach(columnState => {
259
+ let newConfigColumn = this.config.columns.find(column => column.name === columnState.name);
260
+ if (newConfigColumn) {
261
+ newConfigColumn.width = columnState.width;
262
+ newConfig.columns.push(newConfigColumn);
263
+ }
264
+ });
230
265
  }
231
266
  else {
232
- this._gridController.setFocusFirstRow();
233
- this._paginationChangedByKeyboard = true;
267
+ newConfig = this.createConfigFromState(state);
234
268
  }
235
- this._paginationInfo = paginationInfo;
236
- },
237
- onDoubleClick: (row) => {
238
- this.ezDoubleClick.emit(row);
239
- },
240
- allowMultipleSelection: this.multipleSelection,
241
- serverURL: this.serverUrl,
242
- dataUnit: this.dataUnit,
243
- statusResolver: this.statusResolver
244
- });
245
- if (this.config) {
246
- this.observeConfig(this.config);
269
+ if (newConfig.columns.length > 0) {
270
+ this.configChange.emit(newConfig);
271
+ }
272
+ }
273
+ else if (type === 'columnResize') {
274
+ if ((_a = info.column) === null || _a === void 0 ? void 0 : _a.colId) {
275
+ let newConfig;
276
+ if (this.config) {
277
+ newConfig = Object.assign({}, this.config);
278
+ }
279
+ else {
280
+ newConfig = this.createConfigFromState(state);
281
+ }
282
+ let newColumn = newConfig.columns.find(column => column.name === info.column.colId);
283
+ if (newColumn) {
284
+ newColumn.customWidth = info.column.actualWidth;
285
+ this.configChange.emit(newConfig);
286
+ }
287
+ }
288
+ }
247
289
  }
248
- this.buildDataElementId();
249
- this.setEvents();
250
290
  }
251
291
  buildDataElementId() {
252
292
  const dataInfo = { dataUnit: this.dataUnit };
@@ -277,17 +317,45 @@ export class EzGrid {
277
317
  }
278
318
  return null;
279
319
  }
280
- observeConfig(config) {
281
- this._gridController.setColumnsState(config.columns);
320
+ componentDidLoad() {
321
+ this._gridController.initDatagrid(this._container, {
322
+ onColumnStateChange: (type, state, info) => this.onColumnStateChange(type, state, info),
323
+ onSelectionChange: (selection) => this.ezSelectionChange.emit(selection),
324
+ onPaginationChange: (paginationInfo) => {
325
+ var _a;
326
+ if (((_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) > (paginationInfo === null || paginationInfo === void 0 ? void 0 : paginationInfo.currentPage) && this._paginationChangedByKeyboard) {
327
+ this._gridController.setFocusLastRow();
328
+ }
329
+ else {
330
+ this._gridController.setFocusFirstRow();
331
+ this._paginationChangedByKeyboard = true;
332
+ }
333
+ this._paginationInfo = paginationInfo;
334
+ this._gridController.updateCheckbox();
335
+ this.controlSelectionCounter();
336
+ },
337
+ onDoubleClick: (row) => {
338
+ this.ezDoubleClick.emit(row);
339
+ },
340
+ allowMultipleSelection: this.multipleSelection,
341
+ serverURL: this.serverUrl,
342
+ dataUnit: this.dataUnit,
343
+ statusResolver: this.statusResolver
344
+ });
345
+ if (this.config) {
346
+ this.observeConfig(this.config);
347
+ }
348
+ this.buildDataElementId();
349
+ this.setEvents();
282
350
  }
283
351
  componentWillRender() {
284
352
  this.configSelectionCounter();
285
353
  }
286
354
  render() {
287
- var _a, _b;
355
+ var _a, _b, _c;
288
356
  return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, 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
289
357
  ${this._showSelectionCounter ? "grid__selection-counter--opened" : ""}
290
- ` }, h(SelectionCounter, { selectionCount: this._selectionCount, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, pageSize: (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.pageSize, onSelectAll: this.onSelectAllRecords.bind(this), onSelectPage: this.onSelectPageRecords.bind(this), onClearAll: this.onClearSelectedRecords.bind(this), onClose: () => this._showSelectionCounter = false })), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" })));
358
+ ` }, h(SelectionCounter, { selectionCount: this._selectionCount, selectionPageCount: this._selectionPageCount, total: (_a = this._paginationInfo) === null || _a === void 0 ? void 0 : _a.total, recordsLength: (_c = (_b = this.dataUnit) === null || _b === void 0 ? void 0 : _b.records) === null || _c === void 0 ? void 0 : _c.length, onSelectAll: this.onSelectAllRecords.bind(this), onSelectPage: this.onSelectPageRecords.bind(this), onClearAll: this.onClearSelectedRecords.bind(this), onClose: () => this._showSelectionCounter = false })), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" })));
291
359
  }
292
360
  static get is() { return "ez-grid"; }
293
361
  static get encapsulation() { return "scoped"; }
@@ -404,8 +472,9 @@ export class EzGrid {
404
472
  return {
405
473
  "_paginationInfo": {},
406
474
  "_paginationChangedByKeyboard": {},
475
+ "_showSelectionCounter": {},
407
476
  "_selectionCount": {},
408
- "_showSelectionCounter": {}
477
+ "_selectionPageCount": {}
409
478
  };
410
479
  }
411
480
  static get events() {
@@ -1,8 +1,8 @@
1
1
  import { ElementIDUtils } from "@sankhyalabs/core";
2
2
  import { h } from "@stencil/core";
3
3
  export const SelectionCounter = (props) => {
4
- const { selectionCount, total, pageSize, onSelectAll, onSelectPage, onClearAll, onClose } = props;
5
- const pageSelectedRecords = selectionCount === pageSize;
4
+ const { selectionCount, selectionPageCount, total, recordsLength, onSelectAll, onSelectPage, onClearAll, onClose } = props;
5
+ const pageSelectedRecords = selectionPageCount === recordsLength;
6
6
  const allSelectedRecords = selectionCount === total;
7
7
  return (h("div", Object.assign({ class: "ez-box ez-box--shadow-small" }, getElementID("ezGridSelectionCounter")), h("div", { class: "ez-flex ez-flex--align-items-center ez-size-width--full ez-padding-horizontal--medium" }, h("div", { class: "ez-flex ez-flex--wrap ez-flex--align-items-baseline ez-flex--justify-center" }, h("label", Object.assign({ innerHTML: getText(selectionCount, allSelectedRecords), class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium ez-margin-top--medium" }, getElementID("ezGridSelectionCounter_label"))), h("div", { class: "ez-flex ez-margin-right--medium" }, (pageSelectedRecords || allSelectedRecords) &&
8
8
  h("ez-button", Object.assign({ class: "ez-margin-right--medium", label: `Selecionar ${allSelectedRecords ? "apenas a página atual" : `todos os ${total} registros`}`, mode: "link", onClick: allSelectedRecords ? onSelectPage : onSelectAll }, getElementID(`ezGridSelectionCounter_select${allSelectedRecords ? "Page" : "All"}`))), h("ez-button", Object.assign({ class: "grid__btn-clear", label: "Limpar", mode: "link", onClick: onClearAll }, getElementID("ezGridSelectionCounter_clearAll"))))), h("button", Object.assign({ class: "grid__btn-close", title: "Fechar", onClick: onClose }, getElementID("ezGridSelectionCounter_close")), h("ez-icon", { iconName: "close" })))));
@@ -1 +1,2 @@
1
1
  export const REQUIRED_INFO = " (obrigatório) *";
2
+ export const ALL_RECORD = "ALL_RECORD";