@vaadin/component-base 22.0.0 → 22.0.4

package/index.d.ts

@@ -5,5 +5,6 @@ export { DisabledMixin } from './src/disabled-mixin.js';
 export { ElementMixin } from './src/element-mixin.js';
 export { FocusMixin } from './src/focus-mixin.js';
 export { KeyboardMixin } from './src/keyboard-mixin.js';
+export { SlotController } from './src/slot-controller.js';
 export { SlotMixin } from './src/slot-mixin.js';
 export { TabindexMixin } from './src/tabindex-mixin.js';

package/index.js

@@ -5,5 +5,6 @@ export { DisabledMixin } from './src/disabled-mixin.js';
 export { ElementMixin } from './src/element-mixin.js';
 export { FocusMixin } from './src/focus-mixin.js';
 export { KeyboardMixin } from './src/keyboard-mixin.js';
+export { SlotController } from './src/slot-controller.js';
 export { SlotMixin } from './src/slot-mixin.js';
 export { TabindexMixin } from './src/tabindex-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "22.0.0",
+  "version": "22.0.4",
   "publishConfig": {
     "access": "public"
   },
@@ -41,5 +41,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "b668e9b1a975227fbe34beb70d1cd5b03dce2348"
+  "gitHead": "55891f68d4da41e846e06dfe51dceba1665e41ce"
 }

package/src/active-mixin.d.ts

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

package/src/active-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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 { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';

package/src/browser-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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/controller-mixin.d.ts

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

package/src/controller-mixin.js

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

package/src/dir-helper.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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/dir-helper.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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/dir-mixin.d.ts

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

package/src/dir-mixin.js

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

package/src/disabled-mixin.d.ts

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

package/src/disabled-mixin.js

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

package/src/element-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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 '../custom_typings/vaadin-usage-statistics.js';

package/src/element-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 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 { usageStatistics } from '@vaadin/vaadin-usage-statistics/vaadin-usage-statistics.js';
@@ -32,7 +32,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '22.0.0';
+      return '22.0.4';
     }
 
     /** @protected */

package/src/focus-mixin.d.ts

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

package/src/focus-mixin.js

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

package/src/keyboard-mixin.d.ts

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

package/src/keyboard-mixin.js

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

package/src/slot-controller.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @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 SlotController extends EventTarget 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;
+
+  protected defaultId: string;
+
+  protected attachDefaultNode(): Node | undefined;
+
+  protected initNode(node: Node): void;
+
+  /**
+   * 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,169 @@
+/**
+ * @license
+ * 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';
+
+/**
+ * A controller for providing content to slot element and observing changes.
+ */
+export class SlotController extends EventTarget {
+  constructor(host, slotName, slotFactory, slotInitializer) {
+    super();
+
+    this.host = host;
+    this.slotName = slotName;
+    this.slotFactory = slotFactory;
+    this.slotInitializer = slotInitializer;
+    this.defaultId = SlotController.generateId(slotName, host);
+  }
+
+  /**
+   * Ensure that every instance has unique ID.
+   *
+   * @param {string} slotName
+   * @param {HTMLElement} host
+   * @return {string}
+   * @protected
+   */
+  static generateId(slotName, host) {
+    const prefix = slotName || 'default';
+
+    // Maintain the unique ID counter for a given prefix.
+    this[`${prefix}Id`] = 1 + this[`${prefix}Id`] || 0;
+
+    return `${prefix}-${host.localName}-${this[`${prefix}Id`]}`;
+  }
+
+  hostConnected() {
+    if (!this.initialized) {
+      let node = this.getSlotChild();
+
+      if (!node) {
+        node = this.attachDefaultNode();
+      } else {
+        this.node = node;
+        this.initCustomNode(node);
+      }
+
+      this.initNode(node);
+
+      // TODO: Consider making this behavior opt-in to improve performance.
+      this.observe();
+
+      this.initialized = true;
+    }
+  }
+
+  /**
+   * Create and attach default node using the slot factory.
+   * @return {Node | undefined}
+   * @protected
+   */
+  attachDefaultNode() {
+    const { host, slotName, slotFactory } = this;
+
+    // Check if the node was created previously and if so, reuse it.
+    let node = this.defaultNode;
+
+    // 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);
+        }
+        this.node = node;
+        this.defaultNode = node;
+      }
+    }
+
+    if (node) {
+      host.appendChild(node);
+    }
+
+    return node;
+  }
+
+  /**
+   * 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 === '')
+      );
+    });
+  }
+
+  /**
+   * @param {Node} node
+   * @protected
+   */
+  initNode(node) {
+    const { slotInitializer } = this;
+    // 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(this.host, node);
+    }
+  }
+
+  /**
+   * 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);
+
+          this.initNode(newNode);
+        }
+      }
+    });
+  }
+}

package/src/slot-mixin.d.ts

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

package/src/slot-mixin.js

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

package/src/tabindex-mixin.d.ts

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

package/src/tabindex-mixin.js

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