@vaadin/component-base 23.2.16 → 23.2.17

package/src/slot-controller.js

@@ -1,10 +1,9 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 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 { isEmptyTextNode } from './dom-utils.js';
 import { generateUniqueId } from './unique-id-utils.js';
 
 /**
@@ -14,97 +13,64 @@ export class SlotController extends EventTarget {
   /**
    * Ensure that every instance has unique ID.
    *
-   * @param {HTMLElement} host
    * @param {string} slotName
+   * @param {HTMLElement} host
    * @return {string}
    * @protected
    */
-  static generateId(host, slotName) {
+  static generateId(slotName, host) {
     const prefix = slotName || 'default';
     return `${prefix}-${host.localName}-${generateUniqueId()}`;
   }
 
-  constructor(host, slotName, tagName, config = {}) {
+  constructor(host, slotName, slotFactory, slotInitializer, useUniqueId) {
     super();
 
-    const { initializer, multiple, observe, useUniqueId } = config;
-
     this.host = host;
     this.slotName = slotName;
-    this.tagName = tagName;
-    this.observe = typeof observe === 'boolean' ? observe : true;
-    this.multiple = typeof multiple === 'boolean' ? multiple : false;
-    this.slotInitializer = initializer;
-
-    if (multiple) {
-      this.nodes = [];
-    }
+    this.slotFactory = slotFactory;
+    this.slotInitializer = slotInitializer;
 
     // Only generate the default ID if requested by the controller.
     if (useUniqueId) {
-      this.defaultId = this.constructor.generateId(host, slotName);
+      this.defaultId = SlotController.generateId(slotName, host);
     }
   }
 
   hostConnected() {
     if (!this.initialized) {
-      if (this.multiple) {
-        this.initMultiple();
-      } else {
-        this.initSingle();
-      }
+      let node = this.getSlotChild();
 
-      if (this.observe) {
-        this.observeSlot();
+      if (!node) {
+        node = this.attachDefaultNode();
+      } else {
+        this.node = node;
+        this.initCustomNode(node);
       }
 
-      this.initialized = true;
-    }
-  }
-
-  /** @protected */
-  initSingle() {
-    let node = this.getSlotChild();
-
-    if (!node) {
-      node = this.attachDefaultNode();
       this.initNode(node);
-    } else {
-      this.node = node;
-      this.initAddedNode(node);
-    }
-  }
 
-  /** @protected */
-  initMultiple() {
-    const children = this.getSlotChildren();
-
-    if (children.length === 0) {
-      const defaultNode = this.attachDefaultNode();
-      this.nodes = [defaultNode];
-      this.initNode(defaultNode);
-    } else {
-      this.nodes = children;
-      children.forEach((node) => {
-        this.initAddedNode(node);
-      });
+      // TODO: Consider making this behavior opt-in to improve performance.
+      this.observe();
+
+      this.initialized = true;
     }
   }
 
   /**
-   * Create and attach default node using the provided tag name, if any.
+   * Create and attach default node using the slot factory.
    * @return {Node | undefined}
    * @protected
    */
   attachDefaultNode() {
-    const { host, slotName, tagName } = this;
+    const { host, slotName, slotFactory } = this;
 
     // Check if the node was created previously and if so, reuse it.
     let node = this.defaultNode;
 
-    // Tag name is optional, sometimes we don't init default content.
-    if (!node && tagName) {
-      node = document.createElement(tagName);
+    // Slot factory is optional, some slots don't have default content.
+    if (!node && slotFactory) {
+      node = slotFactory(host);
       if (node instanceof Element) {
         if (slotName !== '') {
           node.setAttribute('slot', slotName);
@@ -122,12 +88,12 @@ export class SlotController extends EventTarget {
   }
 
   /**
-   * Return the list of nodes matching the slot managed by the controller.
+   * Return a reference to the node managed by the controller.
    * @return {Node}
    */
-  getSlotChildren() {
+  getSlotChild() {
     const { slotName } = this;
-    return Array.from(this.host.childNodes).filter((node) => {
+    return Array.from(this.host.childNodes).find((node) => {
       // Either an element (any slot) or a text node (only un-named slot).
       return (
         (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
@@ -137,16 +103,6 @@ export class SlotController extends EventTarget {
   }
 
   /**
-   * Return a reference to the node managed by the controller.
-   * @return {Node}
-   */
-  getSlotChild() {
-    return this.getSlotChildren()[0];
-  }
-
-  /**
-   * Run `slotInitializer` for the node managed by the controller.
-   *
    * @param {Node} node
    * @protected
    */
@@ -155,7 +111,7 @@ export class SlotController extends EventTarget {
     // Don't try to bind `this` to initializer (normally it's arrow function).
     // Instead, pass the host as a first argument to access component's state.
     if (slotInitializer) {
-      slotInitializer(node, this.host);
+      slotInitializer(this.host, node);
     }
   }
 
@@ -175,34 +131,19 @@ export class SlotController extends EventTarget {
    */
   teardownNode(_node) {}
 
-  /**
-   * Run both `initCustomNode` and `initNode` for a custom slotted node.
-   *
-   * @param {Node} node
-   * @protected
-   */
-  initAddedNode(node) {
-    if (node !== this.defaultNode) {
-      this.initCustomNode(node);
-      this.initNode(node);
-    }
-  }
-
   /**
    * Setup the observer to manage slot content changes.
    * @protected
    */
-  observeSlot() {
+  observe() {
     const { slotName } = this;
     const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
     const slot = this.host.shadowRoot.querySelector(selector);
 
     this.__slotObserver = new FlattenedNodesObserver(slot, (info) => {
-      const current = this.multiple ? this.nodes : [this.node];
-
-      // Calling `slot.assignedNodes()` includes whitespace text nodes in case of default slot:
-      // unlike comment nodes, they are not filtered out. So we need to manually ignore them.
-      const newNodes = info.addedNodes.filter((node) => !isEmptyTextNode(node) && !current.includes(node));
+      // TODO: support default slot with multiple nodes (e.g. confirm-dialog)
+      const current = this.node;
+      const newNode = info.addedNodes.find((node) => node !== current);
 
       if (info.removedNodes.length) {
         info.removedNodes.forEach((node) => {
@@ -210,22 +151,18 @@ export class SlotController extends EventTarget {
         });
       }
 
-      if (newNodes && newNodes.length > 0) {
+      if (newNode) {
         // Custom node is added, remove the current one.
-        current.forEach((node) => {
-          if (node && node.isConnected) {
-            node.parentNode.removeChild(node);
-          }
-        });
+        if (current && current.isConnected) {
+          this.host.removeChild(current);
+        }
+
+        this.node = newNode;
+
+        if (newNode !== this.defaultNode) {
+          this.initCustomNode(newNode);
 
-        if (this.multiple) {
-          this.nodes = newNodes;
-          newNodes.forEach((node) => {
-            this.initAddedNode(node);
-          });
-        } else {
-          this.node = newNodes[0];
-          this.initAddedNode(this.node);
+          this.initNode(newNode);
         }
       }
     });

package/src/slot-mixin.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+/**
+ * A mixin to provide content for named slots defined by component.
+ */
+export declare function SlotMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<SlotMixinClass> & T;
+
+export declare class SlotMixinClass {
+  /**
+   * List of named slots to initialize.
+   */
+  protected readonly slots: Record<string, () => HTMLElement>;
+}

package/src/slot-mixin.js

@@ -0,0 +1,60 @@
+/**
+ * @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 provide content for named slots defined by component.
+ *
+ * @polymerMixin
+ */
+export const SlotMixin = dedupingMixin(
+  (superclass) =>
+    class SlotMixinClass extends superclass {
+      /**
+       * List of named slots to initialize.
+       * @protected
+       */
+      get slots() {
+        return {};
+      }
+
+      /** @protected */
+      ready() {
+        super.ready();
+        this._connectSlotMixin();
+      }
+
+      /** @private */
+      _connectSlotMixin() {
+        Object.keys(this.slots).forEach((slotName) => {
+          // Ignore labels of nested components, if any
+          const hasContent = this._getDirectSlotChild(slotName) !== undefined;
+
+          if (!hasContent) {
+            const slotFactory = this.slots[slotName];
+            const slotContent = slotFactory();
+            if (slotContent instanceof Element) {
+              if (slotName !== '') {
+                slotContent.setAttribute('slot', slotName);
+              }
+              this.appendChild(slotContent);
+            }
+          }
+        });
+      }
+
+      /** @protected */
+      _getDirectSlotChild(slotName) {
+        return Array.from(this.childNodes).find((node) => {
+          // Either an element (any slot) or a text node (only un-named slot).
+          return (
+            (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
+            (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
+          );
+        });
+      }
+    },
+);

package/src/tabindex-mixin.d.ts

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

package/src/tabindex-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 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 { DisabledMixin } from './disabled-mixin.js';

package/src/templates.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/unique-id-utils.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/unique-id-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/virtualizer-iron-list-adapter.js

@@ -1,10 +1,8 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-/* eslint-disable @typescript-eslint/member-ordering */
-// https://github.com/vaadin/eslint-config-vaadin/issues/33
 import { animationFrame, timeOut } from './async.js';
 import { isSafari } from './browser-utils.js';
 import { Debouncer, flush } from './debounce.js';
@@ -482,9 +480,7 @@ export class IronListAdapter {
       deltaY *= this._scrollPageHeight;
     }
 
-    if (!this._deltaYAcc) {
-      this._deltaYAcc = 0;
-    }
+    this._deltaYAcc = this._deltaYAcc || 0;
 
     if (this._wheelAnimationFrame) {
       // Accumulate wheel delta while a frame is being processed

package/src/virtualizer.js

@@ -15,24 +15,6 @@ export class Virtualizer {
     this.__adapter = new IronListAdapter(config);
   }
 
-  /**
-   * Gets the index of the first visible item in the viewport.
-   *
-   * @return {number}
-   */
-  get firstVisibleIndex() {
-    return this.__adapter.adjustedFirstVisibleIndex;
-  }
-
-  /**
-   * Gets the index of the last visible item in the viewport.
-   *
-   * @return {number}
-   */
-  get lastVisibleIndex() {
-    return this.__adapter.adjustedLastVisibleIndex;
-  }
-
   /**
    * The size of the virtualizer
    * @return {number | undefined} The size of the virtualizer
@@ -80,4 +62,22 @@ export class Virtualizer {
   flush() {
     this.__adapter.flush();
   }
+
+  /**
+   * Gets the index of the first visible item in the viewport.
+   *
+   * @return {number}
+   */
+  get firstVisibleIndex() {
+    return this.__adapter.adjustedFirstVisibleIndex;
+  }
+
+  /**
+   * Gets the index of the last visible item in the viewport.
+   *
+   * @return {number}
+   */
+  get lastVisibleIndex() {
+    return this.__adapter.adjustedLastVisibleIndex;
+  }
 }

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

@@ -1,48 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { DisabledMixinClass } from './disabled-mixin.js';
-import type { FocusMixinClass } from './focus-mixin.js';
-import type { TabindexMixinClass } from './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,
-): Constructor<DelegateFocusMixinClass> &
-  Constructor<DisabledMixinClass> &
-  Constructor<FocusMixinClass> &
-  Constructor<TabindexMixinClass> &
-  T;
-
-export declare class DelegateFocusMixinClass {
-  /**
-   * Specify that this control should have input focus when the page loads.
-   */
-  autofocus: boolean;
-
-  /**
-   * A reference to the focusable element controlled by the mixin.
-   * It can be an input, textarea, button or any element with tabindex > -1.
-   *
-   * Any component implementing this mixin is expected to provide it
-   * by using `this._setFocusElement(input)` Polymer API.
-   */
-  readonly focusElement: HTMLElement | null | undefined;
-
-  protected _addFocusListeners(element: HTMLElement): void;
-
-  protected _removeFocusListeners(element: HTMLElement): void;
-
-  protected _focusElementChanged(element: HTMLElement, oldElement: HTMLElement): void;
-
-  protected _onBlur(event: FocusEvent): void;
-
-  protected _onFocus(event: FocusEvent): void;
-
-  protected _setFocusElement(element: HTMLElement): void;
-}