@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-43388.0 → 0.0.0-bugfix-dev-KB-9999.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/{CSSVarsUtils-10c9d5b4.js → CSSVarsUtils-b136a156.js} +0 -13
- package/dist/cjs/ez-actions-button.cjs.entry.js +1 -1
- package/dist/cjs/ez-card-item_3.cjs.entry.js +5 -6
- package/dist/cjs/ez-combo-box.cjs.entry.js +6 -7
- package/dist/cjs/ez-date-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-date-time-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-form-view.cjs.entry.js +13 -30
- package/dist/cjs/ez-grid.cjs.entry.js +10 -72
- package/dist/cjs/ez-icon.cjs.entry.js +1 -1
- package/dist/cjs/ez-multi-selection-list.cjs.entry.js +10 -2
- package/dist/cjs/ez-number-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-popup.cjs.entry.js +1 -1
- package/dist/cjs/ez-search.cjs.entry.js +5 -4
- package/dist/cjs/ez-split-item.cjs.entry.js +2 -11
- package/dist/cjs/ez-split-panel.cjs.entry.js +5 -6
- package/dist/cjs/ez-time-input.cjs.entry.js +1 -1
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/index-a7b0c73d.js +4 -8
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +0 -1
- package/dist/collection/components/ez-card-item/ez-card-item.css +5 -19
- package/dist/collection/components/ez-card-item/ez-card-item.js +3 -22
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css +0 -1
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +5 -6
- package/dist/collection/components/ez-form-view/ez-form-view.css +1 -17
- package/dist/collection/components/ez-form-view/ez-form-view.js +5 -22
- package/dist/collection/components/ez-form-view/fieldbuilder/templates/CheckBox.tpl.js +1 -1
- package/dist/collection/components/ez-form-view/fieldbuilder/templates/ComboBox.tpl.js +1 -1
- package/dist/collection/components/ez-form-view/fieldbuilder/templates/DateInput.tpl.js +3 -3
- package/dist/collection/components/ez-form-view/fieldbuilder/templates/NumberInput.tpl.js +1 -1
- package/dist/collection/components/ez-form-view/fieldbuilder/templates/SearchInput.tpl.js +1 -1
- package/dist/collection/components/ez-form-view/fieldbuilder/templates/TextInput.tpl.js +1 -1
- package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +1 -5
- package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js +0 -3
- package/dist/collection/components/ez-grid/ez-grid.css +2 -25
- package/dist/collection/components/ez-grid/ez-grid.js +8 -65
- package/dist/collection/components/ez-icon/ez-icon.css +116 -118
- package/dist/collection/components/ez-multi-selection-list/ez-multi-selection-list.js +10 -2
- package/dist/collection/components/ez-popup/ez-popup.css +4 -2
- package/dist/collection/components/ez-search/ez-search.js +4 -3
- package/dist/collection/components/ez-split-panel/ez-split-panel.css +1 -0
- package/dist/collection/components/ez-split-panel/ez-split-panel.js +4 -5
- package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.css +4 -15
- package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.js +2 -27
- package/dist/collection/utils/CSSVarsUtils.js +0 -13
- package/dist/custom-elements/index.d.ts +0 -6
- package/dist/custom-elements/index.js +57 -290
- package/dist/esm/{CSSVarsUtils-71ce76be.js → CSSVarsUtils-a97cfa29.js} +0 -13
- package/dist/esm/ez-actions-button.entry.js +1 -1
- package/dist/esm/ez-card-item_3.entry.js +5 -6
- package/dist/esm/ez-combo-box.entry.js +6 -7
- package/dist/esm/ez-date-input.entry.js +1 -1
- package/dist/esm/ez-date-time-input.entry.js +1 -1
- package/dist/esm/ez-form-view.entry.js +14 -31
- package/dist/esm/ez-grid.entry.js +11 -73
- package/dist/esm/ez-icon.entry.js +1 -1
- package/dist/esm/ez-multi-selection-list.entry.js +10 -2
- package/dist/esm/ez-number-input.entry.js +1 -1
- package/dist/esm/ez-popup.entry.js +1 -1
- package/dist/esm/ez-search.entry.js +5 -4
- package/dist/esm/ez-split-item.entry.js +3 -12
- package/dist/esm/ez-split-panel.entry.js +5 -6
- package/dist/esm/ez-time-input.entry.js +1 -1
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/index-baa5e267.js +4 -8
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/{p-abc23d6f.entry.js → p-02c8831a.entry.js} +1 -1
- package/dist/ezui/p-13dbad96.entry.js +1 -0
- package/dist/ezui/{p-b567fa8c.entry.js → p-18e7870d.entry.js} +1 -1
- package/dist/ezui/{p-07cbffce.entry.js → p-300bf244.entry.js} +1 -1
- package/dist/ezui/{p-784fe207.entry.js → p-40f72de4.entry.js} +1 -1
- package/dist/ezui/p-428a05fe.entry.js +1 -0
- package/dist/ezui/{p-af95cd16.entry.js → p-50186acb.entry.js} +1 -1
- package/dist/ezui/p-60848ef6.entry.js +1 -0
- package/dist/ezui/{p-9f1e89c9.entry.js → p-672dd122.entry.js} +1 -1
- package/dist/ezui/{p-9e11fc7b.js → p-7eb3e1a5.js} +1 -1
- package/dist/ezui/{p-e85c48d7.entry.js → p-9cad9b6e.entry.js} +1 -1
- package/dist/ezui/{p-22a04c1d.entry.js → p-ab629244.entry.js} +2 -2
- package/dist/ezui/p-cd0499a2.entry.js +1 -0
- package/dist/ezui/p-e52cbcc7.entry.js +1 -0
- package/dist/ezui/p-e562d05e.entry.js +1 -0
- package/dist/ezui/{p-99ead599.entry.js → p-eb36f072.entry.js} +1 -1
- package/dist/types/components/ez-card-item/ez-card-item.d.ts +0 -4
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +0 -1
- package/dist/types/components/ez-form-view/ez-form-view.d.ts +0 -3
- package/dist/types/components/ez-grid/controller/EzGridController.d.ts +0 -1
- package/dist/types/components/ez-grid/controller/ag-grid/AgGridController.d.ts +0 -1
- package/dist/types/components/ez-grid/ez-grid.d.ts +2 -15
- package/dist/types/components/ez-multi-selection-list/ez-multi-selection-list.d.ts +1 -0
- package/dist/types/components/ez-split-panel/structure/item/ez-split-item.d.ts +0 -10
- package/dist/types/components.d.ts +0 -131
- package/dist/types/utils/CSSVarsUtils.d.ts +0 -1
- package/package.json +2 -3
- package/react/components.d.ts +0 -1
- package/react/components.js +0 -1
- package/react/components.js.map +1 -1
- package/dist/cjs/ez-split-button.cjs.entry.js +0 -147
- package/dist/collection/components/ez-split-button/ez-split-button.css +0 -229
- package/dist/collection/components/ez-split-button/ez-split-button.js +0 -436
- package/dist/collection/components/ez-split-button/test/dropdownItems.js +0 -42
- package/dist/esm/ez-split-button.entry.js +0 -143
- package/dist/ezui/p-2eb8f73b.entry.js +0 -1
- package/dist/ezui/p-7af81663.entry.js +0 -1
- package/dist/ezui/p-7bc07c31.entry.js +0 -1
- package/dist/ezui/p-801fd0f8.entry.js +0 -1
- package/dist/ezui/p-807560f0.entry.js +0 -1
- package/dist/ezui/p-b9fbf4e7.entry.js +0 -1
- package/dist/ezui/p-db77a984.entry.js +0 -1
- package/dist/types/components/ez-split-button/ez-split-button.d.ts +0 -89
- package/dist/types/components/ez-split-button/test/dropdownItems.d.ts +0 -2
|
@@ -1,436 +0,0 @@
|
|
|
1
|
-
import { ElementIDUtils } from '@sankhyalabs/core';
|
|
2
|
-
import { h } from '@stencil/core';
|
|
3
|
-
export class EzSplitButton {
|
|
4
|
-
constructor() {
|
|
5
|
-
this.rightDefaultTitle = 'Mais opções';
|
|
6
|
-
this.show = false;
|
|
7
|
-
this.enabled = true;
|
|
8
|
-
this.iconName = undefined;
|
|
9
|
-
this.image = undefined;
|
|
10
|
-
this.items = undefined;
|
|
11
|
-
this.label = undefined;
|
|
12
|
-
this.leftTitle = undefined;
|
|
13
|
-
this.rightTitle = 'Mais opções';
|
|
14
|
-
this.mode = 'default';
|
|
15
|
-
this.size = 'medium';
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* Remove o foco de ambos os botões.
|
|
19
|
-
*/
|
|
20
|
-
async setBlur() {
|
|
21
|
-
this.leftButton.blur();
|
|
22
|
-
this.rightButton.blur();
|
|
23
|
-
}
|
|
24
|
-
/**
|
|
25
|
-
* Aplica o foco no botão principal.
|
|
26
|
-
*/
|
|
27
|
-
async setLeftButtonFocus() {
|
|
28
|
-
this.leftButton.focus();
|
|
29
|
-
}
|
|
30
|
-
/**
|
|
31
|
-
* Aplica o foco no botão do dropdown.
|
|
32
|
-
*/
|
|
33
|
-
async setRightButtonFocus() {
|
|
34
|
-
this.rightButton.focus();
|
|
35
|
-
}
|
|
36
|
-
clickListener(evt) {
|
|
37
|
-
if (!this.enabled) {
|
|
38
|
-
evt.preventDefault();
|
|
39
|
-
evt.stopPropagation();
|
|
40
|
-
evt.stopImmediatePropagation();
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
getIconSize(sizeParam = 'medium') {
|
|
44
|
-
var _a;
|
|
45
|
-
const sizeList = ['medium', 'large'];
|
|
46
|
-
const sizeLowerCase = (_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase();
|
|
47
|
-
return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
|
|
48
|
-
}
|
|
49
|
-
closeDropdown() {
|
|
50
|
-
this.show = false;
|
|
51
|
-
}
|
|
52
|
-
toggleDropdown() {
|
|
53
|
-
this.show = !this.show;
|
|
54
|
-
}
|
|
55
|
-
handleButtonClick() {
|
|
56
|
-
this.buttonClick.emit();
|
|
57
|
-
}
|
|
58
|
-
handleDropdownItemClick(evt) {
|
|
59
|
-
this.dropdownItemClick.emit(evt.detail);
|
|
60
|
-
evt.stopPropagation();
|
|
61
|
-
this.closeDropdown();
|
|
62
|
-
}
|
|
63
|
-
handleDropdownSubActionClick(evt) {
|
|
64
|
-
this.dropdownSubActionClick.emit(evt.detail);
|
|
65
|
-
evt.stopPropagation();
|
|
66
|
-
this.closeDropdown();
|
|
67
|
-
}
|
|
68
|
-
/**
|
|
69
|
-
* Método responsável em posicionar o dropdown na tela.
|
|
70
|
-
* Faz com que o dropdown se ajuste automaticamente ao espaco na tela
|
|
71
|
-
*/
|
|
72
|
-
positionDropdown() {
|
|
73
|
-
const { rightButton: _rightButton, dropdownParent: _dropdownParent } = this;
|
|
74
|
-
const rightButtonRect = _rightButton.getBoundingClientRect();
|
|
75
|
-
const dropdownParentRect = _dropdownParent.getBoundingClientRect();
|
|
76
|
-
const spaceBelow = window.innerHeight - rightButtonRect.bottom;
|
|
77
|
-
const spaceAbove = rightButtonRect.top;
|
|
78
|
-
const spaceRight = window.innerWidth - rightButtonRect.right;
|
|
79
|
-
const spaceLeft = rightButtonRect.left;
|
|
80
|
-
const hasSpaceBelow = spaceBelow < dropdownParentRect.height && spaceAbove > dropdownParentRect.height;
|
|
81
|
-
const hasSpaceRight = spaceRight < dropdownParentRect.width && spaceLeft > dropdownParentRect.width;
|
|
82
|
-
let top = `${rightButtonRect.bottom + window.scrollY}px`;
|
|
83
|
-
let left = `${rightButtonRect.left + window.scrollX}px`;
|
|
84
|
-
let bottom = 'auto';
|
|
85
|
-
if (hasSpaceBelow) {
|
|
86
|
-
bottom = `${window.innerHeight - rightButtonRect.top - window.scrollY}px`;
|
|
87
|
-
top = 'auto';
|
|
88
|
-
_dropdownParent.style.maxHeight = `${spaceAbove}px`;
|
|
89
|
-
}
|
|
90
|
-
if (hasSpaceRight) {
|
|
91
|
-
left = `${rightButtonRect.right - dropdownParentRect.width + window.scrollX}px`;
|
|
92
|
-
}
|
|
93
|
-
_dropdownParent.style.top = top;
|
|
94
|
-
_dropdownParent.style.bottom = bottom;
|
|
95
|
-
_dropdownParent.style.left = left;
|
|
96
|
-
}
|
|
97
|
-
setEvents() {
|
|
98
|
-
window.removeEventListener('scroll', this.positionDropdown.bind(this));
|
|
99
|
-
window.addEventListener('scroll', this.positionDropdown.bind(this));
|
|
100
|
-
}
|
|
101
|
-
componentWillLoad() {
|
|
102
|
-
this.setEvents();
|
|
103
|
-
}
|
|
104
|
-
componentDidLoad() {
|
|
105
|
-
if (this._element)
|
|
106
|
-
ElementIDUtils.addIDInfo(this._element);
|
|
107
|
-
if (this.leftButton) {
|
|
108
|
-
const dataInfo = { id: 'embedded' };
|
|
109
|
-
ElementIDUtils.addIDInfo(this.leftButton, 'left-button', dataInfo);
|
|
110
|
-
}
|
|
111
|
-
if (this.rightButton) {
|
|
112
|
-
const dataInfo = { id: 'embedded' };
|
|
113
|
-
ElementIDUtils.addIDInfo(this.rightButton, 'right-button', dataInfo);
|
|
114
|
-
}
|
|
115
|
-
this.positionDropdown();
|
|
116
|
-
}
|
|
117
|
-
componentDidUpdate() {
|
|
118
|
-
this.positionDropdown();
|
|
119
|
-
}
|
|
120
|
-
render() {
|
|
121
|
-
const hasIconButton = this.shouldShowIconOnLeftButton();
|
|
122
|
-
const hasLabelButton = this.shouldShowLabelOnLeftButton();
|
|
123
|
-
const iconSize = this.getIconSize();
|
|
124
|
-
return (h("div", { class: "label-icon" }, h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode}`, title: this.leftTitle || this.label, type: "button", disabled: !this.enabled, onClick: () => { this.handleButtonClick(); }, ref: el => (this.leftButton = el) }, hasIconButton && h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && h("label", { title: this.leftTitle || this.label }, this.label)), h("div", { class: "dropdown" }, h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ez-split-button__right-button--divider`, title: this.rightTitle || this.rightDefaultTitle, type: "button", disabled: !this.enabled, onClick: () => { this.toggleDropdown(); }, ref: el => (this.rightButton = el) }, h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (h("ez-dropdown", { items: this.items, onClick: evt => { evt.stopPropagation(); }, onEzOutsideClick: () => { this.closeDropdown(); }, onEzClick: evt => { this.handleDropdownItemClick(evt); }, onEzSubActionClick: evt => { this.handleDropdownSubActionClick(evt); } }))))));
|
|
125
|
-
}
|
|
126
|
-
shouldShowLabelOnLeftButton() {
|
|
127
|
-
return ['icon-left', 'default'].includes(this.mode);
|
|
128
|
-
}
|
|
129
|
-
shouldShowIconOnLeftButton() {
|
|
130
|
-
return ['icon-left', 'icon-only'].includes(this.mode);
|
|
131
|
-
}
|
|
132
|
-
static get is() { return "ez-split-button"; }
|
|
133
|
-
static get encapsulation() { return "shadow"; }
|
|
134
|
-
static get originalStyleUrls() {
|
|
135
|
-
return {
|
|
136
|
-
"$": ["ez-split-button.css"]
|
|
137
|
-
};
|
|
138
|
-
}
|
|
139
|
-
static get styleUrls() {
|
|
140
|
-
return {
|
|
141
|
-
"$": ["ez-split-button.css"]
|
|
142
|
-
};
|
|
143
|
-
}
|
|
144
|
-
static get properties() {
|
|
145
|
-
return {
|
|
146
|
-
"enabled": {
|
|
147
|
-
"type": "boolean",
|
|
148
|
-
"mutable": false,
|
|
149
|
-
"complexType": {
|
|
150
|
-
"original": "boolean",
|
|
151
|
-
"resolved": "boolean",
|
|
152
|
-
"references": {}
|
|
153
|
-
},
|
|
154
|
-
"required": false,
|
|
155
|
-
"optional": false,
|
|
156
|
-
"docs": {
|
|
157
|
-
"tags": [],
|
|
158
|
-
"text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o bot\u00E3o."
|
|
159
|
-
},
|
|
160
|
-
"attribute": "enabled",
|
|
161
|
-
"reflect": true,
|
|
162
|
-
"defaultValue": "true"
|
|
163
|
-
},
|
|
164
|
-
"iconName": {
|
|
165
|
-
"type": "string",
|
|
166
|
-
"mutable": false,
|
|
167
|
-
"complexType": {
|
|
168
|
-
"original": "string",
|
|
169
|
-
"resolved": "string",
|
|
170
|
-
"references": {}
|
|
171
|
-
},
|
|
172
|
-
"required": false,
|
|
173
|
-
"optional": false,
|
|
174
|
-
"docs": {
|
|
175
|
-
"tags": [],
|
|
176
|
-
"text": "Define o \u00EDcone a ser usado da biblioteca de \u00EDcones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/)"
|
|
177
|
-
},
|
|
178
|
-
"attribute": "icon-name",
|
|
179
|
-
"reflect": true
|
|
180
|
-
},
|
|
181
|
-
"image": {
|
|
182
|
-
"type": "string",
|
|
183
|
-
"mutable": false,
|
|
184
|
-
"complexType": {
|
|
185
|
-
"original": "string",
|
|
186
|
-
"resolved": "string",
|
|
187
|
-
"references": {}
|
|
188
|
-
},
|
|
189
|
-
"required": false,
|
|
190
|
-
"optional": false,
|
|
191
|
-
"docs": {
|
|
192
|
-
"tags": [],
|
|
193
|
-
"text": "Define o caminho usado nos modos `icon-only` e `icon-left` para imagens n\u00E3o contempladas na biblioteca de \u00EDcones."
|
|
194
|
-
},
|
|
195
|
-
"attribute": "image",
|
|
196
|
-
"reflect": true
|
|
197
|
-
},
|
|
198
|
-
"items": {
|
|
199
|
-
"type": "unknown",
|
|
200
|
-
"mutable": false,
|
|
201
|
-
"complexType": {
|
|
202
|
-
"original": "Array<IDropdownItem>",
|
|
203
|
-
"resolved": "IDropdownItem[]",
|
|
204
|
-
"references": {
|
|
205
|
-
"Array": {
|
|
206
|
-
"location": "global"
|
|
207
|
-
},
|
|
208
|
-
"IDropdownItem": {
|
|
209
|
-
"location": "import",
|
|
210
|
-
"path": "../ez-dropdown/structure/DropdownItem"
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
},
|
|
214
|
-
"required": false,
|
|
215
|
-
"optional": false,
|
|
216
|
-
"docs": {
|
|
217
|
-
"tags": [],
|
|
218
|
-
"text": "Define o conte\u00FAdo do dropdown."
|
|
219
|
-
}
|
|
220
|
-
},
|
|
221
|
-
"label": {
|
|
222
|
-
"type": "string",
|
|
223
|
-
"mutable": false,
|
|
224
|
-
"complexType": {
|
|
225
|
-
"original": "string",
|
|
226
|
-
"resolved": "string",
|
|
227
|
-
"references": {}
|
|
228
|
-
},
|
|
229
|
-
"required": false,
|
|
230
|
-
"optional": false,
|
|
231
|
-
"docs": {
|
|
232
|
-
"tags": [],
|
|
233
|
-
"text": "Texto a ser apresentado como label do bot\u00E3o."
|
|
234
|
-
},
|
|
235
|
-
"attribute": "label",
|
|
236
|
-
"reflect": true
|
|
237
|
-
},
|
|
238
|
-
"leftTitle": {
|
|
239
|
-
"type": "string",
|
|
240
|
-
"mutable": false,
|
|
241
|
-
"complexType": {
|
|
242
|
-
"original": "string",
|
|
243
|
-
"resolved": "string",
|
|
244
|
-
"references": {}
|
|
245
|
-
},
|
|
246
|
-
"required": false,
|
|
247
|
-
"optional": false,
|
|
248
|
-
"docs": {
|
|
249
|
-
"tags": [],
|
|
250
|
-
"text": "Texto a ser apresentado como title do bot\u00E3o principal"
|
|
251
|
-
},
|
|
252
|
-
"attribute": "left-title",
|
|
253
|
-
"reflect": true
|
|
254
|
-
},
|
|
255
|
-
"rightTitle": {
|
|
256
|
-
"type": "string",
|
|
257
|
-
"mutable": false,
|
|
258
|
-
"complexType": {
|
|
259
|
-
"original": "string",
|
|
260
|
-
"resolved": "string",
|
|
261
|
-
"references": {}
|
|
262
|
-
},
|
|
263
|
-
"required": false,
|
|
264
|
-
"optional": false,
|
|
265
|
-
"docs": {
|
|
266
|
-
"tags": [],
|
|
267
|
-
"text": "Texto a ser apresentado como title do bot\u00E3o dropdown"
|
|
268
|
-
},
|
|
269
|
-
"attribute": "right-title",
|
|
270
|
-
"reflect": true,
|
|
271
|
-
"defaultValue": "'Mais op\u00E7\u00F5es'"
|
|
272
|
-
},
|
|
273
|
-
"mode": {
|
|
274
|
-
"type": "string",
|
|
275
|
-
"mutable": false,
|
|
276
|
-
"complexType": {
|
|
277
|
-
"original": "'default' | 'icon-only' | 'icon-left'",
|
|
278
|
-
"resolved": "\"default\" | \"icon-left\" | \"icon-only\"",
|
|
279
|
-
"references": {}
|
|
280
|
-
},
|
|
281
|
-
"required": false,
|
|
282
|
-
"optional": false,
|
|
283
|
-
"docs": {
|
|
284
|
-
"tags": [],
|
|
285
|
-
"text": "Define o modo de uso do bot\u00E3o."
|
|
286
|
-
},
|
|
287
|
-
"attribute": "mode",
|
|
288
|
-
"reflect": true,
|
|
289
|
-
"defaultValue": "'default'"
|
|
290
|
-
},
|
|
291
|
-
"size": {
|
|
292
|
-
"type": "string",
|
|
293
|
-
"mutable": false,
|
|
294
|
-
"complexType": {
|
|
295
|
-
"original": "'medium' | 'large'",
|
|
296
|
-
"resolved": "\"large\" | \"medium\"",
|
|
297
|
-
"references": {}
|
|
298
|
-
},
|
|
299
|
-
"required": false,
|
|
300
|
-
"optional": false,
|
|
301
|
-
"docs": {
|
|
302
|
-
"tags": [],
|
|
303
|
-
"text": "Define o tamanho do ez-split-button."
|
|
304
|
-
},
|
|
305
|
-
"attribute": "size",
|
|
306
|
-
"reflect": true,
|
|
307
|
-
"defaultValue": "'medium'"
|
|
308
|
-
}
|
|
309
|
-
};
|
|
310
|
-
}
|
|
311
|
-
static get states() {
|
|
312
|
-
return {
|
|
313
|
-
"show": {}
|
|
314
|
-
};
|
|
315
|
-
}
|
|
316
|
-
static get events() {
|
|
317
|
-
return [{
|
|
318
|
-
"method": "buttonClick",
|
|
319
|
-
"name": "buttonClick",
|
|
320
|
-
"bubbles": true,
|
|
321
|
-
"cancelable": true,
|
|
322
|
-
"composed": true,
|
|
323
|
-
"docs": {
|
|
324
|
-
"tags": [],
|
|
325
|
-
"text": "Emitido quando o bot\u00E3o principal \u00E9 clicado"
|
|
326
|
-
},
|
|
327
|
-
"complexType": {
|
|
328
|
-
"original": "void",
|
|
329
|
-
"resolved": "void",
|
|
330
|
-
"references": {}
|
|
331
|
-
}
|
|
332
|
-
}, {
|
|
333
|
-
"method": "dropdownItemClick",
|
|
334
|
-
"name": "dropdownItemClick",
|
|
335
|
-
"bubbles": true,
|
|
336
|
-
"cancelable": true,
|
|
337
|
-
"composed": true,
|
|
338
|
-
"docs": {
|
|
339
|
-
"tags": [],
|
|
340
|
-
"text": "Emitido quando um item do dropdown \u00E9 clicado"
|
|
341
|
-
},
|
|
342
|
-
"complexType": {
|
|
343
|
-
"original": "IDropdownItem",
|
|
344
|
-
"resolved": "IDropdownItem",
|
|
345
|
-
"references": {
|
|
346
|
-
"IDropdownItem": {
|
|
347
|
-
"location": "import",
|
|
348
|
-
"path": "../ez-dropdown/structure/DropdownItem"
|
|
349
|
-
}
|
|
350
|
-
}
|
|
351
|
-
}
|
|
352
|
-
}, {
|
|
353
|
-
"method": "dropdownSubActionClick",
|
|
354
|
-
"name": "dropdownSubActionClick",
|
|
355
|
-
"bubbles": true,
|
|
356
|
-
"cancelable": true,
|
|
357
|
-
"composed": true,
|
|
358
|
-
"docs": {
|
|
359
|
-
"tags": [],
|
|
360
|
-
"text": "Emitido quando uma subAction de um item do dropdown \u00E9 clicada"
|
|
361
|
-
},
|
|
362
|
-
"complexType": {
|
|
363
|
-
"original": "IDropdownSubAction",
|
|
364
|
-
"resolved": "IDropdownSubAction",
|
|
365
|
-
"references": {
|
|
366
|
-
"IDropdownSubAction": {
|
|
367
|
-
"location": "import",
|
|
368
|
-
"path": "../ez-dropdown/structure/DropdownItem"
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
}];
|
|
373
|
-
}
|
|
374
|
-
static get methods() {
|
|
375
|
-
return {
|
|
376
|
-
"setBlur": {
|
|
377
|
-
"complexType": {
|
|
378
|
-
"signature": "() => Promise<void>",
|
|
379
|
-
"parameters": [],
|
|
380
|
-
"references": {
|
|
381
|
-
"Promise": {
|
|
382
|
-
"location": "global"
|
|
383
|
-
}
|
|
384
|
-
},
|
|
385
|
-
"return": "Promise<void>"
|
|
386
|
-
},
|
|
387
|
-
"docs": {
|
|
388
|
-
"text": "Remove o foco de ambos os bot\u00F5es.",
|
|
389
|
-
"tags": []
|
|
390
|
-
}
|
|
391
|
-
},
|
|
392
|
-
"setLeftButtonFocus": {
|
|
393
|
-
"complexType": {
|
|
394
|
-
"signature": "() => Promise<void>",
|
|
395
|
-
"parameters": [],
|
|
396
|
-
"references": {
|
|
397
|
-
"Promise": {
|
|
398
|
-
"location": "global"
|
|
399
|
-
}
|
|
400
|
-
},
|
|
401
|
-
"return": "Promise<void>"
|
|
402
|
-
},
|
|
403
|
-
"docs": {
|
|
404
|
-
"text": "Aplica o foco no bot\u00E3o principal.",
|
|
405
|
-
"tags": []
|
|
406
|
-
}
|
|
407
|
-
},
|
|
408
|
-
"setRightButtonFocus": {
|
|
409
|
-
"complexType": {
|
|
410
|
-
"signature": "() => Promise<void>",
|
|
411
|
-
"parameters": [],
|
|
412
|
-
"references": {
|
|
413
|
-
"Promise": {
|
|
414
|
-
"location": "global"
|
|
415
|
-
}
|
|
416
|
-
},
|
|
417
|
-
"return": "Promise<void>"
|
|
418
|
-
},
|
|
419
|
-
"docs": {
|
|
420
|
-
"text": "Aplica o foco no bot\u00E3o do dropdown.",
|
|
421
|
-
"tags": []
|
|
422
|
-
}
|
|
423
|
-
}
|
|
424
|
-
};
|
|
425
|
-
}
|
|
426
|
-
static get elementRef() { return "_element"; }
|
|
427
|
-
static get listeners() {
|
|
428
|
-
return [{
|
|
429
|
-
"name": "click",
|
|
430
|
-
"method": "clickListener",
|
|
431
|
-
"target": undefined,
|
|
432
|
-
"capture": true,
|
|
433
|
-
"passive": false
|
|
434
|
-
}];
|
|
435
|
-
}
|
|
436
|
-
}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
export const dropdownItems = [
|
|
2
|
-
{
|
|
3
|
-
id: "1",
|
|
4
|
-
label: "label1",
|
|
5
|
-
type: 'item',
|
|
6
|
-
iconName: "iconName1",
|
|
7
|
-
subAction: {
|
|
8
|
-
id: "1",
|
|
9
|
-
label: "subActionLabel1",
|
|
10
|
-
type: "primary"
|
|
11
|
-
},
|
|
12
|
-
group: "group"
|
|
13
|
-
}, {
|
|
14
|
-
id: "2",
|
|
15
|
-
label: "label2",
|
|
16
|
-
type: 'item',
|
|
17
|
-
iconName: "iconName2",
|
|
18
|
-
subAction: null,
|
|
19
|
-
group: null,
|
|
20
|
-
}, {
|
|
21
|
-
id: "3",
|
|
22
|
-
label: "label3",
|
|
23
|
-
type: 'item',
|
|
24
|
-
iconName: "iconName3",
|
|
25
|
-
subAction: null,
|
|
26
|
-
group: null,
|
|
27
|
-
}, {
|
|
28
|
-
id: "",
|
|
29
|
-
label: "",
|
|
30
|
-
type: 'divider',
|
|
31
|
-
iconName: "",
|
|
32
|
-
subAction: null,
|
|
33
|
-
group: null,
|
|
34
|
-
}, {
|
|
35
|
-
id: "4",
|
|
36
|
-
label: "label4",
|
|
37
|
-
type: 'item',
|
|
38
|
-
iconName: "iconName4",
|
|
39
|
-
subAction: null,
|
|
40
|
-
group: null,
|
|
41
|
-
}
|
|
42
|
-
];
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
|
|
2
|
-
import { ElementIDUtils } from '@sankhyalabs/core';
|
|
3
|
-
|
|
4
|
-
const ezSplitButtonCss = ":host{--ez-split-button--min-width:24;--ez-split-button--width:'auto';--ez-split-button__medium--height:32px;--ez-split-button__large--height:42px;--ez-split-button__medium-icon--width:40px;--ez-split-button__large-icon--width:44px;--ez-split-button__inline__icon--gap:6px;--ez-split-button__label--padding-top:0px;--ez-split-button__label--padding-bottom:0px;--ez-split-button__right-button--padding-left:8px;--ez-split-button--color:var(--title--primary, #FFF);--ez-split-button--font-size:var(--text--medium, 14px);--ez-split-button--font-family:var(--font-pattern, Arial);--ez-split-button--font-weight:var(--text-weight--large);--ez-split-button--background-color:var(--background--medium, #008561);--ez-split-button--border-radius:var(--border--radius-large, 12px);--ez-split-button--border:none;--ez-split-button--justify-content:center;--ez-split-button--hover-color:var(--color--primary-600);--ez-split-button--hover--background-color:var(--background--medium, var(--ez-split-button--background-color));--ez-split-button--disabled-color:var(--text--disable);--ez-split-button--disabled--background-color:var(--color--disable-secondary);--ez-split-button--focus--border:var(--border--medium, 2px) var(--color--primary-300);--ez-split-button--focus--box-shadow:none;--ez-split-button--active-color:var(--color--primary-700);--ez-split-button--active--background-color:var(--background--strong)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-split-button--min-width);width:var(--ez-split-button--width);height:var(--ez-split-button__medium--height);font-family:var(--ez-split-button--font-family);font-size:var(--ez-split-button--font-size);font-weight:var(--ez-split-button--font-weight);padding:var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;border-top-left-radius:var(--ez-split-button--border-radius);border-bottom-left-radius:var(--ez-split-button--border-radius);background-color:var(--ez-split-button--background-color);color:var(--ez-split-button--color);fill:var(--ez-split-button--color);border:var(--ez-split-button--border);justify-content:var(--ez-split-button--justify-content)}label{cursor:pointer}button:active{outline:none;box-shadow:none;background-color:var(--ez-split-button--active--background-color);color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.ez-split-button__left-button:focus,.ez-split-button__right-button:focus{outline:var(--ez-split-button--focus--border);box-shadow:var(--ez-split-button--focus--box-shadow)}.ez-split-button__left-button:hover,.ez-split-button__right-button:hover{outline:none;background-color:var(--ez-split-button--hover--background-color);color:var(--ez-split-button--hover-color);fill:var(--ez-split-button--hover-color);--ez-icon--color:var(--ez-split-button--hover-color)}.ez-split-button__left-button:disabled,.ez-split-button__left-button:disabled label,.ez-split-button__right-button:disabled{background-color:var(--ez-split-button--disabled--background-color);color:var(--ez-split-button--disabled-color);fill:var(--ez-split-button--disabled-color);border:none;--ez-icon--color:var(--ez-split-button--disabled-color);cursor:not-allowed}button.large{height:var(--ez-split-button__large--height)}button.medium{height:var(--ez-split-button__medium--height)}.default label{padding:var(--ez-split-button__label--padding-top) 12px var(--ez-split-button__label--padding-bottom) 20px}.icon-left{gap:var(--ez-split-button__inline__icon--gap)}.icon-left label{padding-right:12px}.icon-left ez-icon{padding-left:20px}.icon-only{padding-left:12px;padding-right:12px}.ez-split-button__right-button{border-top-right-radius:var(--ez-split-button--border-radius);border-bottom-right-radius:var(--ez-split-button--border-radius);border-top-left-radius:0;border-bottom-left-radius:0}.ez-split-button__right-button--medium{min-width:var(--ez-split-button__medium-icon--width)}.ez-split-button__right-button--large{min-width:var(--ez-split-button__large-icon--width)}.ez-split-button__right-button--divider{top:10%;bottom:10%}.ez-split-button__right-button--divider:before{content:\"\";position:absolute;left:0;border-left:1px solid rgba(0, 0, 0, 20%);border-radius:2px;height:75%}.btn-icon--medium{min-width:--ez-split-button__medium-icon--width}.btn-icon--large{min-width:--ez-split-button__large-icon--width}.ez-split-button__right-button-container{position:absolute;left:0;padding-left:var(--ez-split-button__right-button--padding-left)}.label-icon{display:flex;flex-direction:row;align-items:center;color:var(--ez-split-button--color)}.label-icon:active{color:var(--ez-split-button--active-color);fill:var(--ez-split-button--active-color);--ez-icon--color:var(--ez-split-button--active-color)}.dropdown{display:flex}.dropdown-content{display:block;position:absolute;background-color:#f1f1f1;min-width:160px;z-index:--ez-elevation--8;border-radius:var(--ez-split-button--border-radius)}.dropdown-content>ez-dropdown{position:relative}";
|
|
5
|
-
|
|
6
|
-
const EzSplitButton = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this.buttonClick = createEvent(this, "buttonClick", 7);
|
|
10
|
-
this.dropdownItemClick = createEvent(this, "dropdownItemClick", 7);
|
|
11
|
-
this.dropdownSubActionClick = createEvent(this, "dropdownSubActionClick", 7);
|
|
12
|
-
this.rightDefaultTitle = 'Mais opções';
|
|
13
|
-
this.show = false;
|
|
14
|
-
this.enabled = true;
|
|
15
|
-
this.iconName = undefined;
|
|
16
|
-
this.image = undefined;
|
|
17
|
-
this.items = undefined;
|
|
18
|
-
this.label = undefined;
|
|
19
|
-
this.leftTitle = undefined;
|
|
20
|
-
this.rightTitle = 'Mais opções';
|
|
21
|
-
this.mode = 'default';
|
|
22
|
-
this.size = 'medium';
|
|
23
|
-
}
|
|
24
|
-
/**
|
|
25
|
-
* Remove o foco de ambos os botões.
|
|
26
|
-
*/
|
|
27
|
-
async setBlur() {
|
|
28
|
-
this.leftButton.blur();
|
|
29
|
-
this.rightButton.blur();
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* Aplica o foco no botão principal.
|
|
33
|
-
*/
|
|
34
|
-
async setLeftButtonFocus() {
|
|
35
|
-
this.leftButton.focus();
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Aplica o foco no botão do dropdown.
|
|
39
|
-
*/
|
|
40
|
-
async setRightButtonFocus() {
|
|
41
|
-
this.rightButton.focus();
|
|
42
|
-
}
|
|
43
|
-
clickListener(evt) {
|
|
44
|
-
if (!this.enabled) {
|
|
45
|
-
evt.preventDefault();
|
|
46
|
-
evt.stopPropagation();
|
|
47
|
-
evt.stopImmediatePropagation();
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
getIconSize(sizeParam = 'medium') {
|
|
51
|
-
var _a;
|
|
52
|
-
const sizeList = ['medium', 'large'];
|
|
53
|
-
const sizeLowerCase = (_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase();
|
|
54
|
-
return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
|
|
55
|
-
}
|
|
56
|
-
closeDropdown() {
|
|
57
|
-
this.show = false;
|
|
58
|
-
}
|
|
59
|
-
toggleDropdown() {
|
|
60
|
-
this.show = !this.show;
|
|
61
|
-
}
|
|
62
|
-
handleButtonClick() {
|
|
63
|
-
this.buttonClick.emit();
|
|
64
|
-
}
|
|
65
|
-
handleDropdownItemClick(evt) {
|
|
66
|
-
this.dropdownItemClick.emit(evt.detail);
|
|
67
|
-
evt.stopPropagation();
|
|
68
|
-
this.closeDropdown();
|
|
69
|
-
}
|
|
70
|
-
handleDropdownSubActionClick(evt) {
|
|
71
|
-
this.dropdownSubActionClick.emit(evt.detail);
|
|
72
|
-
evt.stopPropagation();
|
|
73
|
-
this.closeDropdown();
|
|
74
|
-
}
|
|
75
|
-
/**
|
|
76
|
-
* Método responsável em posicionar o dropdown na tela.
|
|
77
|
-
* Faz com que o dropdown se ajuste automaticamente ao espaco na tela
|
|
78
|
-
*/
|
|
79
|
-
positionDropdown() {
|
|
80
|
-
const { rightButton: _rightButton, dropdownParent: _dropdownParent } = this;
|
|
81
|
-
const rightButtonRect = _rightButton.getBoundingClientRect();
|
|
82
|
-
const dropdownParentRect = _dropdownParent.getBoundingClientRect();
|
|
83
|
-
const spaceBelow = window.innerHeight - rightButtonRect.bottom;
|
|
84
|
-
const spaceAbove = rightButtonRect.top;
|
|
85
|
-
const spaceRight = window.innerWidth - rightButtonRect.right;
|
|
86
|
-
const spaceLeft = rightButtonRect.left;
|
|
87
|
-
const hasSpaceBelow = spaceBelow < dropdownParentRect.height && spaceAbove > dropdownParentRect.height;
|
|
88
|
-
const hasSpaceRight = spaceRight < dropdownParentRect.width && spaceLeft > dropdownParentRect.width;
|
|
89
|
-
let top = `${rightButtonRect.bottom + window.scrollY}px`;
|
|
90
|
-
let left = `${rightButtonRect.left + window.scrollX}px`;
|
|
91
|
-
let bottom = 'auto';
|
|
92
|
-
if (hasSpaceBelow) {
|
|
93
|
-
bottom = `${window.innerHeight - rightButtonRect.top - window.scrollY}px`;
|
|
94
|
-
top = 'auto';
|
|
95
|
-
_dropdownParent.style.maxHeight = `${spaceAbove}px`;
|
|
96
|
-
}
|
|
97
|
-
if (hasSpaceRight) {
|
|
98
|
-
left = `${rightButtonRect.right - dropdownParentRect.width + window.scrollX}px`;
|
|
99
|
-
}
|
|
100
|
-
_dropdownParent.style.top = top;
|
|
101
|
-
_dropdownParent.style.bottom = bottom;
|
|
102
|
-
_dropdownParent.style.left = left;
|
|
103
|
-
}
|
|
104
|
-
setEvents() {
|
|
105
|
-
window.removeEventListener('scroll', this.positionDropdown.bind(this));
|
|
106
|
-
window.addEventListener('scroll', this.positionDropdown.bind(this));
|
|
107
|
-
}
|
|
108
|
-
componentWillLoad() {
|
|
109
|
-
this.setEvents();
|
|
110
|
-
}
|
|
111
|
-
componentDidLoad() {
|
|
112
|
-
if (this._element)
|
|
113
|
-
ElementIDUtils.addIDInfo(this._element);
|
|
114
|
-
if (this.leftButton) {
|
|
115
|
-
const dataInfo = { id: 'embedded' };
|
|
116
|
-
ElementIDUtils.addIDInfo(this.leftButton, 'left-button', dataInfo);
|
|
117
|
-
}
|
|
118
|
-
if (this.rightButton) {
|
|
119
|
-
const dataInfo = { id: 'embedded' };
|
|
120
|
-
ElementIDUtils.addIDInfo(this.rightButton, 'right-button', dataInfo);
|
|
121
|
-
}
|
|
122
|
-
this.positionDropdown();
|
|
123
|
-
}
|
|
124
|
-
componentDidUpdate() {
|
|
125
|
-
this.positionDropdown();
|
|
126
|
-
}
|
|
127
|
-
render() {
|
|
128
|
-
const hasIconButton = this.shouldShowIconOnLeftButton();
|
|
129
|
-
const hasLabelButton = this.shouldShowLabelOnLeftButton();
|
|
130
|
-
const iconSize = this.getIconSize();
|
|
131
|
-
return (h("div", { class: "label-icon" }, h("button", { class: `ez-split-button__left-button ${iconSize} ${this.mode}`, title: this.leftTitle || this.label, type: "button", disabled: !this.enabled, onClick: () => { this.handleButtonClick(); }, ref: el => (this.leftButton = el) }, hasIconButton && h("ez-icon", { href: this.image, iconName: this.iconName, size: iconSize }), hasLabelButton && h("label", { title: this.leftTitle || this.label }, this.label)), h("div", { class: "dropdown" }, h("button", { class: `ez-split-button__right-button ${iconSize} ez-split-button__right-button--${iconSize} ez-split-button__right-button--divider`, title: this.rightTitle || this.rightDefaultTitle, type: "button", disabled: !this.enabled, onClick: () => { this.toggleDropdown(); }, ref: el => (this.rightButton = el) }, h("ez-icon", { class: `ez-split-button__right-button-container ` + (iconSize ? `btn-icon--${iconSize}` : ''), iconName: 'chevron-down', size: iconSize })), h("div", { class: `dropdown-content dropdown-content--${this.size}`, ref: (ref) => (this.dropdownParent = ref) }, this.show && (h("ez-dropdown", { items: this.items, onClick: evt => { evt.stopPropagation(); }, onEzOutsideClick: () => { this.closeDropdown(); }, onEzClick: evt => { this.handleDropdownItemClick(evt); }, onEzSubActionClick: evt => { this.handleDropdownSubActionClick(evt); } }))))));
|
|
132
|
-
}
|
|
133
|
-
shouldShowLabelOnLeftButton() {
|
|
134
|
-
return ['icon-left', 'default'].includes(this.mode);
|
|
135
|
-
}
|
|
136
|
-
shouldShowIconOnLeftButton() {
|
|
137
|
-
return ['icon-left', 'icon-only'].includes(this.mode);
|
|
138
|
-
}
|
|
139
|
-
get _element() { return getElement(this); }
|
|
140
|
-
};
|
|
141
|
-
EzSplitButton.style = ezSplitButtonCss;
|
|
142
|
-
|
|
143
|
-
export { EzSplitButton as ez_split_button };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as i,c as t,h as s,H as e,g as r}from"./p-23a36bb6.js";import{C as o}from"./p-9e11fc7b.js";import{ObjectUtils as a,StringUtils as h,FloatingManager as l,ElementIDUtils as n}from"@sankhyalabs/core";import{A as c}from"./p-2187f86c.js";import"./p-ab574d59.js";import"./p-b853763b.js";import{R as d}from"./p-05e1f4e7.js";const u=class{constructor(s){i(this,s),this.ezChange=t(this,"ezChange",7),this._changeDeboucingTimeout=null,this._limitCharsToSearch=3,this._deboucingTime=300,this._maxWidthValue=0,this._tabPressed=!1,this._textEmptyList="Nenhum resultado encontrado",this._textEmptySearch="Nenhum resultado de {0} encontrado",this._lookupMode=!1,this._startHighlightTag="<span class='card-item__highlight'>",this._endHighlightTag="</span>",this._preSelection=void 0,this._visibleOptions=void 0,this._startLoading=!1,this._showLoading=!0,this._criteria=void 0,this.value=void 0,this.label=void 0,this.enabled=!0,this.errorMessage=void 0,this.optionLoader=void 0,this.showSelectedValue=!0,this.showOptionValue=!0,this.suppressEmptyOption=!1,this.mode="regular",this.canShowError=!0,this.hideErrorOnFocusOut=!0,this.listOptionsPosition=void 0,this.isTextSearch=!1,this.ignoreLimitCharsToSearch=!1,this.options=void 0,this.suppressSearch=!1}observeErrorMessage(){var i;this._textInput&&(this._textInput.errorMessage=this.errorMessage,(null===(i=this.errorMessage)||void 0===i?void 0:i.trim())||this.setInputValue())}observeValue(i,t){if(this._textInput&&i!=t)try{if("string"===i)return void this.setInputValue();const s=this.getSelectedOption(i),e=this.getSelectedOption(t),r=this.getSelectedOption(this.value);this.isDifferentValues(r,s)&&(this.value=s),this.isDifferentValues(s,e)&&(this.setInputValue(),this._lookupMode||this.ezChange.emit(null===s?void 0:s)),this.resetOptions()}finally{this._lookupMode=!1}}observeOptions(i,t){(null==i?void 0:i.join(""))!==(null==t?void 0:t.join(""))&&this.loadOptions(v.PRELOAD)}async getValueAsync(){return new Promise(this._showLoading?i=>{let t=setInterval((()=>{this._showLoading||(clearInterval(t),i(this.value))}),100)}:i=>i(this.value))}async setFocus(){this._textInput&&this._textInput.setFocus()}async setBlur(){this._textInput&&this._textInput.setBlur()}async isInvalid(){return"string"==typeof this.errorMessage&&""!==this.errorMessage.trim()}async clearValue(){this.clearSearch()}scrollListener(){var i;null!=this._floatingID&&((null===(i=this.listOptionsPosition)||void 0===i?void 0:i.hardPosition)?this.hideOptions():window.requestAnimationFrame((()=>{this.updateListPosition()})))}updateListPosition(){let{verticalPosition:i,horizontalPosition:t,fromBottom:s,fromRight:e,bottomLimit:r,hardPosition:o}=this.getListPosition();const a=this._listWrapper.getBoundingClientRect(),h=this._listContainer.getBoundingClientRect(),l=this._textInput.getBoundingClientRect(),n=r||window.innerHeight;!s&&(a.top<0||h.bottom+a.height>n)&&(s=!0),o||(i=i||0,t=t||0,s?i=window.innerHeight-l.top+i:i+=h.top,e?t=window.innerWidth-l.right+t:t+=h.left),null!=i&&(this._listWrapper.style[s?"bottom":"top"]=`${i}px`,this._listWrapper.style[s?"top":"bottom"]=""),null!=t&&(this._listWrapper.style[e?"right":"left"]=`${t}px`,this._listWrapper.style[e?"left":"right"]="")}getListPosition(){return this.listOptionsPosition?this.listOptionsPosition:{verticalPosition:this.errorMessage||!this.canShowError||"slim"===this.mode?6:-13}}isDifferentValues(i,t){return a.objectToString(i||{})!==a.objectToString(t||{})}getFormattedText(i){if(null==i)return;let t=this.showSelectedValue&&null!=i.value?`${i.value} - ${i.label}`:i.label;return t=t.replace(new RegExp(this._startHighlightTag,"g"),"").replace(new RegExp(this._endHighlightTag,"g"),""),t}getText(){const i=this.getSelectedOption(this.value),t=this.getFormattedText(i);if(null!=t)return String(t).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,'"')}getSelectedOption(i){return"string"==typeof i||i instanceof String?this._visibleOptions.find((t=>t.value===i)):i}updateVisibleOptions(){let i=this._source||[];this._visibleOptions=this.suppressEmptyOption?i:[{value:void 0,label:""}].concat(i),this._maxWidthValue=this.getMaxWidthValue()}getMaxWidthValue(){var i;const t=[];return null===(i=this._visibleOptions)||void 0===i||i.forEach((i=>{const s=this.getWidthValue(i.value);t.includes(s)||t.push(s)})),t.length>1?Math.max(...t):0}getWidthValue(i){if(null!=this._itemValueBasis){const t=this._itemValueBasis;if(null!=i)return t.innerHTML=i,t.clientWidth>0?t.clientWidth+2:0;t.innerHTML=""}return 0}createOption(i){let{key:t,title:s}=i;const e=new RegExp(this._startHighlightTag,"g"),r=new RegExp(this._endHighlightTag,"g");s=h.decodeHtmlEntities(s);const o={value:null==t?void 0:t.replace(e,"").replace(r,""),label:null==s?void 0:s.replace(e,"").replace(r,"")};this.selectOption(o)}buildItem(i,t){i.label=i.label||i.value;const e={key:i.value,title:i.label,details:i.details};return s("div",{style:{height:"100%"},class:t===this._preSelection?"item preselected":"item",id:`item_${i.value}`,onMouseDown:()=>this.createOption(e),onMouseOver:()=>this._preSelection=t},s("ez-card-item",{item:e}))}showOptions(){this.enabled&&(this.isOptionsVisible()||(this._resizeObserver&&this._resizeObserver.observe(this._textInput),this._floatingID=l.float(this._listWrapper,this._listContainer,{autoClose:!1,isFixed:!0,backClickListener:()=>this.hideOptions()}),this.setFocus(),window.requestAnimationFrame((()=>{this.updateListPosition(),this.listOptionsPosition||this._listWrapper.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}))))}hideOptions(){void 0!==this._floatingID&&l.close(this._floatingID),this._floatingID=void 0,this._resizeObserver&&this._resizeObserver.unobserve(this._textInput)}isOptionsVisible(){return void 0!==this._floatingID&&l.isFloating(this._floatingID)}nextOption(){this.isOptionsVisible()&&(this.showOptions(),this._preSelection=void 0===this._preSelection?0:Math.min(this._preSelection+1,this._visibleOptions.length-1),this.scrollToOption(this._visibleOptions[this._preSelection]))}previousOption(){this._preSelection=void 0===this._preSelection?0:Math.max(this._preSelection-1,0),this.scrollToOption(this._visibleOptions[this._preSelection])}scrollToOption(i){window.requestAnimationFrame((()=>{const t=(null==i?void 0:i.value)?this._optionsList.querySelector(`div#item_${i.value.replace(/[<>\[\]#=]/g,"\\$&").replace(/:/g,"\\:")}`):void 0;t&&t.scrollIntoView({behavior:"smooth",block:"nearest"})}))}selectCurrentOption(){void 0!==this._preSelection?(this.selectOption(this._visibleOptions[this._preSelection]),this._preSelection=void 0):this.controlListWithOnlyOne()}updateSource(i){this._startLoading=!1,i instanceof Promise?(this._showLoading=!0,i.then((i=>{this._showLoading=!1,this.updateSource(i)})).catch((()=>this._showLoading=!1)),this.updateVisibleOptions()):(this._showLoading=!1,Array.isArray(i)?(this._source=i,this.updateVisibleOptions(),this._tabPressed&&(this._tabPressed=!1,this.controlEmptySearch())):this.selectOption(i))}clearSource(){this._source=[],this.updateVisibleOptions()}selectOption(i){var t,s;const e=this.getSelectedOption(this.value);(null===(t=null==e?void 0:e.value)||void 0===t?void 0:t.toString())!==(null===(s=null==i?void 0:i.value)||void 0===s?void 0:s.toString())||null==e&&null!=i&&"value"in i?this.value=(null==i?void 0:i.value)?i:void 0:this.resetOptions(),this._visibleOptions=[],this.clearSource()}loadOptions(i,t=""){this._criteria=t,this._startLoading=!0,this.updateSource(this.optionLoader?this.optionLoader({mode:i,argument:t}):this.options)}cancelPreselection(){!this._textInput.value&&this.value?this.selectOption(void 0):window.setTimeout((()=>{this.setInputValue()}),this._deboucingTime),this.resetOptions()}setInputValue(i=!0){const t=this.getText();(this._textInput.value||"")!==t&&(this._textInput.value=t,i&&(this.errorMessage=null))}clearSearch(){this.value=null}controlListWithOnlyOne(){var i,t;const s=null===(i=this._visibleOptions)||void 0===i?void 0:i.filter((i=>""!==i.label&&null!=i.value));if((null==s?void 0:s.length)>0){const i=new RegExp(this._startHighlightTag,"g"),e=new RegExp(this._endHighlightTag,"g");let r=h.decodeHtmlEntities(s[0].label);const o={value:null===(t=s[0].value)||void 0===t?void 0:t.replace(i,"").replace(e,""),label:null==r?void 0:r.replace(i,"").replace(e,"")};this.selectOption(o)}}controlEmptySearch(){var i;(null===(i=this._visibleOptions)||void 0===i?void 0:i.length)?this.controlListWithOnlyOne():(this.clearSearch(),c.info(this._textEmptyList))}validateDescriptionValue(){if(h.isEmpty(this.value))return;let i=this.value;"object"!=typeof i&&(h.isEmpty(i)||this.loadDescriptionValue(i))}async loadDescriptionValue(i){var t,s;if(null==i)return;if((null===(t=this.options)||void 0===t?void 0:t.length)>0)return void this.loadOptionValue(i);const e={mode:v.PREDICTIVE,argument:i},r=await(null===(s=this.optionLoader)||void 0===s?void 0:s.call(this,e));null!=r&&(r instanceof Promise?r.then((i=>{this.setDescriptionValue(i)})):this.setDescriptionValue(r))}setDescriptionValue(i){const t=(null==i?void 0:i[0])||i;null!=t&&Object.keys(t).length?(this._lookupMode=!0,this.value=t):this.showNoResultMessage()}loadOptionValue(i){var t;const s=null===(t=this.options)||void 0===t?void 0:t.find((t=>t.value===i));null!=s?this.selectOption(s):this.showNoResultMessage()}async showNoResultMessage(){this.clearSearch(),c.info(this._textEmptySearch.replace("{0}",this.getFieldLabel()))}getFieldLabel(){var i;return null===(i=this.label)||void 0===i?void 0:i.replace(d,"").toUpperCase()}resetOptions(){this.hideOptions(),this._criteria=void 0,this._preSelection=void 0,this.updateVisibleOptions()}componentWillLoad(){if(void 0===this.options){this.options=[];const i=this.el.querySelectorAll("option");i&&i.forEach((i=>{let t=i.innerText,s=i.getAttribute("value"),e=i.getAttribute("details");s||(s=t),this.options.push({label:t,value:s,details:e}),i.hidden=!0}))}this.updateSource([])}componentDidRender(){var i;void 0===this._floatingID&&this._listWrapper.remove(),null===(i=this._optionsList)||void 0===i||i.querySelectorAll(".item").forEach((i=>{n.addIDInfoIfNotExists(i,"itemSearch")})),this.validateDescriptionValue()}componentDidLoad(){o.applyVarsTextInput(this.el,this._textInput),this.setInputValue(!1),this._resizeObserver=new ResizeObserver((i=>{window.requestAnimationFrame((()=>{if(!Array.isArray(i)||!i.length)return;const{clientWidth:t}=this._listContainer;t>0&&this._listWrapper&&(this._listWrapper.style.width=`${t}px`)}))}))}handlerIconClick(){this.loadOptions(v.ADVANCED)}buildNumberArgument(i){return this.isTextSearch?NaN:Number(i||void 0)}onTextInputChangeHandler(i){var t;if(this.clearDeboucingTimeout(),this._startLoading)return void(this._changeDeboucingTimeout=window.setTimeout((()=>{this.onTextInputChangeHandler(i)}),this._deboucingTime));const s=null===(t=i.target.value)||void 0===t?void 0:t.trim(),e=this.buildNumberArgument(s);this._criteria||(this._textInput.value=i.data||s),this._criteria=s,s?(this._showLoading=!1,this.clearSource(),!isNaN(e)||s.length>=this._limitCharsToSearch?(this._showLoading=!0,this._changeDeboucingTimeout=window.setTimeout((()=>{this.loadOptions(v.PREDICTIVE,isNaN(e)?s:e.toString())}),this._deboucingTime),this.showOptions()):this.hideOptions()):(this.hideOptions(),this._showLoading=!1,this.clearSource())}clearDeboucingTimeout(){this._changeDeboucingTimeout&&(window.clearTimeout(this._changeDeboucingTimeout),this._changeDeboucingTimeout=null)}keyDownHandler(i){switch(this._tabPressed=!1,i.ctrlKey&&("f"!==i.key&&"F"!==i.key||(this.loadOptions(v.ADVANCED),i.stopPropagation(),i.stopImmediatePropagation(),i.preventDefault())),i.key){case"ArrowDown":this.nextOption(),i.stopPropagation();break;case"ArrowUp":this.previousOption(),i.stopPropagation();break;case"Enter":this.selectCurrentOption();break;case"Escape":this.cancelPreselection();break;case"Tab":this._tabPressed=!0,this.controlListWithOnlyOne()}}onTextInputFocusOutHandler(){this.hideErrorOnFocusOut&&this.cancelPreselection()}canShowListOptions(){return!this._showLoading&&this._visibleOptions.length>0}render(){var i;return n.addIDInfoIfNotExists(this.el,"input"),s(e,null,s("ez-text-input",{"data-element-id":n.getInternalIDInfo("textInput"),class:this.suppressSearch?"suppressed-search-input":"",ref:i=>this._textInput=i,"data-slave-mode":"true",enabled:this.enabled&&!this.suppressSearch,onInput:i=>this.onTextInputChangeHandler(i),onFocusout:()=>this.onTextInputFocusOutHandler(),onKeyDown:i=>this.keyDownHandler(i),label:this.label,canShowError:this.canShowError,errorMessage:this.errorMessage,mode:this.mode},s("button",{class:"btn",slot:"leftIcon",disabled:!this.enabled,tabindex:-1,onClick:()=>this.handlerIconClick()},s("ez-icon",{iconName:"search"})),(null===(i=this._textInput)||void 0===i?void 0:i.value)&&(this._criteria||this.value)?s("button",{class:"btn btn__close",slot:"rightIcon",disabled:!this.enabled,tabindex:-1,onClick:()=>this.clearSearch()},s("ez-icon",{iconName:"close"})):void 0),s("section",{class:"list-container",ref:i=>this._listContainer=i},s("div",{class:"list-wrapper",ref:i=>this._listWrapper=i},s("ul",{class:"list-options",ref:i=>this._optionsList=i},!this._showLoading&&0===this._visibleOptions.length&&s("div",{class:"message"},s("span",{class:"message__no-result"},this._textEmptyList)),this._showLoading&&s("div",{class:"message"},s("div",{class:"message__loading"})),s("span",{class:"item__value item__value--hidden",ref:i=>this._itemValueBasis=i}),this.canShowListOptions()&&this._visibleOptions.map(((i,t)=>this.buildItem(i,t)))))))}get el(){return r(this)}static get watchers(){return{errorMessage:["observeErrorMessage"],value:["observeValue"],options:["observeOptions"]}}};var v;!function(i){i.ADVANCED="ADVANCED",i.PRELOAD="PRELOAD",i.PREDICTIVE="PREDICTIVE"}(v||(v={})),u.style=":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search__icon--width:48px;--ez-search--border-radius:var(--border--radius-medium, 12px);--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-color--xlight:var(--background--xlight, #fff);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px);--ez-search__input--background-color:var(--background--medium, #e0e0e0);--ez-search__input--border:var(--border--medium, 2px solid);--ez-search__input--border-color:var(--ez-search__input--background-color);--ez-search__input--focus--border-color:var(--color--primary, #008561);--ez-search__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-search__input--disabled--color:var(--text--disable, #AFB6C0);--ez-search__input--error--border-color:#CC2936;--ez-search__btn--color:var(--title--primary, #2B3A54);--ez-search__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-search__btn-hover--color:var(--color--primary, #4e4e4e);--ez-search__label--color:var(--title--primary, #2B3A54);--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--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);--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--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{min-width:var(--ez-search__list-min-width);overflow:auto;position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:0;z-index:var(--more-visible, 2);max-height:350px;min-width:150px;background-color:var(--ez-search--background-color--xlight);border-radius:var(--ez-search--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-search--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-search__scrollbar--color-background);width:var(--ez-search__scrollbar--width);max-width:var(--ez-search__scrollbar--width);min-width:var(--ez-search__scrollbar--width)}.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)}.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);padding:var(--ez-search--space--small);gap:var(--space--small, 6px)}.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}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;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__list>li:hover{background-color:var(--ez-search--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-search__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-search__btn-disabled--color)}.btn:hover{color:var(--ez-search__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";export{u as ez_search}
|