@vaadin/component-base 22.0.0-beta2 → 22.0.2

package/index.d.ts

@@ -1,8 +1,10 @@
 export { ActiveMixin } from './src/active-mixin.js';
+export { ControllerMixin } from './src/controller-mixin.js';
 export { DirMixin } from './src/dir-mixin.js';
 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

@@ -1,8 +1,10 @@
 export { ActiveMixin } from './src/active-mixin.js';
+export { ControllerMixin } from './src/controller-mixin.js';
 export { DirMixin } from './src/dir-mixin.js';
 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-beta2",
+  "version": "22.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -38,8 +38,8 @@
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "f13833683e6667f6ca6678452db14aa6b7eac4a4"
+  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
 }

package/src/browser-utils.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const testUserAgent = (regexp) => regexp.test(navigator.userAgent);
+
+const testPlatform = (regexp) => regexp.test(navigator.platform);
+
+const testVendor = (regexp) => regexp.test(navigator.vendor);
+
+export const isAndroid = testUserAgent(/Android/);
+
+export const isChrome = testUserAgent(/Chrome/) && testVendor(/Google Inc/);
+
+export const isFirefox = testUserAgent(/Firefox/);
+
+// iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+export const isIPad = testPlatform(/^iPad/) || (testPlatform(/^Mac/) && navigator.maxTouchPoints > 1);
+
+export const isIPhone = testPlatform(/^iPhone/);
+
+export const isIOS = isIPhone || isIPad;
+
+export const isSafari = testUserAgent(/^((?!chrome|android).)*safari/i);
+
+export const isTouch = (() => {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();

package/src/controller-mixin.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2021 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 { ReactiveController, ReactiveControllerHost } from 'lit';
+
+/**
+ * A mixin for connecting controllers to the element.
+ */
+export declare function ControllerMixin<T extends Constructor<HTMLElement>>(
+  superclass: T
+): T & Constructor<ControllerMixinClass>;
+
+export declare class ControllerMixinClass
+  implements Pick<ReactiveControllerHost, 'addController' | 'removeController'>
+{
+  /**
+   * Registers a controller to participate in the element update cycle.
+   */
+  addController(controller: ReactiveController): void;
+
+  /**
+   * Removes a controller from the element.
+   */
+  removeController(controller: ReactiveController): void;
+}

package/src/controller-mixin.js

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright (c) 2021 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 for connecting controllers to the element.
+ *
+ * @polymerMixin
+ */
+export const ControllerMixin = dedupingMixin(
+  (superClass) =>
+    class ControllerMixinClass extends superClass {
+      constructor() {
+        super();
+
+        /**
+         * @type {Set<import('lit').ReactiveController>}
+         */
+        this.__controllers = new Set();
+      }
+
+      /** @protected */
+      connectedCallback() {
+        super.connectedCallback();
+
+        this.__controllers.forEach((c) => {
+          c.hostConnected && c.hostConnected();
+        });
+      }
+
+      /** @protected */
+      disconnectedCallback() {
+        super.disconnectedCallback();
+
+        this.__controllers.forEach((c) => {
+          c.hostDisconnected && c.hostDisconnected();
+        });
+      }
+
+      /**
+       * Registers a controller to participate in the element update cycle.
+       *
+       * @param {import('lit').ReactiveController} controller
+       * @protected
+       */
+      addController(controller) {
+        this.__controllers.add(controller);
+        // Call hostConnected if a controller is added after the element is attached.
+        if (this.$ !== undefined && this.isConnected && controller.hostConnected) {
+          controller.hostConnected();
+        }
+      }
+
+      /**
+       * Removes a controller from the element.
+       *
+       * @param {import('lit').ReactiveController} controller
+       * @protected
+       */
+      removeController(controller) {
+        this.__controllers.delete(controller);
+      }
+    }
+);

package/src/element-mixin.d.ts

@@ -6,18 +6,14 @@
 import '../custom_typings/vaadin-usage-statistics.js';
 import '../custom_typings/vaadin.js';
 import { Constructor } from '@open-wc/dedupe-mixin';
-import { ReactiveControllerHost } from 'lit';
 import { DirMixinClass } from './dir-mixin.js';
 
 /**
- * A mixin to provide common logic for Vaadin components.
+ * A mixin providing common logic for Vaadin components.
  */
 export declare function ElementMixin<T extends Constructor<HTMLElement>>(
   superclass: T
-): T &
-  Constructor<DirMixinClass> &
-  Constructor<ElementMixinClass> &
-  Pick<ReactiveControllerHost, 'addController' | 'removeController'>;
+): T & Constructor<DirMixinClass> & Constructor<ElementMixinClass>;
 
 export declare class ElementMixinClass {
   static version: string;

package/src/element-mixin.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-beta2';
+      return '22.0.2';
     }
 
     /** @protected */
@@ -58,50 +58,10 @@ export const ElementMixin = (superClass) =>
     constructor() {
       super();
 
-      this.__controllers = new Set();
-
       if (document.doctype === null) {
         console.warn(
           'Vaadin components require the "standards mode" declaration. Please add <!DOCTYPE html> to the HTML document.'
         );
       }
     }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      this.__controllers.forEach((c) => {
-        c.hostConnected && c.hostConnected();
-      });
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-
-      this.__controllers.forEach((c) => {
-        c.hostDisconnected && c.hostDisconnected();
-      });
-    }
-
-    /**
-     * Registers a controller to participate in the element update cycle.
-     * @protected
-     */
-    addController(controller) {
-      this.__controllers.add(controller);
-      // Call hostConnected if a controller is added after the element is attached.
-      if (this.$ !== undefined && this.isConnected && controller.hostConnected) {
-        controller.hostConnected();
-      }
-    }
-
-    /**
-     * Removes a controller from the element.
-     * @protected
-     */
-    removeController(controller) {
-      this.__controllers.delete(controller);
-    }
   };

package/src/iron-list-core.js

@@ -7,8 +7,8 @@
  * Code distributed by Google as part of the polymer project is also
  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
-import { animationFrame, idlePeriod, microTask } from '@vaadin/component-base/src/async.js';
-import { Debouncer, enqueueDebouncer, flush } from '@vaadin/component-base/src/debounce.js';
+import { animationFrame, idlePeriod, microTask } from './async.js';
+import { Debouncer, enqueueDebouncer, flush } from './debounce.js';
 
 const IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
 const IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;

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/virtualizer-iron-list-adapter.js

@@ -1,5 +1,11 @@
-import { animationFrame, timeOut } from '@vaadin/component-base/src/async.js';
-import { Debouncer, flush } from '@vaadin/component-base/src/debounce.js';
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { animationFrame, timeOut } from './async.js';
+import { isSafari } from './browser-utils.js';
+import { Debouncer, flush } from './debounce.js';
 import { ironList } from './iron-list-core.js';
 
 // iron-list can by default handle sizes up to around 100000.
@@ -20,8 +26,6 @@ export class IronListAdapter {
     // Iron-list uses this value to determine how many pages of elements to render
     this._maxPages = 1.3;
 
-    this.__safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-
     this.timeouts = {
       SCROLL_REORDER: 500,
       IGNORE_WHEEL: 500
@@ -268,6 +272,8 @@ export class IronListAdapter {
       if (!el.hidden) {
         el.__virtualIndex = vidx + (this._vidxOffset || 0);
         this.__updateElement(el, el.__virtualIndex);
+      } else {
+        delete el.__lastUpdatedIndex;
       }
     }, itemSet);
   }
@@ -447,7 +453,7 @@ export class IronListAdapter {
     // Due to a rendering bug, reordering the rows can make parts of the scroll target disappear
     // on Safari when using sticky positioning in case the scroll target is inside a flexbox.
     // This issue manifests with grid (the header can disappear if grid is used inside a flexbox)
-    if (this.__safari) {
+    if (isSafari) {
       const { transform } = this.scrollTarget.style;
       this.scrollTarget.style.transform = 'translateZ(0)';
       setTimeout(() => (this.scrollTarget.style.transform = transform));