@sankhyalabs/ezui 1.1.8 → 1.1.9

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 (141) hide show
  1. package/README.md +72 -72
  2. package/dist/cjs/{DataUnit-28b290cb.js → DataUnit-9a4a35ca.js} +415 -371
  3. package/dist/cjs/ez-action-chip.cjs.entry.js +41 -41
  4. package/dist/cjs/ez-button_14.cjs.entry.js +1911 -1911
  5. package/dist/cjs/ez-label-chip.cjs.entry.js +120 -120
  6. package/dist/cjs/ez-modal.cjs.entry.js +104 -104
  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/form-metadata.cjs.entry.js +65 -65
  10. package/dist/collection/components/ez-action-chip/ez-action-chip.css +82 -82
  11. package/dist/collection/components/ez-action-chip/ez-action-chip.js +109 -109
  12. package/dist/collection/components/ez-button/ez-button.css +94 -94
  13. package/dist/collection/components/ez-button/ez-button.js +125 -125
  14. package/dist/collection/components/ez-calendar/ez-calendar.css +210 -210
  15. package/dist/collection/components/ez-calendar/ez-calendar.js +215 -215
  16. package/dist/collection/components/ez-check/ez-check.css +265 -265
  17. package/dist/collection/components/ez-check/ez-check.js +168 -168
  18. package/dist/collection/components/ez-collapsable-box/ez-collapsable-box.css +67 -67
  19. package/dist/collection/components/ez-collapsable-box/ez-collapsable-box.js +108 -108
  20. package/dist/collection/components/ez-combo-box/ez-combo-box-interfaces.js +2 -2
  21. package/dist/collection/components/ez-combo-box/ez-combo-box.css +167 -167
  22. package/dist/collection/components/ez-combo-box/ez-combo-box.js +363 -363
  23. package/dist/collection/components/ez-date-input/ez-date-input.css +38 -38
  24. package/dist/collection/components/ez-date-input/ez-date-input.js +172 -172
  25. package/dist/collection/components/ez-form/ez-form.css +19 -19
  26. package/dist/collection/components/ez-form/ez-form.js +368 -368
  27. package/dist/collection/components/ez-form/store/Form.actions.js +132 -132
  28. package/dist/collection/components/ez-form/store/Form.reducer.js +194 -194
  29. package/dist/collection/components/ez-form/store/Form.selectors.js +44 -44
  30. package/dist/collection/components/ez-form/subcomponents/DataUnit.js +251 -207
  31. package/dist/collection/components/ez-form/subcomponents/FormMetadata.js +16 -16
  32. package/dist/collection/components/ez-form/subcomponents/css/place-holder.css +23 -23
  33. package/dist/collection/components/ez-form/subcomponents/form-metadata.js +173 -173
  34. package/dist/collection/components/ez-form/subcomponents/place-holder.js +14 -14
  35. package/dist/collection/components/ez-form/subcomponents/structure/Field.js +71 -71
  36. package/dist/collection/components/ez-form/subcomponents/structure/FieldSet.js +27 -27
  37. package/dist/collection/components/ez-form/subcomponents/structure/FormSheet.js +40 -40
  38. package/dist/collection/components/ez-form/subcomponents/structure/NavigationBar.js +27 -27
  39. package/dist/collection/components/ez-icon/ez-icon.css +36 -36
  40. package/dist/collection/components/ez-icon/ez-icon.js +56 -56
  41. package/dist/collection/components/ez-label-chip/ez-label-chip.css +117 -117
  42. package/dist/collection/components/ez-label-chip/ez-label-chip.js +276 -276
  43. package/dist/collection/components/ez-modal/ez-modal.css +86 -86
  44. package/dist/collection/components/ez-modal/ez-modal.js +224 -224
  45. package/dist/collection/components/ez-number-input/ez-number-input.css +144 -144
  46. package/dist/collection/components/ez-number-input/ez-number-input.js +465 -465
  47. package/dist/collection/components/ez-popover/ez-popover.css +38 -38
  48. package/dist/collection/components/ez-popover/ez-popover.js +323 -323
  49. package/dist/collection/components/ez-search/ez-search.css +295 -295
  50. package/dist/collection/components/ez-search/ez-search.js +527 -527
  51. package/dist/collection/components/ez-tabselector/ez-tabselector.css +125 -125
  52. package/dist/collection/components/ez-tabselector/ez-tabselector.js +283 -283
  53. package/dist/collection/components/ez-text-area/ez-text-area.css +139 -139
  54. package/dist/collection/components/ez-text-area/ez-text-area.js +267 -267
  55. package/dist/collection/components/ez-text-input/ez-text-input.css +169 -169
  56. package/dist/collection/components/ez-text-input/ez-text-input.js +395 -395
  57. package/dist/collection/components/ez-time-input/ez-time-input.css +155 -155
  58. package/dist/collection/components/ez-time-input/ez-time-input.js +326 -326
  59. package/dist/collection/index.js +1 -1
  60. package/dist/collection/servidor.js +100 -100
  61. package/dist/collection/utils/FloatingManager.js +15 -15
  62. package/dist/collection/utils/utils.js +6 -6
  63. package/dist/custom-elements/index.js +3125 -3081
  64. package/dist/esm/{DataUnit-69e518fa.js → DataUnit-d5d4c9a3.js} +415 -371
  65. package/dist/esm/ez-action-chip.entry.js +41 -41
  66. package/dist/esm/ez-button_14.entry.js +1911 -1911
  67. package/dist/esm/ez-label-chip.entry.js +120 -120
  68. package/dist/esm/ez-modal.entry.js +104 -104
  69. package/dist/esm/ez-number-input.entry.js +236 -236
  70. package/dist/esm/ez-time-input.entry.js +168 -168
  71. package/dist/esm/form-metadata.entry.js +65 -65
  72. package/dist/esm/polyfills/core-js.js +0 -0
  73. package/dist/esm/polyfills/dom.js +0 -0
  74. package/dist/esm/polyfills/es5-html-element.js +0 -0
  75. package/dist/esm/polyfills/index.js +0 -0
  76. package/dist/esm/polyfills/system.js +0 -0
  77. package/dist/ezui/ezui.esm.js +1 -1
  78. package/dist/ezui/{p-b0974f4f.entry.js → p-0fcdfb51.entry.js} +1 -1
  79. package/dist/ezui/p-dac7a6c2.js +1 -0
  80. package/dist/ezui/{p-db11c600.entry.js → p-dbef7060.entry.js} +1 -1
  81. package/dist/types/components/ez-action-chip/ez-action-chip.d.ts +16 -16
  82. package/dist/types/components/ez-button/ez-button.d.ts +20 -20
  83. package/dist/types/components/ez-calendar/ez-calendar.d.ts +42 -42
  84. package/dist/types/components/ez-check/ez-check.d.ts +32 -32
  85. package/dist/types/components/ez-collapsable-box/ez-collapsable-box.d.ts +18 -18
  86. package/dist/types/components/ez-combo-box/ez-combo-box-interfaces.d.ts +4 -4
  87. package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +68 -68
  88. package/dist/types/components/ez-date-input/ez-date-input.d.ts +31 -31
  89. package/dist/types/components/ez-form/ez-form.d.ts +26 -31
  90. package/dist/types/components/ez-form/store/Form.actions.d.ts +111 -111
  91. package/dist/types/components/ez-form/store/Form.reducer.d.ts +20 -20
  92. package/dist/types/components/ez-form/store/Form.selectors.d.ts +14 -14
  93. package/dist/types/components/ez-form/subcomponents/DataUnit.d.ts +60 -55
  94. package/dist/types/components/ez-form/subcomponents/FormMetadata.d.ts +41 -41
  95. package/dist/types/components/ez-form/subcomponents/form-metadata.d.ts +15 -15
  96. package/dist/types/components/ez-form/subcomponents/place-holder.d.ts +3 -3
  97. package/dist/types/components/ez-form/subcomponents/structure/Field.d.ts +10 -10
  98. package/dist/types/components/ez-form/subcomponents/structure/FieldSet.d.ts +12 -12
  99. package/dist/types/components/ez-form/subcomponents/structure/FormSheet.d.ts +13 -13
  100. package/dist/types/components/ez-form/subcomponents/structure/NavigationBar.d.ts +17 -17
  101. package/dist/types/components/ez-icon/ez-icon.d.ts +5 -5
  102. package/dist/types/components/ez-label-chip/ez-label-chip.d.ts +40 -40
  103. package/dist/types/components/ez-modal/ez-modal.d.ts +32 -32
  104. package/dist/types/components/ez-number-input/ez-number-input.d.ts +73 -73
  105. package/dist/types/components/ez-popover/ez-popover.d.ts +52 -52
  106. package/dist/types/components/ez-search/ez-search.d.ts +95 -95
  107. package/dist/types/components/ez-tabselector/ez-tabselector.d.ts +31 -31
  108. package/dist/types/components/ez-text-area/ez-text-area.d.ts +49 -49
  109. package/dist/types/components/ez-text-input/ez-text-input.d.ts +64 -64
  110. package/dist/types/components/ez-time-input/ez-time-input.d.ts +53 -53
  111. package/dist/types/index.d.ts +1 -1
  112. package/dist/types/utils/utils.d.ts +2 -2
  113. package/package.json +114 -114
  114. package/dist/ezui/p-10ef58b3.js +0 -1
  115. package/react/components.d.ts +0 -22
  116. package/react/components.js +0 -25
  117. package/react/components.js.map +0 -1
  118. package/react/react-component-lib/createComponent.d.ts +0 -10
  119. package/react/react-component-lib/createComponent.js +0 -59
  120. package/react/react-component-lib/createComponent.js.map +0 -1
  121. package/react/react-component-lib/createOverlayComponent.d.ts +0 -20
  122. package/react/react-component-lib/createOverlayComponent.js +0 -89
  123. package/react/react-component-lib/createOverlayComponent.js.map +0 -1
  124. package/react/react-component-lib/index.d.ts +0 -2
  125. package/react/react-component-lib/index.js +0 -3
  126. package/react/react-component-lib/index.js.map +0 -1
  127. package/react/react-component-lib/interfaces.d.ts +0 -29
  128. package/react/react-component-lib/interfaces.js +0 -1
  129. package/react/react-component-lib/interfaces.js.map +0 -1
  130. package/react/react-component-lib/utils/attachProps.d.ts +0 -12
  131. package/react/react-component-lib/utils/attachProps.js +0 -96
  132. package/react/react-component-lib/utils/attachProps.js.map +0 -1
  133. package/react/react-component-lib/utils/case.d.ts +0 -2
  134. package/react/react-component-lib/utils/case.js +0 -7
  135. package/react/react-component-lib/utils/case.js.map +0 -1
  136. package/react/react-component-lib/utils/dev.d.ts +0 -2
  137. package/react/react-component-lib/utils/dev.js +0 -13
  138. package/react/react-component-lib/utils/dev.js.map +0 -1
  139. package/react/react-component-lib/utils/index.d.ts +0 -7
  140. package/react/react-component-lib/utils/index.js +0 -21
  141. package/react/react-component-lib/utils/index.js.map +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.\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
- }
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
+ }