@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.
Files changed (78) hide show
  1. package/dist/cjs/ez-combo-box.cjs.entry.js +62 -27
  2. package/dist/cjs/ez-date-input.cjs.entry.js +71 -25
  3. package/dist/cjs/ez-date-time-input.cjs.entry.js +94 -31
  4. package/dist/cjs/ez-filter-input.cjs.entry.js +10 -4
  5. package/dist/cjs/ez-form.cjs.entry.js +54 -9
  6. package/dist/cjs/ez-grid.cjs.entry.js +9 -6
  7. package/dist/cjs/ez-number-input.cjs.entry.js +69 -25
  8. package/dist/cjs/ez-search.cjs.entry.js +20 -5
  9. package/dist/cjs/ez-text-area.cjs.entry.js +8 -2
  10. package/dist/cjs/ez-text-input.cjs.entry.js +30 -21
  11. package/dist/cjs/ez-time-input.cjs.entry.js +75 -40
  12. package/dist/cjs/ezui.cjs.js +1 -1
  13. package/dist/cjs/loader.cjs.js +1 -1
  14. package/dist/collection/components/ez-combo-box/ez-combo-box.js +81 -28
  15. package/dist/collection/components/ez-date-input/ez-date-input.js +87 -25
  16. package/dist/collection/components/ez-date-time-input/ez-date-time-input.js +108 -31
  17. package/dist/collection/components/ez-filter-input/ez-filter-input.js +26 -4
  18. package/dist/collection/components/ez-form/DataBinder.js +12 -3
  19. package/dist/collection/components/ez-form/ez-form.js +43 -6
  20. package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +1 -1
  21. package/dist/collection/components/ez-grid/ez-grid.js +14 -7
  22. package/dist/collection/components/ez-number-input/ez-number-input.js +83 -25
  23. package/dist/collection/components/ez-search/ez-search.js +38 -5
  24. package/dist/collection/components/ez-text-area/ez-text-area.css +1 -1
  25. package/dist/collection/components/ez-text-area/ez-text-area.js +23 -1
  26. package/dist/collection/components/ez-text-input/ez-text-input.css +1 -1
  27. package/dist/collection/components/ez-text-input/ez-text-input.js +45 -38
  28. package/dist/collection/components/ez-time-input/ez-time-input.js +95 -59
  29. package/dist/custom-elements/index.js +504 -197
  30. package/dist/esm/ez-combo-box.entry.js +62 -27
  31. package/dist/esm/ez-date-input.entry.js +71 -25
  32. package/dist/esm/ez-date-time-input.entry.js +94 -31
  33. package/dist/esm/ez-filter-input.entry.js +10 -4
  34. package/dist/esm/ez-form.entry.js +54 -9
  35. package/dist/esm/ez-grid.entry.js +9 -6
  36. package/dist/esm/ez-number-input.entry.js +69 -25
  37. package/dist/esm/ez-search.entry.js +20 -5
  38. package/dist/esm/ez-text-area.entry.js +8 -2
  39. package/dist/esm/ez-text-input.entry.js +30 -21
  40. package/dist/esm/ez-time-input.entry.js +76 -41
  41. package/dist/esm/ezui.js +1 -1
  42. package/dist/esm/loader.js +1 -1
  43. package/dist/ezui/ezui.esm.js +1 -1
  44. package/dist/ezui/p-003d53b1.entry.js +1 -0
  45. package/dist/ezui/p-267fa515.entry.js +1 -0
  46. package/dist/ezui/p-2acf7d59.entry.js +1 -0
  47. package/dist/ezui/p-403de0a4.entry.js +1 -0
  48. package/dist/ezui/p-4c3d136c.entry.js +1 -0
  49. package/dist/ezui/p-53bbba8e.entry.js +1 -0
  50. package/dist/ezui/p-6668c3b0.entry.js +1 -0
  51. package/dist/ezui/p-7fd6deec.entry.js +1 -0
  52. package/dist/ezui/p-ad6cc559.entry.js +1 -0
  53. package/dist/ezui/{p-be87ac5e.entry.js → p-ae2fea4c.entry.js} +1 -1
  54. package/dist/ezui/p-ff7b4b13.entry.js +1 -0
  55. package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +13 -7
  56. package/dist/types/components/ez-date-input/ez-date-input.d.ts +10 -3
  57. package/dist/types/components/ez-date-time-input/ez-date-time-input.d.ts +15 -7
  58. package/dist/types/components/ez-filter-input/ez-filter-input.d.ts +5 -1
  59. package/dist/types/components/ez-form/DataBinder.d.ts +1 -1
  60. package/dist/types/components/ez-form/ez-form.d.ts +1 -0
  61. package/dist/types/components/ez-grid/ez-grid.d.ts +4 -1
  62. package/dist/types/components/ez-number-input/ez-number-input.d.ts +14 -5
  63. package/dist/types/components/ez-search/ez-search.d.ts +6 -1
  64. package/dist/types/components/ez-text-area/ez-text-area.d.ts +4 -0
  65. package/dist/types/components/ez-text-input/ez-text-input.d.ts +7 -6
  66. package/dist/types/components/ez-time-input/ez-time-input.d.ts +17 -13
  67. package/dist/types/components.d.ts +43 -20
  68. package/package.json +1 -1
  69. package/dist/ezui/p-1859a3d8.entry.js +0 -1
  70. package/dist/ezui/p-49fdfa4b.entry.js +0 -1
  71. package/dist/ezui/p-4fdceb7d.entry.js +0 -1
  72. package/dist/ezui/p-6d4b1628.entry.js +0 -1
  73. package/dist/ezui/p-8f4fac31.entry.js +0 -1
  74. package/dist/ezui/p-91377c65.entry.js +0 -1
  75. package/dist/ezui/p-b524dfca.entry.js +0 -1
  76. package/dist/ezui/p-bc8aa27f.entry.js +0 -1
  77. package/dist/ezui/p-ec21ecce.entry.js +0 -1
  78. 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.label = this.label;
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
- if (this._textInput) {
26
- this.errorMessage = "";
27
- this._textInput.value = this.getTextValue(this.value);
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
- var _a;
45
- newValue = newValue instanceof Date ? DateUtils.clearTime(newValue) : undefined;
46
- this.value = this.value instanceof Date ? DateUtils.clearTime(this.value) : undefined;
47
- this._textInput.errorMessage = "";
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.parseDate();
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._textInput.errorMessage || this.mode == "slim" ? 0 : -19;
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
- parseDate() {
85
+ handleBlur() {
67
86
  const strValue = this._textInput.value;
68
- const parsedDate = DateUtils.strToDate(strValue);
69
- if (parsedDate || !strValue) {
70
- if (this.value === parsedDate) {
71
- this.changeValue(this.value);
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(parsedDate);
100
+ this.changeValue(newValueValidated);
75
101
  }
76
102
  }
77
103
  else {
104
+ this.changeValue(undefined);
78
105
  this.ezCancelWaitingChange.emit();
79
- this._textInput.errorMessage = "O valor digitado não é uma data válida";
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
- startChange() {
86
- this.ezStartChange.emit({ waitmessage: "", blocking: false });
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, onBlur: () => this.parseDate(), onKeyDown: event => { if (event.key === "H" || event.key === "h")
94
- this.changeValue(new Date()); }, label: this.label, value: this.getTextValue(this.value), onInput: () => this.startChange(), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, slaveMode: true },
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.label = this.label;
21
+ if (this._textInput) {
22
+ this._textInput.label = this.label;
23
+ }
21
24
  }
22
25
  observeErrorMessage() {
23
- this._textInput.errorMessage = this.errorMessage;
24
- }
25
- observeValue() {
26
+ var _a;
26
27
  if (this._textInput) {
27
- this._textInput.value = this.getTextValue(this.value);
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
- onChangeKeyDown(ev) {
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 (ev.key === "H" || ev.key === "h") {
71
+ if (event.key === "H" || event.key === "h") {
45
72
  this.changeValue(new Date());
46
73
  }
47
- else if (ev.shiftKey && ev.key === "Tab") {
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
- ev.preventDefault();
79
+ event.preventDefault();
53
80
  }
54
81
  }
55
82
  }
56
- else if (ev.key === "Tab") {
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
- ev.preventDefault();
88
+ event.preventDefault();
62
89
  }
63
90
  }
64
91
  }
65
- onFocused() {
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
- onClicked() {
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
- var _a;
83
- this._textInput.errorMessage = "";
84
- if ((newValue === null || newValue === void 0 ? void 0 : newValue.toString()) !== ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString())) {
85
- this.value = newValue;
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._textInput.errorMessage || this.mode == "slim" ? 0 : -19;
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
- parseDate() {
95
- const strValue = this._textInput.value;
96
- const partsDateTime = (strValue && strValue.length > 0) ? strValue.split(" ") : [];
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
- const parsedDate = DateUtils.strToDate(strDateTime);
102
- if (parsedDate || !strValue) {
103
- if (this.value === parsedDate) {
104
- this.changeValue(this.value);
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(parsedDate);
149
+ this.changeValue(newValueValidated);
108
150
  }
109
151
  }
110
152
  else {
153
+ this.changeValue(undefined);
111
154
  this.ezCancelWaitingChange.emit();
112
- this._textInput.errorMessage = "O valor digitado não é uma data válida";
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
- startChange() {
127
- this.ezStartChange.emit({ waitmessage: "", blocking: false });
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, onBlur: () => this.parseDate(), onKeyDown: event => { this.onChangeKeyDown(event); }, label: this.label, value: this.getTextValue(this.value), restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onInput: () => this.startChange(), onFocus: () => this.onFocused(), onClick: () => this.onClicked(), slaveMode: true },
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 = this.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
- field["value"] = this._dataUnit.getFieldValue(fieldName);
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
- reject();
34
+ isReject = true;
34
35
  break;
35
36
  }
36
37
  }
37
- accept();
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
  }