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

package/src/helper-controller.js

@@ -1,189 +1,89 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
 
 /**
  * A controller that manages the helper node content.
  */
-export class HelperController extends SlotController {
+export class HelperController extends SlotChildObserveController {
   constructor(host) {
-    // Do not provide slot factory, as only create helper lazily.
-    super(host, 'helper', null, null, true);
-  }
-
-  get helperId() {
-    return this.node && this.node.id;
-  }
-
-  /**
-   * Override to initialize the newly added custom helper.
-   *
-   * @param {Node} helperNode
-   * @protected
-   * @override
-   */
-  initCustomNode(helperNode) {
-    this.__updateHelperId(helperNode);
-
-    this.__observeHelper(helperNode);
-
-    const hasHelper = this.__hasHelper(helperNode);
-    this.__toggleHasHelper(hasHelper);
-  }
-
-  /**
-   * Override to cleanup helper node when it's removed.
-   *
-   * @param {Node} _node
-   * @protected
-   * @override
-   */
-  teardownNode(_node) {
-    // The observer does not exist when the default helper is removed.
-    if (this.__helperIdObserver) {
-      this.__helperIdObserver.disconnect();
-    }
-
-    const helperNode = this.getSlotChild();
-
-    // Custom node is added to helper slot
-    if (helperNode && helperNode !== this.defaultNode) {
-      const hasHelper = this.__hasHelper(helperNode);
-      this.__toggleHasHelper(hasHelper);
-    } else {
-      // Restore default helper if needed
-      this.__applyDefaultHelper(this.helperText, helperNode);
-    }
+    // Do not provide tag name, as we create helper lazily.
+    super(host, 'helper', null);
   }
 
   /**
    * Set helper text based on corresponding host property.
+   *
    * @param {string} helperText
    */
   setHelperText(helperText) {
     this.helperText = helperText;
 
+    // Restore the default helper, if needed.
     const helperNode = this.getSlotChild();
-    if (!helperNode || helperNode === this.defaultNode) {
-      this.__applyDefaultHelper(helperText, helperNode);
-    }
-  }
-
-  /**
-   * @param {HTMLElement} helperNode
-   * @return {boolean}
-   * @private
-   */
-  __hasHelper(helperNode) {
     if (!helperNode) {
-      return false;
+      this.restoreDefaultNode();
     }
 
-    return (
-      helperNode.children.length > 0 ||
-      (helperNode.nodeType === Node.ELEMENT_NODE && customElements.get(helperNode.localName)) ||
-      this.__isNotEmpty(helperNode.textContent)
-    );
-  }
-
-  /**
-   * @param {string} helperText
-   * @private
-   */
-  __isNotEmpty(helperText) {
-    return helperText && helperText.trim() !== '';
+    // When default helper is used, update it.
+    if (this.node === this.defaultNode) {
+      this.updateDefaultNode(this.node);
+    }
   }
 
   /**
-   * @param {string} helperText
-   * @param {Node} helperNode
-   * @private
+   * Override method inherited from `SlotChildObserveController`
+   * to create the default helper element lazily as needed.
+   *
+   * @param {Node | undefined} node
+   * @protected
+   * @override
    */
-  __applyDefaultHelper(helperText, helperNode) {
-    const hasHelperText = this.__isNotEmpty(helperText);
+  restoreDefaultNode() {
+    const { helperText } = this;
 
-    if (hasHelperText && !helperNode) {
-      // Set slot factory lazily to only create helper node when needed.
-      this.slotFactory = () => document.createElement('div');
+    // No helper yet, create one.
+    if (helperText && helperText.trim() !== '') {
+      this.tagName = 'div';
 
-      helperNode = this.attachDefaultNode();
+      const helperNode = this.attachDefaultNode();
 
-      this.__updateHelperId(helperNode);
-      this.__observeHelper(helperNode);
+      // Observe the default node.
+      this.observeNode(helperNode);
     }
-
-    if (helperNode) {
-      helperNode.textContent = helperText;
-    }
-
-    this.__toggleHasHelper(hasHelperText);
   }
 
   /**
-   * @param {HTMLElement} helperNode
-   * @private
+   * Override method inherited from `SlotChildObserveController`
+   * to update the default helper element text content.
+   *
+   * @param {Node | undefined} node
+   * @protected
+   * @override
    */
-  __observeHelper(helperNode) {
-    this.__helperObserver = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        const target = mutation.target;
-
-        // Ensure the mutation target is the currently connected helper
-        // to ignore async mutations dispatched for removed element.
-        const isHelperMutation = target === this.node;
-
-        if (mutation.type === 'attributes') {
-          // We use attributeFilter to only observe ID mutation,
-          // no need to check for attribute name separately.
-          if (isHelperMutation && target.id !== this.defaultId) {
-            this.__updateHelperId(target);
-          }
-        } else if (isHelperMutation || target.parentElement === this.node) {
-          // Update has-helper when textContent changes
-          const hasHelper = this.__hasHelper(this.node);
-          this.__toggleHasHelper(hasHelper);
-        }
-      });
-    });
+  updateDefaultNode(node) {
+    if (node) {
+      node.textContent = this.helperText;
+    }
 
-    // Observe changes to helper ID attribute, text content and children.
-    this.__helperObserver.observe(helperNode, {
-      attributes: true,
-      attributeFilter: ['id'],
-      childList: true,
-      subtree: true,
-      characterData: true,
-    });
+    // Notify the host after update.
+    super.updateDefaultNode(node);
   }
 
   /**
-   * @param {boolean} hasHelper
-   * @private
+   * Override to observe the newly added custom node.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
    */
-  __toggleHasHelper(hasHelper) {
-    this.host.toggleAttribute('has-helper', hasHelper);
-
-    // Make it possible for other mixins to observe change
-    this.dispatchEvent(
-      new CustomEvent('helper-changed', {
-        detail: {
-          hasHelper,
-          node: this.node,
-        },
-      }),
-    );
-  }
+  initCustomNode(node) {
+    // Notify the host about a custom slotted helper.
+    super.initCustomNode(node);
 
-  /**
-   * @param {HTMLElement} helperNode
-   * @private
-   */
-  __updateHelperId(helperNode) {
-    if (!helperNode.id) {
-      helperNode.id = this.defaultId;
-    }
+    this.observeNode(node);
   }
 }

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

@@ -1,11 +1,10 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * 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 { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import type { InputMixinClass } from './input-mixin.js';
 import type { ValidateMixinClass } from './validate-mixin.js';
 
@@ -15,7 +14,6 @@ import type { ValidateMixinClass } from './validate-mixin.js';
 export declare function InputConstraintsMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<DelegateStateMixinClass> &
-  Constructor<DisabledMixinClass> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<ValidateMixinClass> &

package/src/input-constraints-mixin.js

@@ -1,10 +1,10 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-import { DelegateStateMixin } from './delegate-state-mixin.js';
+import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import { InputMixin } from './input-mixin.js';
 import { ValidateMixin } from './validate-mixin.js';
 

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

@@ -1,15 +1,15 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * 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 { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 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 { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
-import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
 import type { FieldMixinClass } from './field-mixin.js';
 import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
 import type { InputMixinClass } from './input-mixin.js';

package/src/input-control-mixin.js

@@ -1,12 +1,12 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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 { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { DelegateFocusMixin } from './delegate-focus-mixin.js';
 import { FieldMixin } from './field-mixin.js';
 import { InputConstraintsMixin } from './input-constraints-mixin.js';
 import { SlotStylesMixin } from './slot-styles-mixin.js';
@@ -315,8 +315,8 @@ export const InputControlMixin = (superclass) =>
     _allowedCharPatternChanged(charPattern) {
       if (charPattern) {
         try {
-          this.__allowedCharRegExp = new RegExp(`^${charPattern}$`);
-          this.__allowedTextRegExp = new RegExp(`^${charPattern}*$`);
+          this.__allowedCharRegExp = new RegExp(`^${charPattern}$`, 'u');
+          this.__allowedTextRegExp = new RegExp(`^${charPattern}*$`, 'u');
         } catch (e) {
           console.error(e);
         }

package/src/input-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';

package/src/input-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-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-field-mixin.d.ts

@@ -1,15 +1,15 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * 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 { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 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 { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
-import type { DelegateStateMixinClass } from './delegate-state-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';

package/src/input-field-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { InputControlMixin } from './input-control-mixin.js';
@@ -46,6 +46,7 @@ export const InputFieldMixin = (superclass) =>
          */
         autocapitalize: {
           type: String,
+          reflectToAttribute: true,
         },
       };
     }
@@ -54,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
@@ -75,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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * 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';
@@ -56,4 +56,6 @@ export declare class InputMixinClass {
   protected _toggleHasValue(hasValue: boolean): void;
 
   protected _valueChanged(value?: string, oldValue?: string): void;
+
+  protected _setHasInputValue(event: InputEvent): void;
 }

package/src/input-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
@@ -72,11 +72,27 @@ 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.
        */
       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 = '';
+        }
       }
 
       /**
@@ -155,11 +171,7 @@ export const InputMixin = dedupingMixin(
        * @private
        */
       __onInput(event) {
-        // In the case a custom web component is passed as `inputElement`,
-        // the actual native input element, on which the event occurred,
-        // can be inside shadow trees.
-        const target = event.composedPath()[0];
-        this._hasInputValue = target.value.length > 0;
+        this._setHasInputValue(event);
         this._onInput(event);
       }
 
@@ -222,13 +234,17 @@ export const InputMixin = dedupingMixin(
       }
 
       /**
-       * Indicates whether the value is different from the default one.
-       * Override if the `value` property has a type other than `string`.
+       * Sets the `_hasInputValue` property based on the `input` event.
        *
+       * @param {InputEvent} event
        * @protected
        */
-      get _hasValue() {
-        return this.value != null && this.value !== '';
+      _setHasInputValue(event) {
+        // In the case a custom web component is passed as `inputElement`,
+        // the actual native input element, on which the event occurred,
+        // can be inside shadow trees.
+        const target = event.composedPath()[0];
+        this._hasInputValue = target.value.length > 0;
       }
     },
 );

package/src/label-controller.d.ts

@@ -1,19 +1,14 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
 
 /**
  * A controller to manage the label element.
  */
-export class LabelController extends SlotController {
-  /**
-   * ID attribute value set on the label element.
-   */
-  labelId: string;
-
+export class LabelController extends SlotChildObserveController {
   /**
    * String used for the label.
    */