@vaadin/number-field 23.2.0-dev.8a7678b70 → 23.2.0-rc1

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 +32 -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-dev.8a7678b70",
3
+ "version": "23.2.0-rc1",
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-dev.8a7678b70",
37
- "@vaadin/field-base": "23.2.0-dev.8a7678b70",
38
- "@vaadin/input-container": "23.2.0-dev.8a7678b70",
39
- "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
40
- "@vaadin/vaadin-material-styles": "23.2.0-dev.8a7678b70",
41
- "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70"
38
+ "@vaadin/component-base": "23.2.0-rc1",
39
+ "@vaadin/field-base": "23.2.0-rc1",
40
+ "@vaadin/input-container": "23.2.0-rc1",
41
+ "@vaadin/vaadin-lumo-styles": "23.2.0-rc1",
42
+ "@vaadin/vaadin-material-styles": "23.2.0-rc1",
43
+ "@vaadin/vaadin-themable-mixin": "23.2.0-rc1"
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": "85b403f96d8282f262322b56c0ff4289f843d02a"
50
+ "web-types": [
51
+ "web-types.json",
52
+ "web-types.lit.json"
53
+ ],
54
+ "gitHead": "e78a1f2fe6f42d78cefa3f48085b09a3033c9588"
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,13 +230,23 @@ 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
 
236
+ /**
237
+ * Override a method from `InputConstraintsMixin`
238
+ * to additionally check for bad user input.
239
+ *
240
+ * @override
241
+ */
242
+ checkValidity() {
243
+ if (this.inputElement && this.inputElement.validity.badInput) {
244
+ return false;
245
+ }
246
+
247
+ return super.checkValidity();
248
+ }
249
+
235
250
  /** @private */
236
251
  _decreaseButtonTouchend(e) {
237
252
  // Cancel the following click and focus events
@@ -246,23 +261,6 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
246
261
  this._increaseValue();
247
262
  }
248
263
 
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
264
  /** @private */
267
265
  _decreaseValue() {
268
266
  this._incrementValue(-1);
@@ -279,6 +277,7 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
279
277
  return;
280
278
  }
281
279
 
280
+ const step = this.step || 1;
282
281
  let value = parseFloat(this.value);
283
282
 
284
283
  if (!this.value) {
@@ -297,11 +296,11 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
297
296
  value = this.max;
298
297
  if (incr < 0) {
299
298
  incr = 0;
300
- } else if (this._getIncrement(1, value - this.step) > this.max) {
301
- value -= 2 * this.step;
299
+ } else if (this._getIncrement(1, value - step) > this.max) {
300
+ value -= 2 * step;
302
301
  // FIXME(yuriy): find a proper solution to make correct step back
303
302
  } else {
304
- value -= this.step;
303
+ value -= step;
305
304
  }
306
305
  }
307
306
  } else if (value < this.min) {
@@ -377,42 +376,14 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
377
376
  return !this.value || (!this.disabled && this._incrementIsInsideTheLimits(incr, value));
378
377
  }
379
378
 
380
- /** @private */
381
- __applyStep(step) {
382
- if (this.inputElement) {
383
- this.inputElement.step = this.__validateByStep ? step : 'any';
384
- }
385
- }
386
-
387
379
  /**
388
- * @param {number} newVal
389
- * @param {number | undefined} oldVal
380
+ * @param {number} step
381
+ * @param {HTMLElement | undefined} inputElement
390
382
  * @protected
391
383
  */
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;
384
+ _stepChanged(step, inputElement) {
385
+ if (inputElement) {
386
+ inputElement.step = step || 'any';
416
387
  }
417
388
  }
418
389
 
@@ -451,20 +422,6 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
451
422
 
452
423
  super._onKeyDown(event);
453
424
  }
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
425
  }
469
426
 
470
427
  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-rc1",
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-rc1/#/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-rc1",
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-rc1/#/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
+ }