@sankhyalabs/ezui 1.1.67 → 1.1.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ez-action-chip.cjs.entry.js +1 -1
- package/dist/cjs/ez-button_16.cjs.entry.js +133 -144
- package/dist/cjs/ez-dialog.cjs.entry.js +7 -1
- package/dist/cjs/ez-modal.cjs.entry.js +16 -69
- package/dist/cjs/ez-number-input.cjs.entry.js +9 -9
- package/dist/cjs/ez-popover.cjs.entry.js +13 -18
- package/dist/cjs/ez-popup.cjs.entry.js +2 -2
- package/dist/cjs/ez-time-input.cjs.entry.js +6 -6
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-action-chip/ez-action-chip.css +2 -1
- package/dist/collection/components/ez-action-chip/ez-action-chip.js +1 -1
- package/dist/collection/components/ez-button/ez-button.css +48 -45
- package/dist/collection/components/ez-button/ez-button.js +5 -5
- package/dist/collection/components/ez-calendar/ez-calendar.css +2 -2
- package/dist/collection/components/ez-check/ez-check.css +78 -78
- package/dist/collection/components/ez-check/ez-check.js +7 -7
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css +2 -2
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js +1 -1
- package/dist/collection/components/ez-combo-box/ez-combo-box.css +46 -44
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +38 -39
- package/dist/collection/components/ez-date-input/ez-date-input.js +9 -9
- package/dist/collection/components/ez-dialog/ez-dialog.css +43 -43
- package/dist/collection/components/ez-dialog/ez-dialog.js +10 -4
- package/dist/collection/components/ez-form/subcomponents/structure/Field.js +6 -6
- package/dist/collection/components/ez-form/subcomponents/structure/FormSheet.js +1 -1
- package/dist/collection/components/ez-icon/ez-icon.css +3 -1
- package/dist/collection/components/ez-icon/ez-icon.js +5 -3
- package/dist/collection/components/ez-label-chip/ez-label-chip.css +2 -1
- package/dist/collection/components/ez-label-chip/ez-label-chip.js +1 -1
- package/dist/collection/components/ez-modal/ez-modal.css +1 -1
- package/dist/collection/components/ez-modal/ez-modal.js +30 -83
- package/dist/collection/components/ez-number-input/ez-number-input.js +11 -11
- package/dist/collection/components/ez-numeric-input/ez-numeric-input.css +1 -1
- package/dist/collection/components/ez-numeric-input/ez-numeric-input.js +9 -9
- package/dist/collection/components/ez-popover/ez-popover.css +4 -5
- package/dist/collection/components/ez-popover/ez-popover.js +25 -30
- package/dist/collection/components/ez-popup/ez-popup.css +7 -7
- package/dist/collection/components/ez-popup/ez-popup.js +4 -4
- package/dist/collection/components/ez-search/ez-search.js +5 -5
- package/dist/collection/components/ez-tabselector/ez-tabselector.css +7 -10
- package/dist/collection/components/ez-tabselector/ez-tabselector.js +68 -70
- package/dist/collection/components/ez-text-area/ez-text-area.css +6 -0
- package/dist/collection/components/ez-text-area/ez-text-area.js +9 -9
- package/dist/collection/components/ez-text-input/ez-text-input.css +68 -60
- package/dist/collection/components/ez-text-input/ez-text-input.js +14 -38
- package/dist/collection/components/ez-time-input/ez-time-input.css +8 -0
- package/dist/collection/components/ez-time-input/ez-time-input.js +9 -9
- package/dist/collection/components/ez-toast/ez-toast.css +2 -2
- package/dist/collection/components/ez-upload/ez-upload.css +4 -1
- package/dist/collection/components/ez-upload/ez-upload.js +3 -3
- package/dist/custom-elements/index.js +198 -261
- package/dist/esm/ez-action-chip.entry.js +1 -1
- package/dist/esm/ez-button_16.entry.js +133 -144
- package/dist/esm/ez-dialog.entry.js +7 -1
- package/dist/esm/ez-modal.entry.js +16 -69
- package/dist/esm/ez-number-input.entry.js +9 -9
- package/dist/esm/ez-popover.entry.js +13 -18
- package/dist/esm/ez-popup.entry.js +2 -2
- package/dist/esm/ez-time-input.entry.js +6 -6
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-1bc9ddad.entry.js +1 -0
- package/dist/ezui/{p-4f4b8aae.entry.js → p-1c33a56d.entry.js} +1 -1
- package/dist/ezui/{p-d8a47f23.entry.js → p-74e4415e.entry.js} +1 -1
- package/dist/ezui/p-a7e23f65.entry.js +1 -0
- package/dist/ezui/p-a88ee12f.entry.js +1 -0
- package/dist/ezui/p-b692a0ab.entry.js +1 -0
- package/dist/ezui/p-b6e0fd3e.entry.js +1 -0
- package/dist/ezui/{p-7f528c19.entry.js → p-f7d7fb7f.entry.js} +1 -1
- package/dist/types/components/ez-action-chip/ez-action-chip.d.ts +1 -1
- package/dist/types/components/ez-button/ez-button.d.ts +1 -1
- package/dist/types/components/ez-check/ez-check.d.ts +3 -3
- package/dist/types/components/ez-collapsible-box/ez-collapsible-box.d.ts +1 -1
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +8 -8
- package/dist/types/components/ez-date-input/ez-date-input.d.ts +2 -2
- package/dist/types/components/ez-dialog/ez-dialog.d.ts +8 -2
- package/dist/types/components/ez-icon/ez-icon.d.ts +6 -0
- package/dist/types/components/ez-label-chip/ez-label-chip.d.ts +1 -1
- package/dist/types/components/ez-modal/ez-modal.d.ts +9 -9
- package/dist/types/components/ez-number-input/ez-number-input.d.ts +1 -1
- package/dist/types/components/ez-numeric-input/ez-numeric-input.d.ts +3 -3
- package/dist/types/components/ez-popover/ez-popover.d.ts +4 -5
- package/dist/types/components/ez-popup/ez-popup.d.ts +3 -3
- package/dist/types/components/ez-search/ez-search.d.ts +3 -3
- package/dist/types/components/ez-tabselector/ez-tabselector.d.ts +19 -10
- package/dist/types/components/ez-text-area/ez-text-area.d.ts +4 -4
- package/dist/types/components/ez-text-input/ez-text-input.d.ts +4 -8
- package/dist/types/components/ez-time-input/ez-time-input.d.ts +2 -2
- package/dist/types/components/ez-upload/ez-upload.d.ts +3 -3
- package/dist/types/components.d.ts +142 -114
- package/package.json +2 -1
- package/dist/ezui/p-7c7dbfcb.entry.js +0 -1
- package/dist/ezui/p-8c8f1c00.entry.js +0 -1
- package/dist/ezui/p-afc553a4.entry.js +0 -1
- package/dist/ezui/p-d185d7e8.entry.js +0 -1
- package/dist/ezui/p-ee5058c1.entry.js +0 -1
|
@@ -2,63 +2,65 @@
|
|
|
2
2
|
|
|
3
3
|
/* dimensions */
|
|
4
4
|
/*@doc Define altura do input.*/
|
|
5
|
-
--
|
|
5
|
+
--combo-box--height: 42px;
|
|
6
6
|
/*@doc Define largura do input.*/
|
|
7
|
-
--
|
|
7
|
+
--combo-box--width: 100%;
|
|
8
8
|
/*@doc Define largura do slot do ícone do input.*/
|
|
9
|
-
--
|
|
9
|
+
--combo-box__icon--width: 48px;
|
|
10
10
|
|
|
11
11
|
/* general */
|
|
12
12
|
/*@doc Define o raio da borda do input.*/
|
|
13
|
-
--
|
|
13
|
+
--combo-box--border-radius: var(--border--radius-medium, 12px);
|
|
14
14
|
/*@doc Define o raio da borda do input quando pequeno.*/
|
|
15
|
-
--
|
|
15
|
+
--combo-box--border-radius-small: var(--border--radius-small, 6px);
|
|
16
16
|
/*@doc Define o tamanho da fonte dentro do input.*/
|
|
17
|
-
--
|
|
17
|
+
--combo-box--font-size: var(--text--medium, 14px);
|
|
18
18
|
/*@doc Define a família da fonte dentro do input.*/
|
|
19
|
-
--
|
|
19
|
+
--combo-box--font-family: var(--font-pattern, Arial);
|
|
20
20
|
/*@doc Define o peso da fonte dentro do input quando pesada.*/
|
|
21
|
-
--
|
|
21
|
+
--combo-box--font-weight--large: var(--text-weight--large, 500);
|
|
22
22
|
/*@doc Define o peso da fonte dentro do input quando média.*/
|
|
23
|
-
--
|
|
23
|
+
--combo-box--font-weight--medium: var(--text-weight--medium, 400);
|
|
24
24
|
/*@doc Define a cor de fundo da lista de opções.*/
|
|
25
|
-
--
|
|
25
|
+
--combo-box--background-color--xlight: var(--background--xlight, #fff);
|
|
26
26
|
|
|
27
27
|
/* input */
|
|
28
28
|
/*@doc Define a cor de fundo do input.*/
|
|
29
|
-
--
|
|
29
|
+
--combo-box__input--background-color: var(--background--medium, #e0e0e0);
|
|
30
30
|
/*@doc Define o estilo da borda do input.*/
|
|
31
|
-
--
|
|
31
|
+
--combo-box__input--border: var(--border--medium, 2px solid);
|
|
32
32
|
/*@doc Define a cor da borda do input.*/
|
|
33
|
-
--
|
|
33
|
+
--combo-box__input--border-color: var(--combo-box__input--background-color);
|
|
34
34
|
/*no modo normal usamos a borda com a mesma cor do bg*/
|
|
35
35
|
/*@doc Define a cor da borda do input quando focado.*/
|
|
36
|
-
--
|
|
36
|
+
--combo-box__input--focus--border-color: var(--color--primary, #008561);
|
|
37
37
|
/*@doc Define a cor de fundo do input quando desabilitado.*/
|
|
38
|
-
--
|
|
38
|
+
--combo-box__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
|
|
39
39
|
/*@doc Define a cor do texto dentro do input quando desabilitado.*/
|
|
40
|
-
--
|
|
40
|
+
--combo-box__input--disabled--color: var(--text--disable, #AFB6C0);
|
|
41
41
|
/*@doc Define a cor da borda do input quando com erro.*/
|
|
42
|
-
--
|
|
42
|
+
--combo-box__input--error--border-color: #CC2936;
|
|
43
43
|
|
|
44
44
|
/* label */
|
|
45
45
|
/*@doc Define a cor do label.*/
|
|
46
|
-
--
|
|
46
|
+
--combo-box__label--color: var(--title--primary, #919191);
|
|
47
47
|
|
|
48
48
|
/* list */
|
|
49
49
|
/*@doc Define a cor do texto da lista de opções.*/
|
|
50
|
-
--
|
|
50
|
+
--combo-box__list-text--primary: var(--text--primary, #626e82);
|
|
51
51
|
/*@doc Define a altura do box da lista de opções.*/
|
|
52
|
-
--
|
|
52
|
+
--combo-box__list-height: calc(var(--combo-box--font-size) + var(--combo-box--space--medium));
|
|
53
53
|
|
|
54
54
|
/*@doc Contém a imagem do ícone que aciona a lista.*/
|
|
55
|
-
--
|
|
55
|
+
--combo-box--drop-down__image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="16px"><path d="M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z"/></svg>');
|
|
56
56
|
/*@doc Contém a imagem do ícone de pesquisa.*/
|
|
57
|
-
--
|
|
57
|
+
--combo-box--search__image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="22px" width="22px"><path d="m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z"/></svg>');
|
|
58
58
|
|
|
59
59
|
/* espaçamento */
|
|
60
|
-
|
|
61
|
-
--
|
|
60
|
+
/*@doc Define um espaçamento mediano entre elementos do componente.*/
|
|
61
|
+
--combo-box--space--medium: var(--space--medium, 12px);
|
|
62
|
+
/*@doc Define um espaçamento pequeno entre elementos do componente.*/
|
|
63
|
+
--combo-box--space--small: var(--space--small, 6px);
|
|
62
64
|
|
|
63
65
|
/***************
|
|
64
66
|
host style
|
|
@@ -68,12 +70,12 @@
|
|
|
68
70
|
flex-wrap: wrap;
|
|
69
71
|
position: relative;
|
|
70
72
|
/*public*/
|
|
71
|
-
width: var(--
|
|
73
|
+
width: var(--combo-box--width);
|
|
72
74
|
}
|
|
73
75
|
|
|
74
76
|
ez-text-input {
|
|
75
|
-
--it__input--background-color: var(--
|
|
76
|
-
--it__input--border-color: var(--
|
|
77
|
+
--it__input--background-color: var(--combo-box__input--background-color, #FFFFFF);
|
|
78
|
+
--it__input--border-color: var(--combo-box__input--border-color, #DCE0E8);
|
|
77
79
|
}
|
|
78
80
|
|
|
79
81
|
.list-container {
|
|
@@ -91,12 +93,12 @@ ez-text-input {
|
|
|
91
93
|
flex-direction: column;
|
|
92
94
|
|
|
93
95
|
/*public*/
|
|
94
|
-
background-color: var(--
|
|
95
|
-
padding: var(--
|
|
96
|
-
border-radius: var(--
|
|
96
|
+
background-color: var(--combo-box--background-color--xlight);
|
|
97
|
+
padding: var(--combo-box--space--small);
|
|
98
|
+
border-radius: var(--combo-box--border-radius);
|
|
97
99
|
box-shadow: var(--shadow, 0px 0px 16px 0px #000);
|
|
98
100
|
scroll-behavior: smooth;
|
|
99
|
-
max-height: calc(4*var(--
|
|
101
|
+
max-height: calc(4*var(--combo-box__list-height) + 2*var(--combo-box--space--small));
|
|
100
102
|
overflow: auto;
|
|
101
103
|
}
|
|
102
104
|
|
|
@@ -105,11 +107,11 @@ ez-text-input {
|
|
|
105
107
|
display: flex;
|
|
106
108
|
justify-content: space-between;
|
|
107
109
|
align-items: center;
|
|
108
|
-
border-radius: var(--
|
|
109
|
-
padding: 0 var(--
|
|
110
|
+
border-radius: var(--combo-box--border-radius-small);
|
|
111
|
+
padding: 0 var(--combo-box--space--small);
|
|
110
112
|
list-style-type: none;
|
|
111
113
|
|
|
112
|
-
min-height: var(--
|
|
114
|
+
min-height: var(--combo-box__list-height);
|
|
113
115
|
;
|
|
114
116
|
}
|
|
115
117
|
|
|
@@ -117,9 +119,9 @@ ez-text-input {
|
|
|
117
119
|
text-align: left;
|
|
118
120
|
flex-basis: 85%;
|
|
119
121
|
flex-grow: 1;
|
|
120
|
-
color: var(--
|
|
121
|
-
font-weight: var(--
|
|
122
|
-
font-family: var(--
|
|
122
|
+
color: var(--combo-box__list-text--primary);
|
|
123
|
+
font-weight: var(--combo-box--font-weight--large);
|
|
124
|
+
font-family: var(--combo-box--font-family);
|
|
123
125
|
white-space: nowrap;
|
|
124
126
|
overflow: hidden;
|
|
125
127
|
text-overflow: ellipsis;
|
|
@@ -129,9 +131,9 @@ ez-text-input {
|
|
|
129
131
|
text-align: right;
|
|
130
132
|
flex-basis: 15%;
|
|
131
133
|
flex-grow: 0;
|
|
132
|
-
color: var(--
|
|
133
|
-
font-weight: var(--
|
|
134
|
-
font-family: var(--
|
|
134
|
+
color: var(--combo-box__list-text--primary);
|
|
135
|
+
font-weight: var(--combo-box--font-weight--large);
|
|
136
|
+
font-family: var(--combo-box--font-family);
|
|
135
137
|
white-space: nowrap;
|
|
136
138
|
overflow: hidden;
|
|
137
139
|
text-overflow: ellipsis;
|
|
@@ -162,8 +164,8 @@ li:hover {
|
|
|
162
164
|
background-color: var(--text--primary, #008561);
|
|
163
165
|
width: 16px;
|
|
164
166
|
height: 16px;
|
|
165
|
-
-webkit-mask-image: var(--
|
|
166
|
-
mask-image: var(--
|
|
167
|
+
-webkit-mask-image: var(--combo-box--drop-down__image);
|
|
168
|
+
mask-image: var(--combo-box--drop-down__image);
|
|
167
169
|
}
|
|
168
170
|
|
|
169
171
|
.btn-open-options:disabled:after {
|
|
@@ -191,8 +193,8 @@ li:hover {
|
|
|
191
193
|
background-color: var(--text--primary, #008561);
|
|
192
194
|
width: 22px;
|
|
193
195
|
height: 22px;
|
|
194
|
-
-webkit-mask-image: var(--
|
|
195
|
-
mask-image: var(--
|
|
196
|
+
-webkit-mask-image: var(--combo-box--search__image);
|
|
197
|
+
mask-image: var(--combo-box--search__image);
|
|
196
198
|
}
|
|
197
199
|
|
|
198
200
|
.btn-open-search:disabled:after {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FloatingManager } from
|
|
2
|
-
import { Component, h, Host, Prop, State, Event, Element, Watch } from
|
|
1
|
+
import { FloatingManager } from "@sankhyalabs/core";
|
|
2
|
+
import { Component, h, Host, Prop, State, Event, Element, Watch } from "@stencil/core";
|
|
3
3
|
export class EzComboBox {
|
|
4
4
|
constructor() {
|
|
5
5
|
/**
|
|
@@ -9,11 +9,11 @@ export class EzComboBox {
|
|
|
9
9
|
/**
|
|
10
10
|
* Ajusta a opção de mostrar o "value" ao selecionar uma opção. Por padrão não mostra.
|
|
11
11
|
*/
|
|
12
|
-
this.
|
|
12
|
+
this.showSelectedValue = false;
|
|
13
13
|
/**
|
|
14
14
|
* Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
|
|
15
15
|
*/
|
|
16
|
-
this.
|
|
16
|
+
this.showOptionValue = false;
|
|
17
17
|
}
|
|
18
18
|
internalUpdate() {
|
|
19
19
|
if (this._inputElement) {
|
|
@@ -25,31 +25,31 @@ export class EzComboBox {
|
|
|
25
25
|
this.updateVisibleOptions();
|
|
26
26
|
}
|
|
27
27
|
getText() {
|
|
28
|
-
let text =
|
|
28
|
+
let text = "";
|
|
29
29
|
const selected = this.getSelectedOption();
|
|
30
30
|
if (selected) {
|
|
31
|
-
text = this.
|
|
31
|
+
text = this.showSelectedValue ? `${selected.value} - ${selected.label}` : selected.label;
|
|
32
32
|
}
|
|
33
33
|
return text;
|
|
34
34
|
}
|
|
35
35
|
getSelectedOption() {
|
|
36
|
-
if (typeof this.value ===
|
|
36
|
+
if (typeof this.value === "string" || this.value instanceof String) {
|
|
37
37
|
return this._visibleOptions.find(o => o.value === this.value);
|
|
38
38
|
}
|
|
39
39
|
return this.value;
|
|
40
40
|
}
|
|
41
41
|
updateVisibleOptions() {
|
|
42
42
|
let opts = this._source || [];
|
|
43
|
-
if (!this.
|
|
43
|
+
if (!this.searchMode && this._criteria) {
|
|
44
44
|
const upperCriteria = this._criteria.toUpperCase();
|
|
45
45
|
opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
|
|
46
46
|
}
|
|
47
|
-
this._visibleOptions = [{ value:
|
|
47
|
+
this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
|
|
48
48
|
}
|
|
49
49
|
buildItem(opt, index) {
|
|
50
50
|
return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined },
|
|
51
51
|
h("span", { class: "item--label", title: opt.label }, opt.label),
|
|
52
|
-
this.
|
|
52
|
+
this.showOptionValue ? h("span", { class: "item--value", title: opt.value }, opt.value) : undefined);
|
|
53
53
|
}
|
|
54
54
|
showOptions() {
|
|
55
55
|
if (!this.enabled) {
|
|
@@ -58,10 +58,10 @@ export class EzComboBox {
|
|
|
58
58
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
59
59
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
60
60
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
61
|
-
const top = this.
|
|
61
|
+
const top = this.errorMessage ? "0px" : "-17px";
|
|
62
62
|
this._floatingID = FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
|
|
63
63
|
window.requestAnimationFrame(() => {
|
|
64
|
-
this._optionsList.scrollIntoView({ behavior:
|
|
64
|
+
this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
65
65
|
});
|
|
66
66
|
}
|
|
67
67
|
hideOptions() {
|
|
@@ -74,7 +74,7 @@ export class EzComboBox {
|
|
|
74
74
|
return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
|
|
75
75
|
}
|
|
76
76
|
nextOption() {
|
|
77
|
-
if (this.
|
|
77
|
+
if (this.searchMode && !this.isOptionsVisible()) {
|
|
78
78
|
return;
|
|
79
79
|
}
|
|
80
80
|
this.showOptions();
|
|
@@ -110,7 +110,7 @@ export class EzComboBox {
|
|
|
110
110
|
selectOption(opt) {
|
|
111
111
|
const currentOpt = this.getSelectedOption();
|
|
112
112
|
if (currentOpt !== opt) {
|
|
113
|
-
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ?
|
|
113
|
+
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? undefined : opt;
|
|
114
114
|
this.value = adjustedOpt;
|
|
115
115
|
this.ezChange.emit(adjustedOpt);
|
|
116
116
|
}
|
|
@@ -128,10 +128,10 @@ export class EzComboBox {
|
|
|
128
128
|
this.updateVisibleOptions();
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
|
-
loadOptions(mode, argument =
|
|
131
|
+
loadOptions(mode, argument = "") {
|
|
132
132
|
this._criteria = argument;
|
|
133
|
-
if (this.
|
|
134
|
-
this.updateSource(this.
|
|
133
|
+
if (this.optionLoader) {
|
|
134
|
+
this.updateSource(this.optionLoader({ mode, argument }));
|
|
135
135
|
}
|
|
136
136
|
else {
|
|
137
137
|
this.updateSource(this.options);
|
|
@@ -139,7 +139,7 @@ export class EzComboBox {
|
|
|
139
139
|
}
|
|
140
140
|
cancelPreselection() {
|
|
141
141
|
if (!this._inputElement.value && this.value) {
|
|
142
|
-
this.selectOption(
|
|
142
|
+
this.selectOption(undefined);
|
|
143
143
|
}
|
|
144
144
|
else {
|
|
145
145
|
this.internalUpdate();
|
|
@@ -151,11 +151,11 @@ export class EzComboBox {
|
|
|
151
151
|
componentWillLoad() {
|
|
152
152
|
if (this.options === undefined) {
|
|
153
153
|
this.options = [];
|
|
154
|
-
const optionsTags = this.el.querySelectorAll(
|
|
154
|
+
const optionsTags = this.el.querySelectorAll("option");
|
|
155
155
|
if (optionsTags) {
|
|
156
156
|
optionsTags.forEach(e => {
|
|
157
157
|
let label = e.innerText;
|
|
158
|
-
let value = e.getAttribute(
|
|
158
|
+
let value = e.getAttribute("value");
|
|
159
159
|
if (!value) {
|
|
160
160
|
value = label;
|
|
161
161
|
}
|
|
@@ -164,11 +164,11 @@ export class EzComboBox {
|
|
|
164
164
|
});
|
|
165
165
|
}
|
|
166
166
|
}
|
|
167
|
-
if (this.
|
|
167
|
+
if (this.searchMode) {
|
|
168
168
|
this.updateSource([]);
|
|
169
169
|
}
|
|
170
170
|
else {
|
|
171
|
-
this.loadOptions(
|
|
171
|
+
this.loadOptions("PRELOAD");
|
|
172
172
|
}
|
|
173
173
|
}
|
|
174
174
|
componentDidRender() {
|
|
@@ -186,13 +186,12 @@ export class EzComboBox {
|
|
|
186
186
|
const argument = event.target.value;
|
|
187
187
|
this._criteria = argument;
|
|
188
188
|
if (this._criteria) {
|
|
189
|
-
if (this.
|
|
189
|
+
if (this.searchMode) {
|
|
190
190
|
if (this._changeDeboucingTimeout) {
|
|
191
191
|
window.clearTimeout(this._changeDeboucingTimeout);
|
|
192
192
|
}
|
|
193
193
|
this._changeDeboucingTimeout = window.setTimeout(() => {
|
|
194
|
-
|
|
195
|
-
this.loadOptions('PREDICTIVE', argument);
|
|
194
|
+
this.loadOptions("PREDICTIVE", argument);
|
|
196
195
|
}, 200);
|
|
197
196
|
}
|
|
198
197
|
else {
|
|
@@ -202,7 +201,7 @@ export class EzComboBox {
|
|
|
202
201
|
}
|
|
203
202
|
}
|
|
204
203
|
onTextInputClickHandler() {
|
|
205
|
-
if (!this.
|
|
204
|
+
if (!this.searchMode) {
|
|
206
205
|
this.showOptions();
|
|
207
206
|
}
|
|
208
207
|
}
|
|
@@ -228,8 +227,8 @@ export class EzComboBox {
|
|
|
228
227
|
}
|
|
229
228
|
render() {
|
|
230
229
|
return (h(Host, null,
|
|
231
|
-
h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(),
|
|
232
|
-
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions(
|
|
230
|
+
h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), errorMessage: this.errorMessage }, this.searchMode ?
|
|
231
|
+
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
|
|
233
232
|
:
|
|
234
233
|
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })),
|
|
235
234
|
h("section", { class: "list-container", ref: elem => this._listContainer = elem },
|
|
@@ -277,7 +276,7 @@ export class EzComboBox {
|
|
|
277
276
|
"optional": false,
|
|
278
277
|
"docs": {
|
|
279
278
|
"tags": [],
|
|
280
|
-
"text": "
|
|
279
|
+
"text": "T\u00EDtulo do campo"
|
|
281
280
|
},
|
|
282
281
|
"attribute": "label",
|
|
283
282
|
"reflect": true
|
|
@@ -319,10 +318,10 @@ export class EzComboBox {
|
|
|
319
318
|
"optional": false,
|
|
320
319
|
"docs": {
|
|
321
320
|
"tags": [],
|
|
322
|
-
"text": "Array no formato \"{value: string, label: string} que alimenta as op\u00E7\u00F5es do Combobox
|
|
321
|
+
"text": "Array no formato \"{value: string, label: string}\" que alimenta as op\u00E7\u00F5es do Combobox"
|
|
323
322
|
}
|
|
324
323
|
},
|
|
325
|
-
"
|
|
324
|
+
"errorMessage": {
|
|
326
325
|
"type": "string",
|
|
327
326
|
"mutable": true,
|
|
328
327
|
"complexType": {
|
|
@@ -336,10 +335,10 @@ export class EzComboBox {
|
|
|
336
335
|
"tags": [],
|
|
337
336
|
"text": "Quando h\u00E1 um problema de valida\u00E7\u00E3o, serve como orienta\u00E7\u00E3o ao usu\u00E1rio"
|
|
338
337
|
},
|
|
339
|
-
"attribute": "
|
|
338
|
+
"attribute": "error-message",
|
|
340
339
|
"reflect": true
|
|
341
340
|
},
|
|
342
|
-
"
|
|
341
|
+
"searchMode": {
|
|
343
342
|
"type": "boolean",
|
|
344
343
|
"mutable": false,
|
|
345
344
|
"complexType": {
|
|
@@ -353,10 +352,10 @@ export class EzComboBox {
|
|
|
353
352
|
"tags": [],
|
|
354
353
|
"text": ""
|
|
355
354
|
},
|
|
356
|
-
"attribute": "
|
|
355
|
+
"attribute": "search-mode",
|
|
357
356
|
"reflect": false
|
|
358
357
|
},
|
|
359
|
-
"
|
|
358
|
+
"showSelectedValue": {
|
|
360
359
|
"type": "boolean",
|
|
361
360
|
"mutable": false,
|
|
362
361
|
"complexType": {
|
|
@@ -370,11 +369,11 @@ export class EzComboBox {
|
|
|
370
369
|
"tags": [],
|
|
371
370
|
"text": "Ajusta a op\u00E7\u00E3o de mostrar o \"value\" ao selecionar uma op\u00E7\u00E3o. Por padr\u00E3o n\u00E3o mostra."
|
|
372
371
|
},
|
|
373
|
-
"attribute": "
|
|
372
|
+
"attribute": "show-selected-value",
|
|
374
373
|
"reflect": false,
|
|
375
374
|
"defaultValue": "false"
|
|
376
375
|
},
|
|
377
|
-
"
|
|
376
|
+
"showOptionValue": {
|
|
378
377
|
"type": "boolean",
|
|
379
378
|
"mutable": false,
|
|
380
379
|
"complexType": {
|
|
@@ -388,11 +387,11 @@ export class EzComboBox {
|
|
|
388
387
|
"tags": [],
|
|
389
388
|
"text": "Ajusta a op\u00E7\u00E3o de mostrar o \"value\" para cada op\u00E7\u00E3o. Por padr\u00E3o n\u00E3o mostra"
|
|
390
389
|
},
|
|
391
|
-
"attribute": "
|
|
390
|
+
"attribute": "show-option-value",
|
|
392
391
|
"reflect": false,
|
|
393
392
|
"defaultValue": "false"
|
|
394
393
|
},
|
|
395
|
-
"
|
|
394
|
+
"optionLoader": {
|
|
396
395
|
"type": "unknown",
|
|
397
396
|
"mutable": false,
|
|
398
397
|
"complexType": {
|
|
@@ -11,7 +11,7 @@ export class EzDateInput {
|
|
|
11
11
|
this._textInput.label = this.label;
|
|
12
12
|
}
|
|
13
13
|
setErrorMessage() {
|
|
14
|
-
this._textInput.
|
|
14
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
15
15
|
}
|
|
16
16
|
applyValueToInput() {
|
|
17
17
|
if (this._textInput) {
|
|
@@ -20,7 +20,7 @@ export class EzDateInput {
|
|
|
20
20
|
}
|
|
21
21
|
changeValue(newValue) {
|
|
22
22
|
newValue = newValue == null ? null : DateUtils.clearTime(newValue);
|
|
23
|
-
this._textInput.
|
|
23
|
+
this._textInput.errorMessage = "";
|
|
24
24
|
if (this.getTextValue(newValue) !== this.getTextValue(this.value)) {
|
|
25
25
|
this.value = newValue;
|
|
26
26
|
this.ezChange.emit();
|
|
@@ -32,7 +32,7 @@ export class EzDateInput {
|
|
|
32
32
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
33
33
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
34
34
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
35
|
-
const top = this._textInput.
|
|
35
|
+
const top = this._textInput.errorMessage ? 0 : -17;
|
|
36
36
|
this._calendar.fitVertical(top, this._elem.clientHeight);
|
|
37
37
|
}
|
|
38
38
|
hideCalendar() {
|
|
@@ -51,7 +51,7 @@ export class EzDateInput {
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
else {
|
|
54
|
-
this._textInput.
|
|
54
|
+
this._textInput.errorMessage = "O valor digitado não é uma data válida";
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
getTextValue(d) {
|
|
@@ -60,7 +60,7 @@ export class EzDateInput {
|
|
|
60
60
|
render() {
|
|
61
61
|
return (h(Host, null,
|
|
62
62
|
h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => { if (event.key === 'H' || event.key === 'h')
|
|
63
|
-
this.changeValue(new Date()); }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled,
|
|
63
|
+
this.changeValue(new Date()); }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage },
|
|
64
64
|
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })),
|
|
65
65
|
h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
|
|
66
66
|
}
|
|
@@ -85,7 +85,7 @@ export class EzDateInput {
|
|
|
85
85
|
"optional": false,
|
|
86
86
|
"docs": {
|
|
87
87
|
"tags": [],
|
|
88
|
-
"text": "
|
|
88
|
+
"text": "T\u00EDtulo do campo"
|
|
89
89
|
},
|
|
90
90
|
"attribute": "label",
|
|
91
91
|
"reflect": true
|
|
@@ -127,7 +127,7 @@ export class EzDateInput {
|
|
|
127
127
|
"reflect": true,
|
|
128
128
|
"defaultValue": "true"
|
|
129
129
|
},
|
|
130
|
-
"
|
|
130
|
+
"errorMessage": {
|
|
131
131
|
"type": "string",
|
|
132
132
|
"mutable": true,
|
|
133
133
|
"complexType": {
|
|
@@ -141,7 +141,7 @@ export class EzDateInput {
|
|
|
141
141
|
"tags": [],
|
|
142
142
|
"text": "Quando h\u00E1 um problema de valida\u00E7\u00E3o, serve como orienta\u00E7\u00E3o ao usu\u00E1rio"
|
|
143
143
|
},
|
|
144
|
-
"attribute": "
|
|
144
|
+
"attribute": "error-message",
|
|
145
145
|
"reflect": true
|
|
146
146
|
}
|
|
147
147
|
}; }
|
|
@@ -166,7 +166,7 @@ export class EzDateInput {
|
|
|
166
166
|
"propName": "label",
|
|
167
167
|
"methodName": "setLabel"
|
|
168
168
|
}, {
|
|
169
|
-
"propName": "
|
|
169
|
+
"propName": "errorMessage",
|
|
170
170
|
"methodName": "setErrorMessage"
|
|
171
171
|
}, {
|
|
172
172
|
"propName": "value",
|