@vaadin/field-base 25.2.0-alpha8 → 25.2.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "25.2.0-alpha8",
+  "version": "25.2.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -32,17 +32,17 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-alpha8",
-    "@vaadin/component-base": "25.2.0-alpha8",
+    "@vaadin/a11y-base": "25.2.0-beta1",
+    "@vaadin/component-base": "25.2.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.2.0-alpha8",
-    "@vaadin/input-container": "25.2.0-alpha8",
-    "@vaadin/test-runner-commands": "25.2.0-alpha8",
+    "@vaadin/chai-plugins": "25.2.0-beta1",
+    "@vaadin/input-container": "25.2.0-beta1",
+    "@vaadin/test-runner-commands": "25.2.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2b82e20cdfc605b1187e9a24ae42869e1500ab68"
+  "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
 }

package/src/checked-mixin.js

@@ -9,11 +9,6 @@ import { InputMixin } from './input-mixin.js';
 
 /**
  * A mixin to manage the checked state.
- *
- * @polymerMixin
- * @mixes DelegateStateMixin
- * @mixes DisabledMixin
- * @mixes InputMixin
  */
 export const CheckedMixin = (superclass) =>
   class CheckedMixinClass extends DelegateStateMixin(DisabledMixin(InputMixin(superclass))) {

package/src/clear-button-mixin.js

@@ -10,10 +10,6 @@ import { InputMixin } from './input-mixin.js';
 
 /**
  * A mixin that manages the clear button.
- *
- * @polymerMixin
- * @mixes InputMixin
- * @mixes KeyboardMixin
  */
 export const ClearButtonMixin = (superclass) =>
   class ClearButtonMixinClass extends InputMixin(KeyboardMixin(superclass)) {

package/src/error-controller.d.ts

@@ -9,6 +9,8 @@ import { SlotChildObserveController } from '@vaadin/component-base/src/slot-chil
  * A controller that manages the error message node content.
  */
 export class ErrorController extends SlotChildObserveController {
+  constructor(host: HTMLElement);
+
   /**
    * String used for the error message text content.
    */

package/src/field-mixin.js

@@ -11,10 +11,6 @@ import { ValidateMixin } from './validate-mixin.js';
 
 /**
  * A mixin to provide common field logic: label, error message and helper text.
- *
- * @polymerMixin
- * @mixes LabelMixin
- * @mixes ValidateMixin
  */
 export const FieldMixin = (superclass) =>
   class FieldMixinClass extends ValidateMixin(LabelMixin(superclass)) {
@@ -200,7 +196,7 @@ export const FieldMixin = (superclass) =>
         // Otherwise assistive technologies would announce the error, even if we hide it.
         if (invalid) {
           const node = this._errorNode;
-          this._fieldAriaController.setErrorId(node && node.id);
+          this._fieldAriaController.setErrorId(node?.id);
         } else {
           this._fieldAriaController.setErrorId(null);
         }

package/src/helper-controller.d.ts

@@ -9,6 +9,8 @@ import { SlotChildObserveController } from '@vaadin/component-base/src/slot-chil
  * A controller that manages the helper node content.
  */
 export class HelperController extends SlotChildObserveController {
+  constructor(host: HTMLElement);
+
   /**
    * String used for the helper text.
    */

package/src/input-constraints-mixin.js

@@ -10,122 +10,118 @@ import { ValidateMixin } from './validate-mixin.js';
 
 /**
  * A mixin to combine multiple input validation constraints.
- *
- * @polymerMixin
- * @mixes DelegateStateMixin
- * @mixes InputMixin
- * @mixes ValidateMixin
  */
-export const InputConstraintsMixin = dedupeMixin(
-  (superclass) =>
-    class InputConstraintsMixinClass extends DelegateStateMixin(ValidateMixin(InputMixin(superclass))) {
-      /**
-       * An array of attributes which participate in the input validation.
-       * Changing these attributes will cause the input to re-validate.
-       *
-       * IMPORTANT: The attributes should be properly delegated to the input element
-       * from the host using `delegateAttrs` getter (see `DelegateStateMixin`).
-       * The `required` attribute is already delegated.
-       */
-      static get constraints() {
-        return ['required'];
-      }
+const InputConstraintsMixinImplementation = (superclass) => {
+  return class InputConstraintsMixinClass extends DelegateStateMixin(ValidateMixin(InputMixin(superclass))) {
+    /**
+     * An array of attributes which participate in the input validation.
+     * Changing these attributes will cause the input to re-validate.
+     *
+     * IMPORTANT: The attributes should be properly delegated to the input element
+     * from the host using `delegateAttrs` getter (see `DelegateStateMixin`).
+     * The `required` attribute is already delegated.
+     */
+    static get constraints() {
+      return ['required'];
+    }
 
-      static get delegateAttrs() {
-        return [...super.delegateAttrs, 'required'];
-      }
+    static get delegateAttrs() {
+      return [...super.delegateAttrs, 'required'];
+    }
 
-      /** @protected */
-      ready() {
-        super.ready();
+    /** @protected */
+    ready() {
+      super.ready();
 
-        this._createConstraintsObserver();
-      }
+      this._createConstraintsObserver();
+    }
 
-      /**
-       * Returns true if the current input value satisfies all constraints (if any).
-       * @return {boolean}
-       */
-      checkValidity() {
-        if (this.inputElement && this._hasValidConstraints(this.constructor.constraints.map((c) => this[c]))) {
-          return this.inputElement.checkValidity();
-        }
-        return !this.invalid;
+    /**
+     * Returns true if the current input value satisfies all constraints (if any).
+     * @return {boolean}
+     */
+    checkValidity() {
+      if (this.inputElement && this._hasValidConstraints(this.constructor.constraints.map((c) => this[c]))) {
+        return this.inputElement.checkValidity();
       }
+      return !this.invalid;
+    }
 
-      /**
-       * Returns true if some of the provided set of constraints are valid.
-       * @param {Array} constraints
-       * @return {boolean}
-       * @protected
-       */
-      _hasValidConstraints(constraints) {
-        return constraints.some((c) => this.__isValidConstraint(c));
-      }
+    /**
+     * Returns true if some of the provided set of constraints are valid.
+     * @param {Array} constraints
+     * @return {boolean}
+     * @protected
+     */
+    _hasValidConstraints(constraints) {
+      return constraints.some((c) => this.__isValidConstraint(c));
+    }
 
-      /**
-       * Override this method to customize setting up constraints observer.
-       * @protected
-       */
-      _createConstraintsObserver() {
-        // This complex observer needs to be added dynamically instead of using `static get observers()`
-        // to make it possible to tweak this behavior in classes that apply this mixin.
-        this._createMethodObserver(`_constraintsChanged(stateTarget, ${this.constructor.constraints.join(', ')})`);
-      }
+    /**
+     * Override this method to customize setting up constraints observer.
+     * @protected
+     */
+    _createConstraintsObserver() {
+      // This complex observer needs to be added dynamically instead of using `static get observers()`
+      // to make it possible to tweak this behavior in classes that apply this mixin.
+      this._createMethodObserver(`_constraintsChanged(stateTarget, ${this.constructor.constraints.join(', ')})`);
+    }
 
-      /**
-       * Override this method to implement custom validation constraints.
-       * @param {HTMLElement | undefined} stateTarget
-       * @param {unknown[]} constraints
-       * @protected
-       */
-      _constraintsChanged(stateTarget, ...constraints) {
-        // The input element's validity cannot be determined until
-        // all the necessary constraint attributes aren't set on it.
-        if (!stateTarget) {
-          return;
-        }
-
-        const hasConstraints = this._hasValidConstraints(constraints);
-        const isLastConstraintRemoved = this.__previousHasConstraints && !hasConstraints;
-
-        if ((this._hasValue || this.invalid) && hasConstraints) {
-          this._requestValidation();
-        } else if (isLastConstraintRemoved && !this.manualValidation) {
-          this._setInvalid(false);
-        }
-
-        this.__previousHasConstraints = hasConstraints;
+    /**
+     * Override this method to implement custom validation constraints.
+     * @param {HTMLElement | undefined} stateTarget
+     * @param {unknown[]} constraints
+     * @protected
+     */
+    _constraintsChanged(stateTarget, ...constraints) {
+      // The input element's validity cannot be determined until
+      // all the necessary constraint attributes aren't set on it.
+      if (!stateTarget) {
+        return;
       }
 
-      /**
-       * Override an event listener inherited from `InputMixin`
-       * to capture native `change` event and make sure that
-       * a new one is dispatched after validation runs.
-       * @param {Event} event
-       * @protected
-       * @override
-       */
-      _onChange(event) {
-        event.stopPropagation();
+      const hasConstraints = this._hasValidConstraints(constraints);
+      const isLastConstraintRemoved = this.__previousHasConstraints && !hasConstraints;
 
+      if ((this._hasValue || this.invalid) && hasConstraints) {
         this._requestValidation();
-
-        this.dispatchEvent(
-          new CustomEvent('change', {
-            detail: {
-              sourceEvent: event,
-            },
-            bubbles: event.bubbles,
-            cancelable: event.cancelable,
-          }),
-        );
+      } else if (isLastConstraintRemoved && !this.manualValidation) {
+        this._setInvalid(false);
       }
 
-      /** @private */
-      __isValidConstraint(constraint) {
-        // 0 is valid for `minlength` and `maxlength`
-        return Boolean(constraint) || constraint === 0;
-      }
-    },
-);
+      this.__previousHasConstraints = hasConstraints;
+    }
+
+    /**
+     * Override an event listener inherited from `InputMixin`
+     * to capture native `change` event and make sure that
+     * a new one is dispatched after validation runs.
+     * @param {Event} event
+     * @protected
+     * @override
+     */
+    _onChange(event) {
+      event.stopPropagation();
+
+      this._requestValidation();
+
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          detail: {
+            sourceEvent: event,
+          },
+          bubbles: event.bubbles,
+          cancelable: event.cancelable,
+        }),
+      );
+    }
+
+    /** @private */
+    __isValidConstraint(constraint) {
+      // 0 is valid for `minlength` and `maxlength`
+      return Boolean(constraint) || constraint === 0;
+    }
+  };
+};
+
+export const InputConstraintsMixin = dedupeMixin(InputConstraintsMixinImplementation);

package/src/input-control-mixin.js

@@ -14,14 +14,6 @@ import { InputConstraintsMixin } from './input-constraints-mixin.js';
 
 /**
  * A mixin to provide shared logic for the editable form input controls.
- *
- * @polymerMixin
- * @mixes DelegateFocusMixin
- * @mixes FieldMixin
- * @mixes InputConstraintsMixin
- * @mixes KeyboardMixin
- * @mixes ClearButtonMixin
- * @mixes SlotStylesMixin
  */
 export const InputControlMixin = (superclass) =>
   class InputControlMixinClass extends SlotStylesMixin(
@@ -250,17 +242,4 @@ export const InputControlMixin = (superclass) =>
         }
       }
     }
-
-    /**
-     * Fired when the user commits a value change.
-     *
-     * @event change
-     */
-
-    /**
-     * Fired when the value is changed by the user: on every typing keystroke,
-     * and the value is cleared using the clear button.
-     *
-     * @event input
-     */
   };

package/src/input-controller.d.ts

@@ -8,4 +8,6 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 /**
  * A controller to create and initialize slotted `<input>` element.
  */
-export class InputController extends SlotController {}
+export class InputController extends SlotController {
+  constructor(host: HTMLElement, callback?: (node: HTMLInputElement) => void, options?: { uniqueIdPrefix?: string });
+}

package/src/input-field-mixin.js

@@ -7,9 +7,6 @@ import { InputControlMixin } from './input-control-mixin.js';
 
 /**
  * A mixin to provide logic for vaadin-text-field and related components.
- *
- * @polymerMixin
- * @mixes InputControlMixin
  */
 export const InputFieldMixin = (superclass) =>
   class InputFieldMixinClass extends InputControlMixin(superclass) {