@vaadin/integer-field 23.1.2 → 23.2.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/integer-field",
-  "version": "23.1.2",
+  "version": "23.2.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,14 +33,14 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/number-field": "^23.1.2",
-    "@vaadin/vaadin-lumo-styles": "^23.1.2",
-    "@vaadin/vaadin-material-styles": "^23.1.2"
+    "@vaadin/number-field": "23.2.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "6fb205c6e9a761feadfb779dd5d7af96d3102e56"
+  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
 }

package/src/vaadin-integer-field.d.ts

@@ -22,10 +22,17 @@ export type IntegerFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type IntegerFieldValueChangedEvent = CustomEvent<{ value: string }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type IntegerFieldValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface IntegerFieldCustomEventMap {
   'invalid-changed': IntegerFieldInvalidChangedEvent;
 
   'value-changed': IntegerFieldValueChangedEvent;
+
+  validated: IntegerFieldValidatedEvent;
 }
 
 export interface IntegerFieldEventMap extends HTMLElementEventMap, IntegerFieldCustomEventMap {
@@ -51,14 +58,13 @@ export interface IntegerFieldEventMap extends HTMLElementEventMap, IntegerFieldC
  * `increase-button` | Increase ("plus") button
  * `decrease-button` | Decrease ("minus") button
  *
- * Note, the `input-prevented` state attribute is not supported by `<vaadin-integer-field>`.
- *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class IntegerField extends NumberField {
   addEventListener<K extends keyof IntegerFieldEventMap>(

package/src/vaadin-integer-field.js

@@ -24,14 +24,13 @@ import { NumberField } from '@vaadin/number-field/src/vaadin-number-field.js';
  * `increase-button` | Increase ("plus") button
  * `decrease-button` | Decrease ("minus") button
  *
- * Note, the `input-prevented` state attribute is not supported by `<vaadin-integer-field>`.
- *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends NumberField
  */
@@ -40,23 +39,10 @@ export class IntegerField extends NumberField {
     return 'vaadin-integer-field';
   }
 
-  static get properties() {
-    return {
-      /**
-       * A pattern matched against individual characters the user inputs.
-       * When set, the field will prevent:
-       * - `keyDown` events if the entered key doesn't match `/^_enabledCharPattern$/`
-       * - `paste` events if the pasted text doesn't match `/^_enabledCharPattern*$/`
-       * - `drop` events if the dropped text doesn't match `/^_enabledCharPattern*$/`
-       *
-       * For example, to enable entering only numbers and minus signs,
-       * `_enabledCharPattern = "[\\d-]"`
-       * @protected
-       */
-      _enabledCharPattern: {
-        value: '[-+\\d]',
-      },
-    };
+  constructor() {
+    super();
+
+    this.allowedCharPattern = '[-+\\d]';
   }
 
   /**