@vaadin/field-base 23.2.0-alpha6 → 23.2.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.2.0-alpha6",
+  "version": "23.2.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-alpha6",
+    "@vaadin/component-base": "23.2.0-beta3",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "61f1fb56953434e97d34a8819640064301dd3d8a"
+  "gitHead": "3389e7d2dd4c94c6354817d4dc8c8d2db48c7137"
 }

package/src/field-aria-controller.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { addValueToAttribute, removeValueFromAttribute } from './utils.js';
+import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 
 /**
  * A controller for managing ARIA attributes for a field element:

package/src/helper-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';

package/src/helper-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';

package/src/input-constraints-mixin.js

@@ -79,9 +79,10 @@ export const InputConstraintsMixin = dedupingMixin(
        * @protected
        */
       _constraintsChanged(...constraints) {
-        // Prevent marking field as invalid when setting required state
-        // or any other constraint before a user has entered the value.
-        if (!this.invalid) {
+        // Validate the field on constraint change only if it has a value.
+        // The exception is the case when the field is invalid. In that case,
+        // let the method reset `invalid` when the last constraint is removed.
+        if (!this.invalid && !this._hasValue) {
           return;
         }
 

package/src/input-mixin.d.ts

@@ -28,6 +28,12 @@ export declare class InputMixinClass {
    */
   value: string;
 
+  /**
+   * Indicates whether the value is different from the default one.
+   * Override if the `value` property has a type other than `string`.
+   */
+  protected readonly _hasValue: boolean;
+
   /**
    * Clear the value of the field.
    */
@@ -47,7 +53,7 @@ export declare class InputMixinClass {
 
   protected _setInputElement(input: HTMLElement): void;
 
-  protected _toggleHasValue(value: boolean): void;
+  protected _toggleHasValue(hasValue: boolean): void;
 
   protected _valueChanged(value?: string, oldValue?: string): void;
 }

package/src/input-mixin.js

@@ -68,8 +68,8 @@ export const InputMixin = dedupingMixin(
       constructor() {
         super();
 
-        this._boundOnInput = this._onInput.bind(this);
-        this._boundOnChange = this.__onChange.bind(this);
+        this._boundOnInput = this.__onInput.bind(this);
+        this._boundOnChange = this._onChange.bind(this);
       }
 
       /**
@@ -147,6 +147,22 @@ export const InputMixin = dedupingMixin(
         }
       }
 
+      /**
+       * An input event listener used to update `_hasInputValue` property.
+       * Do not override this method.
+       *
+       * @param {Event} event
+       * @private
+       */
+      __onInput(event) {
+        // In the case a custom web component is passed as `inputElement`,
+        // the actual native input element, on which the event occurred,
+        // can be inside shadow trees.
+        const target = event.composedPath()[0];
+        this._hasInputValue = target.value.length > 0;
+        this._onInput(event);
+      }
+
       /**
        * An input event listener used to update the field value.
        *
@@ -154,9 +170,13 @@ export const InputMixin = dedupingMixin(
        * @protected
        */
       _onInput(event) {
+        // In the case a custom web component is passed as `inputElement`,
+        // the actual native input element, on which the event occurred,
+        // can be inside shadow trees.
+        const target = event.composedPath()[0];
         // Ignore fake input events e.g. used by clear button.
         this.__userInput = event.isTrusted;
-        this.value = event.target.value;
+        this.value = target.value;
         this.__userInput = false;
       }
 
@@ -168,20 +188,9 @@ export const InputMixin = dedupingMixin(
        */
       _onChange(_event) {}
 
-      /**
-       * A change event listener used to update `_hasInputValue` property.
-       * Do not override this method.
-       *
-       * @param {Event} event
-       * @private
-       */
-      __onChange(event) {
-        this._hasInputValue = event.target.value.length > 0;
-        this._onChange(event);
-      }
-
       /**
        * Toggle the has-value attribute based on the value property.
+       *
        * @param {boolean} hasValue
        * @protected
        */
@@ -196,7 +205,7 @@ export const InputMixin = dedupingMixin(
        * @protected
        */
       _valueChanged(newVal, oldVal) {
-        this._toggleHasValue(newVal !== '' && newVal != null);
+        this._toggleHasValue(this._hasValue);
 
         // Setting initial value to empty string, do nothing.
         if (newVal === '' && oldVal === undefined) {
@@ -211,5 +220,15 @@ export const InputMixin = dedupingMixin(
         // Setting a value programmatically, sync it to input element.
         this._forwardInputValue(newVal);
       }
+
+      /**
+       * Indicates whether the value is different from the default one.
+       * Override if the `value` property has a type other than `string`.
+       *
+       * @protected
+       */
+      get _hasValue() {
+        return this.value != null && this.value !== '';
+      }
     },
 );

package/src/utils.d.ts

@@ -1,16 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * Adds a value to an attribute containing space-delimited values.
- */
-export declare function addValueToAttribute(element: HTMLElement, attr: string, value: string): void;
-
-/**
- * Removes a value from an attribute containing space-delimited values.
- * If the value is the last one, the whole attribute is removed.
- */
-export declare function removeValueFromAttribute(element: HTMLElement, attr: string, value: string): void;

package/src/utils.js

@@ -1,56 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @param {string} value
- * @return {Set<string>}
- */
-function deserializeAttributeValue(value) {
-  if (!value) {
-    return new Set();
-  }
-
-  return new Set(value.split(' '));
-}
-
-/**
- * @param {Set<string>} values
- * @return {string}
- */
-function serializeAttributeValue(values) {
-  return [...values].join(' ');
-}
-
-/**
- * Adds a value to an attribute containing space-delimited values.
- *
- * @param {HTMLElement} element
- * @param {string} attr
- * @param {string} value
- */
-export function addValueToAttribute(element, attr, value) {
-  const values = deserializeAttributeValue(element.getAttribute(attr));
-  values.add(value);
-  element.setAttribute(attr, serializeAttributeValue(values));
-}
-
-/**
- * Removes a value from an attribute containing space-delimited values.
- * If the value is the last one, the whole attribute is removed.
- *
- * @param {HTMLElement} element
- * @param {string} attr
- * @param {string} value
- */
-export function removeValueFromAttribute(element, attr, value) {
-  const values = deserializeAttributeValue(element.getAttribute(attr));
-  values.delete(value);
-  if (values.size === 0) {
-    element.removeAttribute(attr);
-    return;
-  }
-  element.setAttribute(attr, serializeAttributeValue(values));
-}