@vaadin/field-base 24.0.0-alpha1 → 24.0.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha3",
   "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-alpha1",
+    "@vaadin/component-base": "24.0.0-alpha3",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "7a013a3c5a56abd61dd4f7773c6ec77c3541bdf2"
 }

package/src/error-controller.js

@@ -10,17 +10,14 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  */
 export class ErrorController extends SlotController {
   constructor(host) {
-    super(
-      host,
-      'error-message',
-      () => document.createElement('div'),
-      (_host, node) => {
+    super(host, 'error-message', 'div', {
+      initializer: (node) => {
         this.__updateErrorId(node);
 
         this.__updateHasError();
       },
-      true,
-    );
+      useUniqueId: true,
+    });
   }
 
   /**
@@ -55,7 +52,7 @@ export class ErrorController extends SlotController {
   }
 
   /**
-   * Override to initialize the newly added custom label.
+   * Override to initialize the newly added custom error message.
    *
    * @param {Node} errorNode
    * @protected
@@ -73,7 +70,7 @@ export class ErrorController extends SlotController {
   }
 
   /**
-   * Override to cleanup label node when it's removed.
+   * Override to cleanup error message node when it's removed.
    *
    * @param {Node} node
    * @protected
@@ -86,7 +83,7 @@ export class ErrorController extends SlotController {
     if (!errorNode && node !== this.defaultNode) {
       errorNode = this.attachDefaultNode();
 
-      // Run initializer to update default label and ID.
+      // Run initializer to update default error message ID.
       this.initNode(errorNode);
     }
 

package/src/helper-controller.js

@@ -10,8 +10,10 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  */
 export class HelperController extends SlotController {
   constructor(host) {
-    // Do not provide slot factory, as only create helper lazily.
-    super(host, 'helper', null, null, true);
+    // Do not provide tag name, as we create helper lazily.
+    super(host, 'helper', null, {
+      useUniqueId: true,
+    });
   }
 
   get helperId() {
@@ -106,8 +108,8 @@ export class HelperController extends SlotController {
     const hasHelperText = this.__isNotEmpty(helperText);
 
     if (hasHelperText && !helperNode) {
-      // Set slot factory lazily to only create helper node when needed.
-      this.slotFactory = () => document.createElement('div');
+      // Set tag name lazily to only create helper node when needed.
+      this.tagName = 'div';
 
       helperNode = this.attachDefaultNode();
 

package/src/input-controller.js

@@ -10,11 +10,8 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  */
 export class InputController extends SlotController {
   constructor(host, callback) {
-    super(
-      host,
-      'input',
-      () => document.createElement('input'),
-      (host, node) => {
+    super(host, 'input', 'input', {
+      initializer: (node, host) => {
         if (host.value) {
           node.setAttribute('value', host.value);
         }
@@ -29,7 +26,7 @@ export class InputController extends SlotController {
           callback(node);
         }
       },
-      true,
-    );
+      useUniqueId: true,
+    });
   }
 }

package/src/input-mixin.js

@@ -77,6 +77,12 @@ export const InputMixin = dedupingMixin(
        */
       clear() {
         this.value = '';
+
+        // Clear the input immediately without waiting for the observer.
+        // Otherwise, when using Lit, the old value would be restored.
+        if (this.inputElement) {
+          this.inputElement.value = '';
+        }
       }
 
       /**

package/src/label-controller.js

@@ -10,11 +10,8 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  */
 export class LabelController extends SlotController {
   constructor(host) {
-    super(
-      host,
-      'label',
-      () => document.createElement('label'),
-      (_host, node) => {
+    super(host, 'label', 'label', {
+      initializer: (node) => {
         // Set ID attribute or use the existing one.
         this.__updateLabelId(node);
 
@@ -23,8 +20,8 @@ export class LabelController extends SlotController {
 
         this.__observeLabel(node);
       },
-      true,
-    );
+      useUniqueId: true,
+    });
   }
 
   /**

package/src/label-mixin.js

@@ -11,7 +11,7 @@ import { LabelController } from './label-controller.js';
  * A mixin to provide label via corresponding property or named slot.
  *
  * @polymerMixin
- * @mixes SlotMixin
+ * @mixes ControllerMixin
  */
 export const LabelMixin = dedupingMixin(
   (superclass) =>

package/src/pattern-mixin.d.ts

@@ -11,7 +11,7 @@ import type { InputMixinClass } from './input-mixin.js';
 import type { ValidateMixinClass } from './validate-mixin.js';
 
 /**
- * A mixin to provide `pattern` and `preventInvalidInput` properties.
+ * A mixin to provide `pattern` property.
  */
 export declare function PatternMixin<T extends Constructor<HTMLElement>>(
   base: T,
@@ -29,12 +29,4 @@ export declare class PatternMixinClass {
    * The pattern must match the entire value, not just some subset.
    */
   pattern: string;
-
-  /**
-   * When set to true, user is prevented from typing a value that
-   * conflicts with the given `pattern`.
-   * @attr {boolean} prevent-invalid-input
-   * @deprecated Please use `allowedCharPattern` instead.
-   */
-  preventInvalidInput: boolean | null | undefined;
 }

package/src/pattern-mixin.js

@@ -3,12 +3,10 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { timeOut } from '@vaadin/component-base/src/async.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { InputConstraintsMixin } from './input-constraints-mixin.js';
 
 /**
- * A mixin to provide `pattern` and `preventInvalidInput` properties.
+ * A mixin to provide `pattern` property.
  *
  * @polymerMixin
  * @mixes InputConstraintsMixin
@@ -24,17 +22,6 @@ export const PatternMixin = (superclass) =>
         pattern: {
           type: String,
         },
-
-        /**
-         * When set to true, user is prevented from typing a value that
-         * conflicts with the given `pattern`.
-         * @attr {boolean} prevent-invalid-input
-         * @deprecated Please use `allowedCharPattern` instead.
-         */
-        preventInvalidInput: {
-          type: Boolean,
-          observer: '_preventInvalidInputChanged',
-        },
       };
     }
 
@@ -45,39 +32,4 @@ export const PatternMixin = (superclass) =>
     static get constraints() {
       return [...super.constraints, 'pattern'];
     }
-
-    /** @private */
-    _checkInputValue() {
-      if (this.preventInvalidInput) {
-        const input = this.inputElement;
-        if (input && input.value.length > 0 && !this.checkValidity()) {
-          input.value = this.value || '';
-          // Add input-prevented attribute for 200ms
-          this.setAttribute('input-prevented', '');
-          this._inputDebouncer = Debouncer.debounce(this._inputDebouncer, timeOut.after(200), () => {
-            this.removeAttribute('input-prevented');
-          });
-        }
-      }
-    }
-
-    /**
-     * @param {Event} event
-     * @protected
-     * @override
-     */
-    _onInput(event) {
-      this._checkInputValue();
-
-      super._onInput(event);
-    }
-
-    /** @private */
-    _preventInvalidInputChanged(preventInvalidInput) {
-      if (preventInvalidInput) {
-        console.warn(
-          `WARNING: Since Vaadin 23.2, "preventInvalidInput" is deprecated. Please use "allowedCharPattern" instead.`,
-        );
-      }
-    }
   };

package/src/text-area-controller.js

@@ -10,11 +10,8 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  */
 export class TextAreaController extends SlotController {
   constructor(host, callback) {
-    super(
-      host,
-      'textarea',
-      () => document.createElement('textarea'),
-      (host, node) => {
+    super(host, 'textarea', 'textarea', {
+      initializer: (node, host) => {
         const value = host.getAttribute('value');
         if (value) {
           node.value = value;
@@ -31,7 +28,7 @@ export class TextAreaController extends SlotController {
           callback(node);
         }
       },
-      true,
-    );
+      useUniqueId: true,
+    });
   }
 }