@vaadin/field-base 24.0.0-beta1 → 24.0.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "24.0.0-beta1",
+  "version": "24.0.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": "24.0.0-beta1",
+    "@vaadin/component-base": "24.0.0-beta3",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "c5b48921a62482746df8e46994b37e1490fec27e"
+  "gitHead": "4daeac63327393aacd9cfaa5abeb031ea86b14a5"
 }

package/src/clear-button-mixin.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
+
+/**
+ * A mixin that manages the clear button.
+ */
+export declare function ClearButtonMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ClearButtonMixinClass> & Constructor<InputMixinClass> & Constructor<KeyboardMixinClass> & T;
+
+export declare class ClearButtonMixinClass {
+  /**
+   * Set to true to display the clear icon which clears the input.
+   *
+   * It is up to the component to choose where to place the clear icon:
+   * in the Shadow DOM or in the light DOM. In any way, a reference to
+   * the clear icon element should be provided via the `clearElement` getter.
+   *
+   * @attr {boolean} clear-button-visible
+   */
+  clearButtonVisible: boolean;
+
+  /**
+   * Clears the value and dispatches `input` and `change` events
+   * on the input element. This method should be called
+   * when the clear action originates from the user.
+   */
+  protected _onClearAction(): void;
+}

package/src/clear-button-mixin.js

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
+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)) {
+    static get properties() {
+      return {
+        /**
+         * Set to true to display the clear icon which clears the input.
+         *
+         * It is up to the component to choose where to place the clear icon:
+         * in the Shadow DOM or in the light DOM. In any way, a reference to
+         * the clear icon element should be provided via the `clearElement` getter.
+         *
+         * @attr {boolean} clear-button-visible
+         */
+        clearButtonVisible: {
+          type: Boolean,
+          reflectToAttribute: true,
+          value: false,
+        },
+      };
+    }
+
+    /**
+     * Any element extending this mixin is required to implement this getter.
+     * It returns the reference to the clear button element.
+     *
+     * @protected
+     * @return {Element | null | undefined}
+     */
+    get clearElement() {
+      console.warn(`Please implement the 'clearElement' property in <${this.localName}>`);
+      return null;
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      if (this.clearElement) {
+        this.clearElement.addEventListener('click', (event) => this._onClearButtonClick(event));
+      }
+    }
+
+    /**
+     * @param {Event} event
+     * @protected
+     */
+    _onClearButtonClick(event) {
+      event.preventDefault();
+      this.inputElement.focus();
+      this._onClearAction();
+    }
+
+    /**
+     * Override an event listener inherited from `KeydownMixin` to clear on Esc.
+     * Components that extend this mixin can prevent this behavior by overriding
+     * this method without calling `super._onEscape` to provide custom logic.
+     *
+     * @param {KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onEscape(event) {
+      super._onEscape(event);
+
+      if (this.clearButtonVisible && !!this.value) {
+        event.stopPropagation();
+        this._onClearAction();
+      }
+    }
+
+    /**
+     * Clears the value and dispatches `input` and `change` events
+     * on the input element. This method should be called
+     * when the clear action originates from the user.
+     *
+     * @protected
+     */
+    _onClearAction() {
+      this.clear();
+      // Note, according to the HTML spec, the native change event isn't composed
+      // while the input event is composed.
+      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+      this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+  };

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

@@ -10,6 +10,7 @@ import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegat
 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 { ClearButtonMixinClass } from './clear-button-mixin.js';
 import type { FieldMixinClass } from './field-mixin.js';
 import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
 import type { InputMixinClass } from './input-mixin.js';
@@ -22,7 +23,8 @@ import type { ValidateMixinClass } from './validate-mixin.js';
  */
 export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ControllerMixinClass> &
+): Constructor<ClearButtonMixinClass> &
+  Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
@@ -57,12 +59,6 @@ export declare class InputControlMixinClass {
    */
   autoselect: boolean;
 
-  /**
-   * Set to true to display the clear icon which clears the input.
-   * @attr {boolean} clear-button-visible
-   */
-  clearButtonVisible: boolean;
-
   /**
    * The name of this field.
    */

package/src/input-control-mixin.js

@@ -7,6 +7,7 @@ import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { ClearButtonMixin } from './clear-button-mixin.js';
 import { FieldMixin } from './field-mixin.js';
 import { InputConstraintsMixin } from './input-constraints-mixin.js';
 import { SlotStylesMixin } from './slot-styles-mixin.js';
@@ -19,11 +20,12 @@ import { SlotStylesMixin } from './slot-styles-mixin.js';
  * @mixes FieldMixin
  * @mixes InputConstraintsMixin
  * @mixes KeyboardMixin
+ * @mixes ClearButtonMixin
  * @mixes SlotStylesMixin
  */
 export const InputControlMixin = (superclass) =>
   class InputControlMixinClass extends SlotStylesMixin(
-    DelegateFocusMixin(InputConstraintsMixin(FieldMixin(KeyboardMixin(superclass)))),
+    DelegateFocusMixin(InputConstraintsMixin(FieldMixin(ClearButtonMixin(KeyboardMixin(superclass))))),
   ) {
     static get properties() {
       return {
@@ -52,16 +54,6 @@ export const InputControlMixin = (superclass) =>
           value: false,
         },
 
-        /**
-         * Set to true to display the clear icon which clears the input.
-         * @attr {boolean} clear-button-visible
-         */
-        clearButtonVisible: {
-          type: Boolean,
-          reflectToAttribute: true,
-          value: false,
-        },
-
         /**
          * The name of this field.
          */
@@ -109,17 +101,6 @@ export const InputControlMixin = (superclass) =>
       this._boundOnBeforeInput = this._onBeforeInput.bind(this);
     }
 
-    /**
-     * Any element extending this mixin is required to implement this getter.
-     * It returns the reference to the clear button element.
-     * @protected
-     * @return {Element | null | undefined}
-     */
-    get clearElement() {
-      console.warn(`Please implement the 'clearElement' property in <${this.localName}>`);
-      return null;
-    }
-
     /** @protected */
     get slotStyles() {
       // Needed for Safari, where ::slotted(...)::placeholder does not work
@@ -133,25 +114,6 @@ export const InputControlMixin = (superclass) =>
       ];
     }
 
-    /** @protected */
-    ready() {
-      super.ready();
-
-      if (this.clearElement) {
-        this.clearElement.addEventListener('click', (e) => this._onClearButtonClick(e));
-      }
-    }
-
-    /**
-     * @param {Event} event
-     * @protected
-     */
-    _onClearButtonClick(event) {
-      event.preventDefault();
-      this.inputElement.focus();
-      this.__clear();
-    }
-
     /**
      * Override an event listener from `DelegateFocusMixin`.
      * @param {FocusEvent} event
@@ -166,23 +128,6 @@ export const InputControlMixin = (superclass) =>
       }
     }
 
-    /**
-     * Override an event listener inherited from `KeydownMixin` to clear on Esc.
-     * Components that extend this mixin can prevent this behavior by overriding
-     * this method without calling `super._onEscape` to provide custom logic.
-     * @param {KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onEscape(event) {
-      super._onEscape(event);
-
-      if (this.clearButtonVisible && !!this.value) {
-        event.stopPropagation();
-        this.__clear();
-      }
-    }
-
     /**
      * Override an event listener inherited from `InputMixin`
      * to capture native `change` event and make sure that
@@ -207,13 +152,6 @@ export const InputControlMixin = (superclass) =>
       );
     }
 
-    /** @private */
-    __clear() {
-      this.clear();
-      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-      this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
-    }
-
     /**
      * Override a method from `InputMixin`.
      * @param {!HTMLElement} input

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

@@ -10,6 +10,7 @@ import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegat
 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 { ClearButtonMixinClass } from './clear-button-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';
@@ -23,7 +24,8 @@ import type { ValidateMixinClass } from './validate-mixin.js';
  */
 export declare function InputFieldMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ControllerMixinClass> &
+): Constructor<ClearButtonMixinClass> &
+  Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &