@sankhyalabs/ezui 1.1.6 → 1.1.10

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 (149) hide show
  1. package/README.md +72 -72
  2. package/dist/cjs/{DataUnit-09a6e7be.js → DataUnit-95368a67.js} +418 -361
  3. package/dist/cjs/ez-action-chip.cjs.entry.js +41 -41
  4. package/dist/cjs/ez-button_14.cjs.entry.js +1933 -1847
  5. package/dist/cjs/ez-label-chip.cjs.entry.js +120 -120
  6. package/dist/cjs/ez-modal.cjs.entry.js +102 -95
  7. package/dist/cjs/ez-number-input.cjs.entry.js +236 -236
  8. package/dist/cjs/ez-time-input.cjs.entry.js +168 -168
  9. package/dist/cjs/ezui.cjs.js +1 -1
  10. package/dist/cjs/form-metadata.cjs.entry.js +65 -65
  11. package/dist/cjs/loader.cjs.js +1 -1
  12. package/dist/collection/components/ez-action-chip/ez-action-chip.css +82 -82
  13. package/dist/collection/components/ez-action-chip/ez-action-chip.js +109 -109
  14. package/dist/collection/components/ez-button/ez-button.css +94 -94
  15. package/dist/collection/components/ez-button/ez-button.js +125 -125
  16. package/dist/collection/components/ez-calendar/ez-calendar.css +210 -210
  17. package/dist/collection/components/ez-calendar/ez-calendar.js +215 -215
  18. package/dist/collection/components/ez-check/ez-check.css +265 -265
  19. package/dist/collection/components/ez-check/ez-check.js +168 -168
  20. package/dist/collection/components/ez-collapsable-box/ez-collapsable-box.css +67 -67
  21. package/dist/collection/components/ez-collapsable-box/ez-collapsable-box.js +108 -108
  22. package/dist/collection/components/ez-combo-box/ez-combo-box-interfaces.js +2 -2
  23. package/dist/collection/components/ez-combo-box/ez-combo-box.css +167 -167
  24. package/dist/collection/components/ez-combo-box/ez-combo-box.js +363 -363
  25. package/dist/collection/components/ez-date-input/ez-date-input.css +38 -38
  26. package/dist/collection/components/ez-date-input/ez-date-input.js +172 -172
  27. package/dist/collection/components/ez-form/ez-form.css +19 -19
  28. package/dist/collection/components/ez-form/ez-form.js +390 -289
  29. package/dist/collection/components/ez-form/store/Form.actions.js +132 -123
  30. package/dist/collection/components/ez-form/store/Form.reducer.js +194 -174
  31. package/dist/collection/components/ez-form/store/Form.selectors.js +44 -43
  32. package/dist/collection/components/ez-form/subcomponents/DataUnit.js +252 -207
  33. package/dist/collection/components/ez-form/subcomponents/FormMetadata.js +16 -16
  34. package/dist/collection/components/ez-form/subcomponents/css/place-holder.css +23 -23
  35. package/dist/collection/components/ez-form/subcomponents/form-metadata.js +173 -173
  36. package/dist/collection/components/ez-form/subcomponents/place-holder.js +14 -14
  37. package/dist/collection/components/ez-form/subcomponents/structure/Field.js +71 -71
  38. package/dist/collection/components/ez-form/subcomponents/structure/FieldSet.js +27 -27
  39. package/dist/collection/components/ez-form/subcomponents/structure/FormSheet.js +40 -33
  40. package/dist/collection/components/ez-form/subcomponents/structure/NavigationBar.js +27 -18
  41. package/dist/collection/components/ez-icon/ez-icon.css +36 -36
  42. package/dist/collection/components/ez-icon/ez-icon.js +56 -56
  43. package/dist/collection/components/ez-label-chip/ez-label-chip.css +117 -117
  44. package/dist/collection/components/ez-label-chip/ez-label-chip.js +276 -276
  45. package/dist/collection/components/ez-modal/ez-modal.css +86 -86
  46. package/dist/collection/components/ez-modal/ez-modal.js +222 -200
  47. package/dist/collection/components/ez-number-input/ez-number-input.css +144 -144
  48. package/dist/collection/components/ez-number-input/ez-number-input.js +465 -465
  49. package/dist/collection/components/ez-popover/ez-popover.css +38 -38
  50. package/dist/collection/components/ez-popover/ez-popover.js +323 -323
  51. package/dist/collection/components/ez-search/ez-search.css +295 -295
  52. package/dist/collection/components/ez-search/ez-search.js +527 -527
  53. package/dist/collection/components/ez-tabselector/ez-tabselector.css +125 -125
  54. package/dist/collection/components/ez-tabselector/ez-tabselector.js +283 -283
  55. package/dist/collection/components/ez-text-area/ez-text-area.css +139 -139
  56. package/dist/collection/components/ez-text-area/ez-text-area.js +267 -267
  57. package/dist/collection/components/ez-text-input/ez-text-input.css +169 -169
  58. package/dist/collection/components/ez-text-input/ez-text-input.js +395 -395
  59. package/dist/collection/components/ez-time-input/ez-time-input.css +155 -155
  60. package/dist/collection/components/ez-time-input/ez-time-input.js +326 -326
  61. package/dist/collection/index.js +1 -1
  62. package/dist/collection/servidor.js +100 -100
  63. package/dist/collection/utils/FloatingManager.js +15 -15
  64. package/dist/collection/utils/utils.js +6 -6
  65. package/dist/custom-elements/index.js +3146 -2998
  66. package/dist/esm/{DataUnit-7a983910.js → DataUnit-4bb6a396.js} +417 -362
  67. package/dist/esm/ez-action-chip.entry.js +41 -41
  68. package/dist/esm/ez-button_14.entry.js +1933 -1847
  69. package/dist/esm/ez-label-chip.entry.js +120 -120
  70. package/dist/esm/ez-modal.entry.js +103 -96
  71. package/dist/esm/ez-number-input.entry.js +236 -236
  72. package/dist/esm/ez-time-input.entry.js +168 -168
  73. package/dist/esm/ezui.js +1 -1
  74. package/dist/esm/form-metadata.entry.js +65 -65
  75. package/dist/esm/loader.js +1 -1
  76. package/dist/esm/polyfills/core-js.js +0 -0
  77. package/dist/esm/polyfills/dom.js +0 -0
  78. package/dist/esm/polyfills/es5-html-element.js +0 -0
  79. package/dist/esm/polyfills/index.js +0 -0
  80. package/dist/esm/polyfills/system.js +0 -0
  81. package/dist/ezui/ezui.esm.js +1 -1
  82. package/dist/ezui/p-11d20338.js +1 -0
  83. package/dist/ezui/{p-3c3a43aa.entry.js → p-5d30e51c.entry.js} +1 -1
  84. package/dist/ezui/p-77fdb4fd.entry.js +1 -0
  85. package/dist/ezui/p-e056fb23.entry.js +1 -0
  86. package/dist/types/components/ez-action-chip/ez-action-chip.d.ts +16 -16
  87. package/dist/types/components/ez-button/ez-button.d.ts +20 -20
  88. package/dist/types/components/ez-calendar/ez-calendar.d.ts +42 -42
  89. package/dist/types/components/ez-check/ez-check.d.ts +32 -32
  90. package/dist/types/components/ez-collapsable-box/ez-collapsable-box.d.ts +18 -18
  91. package/dist/types/components/ez-combo-box/ez-combo-box-interfaces.d.ts +4 -4
  92. package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +68 -68
  93. package/dist/types/components/ez-date-input/ez-date-input.d.ts +31 -31
  94. package/dist/types/components/ez-form/ez-form.d.ts +27 -27
  95. package/dist/types/components/ez-form/store/Form.actions.d.ts +111 -104
  96. package/dist/types/components/ez-form/store/Form.reducer.d.ts +20 -11
  97. package/dist/types/components/ez-form/store/Form.selectors.d.ts +14 -13
  98. package/dist/types/components/ez-form/subcomponents/DataUnit.d.ts +61 -48
  99. package/dist/types/components/ez-form/subcomponents/FormMetadata.d.ts +41 -41
  100. package/dist/types/components/ez-form/subcomponents/form-metadata.d.ts +15 -15
  101. package/dist/types/components/ez-form/subcomponents/place-holder.d.ts +3 -3
  102. package/dist/types/components/ez-form/subcomponents/structure/Field.d.ts +10 -10
  103. package/dist/types/components/ez-form/subcomponents/structure/FieldSet.d.ts +12 -12
  104. package/dist/types/components/ez-form/subcomponents/structure/FormSheet.d.ts +13 -13
  105. package/dist/types/components/ez-form/subcomponents/structure/NavigationBar.d.ts +17 -7
  106. package/dist/types/components/ez-icon/ez-icon.d.ts +5 -5
  107. package/dist/types/components/ez-label-chip/ez-label-chip.d.ts +40 -40
  108. package/dist/types/components/ez-modal/ez-modal.d.ts +32 -26
  109. package/dist/types/components/ez-number-input/ez-number-input.d.ts +73 -73
  110. package/dist/types/components/ez-popover/ez-popover.d.ts +52 -52
  111. package/dist/types/components/ez-search/ez-search.d.ts +95 -95
  112. package/dist/types/components/ez-tabselector/ez-tabselector.d.ts +31 -31
  113. package/dist/types/components/ez-text-area/ez-text-area.d.ts +49 -49
  114. package/dist/types/components/ez-text-input/ez-text-input.d.ts +64 -64
  115. package/dist/types/components/ez-time-input/ez-time-input.d.ts +53 -53
  116. package/dist/types/components.d.ts +8 -0
  117. package/dist/types/index.d.ts +1 -1
  118. package/dist/types/utils/utils.d.ts +2 -2
  119. package/package.json +114 -114
  120. package/react/components.d.ts +22 -0
  121. package/react/components.js +25 -0
  122. package/react/components.js.map +1 -0
  123. package/react/react-component-lib/createComponent.d.ts +10 -0
  124. package/react/react-component-lib/createComponent.js +59 -0
  125. package/react/react-component-lib/createComponent.js.map +1 -0
  126. package/react/react-component-lib/createOverlayComponent.d.ts +20 -0
  127. package/react/react-component-lib/createOverlayComponent.js +89 -0
  128. package/react/react-component-lib/createOverlayComponent.js.map +1 -0
  129. package/react/react-component-lib/index.d.ts +2 -0
  130. package/react/react-component-lib/index.js +3 -0
  131. package/react/react-component-lib/index.js.map +1 -0
  132. package/react/react-component-lib/interfaces.d.ts +29 -0
  133. package/react/react-component-lib/interfaces.js +1 -0
  134. package/react/react-component-lib/interfaces.js.map +1 -0
  135. package/react/react-component-lib/utils/attachProps.d.ts +12 -0
  136. package/react/react-component-lib/utils/attachProps.js +96 -0
  137. package/react/react-component-lib/utils/attachProps.js.map +1 -0
  138. package/react/react-component-lib/utils/case.d.ts +2 -0
  139. package/react/react-component-lib/utils/case.js +7 -0
  140. package/react/react-component-lib/utils/case.js.map +1 -0
  141. package/react/react-component-lib/utils/dev.d.ts +2 -0
  142. package/react/react-component-lib/utils/dev.js +13 -0
  143. package/react/react-component-lib/utils/dev.js.map +1 -0
  144. package/react/react-component-lib/utils/index.d.ts +7 -0
  145. package/react/react-component-lib/utils/index.js +21 -0
  146. package/react/react-component-lib/utils/index.js.map +1 -0
  147. package/dist/ezui/p-5185cbf1.entry.js +0 -1
  148. package/dist/ezui/p-5d600057.entry.js +0 -1
  149. package/dist/ezui/p-9f819174.js +0 -1
@@ -1,465 +1,465 @@
1
- import { Component, h, Host, Prop, Watch, Method, Element } from '@stencil/core';
2
- import { NumberUtils } from '@sankhyalabs/core';
3
- export class NumberInput {
4
- constructor() {
5
- /**
6
- * Deixa o campo disponível ou não para digitação.
7
- */
8
- this.enabled = true;
9
- /**
10
- * Deixa o campo disponível ou não para digitação.
11
- */
12
- this.textleft = false;
13
- /**
14
- * Opção de configurar a transformação de string to number entre formatação pt-BR e en-US
15
- * (formatação de ENTRADA e SAÍDA do componente: pt-BR="###.###,##" en-US="###,###.##"; Default: "pt-BR")
16
- * Qualquer outro valor que não seja "en-US", adotará a formatação "pt-BR"
17
- * Não é case sensitive
18
- */
19
- this.formatnumber = "PT-BR";
20
- //---------------------------------------------
21
- // Private Methods
22
- //---------------------------------------------
23
- this.settingStrValueIntNumber = (strvalue) => {
24
- if (this.precision === 0 && strvalue) {
25
- return strvalue = strvalue.replace(/\./g, '').replace(/\,/g, '');
26
- }
27
- else {
28
- return strvalue;
29
- }
30
- };
31
- this.checkNumberValidation = (valuePtBRorNumber) => {
32
- try {
33
- if (valuePtBRorNumber != "" && NumberUtils.format(valuePtBRorNumber, this.precision, this.prettyprecision) === "NaN") {
34
- this.errormessage = `Valor não é um número válido`;
35
- this.value = undefined;
36
- this.strvalue = undefined;
37
- if (this._inputElem) {
38
- this._inputElem.value = "";
39
- }
40
- return false;
41
- }
42
- }
43
- catch (err) {
44
- this.errormessage = err.message;
45
- return false;
46
- }
47
- return true;
48
- };
49
- }
50
- showError() {
51
- const hasError = typeof this.errormessage === 'string' && this.errormessage !== '';
52
- if (this._inputElem) {
53
- if (hasError) {
54
- this._inputElem.classList.add('hasError');
55
- this._messageBoxElem.classList.add('hasError');
56
- }
57
- else {
58
- this._inputElem.classList.remove('hasError');
59
- this._messageBoxElem.classList.remove('hasError');
60
- }
61
- }
62
- }
63
- onPrecisionChanged(newPrecision) {
64
- if (isNaN(newPrecision)) {
65
- this.precision = 0;
66
- }
67
- this.handleFocusout();
68
- }
69
- onPrettyPrecisionChanged(newPrettyPrecision) {
70
- if (isNaN(newPrettyPrecision)) {
71
- this.prettyprecision = 0;
72
- }
73
- this.handleFocusout();
74
- }
75
- onValueChanged(newValue) {
76
- if (isNaN(newValue) && newValue !== undefined) {
77
- this.value = undefined;
78
- this.strvalue = "";
79
- this.errormessage = `Valor não é um número válido`;
80
- this.adjustFloatingLabel();
81
- }
82
- else {
83
- this.settingComponent();
84
- }
85
- }
86
- adjustFloatingLabel() {
87
- if (this._labelElem) {
88
- if (this.label && this._inputElem.value && this._inputElem.value.toString().length > 0) {
89
- if (!this._labelElem.classList.contains("input__label--floated")) {
90
- this._labelElem.classList.add("input__label--floated");
91
- }
92
- if (!this._inputElem.classList.contains("input--with--label")) {
93
- this._inputElem.classList.add("input--with--label");
94
- }
95
- }
96
- else {
97
- this._labelElem.classList.remove("input__label--floated");
98
- }
99
- }
100
- }
101
- //---------------------------------------------
102
- // Public methods
103
- //---------------------------------------------
104
- /**
105
- * Faz o foco no componente de input
106
- */
107
- async setFocus() {
108
- this._inputElem.focus();
109
- }
110
- /**
111
- * Remove o foco no componente de input
112
- */
113
- async setBlur() {
114
- this._inputElem.blur();
115
- }
116
- //---------------------------------------------
117
- // Event handlers
118
- //---------------------------------------------
119
- /**
120
- * Promove a atualização do componente
121
- */
122
- async handleFocusout() {
123
- //Setting value and strvalue by stringinput
124
- if (this._inputElem) {
125
- this.errormessage = "";
126
- if (this._inputElem.value !== "") {
127
- this._inputElem.value = this.settingStrValueIntNumber(this._inputElem.value);
128
- const value = NumberUtils.keepOnlyDecimalSeparator(this._inputElem.value, this.formatnumber.toUpperCase());
129
- if (!this.checkNumberValidation(value)) {
130
- return;
131
- }
132
- if (value) {
133
- try {
134
- this._inputElem.value = this.formatnumber.toUpperCase() !== "EN-US" ? NumberUtils.format(value, this.precision, this.prettyprecision) : NumberUtils.changeFormat(NumberUtils.format(value, this.precision, this.prettyprecision));
135
- }
136
- catch (e) {
137
- this.errormessage = e.message;
138
- return;
139
- }
140
- }
141
- this.strvalue = this._inputElem.value;
142
- this.value = NumberUtils.stringToNumber(value);
143
- }
144
- else {
145
- this.strvalue = undefined;
146
- this.value = undefined;
147
- }
148
- this.adjustFloatingLabel();
149
- }
150
- }
151
- handleChange() {
152
- this._inputElem.value = this.settingStrValueIntNumber(this._inputElem.value);
153
- }
154
- handleSlotChange(ev) {
155
- const slot = ev.target;
156
- const content = slot.assignedElements()[0];
157
- content.style.position = "absolute";
158
- content.style.display = "flex";
159
- content.style.alignItems = "center";
160
- content.style.justifyContent = "center";
161
- content.style.overflow = "hidden";
162
- content.style.top = "0px";
163
- content.style.width = "var(--ni__icon--width)";
164
- content.style.height = "var(--ni--height)";
165
- if (slot.name == "leftIcon") {
166
- content.style.left = "0px";
167
- content.style.borderRadius = "var(--ni--border-radius) 0 0 var(--ni--border-radius)";
168
- this._inputElem.classList.add('icon--left');
169
- if (this._labelElem) {
170
- this._labelElem.classList.add("input__label--left");
171
- }
172
- }
173
- else if (slot.name == "rightIcon") {
174
- content.style.right = "0px";
175
- content.style.borderRadius = "0 var(--ni--border-radius) var(--ni--border-radius) 0";
176
- this._inputElem.classList.add('icon--right');
177
- }
178
- this.showError();
179
- }
180
- doFocus() {
181
- if (this.label && this._labelElem) {
182
- this._labelElem.classList.contains("input__label--floated") ? undefined : this._labelElem.classList.add("input__label--floated");
183
- }
184
- }
185
- settingComponent() {
186
- const value = '' + this.value;
187
- if (this.value !== undefined) {
188
- try {
189
- this._inputElem.value = this.formatnumber.toUpperCase() !== "EN-US" ? NumberUtils.format(value, this.precision, this.prettyprecision) : NumberUtils.changeFormat(NumberUtils.format(value, this.precision, this.prettyprecision));
190
- }
191
- catch (e) {
192
- this.errormessage = e.message;
193
- return;
194
- }
195
- this.strvalue = this._inputElem.value;
196
- }
197
- this.adjustFloatingLabel();
198
- }
199
- settingValue() {
200
- //this.value: en-US format => Need to convert
201
- const value = !isNaN(this.value) ? '' + this.value : 'NaN';
202
- if (!this.checkNumberValidation(value)) {
203
- return;
204
- }
205
- //output default from ".format": pt-BR
206
- const tempStrValue = NumberUtils.format(value, this.precision, this.prettyprecision);
207
- //output => depends to formatnumber
208
- this.strvalue = this.formatnumber.toUpperCase() !== 'EN-US' ? tempStrValue : NumberUtils.changeFormat(tempStrValue);
209
- NumberUtils.format(this.value.toString(), this.precision, this.prettyprecision);
210
- }
211
- //---------------------------------------------
212
- // Lifecycle web component
213
- //---------------------------------------------
214
- componentDidLoad() {
215
- if (!this.textleft) {
216
- this._inputElem.classList.add('text--right');
217
- }
218
- this.showError();
219
- this.adjustFloatingLabel();
220
- }
221
- componentWillLoad() {
222
- this.onPrecisionChanged(this.precision);
223
- this.onPrettyPrecisionChanged(this.prettyprecision);
224
- this.settingValue();
225
- }
226
- render() {
227
- const labelInput = this.label ? h("label", { onClick: () => this._inputElem.focus(), class: "input__label", ref: (el) => this._labelElem = el }, this.label) : null;
228
- return (h(Host, null,
229
- h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
230
- labelInput,
231
- h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.strvalue, disabled: !this.enabled, onInput: this.handleChange.bind(this), onFocusout: this.handleFocusout.bind(this) }),
232
- h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
233
- h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.errormessage)));
234
- }
235
- static get is() { return "ez-number-input"; }
236
- static get encapsulation() { return "shadow"; }
237
- static get originalStyleUrls() { return {
238
- "$": ["ez-number-input.css"]
239
- }; }
240
- static get styleUrls() { return {
241
- "$": ["ez-number-input.css"]
242
- }; }
243
- static get properties() { return {
244
- "strvalue": {
245
- "type": "string",
246
- "mutable": true,
247
- "complexType": {
248
- "original": "string",
249
- "resolved": "string",
250
- "references": {}
251
- },
252
- "required": false,
253
- "optional": false,
254
- "docs": {
255
- "tags": [],
256
- "text": "Valor digitado pelo usu\u00E1rio. Este valor \u00E9 o que fica vis\u00EDvel no campo."
257
- },
258
- "attribute": "strvalue",
259
- "reflect": false
260
- },
261
- "value": {
262
- "type": "number",
263
- "mutable": true,
264
- "complexType": {
265
- "original": "number",
266
- "resolved": "number",
267
- "references": {}
268
- },
269
- "required": false,
270
- "optional": false,
271
- "docs": {
272
- "tags": [],
273
- "text": "Valor guardado pelo componente. Este valor \u00E9 o que ira ser utilizado para alimentar o backend.\r\nEsta vari\u00E1vel pode ser setada para alimentar o componente."
274
- },
275
- "attribute": "value",
276
- "reflect": false
277
- },
278
- "label": {
279
- "type": "string",
280
- "mutable": false,
281
- "complexType": {
282
- "original": "string",
283
- "resolved": "string",
284
- "references": {}
285
- },
286
- "required": false,
287
- "optional": false,
288
- "docs": {
289
- "tags": [],
290
- "text": "Label \u00E9 o t\u00EDtulo do campo"
291
- },
292
- "attribute": "label",
293
- "reflect": true
294
- },
295
- "enabled": {
296
- "type": "boolean",
297
- "mutable": false,
298
- "complexType": {
299
- "original": "boolean",
300
- "resolved": "boolean",
301
- "references": {}
302
- },
303
- "required": false,
304
- "optional": false,
305
- "docs": {
306
- "tags": [],
307
- "text": "Deixa o campo dispon\u00EDvel ou n\u00E3o para digita\u00E7\u00E3o."
308
- },
309
- "attribute": "enabled",
310
- "reflect": true,
311
- "defaultValue": "true"
312
- },
313
- "errormessage": {
314
- "type": "string",
315
- "mutable": true,
316
- "complexType": {
317
- "original": "string",
318
- "resolved": "string",
319
- "references": {}
320
- },
321
- "required": false,
322
- "optional": false,
323
- "docs": {
324
- "tags": [],
325
- "text": "Quando h\u00E1 um problema de valida\u00E7\u00E3o, serve como orienta\u00E7\u00E3o ao usu\u00E1rio"
326
- },
327
- "attribute": "errormessage",
328
- "reflect": true
329
- },
330
- "precision": {
331
- "type": "number",
332
- "mutable": true,
333
- "complexType": {
334
- "original": "number",
335
- "resolved": "number",
336
- "references": {}
337
- },
338
- "required": false,
339
- "optional": false,
340
- "docs": {
341
- "tags": [],
342
- "text": "Precis\u00E3o de arredondamento do n\u00FAmero"
343
- },
344
- "attribute": "precision",
345
- "reflect": true
346
- },
347
- "prettyprecision": {
348
- "type": "number",
349
- "mutable": true,
350
- "complexType": {
351
- "original": "number",
352
- "resolved": "number",
353
- "references": {}
354
- },
355
- "required": false,
356
- "optional": false,
357
- "docs": {
358
- "tags": [],
359
- "text": "N\u00FAmeros de zeros retirados ap\u00F3s arredondamento"
360
- },
361
- "attribute": "prettyprecision",
362
- "reflect": true
363
- },
364
- "textleft": {
365
- "type": "boolean",
366
- "mutable": false,
367
- "complexType": {
368
- "original": "boolean",
369
- "resolved": "boolean",
370
- "references": {}
371
- },
372
- "required": false,
373
- "optional": false,
374
- "docs": {
375
- "tags": [],
376
- "text": "Deixa o campo dispon\u00EDvel ou n\u00E3o para digita\u00E7\u00E3o."
377
- },
378
- "attribute": "textleft",
379
- "reflect": true,
380
- "defaultValue": "false"
381
- },
382
- "formatnumber": {
383
- "type": "string",
384
- "mutable": false,
385
- "complexType": {
386
- "original": "string",
387
- "resolved": "string",
388
- "references": {}
389
- },
390
- "required": false,
391
- "optional": false,
392
- "docs": {
393
- "tags": [],
394
- "text": "Op\u00E7\u00E3o de configurar a transforma\u00E7\u00E3o de string to number entre formata\u00E7\u00E3o pt-BR e en-US\r\n(formata\u00E7\u00E3o de ENTRADA e SA\u00CDDA do componente: pt-BR=\"###.###,##\" en-US=\"###,###.##\"; Default: \"pt-BR\")\r\nQualquer outro valor que n\u00E3o seja \"en-US\", adotar\u00E1 a formata\u00E7\u00E3o \"pt-BR\"\r\nN\u00E3o \u00E9 case sensitive"
395
- },
396
- "attribute": "formatnumber",
397
- "reflect": true,
398
- "defaultValue": "\"PT-BR\""
399
- }
400
- }; }
401
- static get methods() { return {
402
- "setFocus": {
403
- "complexType": {
404
- "signature": "() => Promise<void>",
405
- "parameters": [],
406
- "references": {
407
- "Promise": {
408
- "location": "global"
409
- }
410
- },
411
- "return": "Promise<void>"
412
- },
413
- "docs": {
414
- "text": "Faz o foco no componente de input",
415
- "tags": []
416
- }
417
- },
418
- "setBlur": {
419
- "complexType": {
420
- "signature": "() => Promise<void>",
421
- "parameters": [],
422
- "references": {
423
- "Promise": {
424
- "location": "global"
425
- }
426
- },
427
- "return": "Promise<void>"
428
- },
429
- "docs": {
430
- "text": "Remove o foco no componente de input",
431
- "tags": []
432
- }
433
- },
434
- "handleFocusout": {
435
- "complexType": {
436
- "signature": "() => Promise<void>",
437
- "parameters": [],
438
- "references": {
439
- "Promise": {
440
- "location": "global"
441
- }
442
- },
443
- "return": "Promise<void>"
444
- },
445
- "docs": {
446
- "text": "Promove a atualiza\u00E7\u00E3o do componente",
447
- "tags": []
448
- }
449
- }
450
- }; }
451
- static get elementRef() { return "el"; }
452
- static get watchers() { return [{
453
- "propName": "errormessage",
454
- "methodName": "showError"
455
- }, {
456
- "propName": "precision",
457
- "methodName": "onPrecisionChanged"
458
- }, {
459
- "propName": "prettyprecision",
460
- "methodName": "onPrettyPrecisionChanged"
461
- }, {
462
- "propName": "value",
463
- "methodName": "onValueChanged"
464
- }]; }
465
- }
1
+ import { Component, h, Host, Prop, Watch, Method, Element } from '@stencil/core';
2
+ import { NumberUtils } from '@sankhyalabs/core';
3
+ export class NumberInput {
4
+ constructor() {
5
+ /**
6
+ * Deixa o campo disponível ou não para digitação.
7
+ */
8
+ this.enabled = true;
9
+ /**
10
+ * Deixa o campo disponível ou não para digitação.
11
+ */
12
+ this.textleft = false;
13
+ /**
14
+ * Opção de configurar a transformação de string to number entre formatação pt-BR e en-US
15
+ * (formatação de ENTRADA e SAÍDA do componente: pt-BR="###.###,##" en-US="###,###.##"; Default: "pt-BR")
16
+ * Qualquer outro valor que não seja "en-US", adotará a formatação "pt-BR"
17
+ * Não é case sensitive
18
+ */
19
+ this.formatnumber = "PT-BR";
20
+ //---------------------------------------------
21
+ // Private Methods
22
+ //---------------------------------------------
23
+ this.settingStrValueIntNumber = (strvalue) => {
24
+ if (this.precision === 0 && strvalue) {
25
+ return strvalue = strvalue.replace(/\./g, '').replace(/\,/g, '');
26
+ }
27
+ else {
28
+ return strvalue;
29
+ }
30
+ };
31
+ this.checkNumberValidation = (valuePtBRorNumber) => {
32
+ try {
33
+ if (valuePtBRorNumber != "" && NumberUtils.format(valuePtBRorNumber, this.precision, this.prettyprecision) === "NaN") {
34
+ this.errormessage = `Valor não é um número válido`;
35
+ this.value = undefined;
36
+ this.strvalue = undefined;
37
+ if (this._inputElem) {
38
+ this._inputElem.value = "";
39
+ }
40
+ return false;
41
+ }
42
+ }
43
+ catch (err) {
44
+ this.errormessage = err.message;
45
+ return false;
46
+ }
47
+ return true;
48
+ };
49
+ }
50
+ showError() {
51
+ const hasError = typeof this.errormessage === 'string' && this.errormessage !== '';
52
+ if (this._inputElem) {
53
+ if (hasError) {
54
+ this._inputElem.classList.add('hasError');
55
+ this._messageBoxElem.classList.add('hasError');
56
+ }
57
+ else {
58
+ this._inputElem.classList.remove('hasError');
59
+ this._messageBoxElem.classList.remove('hasError');
60
+ }
61
+ }
62
+ }
63
+ onPrecisionChanged(newPrecision) {
64
+ if (isNaN(newPrecision)) {
65
+ this.precision = 0;
66
+ }
67
+ this.handleFocusout();
68
+ }
69
+ onPrettyPrecisionChanged(newPrettyPrecision) {
70
+ if (isNaN(newPrettyPrecision)) {
71
+ this.prettyprecision = 0;
72
+ }
73
+ this.handleFocusout();
74
+ }
75
+ onValueChanged(newValue) {
76
+ if (isNaN(newValue) && newValue !== undefined) {
77
+ this.value = undefined;
78
+ this.strvalue = "";
79
+ this.errormessage = `Valor não é um número válido`;
80
+ this.adjustFloatingLabel();
81
+ }
82
+ else {
83
+ this.settingComponent();
84
+ }
85
+ }
86
+ adjustFloatingLabel() {
87
+ if (this._labelElem) {
88
+ if (this.label && this._inputElem.value && this._inputElem.value.toString().length > 0) {
89
+ if (!this._labelElem.classList.contains("input__label--floated")) {
90
+ this._labelElem.classList.add("input__label--floated");
91
+ }
92
+ if (!this._inputElem.classList.contains("input--with--label")) {
93
+ this._inputElem.classList.add("input--with--label");
94
+ }
95
+ }
96
+ else {
97
+ this._labelElem.classList.remove("input__label--floated");
98
+ }
99
+ }
100
+ }
101
+ //---------------------------------------------
102
+ // Public methods
103
+ //---------------------------------------------
104
+ /**
105
+ * Faz o foco no componente de input
106
+ */
107
+ async setFocus() {
108
+ this._inputElem.focus();
109
+ }
110
+ /**
111
+ * Remove o foco no componente de input
112
+ */
113
+ async setBlur() {
114
+ this._inputElem.blur();
115
+ }
116
+ //---------------------------------------------
117
+ // Event handlers
118
+ //---------------------------------------------
119
+ /**
120
+ * Promove a atualização do componente
121
+ */
122
+ async handleFocusout() {
123
+ //Setting value and strvalue by stringinput
124
+ if (this._inputElem) {
125
+ this.errormessage = "";
126
+ if (this._inputElem.value !== "") {
127
+ this._inputElem.value = this.settingStrValueIntNumber(this._inputElem.value);
128
+ const value = NumberUtils.keepOnlyDecimalSeparator(this._inputElem.value, this.formatnumber.toUpperCase());
129
+ if (!this.checkNumberValidation(value)) {
130
+ return;
131
+ }
132
+ if (value) {
133
+ try {
134
+ this._inputElem.value = this.formatnumber.toUpperCase() !== "EN-US" ? NumberUtils.format(value, this.precision, this.prettyprecision) : NumberUtils.changeFormat(NumberUtils.format(value, this.precision, this.prettyprecision));
135
+ }
136
+ catch (e) {
137
+ this.errormessage = e.message;
138
+ return;
139
+ }
140
+ }
141
+ this.strvalue = this._inputElem.value;
142
+ this.value = NumberUtils.stringToNumber(value);
143
+ }
144
+ else {
145
+ this.strvalue = undefined;
146
+ this.value = undefined;
147
+ }
148
+ this.adjustFloatingLabel();
149
+ }
150
+ }
151
+ handleChange() {
152
+ this._inputElem.value = this.settingStrValueIntNumber(this._inputElem.value);
153
+ }
154
+ handleSlotChange(ev) {
155
+ const slot = ev.target;
156
+ const content = slot.assignedElements()[0];
157
+ content.style.position = "absolute";
158
+ content.style.display = "flex";
159
+ content.style.alignItems = "center";
160
+ content.style.justifyContent = "center";
161
+ content.style.overflow = "hidden";
162
+ content.style.top = "0px";
163
+ content.style.width = "var(--ni__icon--width)";
164
+ content.style.height = "var(--ni--height)";
165
+ if (slot.name == "leftIcon") {
166
+ content.style.left = "0px";
167
+ content.style.borderRadius = "var(--ni--border-radius) 0 0 var(--ni--border-radius)";
168
+ this._inputElem.classList.add('icon--left');
169
+ if (this._labelElem) {
170
+ this._labelElem.classList.add("input__label--left");
171
+ }
172
+ }
173
+ else if (slot.name == "rightIcon") {
174
+ content.style.right = "0px";
175
+ content.style.borderRadius = "0 var(--ni--border-radius) var(--ni--border-radius) 0";
176
+ this._inputElem.classList.add('icon--right');
177
+ }
178
+ this.showError();
179
+ }
180
+ doFocus() {
181
+ if (this.label && this._labelElem) {
182
+ this._labelElem.classList.contains("input__label--floated") ? undefined : this._labelElem.classList.add("input__label--floated");
183
+ }
184
+ }
185
+ settingComponent() {
186
+ const value = '' + this.value;
187
+ if (this.value !== undefined) {
188
+ try {
189
+ this._inputElem.value = this.formatnumber.toUpperCase() !== "EN-US" ? NumberUtils.format(value, this.precision, this.prettyprecision) : NumberUtils.changeFormat(NumberUtils.format(value, this.precision, this.prettyprecision));
190
+ }
191
+ catch (e) {
192
+ this.errormessage = e.message;
193
+ return;
194
+ }
195
+ this.strvalue = this._inputElem.value;
196
+ }
197
+ this.adjustFloatingLabel();
198
+ }
199
+ settingValue() {
200
+ //this.value: en-US format => Need to convert
201
+ const value = !isNaN(this.value) ? '' + this.value : 'NaN';
202
+ if (!this.checkNumberValidation(value)) {
203
+ return;
204
+ }
205
+ //output default from ".format": pt-BR
206
+ const tempStrValue = NumberUtils.format(value, this.precision, this.prettyprecision);
207
+ //output => depends to formatnumber
208
+ this.strvalue = this.formatnumber.toUpperCase() !== 'EN-US' ? tempStrValue : NumberUtils.changeFormat(tempStrValue);
209
+ NumberUtils.format(this.value.toString(), this.precision, this.prettyprecision);
210
+ }
211
+ //---------------------------------------------
212
+ // Lifecycle web component
213
+ //---------------------------------------------
214
+ componentDidLoad() {
215
+ if (!this.textleft) {
216
+ this._inputElem.classList.add('text--right');
217
+ }
218
+ this.showError();
219
+ this.adjustFloatingLabel();
220
+ }
221
+ componentWillLoad() {
222
+ this.onPrecisionChanged(this.precision);
223
+ this.onPrettyPrecisionChanged(this.prettyprecision);
224
+ this.settingValue();
225
+ }
226
+ render() {
227
+ const labelInput = this.label ? h("label", { onClick: () => this._inputElem.focus(), class: "input__label", ref: (el) => this._labelElem = el }, this.label) : null;
228
+ return (h(Host, null,
229
+ h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
230
+ labelInput,
231
+ h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.strvalue, disabled: !this.enabled, onInput: this.handleChange.bind(this), onFocusout: this.handleFocusout.bind(this) }),
232
+ h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
233
+ h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.errormessage)));
234
+ }
235
+ static get is() { return "ez-number-input"; }
236
+ static get encapsulation() { return "shadow"; }
237
+ static get originalStyleUrls() { return {
238
+ "$": ["ez-number-input.css"]
239
+ }; }
240
+ static get styleUrls() { return {
241
+ "$": ["ez-number-input.css"]
242
+ }; }
243
+ static get properties() { return {
244
+ "strvalue": {
245
+ "type": "string",
246
+ "mutable": true,
247
+ "complexType": {
248
+ "original": "string",
249
+ "resolved": "string",
250
+ "references": {}
251
+ },
252
+ "required": false,
253
+ "optional": false,
254
+ "docs": {
255
+ "tags": [],
256
+ "text": "Valor digitado pelo usu\u00E1rio. Este valor \u00E9 o que fica vis\u00EDvel no campo."
257
+ },
258
+ "attribute": "strvalue",
259
+ "reflect": false
260
+ },
261
+ "value": {
262
+ "type": "number",
263
+ "mutable": true,
264
+ "complexType": {
265
+ "original": "number",
266
+ "resolved": "number",
267
+ "references": {}
268
+ },
269
+ "required": false,
270
+ "optional": false,
271
+ "docs": {
272
+ "tags": [],
273
+ "text": "Valor guardado pelo componente. Este valor \u00E9 o que ira ser utilizado para alimentar o backend.\nEsta vari\u00E1vel pode ser setada para alimentar o componente."
274
+ },
275
+ "attribute": "value",
276
+ "reflect": false
277
+ },
278
+ "label": {
279
+ "type": "string",
280
+ "mutable": false,
281
+ "complexType": {
282
+ "original": "string",
283
+ "resolved": "string",
284
+ "references": {}
285
+ },
286
+ "required": false,
287
+ "optional": false,
288
+ "docs": {
289
+ "tags": [],
290
+ "text": "Label \u00E9 o t\u00EDtulo do campo"
291
+ },
292
+ "attribute": "label",
293
+ "reflect": true
294
+ },
295
+ "enabled": {
296
+ "type": "boolean",
297
+ "mutable": false,
298
+ "complexType": {
299
+ "original": "boolean",
300
+ "resolved": "boolean",
301
+ "references": {}
302
+ },
303
+ "required": false,
304
+ "optional": false,
305
+ "docs": {
306
+ "tags": [],
307
+ "text": "Deixa o campo dispon\u00EDvel ou n\u00E3o para digita\u00E7\u00E3o."
308
+ },
309
+ "attribute": "enabled",
310
+ "reflect": true,
311
+ "defaultValue": "true"
312
+ },
313
+ "errormessage": {
314
+ "type": "string",
315
+ "mutable": true,
316
+ "complexType": {
317
+ "original": "string",
318
+ "resolved": "string",
319
+ "references": {}
320
+ },
321
+ "required": false,
322
+ "optional": false,
323
+ "docs": {
324
+ "tags": [],
325
+ "text": "Quando h\u00E1 um problema de valida\u00E7\u00E3o, serve como orienta\u00E7\u00E3o ao usu\u00E1rio"
326
+ },
327
+ "attribute": "errormessage",
328
+ "reflect": true
329
+ },
330
+ "precision": {
331
+ "type": "number",
332
+ "mutable": true,
333
+ "complexType": {
334
+ "original": "number",
335
+ "resolved": "number",
336
+ "references": {}
337
+ },
338
+ "required": false,
339
+ "optional": false,
340
+ "docs": {
341
+ "tags": [],
342
+ "text": "Precis\u00E3o de arredondamento do n\u00FAmero"
343
+ },
344
+ "attribute": "precision",
345
+ "reflect": true
346
+ },
347
+ "prettyprecision": {
348
+ "type": "number",
349
+ "mutable": true,
350
+ "complexType": {
351
+ "original": "number",
352
+ "resolved": "number",
353
+ "references": {}
354
+ },
355
+ "required": false,
356
+ "optional": false,
357
+ "docs": {
358
+ "tags": [],
359
+ "text": "N\u00FAmeros de zeros retirados ap\u00F3s arredondamento"
360
+ },
361
+ "attribute": "prettyprecision",
362
+ "reflect": true
363
+ },
364
+ "textleft": {
365
+ "type": "boolean",
366
+ "mutable": false,
367
+ "complexType": {
368
+ "original": "boolean",
369
+ "resolved": "boolean",
370
+ "references": {}
371
+ },
372
+ "required": false,
373
+ "optional": false,
374
+ "docs": {
375
+ "tags": [],
376
+ "text": "Deixa o campo dispon\u00EDvel ou n\u00E3o para digita\u00E7\u00E3o."
377
+ },
378
+ "attribute": "textleft",
379
+ "reflect": true,
380
+ "defaultValue": "false"
381
+ },
382
+ "formatnumber": {
383
+ "type": "string",
384
+ "mutable": false,
385
+ "complexType": {
386
+ "original": "string",
387
+ "resolved": "string",
388
+ "references": {}
389
+ },
390
+ "required": false,
391
+ "optional": false,
392
+ "docs": {
393
+ "tags": [],
394
+ "text": "Op\u00E7\u00E3o de configurar a transforma\u00E7\u00E3o de string to number entre formata\u00E7\u00E3o pt-BR e en-US\n(formata\u00E7\u00E3o de ENTRADA e SA\u00CDDA do componente: pt-BR=\"###.###,##\" en-US=\"###,###.##\"; Default: \"pt-BR\")\nQualquer outro valor que n\u00E3o seja \"en-US\", adotar\u00E1 a formata\u00E7\u00E3o \"pt-BR\"\nN\u00E3o \u00E9 case sensitive"
395
+ },
396
+ "attribute": "formatnumber",
397
+ "reflect": true,
398
+ "defaultValue": "\"PT-BR\""
399
+ }
400
+ }; }
401
+ static get methods() { return {
402
+ "setFocus": {
403
+ "complexType": {
404
+ "signature": "() => Promise<void>",
405
+ "parameters": [],
406
+ "references": {
407
+ "Promise": {
408
+ "location": "global"
409
+ }
410
+ },
411
+ "return": "Promise<void>"
412
+ },
413
+ "docs": {
414
+ "text": "Faz o foco no componente de input",
415
+ "tags": []
416
+ }
417
+ },
418
+ "setBlur": {
419
+ "complexType": {
420
+ "signature": "() => Promise<void>",
421
+ "parameters": [],
422
+ "references": {
423
+ "Promise": {
424
+ "location": "global"
425
+ }
426
+ },
427
+ "return": "Promise<void>"
428
+ },
429
+ "docs": {
430
+ "text": "Remove o foco no componente de input",
431
+ "tags": []
432
+ }
433
+ },
434
+ "handleFocusout": {
435
+ "complexType": {
436
+ "signature": "() => Promise<void>",
437
+ "parameters": [],
438
+ "references": {
439
+ "Promise": {
440
+ "location": "global"
441
+ }
442
+ },
443
+ "return": "Promise<void>"
444
+ },
445
+ "docs": {
446
+ "text": "Promove a atualiza\u00E7\u00E3o do componente",
447
+ "tags": []
448
+ }
449
+ }
450
+ }; }
451
+ static get elementRef() { return "el"; }
452
+ static get watchers() { return [{
453
+ "propName": "errormessage",
454
+ "methodName": "showError"
455
+ }, {
456
+ "propName": "precision",
457
+ "methodName": "onPrecisionChanged"
458
+ }, {
459
+ "propName": "prettyprecision",
460
+ "methodName": "onPrettyPrecisionChanged"
461
+ }, {
462
+ "propName": "value",
463
+ "methodName": "onValueChanged"
464
+ }]; }
465
+ }