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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.0.0-alpha5",
+  "version": "23.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.0.0-alpha5",
+    "@vaadin/component-base": "23.0.0-beta1",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "74f9294964eb8552d96578c14af6ad214f5257bc"
+  "gitHead": "467244b76021176c109df675799b07029b293e58"
 }

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

@@ -1,15 +0,0 @@
-/**
- * @license
- * 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 { LabelMixinClass } from './label-mixin.js';
-import { SlotTargetMixinClass } from './slot-target-mixin.js';
-
-/**
- * A mixin to forward any content from the default slot to the label node.
- */
-export declare function SlotLabelMixin<T extends Constructor<HTMLElement>>(
-  base: T
-): T & Constructor<LabelMixinClass> & Constructor<SlotTargetMixinClass>;

package/src/slot-label-mixin.js

@@ -1,25 +0,0 @@
-/**
- * @license
- * 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 { LabelMixin } from './label-mixin.js';
-import { SlotTargetMixin } from './slot-target-mixin.js';
-
-/**
- * A mixin to forward any content from the default slot to the label node.
- *
- * @polymerMixin
- * @mixes LabelMixin
- * @mixes SlotTargetMixin
- */
-export const SlotLabelMixin = dedupingMixin(
-  (superclass) =>
-    class SlotLabelMixinClass extends SlotTargetMixin(LabelMixin(superclass)) {
-      /** @protected */
-      get _slotTarget() {
-        return this._labelNode;
-      }
-    }
-);

package/src/slot-target-mixin.d.ts

@@ -1,25 +0,0 @@
-/**
- * @license
- * 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';
-
-/**
- * A mixin to copy the content from a source slot to a target element.
- */
-export declare function SlotTargetMixin<T extends Constructor<HTMLElement>>(
-  base: T
-): T & Constructor<SlotTargetMixinClass>;
-
-export declare class SlotTargetMixinClass {
-  /**
-   * A reference to the source slot from which the content is copied to the target element.
-   */
-  protected readonly _sourceSlot: HTMLSlotElement;
-
-  /**
-   * A reference to the target element to which the content is copied from the source slot.
-   */
-  protected readonly _slotTarget: HTMLElement;
-}

package/src/slot-target-mixin.js

@@ -1,110 +0,0 @@
-/**
- * @license
- * 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';
-
-/**
- * A mixin to copy the content from a source slot to a target element.
- *
- * @polymerMixin
- */
-export const SlotTargetMixin = dedupingMixin(
-  (superclass) =>
-    class SlotTargetMixinClass extends superclass {
-      /** @protected */
-      ready() {
-        super.ready();
-
-        if (this._sourceSlot) {
-          this.__sourceSlotObserver = new MutationObserver(() => this.__checkAndCopyNodesToSlotTarget());
-
-          this.__checkAndCopyNodesToSlotTarget();
-
-          this._sourceSlot.addEventListener('slotchange', () => {
-            this.__checkAndCopyNodesToSlotTarget();
-          });
-        }
-      }
-
-      /**
-       * A reference to the source slot from which the nodes are copied to the target element.
-       *
-       * @type {HTMLSlotElement | null}
-       * @protected
-       */
-      get _sourceSlot() {
-        console.warn(`Please implement the '_sourceSlot' property in <${this.localName}>`);
-        return null;
-      }
-
-      /**
-       * A reference to the target element to which the nodes are copied from the source slot.
-       *
-       * @type {HTMLElement | null}
-       * @protected
-       */
-      get _slotTarget() {
-        console.warn(`Please implement the '_slotTarget' property in <${this.localName}>`);
-        return null;
-      }
-
-      /**
-       * Copies every node from the source slot to the target element
-       * once the source slot' content is changed.
-       *
-       * @private
-       */
-      __checkAndCopyNodesToSlotTarget() {
-        this.__sourceSlotObserver.disconnect();
-
-        if (!this._slotTarget) {
-          return;
-        }
-
-        // Remove any existing clones from the slot target
-        if (this.__slotTargetClones) {
-          this.__slotTargetClones.forEach((node) => {
-            if (node.parentElement === this._slotTarget) {
-              this._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) {
-          this._slotTarget.innerHTML = '';
-          this.__copyNodesToSlotTarget(nodes);
-        }
-      }
-
-      /**
-       * Copies the nodes to the target element.
-       *
-       * @protected
-       * @param {!Array<!Node>} nodes
-       */
-      __copyNodesToSlotTarget(nodes) {
-        this.__slotTargetClones = this.__slotTargetClones || [];
-        nodes.forEach((node) => {
-          // Clone the nodes and append the clones to the target slot
-          const clone = node.cloneNode(true);
-          this.__slotTargetClones.push(clone);
-          this._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
-          });
-        });
-      }
-    }
-);