@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/scrolling/fixed-size-virtual-scroll.js

@@ -0,0 +1,107 @@
+// Ported from Angular Components (src/cdk/scrolling/fixed-size-virtual-scroll.ts), MIT, © Google LLC.
+// Rivet: `CdkFixedSizeVirtualScroll` directive inputs (itemSize 20, minBufferPx 100, maxBufferPx 200)
+// are `createVirtualScroll` options; the strategy class is unchanged.
+import { distinct, Emitter } from "./emitter.js";
+/** Virtual scrolling strategy for lists with items of known fixed size. */
+export class FixedSizeVirtualScrollStrategy {
+    _scrolledIndexChange = new Emitter();
+    scrolledIndexChange = distinct(this._scrolledIndexChange);
+    _viewport = null;
+    _itemSize;
+    _minBufferPx;
+    _maxBufferPx;
+    /**
+     * @param itemSize The size of the items in the virtually scrolling list.
+     * @param minBufferPx The minimum amount of buffer (in pixels) before needing to render more
+     * @param maxBufferPx The amount of buffer (in pixels) to render when rendering more.
+     */
+    constructor(itemSize, minBufferPx, maxBufferPx) {
+        this._itemSize = itemSize;
+        this._minBufferPx = minBufferPx;
+        this._maxBufferPx = maxBufferPx;
+    }
+    attach(viewport) {
+        this._viewport = viewport;
+        this._updateTotalContentSize();
+        this._updateRenderedRange();
+    }
+    detach() {
+        this._scrolledIndexChange.complete();
+        this._viewport = null;
+    }
+    /** Update the item size and buffer size. */
+    updateItemAndBufferSize(itemSize, minBufferPx, maxBufferPx) {
+        if (maxBufferPx < minBufferPx)
+            throw Error("CDK virtual scroll: maxBufferPx must be greater than or equal to minBufferPx");
+        this._itemSize = itemSize;
+        this._minBufferPx = minBufferPx;
+        this._maxBufferPx = maxBufferPx;
+        this._updateTotalContentSize();
+        this._updateRenderedRange();
+    }
+    onContentScrolled() {
+        this._updateRenderedRange();
+    }
+    onDataLengthChanged() {
+        this._updateTotalContentSize();
+        this._updateRenderedRange();
+    }
+    onContentRendered() {
+        /* no-op */
+    }
+    onRenderedOffsetChanged() {
+        /* no-op */
+    }
+    scrollToIndex(index, behavior) {
+        if (this._viewport)
+            this._viewport.scrollToOffset(index * this._itemSize, behavior);
+    }
+    _updateTotalContentSize() {
+        if (!this._viewport)
+            return;
+        this._viewport.setTotalContentSize(this._viewport.getDataLength() * this._itemSize);
+    }
+    _updateRenderedRange() {
+        if (!this._viewport)
+            return;
+        const renderedRange = this._viewport.getRenderedRange();
+        const newRange = { start: renderedRange.start, end: renderedRange.end };
+        const viewportSize = this._viewport.getViewportSize();
+        const dataLength = this._viewport.getDataLength();
+        let scrollOffset = this._viewport.measureScrollOffset();
+        // Prevent NaN as result when dividing by zero.
+        let firstVisibleIndex = this._itemSize > 0 ? scrollOffset / this._itemSize : 0;
+        // Scrolled to the bottom and the data shrank: recalculate the first visible index.
+        if (newRange.end > dataLength) {
+            const maxVisibleItems = Math.ceil(viewportSize / this._itemSize);
+            const newVisibleIndex = Math.max(0, Math.min(firstVisibleIndex, dataLength - maxVisibleItems));
+            // The first visible index changed: update the offset for the start / end buffers, and adjust
+            // the range to cover the new position (bottom of the new list).
+            if (firstVisibleIndex != newVisibleIndex) {
+                firstVisibleIndex = newVisibleIndex;
+                scrollOffset = newVisibleIndex * this._itemSize;
+                newRange.start = Math.floor(firstVisibleIndex);
+            }
+            newRange.end = Math.max(0, Math.min(dataLength, newRange.start + maxVisibleItems));
+        }
+        const startBuffer = scrollOffset - newRange.start * this._itemSize;
+        if (startBuffer < this._minBufferPx && newRange.start != 0) {
+            const expandStart = Math.ceil((this._maxBufferPx - startBuffer) / this._itemSize);
+            newRange.start = Math.max(0, newRange.start - expandStart);
+            newRange.end = Math.min(dataLength, Math.ceil(firstVisibleIndex + (viewportSize + this._minBufferPx) / this._itemSize));
+        }
+        else {
+            const endBuffer = newRange.end * this._itemSize - (scrollOffset + viewportSize);
+            if (endBuffer < this._minBufferPx && newRange.end != dataLength) {
+                const expandEnd = Math.ceil((this._maxBufferPx - endBuffer) / this._itemSize);
+                if (expandEnd > 0) {
+                    newRange.end = Math.min(dataLength, newRange.end + expandEnd);
+                    newRange.start = Math.max(0, Math.floor(firstVisibleIndex - this._minBufferPx / this._itemSize));
+                }
+            }
+        }
+        this._viewport.setRenderedRange(newRange);
+        this._viewport.setRenderedContentOffset(Math.round(this._itemSize * newRange.start));
+        this._scrolledIndexChange.next(Math.floor(firstVisibleIndex));
+    }
+}

package/scrolling/index.d.ts

@@ -0,0 +1,11 @@
+export { Emitter, auditTime, distinct, filter, stream, type Stream, type Subscription, type Observer } from "./emitter.js";
+export { RtlScrollAxisType, getRtlScrollAxisType, supportsScrollBehavior, _setRtlScrollAxisType } from "./rtl.js";
+export { ViewportRuler, viewportRuler, DEFAULT_RESIZE_TIME, type ViewportScrollPosition } from "./viewport-ruler.js";
+export { ScrollDispatcher, scrollDispatcher, DEFAULT_SCROLL_TIME, type ScrollDispatcherTarget } from "./scroll-dispatcher.js";
+export { CdkScrollable, CdkVirtualScrollable, CdkVirtualScrollableElement as CdkVirtualScrollableElementRef, CdkVirtualScrollableWindow, type ExtendedScrollToOptions, type ScrollableOptions, type ScrollEdge, } from "./scrollable.js";
+export { rangesEqual, type ListRange, type VirtualScrollStrategy, type VirtualScrollStrategyViewport } from "./virtual-scroll-strategy.js";
+export { FixedSizeVirtualScrollStrategy } from "./fixed-size-virtual-scroll.js";
+export { AutoSizeVirtualScrollStrategy, ItemSizeAverager } from "./auto-size-virtual-scroll.js";
+export { createVirtualScroll, createStrategy, contentTransform, VirtualScrollModel, type VirtualScrollOptions, type VirtualScrollState, type VirtualScrollCallbacks, type Orientation } from "./state.js";
+export { VirtualScrollViewport, virtualScrollViewport, scrollToIndex, scrollToOffset } from "./virtual-scroll-viewport.js";
+export { CdkVirtualScrollViewport, CdkVirtualForOf, CdkVirtualScrollableElement, type CdkVirtualForOfContext, type CdkVirtualForOfProps, type CdkVirtualScrollViewportProps } from "./viewport.jsx";

package/scrolling/index.jsx

@@ -0,0 +1,13 @@
+// @rivetjs/cdk/scrolling — Angular CDK scrolling (virtual scroll, ScrollDispatcher, ViewportRuler,
+// CdkScrollable) ported to Rivet. Styles: `@rivetjs/cdk/scrolling.css`.
+export { Emitter, auditTime, distinct, filter, stream } from "./emitter.js";
+export { RtlScrollAxisType, getRtlScrollAxisType, supportsScrollBehavior, _setRtlScrollAxisType } from "./rtl.js";
+export { ViewportRuler, viewportRuler, DEFAULT_RESIZE_TIME } from "./viewport-ruler.js";
+export { ScrollDispatcher, scrollDispatcher, DEFAULT_SCROLL_TIME } from "./scroll-dispatcher.js";
+export { CdkScrollable, CdkVirtualScrollable, CdkVirtualScrollableElement as CdkVirtualScrollableElementRef, CdkVirtualScrollableWindow, } from "./scrollable.js";
+export { rangesEqual } from "./virtual-scroll-strategy.js";
+export { FixedSizeVirtualScrollStrategy } from "./fixed-size-virtual-scroll.js";
+export { AutoSizeVirtualScrollStrategy, ItemSizeAverager } from "./auto-size-virtual-scroll.js";
+export { createVirtualScroll, createStrategy, contentTransform, VirtualScrollModel } from "./state.js";
+export { VirtualScrollViewport, virtualScrollViewport, scrollToIndex, scrollToOffset } from "./virtual-scroll-viewport.js";
+export { CdkVirtualScrollViewport, CdkVirtualForOf, CdkVirtualScrollableElement } from "./viewport.jsx";

package/scrolling/rtl.d.ts

@@ -0,0 +1,16 @@
+/** How `scrollLeft` behaves in right-to-left scroll containers (browser-dependent). */
+export declare const RtlScrollAxisType: {
+    /** scrollLeft is 0 when scrolled all the way left and (scrollWidth - clientWidth) all the way right. */
+    readonly NORMAL: 0;
+    /** scrollLeft is -(scrollWidth - clientWidth) all the way left and 0 all the way right. */
+    readonly NEGATED: 1;
+    /** scrollLeft is (scrollWidth - clientWidth) all the way left and 0 all the way right. */
+    readonly INVERTED: 2;
+};
+export type RtlScrollAxisType = (typeof RtlScrollAxisType)[keyof typeof RtlScrollAxisType];
+/** Whether `element.scrollTo({behavior})` is supported (smooth scrolling). */
+export declare function supportsScrollBehavior(): boolean;
+/** The RTL scrollLeft behaviour of this browser (measured once with a 1px probe). Server: NORMAL. */
+export declare function getRtlScrollAxisType(): RtlScrollAxisType;
+/** Test hook: force the RTL axis type / scroll-behavior support (`undefined` re-detects). */
+export declare function _setRtlScrollAxisType(type: RtlScrollAxisType | undefined, behavior?: boolean): void;

package/scrolling/rtl.js

@@ -0,0 +1,64 @@
+// Ported from Angular Components (src/cdk/platform/features/scrolling.ts), MIT, © Google LLC.
+// Rivet: test hook `_setRtlScrollAxisType`; server → NORMAL.
+/** How `scrollLeft` behaves in right-to-left scroll containers (browser-dependent). */
+// (A const object instead of Angular's `enum`: Node type stripping has no enums.)
+export const RtlScrollAxisType = {
+    /** scrollLeft is 0 when scrolled all the way left and (scrollWidth - clientWidth) all the way right. */
+    NORMAL: 0,
+    /** scrollLeft is -(scrollWidth - clientWidth) all the way left and 0 all the way right. */
+    NEGATED: 1,
+    /** scrollLeft is (scrollWidth - clientWidth) all the way left and 0 all the way right. */
+    INVERTED: 2,
+};
+let rtlScrollAxisType;
+let scrollBehaviorSupported;
+/** Whether `element.scrollTo({behavior})` is supported (smooth scrolling). */
+export function supportsScrollBehavior() {
+    if (scrollBehaviorSupported == null) {
+        if (typeof document !== "object" || !document || typeof Element !== "function" || !Element)
+            return (scrollBehaviorSupported = false);
+        if (document.documentElement?.style && "scrollBehavior" in document.documentElement.style)
+            scrollBehaviorSupported = true;
+        else {
+            const scrollToFunction = Element.prototype.scrollTo;
+            // Polyfills (e.g. smoothscroll) patch scrollTo: the native one is "[native code]".
+            scrollBehaviorSupported = !!scrollToFunction && !/\{\s*\[native code\]\s*\}/.test(scrollToFunction.toString());
+        }
+    }
+    return scrollBehaviorSupported;
+}
+/** The RTL scrollLeft behaviour of this browser (measured once with a 1px probe). Server: NORMAL. */
+export function getRtlScrollAxisType() {
+    if (typeof document !== "object" || !document)
+        return RtlScrollAxisType.NORMAL;
+    if (rtlScrollAxisType == null) {
+        const scrollContainer = document.createElement("div");
+        const containerStyle = scrollContainer.style;
+        scrollContainer.dir = "rtl";
+        containerStyle.width = "1px";
+        containerStyle.overflow = "auto";
+        containerStyle.visibility = "hidden";
+        containerStyle.pointerEvents = "none";
+        containerStyle.position = "absolute";
+        const content = document.createElement("div");
+        const contentStyle = content.style;
+        contentStyle.width = "2px";
+        contentStyle.height = "1px";
+        scrollContainer.appendChild(content);
+        document.body.appendChild(scrollContainer);
+        rtlScrollAxisType = RtlScrollAxisType.NORMAL;
+        // NORMAL browsers start an RTL container scrolled to the right (scrollLeft 1). Otherwise set 1:
+        // past the max for NEGATED (reads back 0), valid for INVERTED.
+        if (scrollContainer.scrollLeft === 0) {
+            scrollContainer.scrollLeft = 1;
+            rtlScrollAxisType = scrollContainer.scrollLeft === 0 ? RtlScrollAxisType.NEGATED : RtlScrollAxisType.INVERTED;
+        }
+        scrollContainer.remove();
+    }
+    return rtlScrollAxisType;
+}
+/** Test hook: force the RTL axis type / scroll-behavior support (`undefined` re-detects). */
+export function _setRtlScrollAxisType(type, behavior) {
+    rtlScrollAxisType = type;
+    scrollBehaviorSupported = behavior;
+}

package/scrolling/scroll-dispatcher.d.ts

@@ -0,0 +1,49 @@
+import { type Stream, type Subscription } from "./emitter.js";
+/** Time in ms to throttle the scrolling events by default. */
+export declare const DEFAULT_SCROLL_TIME = 20;
+/** Scrollable instance that can be registered with the `ScrollDispatcher`. */
+export interface ScrollDispatcherTarget {
+    /** Stream that emits when the element is scrolled. */
+    elementScrolled(): Stream<Event>;
+    /** The scrollable element (Angular `getElementRef().nativeElement`). */
+    getElementRef(): {
+        nativeElement: HTMLElement;
+    };
+}
+type ElementLike = HTMLElement | {
+    nativeElement: HTMLElement;
+};
+/** Registry of scroll targets; emits when any of them (or the document) scrolls. */
+export declare class ScrollDispatcher {
+    private _document;
+    private _cleanupGlobalListener;
+    /** Notifies that a registered element (or the document: `undefined`) scrolled. */
+    private readonly _scrolled;
+    /** Number of `scrolled()` subscriptions, for cleaning up the global listener. */
+    private _scrolledCount;
+    /** Registered targets and their scroll subscriptions. */
+    readonly scrollContainers: Map<ScrollDispatcherTarget, Subscription>;
+    constructor(doc?: Document);
+    /** Registers a scrollable; its scroll events are re-emitted by `scrolled()`. */
+    register(target: ScrollDispatcherTarget): void;
+    /** De-registers a scrollable and unsubscribes from its scroll stream. */
+    deregister(target: ScrollDispatcherTarget): void;
+    /**
+     * Emits whenever a registered scrollable, or the document, scrolls; throttled by `auditTimeInMs`
+     * (0: no throttle). Server: completes at once.
+     */
+    scrolled(auditTimeInMs?: number): Stream<ScrollDispatcherTarget | void>;
+    /** Remove the global listener, deregister everything, complete `scrolled()` (Angular `ngOnDestroy`). */
+    destroy(): void;
+    /** Emits whenever a scrollable ancestor of `element` (or the document) scrolls. */
+    ancestorScrolled(element: ElementLike, auditTimeInMs?: number): Stream<ScrollDispatcherTarget | void>;
+    /** All registered containers that contain `element`. */
+    getAncestorScrollContainers(element: ElementLike): ScrollDispatcherTarget[];
+    /** Whether the scrollable's element is `element` or one of its ancestors. */
+    private _targetContainsElement;
+    /** Test hook (Angular specs read `_cleanupGlobalListener`). */
+    get _hasGlobalListener(): boolean;
+}
+/** The shared ScrollDispatcher of `doc` (Angular root service), created on first use. */
+export declare function scrollDispatcher(doc?: Document): ScrollDispatcher;
+export {};

package/scrolling/scroll-dispatcher.js

@@ -0,0 +1,107 @@
+// Ported from Angular Components (src/cdk/scrolling/scroll-dispatcher.ts), MIT, © Google LLC.
+// Rivet: no DI / NgZone — `scrollDispatcher(document?)` returns the lazily created per-document
+// instance; streams are `Stream`s (emitter.ts). Same lazy global `document` scroll listener: added
+// with the first `scrolled()` subscriber, removed with the last.
+import { auditTime, EMPTY_STREAM, Emitter, filter, stream } from "./emitter.js";
+/** Time in ms to throttle the scrolling events by default. */
+export const DEFAULT_SCROLL_TIME = 20;
+const coerceElement = (value) => ("nativeElement" in value ? value.nativeElement : value);
+/** Registry of scroll targets; emits when any of them (or the document) scrolls. */
+export class ScrollDispatcher {
+    _document;
+    _cleanupGlobalListener;
+    /** Notifies that a registered element (or the document: `undefined`) scrolled. */
+    _scrolled = new Emitter();
+    /** Number of `scrolled()` subscriptions, for cleaning up the global listener. */
+    _scrolledCount = 0;
+    /** Registered targets and their scroll subscriptions. */
+    scrollContainers = new Map();
+    constructor(doc) {
+        this._document = doc ?? (typeof document === "object" && document ? document : undefined);
+    }
+    /** Registers a scrollable; its scroll events are re-emitted by `scrolled()`. */
+    register(target) {
+        if (!this.scrollContainers.has(target))
+            this.scrollContainers.set(target, target.elementScrolled().subscribe(() => this._scrolled.next(target)));
+    }
+    /** De-registers a scrollable and unsubscribes from its scroll stream. */
+    deregister(target) {
+        const ref = this.scrollContainers.get(target);
+        if (ref) {
+            ref.unsubscribe();
+            this.scrollContainers.delete(target);
+        }
+    }
+    /**
+     * Emits whenever a registered scrollable, or the document, scrolls; throttled by `auditTimeInMs`
+     * (0: no throttle). Server: completes at once.
+     */
+    scrolled(auditTimeInMs = DEFAULT_SCROLL_TIME) {
+        if (!this._document || typeof window !== "object")
+            return EMPTY_STREAM;
+        return stream((out) => {
+            if (!this._cleanupGlobalListener) {
+                const doc = this._document;
+                const listener = () => this._scrolled.next();
+                doc.addEventListener("scroll", listener);
+                this._cleanupGlobalListener = () => doc.removeEventListener("scroll", listener);
+            }
+            // 0 ms: no audit (it adds perceptible delay).
+            const subscription = (auditTimeInMs > 0 ? auditTime(this._scrolled, auditTimeInMs) : this._scrolled).subscribe(out);
+            this._scrolledCount++;
+            return () => {
+                subscription.unsubscribe();
+                this._scrolledCount--;
+                if (!this._scrolledCount) {
+                    this._cleanupGlobalListener?.();
+                    this._cleanupGlobalListener = undefined;
+                }
+            };
+        });
+    }
+    /** Remove the global listener, deregister everything, complete `scrolled()` (Angular `ngOnDestroy`). */
+    destroy() {
+        this._cleanupGlobalListener?.();
+        this._cleanupGlobalListener = undefined;
+        this.scrollContainers.forEach((_, container) => this.deregister(container));
+        this._scrolled.complete();
+    }
+    /** Emits whenever a scrollable ancestor of `element` (or the document) scrolls. */
+    ancestorScrolled(element, auditTimeInMs) {
+        const ancestors = this.getAncestorScrollContainers(element);
+        return filter(this.scrolled(auditTimeInMs), (target) => !target || ancestors.indexOf(target) > -1);
+    }
+    /** All registered containers that contain `element`. */
+    getAncestorScrollContainers(element) {
+        const scrollingContainers = [];
+        this.scrollContainers.forEach((_, target) => {
+            if (this._targetContainsElement(target, element))
+                scrollingContainers.push(target);
+        });
+        return scrollingContainers;
+    }
+    /** Whether the scrollable's element is `element` or one of its ancestors. */
+    _targetContainsElement(scrollable, elementOrRef) {
+        let element = coerceElement(elementOrRef);
+        const targetElement = scrollable.getElementRef().nativeElement;
+        do {
+            if (element == targetElement)
+                return true;
+        } while ((element = element.parentElement));
+        return false;
+    }
+    /** Test hook (Angular specs read `_cleanupGlobalListener`). */
+    get _hasGlobalListener() {
+        return !!this._cleanupGlobalListener;
+    }
+}
+const dispatchers = new WeakMap();
+const serverKey = {};
+/** The shared ScrollDispatcher of `doc` (Angular root service), created on first use. */
+export function scrollDispatcher(doc) {
+    const key = doc ?? (typeof document === "object" && document ? document : serverKey);
+    let dispatcher = dispatchers.get(key);
+    if (!dispatcher)
+        dispatchers.set(key, (dispatcher = new ScrollDispatcher(doc)));
+    return dispatcher;
+}

package/scrolling/scrollable.d.ts

@@ -0,0 +1,75 @@
+import { type Direction } from "../bidi/index.js";
+import { Emitter, type Stream } from "./emitter.js";
+import { type ScrollDispatcher, type ScrollDispatcherTarget } from "./scroll-dispatcher.js";
+/**
+ * ScrollToOptions with offsets relative to top / bottom / left / right / start / end.
+ * top and bottom are mutually exclusive, as are left, right, start and end.
+ */
+export interface ExtendedScrollToOptions extends ScrollOptions {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+    start?: number;
+    end?: number;
+}
+export type ScrollEdge = "top" | "left" | "right" | "bottom" | "start" | "end";
+export interface ScrollableOptions {
+    /** Layout direction (Angular `Directionality`); default: read from the element's `dir` ancestry. */
+    dir?: Direction | (() => Direction);
+    /** Dispatcher to register with (default: the document's shared one). */
+    dispatcher?: ScrollDispatcher;
+}
+/** A scroll container: emits its scroll events, registers with the ScrollDispatcher, normalizes RTL offsets. */
+export declare class CdkScrollable implements ScrollDispatcherTarget {
+    protected elementRef: {
+        nativeElement: HTMLElement;
+    };
+    protected scrollDispatcher: ScrollDispatcher;
+    protected _scrollElement: EventTarget;
+    private _dir;
+    private _cleanupScroll;
+    private _elementScrolled;
+    protected readonly _destroyed: Emitter<void>;
+    constructor(element: HTMLElement, options?: ScrollableOptions);
+    /** Current layout direction. */
+    get dir(): {
+        value: Direction;
+    };
+    /** Start listening and register with the dispatcher (Angular `ngOnInit`). */
+    init(): this;
+    /** Stop listening, complete streams, deregister (Angular `ngOnDestroy`). */
+    destroy(): void;
+    /** Emits when the host element scrolls. */
+    elementScrolled(): Stream<Event>;
+    getElementRef(): {
+        nativeElement: HTMLElement;
+    };
+    /**
+     * Normalized `scrollTo`: left / right always mean the container's physical sides; start / end
+     * mean left / right in LTR and vice versa in RTL; bottom is rewritten as top.
+     */
+    scrollTo(options: ExtendedScrollToOptions): void;
+    private _applyScrollToOptions;
+    /**
+     * Scroll offset from `from`, normalized like `scrollTo` (left / right physical, start / end logical).
+     */
+    measureScrollOffset(from: ScrollEdge): number;
+}
+/** A CdkScrollable usable as the scroll container of a virtual scroll viewport. */
+export declare abstract class CdkVirtualScrollable extends CdkScrollable {
+    /** Viewport size along `orientation`. */
+    measureViewportSize(orientation: "horizontal" | "vertical"): number;
+    /** Bounding client rect edge including the scroll offset. */
+    abstract measureBoundingClientRectWithScrollOffset(from: "left" | "top" | "right" | "bottom"): number;
+}
+/** Virtual scrollable for an arbitrary scrolling ancestor element (`cdkVirtualScrollingElement`). */
+export declare class CdkVirtualScrollableElement extends CdkVirtualScrollable {
+    constructor(element: HTMLElement, options?: ScrollableOptions);
+    measureBoundingClientRectWithScrollOffset(from: "left" | "top" | "right" | "bottom"): number;
+}
+/** Virtual scrollable for the window scrollbar (`scrollWindow`). */
+export declare class CdkVirtualScrollableWindow extends CdkVirtualScrollable {
+    constructor(doc?: Document, options?: ScrollableOptions);
+    measureBoundingClientRectWithScrollOffset(from: "left" | "top" | "right" | "bottom"): number;
+}

package/scrolling/scrollable.js

@@ -0,0 +1,149 @@
+// Ported from Angular Components (src/cdk/scrolling/{scrollable,virtual-scrollable,
+// virtual-scrollable-element,virtual-scrollable-window}.ts), MIT, © Google LLC.
+// Rivet: plain classes over an element (no directive / DI): `new CdkScrollable(element)` + `init()`
+// (Angular ngOnInit) / `destroy()`; direction from `dir` attributes (cdk/bidi) unless `dir` is given.
+import { direction } from "../bidi/index.js";
+import { Emitter } from "./emitter.js";
+import { getRtlScrollAxisType, RtlScrollAxisType, supportsScrollBehavior } from "./rtl.js";
+import { scrollDispatcher } from "./scroll-dispatcher.js";
+/** A scroll container: emits its scroll events, registers with the ScrollDispatcher, normalizes RTL offsets. */
+export class CdkScrollable {
+    elementRef;
+    scrollDispatcher;
+    _scrollElement;
+    _dir;
+    _cleanupScroll;
+    _elementScrolled = new Emitter();
+    _destroyed = new Emitter();
+    constructor(element, options = {}) {
+        this.elementRef = { nativeElement: element };
+        this._scrollElement = element;
+        this._dir = options.dir;
+        this.scrollDispatcher = options.dispatcher ?? scrollDispatcher(element.ownerDocument);
+    }
+    /** Current layout direction. */
+    get dir() {
+        const dir = this._dir;
+        return { value: typeof dir === "function" ? dir() : (dir ?? direction(this.elementRef.nativeElement)) };
+    }
+    /** Start listening and register with the dispatcher (Angular `ngOnInit`). */
+    init() {
+        if (!this._cleanupScroll) {
+            const target = this._scrollElement;
+            const listener = (event) => this._elementScrolled.next(event);
+            target.addEventListener("scroll", listener);
+            this._cleanupScroll = () => target.removeEventListener("scroll", listener);
+        }
+        this.scrollDispatcher.register(this);
+        return this;
+    }
+    /** Stop listening, complete streams, deregister (Angular `ngOnDestroy`). */
+    destroy() {
+        this._cleanupScroll?.();
+        this._cleanupScroll = undefined;
+        this._elementScrolled.complete();
+        this.scrollDispatcher.deregister(this);
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    /** Emits when the host element scrolls. */
+    elementScrolled() {
+        return this._elementScrolled;
+    }
+    getElementRef() {
+        return this.elementRef;
+    }
+    /**
+     * Normalized `scrollTo`: left / right always mean the container's physical sides; start / end
+     * mean left / right in LTR and vice versa in RTL; bottom is rewritten as top.
+     */
+    scrollTo(options) {
+        const el = this.elementRef.nativeElement;
+        const isRtl = this.dir.value == "rtl";
+        options = { ...options };
+        if (options.left == null)
+            options.left = isRtl ? options.end : options.start;
+        if (options.right == null)
+            options.right = isRtl ? options.start : options.end;
+        if (options.bottom != null)
+            options.top = el.scrollHeight - el.clientHeight - options.bottom;
+        if (isRtl && getRtlScrollAxisType() != RtlScrollAxisType.NORMAL) {
+            if (options.left != null)
+                options.right = el.scrollWidth - el.clientWidth - options.left;
+            if (getRtlScrollAxisType() == RtlScrollAxisType.INVERTED)
+                options.left = options.right;
+            else if (getRtlScrollAxisType() == RtlScrollAxisType.NEGATED)
+                options.left = options.right ? -options.right : options.right;
+        }
+        else if (options.right != null)
+            options.left = el.scrollWidth - el.clientWidth - options.right;
+        this._applyScrollToOptions(options);
+    }
+    _applyScrollToOptions(options) {
+        const el = this.elementRef.nativeElement;
+        const { top, left, behavior } = options;
+        if (supportsScrollBehavior())
+            el.scrollTo({ top, left, behavior });
+        else {
+            if (top != null)
+                el.scrollTop = top;
+            if (left != null)
+                el.scrollLeft = left;
+        }
+    }
+    /**
+     * Scroll offset from `from`, normalized like `scrollTo` (left / right physical, start / end logical).
+     */
+    measureScrollOffset(from) {
+        const LEFT = "left";
+        const RIGHT = "right";
+        const el = this.elementRef.nativeElement;
+        if (from == "top")
+            return el.scrollTop;
+        if (from == "bottom")
+            return el.scrollHeight - el.clientHeight - el.scrollTop;
+        const isRtl = this.dir.value == "rtl";
+        if (from == "start")
+            from = isRtl ? RIGHT : LEFT;
+        else if (from == "end")
+            from = isRtl ? LEFT : RIGHT;
+        if (isRtl && getRtlScrollAxisType() == RtlScrollAxisType.INVERTED) {
+            // INVERTED: scrollLeft is (scrollWidth - clientWidth) all the way left, 0 all the way right.
+            return from == LEFT ? el.scrollWidth - el.clientWidth - el.scrollLeft : el.scrollLeft;
+        }
+        else if (isRtl && getRtlScrollAxisType() == RtlScrollAxisType.NEGATED) {
+            // NEGATED: scrollLeft is -(scrollWidth - clientWidth) all the way left, 0 all the way right.
+            return from == LEFT ? el.scrollLeft + el.scrollWidth - el.clientWidth : -el.scrollLeft;
+        }
+        // NORMAL (and LTR): 0 all the way left, (scrollWidth - clientWidth) all the way right.
+        return from == LEFT ? el.scrollLeft : el.scrollWidth - el.clientWidth - el.scrollLeft;
+    }
+}
+/** A CdkScrollable usable as the scroll container of a virtual scroll viewport. */
+export class CdkVirtualScrollable extends CdkScrollable {
+    /** Viewport size along `orientation`. */
+    measureViewportSize(orientation) {
+        const viewportEl = this.elementRef.nativeElement;
+        return orientation === "horizontal" ? viewportEl.clientWidth : viewportEl.clientHeight;
+    }
+}
+/** Virtual scrollable for an arbitrary scrolling ancestor element (`cdkVirtualScrollingElement`). */
+export class CdkVirtualScrollableElement extends CdkVirtualScrollable {
+    constructor(element, options) {
+        super(element, options);
+        element.classList.add("cdk-virtual-scrollable");
+    }
+    measureBoundingClientRectWithScrollOffset(from) {
+        return this.getElementRef().nativeElement.getBoundingClientRect()[from] - this.measureScrollOffset(from);
+    }
+}
+/** Virtual scrollable for the window scrollbar (`scrollWindow`). */
+export class CdkVirtualScrollableWindow extends CdkVirtualScrollable {
+    constructor(doc = document, options) {
+        super(doc.documentElement, options);
+        this._scrollElement = doc;
+    }
+    measureBoundingClientRectWithScrollOffset(from) {
+        return this.getElementRef().nativeElement.getBoundingClientRect()[from];
+    }
+}

package/scrolling/scrolling.css

@@ -0,0 +1,11 @@
+/* Ported from Angular Components (src/cdk/scrolling/virtual-scroll-viewport.scss), MIT, © Google LLC. */
+.cdk-virtual-scroll-viewport { display: block; position: relative; transform: translateZ(0); }
+.cdk-virtual-scrollable { overflow: auto; will-change: scroll-position; contain: strict; overflow-anchor: none; scroll-behavior: auto; }
+.cdk-virtual-scroll-content-wrapper { position: absolute; top: 0; left: 0; contain: content; }
+[dir="rtl"] .cdk-virtual-scroll-content-wrapper { right: 0; left: auto; }
+.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper { min-height: 100%; }
+.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper { min-width: 100%; }
+.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper > :is(dl, ol, table, ul) { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; border-left-width: 0; border-right-width: 0; outline: none; }
+.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper > :is(dl, ol, table, ul) { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-top-width: 0; border-bottom-width: 0; outline: none; }
+.cdk-virtual-scroll-spacer { height: 1px; transform-origin: 0 0; flex: 0 0 auto; }
+[dir="rtl"] .cdk-virtual-scroll-spacer { transform-origin: 100% 0; }