@sankhyalabs/sankhyablocks 9.1.0-dev.2 → 9.1.0-dev.3

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 (51) hide show
  1. package/dist/cjs/{SnkMessageBuilder-e3b7850b.js → SnkMessageBuilder-221cc88d.js} +10 -2
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/sankhyablocks.cjs.js +1 -1
  4. package/dist/cjs/snk-actions-button_8.cjs.entry.js +56 -197
  5. package/dist/cjs/snk-application.cjs.entry.js +1 -1
  6. package/dist/cjs/snk-data-exporter.cjs.entry.js +2 -2
  7. package/dist/cjs/{snk-data-unit-3684c96e.js → snk-data-unit-bf45314d.js} +1 -1
  8. package/dist/cjs/snk-data-unit.cjs.entry.js +2 -2
  9. package/dist/cjs/snk-detail-view.cjs.entry.js +1 -1
  10. package/dist/cjs/snk-grid.cjs.entry.js +1 -2
  11. package/dist/cjs/snk-simple-crud.cjs.entry.js +1 -1
  12. package/dist/collection/components/snk-grid/snk-grid.js +1 -2
  13. package/dist/collection/components/snk-grid-config/snk-grid-config.css +7 -41
  14. package/dist/collection/components/snk-grid-config/snk-grid-config.js +58 -193
  15. package/dist/collection/components/snk-grid-config/snk-select-box/snk-select-box.css +1 -0
  16. package/dist/collection/components/snk-simple-crud/snk-simple-crud.js +1 -1
  17. package/dist/collection/components/snk-simple-form-config/snk-simple-form-config.css +1 -0
  18. package/dist/collection/components/snk-simple-form-config/snk-simple-form-config.js +1 -1
  19. package/dist/collection/lib/message/resources/snk-grid.msg.js +10 -2
  20. package/dist/components/SnkMessageBuilder.js +10 -2
  21. package/dist/components/snk-grid-config2.js +56 -195
  22. package/dist/components/snk-grid2.js +1 -2
  23. package/dist/components/snk-select-box2.js +1 -1
  24. package/dist/components/snk-simple-crud2.js +1 -1
  25. package/dist/components/snk-simple-form-config2.js +2 -2
  26. package/dist/esm/{SnkMessageBuilder-9c269caf.js → SnkMessageBuilder-da87a821.js} +10 -2
  27. package/dist/esm/loader.js +1 -1
  28. package/dist/esm/sankhyablocks.js +1 -1
  29. package/dist/esm/snk-actions-button_8.entry.js +56 -197
  30. package/dist/esm/snk-application.entry.js +1 -1
  31. package/dist/esm/snk-data-exporter.entry.js +2 -2
  32. package/dist/esm/{snk-data-unit-027bca56.js → snk-data-unit-ba90734a.js} +1 -1
  33. package/dist/esm/snk-data-unit.entry.js +2 -2
  34. package/dist/esm/snk-detail-view.entry.js +1 -1
  35. package/dist/esm/snk-grid.entry.js +1 -2
  36. package/dist/esm/snk-simple-crud.entry.js +1 -1
  37. package/dist/sankhyablocks/{p-65c5d430.entry.js → p-05f3a2da.entry.js} +1 -1
  38. package/dist/sankhyablocks/p-3bf2f5cd.entry.js +1 -0
  39. package/dist/sankhyablocks/{p-09e60995.entry.js → p-3d452f27.entry.js} +1 -1
  40. package/dist/sankhyablocks/{p-67d6d0c8.entry.js → p-50b68b68.entry.js} +1 -1
  41. package/dist/sankhyablocks/{p-0cb295c1.entry.js → p-6a1b38d2.entry.js} +1 -1
  42. package/dist/sankhyablocks/{p-2bde486e.js → p-97bc6983.js} +1 -1
  43. package/dist/sankhyablocks/{p-e3521eae.entry.js → p-aa72089a.entry.js} +1 -1
  44. package/dist/sankhyablocks/p-b31cc92d.entry.js +1 -0
  45. package/dist/sankhyablocks/p-fc4eac32.js +1 -0
  46. package/dist/sankhyablocks/sankhyablocks.esm.js +1 -1
  47. package/dist/types/components/snk-grid-config/snk-grid-config.d.ts +7 -20
  48. package/package.json +1 -1
  49. package/dist/sankhyablocks/p-3a48bff3.entry.js +0 -1
  50. package/dist/sankhyablocks/p-3f24c9b2.js +0 -1
  51. package/dist/sankhyablocks/p-b8b4c6b2.entry.js +0 -1
@@ -55,17 +55,14 @@
55
55
  /*@doc Define a largura da barra de rolagem do componente.*/
56
56
  --snk-grid-config__scrollbar--width: var(--space--small, 6px);
57
57
 
58
- display: grid;
59
- grid-template-rows: auto 1fr auto;
58
+ display: flex;
59
+ flex-direction: column;
60
60
  max-height: 100%;
61
61
  width: 100%;
62
62
  }
63
63
 
64
- @media screen and (min-width: 480px) {
65
- :host {
66
- width: 359px;
67
- max-width: 359px;
68
- }
64
+ .grid-config__body {
65
+ overflow: auto;
69
66
  }
70
67
 
71
68
  .padding-right--medium {
@@ -134,42 +131,11 @@ ez-list {
134
131
  .grid-config__main {
135
132
  overflow-y: auto;
136
133
  scrollbar-width: thin;
134
+ width: 100%;
135
+ padding-bottom: 20px;
137
136
 
138
137
  /*public*/
139
138
  scrollbar-color: var(--snk-grid-config__scrollbar--color-clicked) var(--snk-grid-config__scrollbar--color-background);
140
- padding-right: var(--snk-grid-config__main--padding-right);
141
- }
142
-
143
- .grid-config__main::-webkit-scrollbar {
144
- /*public*/
145
- width: var(--snk-grid-config__scrollbar--width);
146
- max-width: var(--snk-grid-config__scrollbar--width);
147
- min-width: var(--snk-grid-config__scrollbar--width);
148
- background-color: var(--snk-grid-config__scrollbar--color-background);
149
- }
150
-
151
- .grid-config__main::-webkit-scrollbar-track {
152
- /*public*/
153
- background-color: var(--snk-grid-config__scrollbar--color-background);
154
- border-radius: var(--snk-grid-config__scrollbar--border-radius);
155
- }
156
-
157
- .grid-config__main::-webkit-scrollbar-thumb {
158
- /*public*/
159
- background-color: var(--snk-grid-config__scrollbar--color-default);
160
- border-radius: var(--snk-grid-config__scrollbar--border-radius);
161
- }
162
-
163
- .grid-config__main::-webkit-scrollbar-thumb:vertical:hover,
164
- .grid-config__main::-webkit-scrollbar-thumb:horizontal:hover {
165
- /*public*/
166
- background-color: var(--snk-grid-config__scrollbar--color-hover);
167
- }
168
-
169
- .grid-config__main::-webkit-scrollbar-thumb:vertical:active,
170
- .grid-config__main::-webkit-scrollbar-thumb:horizontal:active {
171
- /*public*/
172
- background-color: var(--snk-grid-config__scrollbar--color-clicked);
173
139
  }
174
140
 
175
141
  .group-name {
@@ -178,4 +144,4 @@ ez-list {
178
144
  font-size: var(--snk-grid-config__group--font-size);
179
145
  font-weight: var(--snk-grid-config__group--font-weight);
180
146
  padding-bottom: var(--snk-grid-config__group--padding-bottom);
181
- }
147
+ }
@@ -1,6 +1,5 @@
1
1
  import { StringUtils, ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
2
2
  import { ApplicationUtils, DialogType } from '@sankhyalabs/ezui/dist/collection/utils';
3
- import { CheckMode } from '@sankhyalabs/ezui/dist/collection/components/ez-check/CheckMode';
4
3
  import { h, Host } from '@stencil/core';
5
4
  import { ConfigStorage } from '../../lib/configs/ConfigStorage';
6
5
  import { ORDER_VALUES } from '../../lib/utils/constants';
@@ -8,8 +7,9 @@ export class SnkGridConfig {
8
7
  constructor() {
9
8
  this._orderListItems = [];
10
9
  this._orderPriorityList = [];
10
+ this._visibleList = [];
11
+ this._hiddenList = [];
11
12
  this._columListItems = [];
12
- this._selectedIndex = -1;
13
13
  this._dataChanged = false;
14
14
  this._componenteInternalKey = Date.now();
15
15
  this.selectedIndex = 0;
@@ -17,6 +17,8 @@ export class SnkGridConfig {
17
17
  this.config = undefined;
18
18
  this.configName = undefined;
19
19
  this.resourceID = undefined;
20
+ this._collapsibleBoxListOrder = true;
21
+ this._collapsibleBoxListSelect = false;
20
22
  }
21
23
  /* Creation Methods */
22
24
  /**
@@ -26,15 +28,15 @@ export class SnkGridConfig {
26
28
  * Para conhecer os detalhes do módulo, vide o arquivo neste projeto "/src/lib/message/resources/snk-grid.msg.ts"
27
29
  */
28
30
  getMessage(key, params) {
29
- const application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
31
+ const application = ApplicationContext.getContextValue('__SNK__APPLICATION__');
30
32
  return application.messagesBuilder.getMessage(key, params);
31
33
  }
32
34
  getSortableColumns() {
33
35
  let newList = [];
34
- this.columns.filter(col => { var _a; return StringUtils.getBooleanValue((_a = col === null || col === void 0 ? void 0 : col.props) === null || _a === void 0 ? void 0 : _a.get("sortable"), true); }).forEach((column) => {
35
- var _a;
36
+ this.columns.filter(col => { var _a; return StringUtils.getBooleanValue((_a = col === null || col === void 0 ? void 0 : col.props) === null || _a === void 0 ? void 0 : _a.get('sortable'), true); }).forEach((column) => {
37
+ var _a, _b;
36
38
  let configItem = (_a = this.config) === null || _a === void 0 ? void 0 : _a.columns.find((item) => item.name === column.name);
37
- let item = { name: column.name, label: column.label };
39
+ let item = { label: column.label, sort: (_b = column === null || column === void 0 ? void 0 : column.sort) !== null && _b !== void 0 ? _b : ORDER_VALUES.asc.value, id: column.name };
38
40
  if (configItem) {
39
41
  item['orderIndex'] = configItem.orderIndex;
40
42
  item['ascending'] = configItem.ascending;
@@ -74,16 +76,22 @@ export class SnkGridConfig {
74
76
  }
75
77
  createColumnList() {
76
78
  let visibleGroup = {
77
- group: this.getMessage("snkGridConfig.group.visible"),
79
+ group: this.getMessage('snkGridConfig.group.visible'),
78
80
  items: [],
79
81
  };
80
82
  let hiddenGroup = {
81
- group: this.getMessage("snkGridConfig.group.hidden"),
83
+ group: this.getMessage('snkGridConfig.group.hidden'),
82
84
  items: [],
83
- sort: ORDER_VALUES.asc.value
85
+ sort: ORDER_VALUES.asc.value,
84
86
  };
85
87
  this.columns.forEach((column) => {
86
- let item = { label: column.label };
88
+ var _a;
89
+ let item = {
90
+ label: column.label,
91
+ selected: false,
92
+ sort: (_a = column === null || column === void 0 ? void 0 : column.sort) !== null && _a !== void 0 ? _a : ORDER_VALUES.asc.value,
93
+ id: column.name,
94
+ };
87
95
  if (column.hidden) {
88
96
  hiddenGroup.items.push(item);
89
97
  }
@@ -92,13 +100,9 @@ export class SnkGridConfig {
92
100
  }
93
101
  });
94
102
  this._columListItems = [visibleGroup, hiddenGroup];
95
- }
96
- createColumnListSlotDataElementId(item) {
97
- return `configItem_${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(item.label))}`;
98
- }
99
- buildColumnListSlot(item, group) {
100
- const dataElementId = this.createColumnListSlotDataElementId(item);
101
- return (h("div", null, h("ez-check", { mode: CheckMode.SWITCH, id: CheckMode.SWITCH + ((item === null || item === void 0 ? void 0 : item.label) || '') + ((group === null || group === void 0 ? void 0 : group.group) || ''), value: group.group === this.getMessage("snkGridConfig.group.visible"), "data-element-id": dataElementId, onEzChange: (evt) => { this.switchColumnGroup(evt, item); } })));
103
+ this._visibleList = visibleGroup.items;
104
+ this._hiddenList = hiddenGroup.items;
105
+ this.createOrderList();
102
106
  }
103
107
  createOrderListSlotDataElementId(item) {
104
108
  return `${this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)}_configItem_${StringUtils.toCamelCase(item.label)}`;
@@ -109,7 +113,10 @@ export class SnkGridConfig {
109
113
  if ((item === null || item === void 0 ? void 0 : item.ascending) != undefined) {
110
114
  selectedOption = item.ascending == true ? ORDER_VALUES.asc.value : ORDER_VALUES.desc.value;
111
115
  }
112
- return (h("div", null, h("snk-select-box", { selectedOption: selectedOption, key: 'snk-select-box-' + this._componenteInternalKey + '-' + item, "data-element-id": dataElementId, onEzChange: (evt) => { evt.stopPropagation(); this.updateOrder(evt.detail, item.label); } })));
116
+ return (h("snk-select-box", { selectedOption: selectedOption, key: 'snk-select-box-' + this._componenteInternalKey + '-' + item, "data-element-id": dataElementId, onEzChange: (evt) => {
117
+ evt.stopPropagation();
118
+ this.updateOrder(evt.detail, item.label);
119
+ } }));
113
120
  }
114
121
  updateOrder(sortOrder, updatedItemLabel) {
115
122
  var _a;
@@ -139,34 +146,6 @@ export class SnkGridConfig {
139
146
  }
140
147
  this.columns = newList;
141
148
  }
142
- /* Actions Methods */
143
- switchColumnGroup(evt, switchedItem) {
144
- evt.stopPropagation();
145
- let newList = [...this._columListItems];
146
- this._dataChanged = true;
147
- if (evt.detail === true) {
148
- let hiddenGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.hidden"));
149
- let index = hiddenGroup.items.findIndex((item) => item.label === switchedItem.label);
150
- if (index >= 0) {
151
- hiddenGroup.items.splice(index, 1);
152
- }
153
- let visibleGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.visible"));
154
- visibleGroup.items.push(switchedItem);
155
- this._columListItems = newList;
156
- this.createOrderList();
157
- }
158
- else if (evt.detail === false) {
159
- let visibleGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.visible"));
160
- let index = visibleGroup.items.findIndex((item) => item.label === switchedItem.label);
161
- if (index >= 0) {
162
- visibleGroup.items.splice(index, 1);
163
- }
164
- let hiddenGroup = newList.find((group) => group.group === this.getMessage("snkGridConfig.group.hidden"));
165
- hiddenGroup.items.push(switchedItem);
166
- this._columListItems = newList;
167
- this.createOrderList();
168
- }
169
- }
170
149
  finish() {
171
150
  if (!this._dataChanged) {
172
151
  this.closeConfig();
@@ -177,7 +156,7 @@ export class SnkGridConfig {
177
156
  group.items.forEach((item) => {
178
157
  const baseColumn = this.columns.find((column) => column.label === item.label);
179
158
  let newColumnItem = Object.assign({}, baseColumn);
180
- if (group.group === this.getMessage("snkGridConfig.group.hidden")) {
159
+ if (group.group === this.getMessage('snkGridConfig.group.hidden')) {
181
160
  newColumnItem.hidden = true;
182
161
  }
183
162
  else {
@@ -195,8 +174,7 @@ export class SnkGridConfig {
195
174
  ConfigStorage.saveGridConfig(_newConfig, this.configName, this.resourceID)
196
175
  .then((savedConfig) => {
197
176
  this.configChange.emit(savedConfig);
198
- this._orderList.clearHistory();
199
- ApplicationUtils.info(this.getMessage("snkGridConfig.info.successfullyConfigSaved"), { iconName: "check" });
177
+ ApplicationUtils.info(this.getMessage('snkGridConfig.info.successfullyConfigSaved'), { iconName: 'check' });
200
178
  });
201
179
  }
202
180
  reOrderPriorityColumns(columns, orderPriorityList) {
@@ -295,132 +273,19 @@ export class SnkGridConfig {
295
273
  });
296
274
  return newConfig;
297
275
  }
298
- async locateColumn(evt, searchingText) {
299
- var _a;
300
- const hitEnter = evt.key === "Enter";
301
- searchingText = searchingText || ((_a = evt.currentTarget) === null || _a === void 0 ? void 0 : _a.value);
302
- if (!searchingText) {
303
- this.removeSelection();
304
- return;
305
- }
306
- const matchedIndexes = await this.getMatchedIndexes(searchingText);
307
- const newSelected = this.getNewSelectedIndex(matchedIndexes, hitEnter);
308
- this._selectedIndex = newSelected;
309
- if (this.selectedIndex === 1) {
310
- this.updateOrderListSelection(newSelected);
311
- }
312
- else {
313
- this.updateColumnListSelection(newSelected);
314
- }
315
- }
316
- async getMatchedIndexes(searchingText) {
317
- const matchedIndexes = [];
318
- if (this.selectedIndex === 1) {
319
- const orderListDatasource = await this._orderList.getList();
320
- orderListDatasource.forEach((column, index) => {
321
- if (this.compareWords(column, searchingText)) {
322
- matchedIndexes.push(index);
323
- }
324
- });
325
- }
326
- else {
327
- this.columns.forEach((column, index) => {
328
- if (this.compareWords(column, searchingText)) {
329
- matchedIndexes.push(index);
330
- }
331
- });
332
- }
333
- return matchedIndexes;
334
- }
335
- getNewSelectedIndex(matchedIndexes, hitEnter) {
336
- if (matchedIndexes.length === 0)
337
- return -1;
338
- if (hitEnter) {
339
- for (const index of matchedIndexes) {
340
- if (index > this._selectedIndex) {
341
- return index;
342
- }
343
- }
344
- }
345
- return matchedIndexes[0];
346
- }
347
- updateOrderListSelection(newSelected) {
348
- if (newSelected === -1) {
349
- this._orderList.removeSelection();
350
- return;
351
- }
352
- this._orderList.getList().then((orderListDatasource) => {
353
- const selectedColumn = orderListDatasource[newSelected];
354
- if (selectedColumn) {
355
- this._orderList.setSelection(selectedColumn, true);
356
- }
357
- else {
358
- this._orderList.removeSelection();
359
- }
360
- });
361
- }
362
- updateColumnListSelection(newSelected) {
363
- if (newSelected === -1) {
364
- this._columnList.removeSelection();
365
- return;
366
- }
367
- const selectedColumn = this.columns[newSelected];
368
- if (selectedColumn) {
369
- const listItem = this._columListItems
370
- .map(group => group.items)
371
- .flat()
372
- .find(item => item.label === selectedColumn.label);
373
- if (listItem) {
374
- this._columnList.setSelection(listItem, true);
375
- }
376
- else {
377
- this._columnList.removeSelection();
378
- }
379
- }
380
- else {
381
- this._columnList.removeSelection();
382
- }
383
- }
384
- removeSelection() {
385
- if (this.selectedIndex === 1) {
386
- this._orderList.removeSelection();
387
- }
388
- else {
389
- this._columnList.removeSelection();
390
- }
391
- }
392
- compareWords(column, searchingText) {
393
- var _a, _b;
394
- const columnLabel = (_a = StringUtils.replaceAccentuatedChars(column === null || column === void 0 ? void 0 : column.label)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
395
- const argument = (_b = StringUtils.replaceAccentuatedChars(searchingText)) === null || _b === void 0 ? void 0 : _b.toUpperCase();
396
- if (StringUtils.isEmpty(columnLabel) || StringUtils.isEmpty(argument)) {
397
- return false;
398
- }
399
- return columnLabel.includes(argument);
400
- }
401
- getColumnNames() {
402
- const listNames = [];
403
- listNames.push(this.getMessage("snkGridConfig.tab.columns"));
404
- listNames.push(this.getMessage("snkGridConfig.tab.lineOrdering"));
405
- return listNames.join(',');
406
- }
407
276
  closeConfig() {
408
- this._orderList.scrollToTop();
409
- this._columnList.scrollToTop();
410
- this._searchElement.value = "";
411
277
  if (this._dataChanged) {
412
278
  let options = {
413
279
  canClose: false,
414
- labelCancel: this.getMessage("snkGridConfig.confirm.cancel"),
415
- labelConfirm: this.getMessage("snkGridConfig.confirm.save"),
416
- btnConfirmDanger: false
280
+ labelCancel: this.getMessage('snkGridConfig.confirm.cancel'),
281
+ labelConfirm: this.getMessage('snkGridConfig.confirm.save'),
282
+ btnConfirmDanger: false,
417
283
  };
418
- ApplicationUtils.confirm(this.getMessage("snkGridConfig.confirm.alert"), this.getMessage("snkGridConfig.confirm.msgCancel"), null, DialogType.WARN, options)
284
+ ApplicationUtils.confirm(this.getMessage('snkGridConfig.confirm.alert'), this.getMessage('snkGridConfig.confirm.msgCancel'), null, DialogType.WARN, options)
419
285
  .then((response) => {
420
286
  if (!response) {
421
287
  this._dataChanged = false;
422
288
  this.configCancel.emit();
423
- this._orderList.clearHistory();
424
289
  this._componenteInternalKey = Date.now();
425
290
  }
426
291
  else {
@@ -430,31 +295,12 @@ export class SnkGridConfig {
430
295
  }
431
296
  else {
432
297
  this.configCancel.emit();
433
- this._orderList.clearHistory();
434
- }
435
- }
436
- /* Handlers */
437
- handleTabChange(tab) {
438
- if ((tab === null || tab === void 0 ? void 0 : tab.index) != undefined) {
439
- if (this.selectedIndex !== tab.index) {
440
- if (tab.index === 0) {
441
- this._orderList.scrollToTop();
442
- }
443
- else if (tab.index === 1) {
444
- this._columnList.scrollToTop();
445
- }
446
- this._searchElement.value = "";
447
- }
448
- if (tab.index === 1) {
449
- this.createOrderList();
450
- }
451
- this.selectedIndex = tab.index;
452
298
  }
453
299
  }
454
300
  handleColumnListChange(evt) {
455
301
  var _a;
456
302
  if (evt.detail) {
457
- let visibleItems = (_a = evt.detail.find((group) => group.group === this.getMessage("snkGridConfig.group.visible"))) === null || _a === void 0 ? void 0 : _a.items;
303
+ let visibleItems = (_a = evt.detail.find((group) => group.group === this.getMessage('snkGridConfig.group.visible'))) === null || _a === void 0 ? void 0 : _a.items;
458
304
  if (visibleItems) {
459
305
  this._dataChanged = true;
460
306
  this._orderListItems = visibleItems;
@@ -476,17 +322,30 @@ export class SnkGridConfig {
476
322
  this.createColumnList();
477
323
  }
478
324
  }
479
- componentDidRender() {
480
- var _a;
481
- if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
482
- this.locateColumn(new KeyboardEvent("arrow-right", { key: "ArrowRight" }), this._searchElement.value);
483
- }
484
- }
485
325
  componentDidLoad() {
486
326
  ElementIDUtils.addIDInfo(this._element);
487
327
  }
328
+ handleRightListChange(rightList) {
329
+ const visibleGroup = this._columListItems.find(group => group.group === this.getMessage('snkGridConfig.group.visible'));
330
+ if (visibleGroup && visibleGroup.items != rightList) {
331
+ visibleGroup.items = rightList;
332
+ this._dataChanged = true;
333
+ }
334
+ }
335
+ getListSlots() {
336
+ return {
337
+ RIGHT_LIST: {
338
+ itemRightSlotBuilder: (item) => this.buildOrderListSlot(item),
339
+ },
340
+ };
341
+ }
488
342
  render() {
489
- return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, this.getMessage("snkGridConfig.gridConfiguration")), h("label", { class: "subtitle" }, this.getMessage("snkGridConfig.columnVisibilityOrder"))), h("div", { class: "button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "tabselector-container" }, h("ez-tabselector", { selectedIndex: this.selectedIndex, onEzChange: (evt) => { this.handleTabChange(evt.detail); }, tabs: this.getColumnNames() })), h("div", null, h("ez-text-input", { "data-element-id": "searchColums", ref: (el) => this._searchElement = el, label: this.getMessage("snkGridConfig.findColumn"), onKeyUp: (evt) => this.locateColumn(evt) }, h("ez-icon", { slot: "leftIcon", size: "medium", iconName: "search" })))), h("div", { class: "grid-config__main" }, h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedIndex === 0 ? "" : "hidden", dataSource: this._columListItems, onEzChange: (evt) => this.handleColumnListChange(evt), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true, "data-element-id": "configCols" }), h("div", { class: this.selectedIndex === 1 ? "group-name" : "hidden" }, this.getMessage("snkGridConfig.info.sortingSequence")), h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedIndex === 1 ? "height-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: (evt) => this.handleOrderListChange(evt), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item), "data-element-id": "configDataOrder" })), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: this.getMessage("snkGridConfig.cancel"), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage("snkGridConfig.complete"), class: "ez-button--primary", onClick: () => this.finish() }))));
343
+ return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "ez-margin-bottom--medium" }, h("label", { class: "title" }, this.getMessage('snkGridConfig.gridConfiguration')), h("label", { class: "subtitle" }, this.getMessage('snkGridConfig.columnVisibilityOrder'))), h("div", { class: "button-close" }, h("ez-button", { mode: "icon", iconName: "close", size: "medium", class: "ez-button--tertiary", onClick: () => this.closeConfig() })))), h("div", { class: "grid-config__body" }, h("ez-collapsible-box", { id: 'group-select-columns', label: this.getMessage('snkGridConfig.columnsSelection'), "header-size": "medium", key: 'key_group-select-columns', value: this._collapsibleBoxListSelect, onEzChange: ({ detail }) => this._collapsibleBoxListOrder = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { leftList: this._hiddenList, leftTitle: this.getMessage('snkGridConfig.availableColumns'), rightList: this._visibleList, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), onEzRightListChanged: ({ detail }) => this.handleRightListChange(detail), emptyMessage: {
344
+ LEFT_LIST: this.getMessage('snkGridConfig.emptyMensage.left'),
345
+ RIGHT_LIST: this.getMessage('snkGridConfig.emptyMensage.right'),
346
+ }, entityLabel: 'coluna', entityLabelPlural: 'colunas' }))), h("ez-collapsible-box", { id: 'ID_group-order-columns', label: this.getMessage('snkGridConfig.dataOrdering'), "header-size": "medium", key: 'KEY_group-order-columns', value: this._collapsibleBoxListOrder, onEzChange: ({ detail }) => this._collapsibleBoxListSelect = !detail }, h("div", { class: "grid-config__main" }, h("ez-double-list", { rightList: this._orderListItems, rightTitle: this.getMessage('snkGridConfig.selectedColumns'), useOnlyRightList: true, slotsListBuilder: this.getListSlots(), emptyMessage: {
347
+ RIGHT_LIST: this.getMessage('snkGridConfig.emptyMensage.right'),
348
+ }, entityLabel: 'coluna', entityLabelPlural: 'colunas' })))), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: this.getMessage('snkGridConfig.cancel'), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage('snkGridConfig.complete'), class: "ez-button--primary", onClick: () => this.finish() }))));
490
349
  }
491
350
  static get is() { return "snk-grid-config"; }
492
351
  static get encapsulation() { return "scoped"; }
@@ -600,6 +459,12 @@ export class SnkGridConfig {
600
459
  }
601
460
  };
602
461
  }
462
+ static get states() {
463
+ return {
464
+ "_collapsibleBoxListOrder": {},
465
+ "_collapsibleBoxListSelect": {}
466
+ };
467
+ }
603
468
  static get events() {
604
469
  return [{
605
470
  "method": "configChange",
@@ -1,5 +1,6 @@
1
1
  ez-combo-box {
2
2
  width: 100px;
3
+ --ez-text-input__margin-bottom: 0px;
3
4
  }
4
5
 
5
6
  .grid-config-combo {
@@ -780,7 +780,7 @@ export class SnkSimpleCrud {
780
780
  }
781
781
  return (h("snk-data-unit", { ref: ref => this._snkDataUnit = ref, class: "simple-crud__container", dataUnit: this.dataUnit, useCancelConfirm: this.useCancelConfirm, onDataStateChange: evt => this.onDataStateChange(evt), onCancelEdition: this.handleCancelEdit.bind(this), pageSize: this.getPageSize(), onInsertionMode: this.handleDataUnitOnInsertionMode.bind(this), onDataUnitReady: (evt) => this.dataUnitReady.emit(evt.detail), onMessagesBuilderUpdated: evt => this.messagesBuilder = evt.detail, onDataUnitFieldsHidded: this.updateFormConfig.bind(this), domainMessagesBuilder: this.domainMessagesBuilder }, h("header", null, h("slot", { name: "snkSimpleCrudHeader" })), h("section", { class: `ez-box ez-box--no-outline ${this.outlineMode ? 'ez-box--outline' : 'ez-box--shadow'} simple-crud__container-section`, ref: (ref) => this._container = ref, tabindex: "0" }, h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "simple-crud" }, h("stack-item", null, h("ez-grid", { class: "ez-margin-bottom--large ez-box--no-outline", ref: ref => this._grid = ref, dataUnit: this.dataUnit, config: this.gridConfig, "no-header": true, multipleSelection: this.multipleSelection, onEzDoubleClick: () => this.goToView(VIEW_MODE.FORM), onConfigChange: evt => this.gridConfigChangeHandler(evt), columnfilterDataSource: this.dataUnit.name && this.dataUnit.name.includes(InMemoryLoader.IN_MEMORY_DATA_UNIT_NAME)
782
782
  ? undefined
783
- : this._multiSelectionListDataSource, useEnterLikeTab: this.useEnterLikeTab, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableContinuousInsert: this.enableContinuousInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, outlineMode: this.outlineMode, tabindex: "0", paginationCounterMode: this.paginationCounterMode }, this.renderTaskbarContent(VIEW_MODE.GRID), h("div", { slot: "footer" }, h("slot", { name: "snkSimpleCrudFooter" })))), h("stack-item", null, this.renderTaskbarContent(VIEW_MODE.FORM), h("ez-form", { ref: (ref) => this._form = ref, class: `ez-margin-top--large ez-box--no-outline`, dataUnit: this.dataUnit, config: this.getFormConfig(), fieldToFocus: this._fieldToGetFocus, onEzFormSetFields: (evt) => this.handleFormSetFields(evt.detail), onEzFormRequestClearFieldToFocus: this.clearFieldToFocusHandler.bind(this), elementFocusSearchField: this._container, tabindex: "0" }), h("snk-simple-form-config", { ref: (ref) => this._snkSimpleFormConfig = ref, dataUnit: this.dataUnit, onSnkConfigSaved: this.handleFormConfigSaved.bind(this), configName: (_a = this.formLegacyConfigName) !== null && _a !== void 0 ? _a : this.configName })), this.messagesBuilder && h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.goToView(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showConfiguratorButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this.resolveResourceID(), customContainerId: this._customContainerId, layoutFormConfig: this.layoutFormConfig })), h("div", { id: `${this._customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }))), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._showPopUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this.gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resolveResourceID() }))));
783
+ : this._multiSelectionListDataSource, useEnterLikeTab: this.useEnterLikeTab, autoFocus: this.autoFocus, enableGridInsert: this.enableGridInsert, enableContinuousInsert: this.enableContinuousInsert, enableLockManagerTaskbarClick: this.enableLockManagerTaskbarClick, enableLockManagerLoadingComp: this.enableLockManagerLoadingComp, outlineMode: this.outlineMode, tabindex: "0", paginationCounterMode: this.paginationCounterMode }, this.renderTaskbarContent(VIEW_MODE.GRID), h("div", { slot: "footer" }, h("slot", { name: "snkSimpleCrudFooter" })))), h("stack-item", null, this.renderTaskbarContent(VIEW_MODE.FORM), h("ez-form", { ref: (ref) => this._form = ref, class: `ez-margin-top--large ez-box--no-outline`, dataUnit: this.dataUnit, config: this.getFormConfig(), fieldToFocus: this._fieldToGetFocus, onEzFormSetFields: (evt) => this.handleFormSetFields(evt.detail), onEzFormRequestClearFieldToFocus: this.clearFieldToFocusHandler.bind(this), elementFocusSearchField: this._container, tabindex: "0" }), h("snk-simple-form-config", { ref: (ref) => this._snkSimpleFormConfig = ref, dataUnit: this.dataUnit, onSnkConfigSaved: this.handleFormConfigSaved.bind(this), configName: (_a = this.formLegacyConfigName) !== null && _a !== void 0 ? _a : this.configName })), this.messagesBuilder && h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._currentViewMode, messagesBuilder: this.messagesBuilder, onConfigSelected: (evt) => this.goToView(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail), showActionButtons: this.showConfiguratorButtons, onSave: evt => this.handleConfiguratorEvent(evt, 'SAVE'), onCancel: evt => this.handleConfiguratorEvent(evt, 'CANCEL'), resourceID: this.resolveResourceID(), customContainerId: this._customContainerId, layoutFormConfig: this.layoutFormConfig })), h("div", { id: `${this._customContainerId}` }, h("slot", { name: "SnkConfigContainerSlot" }))), h("ez-popup", { size: "medium", heightMode: "auto", useHeader: false, opened: this._showPopUpGridConfig, onEzClosePopup: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this.gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, configName: this.configName, onConfigChange: (evt) => this.modalConfigChangeHandler(evt), onConfigCancel: () => this.closeGridConfig(), resourceID: this.resolveResourceID() }))));
784
784
  }
785
785
  static get is() { return "snk-simple-crud"; }
786
786
  static get encapsulation() { return "scoped"; }
@@ -10,6 +10,7 @@
10
10
  }
11
11
 
12
12
  .config-lists {
13
+ width: 100%;
13
14
  margin-bottom: 12px;
14
15
  }
15
16
 
@@ -80,7 +80,7 @@ export class SnkSimpleFormConfig {
80
80
  this.snkConfigSaved.emit();
81
81
  }
82
82
  render() {
83
- return (h("ez-popup", { ref: (ref) => this.ezPopupRef = ref, heightMode: 'auto', size: 'auto', ezTitle: 'Configurar formul\u00E1rio' }, h("div", { class: 'config-container' }, h("div", { class: 'config-lists' }, h("ez-double-list", { ref: (ref) => this.ezDoubleListRef = ref, leftList: this.avaliableFields, leftTitle: 'Campos disponíveis', rightList: this.selectedFields, rightTitle: 'Campos selecionados', onEzRightListChanged: ({ detail }) => this.fieldsToSave = [...detail], entityLabel: 'campo', entityLabelPlural: 'campos' })), h("div", { class: 'config-actions' }, h("ez-button", { label: 'Restaurar', onClick: this.handleResetConfigs.bind(this), size: 'small' }), h("ez-button", { label: 'Cancelar', onClick: this.handleCancel.bind(this), size: 'small' }), h("ez-button", { label: 'Salvar', class: 'ez-button--primary', onClick: this.handleSave.bind(this), size: 'small' })))));
83
+ return (h("ez-popup", { ref: (ref) => this.ezPopupRef = ref, heightMode: 'auto', size: 'medium', ezTitle: 'Configurar formul\u00E1rio' }, h("div", { class: 'config-container' }, h("div", { class: 'config-lists' }, h("ez-double-list", { ref: (ref) => this.ezDoubleListRef = ref, leftList: this.avaliableFields, leftTitle: 'Campos disponíveis', rightList: this.selectedFields, rightTitle: 'Campos selecionados', onEzRightListChanged: ({ detail }) => this.fieldsToSave = [...detail], entityLabel: 'campo', entityLabelPlural: 'campos' })), h("div", { class: 'config-actions' }, h("ez-button", { label: 'Restaurar', onClick: this.handleResetConfigs.bind(this), size: 'small' }), h("ez-button", { label: 'Cancelar', onClick: this.handleCancel.bind(this), size: 'small' }), h("ez-button", { label: 'Salvar', class: 'ez-button--primary', onClick: this.handleSave.bind(this), size: 'small' })))));
84
84
  }
85
85
  static get is() { return "snk-simple-form-config"; }
86
86
  static get originalStyleUrls() {
@@ -7,14 +7,22 @@ export const snkGridMessages = {
7
7
  };
8
8
  export const snkGridConfigMessages = {
9
9
  gridConfiguration: "Configuração da Grade",
10
- columnVisibilityOrder: "Defina visibilidade e ordem das colunas.",
10
+ columnVisibilityOrder: "Arraste os itens para definir a ordem e visibilidade das colunas da sua grade.",
11
11
  sortingSequence: "Sequência da ordenação",
12
12
  findColumn: "Localizar coluna",
13
13
  cancel: "Cancelar",
14
14
  complete: "Concluir",
15
+ columnsSelection: "Seleção de colunas",
16
+ availableColumns: "Colunas disponíveis",
17
+ selectedColumns: "Colunas selecionadas",
18
+ dataOrdering: "Ordenação de dados",
19
+ emptyMensage: {
20
+ left: "Nenhuma coluna disponível",
21
+ right: "Nenhuma coluna selecionada"
22
+ },
15
23
  tab: {
16
24
  columns: "Colunas",
17
- lineOrdering: "Ordenação das linhas",
25
+ lineOrdering: "Ordenação das linhas"
18
26
  },
19
27
  info: {
20
28
  successfullyConfigSaved: "As configurações foram salvas com sucesso!"
@@ -280,14 +280,22 @@ const snkGridMessages = {
280
280
  };
281
281
  const snkGridConfigMessages = {
282
282
  gridConfiguration: "Configuração da Grade",
283
- columnVisibilityOrder: "Defina visibilidade e ordem das colunas.",
283
+ columnVisibilityOrder: "Arraste os itens para definir a ordem e visibilidade das colunas da sua grade.",
284
284
  sortingSequence: "Sequência da ordenação",
285
285
  findColumn: "Localizar coluna",
286
286
  cancel: "Cancelar",
287
287
  complete: "Concluir",
288
+ columnsSelection: "Seleção de colunas",
289
+ availableColumns: "Colunas disponíveis",
290
+ selectedColumns: "Colunas selecionadas",
291
+ dataOrdering: "Ordenação de dados",
292
+ emptyMensage: {
293
+ left: "Nenhuma coluna disponível",
294
+ right: "Nenhuma coluna selecionada"
295
+ },
288
296
  tab: {
289
297
  columns: "Colunas",
290
- lineOrdering: "Ordenação das linhas",
298
+ lineOrdering: "Ordenação das linhas"
291
299
  },
292
300
  info: {
293
301
  successfullyConfigSaved: "As configurações foram salvas com sucesso!"