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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "24.0.0-alpha8",
+  "version": "24.0.0-beta1",
   "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-alpha8",
+    "@vaadin/component-base": "24.0.0-beta1",
     "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": "476752249bb12295c500980d98a3256ad3b22b73"
+  "gitHead": "c5b48921a62482746df8e46994b37e1490fec27e"
 }

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-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'] {