@radix-ng/primitives 1.0.5 → 1.0.7

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, DestroyRef, input, booleanAttribute, computed, signal, ElementRef, Directive, PLATFORM_ID, CSP_NONCE, effect, afterNextRender, NgModule } from '@angular/core';
-import { clamp, createContext } from '@radix-ng/primitives/core';
+import { clamp, createContext, injectId } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import { isPlatformBrowser } from '@angular/common';
 
@@ -114,7 +114,6 @@ const rootContext = () => {
         handlePointerUp: (e) => root.handlePointerUp(e)
     };
 };
-let idCounter = 0;
 /**
  * Groups all parts of the scroll area.
  * Renders a `<div>` element.
@@ -124,7 +123,7 @@ let idCounter = 0;
 class RdxScrollAreaRoot {
     constructor() {
         this.destroyRef = inject(DestroyRef);
-        this.rootId = `rdx-scroll-area-${idCounter++}`;
+        this.rootId = injectId('rdx-scroll-area-');
         /** Text direction of the scroll area. Affects horizontal (RTL) scroll math. */
         this.dirInput = input(undefined, { ...(ngDevMode ? { debugName: "dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
         this.direction = injectDirection(this.dirInput);
@@ -132,18 +131,29 @@ class RdxScrollAreaRoot {
          * 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.overflowEdgeThreshold = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overflowEdgeThreshold" }] : /* istanbul ignore next */ []));
         this.disableStyleElements = input(false, { ...(ngDevMode ? { debugName: "disableStyleElements" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        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.normalizedThreshold = computed(() => normalizeOverflowEdgeThreshold(this.overflowEdgeThreshold()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "normalizedThreshold" }] : /* istanbul ignore next */ []));
+        this.hovering = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hovering" }] : /* istanbul ignore next */ []));
+        this.scrollingX = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollingX" }] : /* istanbul ignore next */ []));
+        this.scrollingY = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollingY" }] : /* istanbul ignore next */ []));
+        this.touchModality = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touchModality" }] : /* istanbul ignore next */ []));
+        this.hasMeasuredScrollbar = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasMeasuredScrollbar" }] : /* istanbul ignore next */ []));
+        this.cornerSize = signal(DEFAULT_SIZE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cornerSize" }] : /* istanbul ignore next */ []));
+        this.thumbSize = signal(DEFAULT_SIZE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "thumbSize" }] : /* istanbul ignore next */ []));
+        this.hiddenState = signal(DEFAULT_HIDDEN_STATE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hiddenState" }] : /* istanbul ignore next */ []));
+        this.overflowEdges = signal(DEFAULT_OVERFLOW_EDGES, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overflowEdges" }] : /* istanbul ignore next */ []));
         this.rootRef = { current: inject(ElementRef).nativeElement };
         this.viewportRef = { current: null };
         this.scrollbarYRef = { current: null };
@@ -299,10 +309,10 @@ class RdxScrollAreaRoot {
             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: { dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, overflowEdgeThreshold: { classPropertyName: "overflowEdgeThreshold", publicName: "overflowEdgeThreshold", isSignal: true, isRequired: false, transformFunction: null }, disableStyleElements: { classPropertyName: "disableStyleElements", publicName: "disableStyleElements", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: RdxScrollAreaRoot, isStandalone: true, selector: "[rdxScrollAreaRoot]", inputs: { dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, overflowEdgeThreshold: { classPropertyName: "overflowEdgeThreshold", publicName: "overflowEdgeThreshold", isSignal: true, isRequired: false, transformFunction: null }, disableStyleElements: { classPropertyName: "disableStyleElements", publicName: "disableStyleElements", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaRoot, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxScrollAreaRoot]',
@@ -558,10 +568,10 @@ class RdxScrollAreaViewport {
         }, 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaViewport, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxScrollAreaViewport]',
@@ -630,10 +640,10 @@ class RdxScrollAreaContent {
             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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxScrollAreaContent]',
@@ -670,10 +680,10 @@ class RdxScrollAreaCorner {
             }
         });
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaCorner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaCorner, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxScrollAreaCorner]',
@@ -705,13 +715,18 @@ class RdxScrollAreaScrollbar {
         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 */ []));
+        this.orientation = input('vertical', /* @ts-ignore */
+        ...(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 */ []));
+        this.scrolling = computed(() => this.orientation() === 'horizontal' ? this.rootContext.scrollingX() : this.rootContext.scrollingY(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrolling" }] : /* istanbul ignore next */ []));
+        this.isHidden = computed(() => this.orientation() === 'vertical' ? this.rootContext.hiddenState().y : this.rootContext.hiddenState().x, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
+        this.shouldRender = computed(() => this.keepMounted() || !this.isHidden(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
+        this.hideTrackUntilMeasured = computed(() => !this.rootContext.hasMeasuredScrollbar() && !this.keepMounted(), /* @ts-ignore */
+        ...(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((onCleanup) => {
@@ -814,10 +829,10 @@ class RdxScrollAreaScrollbar {
         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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaScrollbar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaScrollbar, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxScrollAreaScrollbar]',
@@ -895,16 +910,17 @@ class RdxScrollAreaThumb {
         }
         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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", 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()", "attr.data-scrolling": "(scrollbarContext.orientation() === \"horizontal\" ? rootContext.scrollingX() : rootContext.scrollingY()) ? \"\" : undefined", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaThumb, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxScrollAreaThumb]',
                     exportAs: 'rdxScrollAreaThumb',
                     host: {
                         '[attr.data-orientation]': 'scrollbarContext.orientation()',
+                        '[attr.data-scrolling]': '(scrollbarContext.orientation() === "horizontal" ? rootContext.scrollingX() : rootContext.scrollingY()) ? "" : undefined',
                         '[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',
@@ -925,8 +941,8 @@ const _imports = [
     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,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaModule, imports: [RdxScrollAreaRoot,
             RdxScrollAreaViewport,
             RdxScrollAreaContent,
             RdxScrollAreaScrollbar,
@@ -937,9 +953,9 @@ class RdxScrollAreaModule {
             RdxScrollAreaScrollbar,
             RdxScrollAreaThumb,
             RdxScrollAreaCorner] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxScrollAreaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxScrollAreaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],