@sankhyalabs/ezui 1.1.159 → 1.1.160
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-combo-box.cjs.entry.js +62 -27
- package/dist/cjs/ez-date-input.cjs.entry.js +71 -25
- package/dist/cjs/ez-date-time-input.cjs.entry.js +94 -31
- package/dist/cjs/ez-filter-input.cjs.entry.js +10 -4
- package/dist/cjs/ez-form.cjs.entry.js +54 -9
- package/dist/cjs/ez-grid.cjs.entry.js +9 -6
- package/dist/cjs/ez-number-input.cjs.entry.js +69 -25
- package/dist/cjs/ez-search.cjs.entry.js +20 -5
- package/dist/cjs/ez-text-area.cjs.entry.js +8 -2
- package/dist/cjs/ez-text-input.cjs.entry.js +30 -21
- package/dist/cjs/ez-time-input.cjs.entry.js +75 -40
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +81 -28
- package/dist/collection/components/ez-date-input/ez-date-input.js +87 -25
- package/dist/collection/components/ez-date-time-input/ez-date-time-input.js +108 -31
- package/dist/collection/components/ez-filter-input/ez-filter-input.js +26 -4
- package/dist/collection/components/ez-form/DataBinder.js +12 -3
- package/dist/collection/components/ez-form/ez-form.js +43 -6
- package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +1 -1
- package/dist/collection/components/ez-grid/ez-grid.js +14 -7
- package/dist/collection/components/ez-number-input/ez-number-input.js +83 -25
- package/dist/collection/components/ez-search/ez-search.js +38 -5
- package/dist/collection/components/ez-text-area/ez-text-area.css +1 -1
- package/dist/collection/components/ez-text-area/ez-text-area.js +23 -1
- package/dist/collection/components/ez-text-input/ez-text-input.css +1 -1
- package/dist/collection/components/ez-text-input/ez-text-input.js +45 -38
- package/dist/collection/components/ez-time-input/ez-time-input.js +95 -59
- package/dist/custom-elements/index.js +504 -197
- package/dist/esm/ez-combo-box.entry.js +62 -27
- package/dist/esm/ez-date-input.entry.js +71 -25
- package/dist/esm/ez-date-time-input.entry.js +94 -31
- package/dist/esm/ez-filter-input.entry.js +10 -4
- package/dist/esm/ez-form.entry.js +54 -9
- package/dist/esm/ez-grid.entry.js +9 -6
- package/dist/esm/ez-number-input.entry.js +69 -25
- package/dist/esm/ez-search.entry.js +20 -5
- package/dist/esm/ez-text-area.entry.js +8 -2
- package/dist/esm/ez-text-input.entry.js +30 -21
- package/dist/esm/ez-time-input.entry.js +76 -41
- 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-003d53b1.entry.js +1 -0
- package/dist/ezui/p-267fa515.entry.js +1 -0
- package/dist/ezui/p-2acf7d59.entry.js +1 -0
- package/dist/ezui/p-403de0a4.entry.js +1 -0
- package/dist/ezui/p-4c3d136c.entry.js +1 -0
- package/dist/ezui/p-53bbba8e.entry.js +1 -0
- package/dist/ezui/p-6668c3b0.entry.js +1 -0
- package/dist/ezui/p-7fd6deec.entry.js +1 -0
- package/dist/ezui/p-ad6cc559.entry.js +1 -0
- package/dist/ezui/{p-be87ac5e.entry.js → p-ae2fea4c.entry.js} +1 -1
- package/dist/ezui/p-ff7b4b13.entry.js +1 -0
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +13 -7
- package/dist/types/components/ez-date-input/ez-date-input.d.ts +10 -3
- package/dist/types/components/ez-date-time-input/ez-date-time-input.d.ts +15 -7
- package/dist/types/components/ez-filter-input/ez-filter-input.d.ts +5 -1
- package/dist/types/components/ez-form/DataBinder.d.ts +1 -1
- package/dist/types/components/ez-form/ez-form.d.ts +1 -0
- package/dist/types/components/ez-grid/ez-grid.d.ts +4 -1
- package/dist/types/components/ez-number-input/ez-number-input.d.ts +14 -5
- package/dist/types/components/ez-search/ez-search.d.ts +6 -1
- package/dist/types/components/ez-text-area/ez-text-area.d.ts +4 -0
- package/dist/types/components/ez-text-input/ez-text-input.d.ts +7 -6
- package/dist/types/components/ez-time-input/ez-time-input.d.ts +17 -13
- package/dist/types/components.d.ts +43 -20
- package/package.json +1 -1
- package/dist/ezui/p-1859a3d8.entry.js +0 -1
- package/dist/ezui/p-49fdfa4b.entry.js +0 -1
- package/dist/ezui/p-4fdceb7d.entry.js +0 -1
- package/dist/ezui/p-6d4b1628.entry.js +0 -1
- package/dist/ezui/p-8f4fac31.entry.js +0 -1
- package/dist/ezui/p-91377c65.entry.js +0 -1
- package/dist/ezui/p-b524dfca.entry.js +0 -1
- package/dist/ezui/p-bc8aa27f.entry.js +0 -1
- package/dist/ezui/p-ec21ecce.entry.js +0 -1
- package/dist/ezui/p-fc9b9487.entry.js +0 -1
|
@@ -3,6 +3,7 @@ import { DateUtils } from '@sankhyalabs/core';
|
|
|
3
3
|
import CSSVarsUtils from '../../utils/CSSVarsUtils';
|
|
4
4
|
export class EzDateInput {
|
|
5
5
|
constructor() {
|
|
6
|
+
this._focused = false;
|
|
6
7
|
/**
|
|
7
8
|
* Deixa o campo disponível ou não para uso.
|
|
8
9
|
*/
|
|
@@ -13,18 +14,33 @@ export class EzDateInput {
|
|
|
13
14
|
this.mode = "regular";
|
|
14
15
|
}
|
|
15
16
|
observeLabel() {
|
|
16
|
-
this._textInput
|
|
17
|
+
if (this._textInput) {
|
|
18
|
+
this._textInput.label = this.label;
|
|
19
|
+
}
|
|
17
20
|
}
|
|
18
21
|
observeErrorMessage() {
|
|
22
|
+
var _a;
|
|
19
23
|
if (this._textInput) {
|
|
20
24
|
this._textInput.errorMessage = this.errorMessage;
|
|
25
|
+
if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
|
|
26
|
+
this.setInputValue();
|
|
27
|
+
}
|
|
21
28
|
}
|
|
22
29
|
}
|
|
23
30
|
observeValue(newValue, oldValue) {
|
|
24
|
-
if (newValue != oldValue) {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
31
|
+
if (this._textInput && newValue != oldValue) {
|
|
32
|
+
const newValueValidated = this.validateValue(newValue);
|
|
33
|
+
const oldValueValidated = this.validateValue(oldValue);
|
|
34
|
+
if ((newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime()) !== (oldValueValidated === null || oldValueValidated === void 0 ? void 0 : oldValueValidated.getTime())) {
|
|
35
|
+
const textValue = this.getTextValue(newValueValidated) || '';
|
|
36
|
+
const parsedDate = DateUtils.strToDate(textValue);
|
|
37
|
+
if ((parsedDate || !this._focused) && (this._textInput.value || '') !== textValue) {
|
|
38
|
+
this._textInput.value = textValue;
|
|
39
|
+
this._focused = false;
|
|
40
|
+
this.errorMessage = "";
|
|
41
|
+
}
|
|
42
|
+
const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
|
|
43
|
+
this.ezChange.emit(valueEmitted);
|
|
28
44
|
}
|
|
29
45
|
}
|
|
30
46
|
}
|
|
@@ -40,58 +56,88 @@ export class EzDateInput {
|
|
|
40
56
|
async setBlur() {
|
|
41
57
|
this._textInput.setBlur();
|
|
42
58
|
}
|
|
59
|
+
/**
|
|
60
|
+
* Retorna informando se o campo está inválido (true | false)
|
|
61
|
+
*/
|
|
62
|
+
async isInvalid() {
|
|
63
|
+
return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
|
|
64
|
+
}
|
|
43
65
|
changeValue(newValue) {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
if ((newValue === null || newValue === void 0 ? void 0 : newValue.toString()) !== ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString())) {
|
|
49
|
-
this.value = newValue;
|
|
50
|
-
this.ezChange.emit(this.value);
|
|
66
|
+
const currentValue = this.validateValue(this.value);
|
|
67
|
+
const newValueValidated = this.validateValue(newValue);
|
|
68
|
+
if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
|
|
69
|
+
this.value = newValueValidated;
|
|
51
70
|
}
|
|
52
71
|
}
|
|
53
72
|
showCalendar() {
|
|
54
|
-
this.
|
|
73
|
+
this.handleBlur();
|
|
55
74
|
this._calendar.value = this.value;
|
|
56
75
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
57
76
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
58
77
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
59
|
-
const top = this.
|
|
78
|
+
const top = this.errorMessage || this.mode === "slim" ? 0 : -19;
|
|
60
79
|
this._calendar.fitVertical(top, this._elem.clientHeight);
|
|
61
80
|
}
|
|
62
81
|
hideCalendar() {
|
|
63
82
|
this.changeValue(this._calendar.value);
|
|
64
83
|
this._calendar.hide();
|
|
65
84
|
}
|
|
66
|
-
|
|
85
|
+
handleBlur() {
|
|
67
86
|
const strValue = this._textInput.value;
|
|
68
|
-
const
|
|
69
|
-
if (
|
|
70
|
-
|
|
71
|
-
|
|
87
|
+
const newValue = DateUtils.strToDate(strValue);
|
|
88
|
+
if (newValue || !strValue) {
|
|
89
|
+
this.errorMessage = "";
|
|
90
|
+
const currentValue = this.validateValue(this.value);
|
|
91
|
+
const newValueValidated = this.validateValue(newValue);
|
|
92
|
+
if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
|
|
93
|
+
if (newValueValidated) {
|
|
94
|
+
this._textInput.value = this.getTextValue(newValueValidated) || '';
|
|
95
|
+
this._focused = false;
|
|
96
|
+
}
|
|
97
|
+
this.ezCancelWaitingChange.emit();
|
|
72
98
|
}
|
|
73
99
|
else {
|
|
74
|
-
this.changeValue(
|
|
100
|
+
this.changeValue(newValueValidated);
|
|
75
101
|
}
|
|
76
102
|
}
|
|
77
103
|
else {
|
|
104
|
+
this.changeValue(undefined);
|
|
78
105
|
this.ezCancelWaitingChange.emit();
|
|
79
|
-
this.
|
|
106
|
+
this.errorMessage = "O valor digitado não é uma data válida";
|
|
80
107
|
}
|
|
81
108
|
}
|
|
82
109
|
getTextValue(d) {
|
|
83
110
|
return d ? new Intl.DateTimeFormat("pt-BR").format(d) : undefined;
|
|
84
111
|
}
|
|
85
|
-
|
|
86
|
-
this.
|
|
112
|
+
handleInput() {
|
|
113
|
+
const strValue = this._textInput.value;
|
|
114
|
+
const newValue = DateUtils.strToDate(strValue);
|
|
115
|
+
const currentValue = this.validateValue(this.value);
|
|
116
|
+
const newValueValidated = this.validateValue(newValue);
|
|
117
|
+
if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
|
|
118
|
+
this._focused = true;
|
|
119
|
+
this.ezStartChange.emit({ waitmessage: "", blocking: false });
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
validateValue(value) {
|
|
123
|
+
return value instanceof Date && !isNaN(value.valueOf())
|
|
124
|
+
? DateUtils.clearTime(value)
|
|
125
|
+
: undefined;
|
|
126
|
+
}
|
|
127
|
+
setInputValue() {
|
|
128
|
+
const textValue = this.getTextValue(this.value) || '';
|
|
129
|
+
if ((this._textInput.value || '') !== textValue) {
|
|
130
|
+
this._textInput.value = textValue;
|
|
131
|
+
}
|
|
87
132
|
}
|
|
88
133
|
componentDidLoad() {
|
|
89
134
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
135
|
+
this.setInputValue();
|
|
90
136
|
}
|
|
91
137
|
render() {
|
|
92
138
|
return (h(Host, null,
|
|
93
|
-
h("ez-text-input", { ref: elem => this._textInput = elem,
|
|
94
|
-
this.changeValue(new Date()); }, label: this.label,
|
|
139
|
+
h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", onKeyDown: event => { if (event.key === "H" || event.key === "h")
|
|
140
|
+
this.changeValue(new Date()); }, label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode },
|
|
95
141
|
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })),
|
|
96
142
|
h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
|
|
97
143
|
}
|
|
@@ -281,6 +327,22 @@ export class EzDateInput {
|
|
|
281
327
|
"text": "Remove o foco no componente de data",
|
|
282
328
|
"tags": []
|
|
283
329
|
}
|
|
330
|
+
},
|
|
331
|
+
"isInvalid": {
|
|
332
|
+
"complexType": {
|
|
333
|
+
"signature": "() => Promise<boolean>",
|
|
334
|
+
"parameters": [],
|
|
335
|
+
"references": {
|
|
336
|
+
"Promise": {
|
|
337
|
+
"location": "global"
|
|
338
|
+
}
|
|
339
|
+
},
|
|
340
|
+
"return": "Promise<boolean>"
|
|
341
|
+
},
|
|
342
|
+
"docs": {
|
|
343
|
+
"text": "Retorna informando se o campo est\u00E1 inv\u00E1lido (true | false)",
|
|
344
|
+
"tags": []
|
|
345
|
+
}
|
|
284
346
|
}
|
|
285
347
|
}; }
|
|
286
348
|
static get elementRef() { return "_elem"; }
|
|
@@ -3,6 +3,7 @@ import { DateUtils, TimeFormatter } from '@sankhyalabs/core';
|
|
|
3
3
|
import CSSVarsUtils from '../../utils/CSSVarsUtils';
|
|
4
4
|
export class EzDateTimeInput {
|
|
5
5
|
constructor() {
|
|
6
|
+
this._focused = false;
|
|
6
7
|
/**
|
|
7
8
|
* Deixa o campo disponível ou não para uso.
|
|
8
9
|
*/
|
|
@@ -17,14 +18,34 @@ export class EzDateTimeInput {
|
|
|
17
18
|
this.mode = "regular";
|
|
18
19
|
}
|
|
19
20
|
observeLabel() {
|
|
20
|
-
this._textInput
|
|
21
|
+
if (this._textInput) {
|
|
22
|
+
this._textInput.label = this.label;
|
|
23
|
+
}
|
|
21
24
|
}
|
|
22
25
|
observeErrorMessage() {
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
observeValue() {
|
|
26
|
+
var _a;
|
|
26
27
|
if (this._textInput) {
|
|
27
|
-
this._textInput.
|
|
28
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
29
|
+
if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
|
|
30
|
+
this.setInputValue();
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
observeValue(newValue, oldValue) {
|
|
35
|
+
if (this._textInput && newValue != oldValue) {
|
|
36
|
+
const newValueValidated = this.validateValue(newValue);
|
|
37
|
+
const oldValueValidated = this.validateValue(oldValue);
|
|
38
|
+
if ((newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime()) !== (oldValueValidated === null || oldValueValidated === void 0 ? void 0 : oldValueValidated.getTime())) {
|
|
39
|
+
const textValue = this.getTextValue(newValueValidated) || '';
|
|
40
|
+
const parsedDate = this.getParsedDateTime(textValue);
|
|
41
|
+
if ((parsedDate || !this._focused) && (this._textInput.value || '') !== textValue) {
|
|
42
|
+
this._textInput.value = textValue;
|
|
43
|
+
this._focused = false;
|
|
44
|
+
this.errorMessage = "";
|
|
45
|
+
}
|
|
46
|
+
const valueEmitted = newValueValidated === null ? undefined : newValueValidated;
|
|
47
|
+
this.ezChange.emit(valueEmitted);
|
|
48
|
+
}
|
|
28
49
|
}
|
|
29
50
|
}
|
|
30
51
|
/**
|
|
@@ -39,30 +60,36 @@ export class EzDateTimeInput {
|
|
|
39
60
|
async setBlur() {
|
|
40
61
|
this._textInput.setBlur();
|
|
41
62
|
}
|
|
42
|
-
|
|
63
|
+
/**
|
|
64
|
+
* Retorna informando se o campo está inválido (true | false)
|
|
65
|
+
*/
|
|
66
|
+
async isInvalid() {
|
|
67
|
+
return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
|
|
68
|
+
}
|
|
69
|
+
handleKeyDown(event) {
|
|
43
70
|
const input = this._textInput.shadowRoot.querySelector('input');
|
|
44
|
-
if (
|
|
71
|
+
if (event.key === "H" || event.key === "h") {
|
|
45
72
|
this.changeValue(new Date());
|
|
46
73
|
}
|
|
47
|
-
else if (
|
|
74
|
+
else if (event.shiftKey && event.key === "Tab") {
|
|
48
75
|
if (input.selectionStart > 0) {
|
|
49
76
|
let selectIni = input.value.lastIndexOf(" ", input.selectionStart);
|
|
50
77
|
if (selectIni !== -1) {
|
|
51
78
|
input.setSelectionRange(0, selectIni);
|
|
52
|
-
|
|
79
|
+
event.preventDefault();
|
|
53
80
|
}
|
|
54
81
|
}
|
|
55
82
|
}
|
|
56
|
-
else if (
|
|
83
|
+
else if (event.key === "Tab") {
|
|
57
84
|
if (input.value.length !== input.selectionEnd) {
|
|
58
85
|
let selectIni = input.value.indexOf(" ", input.selectionEnd);
|
|
59
86
|
selectIni = selectIni === -1 ? input.selectionEnd : selectIni + 1;
|
|
60
87
|
input.setSelectionRange(selectIni, input.value.length);
|
|
61
|
-
|
|
88
|
+
event.preventDefault();
|
|
62
89
|
}
|
|
63
90
|
}
|
|
64
91
|
}
|
|
65
|
-
|
|
92
|
+
handleFocus() {
|
|
66
93
|
const input = this._textInput.shadowRoot.querySelector('input');
|
|
67
94
|
if (input.selectionStart !== input.selectionEnd) {
|
|
68
95
|
let selectIni = input.value.indexOf(" ", input.selectionStart);
|
|
@@ -70,7 +97,7 @@ export class EzDateTimeInput {
|
|
|
70
97
|
input.setSelectionRange(0, selectIni);
|
|
71
98
|
}
|
|
72
99
|
}
|
|
73
|
-
|
|
100
|
+
handleClick() {
|
|
74
101
|
const input = this._textInput.shadowRoot.querySelector('input');
|
|
75
102
|
let selectIni = input.value.lastIndexOf(" ", input.selectionEnd);
|
|
76
103
|
selectIni = selectIni === -1 ? 0 : selectIni + 1;
|
|
@@ -79,37 +106,53 @@ export class EzDateTimeInput {
|
|
|
79
106
|
input.setSelectionRange(selectIni, selectFin);
|
|
80
107
|
}
|
|
81
108
|
changeValue(newValue) {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
if ((
|
|
85
|
-
this.value =
|
|
86
|
-
this.ezChange.emit(this.value);
|
|
109
|
+
const currentValue = this.validateValue(this.value);
|
|
110
|
+
const newValueValidated = this.validateValue(newValue);
|
|
111
|
+
if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
|
|
112
|
+
this.value = newValueValidated;
|
|
87
113
|
}
|
|
88
114
|
}
|
|
89
115
|
showCalendar() {
|
|
90
|
-
const top = this.
|
|
116
|
+
const top = this.errorMessage || this.mode === "slim" ? 0 : -19;
|
|
91
117
|
this._calendar.fitVertical(top, this._elem.clientHeight);
|
|
92
118
|
this._calendar.style.visibility = 'inherit';
|
|
93
119
|
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
120
|
+
getParsedDateTime(strValue) {
|
|
121
|
+
var _a, _b;
|
|
122
|
+
if (strValue === void 0) { strValue = (((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || ""); }
|
|
123
|
+
if (!strValue) {
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
const partsDateTime = strValue.split(" ");
|
|
97
127
|
const onlyDate = partsDateTime.length > 0 ? partsDateTime[0] : strValue;
|
|
98
128
|
const onlyTime = partsDateTime[1] ? partsDateTime[1] : "";
|
|
99
129
|
const parsedTime = TimeFormatter.prepareValue(onlyTime, this.showSeconds);
|
|
100
130
|
const strDateTime = onlyDate + (parsedTime && " " + parsedTime);
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
131
|
+
return DateUtils.strToDate(strDateTime);
|
|
132
|
+
}
|
|
133
|
+
handleBlur() {
|
|
134
|
+
var _a, _b;
|
|
135
|
+
const strValue = ((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || "";
|
|
136
|
+
const newValue = this.getParsedDateTime();
|
|
137
|
+
if (newValue || !strValue) {
|
|
138
|
+
this.errorMessage = "";
|
|
139
|
+
const currentValue = this.validateValue(this.value);
|
|
140
|
+
const newValueValidated = this.validateValue(newValue);
|
|
141
|
+
if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
|
|
142
|
+
if (newValueValidated) {
|
|
143
|
+
this._textInput.value = this.getTextValue(newValueValidated) || '';
|
|
144
|
+
this._focused = false;
|
|
145
|
+
}
|
|
146
|
+
this.ezCancelWaitingChange.emit();
|
|
105
147
|
}
|
|
106
148
|
else {
|
|
107
|
-
this.changeValue(
|
|
149
|
+
this.changeValue(newValueValidated);
|
|
108
150
|
}
|
|
109
151
|
}
|
|
110
152
|
else {
|
|
153
|
+
this.changeValue(undefined);
|
|
111
154
|
this.ezCancelWaitingChange.emit();
|
|
112
|
-
this.
|
|
155
|
+
this.errorMessage = "O valor digitado não é uma data válida";
|
|
113
156
|
}
|
|
114
157
|
}
|
|
115
158
|
getTextValue(d) {
|
|
@@ -123,15 +166,33 @@ export class EzDateTimeInput {
|
|
|
123
166
|
};
|
|
124
167
|
return d ? (new Intl.DateTimeFormat('pt-BR', this.showSeconds ? optionsSecond : options).format(d)) : undefined;
|
|
125
168
|
}
|
|
126
|
-
|
|
127
|
-
|
|
169
|
+
validateValue(value) {
|
|
170
|
+
return value instanceof Date && !isNaN(value.valueOf())
|
|
171
|
+
? value
|
|
172
|
+
: undefined;
|
|
173
|
+
}
|
|
174
|
+
handleInput() {
|
|
175
|
+
const newValue = this.getParsedDateTime();
|
|
176
|
+
const currentValue = this.validateValue(this.value);
|
|
177
|
+
const newValueValidated = this.validateValue(newValue);
|
|
178
|
+
if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
|
|
179
|
+
this._focused = true;
|
|
180
|
+
this.ezStartChange.emit({ waitmessage: "", blocking: false });
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
setInputValue() {
|
|
184
|
+
const textValue = this.getTextValue(this.value) || '';
|
|
185
|
+
if ((this._textInput.value || '') !== textValue) {
|
|
186
|
+
this._textInput.value = textValue;
|
|
187
|
+
}
|
|
128
188
|
}
|
|
129
189
|
componentDidLoad() {
|
|
130
190
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
191
|
+
this.setInputValue();
|
|
131
192
|
}
|
|
132
193
|
render() {
|
|
133
194
|
return (h(Host, null,
|
|
134
|
-
h("ez-text-input", { ref: elem => this._textInput = elem,
|
|
195
|
+
h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), onFocus: () => this.handleFocus(), onClick: () => this.handleClick() },
|
|
135
196
|
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })),
|
|
136
197
|
h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
|
|
137
198
|
}
|
|
@@ -339,6 +400,22 @@ export class EzDateTimeInput {
|
|
|
339
400
|
"text": "Remove o foco no componente de datetime",
|
|
340
401
|
"tags": []
|
|
341
402
|
}
|
|
403
|
+
},
|
|
404
|
+
"isInvalid": {
|
|
405
|
+
"complexType": {
|
|
406
|
+
"signature": "() => Promise<boolean>",
|
|
407
|
+
"parameters": [],
|
|
408
|
+
"references": {
|
|
409
|
+
"Promise": {
|
|
410
|
+
"location": "global"
|
|
411
|
+
}
|
|
412
|
+
},
|
|
413
|
+
"return": "Promise<boolean>"
|
|
414
|
+
},
|
|
415
|
+
"docs": {
|
|
416
|
+
"text": "Retorna informando se o campo est\u00E1 inv\u00E1lido (true | false)",
|
|
417
|
+
"tags": []
|
|
418
|
+
}
|
|
342
419
|
}
|
|
343
420
|
}; }
|
|
344
421
|
static get elementRef() { return "_elem"; }
|
|
@@ -21,9 +21,10 @@ export class EzFilterInput {
|
|
|
21
21
|
this._textInput.errorMessage = this.errorMessage;
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
|
-
observeValue() {
|
|
25
|
-
if (this._textInput) {
|
|
26
|
-
this._textInput.value =
|
|
24
|
+
observeValue(newValue, oldValue) {
|
|
25
|
+
if (this._textInput && newValue != oldValue) {
|
|
26
|
+
this._textInput.value = newValue;
|
|
27
|
+
this.ezChange.emit(newValue);
|
|
27
28
|
}
|
|
28
29
|
}
|
|
29
30
|
/**
|
|
@@ -38,12 +39,17 @@ export class EzFilterInput {
|
|
|
38
39
|
async setBlur() {
|
|
39
40
|
this._textInput.setBlur();
|
|
40
41
|
}
|
|
42
|
+
/**
|
|
43
|
+
* Retorna informando se o campo está inválido (true | false)
|
|
44
|
+
*/
|
|
45
|
+
async isInvalid() {
|
|
46
|
+
return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
|
|
47
|
+
}
|
|
41
48
|
changeValue(evt) {
|
|
42
49
|
const newValue = evt.detail;
|
|
43
50
|
this.errorMessage = "";
|
|
44
51
|
if (newValue !== this.value) {
|
|
45
52
|
this.value = newValue;
|
|
46
|
-
this.ezChange.emit(this.value);
|
|
47
53
|
}
|
|
48
54
|
}
|
|
49
55
|
componentDidLoad() {
|
|
@@ -232,6 +238,22 @@ export class EzFilterInput {
|
|
|
232
238
|
"text": "Remove o foco no componente de input",
|
|
233
239
|
"tags": []
|
|
234
240
|
}
|
|
241
|
+
},
|
|
242
|
+
"isInvalid": {
|
|
243
|
+
"complexType": {
|
|
244
|
+
"signature": "() => Promise<boolean>",
|
|
245
|
+
"parameters": [],
|
|
246
|
+
"references": {
|
|
247
|
+
"Promise": {
|
|
248
|
+
"location": "global"
|
|
249
|
+
}
|
|
250
|
+
},
|
|
251
|
+
"return": "Promise<boolean>"
|
|
252
|
+
},
|
|
253
|
+
"docs": {
|
|
254
|
+
"text": "Retorna informando se o campo est\u00E1 inv\u00E1lido (true | false)",
|
|
255
|
+
"tags": []
|
|
256
|
+
}
|
|
235
257
|
}
|
|
236
258
|
}; }
|
|
237
259
|
static get elementRef() { return "_elem"; }
|
|
@@ -17,7 +17,7 @@ export default class DataBinder {
|
|
|
17
17
|
case Action.NEXT_SELECTED:
|
|
18
18
|
case Action.PREVIOUS_SELECTED:
|
|
19
19
|
(_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
|
|
20
|
-
this.updateValue(field.fieldName, field.field);
|
|
20
|
+
this.updateValue(field.fieldName, field.field, action.type === Action.EDITION_CANCELED);
|
|
21
21
|
});
|
|
22
22
|
break;
|
|
23
23
|
}
|
|
@@ -35,15 +35,24 @@ export default class DataBinder {
|
|
|
35
35
|
onDisconnectedCallback() {
|
|
36
36
|
this._dataUnit.unsubscribe(this.onDataUnitEvent);
|
|
37
37
|
}
|
|
38
|
-
updateValue(fieldName, field) {
|
|
38
|
+
updateValue(fieldName, field, actionCanceled = false) {
|
|
39
|
+
var _a;
|
|
39
40
|
field["value"] = this._dataUnit.getFieldValue(fieldName);
|
|
41
|
+
/**
|
|
42
|
+
* FIXME: Campo já salvo com undefined, ao inserir valor inválido e cancelar,
|
|
43
|
+
* o campo não é limpo e atualizado automaticamente, pois o value não mudou,
|
|
44
|
+
* assim, não dispara o Watch do value, que é o responsável por limpar o errorMessage.
|
|
45
|
+
*/
|
|
46
|
+
if (actionCanceled && ((_a = field["errorMessage"]) === null || _a === void 0 ? void 0 : _a.trim())) {
|
|
47
|
+
field["errorMessage"] = "";
|
|
48
|
+
}
|
|
40
49
|
}
|
|
41
50
|
updateBind(fieldName, field) {
|
|
42
51
|
const oldBind = this._fields.get(fieldName);
|
|
43
52
|
if (oldBind) {
|
|
44
53
|
oldBind.destroy();
|
|
45
54
|
}
|
|
46
|
-
|
|
55
|
+
this.updateValue(fieldName, field);
|
|
47
56
|
this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName) => this.cancelWaitingChange(fieldName), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
|
|
48
57
|
this.bindSearchOptionsLoader(fieldName, field);
|
|
49
58
|
this.applyEzUploadContext(fieldName, field);
|
|
@@ -21,25 +21,59 @@ export class EzForm {
|
|
|
21
21
|
return Promise.resolve();
|
|
22
22
|
}
|
|
23
23
|
validate() {
|
|
24
|
-
return new Promise((accept, reject) => {
|
|
24
|
+
return new Promise(async (accept, reject) => {
|
|
25
25
|
const metadata = selectFormMetadata(this._store.getState());
|
|
26
26
|
const requiredFields = this._staticFields
|
|
27
27
|
.filter(f => f.dataset.required)
|
|
28
28
|
.map(f => f.dataset.fieldName)
|
|
29
29
|
.concat(metadata.getRequiredFields());
|
|
30
|
+
let isReject = false;
|
|
30
31
|
const records = this.dataUnit.getModifiedRecords();
|
|
31
32
|
for (let i = 0; i < records.length; i++) {
|
|
32
33
|
if (!this.validateRequired(requiredFields, records[i])) {
|
|
33
|
-
|
|
34
|
+
isReject = true;
|
|
34
35
|
break;
|
|
35
36
|
}
|
|
36
37
|
}
|
|
37
|
-
|
|
38
|
+
if (!isReject) {
|
|
39
|
+
const validateError = await this.validateError();
|
|
40
|
+
if (!validateError) {
|
|
41
|
+
isReject = true;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
if (isReject) {
|
|
45
|
+
reject();
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
accept();
|
|
49
|
+
}
|
|
38
50
|
});
|
|
39
51
|
}
|
|
40
52
|
observeConfig() {
|
|
41
53
|
this.processMetadata();
|
|
42
54
|
}
|
|
55
|
+
async validateError() {
|
|
56
|
+
var _a;
|
|
57
|
+
const invalidFields = [];
|
|
58
|
+
const dataFields = (_a = this._element) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-field-name]");
|
|
59
|
+
if (dataFields && dataFields.length > 0) {
|
|
60
|
+
for (let i = 0; i < dataFields.length; i++) {
|
|
61
|
+
const fieldElem = dataFields[i];
|
|
62
|
+
if (fieldElem && fieldElem['isInvalid']) {
|
|
63
|
+
const hasError = await fieldElem['isInvalid']();
|
|
64
|
+
if (hasError && fieldElem['dataset']) {
|
|
65
|
+
invalidFields.push(fieldElem['dataset'].fieldName);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
;
|
|
70
|
+
}
|
|
71
|
+
const isValid = invalidFields.length === 0;
|
|
72
|
+
if (!isValid) {
|
|
73
|
+
ApplicationUtils.info("Há pelo menos um campo com conteúdo inválido.");
|
|
74
|
+
}
|
|
75
|
+
return isValid;
|
|
76
|
+
}
|
|
43
77
|
validateRequired(requiredFields, record) {
|
|
44
78
|
const invalidFields = [];
|
|
45
79
|
requiredFields.forEach(field => {
|
|
@@ -52,13 +86,16 @@ export class EzForm {
|
|
|
52
86
|
* na aba, isso será tratado no card: https://sankhya.atlassian.net/browse/SKA-44182
|
|
53
87
|
*/
|
|
54
88
|
if (fieldElem) {
|
|
89
|
+
/**
|
|
90
|
+
* Devido o StencilJS não possuir Getter e Setter, para casos que o Watch não for chamado,
|
|
91
|
+
* é necessário limpar a propriedade antes de setar o valor novamente, para que o Watch seja disparado novamente,
|
|
92
|
+
* solução necessária para controlar componentes com herança (Exemplo: EzSearch -> EzComboBox -> EzTextInput).
|
|
93
|
+
*/
|
|
94
|
+
fieldElem["errorMessage"] = "";
|
|
55
95
|
if (value === null || value === undefined || value === "") {
|
|
56
96
|
invalidFields.push(field);
|
|
57
97
|
fieldElem["errorMessage"] = "Essa informação é obrigatória";
|
|
58
98
|
}
|
|
59
|
-
else {
|
|
60
|
-
fieldElem["errorMessage"] = "";
|
|
61
|
-
}
|
|
62
99
|
}
|
|
63
100
|
});
|
|
64
101
|
const isValid = invalidFields.length === 0;
|
|
@@ -214,7 +214,7 @@ export default class AgGridController {
|
|
|
214
214
|
throw new Error("Erro interno: Grid ainda não inicializado.");
|
|
215
215
|
}
|
|
216
216
|
const colDef = this._gridOptions.columnApi.getAllColumns();
|
|
217
|
-
return colDef.map(c => {
|
|
217
|
+
return colDef.filter(c => c.getColId() !== "checkBoxColumn").map(c => {
|
|
218
218
|
const def = c.getColDef();
|
|
219
219
|
const colDef = { name: def.field, label: def.headerName };
|
|
220
220
|
this.conditionalSet(colDef, "sortable", def.sortable);
|
|
@@ -134,6 +134,14 @@ export class EzGrid {
|
|
|
134
134
|
async hasPreviousRecord() {
|
|
135
135
|
return Promise.resolve(this._gridController.hasPreviousRecord());
|
|
136
136
|
}
|
|
137
|
+
/**
|
|
138
|
+
* Método para abrir a configuração da grid.
|
|
139
|
+
*/
|
|
140
|
+
async openGridConfig() {
|
|
141
|
+
this._gridConfig.columns = this._gridController.getColumnsState().filter(c => c.name);
|
|
142
|
+
this._gridConfig.selectedTab = "Colunas";
|
|
143
|
+
this._popUpGridConfig = true;
|
|
144
|
+
}
|
|
137
145
|
componentWillLoad() {
|
|
138
146
|
if (this.dataUnit) {
|
|
139
147
|
this._dataUnitBridge = new DataUnitBridge(this._gridController, this.dataUnit);
|
|
@@ -253,11 +261,6 @@ export class EzGrid {
|
|
|
253
261
|
closeGridConfig() {
|
|
254
262
|
this._popUpGridConfig = false;
|
|
255
263
|
}
|
|
256
|
-
openGridConfig() {
|
|
257
|
-
this._gridConfig.columns = this._gridController.getColumnsState().filter(c => c.name);
|
|
258
|
-
this._gridConfig.selectedTab = "Colunas";
|
|
259
|
-
this._popUpGridConfig = true;
|
|
260
|
-
}
|
|
261
264
|
render() {
|
|
262
265
|
return (h(Host, null,
|
|
263
266
|
h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" },
|
|
@@ -823,11 +826,15 @@ export class EzGrid {
|
|
|
823
826
|
"complexType": {
|
|
824
827
|
"signature": "() => Promise<void>",
|
|
825
828
|
"parameters": [],
|
|
826
|
-
"references": {
|
|
829
|
+
"references": {
|
|
830
|
+
"Promise": {
|
|
831
|
+
"location": "global"
|
|
832
|
+
}
|
|
833
|
+
},
|
|
827
834
|
"return": "Promise<void>"
|
|
828
835
|
},
|
|
829
836
|
"docs": {
|
|
830
|
-
"text": "",
|
|
837
|
+
"text": "M\u00E9todo para abrir a configura\u00E7\u00E3o da grid.",
|
|
831
838
|
"tags": []
|
|
832
839
|
}
|
|
833
840
|
}
|