@vaadin/number-field 23.2.0-alpha2 → 23.2.0-alpha5

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 (5) hide show
  1. package/package.json +15 -9
  2. package/src/vaadin-number-field.d.ts +11 -3
  3. package/src/vaadin-number-field.js +18 -75
  4. package/web-types.json +527 -0
  5. package/web-types.lit.json +202 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/number-field",
3
- "version": "23.2.0-alpha2",
3
+ "version": "23.2.0-alpha5",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -23,7 +23,9 @@
23
23
  "src",
24
24
  "theme",
25
25
  "vaadin-*.d.ts",
26
- "vaadin-*.js"
26
+ "vaadin-*.js",
27
+ "web-types.json",
28
+ "web-types.lit.json"
27
29
  ],
28
30
  "keywords": [
29
31
  "Vaadin",
@@ -33,17 +35,21 @@
33
35
  ],
34
36
  "dependencies": {
35
37
  "@polymer/polymer": "^3.0.0",
36
- "@vaadin/component-base": "23.2.0-alpha2",
37
- "@vaadin/field-base": "23.2.0-alpha2",
38
- "@vaadin/input-container": "23.2.0-alpha2",
39
- "@vaadin/vaadin-lumo-styles": "23.2.0-alpha2",
40
- "@vaadin/vaadin-material-styles": "23.2.0-alpha2",
41
- "@vaadin/vaadin-themable-mixin": "23.2.0-alpha2"
38
+ "@vaadin/component-base": "23.2.0-alpha5",
39
+ "@vaadin/field-base": "23.2.0-alpha5",
40
+ "@vaadin/input-container": "23.2.0-alpha5",
41
+ "@vaadin/vaadin-lumo-styles": "23.2.0-alpha5",
42
+ "@vaadin/vaadin-material-styles": "23.2.0-alpha5",
43
+ "@vaadin/vaadin-themable-mixin": "23.2.0-alpha5"
42
44
  },
43
45
  "devDependencies": {
44
46
  "@esm-bundle/chai": "^4.3.4",
45
47
  "@vaadin/testing-helpers": "^0.3.2",
46
48
  "sinon": "^13.0.2"
47
49
  },
48
- "gitHead": "c9b8113d0fa9a602f8b9cb915c1826355af2e8df"
50
+ "web-types": [
51
+ "web-types.json",
52
+ "web-types.lit.json"
53
+ ],
54
+ "gitHead": "c6247fd741d61096d75a71feda4a1faf88b6f0ce"
49
55
  }
package/src/vaadin-number-field.d.ts CHANGED
@@ -25,10 +25,17 @@ export type NumberFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>;
25
25
  */
26
26
  export type NumberFieldValueChangedEvent = CustomEvent<{ value: string }>;
27
27
 
28
+ /**
29
+ * Fired whenever the field is validated.
30
+ */
31
+ export type NumberFieldValidatedEvent = CustomEvent<{ valid: boolean }>;
32
+
28
33
  export interface NumberFieldCustomEventMap {
29
34
  'invalid-changed': NumberFieldInvalidChangedEvent;
30
35
 
31
36
  'value-changed': NumberFieldValueChangedEvent;
37
+
38
+ validated: NumberFieldValidatedEvent;
32
39
  }
33
40
 
34
41
  export interface NumberFieldEventMap extends HTMLElementEventMap, NumberFieldCustomEventMap {
@@ -60,6 +67,7 @@ export interface NumberFieldEventMap extends HTMLElementEventMap, NumberFieldCus
60
67
  * @fires {Event} change - Fired when the user commits a value change.
61
68
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
62
69
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
70
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
63
71
  */
64
72
  declare class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
65
73
  /**
@@ -81,18 +89,18 @@ declare class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(
81
89
  /**
82
90
  * Specifies the allowed number intervals of the field.
83
91
  */
84
- step: number;
92
+ step: number | null | undefined;
85
93
 
86
94
  addEventListener<K extends keyof NumberFieldEventMap>(
87
95
  type: K,
88
96
  listener: (this: NumberField, ev: NumberFieldEventMap[K]) => void,
89
- options?: boolean | AddEventListenerOptions,
97
+ options?: AddEventListenerOptions | boolean,
90
98
  ): void;
91
99
 
92
100
  removeEventListener<K extends keyof NumberFieldEventMap>(
93
101
  type: K,
94
102
  listener: (this: NumberField, ev: NumberFieldEventMap[K]) => void,
95
- options?: boolean | EventListenerOptions,
103
+ options?: EventListenerOptions | boolean,
96
104
  ): void;
97
105
  }
98
106
 
package/src/vaadin-number-field.js CHANGED
@@ -42,6 +42,7 @@ registerStyles('vaadin-number-field', inputFieldShared, { moduleId: 'vaadin-numb
42
42
  * @fires {Event} change - Fired when the user commits a value change.
43
43
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
44
44
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
45
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
45
46
  *
46
47
  * @extends HTMLElement
47
48
  * @mixes InputFieldMixin
@@ -146,7 +147,6 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
146
147
  */
147
148
  min: {
148
149
  type: Number,
149
- observer: '_minChanged',
150
150
  },
151
151
 
152
152
  /**
@@ -154,7 +154,6 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
154
154
  */
155
155
  max: {
156
156
  type: Number,
157
- observer: '_maxChanged',
158
157
  },
159
158
 
160
159
  /**
@@ -163,12 +162,18 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
163
162
  */
164
163
  step: {
165
164
  type: Number,
166
- value: 1,
167
- observer: '_stepChanged',
168
165
  },
169
166
  };
170
167
  }
171
168
 
169
+ static get observers() {
170
+ return ['_stepChanged(step, inputElement)'];
171
+ }
172
+
173
+ static get delegateProps() {
174
+ return [...super.delegateProps, 'min', 'max'];
175
+ }
176
+
172
177
  static get constraints() {
173
178
  return [...super.constraints, 'min', 'max', 'step'];
174
179
  }
@@ -225,10 +230,6 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
225
230
  }),
226
231
  );
227
232
 
228
- this.inputElement.min = this.min;
229
- this.inputElement.max = this.max;
230
- this.__applyStep(this.step);
231
-
232
233
  this.addController(new LabelledInputController(this.inputElement, this._labelController));
233
234
  }
234
235
 
@@ -246,23 +247,6 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
246
247
  this._increaseValue();
247
248
  }
248
249
 
249
- /**
250
- * @protected
251
- * @override
252
- */
253
- _constraintsChanged(required, min, max, _step) {
254
- if (!this.invalid) {
255
- return;
256
- }
257
-
258
- const isNumUnset = (n) => !n && n !== 0;
259
- if (!isNumUnset(min) || !isNumUnset(max)) {
260
- this.validate();
261
- } else if (!required) {
262
- this.invalid = false;
263
- }
264
- }
265
-
266
250
  /** @private */
267
251
  _decreaseValue() {
268
252
  this._incrementValue(-1);
@@ -279,6 +263,7 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
279
263
  return;
280
264
  }
281
265
 
266
+ const step = this.step || 1;
282
267
  let value = parseFloat(this.value);
283
268
 
284
269
  if (!this.value) {
@@ -297,11 +282,11 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
297
282
  value = this.max;
298
283
  if (incr < 0) {
299
284
  incr = 0;
300
- } else if (this._getIncrement(1, value - this.step) > this.max) {
301
- value -= 2 * this.step;
285
+ } else if (this._getIncrement(1, value - step) > this.max) {
286
+ value -= 2 * step;
302
287
  // FIXME(yuriy): find a proper solution to make correct step back
303
288
  } else {
304
- value -= this.step;
289
+ value -= step;
305
290
  }
306
291
  }
307
292
  } else if (value < this.min) {
@@ -377,42 +362,14 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
377
362
  return !this.value || (!this.disabled && this._incrementIsInsideTheLimits(incr, value));
378
363
  }
379
364
 
380
- /** @private */
381
- __applyStep(step) {
382
- if (this.inputElement) {
383
- this.inputElement.step = this.__validateByStep ? step : 'any';
384
- }
385
- }
386
-
387
365
  /**
388
- * @param {number} newVal
389
- * @param {number | undefined} oldVal
366
+ * @param {number} step
367
+ * @param {HTMLElement | undefined} inputElement
390
368
  * @protected
391
369
  */
392
- _stepChanged(newVal) {
393
- // TODO: refactor to not have initial value
394
- // https://github.com/vaadin/vaadin-text-field/issues/435
395
-
396
- // Avoid using initial value in validation
397
- this.__validateByStep = this.__stepChangedCalled || this.getAttribute('step') !== null;
398
-
399
- this.__applyStep(newVal);
400
-
401
- this.__stepChangedCalled = true;
402
- this.setAttribute('step', newVal);
403
- }
404
-
405
- /** @private */
406
- _minChanged(min) {
407
- if (this.inputElement) {
408
- this.inputElement.min = min;
409
- }
410
- }
411
-
412
- /** @private */
413
- _maxChanged(max) {
414
- if (this.inputElement) {
415
- this.inputElement.max = max;
370
+ _stepChanged(step, inputElement) {
371
+ if (inputElement) {
372
+ inputElement.step = step || 'any';
416
373
  }
417
374
  }
418
375
 
@@ -451,20 +408,6 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
451
408
 
452
409
  super._onKeyDown(event);
453
410
  }
454
-
455
- /**
456
- * Returns true if the current input value satisfies all constraints (if any).
457
- * @return {boolean}
458
- */
459
- checkValidity() {
460
- if (
461
- this.inputElement &&
462
- (this.required || this.min !== undefined || this.max !== undefined || this.__validateByStep)
463
- ) {
464
- return this.inputElement.checkValidity();
465
- }
466
- return !this.invalid;
467
- }
468
411
  }
469
412
 
470
413
  customElements.define(NumberField.is, NumberField);
package/web-types.json ADDED
@@ -0,0 +1,527 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/number-field",
4
+ "version": "23.2.0-alpha5",
5
+ "description-markup": "markdown",
6
+ "contributions": {
7
+ "html": {
8
+ "elements": [
9
+ {
10
+ "name": "vaadin-number-field",
11
+ "description": "`<vaadin-number-field>` is an input field web component that only accepts numeric input.\n\n```html\n<vaadin-number-field label=\"Balance\"></vaadin-number-field>\n```\n\n### Styling\n\n`<vaadin-number-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-alpha5/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n------------------|-------------------------\n`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.",
12
+ "attributes": [
13
+ {
14
+ "name": "disabled",
15
+ "description": "If true, the user cannot interact with this element.",
16
+ "value": {
17
+ "type": [
18
+ "boolean",
19
+ "null",
20
+ "undefined"
21
+ ]
22
+ }
23
+ },
24
+ {
25
+ "name": "autofocus",
26
+ "description": "Specify that this control should have input focus when the page loads.",
27
+ "value": {
28
+ "type": [
29
+ "boolean",
30
+ "null",
31
+ "undefined"
32
+ ]
33
+ }
34
+ },
35
+ {
36
+ "name": "label",
37
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
38
+ "value": {
39
+ "type": [
40
+ "string",
41
+ "null",
42
+ "undefined"
43
+ ]
44
+ }
45
+ },
46
+ {
47
+ "name": "invalid",
48
+ "description": "Set to true when the field is invalid.",
49
+ "value": {
50
+ "type": [
51
+ "boolean",
52
+ "null",
53
+ "undefined"
54
+ ]
55
+ }
56
+ },
57
+ {
58
+ "name": "required",
59
+ "description": "Specifies that the user must fill in a value.",
60
+ "value": {
61
+ "type": [
62
+ "boolean",
63
+ "null",
64
+ "undefined"
65
+ ]
66
+ }
67
+ },
68
+ {
69
+ "name": "error-message",
70
+ "description": "Error to show when the field is invalid.",
71
+ "value": {
72
+ "type": [
73
+ "string",
74
+ "null",
75
+ "undefined"
76
+ ]
77
+ }
78
+ },
79
+ {
80
+ "name": "helper-text",
81
+ "description": "String used for the helper text.",
82
+ "value": {
83
+ "type": [
84
+ "string",
85
+ "null",
86
+ "undefined"
87
+ ]
88
+ }
89
+ },
90
+ {
91
+ "name": "value",
92
+ "description": "The value of the field.",
93
+ "value": {
94
+ "type": [
95
+ "string",
96
+ "null",
97
+ "undefined"
98
+ ]
99
+ }
100
+ },
101
+ {
102
+ "name": "allowed-char-pattern",
103
+ "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
104
+ "value": {
105
+ "type": [
106
+ "string",
107
+ "null",
108
+ "undefined"
109
+ ]
110
+ }
111
+ },
112
+ {
113
+ "name": "autoselect",
114
+ "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
115
+ "value": {
116
+ "type": [
117
+ "boolean",
118
+ "null",
119
+ "undefined"
120
+ ]
121
+ }
122
+ },
123
+ {
124
+ "name": "clear-button-visible",
125
+ "description": "Set to true to display the clear icon which clears the input.",
126
+ "value": {
127
+ "type": [
128
+ "boolean",
129
+ "null",
130
+ "undefined"
131
+ ]
132
+ }
133
+ },
134
+ {
135
+ "name": "name",
136
+ "description": "The name of this field.",
137
+ "value": {
138
+ "type": [
139
+ "string",
140
+ "null",
141
+ "undefined"
142
+ ]
143
+ }
144
+ },
145
+ {
146
+ "name": "placeholder",
147
+ "description": "A hint to the user of what can be entered in the field.",
148
+ "value": {
149
+ "type": [
150
+ "string",
151
+ "null",
152
+ "undefined"
153
+ ]
154
+ }
155
+ },
156
+ {
157
+ "name": "readonly",
158
+ "description": "When present, it specifies that the field is read-only.",
159
+ "value": {
160
+ "type": [
161
+ "boolean",
162
+ "null",
163
+ "undefined"
164
+ ]
165
+ }
166
+ },
167
+ {
168
+ "name": "title",
169
+ "description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
170
+ "value": {
171
+ "type": [
172
+ "string",
173
+ "null",
174
+ "undefined"
175
+ ]
176
+ }
177
+ },
178
+ {
179
+ "name": "autocomplete",
180
+ "description": "Whether the value of the control can be automatically completed by the browser.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete",
181
+ "value": {
182
+ "type": [
183
+ "string",
184
+ "null",
185
+ "undefined"
186
+ ]
187
+ }
188
+ },
189
+ {
190
+ "name": "autocorrect",
191
+ "description": "This is a property supported by Safari that is used to control whether\nautocorrection should be enabled when the user is entering/editing the text.\nPossible values are:\non: Enable autocorrection.\noff: Disable autocorrection.",
192
+ "value": {
193
+ "type": [
194
+ "string",
195
+ "null",
196
+ "undefined"
197
+ ]
198
+ }
199
+ },
200
+ {
201
+ "name": "autocapitalize",
202
+ "description": "This is a property supported by Safari and Chrome that is used to control whether\nautocapitalization should be enabled when the user is entering/editing the text.\nPossible values are:\ncharacters: Characters capitalization.\nwords: Words capitalization.\nsentences: Sentences capitalization.\nnone: No capitalization.",
203
+ "value": {
204
+ "type": [
205
+ "string",
206
+ "null",
207
+ "undefined"
208
+ ]
209
+ }
210
+ },
211
+ {
212
+ "name": "has-controls",
213
+ "description": "Set to true to display value increase/decrease controls.",
214
+ "value": {
215
+ "type": [
216
+ "boolean",
217
+ "null",
218
+ "undefined"
219
+ ]
220
+ }
221
+ },
222
+ {
223
+ "name": "min",
224
+ "description": "The minimum value of the field.",
225
+ "value": {
226
+ "type": [
227
+ "number",
228
+ "null",
229
+ "undefined"
230
+ ]
231
+ }
232
+ },
233
+ {
234
+ "name": "max",
235
+ "description": "The maximum value of the field.",
236
+ "value": {
237
+ "type": [
238
+ "number",
239
+ "null",
240
+ "undefined"
241
+ ]
242
+ }
243
+ },
244
+ {
245
+ "name": "step",
246
+ "description": "Specifies the allowed number intervals of the field.",
247
+ "value": {
248
+ "type": [
249
+ "number"
250
+ ]
251
+ }
252
+ },
253
+ {
254
+ "name": "theme",
255
+ "description": "The theme variants to apply to the component.",
256
+ "value": {
257
+ "type": [
258
+ "string",
259
+ "null",
260
+ "undefined"
261
+ ]
262
+ }
263
+ }
264
+ ],
265
+ "js": {
266
+ "properties": [
267
+ {
268
+ "name": "disabled",
269
+ "description": "If true, the user cannot interact with this element.",
270
+ "value": {
271
+ "type": [
272
+ "boolean",
273
+ "null",
274
+ "undefined"
275
+ ]
276
+ }
277
+ },
278
+ {
279
+ "name": "autofocus",
280
+ "description": "Specify that this control should have input focus when the page loads.",
281
+ "value": {
282
+ "type": [
283
+ "boolean",
284
+ "null",
285
+ "undefined"
286
+ ]
287
+ }
288
+ },
289
+ {
290
+ "name": "label",
291
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
292
+ "value": {
293
+ "type": [
294
+ "string",
295
+ "null",
296
+ "undefined"
297
+ ]
298
+ }
299
+ },
300
+ {
301
+ "name": "invalid",
302
+ "description": "Set to true when the field is invalid.",
303
+ "value": {
304
+ "type": [
305
+ "boolean",
306
+ "null",
307
+ "undefined"
308
+ ]
309
+ }
310
+ },
311
+ {
312
+ "name": "required",
313
+ "description": "Specifies that the user must fill in a value.",
314
+ "value": {
315
+ "type": [
316
+ "boolean",
317
+ "null",
318
+ "undefined"
319
+ ]
320
+ }
321
+ },
322
+ {
323
+ "name": "errorMessage",
324
+ "description": "Error to show when the field is invalid.",
325
+ "value": {
326
+ "type": [
327
+ "string",
328
+ "null",
329
+ "undefined"
330
+ ]
331
+ }
332
+ },
333
+ {
334
+ "name": "helperText",
335
+ "description": "String used for the helper text.",
336
+ "value": {
337
+ "type": [
338
+ "string",
339
+ "null",
340
+ "undefined"
341
+ ]
342
+ }
343
+ },
344
+ {
345
+ "name": "value",
346
+ "description": "The value of the field.",
347
+ "value": {
348
+ "type": [
349
+ "string",
350
+ "null",
351
+ "undefined"
352
+ ]
353
+ }
354
+ },
355
+ {
356
+ "name": "allowedCharPattern",
357
+ "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
358
+ "value": {
359
+ "type": [
360
+ "string",
361
+ "null",
362
+ "undefined"
363
+ ]
364
+ }
365
+ },
366
+ {
367
+ "name": "autoselect",
368
+ "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
369
+ "value": {
370
+ "type": [
371
+ "boolean",
372
+ "null",
373
+ "undefined"
374
+ ]
375
+ }
376
+ },
377
+ {
378
+ "name": "clearButtonVisible",
379
+ "description": "Set to true to display the clear icon which clears the input.",
380
+ "value": {
381
+ "type": [
382
+ "boolean",
383
+ "null",
384
+ "undefined"
385
+ ]
386
+ }
387
+ },
388
+ {
389
+ "name": "name",
390
+ "description": "The name of this field.",
391
+ "value": {
392
+ "type": [
393
+ "string",
394
+ "null",
395
+ "undefined"
396
+ ]
397
+ }
398
+ },
399
+ {
400
+ "name": "placeholder",
401
+ "description": "A hint to the user of what can be entered in the field.",
402
+ "value": {
403
+ "type": [
404
+ "string",
405
+ "null",
406
+ "undefined"
407
+ ]
408
+ }
409
+ },
410
+ {
411
+ "name": "readonly",
412
+ "description": "When present, it specifies that the field is read-only.",
413
+ "value": {
414
+ "type": [
415
+ "boolean",
416
+ "null",
417
+ "undefined"
418
+ ]
419
+ }
420
+ },
421
+ {
422
+ "name": "title",
423
+ "description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
424
+ "value": {
425
+ "type": [
426
+ "string",
427
+ "null",
428
+ "undefined"
429
+ ]
430
+ }
431
+ },
432
+ {
433
+ "name": "autocomplete",
434
+ "description": "Whether the value of the control can be automatically completed by the browser.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete",
435
+ "value": {
436
+ "type": [
437
+ "string",
438
+ "null",
439
+ "undefined"
440
+ ]
441
+ }
442
+ },
443
+ {
444
+ "name": "autocorrect",
445
+ "description": "This is a property supported by Safari that is used to control whether\nautocorrection should be enabled when the user is entering/editing the text.\nPossible values are:\non: Enable autocorrection.\noff: Disable autocorrection.",
446
+ "value": {
447
+ "type": [
448
+ "string",
449
+ "null",
450
+ "undefined"
451
+ ]
452
+ }
453
+ },
454
+ {
455
+ "name": "autocapitalize",
456
+ "description": "This is a property supported by Safari and Chrome that is used to control whether\nautocapitalization should be enabled when the user is entering/editing the text.\nPossible values are:\ncharacters: Characters capitalization.\nwords: Words capitalization.\nsentences: Sentences capitalization.\nnone: No capitalization.",
457
+ "value": {
458
+ "type": [
459
+ "string",
460
+ "null",
461
+ "undefined"
462
+ ]
463
+ }
464
+ },
465
+ {
466
+ "name": "hasControls",
467
+ "description": "Set to true to display value increase/decrease controls.",
468
+ "value": {
469
+ "type": [
470
+ "boolean",
471
+ "null",
472
+ "undefined"
473
+ ]
474
+ }
475
+ },
476
+ {
477
+ "name": "min",
478
+ "description": "The minimum value of the field.",
479
+ "value": {
480
+ "type": [
481
+ "number",
482
+ "null",
483
+ "undefined"
484
+ ]
485
+ }
486
+ },
487
+ {
488
+ "name": "max",
489
+ "description": "The maximum value of the field.",
490
+ "value": {
491
+ "type": [
492
+ "number",
493
+ "null",
494
+ "undefined"
495
+ ]
496
+ }
497
+ },
498
+ {
499
+ "name": "step",
500
+ "description": "Specifies the allowed number intervals of the field.",
501
+ "value": {
502
+ "type": [
503
+ "number"
504
+ ]
505
+ }
506
+ }
507
+ ],
508
+ "events": [
509
+ {
510
+ "name": "validated",
511
+ "description": "Fired whenever the field is validated."
512
+ },
513
+ {
514
+ "name": "change",
515
+ "description": "Fired when the user commits a value change."
516
+ },
517
+ {
518
+ "name": "input",
519
+ "description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button."
520
+ }
521
+ ]
522
+ }
523
+ }
524
+ ]
525
+ }
526
+ }
527
+ }
package/web-types.lit.json ADDED
@@ -0,0 +1,202 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/number-field",
4
+ "version": "23.2.0-alpha5",
5
+ "description-markup": "markdown",
6
+ "framework": "lit",
7
+ "framework-config": {
8
+ "enable-when": {
9
+ "node-packages": [
10
+ "lit"
11
+ ]
12
+ }
13
+ },
14
+ "contributions": {
15
+ "html": {
16
+ "elements": [
17
+ {
18
+ "name": "vaadin-number-field",
19
+ "description": "`<vaadin-number-field>` is an input field web component that only accepts numeric input.\n\n```html\n<vaadin-number-field label=\"Balance\"></vaadin-number-field>\n```\n\n### Styling\n\n`<vaadin-number-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-alpha5/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n------------------|-------------------------\n`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.",
20
+ "extension": true,
21
+ "attributes": [
22
+ {
23
+ "name": "?disabled",
24
+ "description": "If true, the user cannot interact with this element.",
25
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ },
29
+ {
30
+ "name": "?autofocus",
31
+ "description": "Specify that this control should have input focus when the page loads.",
32
+ "value": {
33
+ "kind": "expression"
34
+ }
35
+ },
36
+ {
37
+ "name": "?invalid",
38
+ "description": "Set to true when the field is invalid.",
39
+ "value": {
40
+ "kind": "expression"
41
+ }
42
+ },
43
+ {
44
+ "name": "?required",
45
+ "description": "Specifies that the user must fill in a value.",
46
+ "value": {
47
+ "kind": "expression"
48
+ }
49
+ },
50
+ {
51
+ "name": "?autoselect",
52
+ "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
53
+ "value": {
54
+ "kind": "expression"
55
+ }
56
+ },
57
+ {
58
+ "name": "?clearButtonVisible",
59
+ "description": "Set to true to display the clear icon which clears the input.",
60
+ "value": {
61
+ "kind": "expression"
62
+ }
63
+ },
64
+ {
65
+ "name": "?readonly",
66
+ "description": "When present, it specifies that the field is read-only.",
67
+ "value": {
68
+ "kind": "expression"
69
+ }
70
+ },
71
+ {
72
+ "name": "?hasControls",
73
+ "description": "Set to true to display value increase/decrease controls.",
74
+ "value": {
75
+ "kind": "expression"
76
+ }
77
+ },
78
+ {
79
+ "name": ".label",
80
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
81
+ "value": {
82
+ "kind": "expression"
83
+ }
84
+ },
85
+ {
86
+ "name": ".errorMessage",
87
+ "description": "Error to show when the field is invalid.",
88
+ "value": {
89
+ "kind": "expression"
90
+ }
91
+ },
92
+ {
93
+ "name": ".helperText",
94
+ "description": "String used for the helper text.",
95
+ "value": {
96
+ "kind": "expression"
97
+ }
98
+ },
99
+ {
100
+ "name": ".value",
101
+ "description": "The value of the field.",
102
+ "value": {
103
+ "kind": "expression"
104
+ }
105
+ },
106
+ {
107
+ "name": ".allowedCharPattern",
108
+ "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
109
+ "value": {
110
+ "kind": "expression"
111
+ }
112
+ },
113
+ {
114
+ "name": ".name",
115
+ "description": "The name of this field.",
116
+ "value": {
117
+ "kind": "expression"
118
+ }
119
+ },
120
+ {
121
+ "name": ".placeholder",
122
+ "description": "A hint to the user of what can be entered in the field.",
123
+ "value": {
124
+ "kind": "expression"
125
+ }
126
+ },
127
+ {
128
+ "name": ".title",
129
+ "description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
130
+ "value": {
131
+ "kind": "expression"
132
+ }
133
+ },
134
+ {
135
+ "name": ".autocomplete",
136
+ "description": "Whether the value of the control can be automatically completed by the browser.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete",
137
+ "value": {
138
+ "kind": "expression"
139
+ }
140
+ },
141
+ {
142
+ "name": ".autocorrect",
143
+ "description": "This is a property supported by Safari that is used to control whether\nautocorrection should be enabled when the user is entering/editing the text.\nPossible values are:\non: Enable autocorrection.\noff: Disable autocorrection.",
144
+ "value": {
145
+ "kind": "expression"
146
+ }
147
+ },
148
+ {
149
+ "name": ".autocapitalize",
150
+ "description": "This is a property supported by Safari and Chrome that is used to control whether\nautocapitalization should be enabled when the user is entering/editing the text.\nPossible values are:\ncharacters: Characters capitalization.\nwords: Words capitalization.\nsentences: Sentences capitalization.\nnone: No capitalization.",
151
+ "value": {
152
+ "kind": "expression"
153
+ }
154
+ },
155
+ {
156
+ "name": ".min",
157
+ "description": "The minimum value of the field.",
158
+ "value": {
159
+ "kind": "expression"
160
+ }
161
+ },
162
+ {
163
+ "name": ".max",
164
+ "description": "The maximum value of the field.",
165
+ "value": {
166
+ "kind": "expression"
167
+ }
168
+ },
169
+ {
170
+ "name": ".step",
171
+ "description": "Specifies the allowed number intervals of the field.",
172
+ "value": {
173
+ "kind": "expression"
174
+ }
175
+ },
176
+ {
177
+ "name": "@validated",
178
+ "description": "Fired whenever the field is validated.",
179
+ "value": {
180
+ "kind": "expression"
181
+ }
182
+ },
183
+ {
184
+ "name": "@change",
185
+ "description": "Fired when the user commits a value change.",
186
+ "value": {
187
+ "kind": "expression"
188
+ }
189
+ },
190
+ {
191
+ "name": "@input",
192
+ "description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button.",
193
+ "value": {
194
+ "kind": "expression"
195
+ }
196
+ }
197
+ ]
198
+ }
199
+ ]
200
+ }
201
+ }
202
+ }