@vaadin/field-base 22.0.1 → 22.0.5

package/src/field-mixin.js

@@ -1,13 +1,14 @@
 /**
  * @license
- * Copyright (c) 2021 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 { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { ErrorController } from './error-controller.js';
 import { FieldAriaController } from './field-aria-controller.js';
+import { HelperController } from './helper-controller.js';
 import { LabelMixin } from './label-mixin.js';
 import { ValidateMixin } from './validate-mixin.js';
 
@@ -38,7 +39,8 @@ export const FieldMixin = (superclass) =>
          * @attr {string} error-message
          */
         errorMessage: {
-          type: String
+          type: String,
+          observer: '_errorMessageChanged'
         },
 
         /**
@@ -55,34 +57,30 @@ export const FieldMixin = (superclass) =>
       };
     }
 
-    /** @protected */
-    get slots() {
-      return {
-        ...super.slots,
-        'error-message': () => {
-          const error = document.createElement('div');
-          error.textContent = this.errorMessage;
-          return error;
-        }
-      };
-    }
-
     static get observers() {
       return [
         '__observeOffsetHeight(errorMessage, invalid, label, helperText)',
-        '_updateErrorMessage(invalid, errorMessage)',
         '_invalidChanged(invalid)',
-        '_requiredChanged(required)',
-        '_helperIdChanged(_helperId)'
+        '_requiredChanged(required)'
       ];
     }
 
+    /** @protected */
+    get _errorId() {
+      return this._errorController.errorId;
+    }
+
     /**
      * @protected
      * @return {HTMLElement}
      */
     get _errorNode() {
-      return this._getDirectSlotChild('error-message');
+      return this._errorController.node;
+    }
+
+    /** @protected */
+    get _helperId() {
+      return this._helperController.helperId;
     }
 
     /**
@@ -90,157 +88,38 @@ export const FieldMixin = (superclass) =>
      * @return {HTMLElement}
      */
     get _helperNode() {
-      return this._getDirectSlotChild('helper');
+      return this._helperController.node;
     }
 
     constructor() {
       super();
 
-      // Ensure every instance has unique ID
-      const uniqueId = (FieldMixinClass._uniqueFieldId = 1 + FieldMixinClass._uniqueFieldId || 0);
-      this._errorId = `error-${this.localName}-${uniqueId}`;
-      this._helperId = `helper-${this.localName}-${uniqueId}`;
-
-      // Save generated ID to restore later
-      this.__savedHelperId = this._helperId;
-
       this._fieldAriaController = new FieldAriaController(this);
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      const error = this._errorNode;
-      if (error) {
-        error.id = this._errorId;
-
-        this.__applyCustomError();
-
-        this._updateErrorMessage(this.invalid, this.errorMessage);
-      }
-
-      const helper = this._helperNode;
-      if (helper) {
-        this.__applyCustomHelper(helper);
-      }
-
-      this.__helperSlot = this.shadowRoot.querySelector('[name="helper"]');
-
-      this.__helperSlotObserver = new FlattenedNodesObserver(this.__helperSlot, (info) => {
-        const helper = this._currentHelper;
-
-        const newHelper = info.addedNodes.find((node) => node !== helper);
-        const oldHelper = info.removedNodes.find((node) => node === helper);
-
-        if (newHelper) {
-          // Custom helper is added, remove the previous one.
-          if (helper && helper.isConnected) {
-            this.removeChild(helper);
-          }
-
-          this.__applyCustomHelper(newHelper);
-
-          this.__helperIdObserver = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-              // only handle helper nodes
-              if (
-                mutation.type === 'attributes' &&
-                mutation.attributeName === 'id' &&
-                mutation.target === this._currentHelper &&
-                mutation.target.id !== this.__savedHelperId
-              ) {
-                this.__updateHelperId(mutation.target);
-              }
-            });
-          });
-
-          this.__helperIdObserver.observe(newHelper, { attributes: true });
-        } else if (oldHelper) {
-          // The observer does not exist when default helper is removed.
-          if (this.__helperIdObserver) {
-            this.__helperIdObserver.disconnect();
-          }
-
-          this.__applyDefaultHelper(this.helperText);
-        }
-      });
+      this._helperController = new HelperController(this);
+      this._errorController = new ErrorController(this);
 
       this.addController(this._fieldAriaController);
-    }
+      this.addController(this._helperController);
+      this.addController(this._errorController);
 
-    /** @private */
-    __applyCustomError() {
-      const error = this.__errorMessage;
-      if (error && error !== this.errorMessage) {
-        this.errorMessage = error;
-        delete this.__errorMessage;
-      }
-    }
-
-    /**
-     * @param {HTMLElement} helper
-     * @private
-     */
-    __applyCustomHelper(helper) {
-      this.__updateHelperId(helper);
-      this._currentHelper = helper;
-      this.__toggleHasHelper(helper.children.length > 0 || this.__isNotEmpty(helper.textContent));
-    }
+      this._labelController.addEventListener('label-changed', (event) => {
+        const { hasLabel, node } = event.detail;
+        this.__labelChanged(hasLabel, node);
+      });
 
-    /**
-     * @param {string} helperText
-     * @private
-     */
-    __isNotEmpty(helperText) {
-      return helperText && helperText.trim() !== '';
+      this._helperController.addEventListener('helper-changed', (event) => {
+        const { hasHelper, node } = event.detail;
+        this.__helperChanged(hasHelper, node);
+      });
     }
 
     /** @private */
-    __attachDefaultHelper() {
-      let helper = this.__defaultHelper;
-
-      if (!helper) {
-        helper = document.createElement('div');
-        helper.setAttribute('slot', 'helper');
-        this.__defaultHelper = helper;
-      }
-
-      helper.id = this.__savedHelperId;
-      this._helperId = helper.id;
-      this.appendChild(helper);
-      this._currentHelper = helper;
-
-      return helper;
-    }
-
-    /**
-     * @param {string} helperText
-     * @private
-     */
-    __applyDefaultHelper(helperText) {
-      let helper = this._helperNode;
-
-      const hasHelperText = this.__isNotEmpty(helperText);
-      if (hasHelperText && !helper) {
-        // Create helper lazily
-        helper = this.__attachDefaultHelper();
-      }
-
-      // Only set text content for default helper
-      if (helper && helper === this.__defaultHelper) {
-        helper.textContent = helperText;
+    __helperChanged(hasHelper, helperNode) {
+      if (hasHelper) {
+        this._fieldAriaController.setHelperId(helperNode.id);
+      } else {
+        this._fieldAriaController.setHelperId(null);
       }
-
-      this.__toggleHasHelper(hasHelperText);
-    }
-
-    /**
-     * @param {boolean} hasHelper
-     * @private
-     */
-    __toggleHasHelper(hasHelper) {
-      this.toggleAttribute('has-helper', hasHelper);
     }
 
     /**
@@ -268,66 +147,23 @@ export const FieldMixin = (superclass) =>
       );
     }
 
-    /**
-     * @protected
-     * @override
-     */
-    _toggleHasLabelAttribute() {
-      super._toggleHasLabelAttribute();
-
+    /** @private */
+    __labelChanged(hasLabel, labelNode) {
       // Label ID should be only added when the label content is present.
       // Otherwise, it may conflict with an `aria-label` attribute possibly added by the user.
-      if (this.hasAttribute('has-label')) {
-        this._fieldAriaController.setLabelId(this._labelId);
+      if (hasLabel) {
+        this._fieldAriaController.setLabelId(labelNode.id);
       } else {
         this._fieldAriaController.setLabelId(null);
       }
     }
 
     /**
-     * @param {boolean} invalid
      * @param {string | null | undefined} errorMessage
      * @protected
      */
-    _updateErrorMessage(invalid, errorMessage) {
-      const error = this._errorNode;
-      if (!error) {
-        return;
-      }
-
-      // save the custom error message content
-      if (error.textContent && !errorMessage) {
-        this.__errorMessage = error.textContent.trim();
-      }
-      const hasError = Boolean(invalid && errorMessage);
-      error.textContent = hasError ? errorMessage : '';
-      error.hidden = !hasError;
-      this.toggleAttribute('has-error-message', hasError);
-
-      // Role alert will make the error message announce immediately
-      // as the field becomes invalid
-      if (hasError) {
-        error.setAttribute('role', 'alert');
-      } else {
-        error.removeAttribute('role');
-      }
-    }
-
-    /**
-     * @param {HTMLElement} customHelper
-     * @private
-     */
-    __updateHelperId(customHelper) {
-      let newId;
-
-      if (customHelper.id) {
-        newId = customHelper.id;
-      } else {
-        newId = this.__savedHelperId;
-        customHelper.id = newId;
-      }
-
-      this._helperId = newId;
+    _errorMessageChanged(errorMessage) {
+      this._errorController.setErrorMessage(errorMessage);
     }
 
     /**
@@ -335,7 +171,7 @@ export const FieldMixin = (superclass) =>
      * @protected
      */
     _helperTextChanged(helperText) {
-      this.__applyDefaultHelper(helperText);
+      this._helperController.setHelperText(helperText);
     }
 
     /**
@@ -356,25 +192,25 @@ export const FieldMixin = (superclass) =>
       this._fieldAriaController.setRequired(required);
     }
 
-    /**
-     * @param {string} helperId
-     * @protected
-     */
-    _helperIdChanged(helperId) {
-      this._fieldAriaController.setHelperId(helperId);
-    }
-
     /**
      * @param {boolean} required
      * @protected
      */
     _invalidChanged(invalid) {
-      // 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) {
-        this._fieldAriaController.setErrorId(this._errorId);
-      } else {
-        this._fieldAriaController.setErrorId(null);
-      }
+      this._errorController.setInvalid(invalid);
+
+      // This timeout is needed to prevent NVDA from announcing the error message twice:
+      // 1. Once adding the `[role=alert]` attribute by the `_updateErrorMessage` method (OK).
+      // 2. Once linking the error ID with the ARIA target here (unwanted).
+      // Related issue: https://github.com/vaadin/web-components/issues/3061.
+      setTimeout(() => {
+        // 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) {
+          this._fieldAriaController.setErrorId(this._errorController.errorId);
+        } else {
+          this._fieldAriaController.setErrorId(null);
+        }
+      });
     }
   };

package/src/helper-controller.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright (c) 2021 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';
+
+/**
+ * A controller that manages the helper node content.
+ */
+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.
+   */
+  setHelperText(helperText: string): void;
+}

package/src/helper-controller.js

@@ -0,0 +1,185 @@
+/**
+ * @license
+ * Copyright (c) 2021 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';
+
+/**
+ * A controller that manages the helper node content.
+ */
+export class HelperController extends SlotController {
+  constructor(host) {
+    // Do not provide slot factory, as only create helper lazily.
+    super(host, 'helper');
+  }
+
+  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);
+    }
+  }
+
+  /**
+   * Set helper text based on corresponding host property.
+   * @param {string} helperText
+   */
+  setHelperText(helperText) {
+    this.helperText = helperText;
+
+    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;
+    }
+
+    return helperNode.children.length > 0 || this.__isNotEmpty(helperNode.textContent);
+  }
+
+  /**
+   * @param {string} helperText
+   * @private
+   */
+  __isNotEmpty(helperText) {
+    return helperText && helperText.trim() !== '';
+  }
+
+  /**
+   * @param {string} helperText
+   * @param {Node} helperNode
+   * @private
+   */
+  __applyDefaultHelper(helperText, helperNode) {
+    const hasHelperText = this.__isNotEmpty(helperText);
+
+    if (hasHelperText && !helperNode) {
+      // Set slot factory lazily to only create helper node when needed.
+      this.slotFactory = () => document.createElement('div');
+
+      helperNode = this.attachDefaultNode();
+
+      this.__updateHelperId(helperNode);
+      this.__observeHelper(helperNode);
+    }
+
+    if (helperNode) {
+      helperNode.textContent = helperText;
+    }
+
+    this.__toggleHasHelper(hasHelperText);
+  }
+
+  /**
+   * @param {HTMLElement} helperNode
+   * @private
+   */
+  __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);
+        }
+      });
+    });
+
+    // Observe changes to helper ID attribute, text content and children.
+    this.__helperObserver.observe(helperNode, {
+      attributes: true,
+      attributeFilter: ['id'],
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+  }
+
+  /**
+   * @param {boolean} hasHelper
+   * @private
+   */
+  __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
+        }
+      })
+    );
+  }
+
+  /**
+   * @param {HTMLElement} helperNode
+   * @private
+   */
+  __updateHelperId(helperNode) {
+    if (!helperNode.id) {
+      helperNode.id = this.defaultId;
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/input-constraints-mixin.js

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

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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 { Constructor } from '@open-wc/dedupe-mixin';

package/src/input-control-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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 { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
@@ -107,9 +107,7 @@ export const InputControlMixin = (superclass) =>
     _onClearButtonClick(event) {
       event.preventDefault();
       this.inputElement.focus();
-      this.clear();
-      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-      this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+      this.__clear();
     }
 
     /**
@@ -137,10 +135,8 @@ export const InputControlMixin = (superclass) =>
     _onKeyDown(event) {
       super._onKeyDown(event);
 
-      if (event.key === 'Escape' && this.clearButtonVisible) {
-        const dispatchChange = !!this.value;
-        this.clear();
-        dispatchChange && this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+      if (event.key === 'Escape' && this.clearButtonVisible && !!this.value) {
+        this.__clear();
       }
     }
 
@@ -167,4 +163,11 @@ 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 }));
+    }
   };

package/src/input-controller.d.ts

@@ -1,11 +1,11 @@
 /**
  * @license
- * Copyright (c) 2021 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 './slot-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller to create and initialize slotted `<input>` element.
  */
-export class InputController implements SlotController {}
+export class InputController extends SlotController {}

package/src/input-controller.js

@@ -1,16 +1,17 @@
 /**
  * @license
- * Copyright (c) 2021 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 './slot-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller to create and initialize slotted `<input>` element.
  */
 export class InputController extends SlotController {
   constructor(host, callback) {
-    super(host, [
+    super(
+      host,
       'input',
       () => document.createElement('input'),
       (host, node) => {
@@ -30,6 +31,6 @@ export class InputController extends SlotController {
           callback(node);
         }
       }
-    ]);
+    );
   }
 }