@vaadin/number-field 23.3.0-alpha5 → 23.3.0-alpha7

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 +8 -8
  2. package/src/vaadin-number-field.d.ts +8 -0
  3. package/src/vaadin-number-field.js +24 -2
  4. package/web-types.json +24 -2
  5. package/web-types.lit.json +9 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/number-field",
3
- "version": "23.3.0-alpha5",
3
+ "version": "23.3.0-alpha7",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,12 +35,12 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@polymer/polymer": "^3.0.0",
38
- "@vaadin/component-base": "23.3.0-alpha5",
39
- "@vaadin/field-base": "23.3.0-alpha5",
40
- "@vaadin/input-container": "23.3.0-alpha5",
41
- "@vaadin/vaadin-lumo-styles": "23.3.0-alpha5",
42
- "@vaadin/vaadin-material-styles": "23.3.0-alpha5",
43
- "@vaadin/vaadin-themable-mixin": "23.3.0-alpha5"
38
+ "@vaadin/component-base": "23.3.0-alpha7",
39
+ "@vaadin/field-base": "23.3.0-alpha7",
40
+ "@vaadin/input-container": "23.3.0-alpha7",
41
+ "@vaadin/vaadin-lumo-styles": "23.3.0-alpha7",
42
+ "@vaadin/vaadin-material-styles": "23.3.0-alpha7",
43
+ "@vaadin/vaadin-themable-mixin": "23.3.0-alpha7"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@esm-bundle/chai": "^4.3.4",
@@ -51,5 +51,5 @@
51
51
  "web-types.json",
52
52
  "web-types.lit.json"
53
53
  ],
54
- "gitHead": "0b6fdcf444683e97e3efb433d603e1274d5bcd66"
54
+ "gitHead": "db2561dc65b5770978e95f00fdca218591d449a0"
55
55
  }
package/src/vaadin-number-field.d.ts CHANGED
@@ -72,9 +72,17 @@ declare class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(HTM
72
72
  /**
73
73
  * Set to true to display value increase/decrease controls.
74
74
  * @attr {boolean} has-controls
75
+ * @deprecated since 23.3.
76
+ * Use [`stepButtonsVisible`](#/elements/vaadin-number-field#property-stepButtonsVisible) instead
75
77
  */
76
78
  hasControls: boolean;
77
79
 
80
+ /**
81
+ * Set to true to show increase/decrease buttons.
82
+ * @attr {boolean} step-buttons-visible
83
+ */
84
+ stepButtonsVisible: boolean;
85
+
78
86
  /**
79
87
  * The minimum value of the field.
80
88
  */
package/src/vaadin-number-field.js CHANGED
@@ -100,7 +100,7 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
100
100
  part="decrease-button"
101
101
  on-click="_decreaseValue"
102
102
  on-touchend="_decreaseButtonTouchend"
103
- hidden$="[[!hasControls]]"
103
+ hidden$="[[!_isStepButtonVisible(hasControls, stepButtonsVisible)]]"
104
104
  aria-hidden="true"
105
105
  slot="prefix"
106
106
  ></div>
@@ -113,7 +113,7 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
113
113
  part="increase-button"
114
114
  on-click="_increaseValue"
115
115
  on-touchend="_increaseButtonTouchend"
116
- hidden$="[[!hasControls]]"
116
+ hidden$="[[!_isStepButtonVisible(hasControls, stepButtonsVisible)]]"
117
117
  aria-hidden="true"
118
118
  slot="suffix"
119
119
  ></div>
@@ -137,6 +137,8 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
137
137
  /**
138
138
  * Set to true to display value increase/decrease controls.
139
139
  * @attr {boolean} has-controls
140
+ * @deprecated since 23.3.
141
+ * Use [`stepButtonsVisible`](#/elements/vaadin-number-field#property-stepButtonsVisible) instead
140
142
  */
141
143
  hasControls: {
142
144
  type: Boolean,
@@ -144,6 +146,16 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
144
146
  reflectToAttribute: true,
145
147
  },
146
148
 
149
+ /**
150
+ * Set to true to show increase/decrease buttons.
151
+ * @attr {boolean} step-buttons-visible
152
+ */
153
+ stepButtonsVisible: {
154
+ type: Boolean,
155
+ value: false,
156
+ reflectToAttribute: true,
157
+ },
158
+
147
159
  /**
148
160
  * The minimum value of the field.
149
161
  */
@@ -429,6 +441,16 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
429
441
 
430
442
  super._onKeyDown(event);
431
443
  }
444
+
445
+ /**
446
+ * Determines whether to hide the increase / decrease buttons based on the
447
+ * deprecated `hasControls` property, and the replacement `stepButtonsVisible`
448
+ * property
449
+ * @private
450
+ */
451
+ _isStepButtonVisible(hasControls, stepButtonsVisible) {
452
+ return hasControls || stepButtonsVisible;
453
+ }
432
454
  }
433
455
 
434
456
  customElements.define(NumberField.is, NumberField);
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/number-field",
4
- "version": "23.3.0-alpha5",
4
+ "version": "23.3.0-alpha7",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
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.3.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/styling/custom-theme/styling-components) documentation.",
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.3.0-alpha7/#/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/styling/custom-theme/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "disabled",
@@ -219,6 +219,17 @@
219
219
  ]
220
220
  }
221
221
  },
222
+ {
223
+ "name": "step-buttons-visible",
224
+ "description": "Set to true to show increase/decrease buttons.",
225
+ "value": {
226
+ "type": [
227
+ "boolean",
228
+ "null",
229
+ "undefined"
230
+ ]
231
+ }
232
+ },
222
233
  {
223
234
  "name": "min",
224
235
  "description": "The minimum value of the field.",
@@ -473,6 +484,17 @@
473
484
  ]
474
485
  }
475
486
  },
487
+ {
488
+ "name": "stepButtonsVisible",
489
+ "description": "Set to true to show increase/decrease buttons.",
490
+ "value": {
491
+ "type": [
492
+ "boolean",
493
+ "null",
494
+ "undefined"
495
+ ]
496
+ }
497
+ },
476
498
  {
477
499
  "name": "min",
478
500
  "description": "The minimum value of the field.",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/number-field",
4
- "version": "23.3.0-alpha5",
4
+ "version": "23.3.0-alpha7",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
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.3.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/styling/custom-theme/styling-components) documentation.",
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.3.0-alpha7/#/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/styling/custom-theme/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
@@ -75,6 +75,13 @@
75
75
  "kind": "expression"
76
76
  }
77
77
  },
78
+ {
79
+ "name": "?stepButtonsVisible",
80
+ "description": "Set to true to show increase/decrease buttons.",
81
+ "value": {
82
+ "kind": "expression"
83
+ }
84
+ },
78
85
  {
79
86
  "name": ".label",
80
87
  "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",