@vaadin/component-base 24.0.0-alpha3 → 24.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.0.0-alpha3",
+  "version": "24.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "7a013a3c5a56abd61dd4f7773c6ec77c3541bdf2"
+  "gitHead": "66be46e82c4d0a673859fbc9bdb1581dd89f360c"
 }

package/src/dir-mixin.d.ts

@@ -11,6 +11,8 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 export declare function DirMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<DirMixinClass> & T;
 
 export declare class DirMixinClass {
+  protected readonly __isRTL: boolean;
+
   protected __getNormalizedScrollLeft(element: Element | null): number;
 
   protected __setNormalizedScrollLeft(element: Element | null, scrollLeft: number): void;

package/src/dir-mixin.js

@@ -112,6 +112,14 @@ export const DirMixin = (superClass) =>
       this.__unsubscribe();
     }
 
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get __isRTL() {
+      return this.getAttribute('dir') === 'rtl';
+    }
+
     /** @protected */
     _valueToNodeAttribute(node, value, attribute) {
       // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property

package/src/element-mixin.js

@@ -39,7 +39,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.0.0-alpha3';
+      return '24.0.0-alpha4';
     }
 
     /** @protected */

package/src/slot-controller.d.ts

@@ -16,8 +16,16 @@ export class SlotController extends EventTarget implements ReactiveController {
    */
   node: HTMLElement;
 
+  /**
+   * The list of slotted nodes managed by the controller.
+   * Only used when `multiple` property is set to `true`.
+   */
+  nodes: HTMLElement[];
+
   protected initialized: boolean;
 
+  protected multiple: boolean;
+
   protected defaultNode: Node;
 
   protected defaultId: string;
@@ -27,6 +35,7 @@ export class SlotController extends EventTarget implements ReactiveController {
     slotName: string,
     tagName?: string,
     config?: {
+      multiple?: boolean;
       observe?: boolean;
       useUniqueId?: boolean;
       initializer?(host: HTMLElement, node: HTMLElement): void;
@@ -35,6 +44,11 @@ export class SlotController extends EventTarget implements ReactiveController {
 
   hostConnected(): void;
 
+  /**
+   * Return the list of nodes matching the slot managed by the controller.
+   */
+  getSlotChildren(): Node[];
+
   /**
    * Return a reference to the node managed by the controller.
    */
@@ -42,6 +56,8 @@ export class SlotController extends EventTarget implements ReactiveController {
 
   protected attachDefaultNode(): Node | undefined;
 
+  protected initAddedNode(node: Node): void;
+
   protected initNode(node: Node): void;
 
   /**

package/src/slot-controller.js

@@ -26,14 +26,19 @@ export class SlotController extends EventTarget {
   constructor(host, slotName, tagName, config = {}) {
     super();
 
-    const { initializer, observe, useUniqueId } = config;
+    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 = [];
+    }
+
     // Only generate the default ID if requested by the controller.
     if (useUniqueId) {
       this.defaultId = SlotController.generateId(slotName, host);
@@ -42,17 +47,12 @@ export class SlotController extends EventTarget {
 
   hostConnected() {
     if (!this.initialized) {
-      let node = this.getSlotChild();
-
-      if (!node) {
-        node = this.attachDefaultNode();
+      if (this.multiple) {
+        this.initMultiple();
       } else {
-        this.node = node;
-        this.initCustomNode(node);
+        this.initSingle();
       }
 
-      this.initNode(node);
-
       if (this.observe) {
         this.observeSlot();
       }
@@ -61,6 +61,35 @@ export class SlotController extends EventTarget {
     }
   }
 
+  /** @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);
+      });
+    }
+  }
+
   /**
    * Create and attach default node using the slot factory.
    * @return {Node | undefined}
@@ -92,12 +121,12 @@ export class SlotController extends EventTarget {
   }
 
   /**
-   * Return a reference to the node managed by the controller.
+   * Return the list of nodes matching the slot managed by the controller.
    * @return {Node}
    */
-  getSlotChild() {
+  getSlotChildren() {
     const { slotName } = this;
-    return Array.from(this.host.childNodes).find((node) => {
+    return Array.from(this.host.childNodes).filter((node) => {
       // Either an element (any slot) or a text node (only un-named slot).
       return (
         (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
@@ -106,6 +135,14 @@ export class SlotController extends EventTarget {
     });
   }
 
+  /**
+   * Return a reference to the node managed by the controller.
+   * @return {Node}
+   */
+  getSlotChild() {
+    return this.getSlotChildren()[0];
+  }
+
   /**
    * @param {Node} node
    * @protected
@@ -135,6 +172,14 @@ export class SlotController extends EventTarget {
    */
   teardownNode(_node) {}
 
+  /** @protected */
+  initAddedNode(node) {
+    if (node !== this.defaultNode) {
+      this.initCustomNode(node);
+      this.initNode(node);
+    }
+  }
+
   /**
    * Setup the observer to manage slot content changes.
    * @protected
@@ -145,9 +190,8 @@ export class SlotController extends EventTarget {
     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);
+      const current = this.multiple ? this.nodes : [this.node];
+      const newNodes = info.addedNodes.filter((node) => !current.includes(node));
 
       if (info.removedNodes.length) {
         info.removedNodes.forEach((node) => {
@@ -155,18 +199,22 @@ export class SlotController extends EventTarget {
         });
       }
 
-      if (newNode) {
+      if (newNodes && newNodes.length > 0) {
         // 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);
+        current.forEach((node) => {
+          if (node && node.isConnected) {
+            node.parentNode.removeChild(node);
+          }
+        });
 
-          this.initNode(newNode);
+        if (this.multiple) {
+          this.nodes = newNodes;
+          newNodes.forEach((node) => {
+            this.initAddedNode(node);
+          });
+        } else {
+          this.node = newNodes[0];
+          this.initAddedNode(this.node);
         }
       }
     });