@vaadin/field-base 23.0.0-alpha1 → 23.0.0-alpha5

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';
@@ -49,9 +49,8 @@ export const InputConstraintsMixin = dedupingMixin(
       checkValidity() {
         if (this.inputElement && this._hasValidConstraints(this.constructor.constraints.map((c) => this[c]))) {
           return this.inputElement.checkValidity();
-        } else {
-          return !this.invalid;
         }
+        return !this.invalid;
       }
 
       /**

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';

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);
         }
       }
-    ]);
+    );
   }
 }

package/src/input-field-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-field-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 { InputControlMixin } from './input-control-mixin.js';

package/src/input-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-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/label-controller.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * 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';
+
+/**
+ * A controller to manage the label element.
+ */
+export class LabelController extends SlotController {
+  /**
+   * String used for the label.
+   */
+  protected label: string | null | undefined;
+
+  /**
+   * Set label based on corresponding host property.
+   */
+  setLabel(label: string | null | undefined): void;
+
+  /**
+   * ID attribute value set on the label element.
+   */
+  labelId: string;
+}

package/src/label-controller.js

@@ -0,0 +1,186 @@
+/**
+ * @license
+ * 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';
+
+/**
+ * A controller to manage the label element.
+ */
+export class LabelController extends SlotController {
+  constructor(host) {
+    super(
+      host,
+      'label',
+      () => document.createElement('label'),
+      (_host, node) => {
+        // Set ID attribute or use the existing one.
+        this.__updateLabelId(node);
+
+        // Set text content for the default label.
+        this.__updateDefaultLabel(this.label);
+
+        this.__observeLabel(node);
+      }
+    );
+  }
+
+  /**
+   * @return {string}
+   */
+  get labelId() {
+    return this.node.id;
+  }
+
+  /**
+   * Override to initialize the newly added custom label.
+   *
+   * @param {Node} labelNode
+   * @protected
+   * @override
+   */
+  initCustomNode(labelNode) {
+    const hasLabel = this.__hasLabel(labelNode);
+    this.__toggleHasLabel(hasLabel);
+  }
+
+  /**
+   * Override to cleanup label node when it's removed.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  teardownNode(node) {
+    if (this.__labelObserver) {
+      this.__labelObserver.disconnect();
+    }
+
+    let labelNode = this.getSlotChild();
+
+    // If custom label was removed, restore the default one.
+    if (!labelNode && node !== this.defaultNode) {
+      labelNode = this.attachDefaultNode();
+
+      // Run initializer to update default label and ID.
+      this.initNode(labelNode);
+    }
+
+    const hasLabel = this.__hasLabel(labelNode);
+    this.__toggleHasLabel(hasLabel);
+  }
+
+  /**
+   * Set label based on corresponding host property.
+   *
+   * @param {string} label
+   */
+  setLabel(label) {
+    this.label = label;
+
+    this.__updateDefaultLabel(label);
+  }
+
+  /**
+   * @param {HTMLElement} labelNode
+   * @return {boolean}
+   * @private
+   */
+  __hasLabel(labelNode) {
+    if (!labelNode) {
+      return false;
+    }
+
+    return labelNode.children.length > 0 || this.__isNotEmpty(labelNode.textContent);
+  }
+
+  /**
+   * @param {string} label
+   * @private
+   */
+  __isNotEmpty(label) {
+    return Boolean(label && label.trim() !== '');
+  }
+
+  /**
+   * @param {HTMLElement} labelNode
+   * @private
+   */
+  __observeLabel(labelNode) {
+    this.__labelObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        const target = mutation.target;
+
+        // Ensure the mutation target is the currently connected label
+        // to ignore async mutations dispatched for removed element.
+        const isLabelMutation = target === this.node;
+
+        if (mutation.type === 'attributes') {
+          // We use attributeFilter to only observe ID mutation,
+          // no need to check for attribute name separately.
+          if (isLabelMutation && target.id !== this.defaultId) {
+            this.__updateLabelId(target);
+          }
+        } else if (isLabelMutation || target.parentElement === this.node) {
+          // Update has-label when textContent changes
+          const hasLabel = this.__hasLabel(this.node);
+          this.__toggleHasLabel(hasLabel);
+        }
+      });
+    });
+
+    // Observe changes to label ID attribute, text content and children.
+    this.__labelObserver.observe(labelNode, {
+      attributes: true,
+      attributeFilter: ['id'],
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+  }
+
+  /**
+   * @param {boolean} hasLabel
+   * @private
+   */
+  __toggleHasLabel(hasLabel) {
+    this.host.toggleAttribute('has-label', hasLabel);
+
+    // Make it possible for other mixins to observe change
+    this.dispatchEvent(
+      new CustomEvent('label-changed', {
+        detail: {
+          hasLabel,
+          node: this.node
+        }
+      })
+    );
+  }
+
+  /**
+   * @param {string} label
+   * @private
+   */
+  __updateDefaultLabel(label) {
+    if (this.defaultNode) {
+      this.defaultNode.textContent = label;
+
+      // Update has-label if default label is used
+      if (this.defaultNode === this.node) {
+        const hasLabel = this.__isNotEmpty(label);
+        this.__toggleHasLabel(hasLabel);
+      }
+    }
+  }
+
+  /**
+   * @param {HTMLElement} labelNode
+   * @private
+   */
+  __updateLabelId(labelNode) {
+    if (!labelNode.id) {
+      labelNode.id = this.defaultId;
+    }
+  }
+}

package/src/label-mixin.d.ts

@@ -1,10 +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 { Constructor } from '@open-wc/dedupe-mixin';
 import { SlotMixinClass } from '@vaadin/component-base/src/slot-mixin.js';
+import { LabelController } from './label-controller.js';
 
 /**
  * A mixin to provide label via corresponding property or named slot.
@@ -21,7 +22,7 @@ export declare class LabelMixinClass {
 
   protected readonly _labelNode: HTMLLabelElement;
 
-  protected _labelChanged(label: string | null | undefined): void;
+  protected _labelController: LabelController;
 
-  protected _toggleHasLabelAttribute(): void;
+  protected _labelChanged(label: string | null | undefined): void;
 }

package/src/label-mixin.js

@@ -1,10 +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 { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { LabelController } from './label-controller.js';
 
 /**
  * A mixin to provide label via corresponding property or named slot.
@@ -14,7 +15,7 @@ import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
  */
 export const LabelMixin = dedupingMixin(
   (superclass) =>
-    class LabelMixinClass extends SlotMixin(superclass) {
+    class LabelMixinClass extends ControllerMixin(superclass) {
       static get properties() {
         return {
           /**
@@ -29,65 +30,25 @@ export const LabelMixin = dedupingMixin(
       }
 
       /** @protected */
-      get slots() {
-        return {
-          ...super.slots,
-          label: () => {
-            const label = document.createElement('label');
-            label.textContent = this.label;
-            return label;
-          }
-        };
+      get _labelId() {
+        return this._labelController.labelId;
       }
 
       /** @protected */
       get _labelNode() {
-        return this._getDirectSlotChild('label');
+        return this._labelController.node;
       }
 
       constructor() {
         super();
 
-        // Ensure every instance has unique ID
-        const uniqueId = (LabelMixinClass._uniqueLabelId = 1 + LabelMixinClass._uniqueLabelId || 0);
-        this._labelId = `label-${this.localName}-${uniqueId}`;
-
-        /**
-         * @type {MutationObserver}
-         * @private
-         */
-        this.__labelNodeObserver = new MutationObserver(() => {
-          this._toggleHasLabelAttribute();
-        });
-      }
-
-      /** @protected */
-      ready() {
-        super.ready();
-
-        if (this._labelNode) {
-          this._labelNode.id = this._labelId;
-          this._toggleHasLabelAttribute();
-
-          this.__labelNodeObserver.observe(this._labelNode, { childList: true, subtree: true, characterData: true });
-        }
+        this._labelController = new LabelController(this);
+        this.addController(this._labelController);
       }
 
       /** @protected */
       _labelChanged(label) {
-        if (this._labelNode) {
-          this._labelNode.textContent = label;
-          this._toggleHasLabelAttribute();
-        }
-      }
-
-      /** @protected */
-      _toggleHasLabelAttribute() {
-        if (this._labelNode) {
-          const hasLabel = this._labelNode.children.length > 0 || this._labelNode.textContent.trim() !== '';
-
-          this.toggleAttribute('has-label', hasLabel);
-        }
+        this._labelController.setLabel(label);
       }
     }
 );

package/src/labelled-input-controller.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 { ReactiveController } from 'lit';

package/src/labelled-input-controller.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/
  */
 
@@ -8,15 +8,28 @@
  * A controller for linking a `<label>` element with an `<input>` element.
  */
 export class LabelledInputController {
-  constructor(input, label) {
+  constructor(input, labelController) {
     this.input = input;
     this.__preventDuplicateLabelClick = this.__preventDuplicateLabelClick.bind(this);
 
+    labelController.addEventListener('label-changed', (event) => {
+      this.__initLabel(event.detail.node);
+    });
+
+    // Initialize the default label element
+    this.__initLabel(labelController.node);
+  }
+
+  /**
+   * @param {HTMLElement} label
+   * @private
+   */
+  __initLabel(label) {
     if (label) {
       label.addEventListener('click', this.__preventDuplicateLabelClick);
 
-      if (input) {
-        label.setAttribute('for', input.id);
+      if (this.input) {
+        label.setAttribute('for', this.input.id);
       }
     }
   }