@vaadin/number-field 24.3.0-alpha1 → 24.3.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/number-field",
-  "version": "24.3.0-alpha1",
+  "version": "24.3.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -38,23 +38,23 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.3.0-alpha1",
-    "@vaadin/component-base": "24.3.0-alpha1",
-    "@vaadin/field-base": "24.3.0-alpha1",
-    "@vaadin/input-container": "24.3.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.3.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha1",
-    "lit": "^2.0.0"
+    "@vaadin/a11y-base": "24.3.0-alpha10",
+    "@vaadin/component-base": "24.3.0-alpha10",
+    "@vaadin/field-base": "24.3.0-alpha10",
+    "@vaadin/input-container": "24.3.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha10",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.5.0",
+    "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
+  "gitHead": "0271523d93fe5df0425ff64206886614f3c6f401"
 }

package/src/vaadin-number-field-mixin.js

@@ -103,6 +103,15 @@ export const NumberFieldMixin = (superClass) =>
       return this.$.clearButton;
     }
 
+    /**
+     * Whether the input element's value is unparsable.
+     *
+     * @private
+     */
+    get __hasUnparsableValue() {
+      return this.inputElement.validity.badInput;
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -255,17 +264,13 @@ export const NumberFieldMixin = (superClass) =>
 
       const newValue = this._getIncrement(incr, value);
       if (!this.value || incr === 0 || this._incrementIsInsideTheLimits(incr, value)) {
-        this._setValue(newValue);
+        this.__keepCommittedValue = true;
+        this.value = this.inputElement.value = String(parseFloat(newValue));
+        this.__keepCommittedValue = false;
+        this.__commitValueChange();
       }
     }
 
-    /** @private */
-    _setValue(value) {
-      this.value = this.inputElement.value = String(parseFloat(value));
-      this.validate();
-      this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
-    }
-
     /** @private */
     _getIncrement(incr, currentValue) {
       let step = this.step || 1,
@@ -349,6 +354,11 @@ export const NumberFieldMixin = (superClass) =>
       }
 
       super._valueChanged(this.value, oldVal);
+
+      if (!this.__keepCommittedValue) {
+        this.__committedValue = this.value;
+        this.__committedUnparsableValueStatus = false;
+      }
     }
 
     /**
@@ -383,6 +393,113 @@ export const NumberFieldMixin = (superClass) =>
      */
     _setHasInputValue(event) {
       const target = event.composedPath()[0];
-      this._hasInputValue = target.value.length > 0 || target.validity.badInput;
+      this._hasInputValue = target.value.length > 0 || this.__hasUnparsableValue;
+    }
+
+    /**
+     * Override this method from `InputMixin` to prevent
+     * the value change caused by user input from being treated
+     * as initiated programmatically by the developer and therefore
+     * from getting silently committed by the value observer without
+     * any change event. The value change will be committed later
+     * on blur or Enter.
+     *
+     * @param {InputEvent} event
+     * @override
+     * @protected
+     */
+    _onInput(event) {
+      this.__keepCommittedValue = true;
+      super._onInput(event);
+      this.__keepCommittedValue = false;
+    }
+
+    /**
+     * Override this method from `InputControlMixin`
+     * to stop propagation of the native change event.
+     *
+     * @param {Event}
+     * @override
+     * @protected
+     */
+    _onChange(event) {
+      event.stopPropagation();
+    }
+
+    /**
+     * Override this method from `ClearButtonMixin`
+     * to properly commit the empty value since
+     * the change handler doesn't do that anymore.
+     *
+     * @param {MouseEvent} event
+     * @override
+     * @protected
+     */
+    _onClearAction(event) {
+      super._onClearAction(event);
+      this.__commitValueChange();
+    }
+
+    /**
+     * Override this method from `FocusMixin`
+     * to commit a possible pending value change on blur.
+     *
+     * @param {boolean} focused
+     * @override
+     * @protected
+     */
+    _setFocused(focused) {
+      super._setFocused(focused);
+
+      if (!focused) {
+        this.__commitValueChange();
+      }
+    }
+
+    /**
+     * Override this method from `KeyboardMixin`
+     * to commit a possible pending value change on Enter.
+     *
+     * @param {KeyboardEvent} event
+     * @override
+     * @protected
+     */
+    _onEnter(event) {
+      super._onEnter(event);
+      this.__commitValueChange();
+    }
+
+    /**
+     * Depending on the nature of the value change that has occurred since
+     * the last commit attempt, triggers validation and fires an event:
+     *
+     * Value change             | Event
+     * :------------------------|:------------------
+     * empty => parsable        | change
+     * empty => unparsable      | unparsable-change
+     * parsable => empty        | change
+     * parsable => parsable     | change
+     * parsable => unparsable   | change
+     * unparsable => empty      | unparsable-change
+     * unparsable => parsable   | change
+     * unparsable => unparsable | -
+     *
+     * Note, there is currently no way to detect unparsable => unparsable changes
+     * because the browser doesn't provide access to unparsable values of native
+     * [type=number] inputs.
+     *
+     * @private
+     */
+    __commitValueChange() {
+      if (this.__committedValue !== this.value) {
+        this.validate();
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      } else if (this.__committedUnparsableValueStatus !== this.__hasUnparsableValue) {
+        this.validate();
+        this.dispatchEvent(new CustomEvent('unparsable-change'));
+      }
+
+      this.__committedValue = this.value;
+      this.__committedUnparsableValueStatus = this.__hasUnparsableValue;
     }
   };

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

@@ -16,14 +16,14 @@ export type NumberFieldChangeEvent = Event & {
 };
 
 /**
- * Fired when the `invalid` property changes.
+ * Fired when the user commits an unparsable value change and there is no change event.
  */
-export type NumberFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>;
+export type NumberFieldUnparsableChangeEvent = CustomEvent;
 
 /**
- * Fired when the `dirty` property changes.
+ * Fired when the `invalid` property changes.
  */
-export type NumberFieldDirtyChangedEvent = CustomEvent<{ value: boolean }>;
+export type NumberFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>;
 
 /**
  * Fired when the `value` property changes.
@@ -36,9 +36,9 @@ export type NumberFieldValueChangedEvent = CustomEvent<{ value: string }>;
 export type NumberFieldValidatedEvent = CustomEvent<{ valid: boolean }>;
 
 export interface NumberFieldCustomEventMap {
-  'invalid-changed': NumberFieldInvalidChangedEvent;
+  'unparsable-change': NumberFieldUnparsableChangeEvent;
 
-  'dirty-changed': NumberFieldDirtyChangedEvent;
+  'invalid-changed': NumberFieldInvalidChangedEvent;
 
   'value-changed': NumberFieldValueChangedEvent;
 
@@ -70,10 +70,29 @@ export interface NumberFieldEventMap extends HTMLElementEventMap, NumberFieldCus
  *
  * Note, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.
  *
+ * ### Change events
+ *
+ * Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
+ * the component can fire either a `change` event or an `unparsable-change` event:
+ *
+ * Value change             | Event
+ * :------------------------|:------------------
+ * empty => parsable        | change
+ * empty => unparsable      | unparsable-change
+ * parsable => empty        | change
+ * parsable => parsable     | change
+ * parsable => unparsable   | change
+ * unparsable => empty      | unparsable-change
+ * unparsable => parsable   | change
+ * unparsable => unparsable | -
+ *
+ * Note, there is currently no way to detect unparsable => unparsable changes because the browser
+ * doesn't provide access to unparsable values of native [type=number] inputs.
+ *
  * @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 {Event} unparsable-change - Fired when the user commits an unparsable value change and there is no change event.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
- * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */

package/src/vaadin-number-field.js

@@ -40,8 +40,28 @@ registerStyles('vaadin-number-field', [inputFieldShared, numberFieldStyles], {
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * ### Change events
+ *
+ * Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
+ * the component can fire either a `change` event or an `unparsable-change` event:
+ *
+ * Value change             | Event
+ * :------------------------|:------------------
+ * empty => parsable        | change
+ * empty => unparsable      | unparsable-change
+ * parsable => empty        | change
+ * parsable => parsable     | change
+ * parsable => unparsable   | change
+ * unparsable => empty      | unparsable-change
+ * unparsable => parsable   | change
+ * unparsable => unparsable | -
+ *
+ * Note, there is currently no way to detect unparsable => unparsable changes because the browser
+ * doesn't provide access to unparsable values of native [type=number] inputs.
+ *
  * @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 {Event} unparsable-change - Fired when the user commits an unparsable value change and there is no change event.
  * @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.

package/theme/lumo/vaadin-number-field-styles.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import { fieldButton } from '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
 import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';

package/theme/lumo/vaadin-number-field.js

@@ -3,6 +3,5 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/input-container/theme/lumo/vaadin-input-container.js';
 import './vaadin-number-field-styles.js';
 import '../../src/vaadin-number-field.js';

package/theme/material/vaadin-number-field-styles.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import '@vaadin/input-container/theme/material/vaadin-input-container-styles.js';
 import { fieldButton } from '@vaadin/vaadin-material-styles/mixins/field-button.js';
 import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

package/theme/material/vaadin-number-field.js

@@ -3,6 +3,5 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/input-container/theme/material/vaadin-input-container.js';
 import './vaadin-number-field-styles.js';
 import '../../src/vaadin-number-field.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/number-field",
-  "version": "24.3.0-alpha1",
+  "version": "24.3.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-number-field",
-          "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/24.3.0-alpha1/#/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/styling-components) documentation.",
+          "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/24.3.0-alpha10/#/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/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
           "attributes": [
             {
               "name": "disabled",
@@ -120,17 +120,6 @@
                 ]
               }
             },
-            {
-              "name": "dirty",
-              "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
-              "value": {
-                "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
             {
               "name": "clear-button-visible",
               "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
@@ -407,17 +396,6 @@
                   ]
                 }
               },
-              {
-                "name": "dirty",
-                "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
-                "value": {
-                  "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
               {
                 "name": "clearButtonVisible",
                 "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
@@ -591,10 +569,6 @@
               {
                 "name": "value-changed",
                 "description": "Fired when the `value` property changes."
-              },
-              {
-                "name": "dirty-changed",
-                "description": "Fired when the `dirty` property changes."
               }
             ]
           }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/number-field",
-  "version": "24.3.0-alpha1",
+  "version": "24.3.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-number-field",
-          "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/24.3.0-alpha1/#/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/styling-components) documentation.",
+          "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/24.3.0-alpha10/#/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/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
           "extension": true,
           "attributes": [
             {
@@ -47,13 +47,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": "?dirty",
-              "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": "?clearButtonVisible",
               "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
@@ -228,13 +221,6 @@
               "value": {
                 "kind": "expression"
               }
-            },
-            {
-              "name": "@dirty-changed",
-              "description": "Fired when the `dirty` property changes.",
-              "value": {
-                "kind": "expression"
-              }
             }
           ]
         }