forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-scroll-area.mjs

@@ -0,0 +1,640 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, numberAttribute, signal, DestroyRef, Directive, ElementRef, DOCUMENT, PLATFORM_ID, afterNextRender, effect, computed } from '@angular/core';
+import { createDefaults, injectTextDirection, injectElementSize } from 'forty-cdk/core';
+import { isPlatformBrowser } from '@angular/common';
+
+const FOR_SCROLL_AREA_CONTEXT = new InjectionToken('FOR_SCROLL_AREA_CONTEXT');
+function injectScrollAreaContext(piece) {
+    const ctx = inject(FOR_SCROLL_AREA_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/scroll-area] ${piece} must be used inside a [forScrollArea] element.`);
+    }
+    return ctx;
+}
+
+/**
+ * Library fallback for scroll area defaults, read at the root injector when no
+ * consumer has called `provideForScrollAreaDefaults`. Exported for the shared defaults
+ * contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_SCROLL_AREA_FALLBACK_DEFAULTS = {
+    scrollHideDelay: 600,
+};
+const { token, provideDefaults } = createDefaults('FOR_SCROLL_AREA_DEFAULTS', FOR_SCROLL_AREA_FALLBACK_DEFAULTS);
+/** Token holding the resolved scroll-area defaults for the current scope. */
+const FOR_SCROLL_AREA_DEFAULTS = token;
+/**
+ * Configures forty-cdk scroll-area defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForScrollAreaDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Root of the custom-scrollbar primitive. Owns the viewport reference,
+ * scroll geometry signals, and visibility state for the synthetic
+ * scrollbars.
+ *
+ * Native scrollbars on the inner viewport are hidden via styles injected
+ * by `[forScrollAreaViewport]` (the only place in forty-cdk that
+ * imperatively touches CSS); the consumer styles `[forScrollAreaThumb]`
+ * however they like.
+ *
+ * @example
+ * ```html
+ * <div forScrollArea>
+ *   <div forScrollAreaViewport>
+ *     <div forScrollAreaContent>… long content …</div>
+ *   </div>
+ *   <div forScrollAreaScrollbar orientation="vertical">
+ *     <div forScrollAreaThumb></div>
+ *   </div>
+ *   <div forScrollAreaScrollbar orientation="horizontal">
+ *     <div forScrollAreaThumb></div>
+ *   </div>
+ *   <div forScrollAreaCorner></div>
+ * </div>
+ * ```
+ */
+class ForScrollArea {
+    #defaults = inject(FOR_SCROLL_AREA_DEFAULTS);
+    /**
+     * When the synthetic scrollbars are visible:
+     * - `auto`: shown whenever the axis overflows, regardless of interaction;
+     *   self-hides when the content fits.
+     * - `always`: the scrollbar (and corner) stay mounted and
+     *   `data-state="visible"` regardless of overflow — a stable, always-painted
+     *   track. When the axis does not overflow the thumb fills
+     *   the full track and dragging is a no-op. The library is headless and does
+     *   not own layout, so to actually *reserve* the gutter (no content shift
+     *   when crossing the overflow boundary) the consumer lays the scrollbar out
+     *   in flow — see the ScrollArea README's grid example.
+     * - `scroll`: shown during scroll, faded after `scrollHideDelay` ms.
+     * - `hover`: shown while the cursor is over the area (and during scroll).
+     */
+    type = input('hover', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * ms after the most recent scroll before scrollbars fade (only
+     * `type="scroll"` and `"hover"`). The default is read from
+     * `provideForScrollAreaDefaults` for the surrounding scope.
+     */
+    scrollHideDelay = input(this.#defaults.scrollHideDelay, { ...(ngDevMode ? { debugName: "scrollHideDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Writing direction. When unset (default `null`), the inherited ambient
+     * direction is resolved from the nearest ancestor carrying a `dir` attribute
+     * (or `<html dir>`), defaulting to `'ltr'`. An explicit `[dir]` always wins.
+     * The resolved value is reflected to the host `dir` attribute and positions
+     * the vertical scrollbar on the left in RTL.
+     */
+    _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = injectTextDirection(this._dirInput);
+    #viewport = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#viewport" }] : /* istanbul ignore next */ []));
+    viewport = this.#viewport.asReadonly();
+    #content = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#content" }] : /* istanbul ignore next */ []));
+    content = this.#content.asReadonly();
+    #scrollLeft = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#scrollLeft" }] : /* istanbul ignore next */ []));
+    #scrollTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#scrollTop" }] : /* istanbul ignore next */ []));
+    scrollLeft = this.#scrollLeft.asReadonly();
+    scrollTop = this.#scrollTop.asReadonly();
+    #clientW = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#clientW" }] : /* istanbul ignore next */ []));
+    #clientH = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#clientH" }] : /* istanbul ignore next */ []));
+    #scrollW = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#scrollW" }] : /* istanbul ignore next */ []));
+    #scrollH = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#scrollH" }] : /* istanbul ignore next */ []));
+    clientWidth = this.#clientW.asReadonly();
+    clientHeight = this.#clientH.asReadonly();
+    scrollWidth = this.#scrollW.asReadonly();
+    scrollHeight = this.#scrollH.asReadonly();
+    #hovering = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#hovering" }] : /* istanbul ignore next */ []));
+    hovering = this.#hovering.asReadonly();
+    #scrolling = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#scrolling" }] : /* istanbul ignore next */ []));
+    scrolling = this.#scrolling.asReadonly();
+    #scrollTimer = null;
+    registerViewport(el) {
+        this.#viewport.set(el);
+    }
+    registerContent(el) {
+        this.#content.set(el);
+    }
+    unregisterContent(el) {
+        // Only clear if the unregistering element is the one we currently track,
+        // so a late teardown of an old content piece doesn't blow away a freshly
+        // registered replacement.
+        if (this.#content() === el) {
+            this.#content.set(null);
+        }
+    }
+    reportScroll(left, top) {
+        this.#scrollLeft.set(left);
+        this.#scrollTop.set(top);
+    }
+    reportSize(clientW, clientH, scrollW, scrollH) {
+        this.#clientW.set(clientW);
+        this.#clientH.set(clientH);
+        this.#scrollW.set(scrollW);
+        this.#scrollH.set(scrollH);
+    }
+    noteUserScroll() {
+        this.#scrolling.set(true);
+        if (this.#scrollTimer !== null)
+            clearTimeout(this.#scrollTimer);
+        this.#scrollTimer = setTimeout(() => {
+            this.#scrollTimer = null;
+            this.#scrolling.set(false);
+        }, Math.max(0, this.scrollHideDelay()));
+    }
+    onPointerEnter() {
+        this.#hovering.set(true);
+    }
+    onPointerLeave() {
+        this.#hovering.set(false);
+    }
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            if (this.#scrollTimer !== null)
+                clearTimeout(this.#scrollTimer);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForScrollArea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForScrollArea, isStandalone: true, selector: "[forScrollArea]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, scrollHideDelay: { classPropertyName: "scrollHideDelay", publicName: "scrollHideDelay", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "attr.data-type": "type()", "attr.dir": "dir()" } }, providers: [{ provide: FOR_SCROLL_AREA_CONTEXT, useExisting: ForScrollArea }], exportAs: ["forScrollArea"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForScrollArea, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forScrollArea]',
+                    exportAs: 'forScrollArea',
+                    host: {
+                        '[attr.data-type]': 'type()',
+                        '[attr.dir]': 'dir()',
+                        '(pointerenter)': 'onPointerEnter()',
+                        '(pointerleave)': 'onPointerLeave()',
+                    },
+                    providers: [{ provide: FOR_SCROLL_AREA_CONTEXT, useExisting: ForScrollArea }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], scrollHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHideDelay", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }] } });
+
+const HIDE_NATIVE_SCROLLBARS_STYLE_ID = 'for-scroll-area-hide-native';
+const HIDE_NATIVE_SCROLLBARS_CSS = `
+  [forScrollAreaViewport] {
+    overflow: scroll;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  [forScrollAreaViewport]::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+`;
+function injectHidingStylesOnce(doc) {
+    if (doc.getElementById(HIDE_NATIVE_SCROLLBARS_STYLE_ID))
+        return;
+    const style = doc.createElement('style');
+    style.id = HIDE_NATIVE_SCROLLBARS_STYLE_ID;
+    style.textContent = HIDE_NATIVE_SCROLLBARS_CSS;
+    doc.head.appendChild(style);
+}
+/**
+ * The actually-scrolling element. Hides native scrollbars (the only place
+ * in forty-cdk that ships CSS — see README), tracks scroll position, and
+ * reports geometry to the root so the synthetic scrollbar can render.
+ */
+class ForScrollAreaViewport {
+    #ctx = injectScrollAreaContext('ForScrollAreaViewport');
+    #host = inject(ElementRef).nativeElement;
+    #document = inject(DOCUMENT);
+    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    constructor() {
+        if (this.#isBrowser) {
+            injectHidingStylesOnce(this.#document);
+        }
+        this.#ctx.registerViewport(this.#host);
+        inject(DestroyRef).onDestroy(() => this.#ctx.registerViewport(null));
+        afterNextRender(() => {
+            this.#syncScroll();
+            this.#syncSize();
+        });
+        // Track size changes via ResizeObserver — simpler / lighter than
+        // polling, and consistent with the rest of the library's reactive
+        // patterns. Browser-only API; no-op on server.
+        //
+        // The content element is observed only when the consumer explicitly
+        // marks it with `[forScrollAreaContent]`. Without that marker we skip
+        // content observation entirely (rather than guessing `firstElementChild`,
+        // which silently breaks on layered / multi-sibling layouts).
+        if (this.#isBrowser && typeof ResizeObserver !== 'undefined') {
+            const ro = new ResizeObserver(() => this.#syncSize());
+            ro.observe(this.#host);
+            inject(DestroyRef).onDestroy(() => ro.disconnect());
+            // Re-attach the observer whenever the registered content element
+            // changes (registers, unregisters, or swaps). `effect` is the right
+            // primitive here: this is a DOM imperative side effect, not derived
+            // state — see CLAUDE.md "Never propagate state inside `effect()`".
+            let observedContent = null;
+            effect(() => {
+                const next = this.#ctx.content();
+                if (next === observedContent)
+                    return;
+                if (observedContent)
+                    ro.unobserve(observedContent);
+                if (next)
+                    ro.observe(next);
+                observedContent = next;
+            });
+        }
+    }
+    onScroll() {
+        this.#syncScroll();
+        this.#ctx.noteUserScroll();
+    }
+    #syncScroll() {
+        this.#ctx.reportScroll(this.#host.scrollLeft, this.#host.scrollTop);
+    }
+    #syncSize() {
+        this.#ctx.reportSize(this.#host.clientWidth, this.#host.clientHeight, this.#host.scrollWidth, this.#host.scrollHeight);
+        this.#syncScroll();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForScrollAreaViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForScrollAreaViewport, isStandalone: true, selector: "[forScrollAreaViewport]", host: { listeners: { "scroll": "onScroll()" } }, exportAs: ["forScrollAreaViewport"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForScrollAreaViewport, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forScrollAreaViewport]',
+                    exportAs: 'forScrollAreaViewport',
+                    host: {
+                        '(scroll)': 'onScroll()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Marks the content element inside `[forScrollAreaViewport]`. The viewport
+ * observes this element with a `ResizeObserver` so `scrollWidth` /
+ * `scrollHeight` updates when content reflows.
+ *
+ * Required for the synthetic scrollbar to react to content resizes — without
+ * it, the viewport falls back to no observation and scrollbars stay sized to
+ * whatever the layout reported on first render.
+ */
+class ForScrollAreaContent {
+    #ctx = injectScrollAreaContext('ForScrollAreaContent');
+    #host = inject(ElementRef).nativeElement;
+    constructor() {
+        this.#ctx.registerContent(this.#host);
+        inject(DestroyRef).onDestroy(() => this.#ctx.unregisterContent(this.#host));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForScrollAreaContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForScrollAreaContent, isStandalone: true, selector: "[forScrollAreaContent]", exportAs: ["forScrollAreaContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForScrollAreaContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forScrollAreaContent]',
+                    exportAs: 'forScrollAreaContent',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Synthetic scrollbar track. Reflects `data-orientation`, `data-state`
+ * (`visible` / `hidden`), and exposes its host element via the orientation
+ * input so the thumb can compute geometry.
+ *
+ * The element is fully removed (`hidden`) when the corresponding axis has
+ * no overflow *and* `type` is not `'always'` — there is no scrollbar to
+ * render. Under `type="always"` the track stays painted regardless of
+ * overflow, so the consumer's reserved gutter is never empty.
+ * Visibility is enforced with an inline `display: none` (which beats any
+ * author `display` rule a consumer applies via a class) in addition to the
+ * `hidden` attribute that removes it from the a11y tree.
+ */
+class ForScrollAreaScrollbar {
+    orientation = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    ctx = injectScrollAreaContext('ForScrollAreaScrollbar');
+    host = inject(ElementRef).nativeElement;
+    /**
+     * Reactive size of the track itself, measured independently of the viewport.
+     * The thumb's size and travel are computed against the *track* length, which
+     * the consumer is free to lay out shorter than the viewport (e.g. insets, a
+     * reserved corner, padding), so the viewport's reported client dimensions are
+     * not a substitute — the track must be observed directly.
+     *
+     * The target is a constant (`this.host` never changes), so `injectElementSize`'s
+     * target-swap branch is dead weight here; it is reused only for its
+     * `ResizeObserver` plumbing and change-deduped emission.
+     */
+    #hostRef = signal(this.host, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#hostRef" }] : /* istanbul ignore next */ []));
+    size = injectElementSize(this.#hostRef);
+    #dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#dragging" }] : /* istanbul ignore next */ []));
+    /** True while the thumb is being dragged. Pins the track visible / painted. */
+    dragging = this.#dragging.asReadonly();
+    /**
+     * Marks the track as actively dragged so an in-flight drag is never aborted
+     * by the scrollbar self-hiding (`type="hover"` / `"scroll"` fading the track,
+     * or a consumer `display:none` on `data-state="hidden"`). Called by the thumb
+     * on pointer-down / drag-end.
+     */
+    setDragging(dragging) {
+        this.#dragging.set(dragging);
+    }
+    hasOverflow = computed(() => {
+        if (this.orientation() === 'horizontal') {
+            return this.ctx.scrollWidth() - this.ctx.clientWidth() > 1;
+        }
+        return this.ctx.scrollHeight() - this.ctx.clientHeight() > 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasOverflow" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the track is rendered at all. `'always'` keeps it painted
+     * unconditionally (a stable, always-present track); every
+     * other `type` paints only the axis that actually overflows. An in-flight
+     * thumb drag also pins it painted so the gesture is never aborted by the
+     * track self-removing. Gates both the `hidden` attribute and the inline
+     * `display: none` self-removal.
+     */
+    painted = computed(() => this.dragging() || this.ctx.type() === 'always' || this.hasOverflow(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "painted" }] : /* istanbul ignore next */ []));
+    /**
+     * `'visible' | 'hidden'`. An in-flight thumb drag forces `'visible'` so a
+     * consumer fade on `data-state="hidden"` can't hide the track mid-gesture.
+     * Otherwise: `'always'` resolves to `'visible'` regardless of overflow — the
+     * track is permanently present. `'auto'` shows whenever the axis overflows;
+     * `'hover'` / `'scroll'` additionally gate on the interaction signals. A
+     * non-overflowing axis is `'hidden'` for every mode except `'always'`.
+     */
+    state = computed(() => {
+        if (this.dragging())
+            return 'visible';
+        switch (this.ctx.type()) {
+            case 'always':
+                return 'visible';
+            case 'auto':
+                return this.hasOverflow() ? 'visible' : 'hidden';
+            case 'hover':
+                return this.hasOverflow() && (this.ctx.hovering() || this.ctx.scrolling())
+                    ? 'visible'
+                    : 'hidden';
+            case 'scroll':
+                return this.hasOverflow() && this.ctx.scrolling() ? 'visible' : 'hidden';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForScrollAreaScrollbar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForScrollAreaScrollbar, isStandalone: true, selector: "[forScrollAreaScrollbar]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-state": "state()", "hidden": "!painted()", "style.display": "painted() ? null : \"none\"" } }, exportAs: ["forScrollAreaScrollbar"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForScrollAreaScrollbar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forScrollAreaScrollbar]',
+                    exportAs: 'forScrollAreaScrollbar',
+                    host: {
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-state]': 'state()',
+                        '[hidden]': '!painted()',
+                        '[style.display]': 'painted() ? null : "none"',
+                    },
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }] } });
+
+const MIN_THUMB_SIZE = 8;
+function injectRequiredScrollbar() {
+    const scrollbar = inject(ForScrollAreaScrollbar, { optional: true });
+    if (!scrollbar) {
+        throw new Error('[forty-cdk/scroll-area] ForScrollAreaThumb must be used inside a [forScrollAreaScrollbar] element.');
+    }
+    return scrollbar;
+}
+/**
+ * The draggable thumb inside a `[forScrollAreaScrollbar]`. Sizes itself
+ * proportionally to viewport / content and translates along the track
+ * based on `scrollLeft` / `scrollTop`. Pointer-drag scrolls the viewport
+ * proportionally.
+ */
+class ForScrollAreaThumb {
+    scrollbar = injectRequiredScrollbar();
+    #host = inject(ElementRef).nativeElement;
+    #document = inject(DOCUMENT);
+    #dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#dragging" }] : /* istanbul ignore next */ []));
+    #dragStartPointer = 0;
+    #dragStartScroll = 0;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.#endDrag());
+    }
+    /** Track length in CSS pixels (reactive — derived from the scrollbar's measured size). */
+    #trackLength = computed(() => {
+        const size = this.scrollbar.size();
+        if (!size)
+            return 0;
+        return this.scrollbar.orientation() === 'horizontal' ? size.width : size.height;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#trackLength" }] : /* istanbul ignore next */ []));
+    #ratio = computed(() => {
+        const ctx = this.scrollbar.ctx;
+        if (this.scrollbar.orientation() === 'horizontal') {
+            const sw = ctx.scrollWidth();
+            if (sw <= 0)
+                return 0;
+            return Math.min(1, ctx.clientWidth() / sw);
+        }
+        const sh = ctx.scrollHeight();
+        if (sh <= 0)
+            return 0;
+        return Math.min(1, ctx.clientHeight() / sh);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#ratio" }] : /* istanbul ignore next */ []));
+    #thumbSize = computed(() => {
+        const tl = this.#trackLength();
+        const r = this.#ratio();
+        if (tl === 0 || r === 0)
+            return 0;
+        return Math.max(MIN_THUMB_SIZE, Math.floor(tl * r));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#thumbSize" }] : /* istanbul ignore next */ []));
+    #thumbOffset = computed(() => {
+        const ctx = this.scrollbar.ctx;
+        const tl = this.#trackLength();
+        const tsz = this.#thumbSize();
+        if (this.scrollbar.orientation() === 'horizontal') {
+            const max = ctx.scrollWidth() - ctx.clientWidth();
+            if (max <= 0)
+                return 0;
+            const left = this.#normalizeScrollLeft(ctx.scrollLeft(), max);
+            return (left / max) * (tl - tsz) || 0;
+        }
+        const max = ctx.scrollHeight() - ctx.clientHeight();
+        if (max <= 0)
+            return 0;
+        return (ctx.scrollTop() / max) * (tl - tsz) || 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#thumbOffset" }] : /* istanbul ignore next */ []));
+    /**
+     * Normalise the viewport's `scrollLeft` to a left-edge-origin value in
+     * `[0, max]`. In LTR `scrollLeft` is already left-origin. In RTL the browser
+     * reports `scrollLeft` in the negative model (`0` at rest with the content's
+     * right edge flush, `-max` when scrolled fully left), so a left-origin
+     * position is `scrollLeft + max` — `max` at rest (thumb pinned to the right)
+     * down to `0` when scrolled forward.
+     */
+    #normalizeScrollLeft(scrollLeft, max) {
+        return this.scrollbar.ctx.dir() === 'rtl' ? scrollLeft + max : scrollLeft;
+    }
+    widthPx() {
+        return this.scrollbar.orientation() === 'horizontal' ? this.#thumbSize() : null;
+    }
+    heightPx() {
+        return this.scrollbar.orientation() === 'vertical' ? this.#thumbSize() : null;
+    }
+    leftPx() {
+        return this.scrollbar.orientation() === 'horizontal' ? 0 : null;
+    }
+    topPx() {
+        return this.scrollbar.orientation() === 'vertical' ? 0 : null;
+    }
+    transformValue() {
+        if (this.scrollbar.orientation() === 'horizontal') {
+            return `translateX(${this.#thumbOffset()}px)`;
+        }
+        return `translateY(${this.#thumbOffset()}px)`;
+    }
+    onPointerDown(event) {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        this.#dragging.set(true);
+        this.scrollbar.setDragging(true);
+        this.#host.setPointerCapture(event.pointerId);
+        this.#dragStartPointer =
+            this.scrollbar.orientation() === 'horizontal' ? event.clientX : event.clientY;
+        const ctx = this.scrollbar.ctx;
+        this.#dragStartScroll =
+            this.scrollbar.orientation() === 'horizontal' ? ctx.scrollLeft() : ctx.scrollTop();
+        // Listen on the owner document, not the thumb element: pointer capture is
+        // set on the thumb (so the gesture stays bound to this pointer), but the
+        // captured node can be removed mid-drag when the scrollbar self-hides
+        // (`type="hover"` / `"scroll"`). Document-level listeners keep firing after
+        // that removal, so the drag is not silently aborted. `lostpointercapture`
+        // tears the gesture down if capture is otherwise lost.
+        const doc = this.#document;
+        doc.addEventListener('pointermove', this.#onPointerMove);
+        doc.addEventListener('pointerup', this.#onPointerUp);
+        doc.addEventListener('pointercancel', this.#onPointerUp);
+    }
+    onLostPointerCapture() {
+        this.#endDrag();
+    }
+    #onPointerMove = (event) => {
+        if (!this.#dragging())
+            return;
+        const ctx = this.scrollbar.ctx;
+        const viewport = ctx.viewport();
+        if (!viewport)
+            return;
+        const tl = this.#trackLength();
+        const tsz = this.#thumbSize();
+        if (tl - tsz <= 0)
+            return;
+        if (this.scrollbar.orientation() === 'horizontal') {
+            const delta = event.clientX - this.#dragStartPointer;
+            const scrollMax = ctx.scrollWidth() - ctx.clientWidth();
+            const scrollDelta = (delta / (tl - tsz)) * scrollMax;
+            viewport.scrollLeft = this.#dragStartScroll + scrollDelta;
+        }
+        else {
+            const delta = event.clientY - this.#dragStartPointer;
+            const scrollMax = ctx.scrollHeight() - ctx.clientHeight();
+            const scrollDelta = (delta / (tl - tsz)) * scrollMax;
+            viewport.scrollTop = this.#dragStartScroll + scrollDelta;
+        }
+    };
+    #onPointerUp = (event) => {
+        this.#endDrag();
+        if (this.#host.hasPointerCapture(event.pointerId)) {
+            this.#host.releasePointerCapture(event.pointerId);
+        }
+    };
+    #endDrag() {
+        this.#dragging.set(false);
+        this.scrollbar.setDragging(false);
+        const doc = this.#document;
+        doc.removeEventListener('pointermove', this.#onPointerMove);
+        doc.removeEventListener('pointerup', this.#onPointerUp);
+        doc.removeEventListener('pointercancel', this.#onPointerUp);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForScrollAreaThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForScrollAreaThumb, isStandalone: true, selector: "[forScrollAreaThumb]", host: { listeners: { "pointerdown": "onPointerDown($event)", "lostpointercapture": "onLostPointerCapture()" }, properties: { "style.position": "\"absolute\"", "style.width.px": "widthPx()", "style.height.px": "heightPx()", "style.left.px": "leftPx()", "style.top.px": "topPx()", "style.transform": "transformValue()", "attr.data-orientation": "scrollbar.orientation()", "attr.data-state": "scrollbar.state()" } }, exportAs: ["forScrollAreaThumb"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForScrollAreaThumb, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forScrollAreaThumb]',
+                    exportAs: 'forScrollAreaThumb',
+                    host: {
+                        '[style.position]': '"absolute"',
+                        '[style.width.px]': 'widthPx()',
+                        '[style.height.px]': 'heightPx()',
+                        '[style.left.px]': 'leftPx()',
+                        '[style.top.px]': 'topPx()',
+                        '[style.transform]': 'transformValue()',
+                        '[attr.data-orientation]': 'scrollbar.orientation()',
+                        '[attr.data-state]': 'scrollbar.state()',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(lostpointercapture)': 'onLostPointerCapture()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Filler in the corner where horizontal and vertical scrollbars meet.
+ * Shown when both axes overflow, or unconditionally under `type="always"`
+ * (both tracks are permanently present then). Visibility is enforced with an
+ * inline `display: none` (which beats any author `display` rule a consumer
+ * applies via a class) in addition to the `hidden` attribute that removes it
+ * from the a11y tree.
+ */
+class ForScrollAreaCorner {
+    ctx = injectScrollAreaContext('ForScrollAreaCorner');
+    visible = computed(() => {
+        if (this.ctx.type() === 'always')
+            return true;
+        const hOverflow = this.ctx.scrollWidth() - this.ctx.clientWidth() > 1;
+        const vOverflow = this.ctx.scrollHeight() - this.ctx.clientHeight() > 1;
+        return hOverflow && vOverflow;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForScrollAreaCorner, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForScrollAreaCorner, isStandalone: true, selector: "[forScrollAreaCorner]", host: { properties: { "hidden": "!visible()", "style.display": "visible() ? null : \"none\"" } }, exportAs: ["forScrollAreaCorner"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForScrollAreaCorner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forScrollAreaCorner]',
+                    exportAs: 'forScrollAreaCorner',
+                    host: {
+                        '[hidden]': '!visible()',
+                        '[style.display]': 'visible() ? null : "none"',
+                    },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_SCROLL_AREA_CONTEXT, FOR_SCROLL_AREA_DEFAULTS, ForScrollArea, ForScrollAreaContent, ForScrollAreaCorner, ForScrollAreaScrollbar, ForScrollAreaThumb, ForScrollAreaViewport, provideForScrollAreaDefaults };
+//# sourceMappingURL=forty-cdk-scroll-area.mjs.map