@vaadin/field-base 23.2.16 → 23.2.18

package/src/error-controller.js

@@ -1,16 +1,35 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller that manages the error message node content.
  */
-export class ErrorController extends SlotChildObserveController {
+export class ErrorController extends SlotController {
   constructor(host) {
-    super(host, 'error-message', 'div');
+    super(
+      host,
+      'error-message',
+      () => document.createElement('div'),
+      (_host, node) => {
+        this.__updateErrorId(node);
+
+        this.__updateHasError();
+      },
+      true,
+    );
+  }
+
+  /**
+   * ID attribute value set on the error message element.
+   *
+   * @return {string}
+   */
+  get errorId() {
+    return this.node && this.node.id;
   }
 
   /**
@@ -21,7 +40,7 @@ export class ErrorController extends SlotChildObserveController {
   setErrorMessage(errorMessage) {
     this.errorMessage = errorMessage;
 
-    this.updateDefaultNode(this.node);
+    this.__updateHasError();
   }
 
   /**
@@ -32,33 +51,7 @@ export class ErrorController extends SlotChildObserveController {
   setInvalid(invalid) {
     this.invalid = invalid;
 
-    this.updateDefaultNode(this.node);
-  }
-
-  /**
-   * Override method inherited from `SlotController` to not run
-   * initializer on the custom slotted node unnecessarily.
-   *
-   * @param {Node} node
-   * @protected
-   * @override
-   */
-  initAddedNode(node) {
-    if (node !== this.defaultNode) {
-      // There is no need to run `initNode`.
-      this.initCustomNode(node);
-    }
-  }
-
-  /**
-   * Override to initialize the newly added default error message.
-   *
-   * @param {Node} errorNode
-   * @protected
-   * @override
-   */
-  initNode(errorNode) {
-    this.updateDefaultNode(errorNode);
+    this.__updateHasError();
   }
 
   /**
@@ -69,43 +62,53 @@ export class ErrorController extends SlotChildObserveController {
    * @override
    */
   initCustomNode(errorNode) {
+    this.__updateErrorId(errorNode);
+
     // Save the custom error message content on the host.
     if (errorNode.textContent && !this.errorMessage) {
       this.errorMessage = errorNode.textContent.trim();
     }
 
-    // Notify the host about custom node.
-    super.initCustomNode(errorNode);
+    this.__updateHasError();
   }
 
   /**
-   * Override method inherited from `SlotChildObserveController`
-   * to restore the default error message element.
+   * Override to cleanup error message node when it's removed.
    *
+   * @param {Node} node
    * @protected
    * @override
    */
-  restoreDefaultNode() {
-    this.attachDefaultNode();
+  teardownNode(node) {
+    let errorNode = this.getSlotChild();
+
+    // If custom error was removed, restore the default one.
+    if (!errorNode && node !== this.defaultNode) {
+      errorNode = this.attachDefaultNode();
+
+      // Run initializer to update default error message ID.
+      this.initNode(errorNode);
+    }
+
+    this.__updateHasError();
   }
 
   /**
-   * Override method inherited from `SlotChildObserveController`
-   * to update the error message text and hidden state.
-   *
-   * Note: unlike with other controllers, this method is
-   * called for both default and custom error message.
-   *
-   * @param {Node | undefined} node
-   * @protected
-   * @override
+   * @param {string} error
+   * @private
    */
-  updateDefaultNode(errorNode) {
-    const { errorMessage, invalid } = this;
-    const hasError = Boolean(invalid && errorMessage && errorMessage.trim() !== '');
+  __isNotEmpty(error) {
+    return Boolean(error && error.trim() !== '');
+  }
+
+  /** @private */
+  __updateHasError() {
+    const errorNode = this.node;
+    const hasError = Boolean(this.invalid && this.__isNotEmpty(this.errorMessage));
 
+    // Update both default and custom error message node.
     if (errorNode) {
-      errorNode.textContent = hasError ? errorMessage : '';
+      errorNode.textContent = hasError ? this.errorMessage : '';
       errorNode.hidden = !hasError;
 
       // Role alert will make the error message announce immediately
@@ -117,7 +120,16 @@ export class ErrorController extends SlotChildObserveController {
       }
     }
 
-    // Notify the host after update.
-    super.updateDefaultNode(errorNode);
+    this.host.toggleAttribute('has-error-message', hasError);
+  }
+
+  /**
+   * @param {HTMLElement} errorNode
+   * @private
+   */
+  __updateErrorId(errorNode) {
+    if (!errorNode.id) {
+      errorNode.id = this.defaultId;
+    }
   }
 }

package/src/field-aria-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/field-aria-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
@@ -15,16 +15,6 @@ 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.
    *
@@ -91,6 +81,16 @@ 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.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 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';

package/src/field-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
@@ -56,27 +56,9 @@ export const FieldMixin = (superclass) =>
       return ['_invalidChanged(invalid)', '_requiredChanged(required)'];
     }
 
-    constructor() {
-      super();
-
-      this._fieldAriaController = new FieldAriaController(this);
-      this._helperController = new HelperController(this);
-      this._errorController = new ErrorController(this);
-
-      this._errorController.addEventListener('slot-content-changed', (event) => {
-        this.toggleAttribute('has-error-message', event.detail.hasContent);
-      });
-
-      this._labelController.addEventListener('slot-content-changed', (event) => {
-        const { hasContent, node } = event.detail;
-        this.__labelChanged(hasContent, node);
-      });
-
-      this._helperController.addEventListener('slot-content-changed', (event) => {
-        const { hasContent, node } = event.detail;
-        this.toggleAttribute('has-helper', hasContent);
-        this.__helperChanged(hasContent, node);
-      });
+    /** @protected */
+    get _errorId() {
+      return this._errorController.errorId;
     }
 
     /**
@@ -87,6 +69,11 @@ export const FieldMixin = (superclass) =>
       return this._errorController.node;
     }
 
+    /** @protected */
+    get _helperId() {
+      return this._helperController.helperId;
+    }
+
     /**
      * @protected
      * @return {HTMLElement}
@@ -95,6 +82,24 @@ export const FieldMixin = (superclass) =>
       return this._helperController.node;
     }
 
+    constructor() {
+      super();
+
+      this._fieldAriaController = new FieldAriaController(this);
+      this._helperController = new HelperController(this);
+      this._errorController = new ErrorController(this);
+
+      this._labelController.addEventListener('label-changed', (event) => {
+        const { hasLabel, node } = event.detail;
+        this.__labelChanged(hasLabel, node);
+      });
+
+      this._helperController.addEventListener('helper-changed', (event) => {
+        const { hasHelper, node } = event.detail;
+        this.__helperChanged(hasHelper, node);
+      });
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -173,8 +178,7 @@ export const FieldMixin = (superclass) =>
         // Error message ID needs to be dynamically added / removed based on the validity
         // Otherwise assistive technologies would announce the error, even if we hide it.
         if (invalid) {
-          const node = this._errorNode;
-          this._fieldAriaController.setErrorId(node && node.id);
+          this._fieldAriaController.setErrorId(this._errorController.errorId);
         } else {
           this._fieldAriaController.setErrorId(null);
         }

package/src/helper-controller.d.ts

@@ -1,19 +1,21 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller that manages the helper node content.
  */
-export class HelperController extends SlotChildObserveController {
+export class HelperController extends SlotController {
   /**
    * String used for the helper text.
    */
   helperText: string | null | undefined;
 
+  helperId: string;
+
   /**
    * Set helper text based on corresponding host property.
    */

package/src/helper-controller.js

@@ -1,89 +1,189 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller that manages the helper node content.
  */
-export class HelperController extends SlotChildObserveController {
+export class HelperController extends SlotController {
   constructor(host) {
-    // Do not provide tag name, as we create helper lazily.
-    super(host, 'helper', null);
+    // Do not provide slot factory, as only create helper lazily.
+    super(host, 'helper', null, null, true);
+  }
+
+  get helperId() {
+    return this.node && this.node.id;
   }
 
   /**
-   * Set helper text based on corresponding host property.
+   * 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);
+    }
+  }
+
+  /**
+   * 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) {
-      this.restoreDefaultNode();
+    if (!helperNode || helperNode === this.defaultNode) {
+      this.__applyDefaultHelper(helperText, helperNode);
     }
+  }
 
-    // When default helper is used, update it.
-    if (this.node === this.defaultNode) {
-      this.updateDefaultNode(this.node);
+  /**
+   * @param {HTMLElement} helperNode
+   * @return {boolean}
+   * @private
+   */
+  __hasHelper(helperNode) {
+    if (!helperNode) {
+      return false;
     }
+
+    return (
+      helperNode.children.length > 0 ||
+      (helperNode.nodeType === Node.ELEMENT_NODE && customElements.get(helperNode.localName)) ||
+      this.__isNotEmpty(helperNode.textContent)
+    );
   }
 
   /**
-   * Override method inherited from `SlotChildObserveController`
-   * to create the default helper element lazily as needed.
-   *
-   * @param {Node | undefined} node
-   * @protected
-   * @override
+   * @param {string} helperText
+   * @private
+   */
+  __isNotEmpty(helperText) {
+    return helperText && helperText.trim() !== '';
+  }
+
+  /**
+   * @param {string} helperText
+   * @param {Node} helperNode
+   * @private
    */
-  restoreDefaultNode() {
-    const { helperText } = this;
+  __applyDefaultHelper(helperText, helperNode) {
+    const hasHelperText = this.__isNotEmpty(helperText);
 
-    // No helper yet, create one.
-    if (helperText && helperText.trim() !== '') {
-      this.tagName = 'div';
+    if (hasHelperText && !helperNode) {
+      // Set slot factory lazily to only create helper node when needed.
+      this.slotFactory = () => document.createElement('div');
 
-      const helperNode = this.attachDefaultNode();
+      helperNode = this.attachDefaultNode();
 
-      // Observe the default node.
-      this.observeNode(helperNode);
+      this.__updateHelperId(helperNode);
+      this.__observeHelper(helperNode);
     }
+
+    if (helperNode) {
+      helperNode.textContent = helperText;
+    }
+
+    this.__toggleHasHelper(hasHelperText);
   }
 
   /**
-   * Override method inherited from `SlotChildObserveController`
-   * to update the default helper element text content.
-   *
-   * @param {Node | undefined} node
-   * @protected
-   * @override
+   * @param {HTMLElement} helperNode
+   * @private
    */
-  updateDefaultNode(node) {
-    if (node) {
-      node.textContent = this.helperText;
-    }
+  __observeHelper(helperNode) {
+    this.__helperObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        const target = mutation.target;
 
-    // Notify the host after update.
-    super.updateDefaultNode(node);
+        // 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);
+        }
+      });
+    });
+
+    // Observe changes to helper ID attribute, text content and children.
+    this.__helperObserver.observe(helperNode, {
+      attributes: true,
+      attributeFilter: ['id'],
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
   }
 
   /**
-   * Override to observe the newly added custom node.
-   *
-   * @param {Node} node
-   * @protected
-   * @override
+   * @param {boolean} hasHelper
+   * @private
    */
-  initCustomNode(node) {
-    // Notify the host about a custom slotted helper.
-    super.initCustomNode(node);
+  __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,
+        },
+      }),
+    );
+  }
 
-    this.observeNode(node);
+  /**
+   * @param {HTMLElement} helperNode
+   * @private
+   */
+  __updateHelperId(helperNode) {
+    if (!helperNode.id) {
+      helperNode.id = this.defaultId;
+    }
   }
 }

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

@@ -1,10 +1,11 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 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 { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
 import type { InputMixinClass } from './input-mixin.js';
 import type { ValidateMixinClass } from './validate-mixin.js';
 
@@ -14,6 +15,7 @@ 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 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 '@vaadin/component-base/src/delegate-state-mixin.js';
+import { DelegateStateMixin } from './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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 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 - 2023 Vaadin Ltd.
+ * 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 { 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}$`, 'u');
-          this.__allowedTextRegExp = new RegExp(`^${charPattern}*$`, 'u');
+          this.__allowedCharRegExp = new RegExp(`^${charPattern}$`);
+          this.__allowedTextRegExp = new RegExp(`^${charPattern}*$`);
         } catch (e) {
           console.error(e);
         }

package/src/input-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 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';