@vaadin/number-field 24.0.0-alpha1 → 24.0.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/number-field",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -35,12 +35,12 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/field-base": "24.0.0-alpha1",
-    "@vaadin/input-container": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/component-base": "24.0.0-alpha11",
+    "@vaadin/field-base": "24.0.0-alpha11",
+    "@vaadin/input-container": "24.0.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "641b3d96ceeb3e503a093682ebe686afdd8c3a68"
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -70,10 +70,10 @@ export interface NumberFieldEventMap extends HTMLElementEventMap, NumberFieldCus
  */
 declare class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   /**
-   * Set to true to display value increase/decrease controls.
-   * @attr {boolean} has-controls
+   * Set to true to show increase/decrease buttons.
+   * @attr {boolean} step-buttons-visible
    */
-  hasControls: boolean;
+  stepButtonsVisible: boolean;
 
   /**
    * The minimum value of the field.

package/src/vaadin-number-field.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * 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/src/vaadin-input-container.js';
@@ -100,7 +100,7 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
             part="decrease-button"
             on-click="_decreaseValue"
             on-touchend="_decreaseButtonTouchend"
-            hidden$="[[!hasControls]]"
+            hidden$="[[!stepButtonsVisible]]"
             aria-hidden="true"
             slot="prefix"
           ></div>
@@ -113,7 +113,7 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
             part="increase-button"
             on-click="_increaseValue"
             on-touchend="_increaseButtonTouchend"
-            hidden$="[[!hasControls]]"
+            hidden$="[[!stepButtonsVisible]]"
             aria-hidden="true"
             slot="suffix"
           ></div>
@@ -135,10 +135,10 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
   static get properties() {
     return {
       /**
-       * Set to true to display value increase/decrease controls.
-       * @attr {boolean} has-controls
+       * Set to true to show increase/decrease buttons.
+       * @attr {boolean} step-buttons-visible
        */
-      hasControls: {
+      stepButtonsVisible: {
         type: Boolean,
         value: false,
         reflectToAttribute: true,
@@ -205,7 +205,7 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
           direction: rtl;
         }
 
-        ${tag}[dir='rtl']:not([has-controls]) input[type="number"]::placeholder {
+        ${tag}[dir='rtl']:not([step-buttons-visible]) input[type="number"]::placeholder {
           text-align: left;
         }
       `,
@@ -241,17 +241,19 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
   }
 
   /**
-   * Override a method from `InputConstraintsMixin`
-   * to additionally check for bad user input.
+   * Override the method from `InputConstraintsMixin`
+   * to enforce HTML constraint validation even if
+   * the user didn't add any constraints explicitly:
+   * the field has to be regardless checked for bad input.
    *
    * @override
    */
   checkValidity() {
-    if (this.inputElement && this.inputElement.validity.badInput) {
-      return false;
+    if (this.inputElement) {
+      return this.inputElement.checkValidity();
     }
 
-    return super.checkValidity();
+    return !this.invalid;
   }
 
   /** @private */
@@ -429,6 +431,22 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
 
     super._onKeyDown(event);
   }
+
+  /**
+   * Native [type=number] inputs don't update their value
+   * when you are entering input that the browser is unable to parse
+   * e.g. "--5", hence we have to override this method from `InputMixin`
+   * so that, when value is empty, it would additionally check
+   * for bad input based on the native `validity.badInput` property.
+   *
+   * @param {InputEvent} event
+   * @protected
+   * @override
+   */
+  _setHasInputValue(event) {
+    const target = event.composedPath()[0];
+    this._hasInputValue = target.value.length > 0 || target.validity.badInput;
+  }
 }
 
 customElements.define(NumberField.is, NumberField);

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/vaadin-lumo-styles/sizing.js';
@@ -9,11 +9,7 @@ import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const numberField = css`
-  :host {
-    width: 8em;
-  }
-
-  :host([has-controls]:not([theme~='align-right'])) ::slotted(input) {
+  :host([step-buttons-visible]:not([theme~='align-right'])) ::slotted(input) {
     text-align: center;
   }
 
@@ -21,7 +17,7 @@ const numberField = css`
     opacity: 0.2;
   }
 
-  :host([has-controls]) [part='input-field'] {
+  :host([step-buttons-visible]) [part='input-field'] {
     padding: 0;
   }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { fieldButton } from '@vaadin/vaadin-material-styles/mixins/field-button.js';
@@ -8,11 +8,7 @@ import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-fi
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const numberField = css`
-  :host {
-    width: 8em;
-  }
-
-  :host([has-controls]) ::slotted(input) {
+  :host([step-buttons-visible]) ::slotted(input) {
     text-align: center;
   }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * 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';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/number-field",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "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.0.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/custom-theme/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.0.0-alpha11/#/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.",
           "attributes": [
             {
               "name": "disabled",
@@ -209,8 +209,8 @@
               }
             },
             {
-              "name": "has-controls",
-              "description": "Set to true to display value increase/decrease controls.",
+              "name": "step-buttons-visible",
+              "description": "Set to true to show increase/decrease buttons.",
               "value": {
                 "type": [
                   "boolean",
@@ -463,8 +463,8 @@
                 }
               },
               {
-                "name": "hasControls",
-                "description": "Set to true to display value increase/decrease controls.",
+                "name": "stepButtonsVisible",
+                "description": "Set to true to show increase/decrease buttons.",
                 "value": {
                   "type": [
                     "boolean",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/number-field",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "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.0.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/custom-theme/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.0.0-alpha11/#/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.",
           "extension": true,
           "attributes": [
             {
@@ -69,8 +69,8 @@
               }
             },
             {
-              "name": "?hasControls",
-              "description": "Set to true to display value increase/decrease controls.",
+              "name": "?stepButtonsVisible",
+              "description": "Set to true to show increase/decrease buttons.",
               "value": {
                 "kind": "expression"
               }