@vaadin/number-field 23.1.2 → 23.2.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/number-field",
-  "version": "23.1.2",
+  "version": "23.2.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,17 +33,17 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.1.2",
-    "@vaadin/field-base": "^23.1.2",
-    "@vaadin/input-container": "^23.1.2",
-    "@vaadin/vaadin-lumo-styles": "^23.1.2",
-    "@vaadin/vaadin-material-styles": "^23.1.2",
-    "@vaadin/vaadin-themable-mixin": "^23.1.2"
+    "@vaadin/component-base": "23.2.0-alpha3",
+    "@vaadin/field-base": "23.2.0-alpha3",
+    "@vaadin/input-container": "23.2.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "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-number-field.d.ts

@@ -25,10 +25,17 @@ export type NumberFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type NumberFieldValueChangedEvent = CustomEvent<{ value: string }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type NumberFieldValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface NumberFieldCustomEventMap {
   'invalid-changed': NumberFieldInvalidChangedEvent;
 
   'value-changed': NumberFieldValueChangedEvent;
+
+  validated: NumberFieldValidatedEvent;
 }
 
 export interface NumberFieldEventMap extends HTMLElementEventMap, NumberFieldCustomEventMap {
@@ -54,12 +61,13 @@ export interface NumberFieldEventMap extends HTMLElementEventMap, NumberFieldCus
  * `increase-button` | Increase ("plus") button
  * `decrease-button` | Decrease ("minus") button
  *
- * Note, the `input-prevented` state attribute is not supported by `<vaadin-number-field>`.
+ * Note, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.
  *
  * @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 NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
   /**

package/src/vaadin-number-field.js

@@ -34,7 +34,7 @@ registerStyles('vaadin-number-field', inputFieldShared, { moduleId: 'vaadin-numb
  * `increase-button` | Increase ("plus") button
  * `decrease-button` | Decrease ("minus") button
  *
- * Note, the `input-prevented` state attribute is not supported by `<vaadin-number-field>`.
+ * Note, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
@@ -42,6 +42,7 @@ registerStyles('vaadin-number-field', inputFieldShared, { moduleId: 'vaadin-numb
  * @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 HTMLElement
  * @mixes InputFieldMixin
@@ -212,17 +213,6 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
     return this.$.clearButton;
   }
 
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-
-    if (this.inputElement) {
-      this.inputElement.min = this.min;
-      this.inputElement.max = this.max;
-      this.__applyStep(this.step);
-    }
-  }
-
   /** @protected */
   ready() {
     super.ready();
@@ -235,6 +225,11 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
         this.ariaTarget = input;
       }),
     );
+
+    this.inputElement.min = this.min;
+    this.inputElement.max = this.max;
+    this.__applyStep(this.step);
+
     this.addController(new LabelledInputController(this.inputElement, this._labelController));
   }
 
@@ -265,7 +260,7 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
     if (!isNumUnset(min) || !isNumUnset(max)) {
       this.validate();
     } else if (!required) {
-      this.invalid = false;
+      this._setInvalid(false);
     }
   }