@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.
Files changed (111) hide show
  1. package/dist/cjs/{CSSVarsUtils-10c9d5b4.js → CSSVarsUtils-b136a156.js} +0 -13
  2. package/dist/cjs/ez-actions-button.cjs.entry.js +1 -1
  3. package/dist/cjs/ez-card-item_3.cjs.entry.js +5 -6
  4. package/dist/cjs/ez-combo-box.cjs.entry.js +6 -7
  5. package/dist/cjs/ez-date-input.cjs.entry.js +1 -1
  6. package/dist/cjs/ez-date-time-input.cjs.entry.js +1 -1
  7. package/dist/cjs/ez-form-view.cjs.entry.js +13 -30
  8. package/dist/cjs/ez-grid.cjs.entry.js +10 -72
  9. package/dist/cjs/ez-icon.cjs.entry.js +1 -1
  10. package/dist/cjs/ez-multi-selection-list.cjs.entry.js +10 -2
  11. package/dist/cjs/ez-number-input.cjs.entry.js +1 -1
  12. package/dist/cjs/ez-popup.cjs.entry.js +1 -1
  13. package/dist/cjs/ez-search.cjs.entry.js +5 -4
  14. package/dist/cjs/ez-split-item.cjs.entry.js +2 -11
  15. package/dist/cjs/ez-split-panel.cjs.entry.js +5 -6
  16. package/dist/cjs/ez-time-input.cjs.entry.js +1 -1
  17. package/dist/cjs/ezui.cjs.js +1 -1
  18. package/dist/cjs/index-a7b0c73d.js +4 -8
  19. package/dist/cjs/loader.cjs.js +1 -1
  20. package/dist/collection/collection-manifest.json +0 -1
  21. package/dist/collection/components/ez-card-item/ez-card-item.css +5 -19
  22. package/dist/collection/components/ez-card-item/ez-card-item.js +3 -22
  23. package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css +0 -1
  24. package/dist/collection/components/ez-combo-box/ez-combo-box.js +5 -6
  25. package/dist/collection/components/ez-form-view/ez-form-view.css +1 -17
  26. package/dist/collection/components/ez-form-view/ez-form-view.js +5 -22
  27. package/dist/collection/components/ez-form-view/fieldbuilder/templates/CheckBox.tpl.js +1 -1
  28. package/dist/collection/components/ez-form-view/fieldbuilder/templates/ComboBox.tpl.js +1 -1
  29. package/dist/collection/components/ez-form-view/fieldbuilder/templates/DateInput.tpl.js +3 -3
  30. package/dist/collection/components/ez-form-view/fieldbuilder/templates/NumberInput.tpl.js +1 -1
  31. package/dist/collection/components/ez-form-view/fieldbuilder/templates/SearchInput.tpl.js +1 -1
  32. package/dist/collection/components/ez-form-view/fieldbuilder/templates/TextInput.tpl.js +1 -1
  33. package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +1 -5
  34. package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js +0 -3
  35. package/dist/collection/components/ez-grid/ez-grid.css +2 -25
  36. package/dist/collection/components/ez-grid/ez-grid.js +8 -65
  37. package/dist/collection/components/ez-icon/ez-icon.css +116 -118
  38. package/dist/collection/components/ez-multi-selection-list/ez-multi-selection-list.js +10 -2
  39. package/dist/collection/components/ez-popup/ez-popup.css +4 -2
  40. package/dist/collection/components/ez-search/ez-search.js +4 -3
  41. package/dist/collection/components/ez-split-panel/ez-split-panel.css +1 -0
  42. package/dist/collection/components/ez-split-panel/ez-split-panel.js +4 -5
  43. package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.css +4 -15
  44. package/dist/collection/components/ez-split-panel/structure/item/ez-split-item.js +2 -27
  45. package/dist/collection/utils/CSSVarsUtils.js +0 -13
  46. package/dist/custom-elements/index.d.ts +0 -6
  47. package/dist/custom-elements/index.js +57 -290
  48. package/dist/esm/{CSSVarsUtils-71ce76be.js → CSSVarsUtils-a97cfa29.js} +0 -13
  49. package/dist/esm/ez-actions-button.entry.js +1 -1
  50. package/dist/esm/ez-card-item_3.entry.js +5 -6
  51. package/dist/esm/ez-combo-box.entry.js +6 -7
  52. package/dist/esm/ez-date-input.entry.js +1 -1
  53. package/dist/esm/ez-date-time-input.entry.js +1 -1
  54. package/dist/esm/ez-form-view.entry.js +14 -31
  55. package/dist/esm/ez-grid.entry.js +11 -73
  56. package/dist/esm/ez-icon.entry.js +1 -1
  57. package/dist/esm/ez-multi-selection-list.entry.js +10 -2
  58. package/dist/esm/ez-number-input.entry.js +1 -1
  59. package/dist/esm/ez-popup.entry.js +1 -1
  60. package/dist/esm/ez-search.entry.js +5 -4
  61. package/dist/esm/ez-split-item.entry.js +3 -12
  62. package/dist/esm/ez-split-panel.entry.js +5 -6
  63. package/dist/esm/ez-time-input.entry.js +1 -1
  64. package/dist/esm/ezui.js +1 -1
  65. package/dist/esm/index-baa5e267.js +4 -8
  66. package/dist/esm/loader.js +1 -1
  67. package/dist/ezui/ezui.esm.js +1 -1
  68. package/dist/ezui/{p-abc23d6f.entry.js → p-02c8831a.entry.js} +1 -1
  69. package/dist/ezui/p-13dbad96.entry.js +1 -0
  70. package/dist/ezui/{p-b567fa8c.entry.js → p-18e7870d.entry.js} +1 -1
  71. package/dist/ezui/{p-07cbffce.entry.js → p-300bf244.entry.js} +1 -1
  72. package/dist/ezui/{p-784fe207.entry.js → p-40f72de4.entry.js} +1 -1
  73. package/dist/ezui/p-428a05fe.entry.js +1 -0
  74. package/dist/ezui/{p-af95cd16.entry.js → p-50186acb.entry.js} +1 -1
  75. package/dist/ezui/p-60848ef6.entry.js +1 -0
  76. package/dist/ezui/{p-9f1e89c9.entry.js → p-672dd122.entry.js} +1 -1
  77. package/dist/ezui/{p-9e11fc7b.js → p-7eb3e1a5.js} +1 -1
  78. package/dist/ezui/{p-e85c48d7.entry.js → p-9cad9b6e.entry.js} +1 -1
  79. package/dist/ezui/{p-22a04c1d.entry.js → p-ab629244.entry.js} +2 -2
  80. package/dist/ezui/p-cd0499a2.entry.js +1 -0
  81. package/dist/ezui/p-e52cbcc7.entry.js +1 -0
  82. package/dist/ezui/p-e562d05e.entry.js +1 -0
  83. package/dist/ezui/{p-99ead599.entry.js → p-eb36f072.entry.js} +1 -1
  84. package/dist/types/components/ez-card-item/ez-card-item.d.ts +0 -4
  85. package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +0 -1
  86. package/dist/types/components/ez-form-view/ez-form-view.d.ts +0 -3
  87. package/dist/types/components/ez-grid/controller/EzGridController.d.ts +0 -1
  88. package/dist/types/components/ez-grid/controller/ag-grid/AgGridController.d.ts +0 -1
  89. package/dist/types/components/ez-grid/ez-grid.d.ts +2 -15
  90. package/dist/types/components/ez-multi-selection-list/ez-multi-selection-list.d.ts +1 -0
  91. package/dist/types/components/ez-split-panel/structure/item/ez-split-item.d.ts +0 -10
  92. package/dist/types/components.d.ts +0 -131
  93. package/dist/types/utils/CSSVarsUtils.d.ts +0 -1
  94. package/package.json +2 -3
  95. package/react/components.d.ts +0 -1
  96. package/react/components.js +0 -1
  97. package/react/components.js.map +1 -1
  98. package/dist/cjs/ez-split-button.cjs.entry.js +0 -147
  99. package/dist/collection/components/ez-split-button/ez-split-button.css +0 -229
  100. package/dist/collection/components/ez-split-button/ez-split-button.js +0 -436
  101. package/dist/collection/components/ez-split-button/test/dropdownItems.js +0 -42
  102. package/dist/esm/ez-split-button.entry.js +0 -143
  103. package/dist/ezui/p-2eb8f73b.entry.js +0 -1
  104. package/dist/ezui/p-7af81663.entry.js +0 -1
  105. package/dist/ezui/p-7bc07c31.entry.js +0 -1
  106. package/dist/ezui/p-801fd0f8.entry.js +0 -1
  107. package/dist/ezui/p-807560f0.entry.js +0 -1
  108. package/dist/ezui/p-b9fbf4e7.entry.js +0 -1
  109. package/dist/ezui/p-db77a984.entry.js +0 -1
  110. package/dist/types/components/ez-split-button/ez-split-button.d.ts +0 -89
  111. 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(/&amp;/g,"&").replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&quot;/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}