@acorex/cdk 22.2.0-next.0 → 22.2.0-next.1

package/fesm2022/acorex-cdk-overlay-scrollbar.mjs

@@ -0,0 +1,903 @@
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, inject, PLATFORM_ID, ElementRef, DestroyRef, input, afterRenderEffect, effect, afterNextRender, Directive } from '@angular/core';
+
+/** CSS custom properties for overlay scrollbar styling (set on the scroll host or in CSS). */
+const AX_OVERLAY_SCROLLBAR_CSS_VARS = {
+    size: '--ax-comp-overlay-scrollbar-size',
+    thumbRadius: '--ax-comp-overlay-scrollbar-thumb-radius',
+    trackRadius: '--ax-comp-overlay-scrollbar-track-radius',
+    trackColor: '--ax-comp-overlay-scrollbar-track-color',
+    thumbColor: '--ax-comp-overlay-scrollbar-thumb-color',
+    thumbActiveColor: '--ax-comp-overlay-scrollbar-thumb-active-color',
+    thumbHoverColor: '--ax-comp-overlay-scrollbar-thumb-hover-color',
+    trackActiveColor: '--ax-comp-overlay-scrollbar-track-active-color',
+    thumbBorderWidth: '--ax-comp-overlay-scrollbar-thumb-border-width',
+    thumbBorderColor: '--ax-comp-overlay-scrollbar-thumb-border-color',
+    trackBorderWidth: '--ax-comp-overlay-scrollbar-track-border-width',
+    trackBorderColor: '--ax-comp-overlay-scrollbar-track-border-color',
+    fadeDuration: '--ax-comp-overlay-scrollbar-fade-duration',
+};
+
+/** Default delay (ms) before the overlay scrollbar fades out after scroll. */
+const AX_OVERLAY_SCROLLBAR_DEFAULT_HIDE_DELAY_MS = 800;
+/** Default pixels scrolled per navigation arrow click. */
+const AX_OVERLAY_SCROLLBAR_DEFAULT_NAV_SCROLL_STEP_PX = 40;
+const AXOverlayScrollbarDefaultConfig = {
+    hideDelay: AX_OVERLAY_SCROLLBAR_DEFAULT_HIDE_DELAY_MS,
+    navigationButtons: false,
+    navScrollStep: AX_OVERLAY_SCROLLBAR_DEFAULT_NAV_SCROLL_STEP_PX,
+};
+const AX_OVERLAY_SCROLLBAR_CONFIG = new InjectionToken('AX_OVERLAY_SCROLLBAR_CONFIG', {
+    providedIn: 'root',
+    factory: () => AXOverlayScrollbarDefaultConfig,
+});
+const DESIGN_TOKEN_KEYS = {
+    size: AX_OVERLAY_SCROLLBAR_CSS_VARS.size,
+    thumbRadius: AX_OVERLAY_SCROLLBAR_CSS_VARS.thumbRadius,
+    trackRadius: AX_OVERLAY_SCROLLBAR_CSS_VARS.trackRadius,
+    trackColor: AX_OVERLAY_SCROLLBAR_CSS_VARS.trackColor,
+    thumbColor: AX_OVERLAY_SCROLLBAR_CSS_VARS.thumbColor,
+    thumbActiveColor: AX_OVERLAY_SCROLLBAR_CSS_VARS.thumbActiveColor,
+    thumbHoverColor: AX_OVERLAY_SCROLLBAR_CSS_VARS.thumbHoverColor,
+    trackActiveColor: AX_OVERLAY_SCROLLBAR_CSS_VARS.trackActiveColor,
+    thumbBorderWidth: AX_OVERLAY_SCROLLBAR_CSS_VARS.thumbBorderWidth,
+    thumbBorderColor: AX_OVERLAY_SCROLLBAR_CSS_VARS.thumbBorderColor,
+    trackBorderWidth: AX_OVERLAY_SCROLLBAR_CSS_VARS.trackBorderWidth,
+    trackBorderColor: AX_OVERLAY_SCROLLBAR_CSS_VARS.trackBorderColor,
+    fadeDuration: AX_OVERLAY_SCROLLBAR_CSS_VARS.fadeDuration,
+};
+/** Merges partial config with {@link AXOverlayScrollbarDefaultConfig}. */
+function overlayScrollbarConfig(config = {}) {
+    const { designTokens, ...rest } = config;
+    return {
+        ...AXOverlayScrollbarDefaultConfig,
+        ...rest,
+        designTokens: designTokens ? { ...designTokens } : undefined,
+    };
+}
+/** Sets overlay scrollbar CSS variables on the given element. */
+function applyOverlayScrollbarDesignTokens(element, tokens) {
+    if (!tokens) {
+        return;
+    }
+    for (const key of Object.keys(DESIGN_TOKEN_KEYS)) {
+        const value = tokens[key];
+        if (value != null && value !== '') {
+            element.style.setProperty(DESIGN_TOKEN_KEYS[key], value);
+        }
+    }
+}
+/**
+ * Registers global overlay scrollbar defaults for the application.
+ *
+ * @example
+ * ```ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideOverlayScrollbar({
+ *       hideDelay: 1200,
+ *       navigationButtons: true,
+ *       navScrollStep: 48,
+ *       designTokens: {
+ *         size: '8px',
+ *         thumbColor: 'var(--ax-sys-scroller-thumb-color)',
+ *       },
+ *     }),
+ *   ],
+ * };
+ * ```
+ */
+function provideOverlayScrollbar(config = {}) {
+    const merged = overlayScrollbarConfig(config);
+    return makeEnvironmentProviders([
+        {
+            provide: AX_OVERLAY_SCROLLBAR_CONFIG,
+            useValue: merged,
+        },
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useValue: () => {
+                if (!merged.designTokens) {
+                    return;
+                }
+                const platformId = inject(PLATFORM_ID);
+                if (!isPlatformBrowser(platformId)) {
+                    return;
+                }
+                applyOverlayScrollbarDesignTokens(inject(DOCUMENT).documentElement, merged.designTokens);
+            },
+        },
+    ]);
+}
+
+const OVERLAY_SCROLLBAR_TOKEN_NAMES = Object.values(AX_OVERLAY_SCROLLBAR_CSS_VARS);
+const ROOT_CLASS = 'ax-cdk-overlay-scrollbar-root';
+const RAIL_CLASS = 'ax-cdk-overlay-scrollbar__rail';
+const TRACK_CLASS = 'ax-cdk-overlay-scrollbar__rail-track';
+const THUMB_CLASS = 'ax-cdk-overlay-scrollbar__rail-thumb';
+const NAV_BTN_CLASS = 'ax-cdk-overlay-scrollbar__nav-button';
+const NAV_BTN_PRESSED_CLASS = 'ax-cdk-overlay-scrollbar__nav-button--pressed';
+const NAV_ARROW_CLASS = 'ax-cdk-overlay-scrollbar__nav-arrow';
+const RAIL_WITH_NAV_CLASS = 'ax-cdk-overlay-scrollbar__rail--with-nav';
+const VISIBLE_CLASS = 'ax-cdk-overlay-scrollbar--active';
+/** Applied while dragging the thumb (active fill; not used during wheel/content scroll). */
+const ENGAGED_CLASS = 'ax-cdk-overlay-scrollbar--engaged';
+/** Primary button down on the track (outside thumb); `:active` is unreliable with `preventDefault`. */
+const TRACK_PRESSED_CLASS = 'ax-cdk-overlay-scrollbar--track-pressed';
+const OVERLAY_SCROLLBAR_STYLES = `
+.ax-cdk-overlay-scrollbar-root {
+  position: relative;
+  display: block;
+  min-height: 0;
+  --ax-comp-overlay-scrollbar-size: 6px;
+  --ax-comp-overlay-scrollbar-fade-duration: 0.35s;
+  --ax-comp-overlay-scrollbar-thumb-radius: 4px;
+  --ax-comp-overlay-scrollbar-track-radius: 4px;
+  --ax-comp-overlay-scrollbar-track-color: transparent;
+  --ax-comp-overlay-scrollbar-thumb-color: var(--ax-sys-scroller-thumb-color, #64748b);
+  --ax-comp-overlay-scrollbar-thumb-border-width: 0;
+  --ax-comp-overlay-scrollbar-thumb-border-color: transparent;
+  --ax-comp-overlay-scrollbar-track-border-width: 0;
+  --ax-comp-overlay-scrollbar-track-border-color: transparent;
+}
+
+.ax-cdk-overlay-scrollbar {
+  position: relative;
+  --ax-comp-overlay-scrollbar-size: 6px;
+  --ax-comp-overlay-scrollbar-fade-duration: 0.35s;
+  --ax-comp-overlay-scrollbar-thumb-radius: 4px;
+  --ax-comp-overlay-scrollbar-track-radius: 4px;
+  --ax-comp-overlay-scrollbar-track-color: transparent;
+  --ax-comp-overlay-scrollbar-thumb-color: var(--ax-sys-scroller-thumb-color, #64748b);
+  --ax-comp-overlay-scrollbar-thumb-border-width: 0;
+  --ax-comp-overlay-scrollbar-thumb-border-color: transparent;
+  --ax-comp-overlay-scrollbar-track-border-width: 0;
+  --ax-comp-overlay-scrollbar-track-border-color: transparent;
+
+  scrollbar-width: none !important;
+  -ms-overflow-style: none;
+}
+
+.ax-cdk-overlay-scrollbar::-webkit-scrollbar {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  background: transparent !important;
+}
+
+.ax-cdk-overlay-scrollbar__rail {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  inset-inline-end: 0;
+  width: var(--ax-comp-overlay-scrollbar-size, 6px);
+  overflow: hidden;
+  pointer-events: auto;
+  opacity: 0;
+  z-index: 10;
+  box-sizing: border-box;
+  border-radius: var(--ax-comp-overlay-scrollbar-track-radius, 4px);
+  background-color: var(--ax-comp-overlay-scrollbar-track-color, transparent);
+  border-width: var(--ax-comp-overlay-scrollbar-track-border-width, 0);
+  border-style: solid;
+  border-color: var(--ax-comp-overlay-scrollbar-track-border-color, transparent);
+  transition:
+    opacity var(--ax-comp-overlay-scrollbar-fade-duration, 0.35s) ease,
+    background-color 0.15s ease;
+}
+
+.ax-cdk-overlay-scrollbar-root.ax-cdk-overlay-scrollbar--active .ax-cdk-overlay-scrollbar__rail,
+.ax-cdk-overlay-scrollbar.ax-cdk-overlay-scrollbar--active .ax-cdk-overlay-scrollbar__rail {
+  opacity: 1;
+}
+
+.ax-cdk-overlay-scrollbar__rail-track {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+}
+
+.ax-cdk-overlay-scrollbar-root.ax-cdk-overlay-scrollbar--active.ax-cdk-overlay-scrollbar--track-pressed
+  .ax-cdk-overlay-scrollbar__rail,
+.ax-cdk-overlay-scrollbar.ax-cdk-overlay-scrollbar--active.ax-cdk-overlay-scrollbar--track-pressed
+  .ax-cdk-overlay-scrollbar__rail,
+.ax-cdk-overlay-scrollbar-root.ax-cdk-overlay-scrollbar--active.ax-cdk-overlay-scrollbar--engaged
+  .ax-cdk-overlay-scrollbar__rail,
+.ax-cdk-overlay-scrollbar.ax-cdk-overlay-scrollbar--active.ax-cdk-overlay-scrollbar--engaged
+  .ax-cdk-overlay-scrollbar__rail {
+  background-color: var(
+    --ax-comp-overlay-scrollbar-track-active-color,
+    var(--ax-comp-overlay-scrollbar-track-color, transparent)
+  );
+}
+
+.ax-cdk-overlay-scrollbar__rail--with-nav {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.ax-cdk-overlay-scrollbar__rail--with-nav .ax-cdk-overlay-scrollbar__rail-track {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  inset: auto;
+}
+
+.ax-cdk-overlay-scrollbar__nav-button {
+  display: none;
+  flex: 0 0 var(--ax-comp-overlay-scrollbar-size, 6px);
+  width: 100%;
+  min-height: var(--ax-comp-overlay-scrollbar-size, 6px);
+  margin: 0;
+  padding: 0;
+  border: none;
+  box-sizing: border-box;
+  cursor: default;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  color: var(--ax-comp-overlay-scrollbar-thumb-color, var(--ax-sys-scroller-thumb-color, #64748b));
+}
+
+.ax-cdk-overlay-scrollbar__rail--with-nav .ax-cdk-overlay-scrollbar__nav-button {
+  display: flex;
+}
+
+.ax-cdk-overlay-scrollbar__nav-arrow {
+  width: 0;
+  height: 0;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  pointer-events: none;
+}
+
+.ax-cdk-overlay-scrollbar__nav-arrow--up {
+  border-bottom: 4px solid currentColor;
+}
+
+.ax-cdk-overlay-scrollbar__nav-arrow--down {
+  border-top: 4px solid currentColor;
+}
+
+.ax-cdk-overlay-scrollbar__rail-thumb {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: var(--ax-comp-overlay-scrollbar-thumb-radius, 4px);
+  background-color: var(--ax-comp-overlay-scrollbar-thumb-color, var(--ax-sys-scroller-thumb-color, #64748b));
+  border-width: var(--ax-comp-overlay-scrollbar-thumb-border-width, 0);
+  border-style: solid;
+  border-color: var(--ax-comp-overlay-scrollbar-thumb-border-color, transparent);
+  transition: background-color 0.15s ease;
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.ax-cdk-overlay-scrollbar__rail-thumb::before {
+  content: '';
+  position: absolute;
+  inset: -4px -8px;
+}
+
+.ax-cdk-overlay-scrollbar-root.ax-cdk-overlay-scrollbar--active .ax-cdk-overlay-scrollbar__rail-thumb:hover,
+.ax-cdk-overlay-scrollbar.ax-cdk-overlay-scrollbar--active .ax-cdk-overlay-scrollbar__rail-thumb:hover {
+  background-color: var(
+    --ax-comp-overlay-scrollbar-thumb-hover-color,
+    var(
+      --ax-comp-overlay-scrollbar-thumb-active-color,
+      var(--ax-comp-overlay-scrollbar-thumb-color, var(--ax-sys-scroller-thumb-color, #64748b))
+    )
+  );
+}
+
+.ax-cdk-overlay-scrollbar-root.ax-cdk-overlay-scrollbar--active.ax-cdk-overlay-scrollbar--engaged
+  .ax-cdk-overlay-scrollbar__rail-thumb,
+.ax-cdk-overlay-scrollbar.ax-cdk-overlay-scrollbar--active.ax-cdk-overlay-scrollbar--engaged
+  .ax-cdk-overlay-scrollbar__rail-thumb,
+.ax-cdk-overlay-scrollbar-root.ax-cdk-overlay-scrollbar--active.ax-cdk-overlay-scrollbar--engaged
+  .ax-cdk-overlay-scrollbar__rail-thumb:hover,
+.ax-cdk-overlay-scrollbar.ax-cdk-overlay-scrollbar--active.ax-cdk-overlay-scrollbar--engaged
+  .ax-cdk-overlay-scrollbar__rail-thumb:hover {
+  background-color: var(
+    --ax-comp-overlay-scrollbar-thumb-active-color,
+    var(--ax-comp-overlay-scrollbar-thumb-color, var(--ax-sys-scroller-thumb-color, #64748b))
+  );
+}
+`.trim();
+const STYLE_ELEMENT_ID = 'ax-overlay-scrollbar-styles';
+const DEFAULT_HIDE_DELAY_MS = AX_OVERLAY_SCROLLBAR_DEFAULT_HIDE_DELAY_MS;
+const MIN_SCROLLBAR_WIDTH_PX = 2;
+const MAX_SCROLLBAR_WIDTH_PX = 32;
+const DEFAULT_SCROLLBAR_WIDTH_PX = 6;
+const MIN_THUMB_HEIGHT_PX = 20;
+const DEFAULT_NAV_SCROLL_STEP_PX = AX_OVERLAY_SCROLLBAR_DEFAULT_NAV_SCROLL_STEP_PX;
+function clampOverlayScrollbarWidth(px) {
+    if (!Number.isFinite(px)) {
+        return DEFAULT_SCROLLBAR_WIDTH_PX;
+    }
+    return Math.min(MAX_SCROLLBAR_WIDTH_PX, Math.max(MIN_SCROLLBAR_WIDTH_PX, Math.round(px)));
+}
+function injectOverlayScrollbarStyles(document) {
+    const existing = document.getElementById(STYLE_ELEMENT_ID);
+    if (existing) {
+        existing.textContent = OVERLAY_SCROLLBAR_STYLES;
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = STYLE_ELEMENT_ID;
+    style.textContent = OVERLAY_SCROLLBAR_STYLES;
+    document.head.appendChild(style);
+}
+/** Rail is a sibling of the host; copy resolved tokens from the host so the rail can use them. */
+function syncOverlayScrollbarDesignTokens(host, root) {
+    if (!root) {
+        return;
+    }
+    const computed = getComputedStyle(host);
+    for (const varName of OVERLAY_SCROLLBAR_TOKEN_NAMES) {
+        const value = computed.getPropertyValue(varName).trim();
+        if (value) {
+            root.style.setProperty(varName, value);
+        }
+        else {
+            root.style.removeProperty(varName);
+        }
+    }
+}
+function readRailWidthPx(rail) {
+    const width = rail.offsetWidth;
+    if (width > 0) {
+        return width;
+    }
+    const parsed = Number.parseFloat(getComputedStyle(rail).width);
+    if (Number.isFinite(parsed) && parsed > 0) {
+        return parsed;
+    }
+    const sizeToken = getComputedStyle(rail).getPropertyValue(AX_OVERLAY_SCROLLBAR_CSS_VARS.size).trim();
+    const fromToken = Number.parseFloat(sizeToken);
+    if (Number.isFinite(fromToken) && fromToken > 0) {
+        return fromToken;
+    }
+    return DEFAULT_SCROLLBAR_WIDTH_PX;
+}
+/**
+ * Custom overlay scrollbar: native scrollbars are hidden; a positioned thumb reflects scroll position.
+ * Styles are injected once by this directive.
+ */
+class AXOverlayScrollbarDirective {
+    constructor() {
+        this.host = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.platformId = inject(PLATFORM_ID);
+        this.document = inject(DOCUMENT);
+        this.appConfig = inject(AX_OVERLAY_SCROLLBAR_CONFIG);
+        this.rootEl = null;
+        this.railEl = null;
+        this.trackEl = null;
+        this.navUpEl = null;
+        this.navDownEl = null;
+        this.thumbEl = null;
+        this.resizeObserver = null;
+        this.designTokenMutationObserver = null;
+        this.designTokenSyncFrame = null;
+        this.thumbDragPointerId = null;
+        this.pointerOverRail = false;
+        this.trackPressReleaseListener = null;
+        this.unbindRailInteraction = null;
+        /** Thumb size derived from layout; position updates on scroll without re-measuring scrollHeight. */
+        this.thumbLayout = null;
+        this.hideDelay = input(this.appConfig.hideDelay, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideDelay" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, shows browser-style up/down arrow buttons on the rail.
+         * Styling follows track/thumb CSS tokens.
+         */
+        this.navigationButtons = input(this.appConfig.navigationButtons, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigationButtons" }] : /* istanbul ignore next */ []));
+        /** Pixels to scroll per arrow click. */
+        this.navScrollStep = input(this.appConfig.navScrollStep, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navScrollStep" }] : /* istanbul ignore next */ []));
+        this.hideTimer = null;
+        afterRenderEffect(() => {
+            if (!isPlatformBrowser(this.platformId) || !this.rootEl) {
+                return;
+            }
+            syncOverlayScrollbarDesignTokens(this.host.nativeElement, this.rootEl);
+        });
+        effect(() => {
+            if (!isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            this.navigationButtons();
+            this.remeasureCustomThumb();
+        });
+        afterNextRender(() => {
+            if (!isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            injectOverlayScrollbarStyles(this.document);
+            const element = this.host.nativeElement;
+            this.mountCustomScrollbar(element);
+            const interactionRoot = () => this.rootEl ?? element;
+            const onScroll = () => {
+                this.syncThumbPosition();
+                this.bumpVisibility();
+            };
+            const onScrollEnd = () => {
+                this.scheduleHide();
+                this.syncEngagedAfterScroll();
+            };
+            const onPointerEnter = () => this.bumpVisibility();
+            const onPointerMove = () => this.bumpVisibility();
+            const onPointerLeave = () => {
+                if (this.thumbDragPointerId === null) {
+                    this.setScrollbarEngaged(false);
+                }
+                this.deactivateThumb();
+            };
+            element.addEventListener('scroll', onScroll, { passive: true });
+            element.addEventListener('scrollend', onScrollEnd);
+            const root = interactionRoot();
+            root.addEventListener('pointerenter', onPointerEnter);
+            root.addEventListener('pointermove', onPointerMove);
+            root.addEventListener('pointerleave', onPointerLeave);
+            this.bindRailInteraction(element);
+            this.resizeObserver = new ResizeObserver(() => this.remeasureCustomThumb());
+            this.resizeObserver.observe(element);
+            this.observeHostDesignTokenChanges(element);
+            this.queueDesignTokenSync();
+            this.remeasureCustomThumb();
+            this.destroyRef.onDestroy(() => {
+                this.clearHideTimer();
+                this.clearTrackPressed();
+                this.unbindRailInteraction?.();
+                this.unbindRailInteraction = null;
+                if (this.thumbEl && this.thumbDragPointerId !== null) {
+                    try {
+                        this.thumbEl.releasePointerCapture(this.thumbDragPointerId);
+                    }
+                    catch {
+                        /* already released */
+                    }
+                }
+                this.thumbDragPointerId = null;
+                this.resizeObserver?.disconnect();
+                this.resizeObserver = null;
+                this.designTokenMutationObserver?.disconnect();
+                this.designTokenMutationObserver = null;
+                if (this.designTokenSyncFrame !== null) {
+                    cancelAnimationFrame(this.designTokenSyncFrame);
+                    this.designTokenSyncFrame = null;
+                }
+                element.removeEventListener('scroll', onScroll);
+                element.removeEventListener('scrollend', onScrollEnd);
+                root.removeEventListener('pointerenter', onPointerEnter);
+                root.removeEventListener('pointermove', onPointerMove);
+                root.removeEventListener('pointerleave', onPointerLeave);
+                this.unmountCustomScrollbar(element);
+            });
+        });
+    }
+    /** Host and rail are siblings under the root; mirror CSS variables when the host style/class changes. */
+    observeHostDesignTokenChanges(host) {
+        this.designTokenMutationObserver?.disconnect();
+        this.designTokenMutationObserver = new MutationObserver(() => this.queueDesignTokenSync());
+        this.designTokenMutationObserver.observe(host, {
+            attributes: true,
+            attributeFilter: ['style', 'class'],
+        });
+    }
+    queueDesignTokenSync() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        if (this.designTokenSyncFrame !== null) {
+            cancelAnimationFrame(this.designTokenSyncFrame);
+        }
+        this.designTokenSyncFrame = requestAnimationFrame(() => {
+            this.designTokenSyncFrame = null;
+            syncOverlayScrollbarDesignTokens(this.host.nativeElement, this.rootEl);
+            this.remeasureCustomThumb();
+        });
+    }
+    /** Rail lives on a wrapper so it stays fixed while the host scrolls. */
+    ensureScrollRoot(scroller) {
+        const parent = scroller.parentElement;
+        if (parent?.classList.contains(ROOT_CLASS)) {
+            this.rootEl = parent;
+            return parent;
+        }
+        const root = this.document.createElement('div');
+        root.className = ROOT_CLASS;
+        parent?.insertBefore(root, scroller);
+        root.appendChild(scroller);
+        this.rootEl = root;
+        return root;
+    }
+    mountCustomScrollbar(element) {
+        const root = this.ensureScrollRoot(element);
+        const existingRail = root.querySelector(`.${RAIL_CLASS}`);
+        if (existingRail) {
+            this.railEl = existingRail;
+            this.ensureRailStructure(existingRail);
+            this.bindRailInteraction(element);
+            return;
+        }
+        const rail = this.document.createElement('div');
+        rail.className = RAIL_CLASS;
+        rail.setAttribute('aria-hidden', 'true');
+        this.ensureRailStructure(rail);
+        root.appendChild(rail);
+        this.railEl = rail;
+        this.bindRailInteraction(element);
+    }
+    ensureRailStructure(rail) {
+        let thumb = rail.querySelector(`.${THUMB_CLASS}`);
+        if (!thumb) {
+            thumb = this.document.createElement('div');
+            thumb.className = THUMB_CLASS;
+            thumb.addEventListener('pointerdown', (event) => this.onThumbPointerDown(event));
+        }
+        let track = rail.querySelector(`.${TRACK_CLASS}`);
+        if (!track) {
+            const navUp = this.createNavButton('up');
+            const navDown = this.createNavButton('down');
+            track = this.document.createElement('div');
+            track.className = TRACK_CLASS;
+            rail.replaceChildren(navUp, track, navDown);
+            track.appendChild(thumb);
+            this.navUpEl = navUp;
+            this.navDownEl = navDown;
+        }
+        else if (!track.contains(thumb)) {
+            track.appendChild(thumb);
+            this.navUpEl = rail.querySelector(`.${NAV_BTN_CLASS}--up`);
+            this.navDownEl = rail.querySelector(`.${NAV_BTN_CLASS}--down`);
+        }
+        else {
+            this.navUpEl = rail.querySelector(`.${NAV_BTN_CLASS}--up`);
+            this.navDownEl = rail.querySelector(`.${NAV_BTN_CLASS}--down`);
+        }
+        this.trackEl = track;
+        this.thumbEl = thumb;
+    }
+    createNavButton(direction) {
+        const button = this.document.createElement('button');
+        button.type = 'button';
+        button.className = `${NAV_BTN_CLASS} ${NAV_BTN_CLASS}--${direction}`;
+        button.setAttribute('aria-label', direction === 'up' ? 'Scroll up' : 'Scroll down');
+        const arrow = this.document.createElement('span');
+        arrow.className = `${NAV_ARROW_CLASS} ${NAV_ARROW_CLASS}--${direction}`;
+        arrow.setAttribute('aria-hidden', 'true');
+        button.appendChild(arrow);
+        return button;
+    }
+    resolveNavScrollStepPx() {
+        const step = this.navScrollStep();
+        if (Number.isFinite(step) && step > 0) {
+            return Math.round(step);
+        }
+        return DEFAULT_NAV_SCROLL_STEP_PX;
+    }
+    scrollByNavStep(scroller, direction) {
+        scroller.scrollTop += direction * this.resolveNavScrollStepPx();
+        this.syncThumbPosition();
+        this.bumpVisibility();
+    }
+    bindRailInteraction(scroller) {
+        const rail = this.railEl;
+        if (!rail) {
+            return;
+        }
+        this.unbindRailInteraction?.();
+        const onRailPointerEnter = () => {
+            this.pointerOverRail = true;
+            this.showScrollbar();
+            this.clearHideTimer();
+        };
+        const onRailPointerLeave = () => {
+            this.pointerOverRail = false;
+            this.clearTrackPressed();
+            this.syncEngagedAfterScroll();
+            this.scheduleHide();
+        };
+        const onRailWheel = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            scroller.scrollTop += event.deltaY;
+            this.bumpVisibility();
+        };
+        const onRailPointerDown = (event) => {
+            const thumb = this.thumbEl;
+            const target = event.target;
+            if (thumb && (event.target === thumb || thumb.contains(target))) {
+                return;
+            }
+            if (this.navUpEl?.contains(target) ||
+                this.navDownEl?.contains(target) ||
+                event.target === this.navUpEl ||
+                event.target === this.navDownEl) {
+                return;
+            }
+            const track = this.trackEl;
+            if (!track || (event.target !== track && !track.contains(target))) {
+                return;
+            }
+            if (this.isPointerOverThumbVisual(event.clientX, event.clientY)) {
+                return;
+            }
+            event.preventDefault();
+            this.beginTrackPressed();
+            this.jumpScrollToTrackPointer(event, scroller);
+        };
+        const bindNavButton = (button, direction) => {
+            if (!button) {
+                return () => undefined;
+            }
+            const onNavPointerLeave = () => {
+                button.classList.remove(NAV_BTN_PRESSED_CLASS);
+            };
+            const onNavPointerDown = (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                button.classList.add(NAV_BTN_PRESSED_CLASS);
+                this.beginTrackPressed();
+                this.scrollByNavStep(scroller, direction);
+            };
+            const onNavPointerUp = () => {
+                button.classList.remove(NAV_BTN_PRESSED_CLASS);
+            };
+            button.addEventListener('pointerleave', onNavPointerLeave);
+            button.addEventListener('pointerdown', onNavPointerDown);
+            button.addEventListener('pointerup', onNavPointerUp);
+            button.addEventListener('pointercancel', onNavPointerUp);
+            return () => {
+                button.removeEventListener('pointerleave', onNavPointerLeave);
+                button.removeEventListener('pointerdown', onNavPointerDown);
+                button.removeEventListener('pointerup', onNavPointerUp);
+                button.removeEventListener('pointercancel', onNavPointerUp);
+                button.classList.remove(NAV_BTN_PRESSED_CLASS);
+            };
+        };
+        const unbindNavUp = bindNavButton(this.navUpEl, -1);
+        const unbindNavDown = bindNavButton(this.navDownEl, 1);
+        rail.addEventListener('pointerenter', onRailPointerEnter);
+        rail.addEventListener('pointerleave', onRailPointerLeave);
+        rail.addEventListener('wheel', onRailWheel, { passive: false });
+        rail.addEventListener('pointerdown', onRailPointerDown);
+        this.unbindRailInteraction = () => {
+            rail.removeEventListener('pointerenter', onRailPointerEnter);
+            rail.removeEventListener('pointerleave', onRailPointerLeave);
+            this.clearTrackPressed();
+            rail.removeEventListener('wheel', onRailWheel);
+            rail.removeEventListener('pointerdown', onRailPointerDown);
+            unbindNavUp?.();
+            unbindNavDown?.();
+        };
+    }
+    unmountCustomScrollbar(scroller) {
+        this.railEl?.remove();
+        this.railEl = null;
+        this.trackEl = null;
+        this.navUpEl = null;
+        this.navDownEl = null;
+        this.thumbEl = null;
+        this.thumbLayout = null;
+        const root = this.rootEl;
+        if (!root?.classList.contains(ROOT_CLASS)) {
+            this.rootEl = null;
+            return;
+        }
+        const parent = root.parentElement;
+        if (parent) {
+            parent.insertBefore(scroller, root);
+            root.remove();
+        }
+        this.rootEl = null;
+    }
+    remeasureCustomThumb() {
+        const element = this.host.nativeElement;
+        const rail = this.railEl;
+        const thumb = this.thumbEl;
+        if (!rail || !thumb) {
+            return;
+        }
+        syncOverlayScrollbarDesignTokens(element, this.rootEl);
+        const clientHeight = element.clientHeight;
+        rail.style.height = `${clientHeight}px`;
+        const widthPx = readRailWidthPx(rail);
+        const navigationEnabled = this.navigationButtons() === true;
+        rail.classList.toggle(RAIL_WITH_NAV_CLASS, navigationEnabled);
+        const track = this.trackEl;
+        let trackViewportHeight = track?.clientHeight ?? 0;
+        if (trackViewportHeight <= 0) {
+            trackViewportHeight = navigationEnabled ? Math.max(0, clientHeight - 2 * widthPx) : clientHeight;
+        }
+        const scrollHeight = element.scrollHeight;
+        const isScrollable = scrollHeight > clientHeight + 1;
+        rail.hidden = !isScrollable;
+        if (!isScrollable) {
+            this.thumbLayout = null;
+            thumb.style.height = '';
+            thumb.style.top = '';
+            return;
+        }
+        const thumbHeight = Math.max(MIN_THUMB_HEIGHT_PX, (trackViewportHeight / scrollHeight) * trackViewportHeight);
+        const maxScroll = scrollHeight - clientHeight;
+        const maxThumbOffset = Math.max(0, trackViewportHeight - thumbHeight);
+        this.thumbLayout = { thumbHeight, maxScroll, maxThumbOffset };
+        thumb.style.height = `${thumbHeight}px`;
+        this.syncThumbPosition();
+    }
+    syncThumbPosition() {
+        const element = this.host.nativeElement;
+        const thumb = this.thumbEl;
+        const layout = this.thumbLayout;
+        if (!thumb || !layout) {
+            return;
+        }
+        const { maxScroll, maxThumbOffset } = layout;
+        const scrollTop = element.scrollTop;
+        const thumbOffset = maxScroll > 0 ? (scrollTop / maxScroll) * maxThumbOffset : 0;
+        thumb.style.top = `${thumbOffset}px`;
+    }
+    /** Move thumb (and scroll position) to the pointer Y on the track. */
+    jumpScrollToTrackPointer(event, scroller) {
+        const rail = this.railEl;
+        const layout = this.thumbLayout;
+        if (!rail || !layout || layout.maxScroll <= 0 || layout.maxThumbOffset <= 0) {
+            return;
+        }
+        const track = this.trackEl ?? rail;
+        const rect = track.getBoundingClientRect();
+        const offsetY = event.clientY - rect.top;
+        const thumbTop = Math.min(layout.maxThumbOffset, Math.max(0, offsetY - layout.thumbHeight / 2));
+        scroller.scrollTop = (thumbTop / layout.maxThumbOffset) * layout.maxScroll;
+        this.syncThumbPosition();
+        this.bumpVisibility();
+    }
+    onThumbPointerDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const element = this.host.nativeElement;
+        const thumb = this.thumbEl;
+        if (!thumb) {
+            return;
+        }
+        this.setScrollbarEngaged(true);
+        this.bumpVisibility();
+        thumb.setPointerCapture(event.pointerId);
+        const startY = event.clientY;
+        const startScrollTop = element.scrollTop;
+        const layout = this.thumbLayout;
+        const clientHeight = element.clientHeight;
+        const maxScroll = layout?.maxScroll ?? element.scrollHeight - clientHeight;
+        const maxThumbOffset = layout?.maxThumbOffset ?? clientHeight - thumb.offsetHeight;
+        const onPointerMove = (moveEvent) => {
+            if (maxThumbOffset <= 0 || maxScroll <= 0) {
+                return;
+            }
+            const deltaY = moveEvent.clientY - startY;
+            const scrollDelta = (deltaY / maxThumbOffset) * maxScroll;
+            element.scrollTop = startScrollTop + scrollDelta;
+        };
+        const onPointerUp = (upEvent) => {
+            thumb.releasePointerCapture(upEvent.pointerId);
+            thumb.removeEventListener('pointermove', onPointerMove);
+            thumb.removeEventListener('pointerup', onPointerUp);
+            thumb.removeEventListener('pointercancel', onPointerUp);
+            this.thumbDragPointerId = null;
+            this.setScrollbarEngaged(false);
+        };
+        this.thumbDragPointerId = event.pointerId;
+        thumb.addEventListener('pointermove', onPointerMove);
+        thumb.addEventListener('pointerup', onPointerUp);
+        thumb.addEventListener('pointercancel', onPointerUp);
+    }
+    showScrollbar() {
+        this.host.nativeElement.classList.add(VISIBLE_CLASS);
+        this.rootEl?.classList.add(VISIBLE_CLASS);
+    }
+    bumpVisibility() {
+        this.showScrollbar();
+        if (this.pointerOverRail) {
+            this.clearHideTimer();
+            return;
+        }
+        this.scheduleHide();
+    }
+    deactivateThumb() {
+        if (this.pointerOverRail) {
+            return;
+        }
+        this.clearHideTimer();
+        this.host.nativeElement.classList.remove(VISIBLE_CLASS);
+        this.rootEl?.classList.remove(VISIBLE_CLASS);
+        this.setScrollbarEngaged(false);
+    }
+    setScrollbarEngaged(engaged) {
+        this.host.nativeElement.classList.toggle(ENGAGED_CLASS, engaged);
+        this.rootEl?.classList.toggle(ENGAGED_CLASS, engaged);
+    }
+    setTrackPressed(pressed) {
+        this.host.nativeElement.classList.toggle(TRACK_PRESSED_CLASS, pressed);
+        this.rootEl?.classList.toggle(TRACK_PRESSED_CLASS, pressed);
+    }
+    isPointerOverThumbVisual(clientX, clientY) {
+        const thumb = this.thumbEl;
+        if (!thumb) {
+            return false;
+        }
+        const rect = thumb.getBoundingClientRect();
+        return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+    }
+    beginTrackPressed() {
+        this.clearTrackPressed();
+        this.setTrackPressed(true);
+        const release = () => {
+            this.setTrackPressed(false);
+            this.document.removeEventListener('pointerup', release);
+            this.document.removeEventListener('pointercancel', release);
+            this.trackPressReleaseListener = null;
+        };
+        this.trackPressReleaseListener = release;
+        this.document.addEventListener('pointerup', release);
+        this.document.addEventListener('pointercancel', release);
+    }
+    clearTrackPressed() {
+        if (this.trackPressReleaseListener) {
+            this.document.removeEventListener('pointerup', this.trackPressReleaseListener);
+            this.document.removeEventListener('pointercancel', this.trackPressReleaseListener);
+            this.trackPressReleaseListener = null;
+        }
+        this.setTrackPressed(false);
+    }
+    syncEngagedAfterScroll() {
+        if (this.thumbDragPointerId !== null) {
+            return;
+        }
+        this.setScrollbarEngaged(false);
+    }
+    scheduleHide() {
+        if (this.pointerOverRail) {
+            this.clearHideTimer();
+            return;
+        }
+        this.clearHideTimer();
+        const delay = Math.max(0, this.hideDelay());
+        this.hideTimer = setTimeout(() => {
+            this.deactivateThumb();
+            this.hideTimer = null;
+        }, delay);
+    }
+    clearHideTimer() {
+        if (this.hideTimer !== null) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXOverlayScrollbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: AXOverlayScrollbarDirective, isStandalone: true, selector: "[axOverlayScrollbar]", inputs: { hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, navigationButtons: { classPropertyName: "navigationButtons", publicName: "navigationButtons", isSignal: true, isRequired: false, transformFunction: null }, navScrollStep: { classPropertyName: "navScrollStep", publicName: "navScrollStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ax-cdk-overlay-scrollbar" }, exportAs: ["axOverlayScrollbar"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXOverlayScrollbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axOverlayScrollbar]',
+                    exportAs: 'axOverlayScrollbar',
+                    host: {
+                        class: 'ax-cdk-overlay-scrollbar',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], navigationButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationButtons", required: false }] }], navScrollStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "navScrollStep", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXOverlayScrollbarDefaultConfig, AXOverlayScrollbarDirective, AX_OVERLAY_SCROLLBAR_CONFIG, AX_OVERLAY_SCROLLBAR_CSS_VARS, AX_OVERLAY_SCROLLBAR_DEFAULT_HIDE_DELAY_MS, AX_OVERLAY_SCROLLBAR_DEFAULT_NAV_SCROLL_STEP_PX, applyOverlayScrollbarDesignTokens, clampOverlayScrollbarWidth, overlayScrollbarConfig, provideOverlayScrollbar };
+//# sourceMappingURL=acorex-cdk-overlay-scrollbar.mjs.map