@vaadin/component-base 23.0.0-alpha1 → 23.0.0-alpha2

package/src/iron-list-core.js

@@ -186,6 +186,10 @@ export const ironList = {
     return Math.max(0, virtualCount - this._physicalCount);
   },
 
+  get _virtualStart() {
+    return this._virtualStartVal || 0;
+  },
+
   set _virtualStart(val) {
     val = this._clamp(val, 0, this._maxVirtualStart);
     if (this.grid) {
@@ -194,8 +198,8 @@ export const ironList = {
     this._virtualStartVal = val;
   },
 
-  get _virtualStart() {
-    return this._virtualStartVal || 0;
+  get _physicalStart() {
+    return this._physicalStartVal || 0;
   },
 
   /**
@@ -212,10 +216,6 @@ export const ironList = {
     this._physicalStartVal = val;
   },
 
-  get _physicalStart() {
-    return this._physicalStartVal || 0;
-  },
-
   /**
    * The k-th tile that is at the bottom of the scrolling list.
    */
@@ -223,14 +223,14 @@ export const ironList = {
     return (this._physicalStart + this._physicalCount - 1) % this._physicalCount;
   },
 
-  set _physicalCount(val) {
-    this._physicalCountVal = val;
-  },
-
   get _physicalCount() {
     return this._physicalCountVal || 0;
   },
 
+  set _physicalCount(val) {
+    this._physicalCountVal = val;
+  },
+
   /**
    * An optimal physical size such that we will have enough physical items
    * to fill up the viewport and recycle when the user scrolls.
@@ -548,7 +548,9 @@ export const ironList = {
   },
 
   _gridChanged: function (newGrid, oldGrid) {
-    if (typeof oldGrid === 'undefined') return;
+    if (typeof oldGrid === 'undefined') {
+      return;
+    }
     this.notifyResize();
     flush();
     newGrid && this._updateGridMetrics();

package/src/slot-controller.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ReactiveController } from 'lit';
+
+export class SlotController implements ReactiveController {
+  constructor(
+    host: HTMLElement,
+    slotName: string,
+    slotFactory?: () => HTMLElement,
+    slotInitializer?: (host: HTMLElement, node: HTMLElement) => void
+  );
+
+  hostConnected(): void;
+
+  /**
+   * The controller host element.
+   */
+  host: HTMLElement;
+
+  /**
+   * The slotted node managed by the controller.
+   */
+  node: HTMLElement;
+
+  /**
+   * Return a reference to the node managed by the controller.
+   */
+  getSlotChild(): Node;
+
+  protected initialized: boolean;
+
+  protected defaultNode: Node;
+
+  /**
+   * Override to initialize the newly added custom node.
+   */
+  protected initCustomNode(node: Node): void;
+
+  /**
+   * Override to cleanup slotted node when it's removed.
+   */
+  protected teardownNode(node: Node): void;
+
+  /**
+   * Setup the observer to manage slot content changes.
+   */
+  protected observe(): void;
+}

package/src/slot-controller.js

@@ -0,0 +1,122 @@
+/**
+ * @license
+ * Copyright (c) 2021 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';
+
+/**
+ * A controller for providing content to slot element and observing changes.
+ */
+export class SlotController {
+  constructor(host, slotName, slotFactory, slotInitializer) {
+    this.host = host;
+    this.slotName = slotName;
+    this.slotFactory = slotFactory;
+    this.slotInitializer = slotInitializer;
+  }
+
+  hostConnected() {
+    if (!this.initialized) {
+      const { host, slotName, slotFactory, slotInitializer } = this;
+
+      const slotted = this.getSlotChild();
+
+      if (!slotted) {
+        // Slot factory is optional, some slots don't have default content.
+        if (slotFactory) {
+          const slotContent = slotFactory(host);
+          if (slotContent instanceof Element) {
+            if (slotName !== '') {
+              slotContent.setAttribute('slot', slotName);
+            }
+            host.appendChild(slotContent);
+            this.node = slotContent;
+
+            // Store reference to not pass default node to `initCustomNode`.
+            this.defaultNode = slotContent;
+          }
+        }
+      } else {
+        this.node = slotted;
+      }
+
+      // 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(host, this.node);
+      }
+
+      // TODO: Consider making this behavior opt-in to improve performance.
+      this.observe();
+
+      this.initialized = true;
+    }
+  }
+
+  /**
+   * Return a reference to the node managed by the controller.
+   * @return {Node}
+   */
+  getSlotChild() {
+    const { slotName } = this;
+    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) ||
+        (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
+      );
+    });
+  }
+
+  /**
+   * Override to initialize the newly added custom node.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  initCustomNode(_node) {}
+
+  /**
+   * Override to teardown slotted node when it's removed.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  teardownNode(_node) {}
+
+  /**
+   * Setup the observer to manage slot content changes.
+   * @protected
+   */
+  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) => {
+      // 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) => {
+          this.teardownNode(node);
+        });
+      }
+
+      if (newNode) {
+        // Custom node is added, remove the current one.
+        if (current && current.isConnected) {
+          this.host.removeChild(current);
+        }
+
+        this.node = newNode;
+
+        if (newNode !== this.defaultNode) {
+          this.initCustomNode(newNode);
+        }
+      }
+    });
+  }
+}

package/src/slot-mixin.js

@@ -37,7 +37,9 @@ export const SlotMixin = dedupingMixin(
             const slotFactory = this.slots[slotName];
             const slotContent = slotFactory();
             if (slotContent instanceof Element) {
-              slotContent.setAttribute('slot', slotName);
+              if (slotName !== '') {
+                slotContent.setAttribute('slot', slotName);
+              }
               this.appendChild(slotContent);
             }
           }
@@ -46,7 +48,13 @@ export const SlotMixin = dedupingMixin(
 
       /** @protected */
       _getDirectSlotChild(slotName) {
-        return Array.from(this.children).find((el) => el.slot === 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/virtualizer-iron-list-adapter.js

@@ -155,6 +155,10 @@ export class IronListAdapter {
     return element ? this.scrollTarget.getBoundingClientRect().top - element.getBoundingClientRect().top : undefined;
   }
 
+  get size() {
+    return this.__size;
+  }
+
   set size(size) {
     if (size === this.size) {
       return;
@@ -204,10 +208,6 @@ export class IronListAdapter {
     flush();
   }
 
-  get size() {
-    return this.__size;
-  }
-
   /** @private */
   get _scrollTop() {
     return this.scrollTarget.scrollTop;
@@ -466,7 +466,6 @@ export class IronListAdapter {
       this._vidxOffset = 0;
     } else if (this.__skipNextVirtualIndexAdjust) {
       this.__skipNextVirtualIndexAdjust = false;
-      return;
     } else if (Math.abs(delta) > 10000) {
       // Process a large scroll position change
       const scale = this._scrollTop / (this.scrollTarget.scrollHeight - this.scrollTarget.offsetHeight);

package/src/virtualizer.js

@@ -17,18 +17,18 @@ export class Virtualizer {
 
   /**
    * The size of the virtualizer
-   * @param {number} size The size of the virtualizer
+   * @return {number | undefined} The size of the virtualizer
    */
-  set size(size) {
-    this.__adapter.size = size;
+  get size() {
+    return this.__adapter.size;
   }
 
   /**
    * The size of the virtualizer
-   * @return {number | undefined} The size of the virtualizer
+   * @param {number} size The size of the virtualizer
    */
-  get size() {
-    return this.__adapter.size;
+  set size(size) {
+    this.__adapter.size = size;
   }
 
   /**