@vaadin/field-base 24.0.0-alpha9 → 24.0.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -32,13 +32,13 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha9",
+    "@vaadin/component-base": "24.0.0-beta2",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
+  "gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
 }

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/field-aria-controller.js

@@ -15,6 +15,16 @@ export class FieldAriaController {
     this.__required = false;
   }
 
+  /**
+   * `true` if the target element is the host component itself, `false` otherwise.
+   *
+   * @return {boolean}
+   * @private
+   */
+  get __isGroupField() {
+    return this.__target === this.host;
+  }
+
   /**
    * Sets a target element to which ARIA attributes are added.
    *
@@ -81,16 +91,6 @@ export class FieldAriaController {
     this.__helperId = helperId;
   }
 
-  /**
-   * `true` if the target element is the host component itself, `false` otherwise.
-   *
-   * @return {boolean}
-   * @private
-   */
-  get __isGroupField() {
-    return this.__target === this.host;
-  }
-
   /**
    * @param {string | null | undefined} labelId
    * @param {string | null | undefined} oldLabelId

package/src/field-mixin.js

@@ -56,22 +56,6 @@ export const FieldMixin = (superclass) =>
       return ['_invalidChanged(invalid)', '_requiredChanged(required)'];
     }
 
-    /**
-     * @protected
-     * @return {HTMLElement}
-     */
-    get _errorNode() {
-      return this._errorController.node;
-    }
-
-    /**
-     * @protected
-     * @return {HTMLElement}
-     */
-    get _helperNode() {
-      return this._helperController.node;
-    }
-
     constructor() {
       super();
 
@@ -95,6 +79,22 @@ export const FieldMixin = (superclass) =>
       });
     }
 
+    /**
+     * @protected
+     * @return {HTMLElement}
+     */
+    get _errorNode() {
+      return this._errorController.node;
+    }
+
+    /**
+     * @protected
+     * @return {HTMLElement}
+     */
+    get _helperNode() {
+      return this._helperController.node;
+    }
+
     /** @protected */
     ready() {
       super.ready();

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> &

package/src/input-field-mixin.js

@@ -55,6 +55,15 @@ export const InputFieldMixin = (superclass) =>
       return [...super.delegateAttrs, 'autocapitalize', 'autocomplete', 'autocorrect'];
     }
 
+    // Workaround for https://github.com/Polymer/polymer/issues/5259
+    get __data() {
+      return this.__dataValue || {};
+    }
+
+    set __data(value) {
+      this.__dataValue = value;
+    }
+
     /**
      * @param {HTMLElement} input
      * @protected
@@ -76,15 +85,6 @@ export const InputFieldMixin = (superclass) =>
       }
     }
 
-    // Workaround for https://github.com/Polymer/polymer/issues/5259
-    get __data() {
-      return this.__dataValue || {};
-    }
-
-    set __data(value) {
-      this.__dataValue = value;
-    }
-
     /**
      * Override an event listener from `FocusMixin`.
      * @param {boolean} focused

package/src/input-mixin.d.ts

@@ -47,9 +47,9 @@ export declare class InputMixinClass {
 
   protected _inputElementChanged(input: HTMLElement, oldInput: HTMLElement): void;
 
-  protected _onChange(event: void): void;
+  protected _onChange(event: Event): void;
 
-  protected _onInput(event: void): void;
+  protected _onInput(event: Event): void;
 
   protected _setInputElement(input: HTMLElement): void;
 

package/src/input-mixin.js

@@ -72,6 +72,16 @@ export const InputMixin = dedupingMixin(
         this._boundOnChange = this._onChange.bind(this);
       }
 
+      /**
+       * 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 !== '';
+      }
+
       /**
        * Clear the value of the field.
        */
@@ -223,16 +233,6 @@ export const InputMixin = dedupingMixin(
         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 !== '';
-      }
-
       /**
        * Sets the `_hasInputValue` property based on the `input` event.
        *

package/src/label-mixin.js

@@ -29,6 +29,16 @@ export const LabelMixin = dedupingMixin(
         };
       }
 
+      constructor() {
+        super();
+
+        this._labelController = new LabelController(this);
+
+        this._labelController.addEventListener('slot-content-changed', (event) => {
+          this.toggleAttribute('has-label', event.detail.hasContent);
+        });
+      }
+
       /** @protected */
       get _labelId() {
         const node = this._labelNode;
@@ -40,16 +50,6 @@ export const LabelMixin = dedupingMixin(
         return this._labelController.node;
       }
 
-      constructor() {
-        super();
-
-        this._labelController = new LabelController(this);
-
-        this._labelController.addEventListener('slot-content-changed', (event) => {
-          this.toggleAttribute('has-label', event.detail.hasContent);
-        });
-      }
-
       /** @protected */
       ready() {
         super.ready();

package/src/styles/clear-button-styles.js

@@ -12,7 +12,7 @@ export const clearButton = css`
   }
 
   [part='clear-button']::before {
-    content: '✕';
+    content: '\\2715';
   }
 
   :host([clear-button-visible][has-value]:not([disabled]):not([readonly])) [part='clear-button'] {