npm - @radix-ng/primitives - Versions diffs - 1.0.0-beta.0 → 1.0.0-beta.2 - Mend

@radix-ng/primitives 1.0.0-beta.0 → 1.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/fesm2022/radix-ng-primitives-scroll-area.mjs ADDED Viewed

@@ -0,0 +1,923 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, input, computed, signal, ElementRef, Directive, PLATFORM_ID, effect, afterNextRender, booleanAttribute, NgModule } from '@angular/core';
+import { clamp, createContext } from '@radix-ng/primitives/core';
+import { isPlatformBrowser } from '@angular/common';
+/** How long (ms) the `data-scrolling` attribute stays applied after the last scroll movement. */
+const SCROLL_TIMEOUT = 500;
+/** Minimum size (px) of the thumb so it stays grabbable on very large content. */
+const MIN_THUMB_SIZE = 16;
+/** 100 ms without scroll events ≈ scroll end (mirrors the native `scrollend` heuristic). */
+const SCROLL_END_TIMEOUT = 100;
+/** Distance (px) within which a scroll offset is snapped to an edge. */
+const SCROLL_EDGE_TOLERANCE_PX = 1;
+/**
+ * Returns the combined start/end `margin` or `padding` of an element along an axis,
+ * resolving logical (inline/block) properties so RTL layouts compute correctly.
+ */
+function getOffset(element, prop, axis) {
+    if (!element) {
+        return 0;
+    }
+    const styles = getComputedStyle(element);
+    const propAxis = axis === 'x' ? 'Inline' : 'Block';
+    // Safari misreports `marginInlineEnd` in RTL. We have to assume the start/end
+    // values are symmetrical, which is likely.
+    if (axis === 'x' && prop === 'margin') {
+        return parseFloat(styles[`${prop}InlineStart`]) * 2;
+    }
+    return (parseFloat(styles[`${prop}${propAxis}Start`]) +
+        parseFloat(styles[`${prop}${propAxis}End`]));
+}
+/**
+ * Snaps a scroll offset that is within {@link SCROLL_EDGE_TOLERANCE_PX} of either end
+ * to that boundary, giving the overflow edge attributes a "sticky" feel at scroll limits.
+ */
+function normalizeScrollOffset(value, max) {
+    if (max <= 0) {
+        return 0;
+    }
+    const clamped = clamp(value, 0, max);
+    const startDistance = clamped;
+    const endDistance = max - clamped;
+    const withinStartTolerance = startDistance <= SCROLL_EDGE_TOLERANCE_PX;
+    const withinEndTolerance = endDistance <= SCROLL_EDGE_TOLERANCE_PX;
+    if (withinStartTolerance && withinEndTolerance) {
+        return startDistance <= endDistance ? 0 : max;
+    }
+    if (withinStartTolerance) {
+        return 0;
+    }
+    if (withinEndTolerance) {
+        return max;
+    }
+    return clamped;
+}
+let scrollbarHideStylesInjected = false;
+/**
+ * Injects (once per document) the CSS that hides the native scrollbars of the viewport.
+ * Headless directives can't hide WebKit scrollbars via inline styles, so a small
+ * stylesheet keyed by the `[rdxScrollAreaViewport]` selector is appended to `<head>`.
+ */
+function injectScrollbarHideStyles(document) {
+    if (scrollbarHideStylesInjected || typeof document === 'undefined') {
+        return;
+    }
+    scrollbarHideStylesInjected = true;
+    const style = document.createElement('style');
+    style.setAttribute('data-rdx-scroll-area', '');
+    style.textContent = `[rdxScrollAreaViewport]{scrollbar-width:none;-ms-overflow-style:none}[rdxScrollAreaViewport]::-webkit-scrollbar{display:none}`;
+    document.head.appendChild(style);
+}
+const DEFAULT_SIZE = { width: 0, height: 0 };
+const DEFAULT_OVERFLOW_EDGES = { xStart: false, xEnd: false, yStart: false, yEnd: false };
+const DEFAULT_HIDDEN_STATE = { x: true, y: true, corner: true };
+const [injectScrollAreaRootContext, provideScrollAreaRootContext] = createContext('ScrollAreaRootContext', 'components/scroll-area');
+const rootContext = () => {
+    const root = inject(RdxScrollAreaRoot);
+    return {
+        rootId: root.rootId,
+        direction: root.direction,
+        overflowEdgeThreshold: root.normalizedThreshold,
+        hovering: root.hovering,
+        scrollingX: root.scrollingX,
+        scrollingY: root.scrollingY,
+        touchModality: root.touchModality,
+        hasMeasuredScrollbar: root.hasMeasuredScrollbar,
+        cornerSize: root.cornerSize,
+        thumbSize: root.thumbSize,
+        hiddenState: root.hiddenState,
+        overflowEdges: root.overflowEdges,
+        rootRef: root.rootRef,
+        viewportRef: root.viewportRef,
+        scrollbarYRef: root.scrollbarYRef,
+        scrollbarXRef: root.scrollbarXRef,
+        thumbYRef: root.thumbYRef,
+        thumbXRef: root.thumbXRef,
+        cornerRef: root.cornerRef,
+        setHovering: (v) => root.hovering.set(v),
+        setHasMeasuredScrollbar: (v) => root.hasMeasuredScrollbar.set(v),
+        setScrollingX: (v) => root.setScrollingX(v),
+        setScrollingY: (v) => root.setScrollingY(v),
+        setThumbSize: (v) => root.setThumbSize(v),
+        setCornerSize: (v) => root.setCornerSize(v),
+        setHiddenState: (v) => root.setHiddenState(v),
+        setOverflowEdges: (v) => root.setOverflowEdges(v),
+        handleScroll: (p) => root.handleScroll(p),
+        handlePointerDown: (e) => root.handlePointerDown(e),
+        handlePointerMove: (e) => root.handlePointerMove(e),
+        handlePointerUp: (e) => root.handlePointerUp(e)
+    };
+};
+let idCounter = 0;
+/**
+ * Groups all parts of the scroll area.
+ * Renders a `<div>` element.
+ *
+ * @group Components
+ */
+class RdxScrollAreaRoot {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.rootId = `rdx-scroll-area-${idCounter++}`;
+        /** Text direction of the scroll area. Affects horizontal (RTL) scroll math. */
+        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        this.direction = this.dir;
+        /**
+         * The threshold in pixels that must be passed before the overflow edge attributes are applied.
+         * Accepts a single number for all edges or an object to configure them individually.
+         */
+        this.overflowEdgeThreshold = input(0, ...(ngDevMode ? [{ debugName: "overflowEdgeThreshold" }] : /* istanbul ignore next */ []));
+        this.normalizedThreshold = computed(() => normalizeOverflowEdgeThreshold(this.overflowEdgeThreshold()), ...(ngDevMode ? [{ debugName: "normalizedThreshold" }] : /* istanbul ignore next */ []));
+        this.hovering = signal(false, ...(ngDevMode ? [{ debugName: "hovering" }] : /* istanbul ignore next */ []));
+        this.scrollingX = signal(false, ...(ngDevMode ? [{ debugName: "scrollingX" }] : /* istanbul ignore next */ []));
+        this.scrollingY = signal(false, ...(ngDevMode ? [{ debugName: "scrollingY" }] : /* istanbul ignore next */ []));
+        this.touchModality = signal(false, ...(ngDevMode ? [{ debugName: "touchModality" }] : /* istanbul ignore next */ []));
+        this.hasMeasuredScrollbar = signal(false, ...(ngDevMode ? [{ debugName: "hasMeasuredScrollbar" }] : /* istanbul ignore next */ []));
+        this.cornerSize = signal(DEFAULT_SIZE, ...(ngDevMode ? [{ debugName: "cornerSize" }] : /* istanbul ignore next */ []));
+        this.thumbSize = signal(DEFAULT_SIZE, ...(ngDevMode ? [{ debugName: "thumbSize" }] : /* istanbul ignore next */ []));
+        this.hiddenState = signal(DEFAULT_HIDDEN_STATE, ...(ngDevMode ? [{ debugName: "hiddenState" }] : /* istanbul ignore next */ []));
+        this.overflowEdges = signal(DEFAULT_OVERFLOW_EDGES, ...(ngDevMode ? [{ debugName: "overflowEdges" }] : /* istanbul ignore next */ []));
+        this.rootRef = { current: inject(ElementRef).nativeElement };
+        this.viewportRef = { current: null };
+        this.scrollbarYRef = { current: null };
+        this.scrollbarXRef = { current: null };
+        this.thumbYRef = { current: null };
+        this.thumbXRef = { current: null };
+        this.cornerRef = { current: null };
+        // Imperative drag state (deliberately non-reactive).
+        this.thumbDragging = false;
+        this.startY = 0;
+        this.startX = 0;
+        this.startScrollTop = 0;
+        this.startScrollLeft = 0;
+        this.currentOrientation = 'vertical';
+        this.scrollPosition = { x: 0, y: 0 };
+        this.destroyRef.onDestroy(() => {
+            clearTimeout(this.scrollYTimer);
+            clearTimeout(this.scrollXTimer);
+        });
+    }
+    setScrollingX(value) {
+        this.scrollingX.set(value);
+    }
+    setScrollingY(value) {
+        this.scrollingY.set(value);
+    }
+    setThumbSize(value) {
+        const prev = this.thumbSize();
+        if (prev.width !== value.width || prev.height !== value.height) {
+            this.thumbSize.set(value);
+        }
+    }
+    setCornerSize(value) {
+        const prev = this.cornerSize();
+        if (prev.width !== value.width || prev.height !== value.height) {
+            this.cornerSize.set(value);
+        }
+    }
+    setHiddenState(value) {
+        const prev = this.hiddenState();
+        if (prev.x !== value.x || prev.y !== value.y || prev.corner !== value.corner) {
+            this.hiddenState.set(value);
+        }
+    }
+    setOverflowEdges(value) {
+        const prev = this.overflowEdges();
+        if (prev.xStart !== value.xStart ||
+            prev.xEnd !== value.xEnd ||
+            prev.yStart !== value.yStart ||
+            prev.yEnd !== value.yEnd) {
+            this.overflowEdges.set(value);
+        }
+    }
+    handleScroll(scrollPosition) {
+        const offsetX = scrollPosition.x - this.scrollPosition.x;
+        const offsetY = scrollPosition.y - this.scrollPosition.y;
+        this.scrollPosition = scrollPosition;
+        if (offsetY !== 0) {
+            this.scrollingY.set(true);
+            clearTimeout(this.scrollYTimer);
+            this.scrollYTimer = setTimeout(() => this.scrollingY.set(false), SCROLL_TIMEOUT);
+        }
+        if (offsetX !== 0) {
+            this.scrollingX.set(true);
+            clearTimeout(this.scrollXTimer);
+            this.scrollXTimer = setTimeout(() => this.scrollingX.set(false), SCROLL_TIMEOUT);
+        }
+    }
+    handlePointerDown(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        this.thumbDragging = true;
+        this.startY = event.clientY;
+        this.startX = event.clientX;
+        this.currentOrientation =
+            event.currentTarget?.getAttribute('data-orientation') ??
+                'vertical';
+        const viewport = this.viewportRef.current;
+        if (viewport) {
+            this.startScrollTop = viewport.scrollTop;
+            this.startScrollLeft = viewport.scrollLeft;
+        }
+        if (this.thumbYRef.current && this.currentOrientation === 'vertical') {
+            this.thumbYRef.current.setPointerCapture(event.pointerId);
+        }
+        if (this.thumbXRef.current && this.currentOrientation === 'horizontal') {
+            this.thumbXRef.current.setPointerCapture(event.pointerId);
+        }
+    }
+    handlePointerMove(event) {
+        if (!this.thumbDragging) {
+            return;
+        }
+        const deltaY = event.clientY - this.startY;
+        const deltaX = event.clientX - this.startX;
+        const viewport = this.viewportRef.current;
+        if (!viewport) {
+            return;
+        }
+        const scrollableContentHeight = viewport.scrollHeight;
+        const viewportHeight = viewport.clientHeight;
+        const scrollableContentWidth = viewport.scrollWidth;
+        const viewportWidth = viewport.clientWidth;
+        if (this.thumbYRef.current && this.scrollbarYRef.current && this.currentOrientation === 'vertical') {
+            const scrollbarYOffset = getOffset(this.scrollbarYRef.current, 'padding', 'y');
+            const thumbYOffset = getOffset(this.thumbYRef.current, 'margin', 'y');
+            const thumbHeight = this.thumbYRef.current.offsetHeight;
+            const maxThumbOffsetY = this.scrollbarYRef.current.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
+            const scrollRatioY = deltaY / maxThumbOffsetY;
+            viewport.scrollTop = this.startScrollTop + scrollRatioY * (scrollableContentHeight - viewportHeight);
+            event.preventDefault();
+            this.scrollingY.set(true);
+            clearTimeout(this.scrollYTimer);
+            this.scrollYTimer = setTimeout(() => this.scrollingY.set(false), SCROLL_TIMEOUT);
+        }
+        if (this.thumbXRef.current && this.scrollbarXRef.current && this.currentOrientation === 'horizontal') {
+            const scrollbarXOffset = getOffset(this.scrollbarXRef.current, 'padding', 'x');
+            const thumbXOffset = getOffset(this.thumbXRef.current, 'margin', 'x');
+            const thumbWidth = this.thumbXRef.current.offsetWidth;
+            const maxThumbOffsetX = this.scrollbarXRef.current.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
+            const scrollRatioX = deltaX / maxThumbOffsetX;
+            viewport.scrollLeft = this.startScrollLeft + scrollRatioX * (scrollableContentWidth - viewportWidth);
+            event.preventDefault();
+            this.scrollingX.set(true);
+            clearTimeout(this.scrollXTimer);
+            this.scrollXTimer = setTimeout(() => this.scrollingX.set(false), SCROLL_TIMEOUT);
+        }
+    }
+    handlePointerUp(event) {
+        this.thumbDragging = false;
+        // `pointercancel` releases capture implicitly, so guard against releasing a
+        // capture we no longer hold (which would throw).
+        if (this.thumbYRef.current &&
+            this.currentOrientation === 'vertical' &&
+            this.thumbYRef.current.hasPointerCapture(event.pointerId)) {
+            this.thumbYRef.current.releasePointerCapture(event.pointerId);
+        }
+        if (this.thumbXRef.current &&
+            this.currentOrientation === 'horizontal' &&
+            this.thumbXRef.current.hasPointerCapture(event.pointerId)) {
+            this.thumbXRef.current.releasePointerCapture(event.pointerId);
+        }
+    }
+    onTouchModalityChange(event) {
+        this.touchModality.set(event.pointerType === 'touch');
+    }
+    onPointerEnterOrMove(event) {
+        this.onTouchModalityChange(event);
+        if (event.pointerType !== 'touch') {
+            const root = this.rootRef.current;
+            const target = event.target;
+            this.hovering.set(!!root && !!target && root.contains(target));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxScrollAreaRoot, isStandalone: true, selector: "[rdxScrollAreaRoot]", inputs: { dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, overflowEdgeThreshold: { classPropertyName: "overflowEdgeThreshold", publicName: "overflowEdgeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, listeners: { "pointerenter": "onPointerEnterOrMove($event)", "pointermove": "onPointerEnterOrMove($event)", "pointerdown": "onTouchModalityChange($event)", "pointerleave": "hovering.set(false)" }, properties: { "style.position": "\"relative\"", "style.--scroll-area-corner-height": "cornerSize().height + \"px\"", "style.--scroll-area-corner-width": "cornerSize().width + \"px\"", "attr.data-scrolling": "(scrollingX() || scrollingY()) ? \"\" : undefined", "attr.data-has-overflow-x": "!hiddenState().x ? \"\" : undefined", "attr.data-has-overflow-y": "!hiddenState().y ? \"\" : undefined", "attr.data-overflow-x-start": "overflowEdges().xStart ? \"\" : undefined", "attr.data-overflow-x-end": "overflowEdges().xEnd ? \"\" : undefined", "attr.data-overflow-y-start": "overflowEdges().yStart ? \"\" : undefined", "attr.data-overflow-y-end": "overflowEdges().yEnd ? \"\" : undefined" } }, providers: [provideScrollAreaRootContext(rootContext)], exportAs: ["rdxScrollAreaRoot"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxScrollAreaRoot]',
+                    exportAs: 'rdxScrollAreaRoot',
+                    providers: [provideScrollAreaRootContext(rootContext)],
+                    host: {
+                        role: 'presentation',
+                        '[style.position]': '"relative"',
+                        '[style.--scroll-area-corner-height]': 'cornerSize().height + "px"',
+                        '[style.--scroll-area-corner-width]': 'cornerSize().width + "px"',
+                        '[attr.data-scrolling]': '(scrollingX() || scrollingY()) ? "" : undefined',
+                        '[attr.data-has-overflow-x]': '!hiddenState().x ? "" : undefined',
+                        '[attr.data-has-overflow-y]': '!hiddenState().y ? "" : undefined',
+                        '[attr.data-overflow-x-start]': 'overflowEdges().xStart ? "" : undefined',
+                        '[attr.data-overflow-x-end]': 'overflowEdges().xEnd ? "" : undefined',
+                        '[attr.data-overflow-y-start]': 'overflowEdges().yStart ? "" : undefined',
+                        '[attr.data-overflow-y-end]': 'overflowEdges().yEnd ? "" : undefined',
+                        '(pointerenter)': 'onPointerEnterOrMove($event)',
+                        '(pointermove)': 'onPointerEnterOrMove($event)',
+                        '(pointerdown)': 'onTouchModalityChange($event)',
+                        '(pointerleave)': 'hovering.set(false)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], overflowEdgeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowEdgeThreshold", required: false }] }] } });
+function normalizeOverflowEdgeThreshold(threshold) {
+    if (typeof threshold === 'number') {
+        const value = Math.max(0, threshold);
+        return { xStart: value, xEnd: value, yStart: value, yEnd: value };
+    }
+    return {
+        xStart: Math.max(0, threshold?.xStart || 0),
+        xEnd: Math.max(0, threshold?.xEnd || 0),
+        yStart: Math.max(0, threshold?.yStart || 0),
+        yEnd: Math.max(0, threshold?.yEnd || 0)
+    };
+}
+const [injectScrollAreaViewportContext, provideScrollAreaViewportContext] = createContext('ScrollAreaViewportContext', 'components/scroll-area');
+const viewportContext = () => {
+    const viewport = inject(RdxScrollAreaViewport);
+    return {
+        computeThumbPosition: () => viewport.computeThumbPosition()
+    };
+};
+/**
+ * The actual scrollable container of the scroll area.
+ * Renders a `<div>` element.
+ *
+ * @group Components
+ */
+class RdxScrollAreaViewport {
+    constructor() {
+        this.rootContext = injectScrollAreaRootContext();
+        this.element = inject(ElementRef).nativeElement;
+        this.destroyRef = inject(DestroyRef);
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.programmaticScroll = true;
+        this.lastMeasuredMetrics = [NaN, NaN, NaN, NaN];
+        this.rootContext.viewportRef.current = this.element;
+        if (this.isBrowser) {
+            injectScrollbarHideStyles(document);
+        }
+        // Recompute after hidden-state toggles (so newly shown scrollbars get measured),
+        // on direction flips, and when the overflow-edge threshold changes.
+        const hiddenState = this.rootContext.hiddenState;
+        const direction = this.rootContext.direction;
+        const threshold = this.rootContext.overflowEdgeThreshold;
+        effect(() => {
+            hiddenState();
+            direction();
+            threshold();
+            queueMicrotask(() => this.computeThumbPosition());
+        });
+        afterNextRender(() => {
+            this.computeThumbPosition();
+            this.observeViewport();
+            if (this.element.matches(':hover')) {
+                this.rootContext.setHovering(true);
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            clearTimeout(this.scrollEndTimer);
+            clearTimeout(this.animationsTimer);
+        });
+    }
+    computeThumbPosition() {
+        const viewportEl = this.rootContext.viewportRef.current;
+        const scrollbarYEl = this.rootContext.scrollbarYRef.current;
+        const scrollbarXEl = this.rootContext.scrollbarXRef.current;
+        const thumbYEl = this.rootContext.thumbYRef.current;
+        const thumbXEl = this.rootContext.thumbXRef.current;
+        const cornerEl = this.rootContext.cornerRef.current;
+        if (!viewportEl) {
+            return;
+        }
+        const direction = this.rootContext.direction();
+        const threshold = this.rootContext.overflowEdgeThreshold();
+        const cornerSize = this.rootContext.cornerSize();
+        const scrollableContentHeight = viewportEl.scrollHeight;
+        const scrollableContentWidth = viewportEl.scrollWidth;
+        const viewportHeight = viewportEl.clientHeight;
+        const viewportWidth = viewportEl.clientWidth;
+        const scrollTop = viewportEl.scrollTop;
+        const scrollLeft = viewportEl.scrollLeft;
+        const isFirstMeasurement = Number.isNaN(this.lastMeasuredMetrics[0]);
+        this.lastMeasuredMetrics = [viewportHeight, scrollableContentHeight, viewportWidth, scrollableContentWidth];
+        if (isFirstMeasurement) {
+            this.rootContext.setHasMeasuredScrollbar(true);
+        }
+        if (scrollableContentHeight === 0 || scrollableContentWidth === 0) {
+            return;
+        }
+        const nextHiddenState = getHiddenState(viewportEl);
+        const scrollbarYHidden = nextHiddenState.y;
+        const scrollbarXHidden = nextHiddenState.x;
+        const ratioX = viewportWidth / scrollableContentWidth;
+        const ratioY = viewportHeight / scrollableContentHeight;
+        const maxScrollLeft = Math.max(0, scrollableContentWidth - viewportWidth);
+        const maxScrollTop = Math.max(0, scrollableContentHeight - viewportHeight);
+        let scrollLeftFromStart = 0;
+        let scrollLeftFromEnd = 0;
+        if (!scrollbarXHidden) {
+            const rawScrollLeftFromStart = direction === 'rtl' ? clamp(-scrollLeft, 0, maxScrollLeft) : clamp(scrollLeft, 0, maxScrollLeft);
+            scrollLeftFromStart = normalizeScrollOffset(rawScrollLeftFromStart, maxScrollLeft);
+            scrollLeftFromEnd = maxScrollLeft - scrollLeftFromStart;
+        }
+        const rawScrollTopFromStart = !scrollbarYHidden ? clamp(scrollTop, 0, maxScrollTop) : 0;
+        const scrollTopFromStart = !scrollbarYHidden ? normalizeScrollOffset(rawScrollTopFromStart, maxScrollTop) : 0;
+        const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0;
+        const nextWidth = scrollbarXHidden ? 0 : viewportWidth;
+        const nextHeight = scrollbarYHidden ? 0 : viewportHeight;
+        let nextCornerWidth = 0;
+        let nextCornerHeight = 0;
+        if (!scrollbarXHidden && !scrollbarYHidden) {
+            nextCornerWidth = scrollbarYEl?.offsetWidth || 0;
+            nextCornerHeight = scrollbarXEl?.offsetHeight || 0;
+        }
+        // Only subtract corner size from scrollbar dimensions if the corner hasn't been sized yet.
+        const cornerNotYetSized = cornerSize.width === 0 && cornerSize.height === 0;
+        const cornerWidthOffset = cornerNotYetSized ? nextCornerWidth : 0;
+        const cornerHeightOffset = cornerNotYetSized ? nextCornerHeight : 0;
+        const scrollbarXOffset = getOffset(scrollbarXEl, 'padding', 'x');
+        const scrollbarYOffset = getOffset(scrollbarYEl, 'padding', 'y');
+        const thumbXOffset = getOffset(thumbXEl, 'margin', 'x');
+        const thumbYOffset = getOffset(thumbYEl, 'margin', 'y');
+        const idealNextWidth = nextWidth - scrollbarXOffset - thumbXOffset;
+        const idealNextHeight = nextHeight - scrollbarYOffset - thumbYOffset;
+        const maxNextWidth = scrollbarXEl
+            ? Math.min(scrollbarXEl.offsetWidth - cornerWidthOffset, idealNextWidth)
+            : idealNextWidth;
+        const maxNextHeight = scrollbarYEl
+            ? Math.min(scrollbarYEl.offsetHeight - cornerHeightOffset, idealNextHeight)
+            : idealNextHeight;
+        const clampedNextWidth = Math.max(MIN_THUMB_SIZE, maxNextWidth * ratioX);
+        const clampedNextHeight = Math.max(MIN_THUMB_SIZE, maxNextHeight * ratioY);
+        this.rootContext.setThumbSize({ width: clampedNextWidth, height: clampedNextHeight });
+        // Handle Y (vertical) scroll
+        if (scrollbarYEl && thumbYEl) {
+            const maxThumbOffsetY = scrollbarYEl.offsetHeight - clampedNextHeight - scrollbarYOffset - thumbYOffset;
+            const scrollRangeY = scrollableContentHeight - viewportHeight;
+            const scrollRatioY = scrollRangeY === 0 ? 0 : scrollTop / scrollRangeY;
+            // In Safari, don't allow it to go negative or too far as `scrollTop` considers the rubber band effect.
+            const thumbOffsetY = Math.min(maxThumbOffsetY, Math.max(0, scrollRatioY * maxThumbOffsetY));
+            thumbYEl.style.transform = `translate3d(0,${thumbOffsetY}px,0)`;
+        }
+        // Handle X (horizontal) scroll
+        if (scrollbarXEl && thumbXEl) {
+            const maxThumbOffsetX = scrollbarXEl.offsetWidth - clampedNextWidth - scrollbarXOffset - thumbXOffset;
+            const scrollRangeX = scrollableContentWidth - viewportWidth;
+            const scrollRatioX = scrollRangeX === 0 ? 0 : scrollLeft / scrollRangeX;
+            const thumbOffsetX = direction === 'rtl'
+                ? clamp(scrollRatioX * maxThumbOffsetX, -maxThumbOffsetX, 0)
+                : clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX);
+            thumbXEl.style.transform = `translate3d(${thumbOffsetX}px,0,0)`;
+        }
+        viewportEl.style.setProperty('--scroll-area-overflow-x-start', `${scrollLeftFromStart}px`);
+        viewportEl.style.setProperty('--scroll-area-overflow-x-end', `${scrollLeftFromEnd}px`);
+        viewportEl.style.setProperty('--scroll-area-overflow-y-start', `${scrollTopFromStart}px`);
+        viewportEl.style.setProperty('--scroll-area-overflow-y-end', `${scrollTopFromEnd}px`);
+        if (cornerEl) {
+            if (scrollbarXHidden || scrollbarYHidden) {
+                this.rootContext.setCornerSize({ width: 0, height: 0 });
+            }
+            else {
+                this.rootContext.setCornerSize({ width: nextCornerWidth, height: nextCornerHeight });
+            }
+        }
+        this.rootContext.setHiddenState(nextHiddenState);
+        this.rootContext.setOverflowEdges({
+            xStart: !scrollbarXHidden && scrollLeftFromStart > threshold.xStart,
+            xEnd: !scrollbarXHidden && scrollLeftFromEnd > threshold.xEnd,
+            yStart: !scrollbarYHidden && scrollTopFromStart > threshold.yStart,
+            yEnd: !scrollbarYHidden && scrollTopFromEnd > threshold.yEnd
+        });
+    }
+    onScroll() {
+        const viewportEl = this.rootContext.viewportRef.current;
+        if (!viewportEl) {
+            return;
+        }
+        this.computeThumbPosition();
+        if (!this.programmaticScroll) {
+            this.rootContext.handleScroll({ x: viewportEl.scrollLeft, y: viewportEl.scrollTop });
+        }
+        // Debounce restoring the programmatic flag so momentum scrolling (no further
+        // user-interaction events) is still treated as user-driven.
+        clearTimeout(this.scrollEndTimer);
+        this.scrollEndTimer = setTimeout(() => {
+            this.programmaticScroll = true;
+        }, SCROLL_END_TIMEOUT);
+    }
+    onUserInteraction() {
+        this.programmaticScroll = false;
+    }
+    observeViewport() {
+        const viewport = this.element;
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        let hasInitialized = false;
+        const resizeObserver = new ResizeObserver(() => {
+            if (!hasInitialized) {
+                hasInitialized = true;
+                const m = this.lastMeasuredMetrics;
+                if (m[0] === viewport.clientHeight &&
+                    m[1] === viewport.scrollHeight &&
+                    m[2] === viewport.clientWidth &&
+                    m[3] === viewport.scrollWidth) {
+                    return;
+                }
+            }
+            this.computeThumbPosition();
+        });
+        resizeObserver.observe(viewport);
+        // Wait for subtree animations to finish, then recompute geometry that may have
+        // been affected by transform-based animations.
+        this.animationsTimer = setTimeout(() => {
+            const animations = viewport.getAnimations({ subtree: true });
+            if (animations.length === 0) {
+                return;
+            }
+            Promise.allSettled(animations.map((animation) => animation.finished))
+                .then(() => this.computeThumbPosition())
+                .catch(() => { });
+        }, 0);
+        this.destroyRef.onDestroy(() => resizeObserver.disconnect());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxScrollAreaViewport, isStandalone: true, selector: "[rdxScrollAreaViewport]", host: { attributes: { "role": "presentation" }, listeners: { "scroll": "onScroll()", "wheel": "onUserInteraction()", "touchmove": "onUserInteraction()", "pointermove": "onUserInteraction()", "pointerenter": "onUserInteraction()", "keydown": "onUserInteraction()" }, properties: { "style.overflow": "\"scroll\"", "attr.tabindex": "(rootContext.hiddenState().x && rootContext.hiddenState().y) ? -1 : 0", "attr.data-id": "rootContext.rootId + \"-viewport\"", "attr.data-scrolling": "(rootContext.scrollingX() || rootContext.scrollingY()) ? \"\" : undefined", "attr.data-has-overflow-x": "!rootContext.hiddenState().x ? \"\" : undefined", "attr.data-has-overflow-y": "!rootContext.hiddenState().y ? \"\" : undefined", "attr.data-overflow-x-start": "rootContext.overflowEdges().xStart ? \"\" : undefined", "attr.data-overflow-x-end": "rootContext.overflowEdges().xEnd ? \"\" : undefined", "attr.data-overflow-y-start": "rootContext.overflowEdges().yStart ? \"\" : undefined", "attr.data-overflow-y-end": "rootContext.overflowEdges().yEnd ? \"\" : undefined" } }, providers: [provideScrollAreaViewportContext(viewportContext)], exportAs: ["rdxScrollAreaViewport"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaViewport, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxScrollAreaViewport]',
+                    exportAs: 'rdxScrollAreaViewport',
+                    providers: [provideScrollAreaViewportContext(viewportContext)],
+                    host: {
+                        role: 'presentation',
+                        '[style.overflow]': '"scroll"',
+                        '[attr.tabindex]': '(rootContext.hiddenState().x && rootContext.hiddenState().y) ? -1 : 0',
+                        '[attr.data-id]': 'rootContext.rootId + "-viewport"',
+                        '[attr.data-scrolling]': '(rootContext.scrollingX() || rootContext.scrollingY()) ? "" : undefined',
+                        '[attr.data-has-overflow-x]': '!rootContext.hiddenState().x ? "" : undefined',
+                        '[attr.data-has-overflow-y]': '!rootContext.hiddenState().y ? "" : undefined',
+                        '[attr.data-overflow-x-start]': 'rootContext.overflowEdges().xStart ? "" : undefined',
+                        '[attr.data-overflow-x-end]': 'rootContext.overflowEdges().xEnd ? "" : undefined',
+                        '[attr.data-overflow-y-start]': 'rootContext.overflowEdges().yStart ? "" : undefined',
+                        '[attr.data-overflow-y-end]': 'rootContext.overflowEdges().yEnd ? "" : undefined',
+                        '(scroll)': 'onScroll()',
+                        '(wheel)': 'onUserInteraction()',
+                        '(touchmove)': 'onUserInteraction()',
+                        '(pointermove)': 'onUserInteraction()',
+                        '(pointerenter)': 'onUserInteraction()',
+                        '(keydown)': 'onUserInteraction()'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+function getHiddenState(viewport) {
+    const y = viewport.clientHeight >= viewport.scrollHeight;
+    const x = viewport.clientWidth >= viewport.scrollWidth;
+    return { y, x, corner: y || x };
+}
+/**
+ * A container for the content of the scroll area.
+ * Renders a `<div>` element.
+ *
+ * @group Components
+ */
+class RdxScrollAreaContent {
+    constructor() {
+        this.rootContext = injectScrollAreaRootContext();
+        this.viewportContext = injectScrollAreaViewportContext();
+        this.element = inject(ElementRef).nativeElement;
+        this.destroyRef = inject(DestroyRef);
+        // Whether the content mounted after the viewport's first measurement; if so the
+        // initial ResizeObserver fire is what brings the overflow state in sync.
+        const computeOnInitialResize = this.rootContext.hasMeasuredScrollbar();
+        afterNextRender(() => {
+            if (typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            let hasInitialized = false;
+            const resizeObserver = new ResizeObserver(() => {
+                if (!hasInitialized) {
+                    hasInitialized = true;
+                    // ResizeObserver fires once upon observing. Skip that initial call to avoid
+                    // double-calculating the thumb position on mount, unless the content mounted
+                    // after the viewport's initial measurement.
+                    if (!computeOnInitialResize) {
+                        return;
+                    }
+                }
+                this.viewportContext.computeThumbPosition();
+            });
+            resizeObserver.observe(this.element);
+            this.destroyRef.onDestroy(() => resizeObserver.disconnect());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxScrollAreaContent, isStandalone: true, selector: "[rdxScrollAreaContent]", host: { attributes: { "role": "presentation" }, properties: { "style.min-width": "\"fit-content\"", "attr.data-scrolling": "(rootContext.scrollingX() || rootContext.scrollingY()) ? \"\" : undefined", "attr.data-has-overflow-x": "!rootContext.hiddenState().x ? \"\" : undefined", "attr.data-has-overflow-y": "!rootContext.hiddenState().y ? \"\" : undefined", "attr.data-overflow-x-start": "rootContext.overflowEdges().xStart ? \"\" : undefined", "attr.data-overflow-x-end": "rootContext.overflowEdges().xEnd ? \"\" : undefined", "attr.data-overflow-y-start": "rootContext.overflowEdges().yStart ? \"\" : undefined", "attr.data-overflow-y-end": "rootContext.overflowEdges().yEnd ? \"\" : undefined" } }, exportAs: ["rdxScrollAreaContent"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxScrollAreaContent]',
+                    exportAs: 'rdxScrollAreaContent',
+                    host: {
+                        role: 'presentation',
+                        '[style.min-width]': '"fit-content"',
+                        '[attr.data-scrolling]': '(rootContext.scrollingX() || rootContext.scrollingY()) ? "" : undefined',
+                        '[attr.data-has-overflow-x]': '!rootContext.hiddenState().x ? "" : undefined',
+                        '[attr.data-has-overflow-y]': '!rootContext.hiddenState().y ? "" : undefined',
+                        '[attr.data-overflow-x-start]': 'rootContext.overflowEdges().xStart ? "" : undefined',
+                        '[attr.data-overflow-x-end]': 'rootContext.overflowEdges().xEnd ? "" : undefined',
+                        '[attr.data-overflow-y-start]': 'rootContext.overflowEdges().yStart ? "" : undefined',
+                        '[attr.data-overflow-y-end]': 'rootContext.overflowEdges().yEnd ? "" : undefined'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * A small rectangular area that appears at the intersection of horizontal and vertical scrollbars.
+ * Renders a `<div>` element.
+ *
+ * @group Components
+ */
+class RdxScrollAreaCorner {
+    constructor() {
+        this.rootContext = injectScrollAreaRootContext();
+        this.rootContext.cornerRef.current = inject(ElementRef).nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaCorner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxScrollAreaCorner, isStandalone: true, selector: "[rdxScrollAreaCorner]", host: { properties: { "style.position": "\"absolute\"", "style.bottom": "\"0\"", "style.inset-inline-end": "\"0\"", "style.width": "rootContext.cornerSize().width + \"px\"", "style.height": "rootContext.cornerSize().height + \"px\"", "style.display": "rootContext.hiddenState().corner ? \"none\" : null" } }, exportAs: ["rdxScrollAreaCorner"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaCorner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxScrollAreaCorner]',
+                    exportAs: 'rdxScrollAreaCorner',
+                    host: {
+                        '[style.position]': '"absolute"',
+                        '[style.bottom]': '"0"',
+                        '[style.inset-inline-end]': '"0"',
+                        '[style.width]': 'rootContext.cornerSize().width + "px"',
+                        '[style.height]': 'rootContext.cornerSize().height + "px"',
+                        '[style.display]': 'rootContext.hiddenState().corner ? "none" : null'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+const [injectScrollAreaScrollbarContext, provideScrollAreaScrollbarContext] = createContext('ScrollAreaScrollbarContext', 'components/scroll-area');
+const scrollbarContext = () => {
+    const scrollbar = inject(RdxScrollAreaScrollbar);
+    return { orientation: () => scrollbar.orientation() };
+};
+/**
+ * A vertical or horizontal scrollbar for the scroll area.
+ * Renders a `<div>` element.
+ *
+ * @group Components
+ */
+class RdxScrollAreaScrollbar {
+    constructor() {
+        this.rootContext = injectScrollAreaRootContext();
+        this.element = inject(ElementRef).nativeElement;
+        /** Whether the scrollbar controls vertical or horizontal scroll. */
+        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /** Whether to keep the element rendered when the viewport isn't scrollable. */
+        this.keepMounted = input(false, { ...(ngDevMode ? { debugName: "keepMounted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.scrolling = computed(() => this.orientation() === 'horizontal' ? this.rootContext.scrollingX() : this.rootContext.scrollingY(), ...(ngDevMode ? [{ debugName: "scrolling" }] : /* istanbul ignore next */ []));
+        this.isHidden = computed(() => this.orientation() === 'vertical' ? this.rootContext.hiddenState().y : this.rootContext.hiddenState().x, ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
+        this.shouldRender = computed(() => this.keepMounted() || !this.isHidden(), ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
+        this.hideTrackUntilMeasured = computed(() => !this.rootContext.hasMeasuredScrollbar() && !this.keepMounted(), ...(ngDevMode ? [{ debugName: "hideTrackUntilMeasured" }] : /* istanbul ignore next */ []));
+        // Register this element as the vertical or horizontal scrollbar ref.
+        // Runs as an effect so the bound `orientation` input is available.
+        effect(() => {
+            if (this.orientation() === 'vertical') {
+                this.rootContext.scrollbarYRef.current = this.element;
+            }
+            else {
+                this.rootContext.scrollbarXRef.current = this.element;
+            }
+        });
+    }
+    onWheel(event) {
+        const viewportEl = this.rootContext.viewportRef.current;
+        if (!viewportEl || event.ctrlKey) {
+            return;
+        }
+        const horizontal = this.orientation() === 'horizontal';
+        const delta = horizontal ? event.deltaX : event.deltaY;
+        if (delta === 0) {
+            return;
+        }
+        const direction = this.rootContext.direction();
+        const maxScroll = horizontal
+            ? viewportEl.scrollWidth - viewportEl.clientWidth
+            : viewportEl.scrollHeight - viewportEl.clientHeight;
+        // RTL horizontal scrolling uses a negative `scrollLeft` range, from 0 to `-maxScroll`.
+        const minScroll = horizontal && direction === 'rtl' ? -maxScroll : 0;
+        const maxScrollValue = horizontal && direction === 'rtl' ? 0 : maxScroll;
+        const scrollValue = horizontal ? viewportEl.scrollLeft : viewportEl.scrollTop;
+        // At an edge (or with no overflow), let the wheel chain to the parent/page.
+        if ((scrollValue <= minScroll && delta < 0) || (scrollValue >= maxScrollValue && delta > 0)) {
+            return;
+        }
+        event.preventDefault();
+        const next = Math.min(maxScrollValue, Math.max(minScroll, scrollValue + delta));
+        if (horizontal) {
+            viewportEl.scrollLeft = next;
+        }
+        else {
+            viewportEl.scrollTop = next;
+        }
+        this.rootContext.handleScroll({ x: viewportEl.scrollLeft, y: viewportEl.scrollTop });
+    }
+    onPointerDown(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        const orientation = this.orientation();
+        const target = event.target;
+        const thumb = orientation === 'vertical' ? this.rootContext.thumbYRef.current : this.rootContext.thumbXRef.current;
+        // Ignore clicks on the thumb itself.
+        if (thumb && target && thumb.contains(target)) {
+            return;
+        }
+        const viewportEl = this.rootContext.viewportRef.current;
+        if (!viewportEl) {
+            return;
+        }
+        const direction = this.rootContext.direction();
+        if (orientation === 'vertical' &&
+            this.rootContext.thumbYRef.current &&
+            this.rootContext.scrollbarYRef.current) {
+            const thumbEl = this.rootContext.thumbYRef.current;
+            const scrollbarEl = this.rootContext.scrollbarYRef.current;
+            const thumbYOffset = getOffset(thumbEl, 'margin', 'y');
+            const scrollbarYOffset = getOffset(scrollbarEl, 'padding', 'y');
+            const thumbHeight = thumbEl.offsetHeight;
+            const trackRectY = scrollbarEl.getBoundingClientRect();
+            const clickY = event.clientY - trackRectY.top - thumbHeight / 2 - scrollbarYOffset + thumbYOffset / 2;
+            const maxThumbOffsetY = scrollbarEl.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
+            const scrollRatioY = clickY / maxThumbOffsetY;
+            viewportEl.scrollTop = scrollRatioY * (viewportEl.scrollHeight - viewportEl.clientHeight);
+        }
+        if (orientation === 'horizontal' &&
+            this.rootContext.thumbXRef.current &&
+            this.rootContext.scrollbarXRef.current) {
+            const thumbEl = this.rootContext.thumbXRef.current;
+            const scrollbarEl = this.rootContext.scrollbarXRef.current;
+            const thumbXOffset = getOffset(thumbEl, 'margin', 'x');
+            const scrollbarXOffset = getOffset(scrollbarEl, 'padding', 'x');
+            const thumbWidth = thumbEl.offsetWidth;
+            const trackRectX = scrollbarEl.getBoundingClientRect();
+            const clickX = event.clientX - trackRectX.left - thumbWidth / 2 - scrollbarXOffset + thumbXOffset / 2;
+            const maxThumbOffsetX = scrollbarEl.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
+            const scrollRatioX = clickX / maxThumbOffsetX;
+            const scrollRange = viewportEl.scrollWidth - viewportEl.clientWidth;
+            let newScrollLeft;
+            if (direction === 'rtl') {
+                newScrollLeft = (1 - scrollRatioX) * scrollRange;
+                // Adjust for browsers that use negative scrollLeft in RTL.
+                if (viewportEl.scrollLeft <= 0) {
+                    newScrollLeft = -newScrollLeft;
+                }
+            }
+            else {
+                newScrollLeft = scrollRatioX * scrollRange;
+            }
+            viewportEl.scrollLeft = newScrollLeft;
+        }
+        this.rootContext.handleScroll({ x: viewportEl.scrollLeft, y: viewportEl.scrollTop });
+        this.rootContext.handlePointerDown(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaScrollbar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxScrollAreaScrollbar, isStandalone: true, selector: "[rdxScrollAreaScrollbar]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, keepMounted: { classPropertyName: "keepMounted", publicName: "keepMounted", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointerup": "rootContext.handlePointerUp($event)", "pointercancel": "rootContext.handlePointerUp($event)", "wheel": "onWheel($event)" }, properties: { "attr.data-id": "rootContext.rootId + \"-scrollbar\"", "attr.data-orientation": "orientation()", "attr.data-hovering": "rootContext.hovering() ? \"\" : undefined", "attr.data-scrolling": "scrolling() ? \"\" : undefined", "attr.data-has-overflow-x": "!rootContext.hiddenState().x ? \"\" : undefined", "attr.data-has-overflow-y": "!rootContext.hiddenState().y ? \"\" : undefined", "attr.data-overflow-x-start": "rootContext.overflowEdges().xStart ? \"\" : undefined", "attr.data-overflow-x-end": "rootContext.overflowEdges().xEnd ? \"\" : undefined", "attr.data-overflow-y-start": "rootContext.overflowEdges().yStart ? \"\" : undefined", "attr.data-overflow-y-end": "rootContext.overflowEdges().yEnd ? \"\" : undefined", "style.position": "\"absolute\"", "style.touch-action": "\"none\"", "style.user-select": "\"none\"", "style.display": "shouldRender() ? null : \"none\"", "style.visibility": "hideTrackUntilMeasured() ? \"hidden\" : null", "style.top": "orientation() === \"vertical\" ? \"0\" : null", "style.bottom": "orientation() === \"vertical\" ? \"var(--scroll-area-corner-height)\" : \"0\"", "style.inset-inline-start": "orientation() === \"horizontal\" ? \"0\" : null", "style.inset-inline-end": "orientation() === \"vertical\" ? \"0\" : \"var(--scroll-area-corner-width)\"", "style.--scroll-area-thumb-height": "orientation() === \"vertical\" ? rootContext.thumbSize().height + \"px\" : null", "style.--scroll-area-thumb-width": "orientation() === \"horizontal\" ? rootContext.thumbSize().width + \"px\" : null" } }, providers: [provideScrollAreaScrollbarContext(scrollbarContext)], exportAs: ["rdxScrollAreaScrollbar"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaScrollbar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxScrollAreaScrollbar]',
+                    exportAs: 'rdxScrollAreaScrollbar',
+                    providers: [provideScrollAreaScrollbarContext(scrollbarContext)],
+                    host: {
+                        '[attr.data-id]': 'rootContext.rootId + "-scrollbar"',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-hovering]': 'rootContext.hovering() ? "" : undefined',
+                        '[attr.data-scrolling]': 'scrolling() ? "" : undefined',
+                        '[attr.data-has-overflow-x]': '!rootContext.hiddenState().x ? "" : undefined',
+                        '[attr.data-has-overflow-y]': '!rootContext.hiddenState().y ? "" : undefined',
+                        '[attr.data-overflow-x-start]': 'rootContext.overflowEdges().xStart ? "" : undefined',
+                        '[attr.data-overflow-x-end]': 'rootContext.overflowEdges().xEnd ? "" : undefined',
+                        '[attr.data-overflow-y-start]': 'rootContext.overflowEdges().yStart ? "" : undefined',
+                        '[attr.data-overflow-y-end]': 'rootContext.overflowEdges().yEnd ? "" : undefined',
+                        '[style.position]': '"absolute"',
+                        '[style.touch-action]': '"none"',
+                        '[style.user-select]': '"none"',
+                        '[style.display]': 'shouldRender() ? null : "none"',
+                        '[style.visibility]': 'hideTrackUntilMeasured() ? "hidden" : null',
+                        '[style.top]': 'orientation() === "vertical" ? "0" : null',
+                        '[style.bottom]': 'orientation() === "vertical" ? "var(--scroll-area-corner-height)" : "0"',
+                        '[style.inset-inline-start]': 'orientation() === "horizontal" ? "0" : null',
+                        '[style.inset-inline-end]': 'orientation() === "vertical" ? "0" : "var(--scroll-area-corner-width)"',
+                        '[style.--scroll-area-thumb-height]': 'orientation() === "vertical" ? rootContext.thumbSize().height + "px" : null',
+                        '[style.--scroll-area-thumb-width]': 'orientation() === "horizontal" ? rootContext.thumbSize().width + "px" : null',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointerup)': 'rootContext.handlePointerUp($event)',
+                        '(pointercancel)': 'rootContext.handlePointerUp($event)',
+                        '(wheel)': 'onWheel($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], keepMounted: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepMounted", required: false }] }] } });
+/**
+ * The draggable part of the scrollbar that indicates the current scroll position.
+ * Renders a `<div>` element.
+ *
+ * @group Components
+ */
+class RdxScrollAreaThumb {
+    constructor() {
+        this.rootContext = injectScrollAreaRootContext();
+        this.scrollbarContext = injectScrollAreaScrollbarContext();
+        this.element = inject(ElementRef).nativeElement;
+        effect(() => {
+            if (this.scrollbarContext.orientation() === 'vertical') {
+                this.rootContext.thumbYRef.current = this.element;
+            }
+            else {
+                this.rootContext.thumbXRef.current = this.element;
+            }
+        });
+    }
+    endDrag(event) {
+        if (this.scrollbarContext.orientation() === 'vertical') {
+            this.rootContext.setScrollingY(false);
+        }
+        else {
+            this.rootContext.setScrollingX(false);
+        }
+        this.rootContext.handlePointerUp(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxScrollAreaThumb, isStandalone: true, selector: "[rdxScrollAreaThumb]", host: { listeners: { "pointerdown": "rootContext.handlePointerDown($event)", "pointermove": "rootContext.handlePointerMove($event)", "pointerup": "endDrag($event)", "pointercancel": "endDrag($event)" }, properties: { "attr.data-orientation": "scrollbarContext.orientation()", "style.visibility": "rootContext.hasMeasuredScrollbar() ? null : \"hidden\"", "style.height": "scrollbarContext.orientation() === \"vertical\" ? \"var(--scroll-area-thumb-height)\" : null", "style.width": "scrollbarContext.orientation() === \"horizontal\" ? \"var(--scroll-area-thumb-width)\" : null" } }, exportAs: ["rdxScrollAreaThumb"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaThumb, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxScrollAreaThumb]',
+                    exportAs: 'rdxScrollAreaThumb',
+                    host: {
+                        '[attr.data-orientation]': 'scrollbarContext.orientation()',
+                        '[style.visibility]': 'rootContext.hasMeasuredScrollbar() ? null : "hidden"',
+                        '[style.height]': 'scrollbarContext.orientation() === "vertical" ? "var(--scroll-area-thumb-height)" : null',
+                        '[style.width]': 'scrollbarContext.orientation() === "horizontal" ? "var(--scroll-area-thumb-width)" : null',
+                        '(pointerdown)': 'rootContext.handlePointerDown($event)',
+                        '(pointermove)': 'rootContext.handlePointerMove($event)',
+                        '(pointerup)': 'endDrag($event)',
+                        '(pointercancel)': 'endDrag($event)'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+const _imports = [
+    RdxScrollAreaRoot,
+    RdxScrollAreaViewport,
+    RdxScrollAreaContent,
+    RdxScrollAreaScrollbar,
+    RdxScrollAreaThumb,
+    RdxScrollAreaCorner
+];
+class RdxScrollAreaModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaModule, imports: [RdxScrollAreaRoot,
+            RdxScrollAreaViewport,
+            RdxScrollAreaContent,
+            RdxScrollAreaScrollbar,
+            RdxScrollAreaThumb,
+            RdxScrollAreaCorner], exports: [RdxScrollAreaRoot,
+            RdxScrollAreaViewport,
+            RdxScrollAreaContent,
+            RdxScrollAreaScrollbar,
+            RdxScrollAreaThumb,
+            RdxScrollAreaCorner] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [..._imports],
+                    exports: [..._imports]
+                }]
+        }] });
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { RdxScrollAreaContent, RdxScrollAreaCorner, RdxScrollAreaModule, RdxScrollAreaRoot, RdxScrollAreaScrollbar, RdxScrollAreaThumb, RdxScrollAreaViewport, injectScrollAreaRootContext, injectScrollAreaScrollbarContext, injectScrollAreaViewportContext, provideScrollAreaRootContext, provideScrollAreaScrollbarContext, provideScrollAreaViewportContext };
+//# sourceMappingURL=radix-ng-primitives-scroll-area.mjs.map