@vaadin/field-base - npm Package Compare versions

Comparing version 23.2.0-dev.8a7678b70 to 23.2.0-rc1

package.json

 {
   "name": "@vaadin/field-base",
-  "version": "23.2.0-dev.8a7678b70",
+  "version": "23.2.0-rc1",
   "publishConfig": {
@@ -35,3 +35,3 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-dev.8a7678b70",
+    "@vaadin/component-base": "23.2.0-rc1",
     "lit": "^2.0.0"
@@ -44,3 +44,3 @@ },
   },
-  "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
+  "gitHead": "e78a1f2fe6f42d78cefa3f48085b09a3033c9588"
 }

src/checked-mixin.d.ts

@@ -6,6 +6,6 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
 
@@ -17,7 +17,7 @@ /**
   base: T,
-): T &
-  Constructor<CheckedMixinClass> &
+): Constructor<CheckedMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
-  Constructor<InputMixinClass>;
+  Constructor<InputMixinClass> &
+  T;
 
@@ -24,0 +24,0 @@ export declare class CheckedMixinClass {

src/checked-mixin.js

@@ -8,2 +8,3 @@ /**
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
+import { isElementFocused } from '@vaadin/component-base/src/focus-utils.js';
 import { DelegateStateMixin } from './delegate-state-mixin.js';
@@ -43,2 +44,3 @@ import { InputMixin } from './input-mixin.js';
       /**
+       * @param {Event} event
        * @protected
@@ -48,3 +50,11 @@ * @override
       _onChange(event) {
-        this._toggleChecked(event.target.checked);
+        const input = event.target;
+
+        this._toggleChecked(input.checked);
+
+        // Clicking the checkbox or radio-button in Safari
+        // does not make it focused, so we do it manually.
+        if (!isElementFocused(input)) {
+          input.focus();
+        }
       }
@@ -51,0 +61,0 @@

src/delegate-focus-mixin.d.ts

@@ -6,6 +6,6 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
 
@@ -17,7 +17,7 @@ /**
   base: T,
-): T &
-  Constructor<DelegateFocusMixinClass> &
+): Constructor<DelegateFocusMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<FocusMixinClass> &
-  Constructor<TabindexMixinClass>;
+  Constructor<TabindexMixinClass> &
+  T;
 
@@ -24,0 +24,0 @@ export declare class DelegateFocusMixinClass {

src/delegate-state-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -14,3 +14,3 @@ /**
   base: T,
-): T & Constructor<DelegateStateMixinClass>;
+): Constructor<DelegateStateMixinClass> & T;
 
@@ -17,0 +17,0 @@ export declare class DelegateStateMixinClass {

src/error-controller.js

@@ -22,2 +22,3 @@ /**
       },
+      true,
     );
@@ -24,0 +25,0 @@ }

src/field-aria-controller.js

@@ -6,3 +6,3 @@ /**
  */
-import { addValueToAttribute, removeValueFromAttribute } from './utils.js';
+import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 
@@ -143,3 +143,3 @@ /**
 
-    if (!this.__isGroupField) {
+    if (['input', 'textarea'].includes(this.__target.localName)) {
       // Native <input> or <textarea>, required is enough
@@ -146,0 +146,0 @@ return;

src/field-mixin.d.ts

@@ -6,6 +6,6 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import { LabelMixinClass } from './label-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { LabelMixinClass } from './label-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
@@ -17,7 +17,7 @@ /**
   superclass: T,
-): T &
-  Constructor<ControllerMixinClass> &
+): Constructor<ControllerMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<LabelMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
@@ -24,0 +24,0 @@ export declare class FieldMixinClass {

src/field-mixin.js

@@ -167,3 +167,3 @@ /**
     /**
-     * @param {boolean} required
+     * @param {boolean} invalid
      * @protected
@@ -170,0 +170,0 @@ */

src/helper-controller.d.ts

 /**
  * @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/
@@ -5,0 +5,0 @@ */

src/helper-controller.js

 /**
  * @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/
@@ -14,3 +14,3 @@ */
     // Do not provide slot factory, as only create helper lazily.
-    super(host, 'helper');
+    super(host, 'helper', null, null, true);
   }
@@ -17,0 +17,0 @@

src/input-constraints-mixin.d.ts

@@ -6,7 +6,7 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
@@ -18,8 +18,8 @@ /**
   base: T,
-): T &
-  Constructor<DelegateStateMixinClass> &
+): Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
@@ -26,0 +26,0 @@ export declare class InputConstraintsMixinClass {

src/input-constraints-mixin.js

@@ -73,3 +73,3 @@ /**
         // to make it possible to tweak this behavior in classes that apply this mixin.
-        this._createMethodObserver(`_constraintsChanged(${this.constructor.constraints.join(', ')})`);
+        this._createMethodObserver(`_constraintsChanged(stateTarget, ${this.constructor.constraints.join(', ')})`);
       }
@@ -79,17 +79,23 @@
        * Override this method to implement custom validation constraints.
+       * @param {HTMLElement | undefined} stateTarget
        * @param {unknown[]} constraints
        * @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) {
+      _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;
         }
 
-        if (this._hasValidConstraints(constraints)) {
+        const hasConstraints = this._hasValidConstraints(constraints);
+        const isLastConstraintRemoved = this.__previousHasConstraints && !hasConstraints;
+
+        if ((this._hasValue || this.invalid) && hasConstraints) {
           this.validate();
-        } else {
-          this.invalid = false;
+        } else if (isLastConstraintRemoved) {
+          this._setInvalid(false);
         }
+
+        this.__previousHasConstraints = hasConstraints;
       }
@@ -96,0 +102,0 @@

src/input-control-mixin.d.ts

@@ -6,14 +6,14 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { FieldMixinClass } from './field-mixin.js';
-import { InputConstraintsMixinClass } from './input-constraints-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
-import { LabelMixinClass } from './label-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { FieldMixinClass } from './field-mixin.js';
+import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
+import type { LabelMixinClass } from './label-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
@@ -25,4 +25,3 @@ /**
   base: T,
-): T &
-  Constructor<ControllerMixinClass> &
+): Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
@@ -38,3 +37,4 @@ Constructor<DelegateStateMixinClass> &
   Constructor<LabelMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
@@ -41,0 +41,0 @@ export declare class InputControlMixinClass {

src/input-controller.js

@@ -32,4 +32,5 @@ /**
       },
+      true,
     );
   }
 }

src/input-field-mixin.d.ts

@@ -6,15 +6,15 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { FieldMixinClass } from './field-mixin.js';
-import { InputConstraintsMixinClass } from './input-constraints-mixin.js';
-import { InputControlMixinClass } from './input-control-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
-import { LabelMixinClass } from './label-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { FieldMixinClass } from './field-mixin.js';
+import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
+import type { InputControlMixinClass } from './input-control-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
+import type { LabelMixinClass } from './label-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
@@ -26,4 +26,3 @@ /**
   base: T,
-): T &
-  Constructor<ControllerMixinClass> &
+): Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
@@ -40,3 +39,4 @@ Constructor<DelegateStateMixinClass> &
   Constructor<LabelMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
@@ -58,3 +58,3 @@ export declare class InputFieldMixinClass {
    */
-  autocorrect: 'on' | 'off' | undefined;
+  autocorrect: 'off' | 'on' | undefined;
 
@@ -70,3 +70,3 @@ /**
    */
-  autocapitalize: 'on' | 'off' | 'none' | 'characters' | 'words' | 'sentences' | undefined;
+  autocapitalize: 'characters' | 'none' | 'off' | 'on' | 'sentences' | 'words' | undefined;
 }

src/input-field-mixin.js

@@ -88,11 +88,13 @@ /**
     /**
-     * Override an event listener from `DelegateFocusMixin`.
-     * @param {FocusEvent} event
+     * Override an event listener from `FocusMixin`.
+     * @param {boolean} focused
      * @protected
      * @override
      */
-    _onBlur(event) {
-      super._onBlur(event);
+    _setFocused(focused) {
+      super._setFocused(focused);
 
-      this.validate();
+      if (!focused) {
+        this.validate();
+      }
     }
@@ -116,11 +118,17 @@
     /**
-     * Override a method from `InputMixin` to validate the field
+     * Override an observer from `InputMixin` to validate the field
      * when a new value is set programmatically.
-     * @param {string} value
+     *
+     * @param {string | undefined} newValue
+     * @param {string | undefined} oldValue
      * @protected
      * @override
      */
-    _forwardInputValue(value) {
-      super._forwardInputValue(value);
+    _valueChanged(newValue, oldValue) {
+      super._valueChanged(newValue, oldValue);
 
+      if (oldValue === undefined) {
+        return;
+      }
+
       if (this.invalid) {
@@ -127,0 +135,0 @@ this.validate();

src/input-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -13,3 +13,3 @@ /**
  */
-export declare function InputMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<InputMixinClass>;
+export declare function InputMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<InputMixinClass> & T;
 
@@ -34,2 +34,8 @@ export declare class InputMixinClass {
   /**
+   * 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.
@@ -53,5 +59,5 @@ */
 
-  protected _toggleHasValue(value: boolean): void;
+  protected _toggleHasValue(hasValue: boolean): void;
 
   protected _valueChanged(value?: string, oldValue?: string): void;
 }

src/input-mixin.js

@@ -55,2 +55,12 @@ /**
           },
+
+          /**
+           * When true, the input element has a non-empty value entered by the user.
+           * @protected
+           */
+          _hasInputValue: {
+            type: Boolean,
+            value: false,
+            observer: '_hasInputValueChanged',
+          },
         };
@@ -62,3 +72,3 @@ }
 
-        this._boundOnInput = this._onInput.bind(this);
+        this._boundOnInput = this.__onInput.bind(this);
         this._boundOnChange = this._onChange.bind(this);
@@ -78,2 +88,3 @@ }
        * @param {!HTMLElement} input
+       * @protected
        */
@@ -88,2 +99,3 @@ _addInputListeners(input) {
        * @param {!HTMLElement} input
+       * @protected
        */
@@ -102,3 +114,2 @@ _removeInputListeners(input) {
        * @protected
-       * @override
        */
@@ -120,3 +131,7 @@ _forwardInputValue(value) {
 
-      /** @protected */
+      /**
+       * @param {HTMLElement | undefined} input
+       * @param {HTMLElement | undefined} oldInput
+       * @protected
+       */
       _inputElementChanged(input, oldInput) {
@@ -131,12 +146,42 @@ if (input) {
       /**
+       * Observer to notify about the change of private property.
+       *
+       * @private
+       */
+      _hasInputValueChanged(hasValue, oldHasValue) {
+        if (hasValue || oldHasValue) {
+          this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+        }
+      }
+
+      /**
+       * 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.
-       * Override this method with an actual implementation.
-       * @param {Event} _event
+       *
+       * @param {Event} event
        * @protected
-       * @override
        */
       _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;
@@ -150,3 +195,2 @@ }
        * @protected
-       * @override
        */
@@ -157,2 +201,3 @@ _onChange(_event) {}
        * Toggle the has-value attribute based on the value property.
+       *
        * @param {boolean} hasValue
@@ -170,6 +215,5 @@ * @protected
        * @protected
-       * @override
        */
       _valueChanged(newVal, oldVal) {
-        this._toggleHasValue(newVal !== '' && newVal != null);
+        this._toggleHasValue(this._hasValue);
 
@@ -189,3 +233,13 @@ // Setting initial value to empty string, do nothing.
       }
+
+      /**
+       * 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 !== '';
+      }
     },
 );

src/label-controller.js

@@ -26,2 +26,3 @@ /**
       },
+      true,
     );
@@ -28,0 +29,0 @@ }

src/label-mixin.d.ts

@@ -6,4 +6,4 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { LabelController } from './label-controller.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { LabelController } from './label-controller.js';
 
@@ -13,3 +13,3 @@ /**
  */
-export declare function LabelMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<LabelMixinClass>;
+export declare function LabelMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<LabelMixinClass> & T;
 
@@ -16,0 +16,0 @@ export declare class LabelMixinClass {

src/labelled-input-controller.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
@@ -9,0 +9,0 @@ /**

src/pattern-mixin.d.ts

@@ -6,8 +6,8 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { InputConstraintsMixinClass } from './input-constraints-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
@@ -19,4 +19,3 @@ /**
   base: T,
-): T &
-  Constructor<DelegateStateMixinClass> &
+): Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
@@ -26,3 +25,4 @@ Constructor<InputConstraintsMixinClass> &
   Constructor<PatternMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
@@ -29,0 +29,0 @@ export declare class PatternMixinClass {

src/pattern-mixin.js

@@ -67,2 +67,3 @@ /**
      * @protected
+     * @override
      */
@@ -69,0 +70,0 @@ _onInput(event) {

src/shadow-focus-mixin.d.ts

@@ -6,8 +6,8 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
-import { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
+import type { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
 
@@ -19,7 +19,7 @@ /**
   base: T,
-): T &
-  Constructor<DelegateFocusMixinClass> &
+): Constructor<DelegateFocusMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<FocusMixinClass> &
   Constructor<KeyboardMixinClass> &
-  Constructor<TabindexMixinClass>;
+  Constructor<TabindexMixinClass> &
+  T;

src/slot-styles-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -15,3 +15,3 @@ /**
   base: T,
-): T & Constructor<SlotStylesMixinClass>;
+): Constructor<SlotStylesMixinClass> & T;
 
@@ -18,0 +18,0 @@ export declare class SlotStylesMixinClass {

src/slot-target-controller.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
@@ -9,0 +9,0 @@ export class SlotTargetController implements ReactiveController {

src/styles/clear-button-styles.d.ts

@@ -6,4 +6,4 @@ /**
  */
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const clearButton: CSSResult;

src/styles/field-shared-styles.d.ts

@@ -6,4 +6,4 @@ /**
  */
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const fieldShared: CSSResult;

src/styles/input-field-container-styles.d.ts

@@ -6,4 +6,4 @@ /**
  */
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const inputFieldContainer: CSSResult;

src/styles/input-field-shared-styles.d.ts

@@ -6,4 +6,4 @@ /**
  */
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const inputFieldShared: CSSResult;

src/text-area-controller.js

@@ -34,4 +34,5 @@ /**
       },
+      true,
     );
   }
 }

src/validate-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -12,3 +12,3 @@ /**
  */
-export declare function ValidateMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ValidateMixinClass>;
+export declare function ValidateMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ValidateMixinClass> & T;
 
@@ -35,2 +35,10 @@ export declare class ValidateMixinClass {
   checkValidity(): boolean;
+
+  /**
+   * Fired whenever the field is validated.
+   *
+   * @event validated
+   * @param {Object} detail
+   * @param {boolean} detail.valid the result of the validation.
+   */
 }

src/validate-mixin.js

@@ -39,8 +39,13 @@ /**
       /**
-       * Returns true if field is valid, and sets `invalid` based on the field validity.
+       * Validates the field and sets the `invalid` property based on the result.
        *
+       * The method fires a `validated` event with the result of the validation.
+       *
        * @return {boolean} True if the value is valid.
        */
       validate() {
-        return !(this.invalid = !this.checkValidity());
+        const isValid = this.checkValidity();
+        this._setInvalid(!isValid);
+        this.dispatchEvent(new CustomEvent('validated', { detail: { valid: isValid } }));
+        return isValid;
       }
@@ -56,3 +61,32 @@
       }
+
+      /**
+       * @param {boolean} invalid
+       * @protected
+       */
+      _setInvalid(invalid) {
+        if (this._shouldSetInvalid(invalid)) {
+          this.invalid = invalid;
+        }
+      }
+
+      /**
+       * Override this method to define whether the given `invalid` state should be set.
+       *
+       * @param {boolean} _invalid
+       * @return {boolean}
+       * @protected
+       */
+      _shouldSetInvalid(_invalid) {
+        return true;
+      }
+
+      /**
+       * Fired whenever the field is validated.
+       *
+       * @event validated
+       * @param {Object} detail
+       * @param {boolean} detail.valid the result of the validation.
+       */
     },
 );

src/virtual-keyboard-controller.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
@@ -14,3 +14,3 @@ /**
 export class VirtualKeyboardController implements ReactiveController {
-  constructor(host: { inputElement?: HTMLElement; opened: boolean } & HTMLElement);
+  constructor(host: HTMLElement & { inputElement?: HTMLElement; opened: boolean });
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

117652

increased by1.95%

Lines of code

3263

increased by1.62%

Worsened metrics

Number of package files

57

decreased by-3.39%

Dependency changes

• + Added@vaadin/component-base@23.2.0-rc1(transitive)

• - Removed@vaadin/component-base@23.2.0-dev.8a7678b70(transitive)

• Updated@vaadin/component-base@23.2.0-rc1