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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.2.0-alpha3",
+  "version": "23.2.0-alpha6",
   "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-alpha3",
+    "@vaadin/component-base": "23.2.0-alpha6",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
+  "gitHead": "61f1fb56953434e97d34a8819640064301dd3d8a"
 }

package/src/checked-mixin.d.ts

@@ -13,11 +13,11 @@ import type { InputMixinClass } from './input-mixin.js';
  */
 export declare function CheckedMixin<T extends Constructor<object>>(
   base: T,
-): T &
-  Constructor<CheckedMixinClass> &
+): Constructor<CheckedMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
-  Constructor<InputMixinClass>;
+  Constructor<InputMixinClass> &
+  T;
 
 export declare class CheckedMixinClass {
   /**

package/src/checked-mixin.js

@@ -5,6 +5,7 @@
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
 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';
 import { InputMixin } from './input-mixin.js';
 
@@ -39,11 +40,20 @@ export const CheckedMixin = dedupingMixin(
       }
 
       /**
+       * @param {Event} event
        * @protected
        * @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();
+        }
       }
 
       /** @protected */

package/src/delegate-focus-mixin.d.ts

@@ -13,11 +13,11 @@ import type { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mix
  */
 export declare function DelegateFocusMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<DelegateFocusMixinClass> &
+): Constructor<DelegateFocusMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<FocusMixinClass> &
-  Constructor<TabindexMixinClass>;
+  Constructor<TabindexMixinClass> &
+  T;
 
 export declare class DelegateFocusMixinClass {
   /**

package/src/delegate-state-mixin.d.ts

@@ -10,7 +10,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
  */
 export declare function DelegateStateMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<DelegateStateMixinClass>;
+): Constructor<DelegateStateMixinClass> & T;
 
 export declare class DelegateStateMixinClass {
   /**

package/src/field-aria-controller.js

@@ -139,7 +139,7 @@ export class FieldAriaController {
       return;
     }
 
-    if (!this.__isGroupField) {
+    if (['input', 'textarea'].includes(this.__target.localName)) {
       // Native <input> or <textarea>, required is enough
       return;
     }

package/src/field-mixin.d.ts

@@ -13,11 +13,11 @@ import type { ValidateMixinClass } from './validate-mixin.js';
  */
 export declare function FieldMixin<T extends Constructor<HTMLElement>>(
   superclass: T,
-): T &
-  Constructor<ControllerMixinClass> &
+): Constructor<ControllerMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<LabelMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class FieldMixinClass {
   /**

package/src/field-mixin.js

@@ -164,7 +164,7 @@ export const FieldMixin = (superclass) =>
     }
 
     /**
-     * @param {boolean} required
+     * @param {boolean} invalid
      * @protected
      */
     _invalidChanged(invalid) {

package/src/input-constraints-mixin.d.ts

@@ -14,12 +14,12 @@ import type { ValidateMixinClass } from './validate-mixin.js';
  */
 export declare function InputConstraintsMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<DelegateStateMixinClass> &
+): Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class InputConstraintsMixinClass {
   /**

package/src/input-control-mixin.d.ts

@@ -21,8 +21,7 @@ import type { ValidateMixinClass } from './validate-mixin.js';
  */
 export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<ControllerMixinClass> &
+): Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
@@ -33,7 +32,8 @@ export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class InputControlMixinClass {
   /**

package/src/input-field-mixin.d.ts

@@ -22,8 +22,7 @@ import type { ValidateMixinClass } from './validate-mixin.js';
  */
 export declare function InputFieldMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<ControllerMixinClass> &
+): Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
@@ -35,7 +34,8 @@ export declare function InputFieldMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class InputFieldMixinClass {
   /**
@@ -52,7 +52,7 @@ export declare class InputFieldMixinClass {
    * on: Enable autocorrection.
    * off: Disable autocorrection.
    */
-  autocorrect: 'on' | 'off' | undefined;
+  autocorrect: 'off' | 'on' | undefined;
 
   /**
    * This is a property supported by Safari and Chrome that is used to control whether
@@ -63,5 +63,5 @@ export declare class InputFieldMixinClass {
    * sentences: Sentences capitalization.
    * none: No capitalization.
    */
-  autocapitalize: 'on' | 'off' | 'none' | 'characters' | 'words' | 'sentences' | undefined;
+  autocapitalize: 'characters' | 'none' | 'off' | 'on' | 'sentences' | 'words' | undefined;
 }

package/src/input-field-mixin.js

@@ -85,15 +85,17 @@ export const InputFieldMixin = (superclass) =>
     }
 
     /**
-     * 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();
+      }
     }
 
     /**
@@ -112,14 +114,20 @@ export const InputFieldMixin = (superclass) =>
     }
 
     /**
-     * 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) {
         this.validate();

package/src/input-mixin.d.ts

@@ -9,7 +9,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
  * A mixin to store the reference to an input element
  * and add input and change event listeners to it.
  */
-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;
 
 export declare class InputMixinClass {
   /**

package/src/input-mixin.js

@@ -52,6 +52,16 @@ export const InputMixin = dedupingMixin(
             observer: '_valueChanged',
             notify: true,
           },
+
+          /**
+           * When true, the input element has a non-empty value entered by the user.
+           * @protected
+           */
+          _hasInputValue: {
+            type: Boolean,
+            value: false,
+            observer: '_hasInputValueChanged',
+          },
         };
       }
 
@@ -59,7 +69,7 @@ export const InputMixin = dedupingMixin(
         super();
 
         this._boundOnInput = this._onInput.bind(this);
-        this._boundOnChange = this._onChange.bind(this);
+        this._boundOnChange = this.__onChange.bind(this);
       }
 
       /**
@@ -73,6 +83,7 @@ export const InputMixin = dedupingMixin(
        * Add event listeners to the input element instance.
        * Override this method to add custom listeners.
        * @param {!HTMLElement} input
+       * @protected
        */
       _addInputListeners(input) {
         input.addEventListener('input', this._boundOnInput);
@@ -82,6 +93,7 @@ export const InputMixin = dedupingMixin(
       /**
        * Remove event listeners from the input element instance.
        * @param {!HTMLElement} input
+       * @protected
        */
       _removeInputListeners(input) {
         input.removeEventListener('input', this._boundOnInput);
@@ -95,7 +107,6 @@ export const InputMixin = dedupingMixin(
        * for example to skip this in certain conditions.
        * @param {string} value
        * @protected
-       * @override
        */
       _forwardInputValue(value) {
         // Value might be set before an input element is initialized.
@@ -112,7 +123,11 @@ export const InputMixin = dedupingMixin(
         }
       }
 
-      /** @protected */
+      /**
+       * @param {HTMLElement | undefined} input
+       * @param {HTMLElement | undefined} oldInput
+       * @protected
+       */
       _inputElementChanged(input, oldInput) {
         if (input) {
           this._addInputListeners(input);
@@ -121,12 +136,22 @@ export const InputMixin = dedupingMixin(
         }
       }
 
+      /**
+       * 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 the field value.
-       * Override this method with an actual implementation.
-       * @param {Event} _event
+       *
+       * @param {Event} event
        * @protected
-       * @override
        */
       _onInput(event) {
         // Ignore fake input events e.g. used by clear button.
@@ -140,10 +165,21 @@ export const InputMixin = dedupingMixin(
        * Override this method with an actual implementation.
        * @param {Event} _event
        * @protected
-       * @override
        */
       _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
@@ -158,7 +194,6 @@ export const InputMixin = dedupingMixin(
        * @param {string | undefined} newVal
        * @param {string | undefined} oldVal
        * @protected
-       * @override
        */
       _valueChanged(newVal, oldVal) {
         this._toggleHasValue(newVal !== '' && newVal != null);

package/src/label-mixin.d.ts

@@ -9,7 +9,7 @@ import type { LabelController } from './label-controller.js';
 /**
  * A mixin to provide label via corresponding property or named slot.
  */
-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;
 
 export declare class LabelMixinClass {
   /**

package/src/pattern-mixin.d.ts

@@ -15,13 +15,13 @@ import type { ValidateMixinClass } from './validate-mixin.js';
  */
 export declare function PatternMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<DelegateStateMixinClass> &
+): Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<PatternMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class PatternMixinClass {
   /**

package/src/pattern-mixin.js

@@ -64,6 +64,7 @@ export const PatternMixin = (superclass) =>
     /**
      * @param {Event} event
      * @protected
+     * @override
      */
     _onInput(event) {
       this._checkInputValue();

package/src/shadow-focus-mixin.d.ts

@@ -15,9 +15,9 @@ import type { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
  */
 export declare function ShadowFocusMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<DelegateFocusMixinClass> &
+): Constructor<DelegateFocusMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<FocusMixinClass> &
   Constructor<KeyboardMixinClass> &
-  Constructor<TabindexMixinClass>;
+  Constructor<TabindexMixinClass> &
+  T;

package/src/slot-styles-mixin.d.ts

@@ -11,7 +11,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
  */
 export declare function SlotStylesMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<SlotStylesMixinClass>;
+): Constructor<SlotStylesMixinClass> & T;
 
 export declare class SlotStylesMixinClass {
   /**

package/src/validate-mixin.d.ts

@@ -8,7 +8,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin to provide required state and validation logic.
  */
-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;
 
 export declare class ValidateMixinClass {
   /**

package/src/virtual-keyboard-controller.d.ts

@@ -10,5 +10,5 @@ import type { ReactiveController } from 'lit';
  * when the field's overlay is closed.
  */
 export class VirtualKeyboardController implements ReactiveController {
-  constructor(host: { inputElement?: HTMLElement; opened: boolean } & HTMLElement);
+  constructor(host: HTMLElement & { inputElement?: HTMLElement; opened: boolean });
 }