@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-79210.0 → 0.0.0-bugfix-dev-KB-76625.0
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-card-item_2.cjs.entry.js +1415 -7
- package/dist/cjs/ez-grid.cjs.entry.js +1 -4
- package/dist/cjs/ez-multi-selection-list.cjs.entry.js +186 -0
- package/dist/cjs/ez-popover-plus_3.cjs.entry.js +184 -0
- package/dist/cjs/ez-search.cjs.entry.js +28 -158
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/index-a7b0c73d.js +8 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/searchFormatters-b7e1ed1e.js +23 -0
- package/dist/collection/collection-manifest.json +3 -1
- package/dist/collection/components/ez-card-item/ez-card-item.css +1 -3
- package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +0 -3
- package/dist/collection/components/ez-grid/ez-grid.css +6 -0
- package/dist/collection/components/ez-popover-plus/ez-popover-plus.css +0 -64
- package/dist/collection/components/ez-popover-plus/ez-popover-plus.js +56 -130
- package/dist/collection/components/ez-popover-plus/subcomponent/ez-popover-core.css +67 -0
- package/dist/collection/components/ez-popover-plus/subcomponent/ez-popover-core.js +527 -0
- package/dist/collection/components/ez-search/ez-search.css +0 -219
- package/dist/collection/components/ez-search/ez-search.js +28 -167
- package/dist/collection/components/ez-search/subcomponent/search-list/search-list.css +227 -0
- package/dist/collection/components/ez-search/subcomponent/search-list/search-list.js +289 -0
- package/dist/collection/components/ez-search/utils/searchFormatters.js +18 -0
- package/dist/custom-elements/index.d.ts +12 -0
- package/dist/custom-elements/index.js +262 -185
- package/dist/esm/ez-card-item_2.entry.js +1415 -7
- package/dist/esm/ez-grid.entry.js +1 -4
- package/dist/esm/ez-multi-selection-list.entry.js +182 -0
- package/dist/esm/ez-popover-plus_3.entry.js +178 -0
- package/dist/esm/ez-search.entry.js +29 -159
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/index-baa5e267.js +8 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/searchFormatters-8229207e.js +20 -0
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-31da1b57.entry.js +1 -0
- package/dist/ezui/p-37201156.entry.js +1 -0
- package/dist/ezui/p-40a60148.js +1 -0
- package/dist/ezui/{p-e80d3452.entry.js → p-a5950a0d.entry.js} +1 -1
- package/dist/ezui/p-b7706b43.entry.js +1 -0
- package/dist/ezui/p-dc73e1fe.entry.js +1 -0
- package/dist/types/components/ez-popover-plus/ez-popover-plus.d.ts +8 -20
- package/dist/types/components/ez-popover-plus/subcomponent/ez-popover-core.d.ts +91 -0
- package/dist/types/components/ez-search/ez-search.d.ts +3 -13
- package/dist/types/components/ez-search/subcomponent/search-list/search-list.d.ts +23 -0
- package/dist/types/components/ez-search/utils/searchFormatters.d.ts +2 -0
- package/dist/types/components.d.ts +157 -3
- package/package.json +1 -1
- package/react/components.d.ts +2 -0
- package/react/components.js +2 -0
- package/react/components.js.map +1 -1
- package/dist/cjs/ez-multi-selection-list_2.cjs.entry.js +0 -1584
- package/dist/esm/ez-multi-selection-list_2.entry.js +0 -1579
- package/dist/ezui/p-58783dcf.entry.js +0 -1
- package/dist/ezui/p-65f471bc.entry.js +0 -1
- package/dist/ezui/p-b555cb24.entry.js +0 -1
|
@@ -65833,9 +65833,6 @@ class AgGridController {
|
|
|
65833
65833
|
if (cfgColumn.customWidth != undefined) {
|
|
65834
65834
|
return cfgColumn.customWidth;
|
|
65835
65835
|
}
|
|
65836
|
-
if (cfgColumn.width != undefined) {
|
|
65837
|
-
return cfgColumn.width;
|
|
65838
|
-
}
|
|
65839
65836
|
const field = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
|
|
65840
65837
|
if ((field === null || field === void 0 ? void 0 : field.userInterface) === core.UserInterface.SEARCH) {
|
|
65841
65838
|
return this.DEFAULT_MAX_SIZE;
|
|
@@ -66050,7 +66047,7 @@ class InMemoryFilterColumnDataSource {
|
|
|
66050
66047
|
}
|
|
66051
66048
|
}
|
|
66052
66049
|
|
|
66053
|
-
const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:var(--shadow);--ez-grid--min-height:300px;--ez-grid__container--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--shadow:var(--shadow--xsmall);--ez-grid__header--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--outline:none;--ez-grid__header--border:none;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid-header.shadow-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid-header.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow--outline);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.header-overlay.sc-ez-grid{padding-top:15px;margin-top:-12px}.grid__container.sc-ez-grid{outline:none;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color);border:var(--border--small) var(--color--strokes);border-radius:var(--border--radius-small)}.grid__container.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__container--shadow--outline);border:none;outline:none}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}.grid-header__pagination.sc-ez-grid{justify-content:flex-end;flex-wrap:nowrap}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.sc-ez-grid{display:none}.pagination-contracted.sc-ez-grid{width:100px}.pagination-expanded.sc-ez-grid{min-width:150px}.left__header-contracted.sc-ez-grid{width:calc(100% - 100px)}.left__header-expanded.sc-ez-grid{flex-grow:1}.cancel-pagination.sc-ez-grid{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:4px;padding:8px;width:180px}.cancel-pagination-btn.sc-ez-grid{color:var(--color--error);font-size:var(--text--medium);font-weight:var(--text-weight--large);font-family:var(--font-pattern, Roboto);text-wrap:nowrap;cursor:pointer}.spin.sc-ez-grid{animation-name:spin;animation-duration:5000ms;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
|
|
66050
|
+
const ezGridCss = ".sc-ez-grid-h{display:grid;grid-template-rows:auto 1fr auto;height:100%;width:100%;--ez-grid__header--background-color:var(--background--xlight, #FFF);--ez-grid__selection-counter--z-index:var(--visible, 1);--ez-grid__container--shadow:var(--shadow);--ez-grid--min-height:300px;--ez-grid__container--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--shadow:var(--shadow--xsmall);--ez-grid__header--shadow--outline:var(--shadow--outline) var(--color--strokes);--ez-grid__header--outline:none;--ez-grid__header--border:none;min-height:var(--ez-grid--min-height)}.grid-header.sc-ez-grid{display:grid;justify-content:space-between;align-items:center;grid-row-start:1;grid-template-columns:1fr;background-color:var(--ez-grid__header--background-color, #FFF)}.grid-header.shadow-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.grid-header.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__header--shadow--outline);border:var(--ez-grid__header--border);outline:var(--ez-grid__header--outline)}.header-overlay.sc-ez-grid{padding-top:15px;margin-top:-12px}.grid__container.sc-ez-grid{outline:none;box-shadow:var(--ez-grid__container--shadow);background-color:var(--ez-grid__header--background-color);border:var(--border--small) var(--color--strokes);border-radius:var(--border--radius-small)}.grid__container.outline-mode.sc-ez-grid{box-shadow:var(--ez-grid__container--shadow--outline);border:none;outline:none}.grid-header__popover.sc-ez-grid{position:relative;top:var(--space--sm, 16px)}.grid-header__container.sc-ez-grid{display:flex;align-items:center}.grid-header__position.sc-ez-grid{display:flex;align-items:center;justify-content:space-between}.grid__selection-counter.sc-ez-grid{position:fixed;white-space:nowrap;transform:translate(-50%, 0px);left:50%;opacity:0;bottom:-100%;transition:opacity 0.1s, bottom 0.5s}.grid__selection-counter--opened.sc-ez-grid{opacity:1;bottom:0px}.grid__btn-close.sc-ez-grid{display:flex;align-items:center;justify-content:center;padding:0;outline:none;width:20px;height:20px;border:none;background-color:unset;cursor:pointer}.grid__btn-clear.sc-ez-grid{--ez-button--link-color:var(--color--alert-warning-900, #8C6B00);--ez-button--link--hover-color:var(--color--alert-warning-900, #8C6B00)}[no-header].sc-ez-grid-h .grid-header.sc-ez-grid{height:0;padding:0}.grid-header__pagination.sc-ez-grid{justify-content:flex-end;flex-wrap:nowrap}.grid-header__pagination-label.sc-ez-grid{width:100%;white-space:nowrap}.overflowed.sc-ez-grid{display:none}.pagination-contracted.sc-ez-grid{width:100px}.pagination-expanded.sc-ez-grid{min-width:150px}.left__header-contracted.sc-ez-grid{width:calc(100% - 100px)}.left__header-expanded.sc-ez-grid{flex-grow:1}.grid__footer.sc-ez-grid{background-color:var(--background--xlight, #FFF);border-radius:0 0 var(--border--radius-medium) var(--border--radius-medium);box-shadow:var(--shadow--small)}.cancel-pagination.sc-ez-grid{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:4px;padding:8px;width:180px}.cancel-pagination-btn.sc-ez-grid{color:var(--color--error);font-size:var(--text--medium);font-weight:var(--text-weight--large);font-family:var(--font-pattern, Roboto);text-wrap:nowrap;cursor:pointer}.spin.sc-ez-grid{animation-name:spin;animation-duration:5000ms;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
|
|
66054
66051
|
|
|
66055
66052
|
const windowInstace = window;
|
|
66056
66053
|
const matches = (text, filter) => {
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-a7b0c73d.js');
|
|
6
|
+
const core = require('@sankhyalabs/core');
|
|
7
|
+
|
|
8
|
+
const ezMultiSelectionListCss = ".sc-ez-multi-selection-list-h{--ez-check--outter-gap:0px;--ez-multi-selection-default-height:322px;display:block;width:304px;height:var(--ez-multi-selection-default-height);min-height:fit-content;max-height:calc(100vh - 350px)}.multi-selection__input.sc-ez-multi-selection-list{margin-bottom:var(--space--2xs, 8px)}.multi-selection__content-options.sc-ez-multi-selection-list{position:relative;left:-4px}.multi-selection__select-all.sc-ez-multi-selection-list{height:var(--space--xl);margin:0 var(--space--small, 6px)}.multi-selection__list.sc-ez-multi-selection-list{max-height:calc(100vh - 435px);overflow-y:auto;overflow-x:clip}.multi-selection__list.sc-ez-multi-selection-list::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}";
|
|
9
|
+
|
|
10
|
+
var ViewScenarios;
|
|
11
|
+
(function (ViewScenarios) {
|
|
12
|
+
ViewScenarios["DATASOURCE_RESULTS"] = "DATASOURCE_RESULTS";
|
|
13
|
+
ViewScenarios["DATASOURCE_RESULTS_EMPTY"] = "DATASOURCE_RESULTS_EMPTY";
|
|
14
|
+
ViewScenarios["DATASOURCE_INIT"] = "DATASOURCE_INIT";
|
|
15
|
+
ViewScenarios["OPTIONS_EMPTY"] = "OPTIONS_EMPTY";
|
|
16
|
+
ViewScenarios["OPTIONS"] = "OPTIONS";
|
|
17
|
+
})(ViewScenarios || (ViewScenarios = {}));
|
|
18
|
+
const EzMuiltiSelectionList = class {
|
|
19
|
+
constructor(hostRef) {
|
|
20
|
+
index.registerInstance(this, hostRef);
|
|
21
|
+
this.changeFilteredOptions = index.createEvent(this, "changeFilteredOptions", 7);
|
|
22
|
+
this.columnName = undefined;
|
|
23
|
+
this.dataSource = undefined;
|
|
24
|
+
this.useOptions = false;
|
|
25
|
+
this.options = undefined;
|
|
26
|
+
this.isTextSearch = false;
|
|
27
|
+
this.filteredOptions = undefined;
|
|
28
|
+
this.displayOptions = undefined;
|
|
29
|
+
this.viewScenario = undefined;
|
|
30
|
+
this.displayOptionToCheckAllItems = true;
|
|
31
|
+
}
|
|
32
|
+
async clearFilteredOptions() {
|
|
33
|
+
this.setInitialScenario();
|
|
34
|
+
this.filteredOptions = [];
|
|
35
|
+
if (this.searchInput) {
|
|
36
|
+
this.searchInput.value = '';
|
|
37
|
+
}
|
|
38
|
+
if (this.filterInput) {
|
|
39
|
+
this.filterInput.value = '';
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
onChangeUseOptions() {
|
|
43
|
+
this.setInitialScenario();
|
|
44
|
+
}
|
|
45
|
+
onChangeOptions() {
|
|
46
|
+
if (this.options) {
|
|
47
|
+
this.filteredOptions = this.ordenationByCheckStateAndAlphabetically(this.options);
|
|
48
|
+
}
|
|
49
|
+
this.checkInput && this.changeCheckAllValeuFromFilteredOptions();
|
|
50
|
+
this.setInitialScenario();
|
|
51
|
+
}
|
|
52
|
+
onChangeFilteredOptions(optionsListUpdated) {
|
|
53
|
+
this.displayOptions = this.filteredOptions;
|
|
54
|
+
this.displayOptionToCheckAllItems = this.filteredOptions.length > 1;
|
|
55
|
+
this.checkInput && this.changeCheckAllValeuFromFilteredOptions();
|
|
56
|
+
this.changeFilteredOptions.emit(optionsListUpdated);
|
|
57
|
+
}
|
|
58
|
+
componentDidRender() {
|
|
59
|
+
this.changeCheckAllValeuFromFilteredOptions();
|
|
60
|
+
}
|
|
61
|
+
ordenationByCheckStateAndAlphabetically(filteredOptions) {
|
|
62
|
+
const listWithSelectChecked = [];
|
|
63
|
+
const listWithNotSelectChecked = [];
|
|
64
|
+
let emptyElement;
|
|
65
|
+
filteredOptions.forEach(item => {
|
|
66
|
+
if (item.value == undefined || item.label === "") {
|
|
67
|
+
emptyElement = Object.assign(Object.assign({}, item), { label: "(Vazio)" });
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
(item.check ? listWithSelectChecked.push(item) : listWithNotSelectChecked.push(item));
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
return (emptyElement == undefined ? [] : [emptyElement])
|
|
74
|
+
.concat(this.dataSource == undefined ? core.ArrayUtils.sortAlphabetically(listWithSelectChecked) : this.dataSource.sortItems(this.columnName, listWithSelectChecked))
|
|
75
|
+
.concat(this.dataSource == undefined ? core.ArrayUtils.sortAlphabetically(listWithNotSelectChecked) : this.dataSource.sortItems(this.columnName, listWithNotSelectChecked));
|
|
76
|
+
}
|
|
77
|
+
changeCheckAllValeuFromFilteredOptions() {
|
|
78
|
+
var _a, _b, _c, _d;
|
|
79
|
+
const selectAll = (_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a.every(item => item.check === true);
|
|
80
|
+
const notSelectAll = (_b = this.filteredOptions) === null || _b === void 0 ? void 0 : _b.every(item => item.check === false);
|
|
81
|
+
const selectIndeterminated = ((_c = this.filteredOptions) === null || _c === void 0 ? void 0 : _c.some(item => item.check === false)) && ((_d = this.filteredOptions) === null || _d === void 0 ? void 0 : _d.some(item => item.check === true)) && (!selectAll || !notSelectAll);
|
|
82
|
+
if (this.checkInput && selectAll) {
|
|
83
|
+
this.checkInput.indeterminate = false;
|
|
84
|
+
this.checkInput.value = true;
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
if (this.checkInput && selectIndeterminated) {
|
|
88
|
+
this.checkInput.indeterminate = true;
|
|
89
|
+
this.checkInput.value = false;
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
if (this.checkInput && notSelectAll) {
|
|
93
|
+
this.checkInput.indeterminate = false;
|
|
94
|
+
this.checkInput.value = false;
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
setInitialScenario() {
|
|
99
|
+
if (this.useOptions) {
|
|
100
|
+
this.viewScenario = ViewScenarios.OPTIONS;
|
|
101
|
+
this.changeCheckAllValeuFromFilteredOptions();
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
this.viewScenario = this.options && this.options.length > 0 ? ViewScenarios.DATASOURCE_RESULTS : ViewScenarios.DATASOURCE_INIT;
|
|
105
|
+
}
|
|
106
|
+
async searchWithDataSource(searchArgument, fieldName) {
|
|
107
|
+
const { argument, mode } = searchArgument;
|
|
108
|
+
if (mode !== 'PRELOAD' && fieldName) {
|
|
109
|
+
return this.dataSource.fetchData(argument, fieldName);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
handleSearchOnDataSource(event) {
|
|
113
|
+
var _a;
|
|
114
|
+
const optionsToSort = (_a = this.filteredOptions) !== null && _a !== void 0 ? _a : [];
|
|
115
|
+
if (event.detail && !optionsToSort.some(item => item.value == event.detail.value)) {
|
|
116
|
+
this.filteredOptions = this.ordenationByCheckStateAndAlphabetically([...optionsToSort, event.detail]);
|
|
117
|
+
}
|
|
118
|
+
this.viewScenario = ViewScenarios.DATASOURCE_RESULTS;
|
|
119
|
+
this.searchInput.value = "";
|
|
120
|
+
}
|
|
121
|
+
handleRemoveItemFromOptions(item) {
|
|
122
|
+
this.filteredOptions = this.ordenationByCheckStateAndAlphabetically(this.filteredOptions.filter(i => i.value !== item.value));
|
|
123
|
+
if (this.filteredOptions.length === 0) {
|
|
124
|
+
this.viewScenario = ViewScenarios.DATASOURCE_INIT;
|
|
125
|
+
}
|
|
126
|
+
if (this.searchInput) {
|
|
127
|
+
this.searchInput.value = '';
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
handleSearchOnOption(event) {
|
|
131
|
+
if (event.detail) {
|
|
132
|
+
this.displayOptions = core.ArrayUtils.applyStringFilter(event.detail, this.filteredOptions, true);
|
|
133
|
+
this.viewScenario = this.displayOptions.length === 0 ? ViewScenarios.OPTIONS_EMPTY : ViewScenarios.OPTIONS;
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
this.displayOptions = this.filteredOptions;
|
|
137
|
+
this.viewScenario = ViewScenarios.OPTIONS;
|
|
138
|
+
}
|
|
139
|
+
handleChangeSelectAllItems(event) {
|
|
140
|
+
this.filteredOptions = this.ordenationByCheckStateAndAlphabetically([
|
|
141
|
+
...this.filteredOptions.map(item => {
|
|
142
|
+
item.check = !!event.detail;
|
|
143
|
+
return item;
|
|
144
|
+
}),
|
|
145
|
+
]);
|
|
146
|
+
}
|
|
147
|
+
handleChangeSelectedItem(event) {
|
|
148
|
+
const { detail: itemCheckSelected } = event;
|
|
149
|
+
const itemSelected = this.filteredOptions.find(item => item.label === itemCheckSelected.label);
|
|
150
|
+
itemSelected.check = itemCheckSelected.check;
|
|
151
|
+
}
|
|
152
|
+
buildViewList(hasDelete) {
|
|
153
|
+
return (index.h(index.Fragment, null, this.displayOptionToCheckAllItems && (index.h("ez-check", { ref: (element) => (this.checkInput = element), label: "Selecionar todos", class: "multi-selection__select-all", onEzChange: this.handleChangeSelectAllItems.bind(this) })), index.h("ez-list", { class: "multi-selection__list", dataSource: this.displayOptions, listMode: "check", hoverFeedback: true, onEzCheckChange: this.handleChangeSelectedItem.bind(this), itemSlotBuilder: hasDelete ? this.buildDeleteIconSlot.bind(this) : null })));
|
|
154
|
+
}
|
|
155
|
+
buildDeleteIconSlot(item) {
|
|
156
|
+
return index.h("ez-icon", { style: { cursor: 'pointer' }, iconName: "delete", onClick: () => this.handleRemoveItemFromOptions(item) });
|
|
157
|
+
}
|
|
158
|
+
buildInitViewWithDataSource() {
|
|
159
|
+
return index.h("multi-selection-box-message", { message: "Selecione os valores a serem filtrados atrav\u00E9s do campo de busca." });
|
|
160
|
+
}
|
|
161
|
+
buildViewEmptyResults() {
|
|
162
|
+
return index.h("multi-selection-box-message", { message: "Nenhum resultado encontrado." });
|
|
163
|
+
}
|
|
164
|
+
scenarioToDisplay(view) {
|
|
165
|
+
const scenarios = {
|
|
166
|
+
[ViewScenarios.DATASOURCE_INIT]: () => this.buildInitViewWithDataSource(),
|
|
167
|
+
[ViewScenarios.DATASOURCE_RESULTS]: () => this.buildViewList(true),
|
|
168
|
+
[ViewScenarios.DATASOURCE_RESULTS_EMPTY]: () => this.buildViewEmptyResults(),
|
|
169
|
+
[ViewScenarios.OPTIONS_EMPTY]: () => this.buildViewEmptyResults(),
|
|
170
|
+
[ViewScenarios.OPTIONS]: () => this.buildViewList(false),
|
|
171
|
+
};
|
|
172
|
+
const scenarioBuilder = scenarios[view];
|
|
173
|
+
return scenarioBuilder ? scenarioBuilder() : undefined;
|
|
174
|
+
}
|
|
175
|
+
render() {
|
|
176
|
+
return (index.h(index.Host, null, index.h("div", { class: "multi-selection" }, this.useOptions ? (index.h("ez-filter-input", { ref: (element) => (this.filterInput = element), label: `Buscar..`, onEzChange: this.handleSearchOnOption.bind(this) })) : (index.h("ez-search", { class: "multi-selection__input", label: `Buscar...`, ref: (element) => (this.searchInput = element), suppressEmptyOption: true, showOptionValue: false, showSelectedValue: false, optionLoader: (search) => this.searchWithDataSource(search, this.columnName), onEzChange: this.handleSearchOnDataSource.bind(this), isTextSearch: this.isTextSearch })), index.h("ez-scroll", { class: "multi-selection__content-options" }, this.scenarioToDisplay(this.viewScenario)))));
|
|
177
|
+
}
|
|
178
|
+
static get watchers() { return {
|
|
179
|
+
"useOptions": ["onChangeUseOptions"],
|
|
180
|
+
"options": ["onChangeOptions"],
|
|
181
|
+
"filteredOptions": ["onChangeFilteredOptions"]
|
|
182
|
+
}; }
|
|
183
|
+
};
|
|
184
|
+
EzMuiltiSelectionList.style = ezMultiSelectionListCss;
|
|
185
|
+
|
|
186
|
+
exports.ez_multi_selection_list = EzMuiltiSelectionList;
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-a7b0c73d.js');
|
|
6
|
+
const core = require('@sankhyalabs/core');
|
|
7
|
+
const searchFormatters = require('./searchFormatters-b7e1ed1e.js');
|
|
8
|
+
|
|
9
|
+
const ezPopoverPlusCss = ":host{display:none}";
|
|
10
|
+
|
|
11
|
+
const EzPopoverPlus = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
index.registerInstance(this, hostRef);
|
|
14
|
+
this.ezVisibilityChange = index.createEvent(this, "ezVisibilityChange", 7);
|
|
15
|
+
this.autoClose = true;
|
|
16
|
+
this.boxWidth = "fit-content";
|
|
17
|
+
this.opened = false;
|
|
18
|
+
this.overlayType = "light";
|
|
19
|
+
this.anchorElement = undefined;
|
|
20
|
+
this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
|
|
21
|
+
this.useAnchorSize = false;
|
|
22
|
+
}
|
|
23
|
+
async observeOpened(newValue) {
|
|
24
|
+
if (newValue && !this._popOverCore) {
|
|
25
|
+
this.renderPopoverCore();
|
|
26
|
+
}
|
|
27
|
+
this._popOverCore.opened = newValue;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Atualiza a posição do popover.
|
|
31
|
+
*/
|
|
32
|
+
async updatePosition(top, left) {
|
|
33
|
+
await this._popOverCore.updatePosition(top, left);
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Exibe o ez-popover.
|
|
37
|
+
*/
|
|
38
|
+
async show(top, left) {
|
|
39
|
+
if (!this._popOverCore) {
|
|
40
|
+
this.renderPopoverCore();
|
|
41
|
+
}
|
|
42
|
+
await this._popOverCore.show(top, left);
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Ancora a exibição do popOver a um elemento HTML.
|
|
46
|
+
*/
|
|
47
|
+
async showUnder(element, options) {
|
|
48
|
+
if (!this._popOverCore) {
|
|
49
|
+
this.renderPopoverCore();
|
|
50
|
+
}
|
|
51
|
+
await this._popOverCore.showUnder(element, options);
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Oculta o ez-popover.
|
|
55
|
+
*/
|
|
56
|
+
async hide() {
|
|
57
|
+
var _a;
|
|
58
|
+
await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.hide());
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Altera as opções.
|
|
62
|
+
*/
|
|
63
|
+
async setOptions(options) {
|
|
64
|
+
await this._popOverCore.setOptions(options);
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Altera o elemento de ancoragem.
|
|
68
|
+
*/
|
|
69
|
+
async setAnchorElement(anchor) {
|
|
70
|
+
await this._popOverCore.setAnchorElement(anchor);
|
|
71
|
+
}
|
|
72
|
+
renderPopoverCore() {
|
|
73
|
+
this._popOverCore = document.createElement('ez-popover-core');
|
|
74
|
+
this._popOverCore.opened = this.opened;
|
|
75
|
+
this._popOverCore.anchorElement = this.anchorElement;
|
|
76
|
+
this._popOverCore.autoClose = this.autoClose;
|
|
77
|
+
this._popOverCore.boxWidth = this.boxWidth;
|
|
78
|
+
this._popOverCore.overlayType = this.overlayType;
|
|
79
|
+
this._popOverCore.options = this.options;
|
|
80
|
+
this._popOverCore.useAnchorSize = this.useAnchorSize;
|
|
81
|
+
this._popOverCore.addEventListener('ezVisibilityChange', ({ detail }) => {
|
|
82
|
+
this.ezVisibilityChange.emit(detail);
|
|
83
|
+
this.opened = detail;
|
|
84
|
+
});
|
|
85
|
+
this._popOverCore.appendChild(this._host.children.item(0));
|
|
86
|
+
document.body.appendChild(this._popOverCore);
|
|
87
|
+
}
|
|
88
|
+
render() {
|
|
89
|
+
return (index.h(index.Host, null, index.h("slot", null)));
|
|
90
|
+
}
|
|
91
|
+
get _host() { return index.getElement(this); }
|
|
92
|
+
static get watchers() { return {
|
|
93
|
+
"opened": ["observeOpened"]
|
|
94
|
+
}; }
|
|
95
|
+
};
|
|
96
|
+
EzPopoverPlus.style = ezPopoverPlusCss;
|
|
97
|
+
|
|
98
|
+
const multiSelectionBoxMessageCss = ".multi-selection__message{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;min-height:320px;text-align:center}.multi-selection__text-message{margin-top:-30px;font-family:var(--font-pattern);font-size:var(--text--meduim);padding:var(--space-xs);color:var(--text--primary)}";
|
|
99
|
+
|
|
100
|
+
const MultiSelectionBoxMessage = class {
|
|
101
|
+
constructor(hostRef) {
|
|
102
|
+
index.registerInstance(this, hostRef);
|
|
103
|
+
this.message = undefined;
|
|
104
|
+
}
|
|
105
|
+
render() {
|
|
106
|
+
return (index.h("div", { class: "multi-selection__message" }, index.h("span", { class: "multi-selection__text-message" }, this.message)));
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
MultiSelectionBoxMessage.style = multiSelectionBoxMessageCss;
|
|
110
|
+
|
|
111
|
+
const searchListCss = ":host{--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--small, 6px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px)}.list-options{position:relative;z-index:var(--more-visible, 2);margin:var(--space--small) 0px;padding:0px;padding-inline-start:0px;box-sizing:border-box;width:100%;height:100%;max-height:350px;min-width:150px;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;margin:var(--space--medium) 0px;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-search__list-title--primary);border-top:3px solid transparent}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.preselected{background-color:var(--background--medium)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}";
|
|
112
|
+
|
|
113
|
+
const SearchList = class {
|
|
114
|
+
constructor(hostRef) {
|
|
115
|
+
index.registerInstance(this, hostRef);
|
|
116
|
+
this.changeValue = index.createEvent(this, "changeValue", 7);
|
|
117
|
+
this.changePreSelection = index.createEvent(this, "changePreSelection", 7);
|
|
118
|
+
this._startHighlightTag = "<span class='card-item__highlight'>";
|
|
119
|
+
this._endHighlightTag = "</span>";
|
|
120
|
+
this.showLoading = undefined;
|
|
121
|
+
this.visibleOptions = [];
|
|
122
|
+
this.textEmptyList = undefined;
|
|
123
|
+
this.canShowListOptions = undefined;
|
|
124
|
+
this.value = undefined;
|
|
125
|
+
this.showOptionValue = true;
|
|
126
|
+
this.preSelection = undefined;
|
|
127
|
+
}
|
|
128
|
+
async nextOption() {
|
|
129
|
+
const newPreSelection = this.preSelection === undefined ? 0 : Math.min(this.preSelection + 1, this.visibleOptions.length - 1);
|
|
130
|
+
this.changePreSelection.emit(newPreSelection);
|
|
131
|
+
this.scrollToOption(this.visibleOptions[newPreSelection]);
|
|
132
|
+
}
|
|
133
|
+
async previousOption() {
|
|
134
|
+
const newPreSelection = this.preSelection === undefined ? 0 : Math.max(this.preSelection - 1, 0);
|
|
135
|
+
this.changePreSelection.emit(newPreSelection);
|
|
136
|
+
this.scrollToOption(this.visibleOptions[newPreSelection]);
|
|
137
|
+
}
|
|
138
|
+
selectOption(newOption) {
|
|
139
|
+
const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: searchFormatters.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.value), label: searchFormatters.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.label) });
|
|
140
|
+
const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: searchFormatters.replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value), label: searchFormatters.replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label) });
|
|
141
|
+
this.changeValue.emit(newOptionsFormatted);
|
|
142
|
+
}
|
|
143
|
+
createOption(detail) {
|
|
144
|
+
let { key, title } = detail;
|
|
145
|
+
const startHighlight = new RegExp(this._startHighlightTag, 'g');
|
|
146
|
+
const endHighlight = new RegExp(this._endHighlightTag, 'g');
|
|
147
|
+
title = core.StringUtils.decodeHtmlEntities(title);
|
|
148
|
+
const option = {
|
|
149
|
+
value: key === null || key === void 0 ? void 0 : key.replace(startHighlight, '').replace(endHighlight, ''),
|
|
150
|
+
label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
|
|
151
|
+
};
|
|
152
|
+
this.selectOption(option);
|
|
153
|
+
}
|
|
154
|
+
scrollToOption(opt) {
|
|
155
|
+
window.requestAnimationFrame(() => {
|
|
156
|
+
const liElem = (opt === null || opt === void 0 ? void 0 : opt.value)
|
|
157
|
+
? this._optionsList.querySelector(`div#item_${opt.value.replace(/([ #;&,.+*~':"!^$[\]()=<>|/\\])/g, '\\$1')}`)
|
|
158
|
+
: undefined;
|
|
159
|
+
if (liElem) {
|
|
160
|
+
liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
161
|
+
}
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
buildItem(opt, index$1) {
|
|
165
|
+
opt.label = opt.label || opt.value;
|
|
166
|
+
const card = {
|
|
167
|
+
key: opt.value,
|
|
168
|
+
title: opt.label,
|
|
169
|
+
details: opt.details
|
|
170
|
+
};
|
|
171
|
+
return index.h("div", { style: { "height": "100%" }, class: index$1 === this.preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.createOption(card), onMouseOver: () => this.changePreSelection.emit(index$1) }, index.h("ez-card-item", { item: card, compacted: true, enableKey: this.showOptionValue }));
|
|
172
|
+
}
|
|
173
|
+
render() {
|
|
174
|
+
return (index.h(index.Host, null, index.h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading
|
|
175
|
+
&& this.visibleOptions.length === 0
|
|
176
|
+
&& index.h("div", { class: "message" }, index.h("span", { class: "message__no-result" }, this.textEmptyList)), this.showLoading
|
|
177
|
+
&& index.h("div", { class: "message" }, index.h("div", { class: "message__loading" })), this.canShowListOptions && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
SearchList.style = searchListCss;
|
|
181
|
+
|
|
182
|
+
exports.ez_popover_plus = EzPopoverPlus;
|
|
183
|
+
exports.multi_selection_box_message = MultiSelectionBoxMessage;
|
|
184
|
+
exports.search_list = SearchList;
|