@sankhyalabs/ezui 5.10.8 → 5.11.0-dev.2

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 (137) hide show
  1. package/README.md +0 -1
  2. package/dist/cjs/{CSSVarsUtils-af809e73.js → CSSVarsUtils-b136a156.js} +5 -0
  3. package/dist/cjs/RecordValidationProcessor-edd23705.js +102 -0
  4. package/dist/cjs/ez-actions-button.cjs.entry.js +1 -1
  5. package/dist/cjs/ez-calendar.cjs.entry.js +34 -5
  6. package/dist/cjs/ez-combo-box.cjs.entry.js +89 -14
  7. package/dist/cjs/ez-date-input.cjs.entry.js +53 -22
  8. package/dist/cjs/ez-date-time-input.cjs.entry.js +53 -19
  9. package/dist/cjs/ez-filter-input_2.cjs.entry.js +1 -1
  10. package/dist/cjs/ez-form.cjs.entry.js +9 -83
  11. package/dist/cjs/ez-grid.cjs.entry.js +488 -6
  12. package/dist/cjs/ez-number-input.cjs.entry.js +39 -15
  13. package/dist/cjs/ez-search.cjs.entry.js +11 -2
  14. package/dist/cjs/ez-text-area.cjs.entry.js +6 -2
  15. package/dist/cjs/ez-text-input.cjs.entry.js +7 -4
  16. package/dist/cjs/ez-time-input.cjs.entry.js +11 -7
  17. package/dist/cjs/ezui.cjs.js +1 -1
  18. package/dist/cjs/loader.cjs.js +1 -1
  19. package/dist/collection/collection-manifest.json +2 -2
  20. package/dist/collection/components/ez-calendar/ez-calendar.js +63 -6
  21. package/dist/collection/components/ez-combo-box/ez-combo-box.css +6 -0
  22. package/dist/collection/components/ez-combo-box/ez-combo-box.js +122 -12
  23. package/dist/collection/components/ez-date-input/ez-date-input.js +71 -21
  24. package/dist/collection/components/ez-date-time-input/ez-date-time-input.js +71 -18
  25. package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +40 -7
  26. package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js +1 -0
  27. package/dist/collection/components/ez-grid/controller/ag-grid/GridEditionManager.js +230 -0
  28. package/dist/collection/components/ez-grid/controller/ag-grid/editor/EzCellEditor.js +49 -0
  29. package/dist/collection/components/ez-grid/controller/ag-grid/editor/GridEditorUtils.js +10 -0
  30. package/dist/collection/components/ez-grid/controller/ag-grid/editor/IEditorMetadata.js +4 -0
  31. package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/ComboBox.tpl.js +38 -0
  32. package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/DateInput.tpl.js +40 -0
  33. package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/NumberInput.tpl.js +20 -0
  34. package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/Search.tpl.js +15 -0
  35. package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/TextInput.tpl.js +41 -0
  36. package/dist/collection/components/ez-grid/ez-grid.js +67 -0
  37. package/dist/collection/components/ez-number-input/ez-number-input.css +4 -0
  38. package/dist/collection/components/ez-number-input/ez-number-input.js +62 -15
  39. package/dist/collection/components/ez-search/ez-search.css +1 -1
  40. package/dist/collection/components/ez-search/ez-search.js +46 -1
  41. package/dist/collection/components/ez-text-area/ez-text-area.css +4 -0
  42. package/dist/collection/components/ez-text-area/ez-text-area.js +23 -1
  43. package/dist/collection/components/ez-text-input/ez-text-input.css +8 -1
  44. package/dist/collection/components/ez-text-input/ez-text-input.js +14 -5
  45. package/dist/collection/components/ez-time-input/ez-time-input.css +4 -0
  46. package/dist/collection/components/ez-time-input/ez-time-input.js +18 -7
  47. package/dist/collection/utils/CSSVarsUtils.js +5 -0
  48. package/dist/collection/utils/form/DataBinder.js +7 -62
  49. package/dist/collection/utils/form/FormMetadata.js +3 -22
  50. package/dist/collection/utils/interfaces/AbstractFieldMetadata.js +21 -0
  51. package/dist/collection/utils/validators/recordvalidator/IValidationResult.js +1 -0
  52. package/dist/collection/utils/validators/recordvalidator/IValidationSource.js +1 -0
  53. package/dist/collection/utils/validators/recordvalidator/RecordValidationProcessor.js +74 -0
  54. package/dist/custom-elements/index.js +922 -203
  55. package/dist/esm/{CSSVarsUtils-00f67f32.js → CSSVarsUtils-a97cfa29.js} +5 -0
  56. package/dist/esm/RecordValidationProcessor-abc814af.js +99 -0
  57. package/dist/esm/ez-actions-button.entry.js +1 -1
  58. package/dist/esm/ez-calendar.entry.js +35 -6
  59. package/dist/esm/ez-combo-box.entry.js +89 -14
  60. package/dist/esm/ez-date-input.entry.js +53 -22
  61. package/dist/esm/ez-date-time-input.entry.js +53 -19
  62. package/dist/esm/ez-filter-input_2.entry.js +1 -1
  63. package/dist/esm/ez-form.entry.js +10 -84
  64. package/dist/esm/ez-grid.entry.js +489 -7
  65. package/dist/esm/ez-number-input.entry.js +39 -15
  66. package/dist/esm/ez-search.entry.js +11 -2
  67. package/dist/esm/ez-text-area.entry.js +6 -2
  68. package/dist/esm/ez-text-input.entry.js +7 -4
  69. package/dist/esm/ez-time-input.entry.js +11 -7
  70. package/dist/esm/ezui.js +1 -1
  71. package/dist/esm/loader.js +1 -1
  72. package/dist/ezui/ezui.esm.js +1 -1
  73. package/dist/ezui/p-028f264f.entry.js +1 -0
  74. package/dist/ezui/p-391de0e4.entry.js +1 -0
  75. package/dist/ezui/p-4535da17.entry.js +1 -0
  76. package/dist/ezui/p-5cef0264.entry.js +1 -0
  77. package/dist/ezui/p-7eb3e1a5.js +1 -0
  78. package/dist/ezui/p-86a2036d.js +1 -0
  79. package/dist/ezui/{p-12303d2e.entry.js → p-87e85160.entry.js} +1 -1
  80. package/dist/ezui/p-90fa4cb3.entry.js +1 -0
  81. package/dist/ezui/p-9f41b414.entry.js +1 -0
  82. package/dist/ezui/p-ce035beb.entry.js +1 -0
  83. package/dist/ezui/p-d43b22f3.entry.js +1 -0
  84. package/dist/ezui/p-e2dfd935.entry.js +1 -0
  85. package/dist/ezui/p-e67d0bd5.entry.js +1 -0
  86. package/dist/ezui/{p-c7a23be9.entry.js → p-fd54b5b4.entry.js} +2 -2
  87. package/dist/ezui/{p-f1a537e3.entry.js → p-ff82b176.entry.js} +1 -1
  88. package/dist/types/components/ez-calendar/ez-calendar.d.ts +9 -1
  89. package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +14 -0
  90. package/dist/types/components/ez-date-input/ez-date-input.d.ts +4 -0
  91. package/dist/types/components/ez-date-time-input/ez-date-time-input.d.ts +4 -0
  92. package/dist/types/components/ez-form-view/interfaces/IFormViewField.d.ts +2 -14
  93. package/dist/types/components/ez-grid/controller/EzGridController.d.ts +18 -0
  94. package/dist/types/components/ez-grid/controller/ag-grid/AgGridController.d.ts +4 -0
  95. package/dist/types/components/ez-grid/controller/ag-grid/GridEditionManager.d.ts +38 -0
  96. package/dist/types/components/ez-grid/controller/ag-grid/editor/EzCellEditor.d.ts +10 -0
  97. package/dist/types/components/ez-grid/controller/ag-grid/editor/GridEditorUtils.d.ts +1 -0
  98. package/dist/types/components/ez-grid/controller/ag-grid/editor/IEditorMetadata.d.ts +9 -0
  99. package/dist/types/components/ez-grid/controller/ag-grid/editor/IUICellEditor.d.ts +10 -0
  100. package/dist/types/components/ez-grid/controller/ag-grid/editor/templates/ComboBox.tpl.d.ts +4 -0
  101. package/dist/types/components/ez-grid/controller/ag-grid/editor/templates/DateInput.tpl.d.ts +5 -0
  102. package/dist/types/components/ez-grid/controller/ag-grid/editor/templates/NumberInput.tpl.d.ts +4 -0
  103. package/dist/types/components/ez-grid/controller/ag-grid/editor/templates/Search.tpl.d.ts +3 -0
  104. package/dist/types/components/ez-grid/controller/ag-grid/editor/templates/TextInput.tpl.d.ts +4 -0
  105. package/dist/types/components/ez-grid/ez-grid.d.ts +13 -0
  106. package/dist/types/components/ez-number-input/ez-number-input.d.ts +5 -1
  107. package/dist/types/components/ez-search/ez-search.d.ts +6 -1
  108. package/dist/types/components/ez-text-area/ez-text-area.d.ts +4 -0
  109. package/dist/types/components/ez-text-input/ez-text-input.d.ts +4 -1
  110. package/dist/types/components/ez-time-input/ez-time-input.d.ts +2 -1
  111. package/dist/types/components.d.ts +65 -6
  112. package/dist/types/utils/form/DataBinder.d.ts +1 -3
  113. package/dist/types/utils/form/interfaces/IFormConfig.d.ts +1 -1
  114. package/dist/types/utils/form/interfaces/index.d.ts +4 -4
  115. package/dist/types/utils/interfaces/AbstractFieldMetadata.d.ts +17 -0
  116. package/dist/types/utils/{form/interfaces → interfaces}/IFieldConfig.d.ts +2 -2
  117. package/dist/types/utils/validators/recordvalidator/IValidationSource.d.ts +6 -0
  118. package/dist/types/utils/validators/recordvalidator/RecordValidationProcessor.d.ts +13 -0
  119. package/package.json +2 -2
  120. package/dist/ezui/p-00c7c25d.entry.js +0 -1
  121. package/dist/ezui/p-0b160fec.entry.js +0 -1
  122. package/dist/ezui/p-0bd54a6f.entry.js +0 -1
  123. package/dist/ezui/p-39153935.entry.js +0 -1
  124. package/dist/ezui/p-4a5e37a7.js +0 -1
  125. package/dist/ezui/p-5782443e.entry.js +0 -1
  126. package/dist/ezui/p-5d45e384.entry.js +0 -1
  127. package/dist/ezui/p-70ea4beb.entry.js +0 -1
  128. package/dist/ezui/p-78a6e049.entry.js +0 -1
  129. package/dist/ezui/p-8bcb197f.entry.js +0 -1
  130. package/dist/ezui/p-a4c9f3c4.entry.js +0 -1
  131. /package/dist/collection/{utils/form/interfaces/IFieldConfig.js → components/ez-grid/controller/ag-grid/editor/IUICellEditor.js} +0 -0
  132. /package/dist/collection/utils/{form/interfaces/IInvalidField.js → interfaces/IFieldConfig.js} +0 -0
  133. /package/dist/collection/utils/{form/interfaces/IRecordValidator.js → validators/recordvalidator/IInvalidField.js} +0 -0
  134. /package/dist/collection/utils/{form/interfaces/IValidationResult.js → validators/recordvalidator/IRecordValidator.js} +0 -0
  135. /package/dist/types/utils/{form/interfaces → validators/recordvalidator}/IInvalidField.d.ts +0 -0
  136. /package/dist/types/utils/{form/interfaces → validators/recordvalidator}/IRecordValidator.d.ts +0 -0
  137. /package/dist/types/utils/{form/interfaces → validators/recordvalidator}/IValidationResult.d.ts +0 -0
@@ -19,15 +19,24 @@ export class EzCalendar {
19
19
  */
20
20
  async show(top, left, bottom, right) {
21
21
  if (this.floating) {
22
- this._floatingID = FloatingManager.float(this._box, this._container, { autoClose: true, top, left, bottom, right });
23
- window.requestAnimationFrame(() => {
24
- this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
22
+ this._floatingID = FloatingManager.float(this._box, this._container, {
23
+ isFixed: this.isFixed(),
24
+ autoClose: true,
25
+ top,
26
+ left,
27
+ bottom,
28
+ right
25
29
  });
26
- this.scroll();
30
+ if (!this.isFixed()) {
31
+ window.requestAnimationFrame(() => {
32
+ this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
33
+ });
34
+ this.scroll();
35
+ }
27
36
  }
28
37
  }
29
38
  /**
30
- * Ajusta o posicionamento do ez-calendar conforme a disponibilidade de espaço.
39
+ * Ajusta o posicionamento vertical do ez-calendar conforme a disponibilidade de espaço.
31
40
  */
32
41
  async fitVertical(topOffset, bottomOffset) {
33
42
  const neededHeight = this._container.getBoundingClientRect().bottom + this._calendarHeight;
@@ -39,6 +48,16 @@ export class EzCalendar {
39
48
  this.show("unset", undefined, bottomOffset + "px");
40
49
  }
41
50
  }
51
+ /**
52
+ * Ajusta o posicionamento horizontal do ez-calendar conforme a disponibilidade de espaço.
53
+ */
54
+ async fitHorizontal(rightOffset) {
55
+ const neededWidth = this._container.getBoundingClientRect().right + this._calendarWidth;
56
+ const availableRight = (window.innerWidth || document.documentElement.clientWidth) > neededWidth;
57
+ if (!availableRight) {
58
+ this.show(undefined, "unset", undefined, rightOffset + "px");
59
+ }
60
+ }
42
61
  /**
43
62
  * Oculta o ez-calendar.
44
63
  */
@@ -54,6 +73,14 @@ export class EzCalendar {
54
73
  this._currentPosition.setDate(1);
55
74
  }
56
75
  }
76
+ scrollListener() {
77
+ if (this.floating && this.isFixed()) {
78
+ this.hide();
79
+ }
80
+ }
81
+ isFixed() {
82
+ return this._hostElem.dataset.isFixed === "true";
83
+ }
57
84
  getMonthLabel() {
58
85
  return this._monthLabels[this._currentPosition.getMonth()] + " " + this._currentPosition.getFullYear();
59
86
  }
@@ -118,6 +145,7 @@ export class EzCalendar {
118
145
  componentDidRender() {
119
146
  if (this.floating && this._firstRender) {
120
147
  this._calendarHeight = this._box.clientHeight;
148
+ this._calendarWidth = this._box.clientWidth;
121
149
  this._box.remove();
122
150
  this._firstRender = false;
123
151
  }
@@ -351,7 +379,26 @@ export class EzCalendar {
351
379
  "return": "Promise<void>"
352
380
  },
353
381
  "docs": {
354
- "text": "Ajusta o posicionamento do ez-calendar conforme a disponibilidade de espa\u00E7o.",
382
+ "text": "Ajusta o posicionamento vertical do ez-calendar conforme a disponibilidade de espa\u00E7o.",
383
+ "tags": []
384
+ }
385
+ },
386
+ "fitHorizontal": {
387
+ "complexType": {
388
+ "signature": "(rightOffset: number) => Promise<void>",
389
+ "parameters": [{
390
+ "tags": [],
391
+ "text": ""
392
+ }],
393
+ "references": {
394
+ "Promise": {
395
+ "location": "global"
396
+ }
397
+ },
398
+ "return": "Promise<void>"
399
+ },
400
+ "docs": {
401
+ "text": "Ajusta o posicionamento horizontal do ez-calendar conforme a disponibilidade de espa\u00E7o.",
355
402
  "tags": []
356
403
  }
357
404
  },
@@ -373,10 +420,20 @@ export class EzCalendar {
373
420
  }
374
421
  };
375
422
  }
423
+ static get elementRef() { return "_hostElem"; }
376
424
  static get watchers() {
377
425
  return [{
378
426
  "propName": "value",
379
427
  "methodName": "observeValue"
380
428
  }];
381
429
  }
430
+ static get listeners() {
431
+ return [{
432
+ "name": "scroll",
433
+ "method": "scrollListener",
434
+ "target": "window",
435
+ "capture": true,
436
+ "passive": true
437
+ }];
438
+ }
382
439
  }
@@ -64,6 +64,8 @@
64
64
  --ez-combo-box__list-text--primary: var(--text--primary, #626e82);
65
65
  /*@doc Define a altura do box da lista de opções.*/
66
66
  --ez-combo-box__list-height: calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);
67
+ /*@doc Define a largura mínima da lista de opções.*/
68
+ --ez-combo-box__list-min-width: 64px;
67
69
 
68
70
  /* espaçamento */
69
71
  /*@doc Define um espaçamento mediano entre elementos do componente.*/
@@ -112,6 +114,10 @@ ez-icon {
112
114
  }
113
115
 
114
116
  .list-container {
117
+ /*public*/
118
+ min-width: var(--ez-combo-box__list-min-width);
119
+
120
+ /*private*/
115
121
  position: relative;
116
122
  width: 100%;
117
123
  }
@@ -30,6 +30,7 @@ export class EzComboBox {
30
30
  this.suppressEmptyOption = false;
31
31
  this.canShowError = true;
32
32
  this.mode = "regular";
33
+ this.listOptionsPosition = undefined;
33
34
  }
34
35
  observeErrorMessage() {
35
36
  var _a;
@@ -72,17 +73,38 @@ export class EzComboBox {
72
73
  return;
73
74
  this.loadOptions(SearchMode.PRELOAD);
74
75
  }
76
+ /*
77
+ * Retorna uma promise com o valor da opção selecionada,
78
+ * que será resolvida quando o backend devolver este dado.
79
+ */
80
+ async getValueAsync() {
81
+ if (!this._showLoading) {
82
+ return new Promise(resolve => resolve(this.value));
83
+ }
84
+ return new Promise(resolve => {
85
+ let id = setInterval(() => {
86
+ if (!this._showLoading) {
87
+ clearInterval(id);
88
+ resolve(this.value);
89
+ }
90
+ }, 100);
91
+ });
92
+ }
75
93
  /**
76
94
  * Aplica o foco no campo.
77
95
  */
78
96
  async setFocus() {
79
- this._textInput.setFocus();
97
+ if (this._textInput) {
98
+ this._textInput.setFocus();
99
+ }
80
100
  }
81
101
  /**
82
102
  * Remove o foco do campo.
83
103
  */
84
104
  async setBlur() {
85
- this._textInput.setBlur();
105
+ if (this._textInput) {
106
+ this._textInput.setBlur();
107
+ }
86
108
  }
87
109
  /**
88
110
  * Retorna se o conteúdo é inválido.
@@ -97,16 +119,61 @@ export class EzComboBox {
97
119
  this.clearSearch();
98
120
  }
99
121
  scrollListener() {
100
- if (!this._floatingID)
122
+ var _a;
123
+ if (this._floatingID == undefined) {
101
124
  return;
102
- window.requestAnimationFrame(() => {
103
- this.updateListPosition();
104
- });
125
+ }
126
+ if ((_a = this.listOptionsPosition) === null || _a === void 0 ? void 0 : _a.hardPosition) {
127
+ this.hideOptions();
128
+ }
129
+ else {
130
+ window.requestAnimationFrame(() => {
131
+ this.updateListPosition();
132
+ });
133
+ }
105
134
  }
106
135
  updateListPosition() {
107
- const { top } = this._listContainer.getBoundingClientRect();
108
- const margin = (this.errorMessage || !this.canShowError || this.mode === "slim") ? 6 : -13;
109
- this._listWrapper.style.top = `${(top + margin)}px`;
136
+ let { verticalPosition, horizontalPosition, fromBottom, fromRight, bottomLimit, hardPosition } = this.getListPosition();
137
+ const elementRect = this._listWrapper.getBoundingClientRect();
138
+ const containerRect = this._listContainer.getBoundingClientRect();
139
+ const textInputRect = this._textInput.getBoundingClientRect();
140
+ const limitHeight = bottomLimit || window.innerHeight;
141
+ const neededHeight = containerRect.bottom + elementRect.height;
142
+ if (!fromBottom && (elementRect.top < 0 || neededHeight > limitHeight)) {
143
+ fromBottom = true;
144
+ }
145
+ if (!hardPosition) {
146
+ verticalPosition = verticalPosition || 0;
147
+ horizontalPosition = horizontalPosition || 0;
148
+ if (fromBottom) {
149
+ verticalPosition = window.innerHeight - textInputRect.top + verticalPosition;
150
+ }
151
+ else {
152
+ verticalPosition += containerRect.top;
153
+ }
154
+ if (fromRight) {
155
+ horizontalPosition = window.innerWidth - textInputRect.right + horizontalPosition;
156
+ }
157
+ else {
158
+ horizontalPosition += containerRect.left;
159
+ }
160
+ }
161
+ if (verticalPosition != undefined) {
162
+ this._listWrapper.style[fromBottom ? "bottom" : "top"] = `${verticalPosition}px`;
163
+ this._listWrapper.style[fromBottom ? "top" : "bottom"] = "";
164
+ }
165
+ if (horizontalPosition != undefined) {
166
+ this._listWrapper.style[fromRight ? "right" : "left"] = `${horizontalPosition}px`;
167
+ this._listWrapper.style[fromRight ? "left" : "right"] = "";
168
+ }
169
+ }
170
+ getListPosition() {
171
+ if (this.listOptionsPosition) {
172
+ return this.listOptionsPosition;
173
+ }
174
+ return {
175
+ verticalPosition: (this.errorMessage || !this.canShowError || this.mode === "slim") ? 6 : -13
176
+ };
110
177
  }
111
178
  isDifferentValues(firstValue, secondValue) {
112
179
  return ObjectUtils.objectToString(firstValue || {}) !== ObjectUtils.objectToString(secondValue || {});
@@ -189,13 +256,18 @@ export class EzComboBox {
189
256
  showOptions() {
190
257
  if (!this.enabled)
191
258
  return;
259
+ if (this.isOptionsVisible()) {
260
+ return;
261
+ }
192
262
  if (!!this._resizeObserver)
193
263
  this._resizeObserver.observe(this._textInput);
194
- this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: true, isFixed: true });
264
+ this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: true, isFixed: true, backClickListener: () => this.hideOptions() });
195
265
  this.setFocus();
196
266
  window.requestAnimationFrame(() => {
197
267
  this.updateListPosition();
198
- this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
268
+ if (!this.listOptionsPosition) {
269
+ this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
270
+ }
199
271
  });
200
272
  }
201
273
  hideOptions() {
@@ -225,7 +297,7 @@ export class EzComboBox {
225
297
  window.requestAnimationFrame(() => {
226
298
  const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`li#item_${opt.value.replace(/[<>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
227
299
  if (liElem)
228
- liElem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
300
+ liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
229
301
  });
230
302
  }
231
303
  selectCurrentOption() {
@@ -281,6 +353,7 @@ export class EzComboBox {
281
353
  this._visibleOptions = [];
282
354
  this.clearSource();
283
355
  }
356
+ this.setFocus();
284
357
  }
285
358
  loadOptions(mode, argument = "") {
286
359
  this._criteria = argument;
@@ -538,9 +611,11 @@ export class EzComboBox {
538
611
  switch (event.key) {
539
612
  case "ArrowDown":
540
613
  this.nextOption();
614
+ event.stopPropagation();
541
615
  break;
542
616
  case "ArrowUp":
543
617
  this.previousOption();
618
+ event.stopPropagation();
544
619
  break;
545
620
  case "Enter":
546
621
  this.selectCurrentOption();
@@ -838,6 +913,25 @@ export class EzComboBox {
838
913
  "attribute": "mode",
839
914
  "reflect": true,
840
915
  "defaultValue": "\"regular\""
916
+ },
917
+ "listOptionsPosition": {
918
+ "type": "unknown",
919
+ "mutable": false,
920
+ "complexType": {
921
+ "original": "IEzCheckBoxListPosition",
922
+ "resolved": "IEzCheckBoxListPosition",
923
+ "references": {
924
+ "IEzCheckBoxListPosition": {
925
+ "location": "local"
926
+ }
927
+ }
928
+ },
929
+ "required": false,
930
+ "optional": false,
931
+ "docs": {
932
+ "tags": [],
933
+ "text": "Define um posicionamento fixo para a lista de op\u00E7\u00F5es do CheckBox."
934
+ }
841
935
  }
842
936
  };
843
937
  }
@@ -874,6 +968,22 @@ export class EzComboBox {
874
968
  }
875
969
  static get methods() {
876
970
  return {
971
+ "getValueAsync": {
972
+ "complexType": {
973
+ "signature": "() => Promise<unknown>",
974
+ "parameters": [],
975
+ "references": {
976
+ "Promise": {
977
+ "location": "global"
978
+ }
979
+ },
980
+ "return": "Promise<unknown>"
981
+ },
982
+ "docs": {
983
+ "text": "",
984
+ "tags": []
985
+ }
986
+ },
877
987
  "setFocus": {
878
988
  "complexType": {
879
989
  "signature": "() => Promise<void>",
@@ -3,7 +3,9 @@ import { DateUtils, ElementIDUtils } from '@sankhyalabs/core';
3
3
  import CSSVarsUtils from '../../utils/CSSVarsUtils';
4
4
  export class EzDateInput {
5
5
  constructor() {
6
+ this._changePending = false;
6
7
  this._focused = false;
8
+ this._valuePromiseCallbacks = [];
7
9
  this.label = undefined;
8
10
  this.value = undefined;
9
11
  this.enabled = true;
@@ -41,6 +43,7 @@ export class EzDateInput {
41
43
  this.ezChange.emit(valueEmitted);
42
44
  }
43
45
  }
46
+ this._changePending = false;
44
47
  }
45
48
  /**
46
49
  * Aplica o foco no campo.
@@ -60,6 +63,18 @@ export class EzDateInput {
60
63
  async isInvalid() {
61
64
  return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
62
65
  }
66
+ /*
67
+ * Retorna uma promise com o valor da opção selecionada,
68
+ * que será resolvida quando o backend devolver este dado.
69
+ */
70
+ async getValueAsync() {
71
+ if (this._changePending) {
72
+ return new Promise(accept => {
73
+ this._valuePromiseCallbacks.push(accept);
74
+ });
75
+ }
76
+ return Promise.resolve(this.value);
77
+ }
63
78
  changeValue(newValue) {
64
79
  const currentValue = DateUtils.validateDate(this.value);
65
80
  const newValueValidated = DateUtils.validateDate(newValue);
@@ -70,10 +85,14 @@ export class EzDateInput {
70
85
  showCalendar() {
71
86
  this.handleBlur();
72
87
  this._calendar.value = this.value;
73
- //FIXME: Provavelmente isso fará com que o popup abra em uma
74
- //posição errada no futuro. Preferi fazer simples no começo,
75
- //porque não quis onerar o text input com essa funcionalidade...
76
- const top = this.errorMessage || this.mode === "slim" ? 6 : -13;
88
+ let top;
89
+ if (this.isFixed()) {
90
+ top = 29;
91
+ this._calendar.fitHorizontal(0);
92
+ }
93
+ else {
94
+ top = this.errorMessage || this.mode === "slim" ? 6 : -13;
95
+ }
77
96
  this._calendar.fitVertical(top, this._elem.clientHeight);
78
97
  }
79
98
  hideCalendar() {
@@ -81,27 +100,35 @@ export class EzDateInput {
81
100
  this._calendar.hide();
82
101
  }
83
102
  handleBlur() {
84
- const strValue = this._textInput.value;
85
- const newValue = DateUtils.strToDate(strValue);
86
- if (newValue || !strValue) {
87
- this.errorMessage = "";
88
- const currentValue = DateUtils.validateDate(this.value);
89
- const newValueValidated = DateUtils.validateDate(newValue);
90
- if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
91
- if (newValueValidated) {
92
- this._textInput.value = this.getTextValue(newValueValidated) || '';
93
- this._focused = false;
103
+ try {
104
+ const strValue = this._textInput.value;
105
+ const newValue = DateUtils.strToDate(strValue);
106
+ if (newValue || !strValue) {
107
+ this.errorMessage = "";
108
+ const currentValue = DateUtils.validateDate(this.value);
109
+ const newValueValidated = DateUtils.validateDate(newValue);
110
+ if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
111
+ if (newValueValidated) {
112
+ this._textInput.value = this.getTextValue(newValueValidated) || '';
113
+ this._focused = false;
114
+ }
115
+ this.ezCancelWaitingChange.emit();
116
+ }
117
+ else {
118
+ this.changeValue(newValueValidated);
94
119
  }
95
- this.ezCancelWaitingChange.emit();
96
120
  }
97
121
  else {
98
- this.changeValue(newValueValidated);
122
+ this.changeValue(undefined);
123
+ this.ezCancelWaitingChange.emit();
124
+ this.errorMessage = "O valor digitado não é uma data válida";
99
125
  }
100
126
  }
101
- else {
102
- this.changeValue(undefined);
103
- this.ezCancelWaitingChange.emit();
104
- this.errorMessage = "O valor digitado não é uma data válida";
127
+ finally {
128
+ for (const callback of this._valuePromiseCallbacks) {
129
+ callback(this.value);
130
+ }
131
+ this._valuePromiseCallbacks = [];
105
132
  }
106
133
  }
107
134
  getTextValue(d) {
@@ -113,6 +140,7 @@ export class EzDateInput {
113
140
  const currentValue = DateUtils.validateDate(this.value);
114
141
  const newValueValidated = DateUtils.validateDate(newValue);
115
142
  if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
143
+ this._changePending = true;
116
144
  this._focused = true;
117
145
  this.ezStartChange.emit({ waitmessage: "", blocking: false });
118
146
  }
@@ -126,13 +154,16 @@ export class EzDateInput {
126
154
  this._textInput.value = textValue;
127
155
  }
128
156
  }
157
+ isFixed() {
158
+ return this._elem.dataset.isFixed === "true";
159
+ }
129
160
  componentDidLoad() {
130
161
  CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
131
162
  this.setInputValue();
132
163
  }
133
164
  render() {
134
165
  ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
135
- return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
166
+ return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, "data-is-fixed": this._elem.dataset.isFixed })));
136
167
  }
137
168
  static get is() { return "ez-date-input"; }
138
169
  static get encapsulation() { return "shadow"; }
@@ -363,6 +394,25 @@ export class EzDateInput {
363
394
  "text": "Retorna se o conte\u00FAdo \u00E9 inv\u00E1lido.",
364
395
  "tags": []
365
396
  }
397
+ },
398
+ "getValueAsync": {
399
+ "complexType": {
400
+ "signature": "() => Promise<Date>",
401
+ "parameters": [],
402
+ "references": {
403
+ "Promise": {
404
+ "location": "global"
405
+ },
406
+ "Date": {
407
+ "location": "global"
408
+ }
409
+ },
410
+ "return": "Promise<Date>"
411
+ },
412
+ "docs": {
413
+ "text": "",
414
+ "tags": []
415
+ }
366
416
  }
367
417
  };
368
418
  }
@@ -3,7 +3,9 @@ import { DateUtils, ElementIDUtils, TimeFormatter } from '@sankhyalabs/core';
3
3
  import CSSVarsUtils from '../../utils/CSSVarsUtils';
4
4
  export class EzDateTimeInput {
5
5
  constructor() {
6
+ this._changePending = false;
6
7
  this._focused = false;
8
+ this._valuePromiseCallbacks = [];
7
9
  this.label = undefined;
8
10
  this.value = undefined;
9
11
  this.enabled = true;
@@ -42,6 +44,7 @@ export class EzDateTimeInput {
42
44
  this.ezChange.emit(valueEmitted);
43
45
  }
44
46
  }
47
+ this._changePending = false;
45
48
  }
46
49
  /**
47
50
  * Aplica o foco no campo.
@@ -61,6 +64,18 @@ export class EzDateTimeInput {
61
64
  async isInvalid() {
62
65
  return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
63
66
  }
67
+ /*
68
+ * Retorna uma promise com o valor da opção selecionada,
69
+ * que será resolvida quando o backend devolver este dado.
70
+ */
71
+ async getValueAsync() {
72
+ if (this._changePending) {
73
+ return new Promise(accept => {
74
+ this._valuePromiseCallbacks.push(accept);
75
+ });
76
+ }
77
+ return Promise.resolve(this.value);
78
+ }
64
79
  handleKeyDown(event) {
65
80
  const input = this._textInput.shadowRoot.querySelector('input');
66
81
  if (event.shiftKey && event.key === "Tab") {
@@ -105,7 +120,14 @@ export class EzDateTimeInput {
105
120
  }
106
121
  }
107
122
  showCalendar() {
108
- const top = this.errorMessage || this.mode === "slim" ? 6 : -13;
123
+ let top;
124
+ if (this.isFixed()) {
125
+ top = 29;
126
+ this._calendar.fitHorizontal(0);
127
+ }
128
+ else {
129
+ top = this.errorMessage || this.mode === "slim" ? 6 : -13;
130
+ }
109
131
  this._calendar.fitVertical(top, this._elem.clientHeight);
110
132
  this._calendar.style.visibility = 'inherit';
111
133
  }
@@ -130,27 +152,35 @@ export class EzDateTimeInput {
130
152
  }
131
153
  handleBlur() {
132
154
  var _a, _b;
133
- const strValue = ((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || "";
134
- const newValue = this.getParsedDateTime();
135
- if (newValue || !strValue) {
136
- this.errorMessage = "";
137
- const currentValue = DateUtils.validateDate(this.value, true);
138
- const newValueValidated = DateUtils.validateDate(newValue, true);
139
- if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
140
- if (newValueValidated) {
141
- this._textInput.value = this.getTextValue(newValueValidated) || '';
142
- this._focused = false;
155
+ try {
156
+ const strValue = ((_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || "";
157
+ const newValue = this.getParsedDateTime();
158
+ if (newValue || !strValue) {
159
+ this.errorMessage = "";
160
+ const currentValue = DateUtils.validateDate(this.value, true);
161
+ const newValueValidated = DateUtils.validateDate(newValue, true);
162
+ if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) === (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
163
+ if (newValueValidated) {
164
+ this._textInput.value = this.getTextValue(newValueValidated) || '';
165
+ this._focused = false;
166
+ }
167
+ this.ezCancelWaitingChange.emit();
168
+ }
169
+ else {
170
+ this.changeValue(newValueValidated);
143
171
  }
144
- this.ezCancelWaitingChange.emit();
145
172
  }
146
173
  else {
147
- this.changeValue(newValueValidated);
174
+ this.changeValue(undefined);
175
+ this.ezCancelWaitingChange.emit();
176
+ this.errorMessage = "O valor digitado não é uma data válida";
148
177
  }
149
178
  }
150
- else {
151
- this.changeValue(undefined);
152
- this.ezCancelWaitingChange.emit();
153
- this.errorMessage = "O valor digitado não é uma data válida";
179
+ finally {
180
+ for (const callback of this._valuePromiseCallbacks) {
181
+ callback(this.value);
182
+ }
183
+ this._valuePromiseCallbacks = [];
154
184
  }
155
185
  }
156
186
  getTextValue(date) {
@@ -164,6 +194,7 @@ export class EzDateTimeInput {
164
194
  const currentValue = DateUtils.validateDate(this.value, true);
165
195
  const newValueValidated = DateUtils.validateDate(newValue, true);
166
196
  if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
197
+ this._changePending = true;
167
198
  this._focused = true;
168
199
  this.ezStartChange.emit({ waitmessage: "", blocking: false });
169
200
  }
@@ -177,13 +208,16 @@ export class EzDateTimeInput {
177
208
  this._textInput.value = textValue;
178
209
  }
179
210
  }
211
+ isFixed() {
212
+ return this._elem.dataset.isFixed === "true";
213
+ }
180
214
  componentDidLoad() {
181
215
  CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
182
216
  this.setInputValue();
183
217
  }
184
218
  render() {
185
219
  ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
186
- return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), 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: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick(), canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
220
+ return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), 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: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick(), canShowError: this.canShowError }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, time: true, showSeconds: this.showSeconds, "data-is-fixed": this._elem.dataset.isFixed })));
187
221
  }
188
222
  static get is() { return "ez-date-time-input"; }
189
223
  static get encapsulation() { return "shadow"; }
@@ -432,6 +466,25 @@ export class EzDateTimeInput {
432
466
  "text": "Retorna se o conte\u00FAdo \u00E9 inv\u00E1lido.",
433
467
  "tags": []
434
468
  }
469
+ },
470
+ "getValueAsync": {
471
+ "complexType": {
472
+ "signature": "() => Promise<Date>",
473
+ "parameters": [],
474
+ "references": {
475
+ "Promise": {
476
+ "location": "global"
477
+ },
478
+ "Date": {
479
+ "location": "global"
480
+ }
481
+ },
482
+ "return": "Promise<Date>"
483
+ },
484
+ "docs": {
485
+ "text": "",
486
+ "tags": []
487
+ }
435
488
  }
436
489
  };
437
490
  }