@sankhyalabs/ezui 5.22.0-dev.140 → 5.22.0-dev.142
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.
- package/dist/cjs/ez-double-list.cjs.entry.js +114 -53
- package/dist/cjs/{ez-tooltip.cjs.entry.js → ez-filter-input_2.cjs.entry.js} +123 -1
- package/dist/cjs/ez-grid.cjs.entry.js +15 -1
- package/dist/cjs/ez-sortable-list.cjs.entry.js +3510 -0
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/index-a7b0c73d.js +6 -6
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/ez-double-list/doubleListHelper.js +9 -10
- package/dist/collection/components/ez-double-list/ez-double-list.css +6 -38
- package/dist/collection/components/ez-double-list/ez-double-list.js +168 -50
- package/dist/collection/components/ez-grid/ez-grid.js +43 -4
- package/dist/collection/components/ez-grid/interfaces/IGridMode.js +1 -0
- package/dist/collection/components/ez-grid/interfaces/index.js +1 -0
- package/dist/collection/components/ez-sortable-list/ez-sortable-list.css +226 -0
- package/dist/collection/components/ez-sortable-list/ez-sortable-list.js +582 -0
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +3652 -70
- package/dist/esm/ez-double-list.entry.js +115 -54
- package/dist/esm/{ez-tooltip.entry.js → ez-filter-input_2.entry.js} +124 -3
- package/dist/esm/ez-grid.entry.js +15 -1
- package/dist/esm/ez-sortable-list.entry.js +3506 -0
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/index-baa5e267.js +6 -6
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-59561756.entry.js +7 -0
- package/dist/ezui/p-63cb493e.entry.js +1 -0
- package/dist/ezui/{p-e09514b6.entry.js → p-b38411b4.entry.js} +1 -1
- package/dist/ezui/p-e4528470.entry.js +1 -0
- package/dist/types/components/ez-double-list/doubleListHelper.d.ts +4 -2
- package/dist/types/components/ez-double-list/ez-double-list.d.ts +60 -24
- package/dist/types/components/ez-grid/ez-grid.d.ts +6 -1
- package/dist/types/components/ez-grid/interfaces/IGridMode.d.ts +1 -0
- package/dist/types/components/ez-grid/interfaces/index.d.ts +1 -0
- package/dist/types/components/ez-sortable-list/ez-sortable-list.d.ts +91 -0
- package/dist/types/components.d.ts +194 -4
- package/package.json +5 -1
- package/react/components.d.ts +1 -0
- package/react/components.js +1 -0
- package/react/components.js.map +1 -1
- package/dist/cjs/ez-filter-input.cjs.entry.js +0 -129
- package/dist/esm/ez-filter-input.entry.js +0 -125
- package/dist/ezui/p-20c024f7.entry.js +0 -1
- package/dist/ezui/p-79044c3e.entry.js +0 -1
- package/dist/ezui/p-7e677b7b.entry.js +0 -1
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-a7b0c73d.js');
|
|
6
6
|
const core = require('@sankhyalabs/core');
|
|
7
7
|
const ezListHelper = require('./ezListHelper-0d3970b4.js');
|
|
8
|
-
const EzScrollDirection = require('./EzScrollDirection-b2c99895.js');
|
|
9
8
|
|
|
10
9
|
function moveItems(selectedItemsList, itemsList, foward) {
|
|
11
10
|
if (!selectedItemsList.length)
|
|
@@ -64,21 +63,20 @@ function transferAll({ from, to, selectedFrom, selectedTo }) {
|
|
|
64
63
|
from = [];
|
|
65
64
|
return { from, to, selectedFrom, selectedTo };
|
|
66
65
|
}
|
|
67
|
-
function transferItems({ from, to, selectedFrom, selectedTo }) {
|
|
66
|
+
function transferItems({ from, to, selectedFrom, selectedTo, insertIndex = to.length, }) {
|
|
68
67
|
if (!from.length)
|
|
69
68
|
return { from, to, selectedFrom, selectedTo };
|
|
70
69
|
const itemsToTransfer = getItemsToTransfer(to, selectedFrom, from);
|
|
71
70
|
if (!itemsToTransfer.length)
|
|
72
71
|
return { from, to, selectedFrom, selectedTo };
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
return { from, to, selectedFrom, selectedTo };
|
|
72
|
+
let updatedTo = to.map(i => setItemSelection(i, false));
|
|
73
|
+
updatedTo.splice(insertIndex, 0, ...itemsToTransfer.map(i => setItemSelection(i, true)));
|
|
74
|
+
return {
|
|
75
|
+
from: from.filter(item => !selectedFrom.includes(item.id)),
|
|
76
|
+
to: updatedTo,
|
|
77
|
+
selectedFrom: [],
|
|
78
|
+
selectedTo: [...selectedFrom],
|
|
79
|
+
};
|
|
82
80
|
}
|
|
83
81
|
function getItemsToTransfer(to, selectedFrom, from) {
|
|
84
82
|
const toListIds = to.map(item => item.id);
|
|
@@ -90,7 +88,7 @@ function setItemSelection(item, select) {
|
|
|
90
88
|
return Object.assign(Object.assign({}, item), { selected: select });
|
|
91
89
|
}
|
|
92
90
|
|
|
93
|
-
const ezDoubleListCss = ".sc-ez-double-list-h{display:flex;flex-direction:row;gap:8px;align-items:center;font-family:var(--font-pattern, \"Roboto\")
|
|
91
|
+
const ezDoubleListCss = ".sc-ez-double-list-h{display:flex;flex-direction:row;gap:8px;align-items:center;font-family:var(--font-pattern, \"Roboto\");width:100%}@media screen and (max-width: 1366px){.group.sc-ez-double-list{height:350px}}.list__container.sc-ez-double-list{height:100%;width:100%;min-height:150px;overflow:auto;display:flex}.actions__column.sc-ez-double-list{display:flex;flex-direction:column;gap:4px}";
|
|
94
92
|
|
|
95
93
|
const EzDoubleList = class {
|
|
96
94
|
constructor(hostRef) {
|
|
@@ -99,8 +97,6 @@ const EzDoubleList = class {
|
|
|
99
97
|
this.ezRightListChanged = index.createEvent(this, "ezRightListChanged", 7);
|
|
100
98
|
this.LEFT_LIST_ID = 'LEFT-LIST-ID';
|
|
101
99
|
this.RIGHT_LIST_ID = 'RIGHT-LIST-ID';
|
|
102
|
-
this.LEFT_FILTER_ID = 'LEFT-FILTER-ID';
|
|
103
|
-
this.RIGHT_FILTER_ID = 'RIGHT-FILTER-ID';
|
|
104
100
|
this.leftList = [];
|
|
105
101
|
this.leftTitle = undefined;
|
|
106
102
|
this.rightList = [];
|
|
@@ -108,7 +104,10 @@ const EzDoubleList = class {
|
|
|
108
104
|
this.entityLabelPlural = 'itens';
|
|
109
105
|
this.leftListLabel = 'disponíveis';
|
|
110
106
|
this.rightListLabel = 'selecionados';
|
|
107
|
+
this.useOnlyRightList = false;
|
|
111
108
|
this.rightTitle = undefined;
|
|
109
|
+
this.emptyMessage = undefined;
|
|
110
|
+
this.slotsListBuilder = undefined;
|
|
112
111
|
this.leftFilteredList = [];
|
|
113
112
|
this.rightFilteredList = [];
|
|
114
113
|
this.selectedLeftList = [];
|
|
@@ -130,23 +129,31 @@ const EzDoubleList = class {
|
|
|
130
129
|
return;
|
|
131
130
|
this.ezRightListChanged.emit(newValue);
|
|
132
131
|
}
|
|
133
|
-
handleFilterChangeLeft(value) {
|
|
134
|
-
this.leftFilteredList = core.ArrayUtils.applyStringFilter(value, this.leftList, true, 'label');
|
|
135
|
-
this.isFilteringLeft = this.leftFilteredList.length !== this.leftList.length;
|
|
136
|
-
}
|
|
137
|
-
handleFilterChangeRight(value) {
|
|
138
|
-
this.rightFilteredList = core.ArrayUtils.applyStringFilter(value, this.rightList, true, 'label');
|
|
139
|
-
this.isFilteringRight = this.rightFilteredList.length !== this.rightList.length;
|
|
140
|
-
}
|
|
141
132
|
async handleChangeLeft({ detail }) {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
133
|
+
if (!detail.to.getAttribute('id') || detail.to.getAttribute('id') !== this.RIGHT_LIST_ID) {
|
|
134
|
+
this.leftList = [...this.reorderArray(detail.dataSource, detail.selectItens, detail.newIndex)];
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
detail.selectItens = detail.selectItens.filter(id => this.rightList.every(item => item.id !== id));
|
|
138
|
+
this.leftList = [...detail.dataSource];
|
|
139
|
+
this.selectedLeftList = [...detail.selectItens];
|
|
140
|
+
this.transferToRight(detail === null || detail === void 0 ? void 0 : detail.newIndex);
|
|
145
141
|
}
|
|
146
142
|
async handleChangeRight({ detail }) {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
143
|
+
if (!detail.to.getAttribute('id') || detail.to.getAttribute('id') !== this.LEFT_LIST_ID) {
|
|
144
|
+
this.rightList = [...this.reorderArray(detail.dataSource, detail.selectItens, detail.newIndex)];
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
detail.selectItens = detail.selectItens.filter(id => this.leftList.every(item => item.id !== id));
|
|
148
|
+
this.rightList = [...detail.dataSource];
|
|
149
|
+
this.selectedRightList = [...detail.selectItens];
|
|
150
|
+
this.transferToLeft(detail === null || detail === void 0 ? void 0 : detail.newIndex);
|
|
151
|
+
}
|
|
152
|
+
reorderArray(allItems, itemIdsToMove, insertIndex) {
|
|
153
|
+
const filteredItems = allItems.filter(i => !itemIdsToMove.includes(i.id));
|
|
154
|
+
const itemsToMove = allItems.filter(i => itemIdsToMove.includes(i.id));
|
|
155
|
+
filteredItems.splice(insertIndex, 0, ...itemsToMove);
|
|
156
|
+
return filteredItems;
|
|
150
157
|
}
|
|
151
158
|
enableTransferAllToRight() {
|
|
152
159
|
return this.leftList.length > 0;
|
|
@@ -180,33 +187,43 @@ const EzDoubleList = class {
|
|
|
180
187
|
getRightSelectedItemsIndex() {
|
|
181
188
|
return this.selectedRightList.map(id => this.rightList.findIndex(original => original.id === id));
|
|
182
189
|
}
|
|
183
|
-
transferToRight() {
|
|
184
|
-
const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToRightConfig());
|
|
185
|
-
|
|
190
|
+
transferToRight(insertIndex) {
|
|
191
|
+
const { from, to, selectedFrom, selectedTo } = transferItems(Object.assign(Object.assign({}, this.buildTransferToRightConfig()), { insertIndex: insertIndex !== null && insertIndex !== void 0 ? insertIndex : 0 }));
|
|
192
|
+
//Eh preciso limpar a lista antes de atualiza-la por conta de um bug no ciclo de vida do sortable.js
|
|
193
|
+
this.leftList = [];
|
|
194
|
+
requestAnimationFrame(() => this.leftList = [...from]);
|
|
186
195
|
this.rightList = [...to];
|
|
187
196
|
this.selectedLeftList = [...selectedFrom];
|
|
188
197
|
this.selectedRightList = [...selectedTo];
|
|
189
198
|
}
|
|
190
|
-
transferToLeft() {
|
|
191
|
-
const { from, to, selectedFrom, selectedTo } = transferItems(this.buildTransferToLeftConfig());
|
|
192
|
-
|
|
199
|
+
transferToLeft(insertIndex) {
|
|
200
|
+
const { from, to, selectedFrom, selectedTo } = transferItems(Object.assign(Object.assign({}, this.buildTransferToLeftConfig()), { insertIndex: insertIndex !== null && insertIndex !== void 0 ? insertIndex : 0 }));
|
|
201
|
+
//Eh preciso limpar a lista antes de atualiza-la por conta de um bug no ciclo de vida do sortable.js
|
|
202
|
+
this.rightList = [];
|
|
203
|
+
requestAnimationFrame(() => this.rightList = [...from]);
|
|
193
204
|
this.leftList = [...to];
|
|
194
205
|
this.selectedRightList = [...selectedFrom];
|
|
195
206
|
this.selectedLeftList = [...selectedTo];
|
|
196
207
|
}
|
|
197
|
-
handleTransferAllToRight() {
|
|
208
|
+
async handleTransferAllToRight() {
|
|
198
209
|
const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToRightConfig());
|
|
199
210
|
this.leftList = [...from];
|
|
200
211
|
this.rightList = [...to];
|
|
201
212
|
this.selectedLeftList = [...selectedFrom];
|
|
202
213
|
this.selectedRightList = [...selectedTo];
|
|
214
|
+
requestAnimationFrame(async () => {
|
|
215
|
+
await this.clearSelectionAll();
|
|
216
|
+
});
|
|
203
217
|
}
|
|
204
|
-
handleTransferAllToLeft() {
|
|
218
|
+
async handleTransferAllToLeft() {
|
|
205
219
|
const { from, to, selectedFrom, selectedTo } = transferAll(this.buildTransferToLeftConfig());
|
|
206
220
|
this.rightList = [...from];
|
|
207
221
|
this.leftList = [...to];
|
|
208
222
|
this.selectedRightList = [...selectedFrom];
|
|
209
223
|
this.selectedLeftList = [...selectedTo];
|
|
224
|
+
requestAnimationFrame(async () => {
|
|
225
|
+
await this.clearSelectionAll();
|
|
226
|
+
});
|
|
210
227
|
}
|
|
211
228
|
buildTransferToRightConfig() {
|
|
212
229
|
return {
|
|
@@ -249,33 +266,77 @@ const EzDoubleList = class {
|
|
|
249
266
|
const itemsToMove = this.rightList.filter(item => this.selectedRightList.includes(item.id));
|
|
250
267
|
return { itemsToKeep, itemsToMove };
|
|
251
268
|
}
|
|
252
|
-
handleTransferToRight() {
|
|
269
|
+
async handleTransferToRight() {
|
|
253
270
|
this.transferToRight();
|
|
254
271
|
this.leftFilteredList = [];
|
|
255
|
-
this.
|
|
272
|
+
await this.leftEzListInstance.clearSelection();
|
|
256
273
|
}
|
|
257
|
-
handleTransferToLeft() {
|
|
274
|
+
async handleTransferToLeft() {
|
|
258
275
|
this.transferToLeft();
|
|
259
276
|
this.rightFilteredList = [];
|
|
260
|
-
this.
|
|
277
|
+
await this.rightEzListInstance.clearSelection();
|
|
261
278
|
}
|
|
262
|
-
|
|
263
|
-
|
|
279
|
+
async clearSelectionAll() {
|
|
280
|
+
await this.rightEzListInstance.clearSelection();
|
|
281
|
+
await this.leftEzListInstance.clearSelection();
|
|
264
282
|
}
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
}
|
|
269
|
-
return (index.h("ez-scroller", { direction: EzScrollDirection.EzScrollDirection.VERTICAL, activeShadow: true }, index.h("ez-list", { ref: (ref) => this.leftEzListInstance = ref, id: this.LEFT_LIST_ID, hoverFeedback: true, dataSource: this.isFilteringLeft ? this.leftFilteredList : this.leftList, ezDraggable: !this.isFilteringLeft, enableMultipleSelection: true, onEzChange: this.handleChangeLeft.bind(this), ezSelectable: true, onEzSelectMultipleItems: this.handleSelectLeftItem.bind(this), onEzDoubleClick: this.handleTransferToRight.bind(this) })));
|
|
283
|
+
handleChooseLeft() {
|
|
284
|
+
requestAnimationFrame(async () => {
|
|
285
|
+
await this.rightEzListInstance.clearSelection();
|
|
286
|
+
});
|
|
270
287
|
}
|
|
271
|
-
|
|
272
|
-
if (
|
|
273
|
-
return
|
|
274
|
-
|
|
275
|
-
|
|
288
|
+
handleChooseRight() {
|
|
289
|
+
if (this.useOnlyRightList)
|
|
290
|
+
return;
|
|
291
|
+
requestAnimationFrame(async () => {
|
|
292
|
+
await this.leftEzListInstance.clearSelection();
|
|
293
|
+
});
|
|
294
|
+
}
|
|
295
|
+
renderList(props) {
|
|
296
|
+
const { idSortableList, list, isFiltering, filteredList, emptyMessage, slotConfig, callbacks, title } = props;
|
|
297
|
+
return (index.h("ez-sortable-list", { ref: callbacks === null || callbacks === void 0 ? void 0 : callbacks.setRef, title: title, idSortableList: idSortableList, emptyMessage: emptyMessage, class: "ez-size-height--full", dataSource: isFiltering ? filteredList : list, hoverFeedback: true, enableMultipleSelection: true, removeItensMoved: true, entityLabel: this.entityLabel, entityLabelPlural: this.entityLabelPlural, itemRightSlotBuilder: slotConfig === null || slotConfig === void 0 ? void 0 : slotConfig.itemRightSlotBuilder, itemLeftSlotBuilder: slotConfig === null || slotConfig === void 0 ? void 0 : slotConfig.itemLeftSlotBuilder, onItemsReordered: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onChange.bind(this), onEzSelectItens: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onSelect.bind(this), onEzDoubleClick: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onDoubleClick.bind(this), onEzChoose: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onChoose.bind(this) }));
|
|
276
298
|
}
|
|
277
299
|
render() {
|
|
278
|
-
|
|
300
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
301
|
+
return (index.h(index.Host, null, !this.useOnlyRightList &&
|
|
302
|
+
index.h("div", { class: "list__container" }, this.leftList && this.renderList({
|
|
303
|
+
idSortableList: this.LEFT_LIST_ID,
|
|
304
|
+
list: this.leftList,
|
|
305
|
+
title: this.leftTitle,
|
|
306
|
+
isFiltering: this.isFilteringLeft,
|
|
307
|
+
filteredList: this.leftFilteredList,
|
|
308
|
+
emptyMessage: !!((_a = this.emptyMessage) === null || _a === void 0 ? void 0 : _a.LEFT_LIST) ? this.emptyMessage.LEFT_LIST : `Nenhum ${this.entityLabel} disponível`,
|
|
309
|
+
slotConfig: {
|
|
310
|
+
itemRightSlotBuilder: (_c = (_b = this.slotsListBuilder) === null || _b === void 0 ? void 0 : _b.LEFT_LIST) === null || _c === void 0 ? void 0 : _c.itemRightSlotBuilder,
|
|
311
|
+
itemLeftSlotBuilder: (_e = (_d = this.slotsListBuilder) === null || _d === void 0 ? void 0 : _d.LEFT_LIST) === null || _e === void 0 ? void 0 : _e.itemLeftSlotBuilder,
|
|
312
|
+
},
|
|
313
|
+
callbacks: {
|
|
314
|
+
setRef: (ref) => this.leftEzListInstance = ref,
|
|
315
|
+
onChange: (evt) => this.handleChangeLeft(evt),
|
|
316
|
+
onSelect: this.handleSelectLeftItem.bind(this),
|
|
317
|
+
onDoubleClick: this.handleTransferToRight.bind(this),
|
|
318
|
+
onChoose: this.handleChooseLeft.bind(this),
|
|
319
|
+
},
|
|
320
|
+
})), !this.useOnlyRightList &&
|
|
321
|
+
index.h("div", { class: 'actions__column' }, index.h("ez-button", { mode: "icon", iconName: "dual-chevron-right", enabled: this.enableTransferAllToRight(), title: `Mover todos para ${this.rightListLabel}`, size: "small", onClick: this.handleTransferAllToRight.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-right", enabled: this.enableTransferToRight(), title: `Mover para ${this.rightListLabel}`, size: "small", onClick: this.handleTransferToRight.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-left", enabled: this.enableTransferToLeft(), title: `Mover para ${this.leftListLabel}`, size: "small", onClick: this.handleTransferToLeft.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "dual-chevron-left", enabled: this.enableTransferAllToLeft(), title: `Mover todos para ${this.leftListLabel}`, size: "small", onClick: this.handleTransferAllToLeft.bind(this) })), index.h("div", { class: "list__container" }, this.rightList && this.renderList({
|
|
322
|
+
idSortableList: this.RIGHT_LIST_ID,
|
|
323
|
+
list: this.rightList,
|
|
324
|
+
title: this.rightTitle,
|
|
325
|
+
isFiltering: this.isFilteringRight,
|
|
326
|
+
filteredList: this.rightFilteredList,
|
|
327
|
+
emptyMessage: !!((_f = this.emptyMessage) === null || _f === void 0 ? void 0 : _f.RIGHT_LIST) ? this.emptyMessage.RIGHT_LIST : `Nenhum ${this.entityLabel} selecionado`,
|
|
328
|
+
slotConfig: {
|
|
329
|
+
itemRightSlotBuilder: (_h = (_g = this.slotsListBuilder) === null || _g === void 0 ? void 0 : _g.RIGHT_LIST) === null || _h === void 0 ? void 0 : _h.itemRightSlotBuilder,
|
|
330
|
+
itemLeftSlotBuilder: (_k = (_j = this.slotsListBuilder) === null || _j === void 0 ? void 0 : _j.RIGHT_LIST) === null || _k === void 0 ? void 0 : _k.itemLeftSlotBuilder,
|
|
331
|
+
},
|
|
332
|
+
callbacks: {
|
|
333
|
+
setRef: (ref) => this.rightEzListInstance = ref,
|
|
334
|
+
onChange: (evt) => this.handleChangeRight(evt),
|
|
335
|
+
onSelect: this.handleSelectRightItem.bind(this),
|
|
336
|
+
onDoubleClick: this.handleTransferToLeft.bind(this),
|
|
337
|
+
onChoose: this.handleChooseRight.bind(this),
|
|
338
|
+
},
|
|
339
|
+
})), index.h("div", { class: 'actions__column' }, index.h("ez-button", { mode: "icon", iconName: "dual-chevron-up", enabled: this.enableMoveUp(true), title: "Mover para primeira posi\u00E7\u00E3o", size: "small", onClick: this.handleMoveToTop.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-up", enabled: this.enableMoveUp(), title: "Mover para cima", size: "small", onClick: this.handleMoveUp.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "chevron-down", enabled: this.enableMoveDown(), title: "Mover para baixo", size: "small", onClick: this.handleMoveDown.bind(this) }), index.h("ez-button", { mode: "icon", iconName: "dual-chevron-down", enabled: this.enableMoveDown(true), title: "Mover para \u00FAltima posi\u00E7\u00E3o", size: "small", onClick: this.handleMoveToBottom.bind(this) }))));
|
|
279
340
|
}
|
|
280
341
|
static get watchers() { return {
|
|
281
342
|
"leftList": ["observeLeftList"],
|
|
@@ -3,8 +3,129 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-a7b0c73d.js');
|
|
6
|
-
const floatingUi_dom_esm = require('./floating-ui.dom.esm-017acce4.js');
|
|
7
6
|
const core = require('@sankhyalabs/core');
|
|
7
|
+
const CSSVarsUtils = require('./CSSVarsUtils-f20973d1.js');
|
|
8
|
+
const floatingUi_dom_esm = require('./floating-ui.dom.esm-017acce4.js');
|
|
9
|
+
|
|
10
|
+
const ezFilterInputCss = ":host{display:block;width:100%}";
|
|
11
|
+
|
|
12
|
+
const EzFilterInput = class {
|
|
13
|
+
constructor(hostRef) {
|
|
14
|
+
index.registerInstance(this, hostRef);
|
|
15
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
16
|
+
this.ezSearching = index.createEvent(this, "ezSearching", 7);
|
|
17
|
+
this.ezFocusIn = index.createEvent(this, "ezFocusIn", 7);
|
|
18
|
+
this._searchingText = "";
|
|
19
|
+
this.handleFocus = () => {
|
|
20
|
+
if (this._searchingText === "") {
|
|
21
|
+
this._textInput.value = "";
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
this._textInput.value = this._searchingText;
|
|
25
|
+
}
|
|
26
|
+
this.ezFocusIn.emit();
|
|
27
|
+
};
|
|
28
|
+
this.label = undefined;
|
|
29
|
+
this.value = undefined;
|
|
30
|
+
this.enabled = true;
|
|
31
|
+
this.errorMessage = undefined;
|
|
32
|
+
this.restrict = undefined;
|
|
33
|
+
this.mode = "regular";
|
|
34
|
+
this.asyncSearch = false;
|
|
35
|
+
this.canShowError = true;
|
|
36
|
+
this.autoFocus = false;
|
|
37
|
+
}
|
|
38
|
+
observeLabel() {
|
|
39
|
+
if (this._textInput) {
|
|
40
|
+
this._textInput.label = this.label;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
observeErrorMessage() {
|
|
44
|
+
if (this._textInput) {
|
|
45
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
observeValue(newValue, oldValue) {
|
|
49
|
+
if (this._textInput && newValue != oldValue) {
|
|
50
|
+
this._textInput.value = newValue;
|
|
51
|
+
this.ezChange.emit(newValue);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Aplica o foco no campo.
|
|
56
|
+
*/
|
|
57
|
+
async setFocus(options) {
|
|
58
|
+
this._textInput.setFocus(options);
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Remove o foco do campo.
|
|
62
|
+
*/
|
|
63
|
+
async setBlur() {
|
|
64
|
+
this._textInput.setBlur();
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Retorna se o conteúdo é inválido.
|
|
68
|
+
*/
|
|
69
|
+
async isInvalid() {
|
|
70
|
+
return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Método responsável por setar um novo valor ao campo.
|
|
74
|
+
*/
|
|
75
|
+
async setValue(newValue) {
|
|
76
|
+
if (!this.asyncSearch || this._textInput == undefined) {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
if (newValue !== this.value) {
|
|
80
|
+
this.value = newValue;
|
|
81
|
+
this._searchingText = "";
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
this._textInput.value = newValue;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Método responsável por resetar o valor do campo para o ultimo valor inputado.
|
|
89
|
+
*/
|
|
90
|
+
async endSearch() {
|
|
91
|
+
if (!this.asyncSearch || this._textInput == undefined) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
if (this._textInput.value !== this.value) {
|
|
95
|
+
this._textInput.value = this.value;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
handleChange(evt) {
|
|
99
|
+
const newValue = evt.detail;
|
|
100
|
+
this.errorMessage = "";
|
|
101
|
+
if (this.asyncSearch) {
|
|
102
|
+
this._searchingText = newValue;
|
|
103
|
+
this.ezSearching.emit(newValue);
|
|
104
|
+
}
|
|
105
|
+
else if (newValue !== this.value) {
|
|
106
|
+
this.value = newValue;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
componentDidLoad() {
|
|
110
|
+
CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
111
|
+
if (this.autoFocus) {
|
|
112
|
+
requestAnimationFrame(() => {
|
|
113
|
+
this.setFocus({ selectText: true });
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
render() {
|
|
118
|
+
core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
119
|
+
return (index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.handleChange(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode, onFocusin: this.handleFocus, canShowError: this.canShowError }, index.h("ez-icon", { slot: "leftIcon", iconName: "search" })));
|
|
120
|
+
}
|
|
121
|
+
get _elem() { return index.getElement(this); }
|
|
122
|
+
static get watchers() { return {
|
|
123
|
+
"label": ["observeLabel"],
|
|
124
|
+
"errorMessage": ["observeErrorMessage"],
|
|
125
|
+
"value": ["observeValue"]
|
|
126
|
+
}; }
|
|
127
|
+
};
|
|
128
|
+
EzFilterInput.style = ezFilterInputCss;
|
|
8
129
|
|
|
9
130
|
const ezTooltipCss = ":host{--triangle-size:8px;width:100%}.tooltip{position:absolute;z-index:var(--elevation--24);padding:var(--space--extra-small, 3px) var(--space--small, 6px);border-radius:var(--border--radius-small);box-sizing:border-box;font-family:var(--font-pattern\t, 'Roboto', sans-serif);font-size:var(--text--small, 12px);font-weight:var(--text-weight--medium, 400);text-align:center;width:max-content;display:none}.arrow{position:absolute;width:var(--triangle-size);height:var(--triangle-size);transform:rotate(45deg)}.default-tooltip{background:var(--title--primary, #2b3a54);color:var(--color--inverted)}.default-tooltip .arrow{background:var(--title--primary, #2b3a54)}.error-tooltip{background:var(--color-alert--error-800, #BD0025);color:var(--color--error-200, #F7E0E5)}.error-tooltip .arrow{background:var(--color-alert--error-800, #BD0025)}.success-tooltip{background:var(--color--success, #00cb94);color:var(--color--success-200, #EBFFFA)}.success-tooltip .arrow{background:var(--color--success, #00cb94)}.warning-tooltip{background:var(--color--warning, #f2d410);color:var(--color--warning-200, #FDF8D8)}.warning-tooltip .arrow{background:var(--color--warning, #f2d410)}";
|
|
10
131
|
|
|
@@ -132,4 +253,5 @@ const EzTooltip = class {
|
|
|
132
253
|
};
|
|
133
254
|
EzTooltip.style = ezTooltipCss;
|
|
134
255
|
|
|
256
|
+
exports.ez_filter_input = EzFilterInput;
|
|
135
257
|
exports.ez_tooltip = EzTooltip;
|
|
@@ -66266,6 +66266,7 @@ const EzGrid = class {
|
|
|
66266
66266
|
this.compact = false;
|
|
66267
66267
|
this.useSearchColumn = true;
|
|
66268
66268
|
this.suppressHorizontalScroll = false;
|
|
66269
|
+
this.mode = "complete";
|
|
66269
66270
|
}
|
|
66270
66271
|
/**
|
|
66271
66272
|
* Aplica a definição de colunas.
|
|
@@ -66422,6 +66423,14 @@ const EzGrid = class {
|
|
|
66422
66423
|
this._showPaginationDescription();
|
|
66423
66424
|
}
|
|
66424
66425
|
}
|
|
66426
|
+
async observeModeChange(newMode = this.mode) {
|
|
66427
|
+
if (newMode === "simple") {
|
|
66428
|
+
this.canEdit = false;
|
|
66429
|
+
this.multipleSelection = false;
|
|
66430
|
+
this.suppressCheckboxColumn = true;
|
|
66431
|
+
this.compact = true;
|
|
66432
|
+
}
|
|
66433
|
+
}
|
|
66425
66434
|
onSelectionChange(evt) {
|
|
66426
66435
|
this._currentPageSelected = evt.detail.selectionHeaderStatus === true;
|
|
66427
66436
|
if (this.dataUnit) {
|
|
@@ -66775,6 +66784,7 @@ const EzGrid = class {
|
|
|
66775
66784
|
}
|
|
66776
66785
|
connectedCallback() {
|
|
66777
66786
|
var _a;
|
|
66787
|
+
this.observeModeChange();
|
|
66778
66788
|
(_a = this._gridController) === null || _a === void 0 ? void 0 : _a.registryListeners();
|
|
66779
66789
|
}
|
|
66780
66790
|
componentWillRender() {
|
|
@@ -66807,6 +66817,9 @@ const EzGrid = class {
|
|
|
66807
66817
|
return this.columnfilterDataSource;
|
|
66808
66818
|
}
|
|
66809
66819
|
hideHeader() {
|
|
66820
|
+
if (this.mode === "simple") {
|
|
66821
|
+
return true;
|
|
66822
|
+
}
|
|
66810
66823
|
return !this._hasLeftButtons && !this._paginationInfo;
|
|
66811
66824
|
}
|
|
66812
66825
|
resolveLeftHeaderClass() {
|
|
@@ -66902,7 +66915,8 @@ const EzGrid = class {
|
|
|
66902
66915
|
static get watchers() { return {
|
|
66903
66916
|
"config": ["observeConfig"],
|
|
66904
66917
|
"_paginationInfo": ["updatePaginationTooltip"],
|
|
66905
|
-
"paginationCounterMode": ["observePaginationCounterMode"]
|
|
66918
|
+
"paginationCounterMode": ["observePaginationCounterMode"],
|
|
66919
|
+
"mode": ["observeModeChange"]
|
|
66906
66920
|
}; }
|
|
66907
66921
|
};
|
|
66908
66922
|
EzGrid.style = ezGridCss;
|