@vaadin/field-base 23.0.0-alpha2 → 23.0.0-beta1

package/src/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 { SlotController } from '@vaadin/component-base/src/slot-controller.js';

package/src/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/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';

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';
@@ -120,6 +120,21 @@ export const InputFieldMixin = (superclass) =>
       this.validate();
     }
 
+    /**
+     * Override an event listener from `InputMixin`
+     * to mark as valid after user started typing.
+     * @param {Event} event
+     * @protected
+     * @override
+     */
+    _onInput(event) {
+      super._onInput(event);
+
+      if (this.invalid) {
+        this.validate();
+      }
+    }
+
     /**
      * Override a method from `InputMixin` to validate the field
      * when a new value is set programmatically.

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

package/src/pattern-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/pattern-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 { timeOut } from '@vaadin/component-base/src/async.js';

package/src/shadow-focus-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/shadow-focus-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/slot-styles-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/slot-styles-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/slot-target-controller.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * 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';
+
+export class SlotTargetController implements ReactiveController {
+  constructor(
+    sourceSlot: HTMLSlotElement,
+    targetFactory: () => HTMLElement,
+    copyCallback?: (nodes: HTMLElement[]) => void
+  );
+
+  hostConnected(): void;
+
+  /**
+   * The source `<slot>` element to copy nodes from.
+   */
+  protected sourceSlot: HTMLSlotElement;
+
+  /**
+   * Function used to get a reference to slot target.
+   */
+  protected targetFactory: () => HTMLElement;
+
+  /**
+   * Function called after copying nodes to target.
+   */
+  protected copyCallback?: (nodes: HTMLElement[]) => void;
+}

package/src/slot-target-controller.js

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller to copy the content from a source slot to a target element.
+ */
+export class SlotTargetController {
+  constructor(sourceSlot, targetFactory, callback) {
+    /**
+     * The source `<slot>` element to copy nodes from.
+     */
+    this.sourceSlot = sourceSlot;
+
+    /**
+     * Function used to get a reference to slot target.
+     */
+    this.targetFactory = targetFactory;
+
+    /**
+     * Function called after copying nodes to target.
+     */
+    this.copyCallback = callback;
+
+    if (sourceSlot) {
+      sourceSlot.addEventListener('slotchange', () => {
+        // Copy in progress, ignore this event.
+        if (this.__copying) {
+          this.__copying = false;
+        } else {
+          this.__checkAndCopyNodesToSlotTarget();
+        }
+      });
+    }
+  }
+
+  hostConnected() {
+    this.__sourceSlotObserver = new MutationObserver(() => this.__checkAndCopyNodesToSlotTarget());
+
+    // Ensure the content is up to date when host is connected
+    // to handle e.g. mutating text content while disconnected.
+    this.__checkAndCopyNodesToSlotTarget();
+  }
+
+  /**
+   * Copies every node from the source slot to the target element
+   * once the source slot' content is changed.
+   *
+   * @private
+   */
+  __checkAndCopyNodesToSlotTarget() {
+    this.__sourceSlotObserver.disconnect();
+
+    // Ensure slot target element is up to date.
+    const slotTarget = this.targetFactory();
+
+    if (!slotTarget) {
+      return;
+    }
+
+    // Remove any existing clones from the slot target
+    if (this.__slotTargetClones) {
+      this.__slotTargetClones.forEach((node) => {
+        if (node.parentElement === slotTarget) {
+          slotTarget.removeChild(node);
+        }
+      });
+      delete this.__slotTargetClones;
+    }
+
+    // Exclude whitespace text nodes
+    const nodes = this.sourceSlot
+      .assignedNodes({ flatten: true })
+      .filter((node) => !(node.nodeType == Node.TEXT_NODE && node.textContent.trim() === ''));
+
+    if (nodes.length > 0) {
+      slotTarget.innerHTML = '';
+
+      // Ignore next slotchange
+      this.__copying = true;
+
+      this.__copyNodesToSlotTarget(nodes, slotTarget);
+    }
+  }
+
+  /**
+   * Copies the nodes to the target element.
+   *
+   * @param {!Array<!Node>} nodes
+   * @param {HTMLElement} slotTarget
+   * @private
+   */
+  __copyNodesToSlotTarget(nodes, slotTarget) {
+    this.__slotTargetClones = this.__slotTargetClones || [];
+
+    nodes.forEach((node) => {
+      // Clone the nodes and append the clones to the target
+      const clone = node.cloneNode(true);
+      this.__slotTargetClones.push(clone);
+
+      slotTarget.appendChild(clone);
+
+      // Observe all changes to the source node to have the clones updated
+      this.__sourceSlotObserver.observe(node, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    });
+
+    // Run callback e.g. to show a deprecation warning
+    if (typeof this.copyCallback === 'function') {
+      this.copyCallback(nodes);
+    }
+  }
+}

package/src/styles/clear-button-styles.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 { CSSResult } from 'lit';

package/src/styles/clear-button-styles.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 { css } from 'lit';

package/src/styles/field-shared-styles.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 { CSSResult } from 'lit';