@vaadin/component-base 23.2.0-alpha4 → 23.2.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.2.0-alpha4",
+  "version": "23.2.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "cbf5f1d0f38ac9b81c65cf9ef5660182e176e598"
+  "gitHead": "c6247fd741d61096d75a71feda4a1faf88b6f0ce"
 }

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 '23.2.0-alpha4';
+      return '23.2.0-alpha5';
     }
 
     /** @protected */

package/src/overflow-controller.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @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 { ReactiveController } from 'lit';
+
+/**
+ * A controller that detects if content inside the element overflows its scrolling viewport,
+ * and sets the `overflow` attribute on the host with a value that indicates the directions
+ * where content is overflowing. Supported values are: `top`, `bottom`, `start`, `end`.
+ */
+export class OverflowController implements ReactiveController {
+  /**
+   * The controller host element.
+   */
+  host: HTMLElement;
+
+  /**
+   * The element that wraps scrollable content.
+   * If not set, the host element is used.
+   */
+  scrollTarget: HTMLElement;
+
+  constructor(host: HTMLElement, scrollTarget?: HTMLElement);
+
+  hostConnected(): void;
+
+  /**
+   * Setup a scroll listener and observers to update overflow.
+   * Also performs one-time update synchronously when called.
+   */
+  protected observe(): void;
+}

package/src/overflow-controller.js

@@ -0,0 +1,115 @@
+/**
+ * @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';
+import { animationFrame } from './async.js';
+import { Debouncer } from './debounce.js';
+
+/**
+ * A controller that detects if content inside the element overflows its scrolling viewport,
+ * and sets the `overflow` attribute on the host with a value that indicates the directions
+ * where content is overflowing. Supported values are: `top`, `bottom`, `start`, `end`.
+ */
+export class OverflowController {
+  constructor(host, scrollTarget) {
+    /**
+     * The controller host element.
+     *
+     * @type {HTMLElement}
+     */
+    this.host = host;
+
+    /**
+     * The element that wraps scrollable content.
+     * If not set, the host element is used.
+     *
+     * @type {HTMLElement}
+     */
+    this.scrollTarget = scrollTarget || host;
+
+    /** @private */
+    this.__boundOnScroll = this.__onScroll.bind(this);
+  }
+
+  hostConnected() {
+    if (!this.initialized) {
+      this.initialized = true;
+
+      this.observe();
+    }
+  }
+
+  /**
+   * Setup scroll listener and observers to update overflow.
+   * Also performs one-time update synchronously when called.
+   * @protected
+   */
+  observe() {
+    this.__resizeObserver = new ResizeObserver(() => {
+      this.__debounceOverflow = Debouncer.debounce(this.__debounceOverflow, animationFrame, () => {
+        this.__updateOverflow();
+      });
+    });
+
+    this.__resizeObserver.observe(this.host);
+
+    this.__childObserver = new FlattenedNodesObserver(this.host, (info) => {
+      info.addedNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          this.__resizeObserver.observe(node);
+        }
+      });
+
+      info.removedNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          this.__resizeObserver.unobserve(node);
+        }
+      });
+
+      this.__updateOverflow();
+    });
+
+    // Update overflow attribute on scroll
+    this.scrollTarget.addEventListener('scroll', this.__boundOnScroll);
+
+    this.__updateOverflow();
+  }
+
+  /** @private */
+  __onScroll() {
+    this.__updateOverflow();
+  }
+
+  /** @private */
+  __updateOverflow() {
+    const target = this.scrollTarget;
+
+    let overflow = '';
+
+    if (target.scrollTop > 0) {
+      overflow += ' top';
+    }
+
+    if (target.scrollTop < target.scrollHeight - target.clientHeight) {
+      overflow += ' bottom';
+    }
+
+    const scrollLeft = Math.abs(target.scrollLeft);
+    if (scrollLeft > 0) {
+      overflow += ' start';
+    }
+
+    if (scrollLeft < target.scrollWidth - target.clientWidth) {
+      overflow += ' end';
+    }
+
+    overflow = overflow.trim();
+    if (overflow.length > 0 && this.host.getAttribute('overflow') !== overflow) {
+      this.host.setAttribute('overflow', overflow);
+    } else if (overflow.length === 0 && this.host.hasAttribute('overflow')) {
+      this.host.removeAttribute('overflow');
+    }
+  }
+}