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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.0.0-alpha5",
+  "version": "23.0.0-beta4",
   "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-beta4",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "74f9294964eb8552d96578c14af6ad214f5257bc"
+  "gitHead": "d0b447f1c31ca4256a5e26f2dcd27784447ff79b"
 }

package/src/delegate-focus-mixin.d.ts

@@ -6,13 +6,18 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
 
 /**
  * A mixin to forward focus to an element in the light DOM.
  */
 export declare function DelegateFocusMixin<T extends Constructor<HTMLElement>>(
   base: T
-): T & Constructor<DelegateFocusMixinClass> & Constructor<DisabledMixinClass> & Constructor<FocusMixinClass>;
+): T &
+  Constructor<DelegateFocusMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<TabindexMixinClass>;
 
 export declare class DelegateFocusMixinClass {
   /**

package/src/delegate-focus-mixin.js

@@ -4,19 +4,19 @@
  * 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 { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
 
 /**
  * A mixin to forward focus to an element in the light DOM.
  *
  * @polymerMixin
- * @mixes DisabledMixin
  * @mixes FocusMixin
+ * @mixes TabindexMixin
  */
 export const DelegateFocusMixin = dedupingMixin(
   (superclass) =>
-    class DelegateFocusMixinClass extends FocusMixin(DisabledMixin(superclass)) {
+    class DelegateFocusMixinClass extends FocusMixin(TabindexMixin(superclass)) {
       static get properties() {
         return {
           /**
@@ -40,6 +40,19 @@ export const DelegateFocusMixin = dedupingMixin(
             type: Object,
             readOnly: true,
             observer: '_focusElementChanged'
+          },
+
+          /**
+           * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+           *
+           * By default, the host element does not have tabindex attribute. Instead, `focusElement` should have it.
+           * Toggling `tabindex` attribute on the host element propagates its value to `focusElement`.
+           *
+           * @protected
+           */
+          tabindex: {
+            type: Number,
+            value: undefined
           }
         };
       }
@@ -103,6 +116,7 @@ export const DelegateFocusMixin = dedupingMixin(
         if (element) {
           element.disabled = this.disabled;
           this._addFocusListeners(element);
+          this.__forwardTabIndex(this.tabindex);
         } else if (oldElement) {
           this._removeFocusListeners(oldElement);
         }
@@ -162,10 +176,12 @@ export const DelegateFocusMixin = dedupingMixin(
 
       /**
        * @param {boolean} disabled
+       * @param {boolean} oldDisabled
        * @protected
+       * @override
        */
-      _disabledChanged(disabled) {
-        super._disabledChanged(disabled);
+      _disabledChanged(disabled, oldDisabled) {
+        super._disabledChanged(disabled, oldDisabled);
 
         if (this.focusElement) {
           this.focusElement.disabled = disabled;
@@ -175,5 +191,37 @@ export const DelegateFocusMixin = dedupingMixin(
           this.blur();
         }
       }
+
+      /**
+       * Override an observer from `TabindexMixin`.
+       * Do not call super to remove tabindex attribute
+       * from the host after it has been forwarded.
+       * @param {string} tabindex
+       * @protected
+       * @override
+       */
+      _tabindexChanged(tabindex) {
+        this.__forwardTabIndex(tabindex);
+      }
+
+      /** @private */
+      __forwardTabIndex(tabindex) {
+        if (tabindex !== undefined && this.focusElement) {
+          this.focusElement.tabIndex = tabindex;
+
+          // Preserve tabindex="-1" on the host element
+          if (tabindex !== -1) {
+            this.tabindex = undefined;
+          }
+        }
+
+        if (this.disabled && tabindex) {
+          // If tabindex attribute was changed while component was disabled
+          if (tabindex !== -1) {
+            this.__lastTabIndex = tabindex;
+          }
+          this.tabindex = undefined;
+        }
+      }
     }
 );

package/src/error-controller.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @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 that manages the error message node content.
+ */
+export class ErrorController extends SlotController {
+  /**
+   * ID attribute value set on the error message element.
+   */
+  readonly errorId: string;
+
+  /**
+   * String used for the error message text content.
+   */
+  protected errorMessage: string | null | undefined;
+
+  /**
+   * Set to true when the host element is invalid.
+   */
+  protected invalid: boolean;
+
+  /**
+   * Set the error message element text content.
+   */
+  setErrorMessage(errorMessage: string | null | undefined): void;
+
+  /**
+   * Set invalid state for detecting whether to show error message.
+   */
+  setInvalid(invalid: boolean): void;
+}

package/src/error-controller.js

@@ -0,0 +1,134 @@
+/**
+ * @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 that manages the error message node content.
+ */
+export class ErrorController extends SlotController {
+  constructor(host) {
+    super(
+      host,
+      'error-message',
+      () => document.createElement('div'),
+      (_host, node) => {
+        this.__updateErrorId(node);
+
+        this.__updateHasError();
+      }
+    );
+  }
+
+  /**
+   * ID attribute value set on the error message element.
+   *
+   * @return {string}
+   */
+  get errorId() {
+    return this.node && this.node.id;
+  }
+
+  /**
+   * Set the error message element text content.
+   *
+   * @param {string} errorMessage
+   */
+  setErrorMessage(errorMessage) {
+    this.errorMessage = errorMessage;
+
+    this.__updateHasError();
+  }
+
+  /**
+   * Set invalid state for detecting whether to show error message.
+   *
+   * @param {boolean} invalid
+   */
+  setInvalid(invalid) {
+    this.invalid = invalid;
+
+    this.__updateHasError();
+  }
+
+  /**
+   * Override to initialize the newly added custom label.
+   *
+   * @param {Node} errorNode
+   * @protected
+   * @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();
+    }
+
+    this.__updateHasError();
+  }
+
+  /**
+   * Override to cleanup label node when it's removed.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  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 label and ID.
+      this.initNode(errorNode);
+    }
+
+    this.__updateHasError();
+  }
+
+  /**
+   * @param {string} error
+   * @private
+   */
+  __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 ? this.errorMessage : '';
+      errorNode.hidden = !hasError;
+
+      // Role alert will make the error message announce immediately
+      // as the field becomes invalid
+      if (hasError) {
+        errorNode.setAttribute('role', 'alert');
+      } else {
+        errorNode.removeAttribute('role');
+      }
+    }
+
+    this.host.toggleAttribute('has-error-message', hasError);
+  }
+
+  /**
+   * @param {HTMLElement} errorNode
+   * @private
+   */
+  __updateErrorId(errorNode) {
+    if (!errorNode.id) {
+      errorNode.id = this.defaultId;
+    }
+  }
+}

package/src/field-mixin.js

@@ -4,7 +4,7 @@
  * 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';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.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';
@@ -16,11 +16,10 @@ import { ValidateMixin } from './validate-mixin.js';
  * @polymerMixin
  * @mixes ControllerMixin
  * @mixes LabelMixin
- * @mixes SlotMixin
  * @mixes ValidateMixin
  */
 export const FieldMixin = (superclass) =>
-  class FieldMixinClass extends ValidateMixin(LabelMixin(ControllerMixin(SlotMixin(superclass)))) {
+  class FieldMixinClass extends ValidateMixin(LabelMixin(ControllerMixin(superclass))) {
     static get properties() {
       return {
         /**
@@ -38,7 +37,8 @@ export const FieldMixin = (superclass) =>
          * @attr {string} error-message
          */
         errorMessage: {
-          type: String
+          type: String,
+          observer: '_errorMessageChanged'
         },
 
         /**
@@ -55,20 +55,13 @@ 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 ['_invalidChanged(invalid)', '_requiredChanged(required)'];
     }
 
-    static get observers() {
-      return ['_updateErrorMessage(invalid, errorMessage)', '_invalidChanged(invalid)', '_requiredChanged(required)'];
+    /** @protected */
+    get _errorId() {
+      return this._errorController.errorId;
     }
 
     /**
@@ -76,7 +69,7 @@ export const FieldMixin = (superclass) =>
      * @return {HTMLElement}
      */
     get _errorNode() {
-      return this._getDirectSlotChild('error-message');
+      return this._errorController.node;
     }
 
     /** @protected */
@@ -95,15 +88,13 @@ export const FieldMixin = (superclass) =>
     constructor() {
       super();
 
-      // Ensure every instance has unique ID
-      const uniqueId = (FieldMixinClass._uniqueFieldId = 1 + FieldMixinClass._uniqueFieldId || 0);
-      this._errorId = `error-${this.localName}-${uniqueId}`;
-
       this._fieldAriaController = new FieldAriaController(this);
       this._helperController = new HelperController(this);
+      this._errorController = new ErrorController(this);
 
       this.addController(this._fieldAriaController);
       this.addController(this._helperController);
+      this.addController(this._errorController);
 
       this._labelController.addEventListener('label-changed', (event) => {
         const { hasLabel, node } = event.detail;
@@ -116,29 +107,6 @@ export const FieldMixin = (superclass) =>
       });
     }
 
-    /** @protected */
-    ready() {
-      super.ready();
-
-      const error = this._errorNode;
-      if (error) {
-        error.id = this._errorId;
-
-        this.__applyCustomError();
-
-        this._updateErrorMessage(this.invalid, this.errorMessage);
-      }
-    }
-
-    /** @private */
-    __applyCustomError() {
-      const error = this.__errorMessage;
-      if (error && error !== this.errorMessage) {
-        this.errorMessage = error;
-        delete this.__errorMessage;
-      }
-    }
-
     /** @private */
     __helperChanged(hasHelper, helperNode) {
       if (hasHelper) {
@@ -160,32 +128,11 @@ export const FieldMixin = (superclass) =>
     }
 
     /**
-     * @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');
-      }
+    _errorMessageChanged(errorMessage) {
+      this._errorController.setErrorMessage(errorMessage);
     }
 
     /**
@@ -219,6 +166,8 @@ export const FieldMixin = (superclass) =>
      * @protected
      */
     _invalidChanged(invalid) {
+      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).
@@ -227,7 +176,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) {
-          this._fieldAriaController.setErrorId(this._errorId);
+          this._fieldAriaController.setErrorId(this._errorController.errorId);
         } else {
           this._fieldAriaController.setErrorId(null);
         }

package/src/input-control-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,24 @@ 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 }));
+    }
+
+    /**
+     * Fired when the user commits a value change.
+     *
+     * @event change
+     */
+
+    /**
+     * Fired when the value is changed by the user: on every typing keystroke,
+     * and the value is cleared using the clear button.
+     *
+     * @event input
+     */
   };

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/label-controller.js

@@ -41,6 +41,8 @@ export class LabelController extends SlotController {
    * @override
    */
   initCustomNode(labelNode) {
+    this.__updateLabelId(labelNode);
+
     const hasLabel = this.__hasLabel(labelNode);
     this.__toggleHasLabel(hasLabel);
   }

package/src/shadow-focus-mixin.js

@@ -4,7 +4,6 @@
  * 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';
-import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
 import { DelegateFocusMixin } from './delegate-focus-mixin.js';
 
 /**
@@ -13,10 +12,23 @@ import { DelegateFocusMixin } from './delegate-focus-mixin.js';
  * @polymerMixin
  * @mixes DelegateFocusMixin
  * @mixes KeyboardMixin
- * @mixes TabindexMixin
  */
 export const ShadowFocusMixin = (superClass) =>
-  class ShadowFocusMixinClass extends TabindexMixin(DelegateFocusMixin(KeyboardMixin(superClass))) {
+  class ShadowFocusMixinClass extends DelegateFocusMixin(KeyboardMixin(superClass)) {
+    static get properties() {
+      return {
+        /**
+         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+         *
+         * @protected
+         */
+        tabindex: {
+          type: Number,
+          value: 0
+        }
+      };
+    }
+
     /**
      * Override an event listener from `KeyboardMixin`
      * to prevent setting `focused` on Shift Tab.

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