import * as i0 from '@angular/core';
import { inject, PLATFORM_ID, ElementRef, NgZone, Renderer2, DestroyRef, viewChild, input, EventEmitter, signal, computed, effect, untracked, Output, ChangeDetectionStrategy, Component } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Observable, debounceTime, tap, merge, fromEvent, filter, switchMap, map, distinctUntilChanged, takeUntil, finalize } from 'rxjs';
import { Router, NavigationEnd } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

class ScrollbarArea {
    platformId = inject(PLATFORM_ID);
    elRef = inject((ElementRef));
    zone = inject(NgZone);
    renderer = inject(Renderer2);
    destroyRef = inject(DestroyRef);
    router = inject(Router);
    scrollableContentRef = viewChild.required('scrollableContent');
    scrollTrackRef = viewChild.required('scrollTrack');
    scrollThumbRef = viewChild.required('scrollThumb');
    scrollTrackXRef = viewChild.required('scrollTrackX');
    scrollThumbXRef = viewChild.required('scrollThumbX');
    scrollbarWidth = input('8px', ...(ngDevMode ? [{ debugName: "scrollbarWidth" }] : /* istanbul ignore next */ []));
    autoHide = input(true, ...(ngDevMode ? [{ debugName: "autoHide" }] : /* istanbul ignore next */ []));
    absolute = input(true, ...(ngDevMode ? [{ debugName: "absolute" }] : /* istanbul ignore next */ []));
    scrolled = new EventEmitter();
    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
    isHovering = signal(false, ...(ngDevMode ? [{ debugName: "isHovering" }] : /* istanbul ignore next */ []));
    scrollTop = signal(0, ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
    scrollLeft = signal(0, ...(ngDevMode ? [{ debugName: "scrollLeft" }] : /* istanbul ignore next */ []));
    contentScrollHeight = signal(0, ...(ngDevMode ? [{ debugName: "contentScrollHeight" }] : /* istanbul ignore next */ []));
    contentScrollWidth = signal(0, ...(ngDevMode ? [{ debugName: "contentScrollWidth" }] : /* istanbul ignore next */ []));
    contentClientHeight = signal(0, ...(ngDevMode ? [{ debugName: "contentClientHeight" }] : /* istanbul ignore next */ []));
    contentClientWidth = signal(0, ...(ngDevMode ? [{ debugName: "contentClientWidth" }] : /* istanbul ignore next */ []));
    trackClientHeight = signal(0, ...(ngDevMode ? [{ debugName: "trackClientHeight" }] : /* istanbul ignore next */ []));
    trackClientWidth = signal(0, ...(ngDevMode ? [{ debugName: "trackClientWidth" }] : /* istanbul ignore next */ []));
    showDueToActivity = signal(false, ...(ngDevMode ? [{ debugName: "showDueToActivity" }] : /* istanbul ignore next */ []));
    // Vertical axis
    hasScrollY = computed(() => this.contentScrollHeight() > this.contentClientHeight() + 1, ...(ngDevMode ? [{ debugName: "hasScrollY" }] : /* istanbul ignore next */ []));
    scrollRatioY = computed(() => this.hasScrollY() ? this.contentClientHeight() / this.contentScrollHeight() : 1, ...(ngDevMode ? [{ debugName: "scrollRatioY" }] : /* istanbul ignore next */ []));
    minThumbHeight = 20;
    thumbHeight = computed(() => {
        if (!this.hasScrollY())
            return 0;
        const trackHeight = this.trackClientHeight();
        const ratio = this.scrollRatioY();
        const calculated = trackHeight * ratio;
        return Math.max(calculated, this.minThumbHeight);
    }, ...(ngDevMode ? [{ debugName: "thumbHeight" }] : /* istanbul ignore next */ []));
    maxScrollTop = computed(() => Math.max(0, this.contentScrollHeight() - this.contentClientHeight()), ...(ngDevMode ? [{ debugName: "maxScrollTop" }] : /* istanbul ignore next */ []));
    maxThumbTop = computed(() => Math.max(0, this.trackClientHeight() - this.thumbHeight()), ...(ngDevMode ? [{ debugName: "maxThumbTop" }] : /* istanbul ignore next */ []));
    thumbTop = computed(() => {
        if (!this.hasScrollY())
            return 0;
        const maxScroll = this.maxScrollTop();
        const currentScroll = this.scrollTop();
        const maxThumb = this.maxThumbTop();
        return maxScroll > 0 ? (currentScroll / maxScroll) * maxThumb : 0;
    }, ...(ngDevMode ? [{ debugName: "thumbTop" }] : /* istanbul ignore next */ []));
    // Horizontal axis
    hasScrollX = computed(() => this.contentScrollWidth() > this.contentClientWidth() + 1, ...(ngDevMode ? [{ debugName: "hasScrollX" }] : /* istanbul ignore next */ []));
    scrollRatioX = computed(() => this.hasScrollX() ? this.contentClientWidth() / this.contentScrollWidth() : 1, ...(ngDevMode ? [{ debugName: "scrollRatioX" }] : /* istanbul ignore next */ []));
    minThumbWidth = 20;
    thumbWidth = computed(() => {
        if (!this.hasScrollX())
            return 0;
        const trackWidth = this.trackClientWidth();
        const ratio = this.scrollRatioX();
        const calculated = trackWidth * ratio;
        return Math.max(calculated, this.minThumbWidth);
    }, ...(ngDevMode ? [{ debugName: "thumbWidth" }] : /* istanbul ignore next */ []));
    maxScrollLeft = computed(() => Math.max(0, this.contentScrollWidth() - this.contentClientWidth()), ...(ngDevMode ? [{ debugName: "maxScrollLeft" }] : /* istanbul ignore next */ []));
    maxThumbLeft = computed(() => Math.max(0, this.trackClientWidth() - this.thumbWidth()), ...(ngDevMode ? [{ debugName: "maxThumbLeft" }] : /* istanbul ignore next */ []));
    thumbLeft = computed(() => {
        if (!this.hasScrollX())
            return 0;
        const maxScroll = this.maxScrollLeft();
        const currentScroll = this.scrollLeft();
        const maxThumb = this.maxThumbLeft();
        return maxScroll > 0 ? (currentScroll / maxScroll) * maxThumb : 0;
    }, ...(ngDevMode ? [{ debugName: "thumbLeft" }] : /* istanbul ignore next */ []));
    hasAnyScroll = computed(() => this.hasScrollX() || this.hasScrollY(), ...(ngDevMode ? [{ debugName: "hasAnyScroll" }] : /* istanbul ignore next */ []));
    isVisible = computed(() => {
        if (!this.hasAnyScroll())
            return false;
        if (!this.autoHide())
            return true;
        return this.isHovering() || this.isDragging() || this.showDueToActivity();
    }, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
    isInteractive = computed(() => this.isHovering() || this.isDragging(), ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
    isInitialized = signal(false, ...(ngDevMode ? [{ debugName: "isInitialized" }] : /* istanbul ignore next */ []));
    eventsSubscription = null;
    observersSubscription = null;
    hideTimeout = null;
    constructor() {
        effect(() => {
            this.scrollableContentRef();
            this.scrollTrackRef();
            this.scrollThumbRef();
            this.scrollTrackXRef();
            this.scrollThumbXRef();
            if (isPlatformBrowser(this.platformId) && !this.isInitialized()) {
                this.initializeComponentLogic();
                this.isInitialized.set(true);
            }
        });
        this.setupStyleEffects();
        this.destroyRef.onDestroy(() => this.cleanup());
    }
    initializeComponentLogic() {
        this.updateDimensions();
        this.setupObservers();
        this.setupEventStreams();
        this.setupRouteChanges();
    }
    raf(cb) {
        // Use requestAnimationFrame in the browser, fallback to setTimeout on SSR
        if (typeof requestAnimationFrame !== 'undefined') {
            requestAnimationFrame(() => cb());
        }
        else {
            setTimeout(() => cb(), 0);
        }
    }
    setupStyleEffects() {
        // Vertical thickness (width) and horizontal thickness (height)
        effect(() => {
            const thickness = this.scrollbarWidth();
            const trackY = this.scrollTrackRef().nativeElement;
            const thumbY = this.scrollThumbRef().nativeElement;
            const trackX = this.scrollTrackXRef().nativeElement;
            const thumbX = this.scrollThumbXRef().nativeElement;
            untracked(() => {
                // Vertical scrollbar: width is thickness
                this.renderer.setStyle(trackY, 'width', thickness);
                this.renderer.setStyle(thumbY, 'width', thickness);
                // Horizontal scrollbar: height is thickness
                this.renderer.setStyle(trackX, 'height', thickness);
                this.renderer.setStyle(thumbX, 'height', thickness);
            });
        });
        // Vertical thumb height
        effect(() => {
            const height = this.thumbHeight();
            const thumbElement = this.scrollThumbRef().nativeElement;
            untracked(() => {
                this.renderer.setStyle(thumbElement, 'height', `${height}px`);
            });
        });
        // Vertical thumb position
        effect(() => {
            const top = this.thumbTop();
            const thumbElement = this.scrollThumbRef().nativeElement;
            untracked(() => {
                this.renderer.setStyle(thumbElement, 'transform', `translateY(${top}px)`);
            });
        });
        // Horizontal thumb width
        effect(() => {
            const width = this.thumbWidth();
            const thumbElementX = this.scrollThumbXRef().nativeElement;
            untracked(() => {
                this.renderer.setStyle(thumbElementX, 'width', `${width}px`);
            });
        });
        // Horizontal thumb position
        effect(() => {
            const left = this.thumbLeft();
            const thumbElementX = this.scrollThumbXRef().nativeElement;
            untracked(() => {
                this.renderer.setStyle(thumbElementX, 'transform', `translateX(${left}px)`);
            });
        });
        // Toggle track visibility per axis based on content
        effect(() => {
            const hasY = this.hasScrollY();
            const trackY = this.scrollTrackRef().nativeElement;
            untracked(() => {
                this.renderer.setStyle(trackY, 'display', hasY ? 'block' : 'none');
            });
        });
        effect(() => {
            const hasX = this.hasScrollX();
            const trackX = this.scrollTrackXRef().nativeElement;
            untracked(() => {
                this.renderer.setStyle(trackX, 'display', hasX ? 'block' : 'none');
            });
        });
        // When scrollability toggles, recompute dimensions after tracks are laid out
        effect(() => {
            // depend on both so we run when either axis scrollability changes
            const _hasY = this.hasScrollY();
            const _hasX = this.hasScrollX();
            untracked(() => {
                // Wait for style changes (display:block/none) to apply, then measure
                this.raf(() => {
                    this.zone.run(() => this.updateDimensions());
                });
            });
        });
    }
    setupObservers() {
        const scrollableElement = this.scrollableContentRef().nativeElement;
        const hostElement = this.elRef.nativeElement;
        // Helper to observe all element nodes within a subtree with ResizeObserver
        const observeSubtree = (ro, root) => {
            ro.observe(root);
            // Observe all current descendants as well to catch size changes that don't bubble to the container
            const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
            let node = walker.currentNode;
            while (node) {
                ro.observe(node);
                node = walker.nextNode();
            }
        };
        const resize$ = new Observable(observer => {
            const resizeObserver = new ResizeObserver(entries => this.zone.run(() => observer.next(entries)));
            // Observe host (tracks may affect layout) and the entire subtree of scrollable content
            observeSubtree(resizeObserver, scrollableElement);
            resizeObserver.observe(hostElement);
            return () => resizeObserver.disconnect();
        }).pipe(debounceTime(50));
        const mutation$ = new Observable(observer => {
            const mutationObserver = new MutationObserver(mutations => this.zone.run(() => observer.next(mutations)));
            // Watch for any DOM changes that can affect layout including attribute/class/style changes
            mutationObserver.observe(scrollableElement, { childList: true, subtree: true, characterData: true, attributes: true });
            return () => mutationObserver.disconnect();
        }).pipe(tap(mutations => {
            // If nodes were added to the subtree, start observing them for size changes as well
            // We run outside Angular to avoid triggering change detection per node
            this.zone.runOutsideAngular(() => {
                // Create a temporary RO reference by reusing the one from resize$ is not trivial here,
                // but we can trigger a dimension update directly which is enough for many cases.
                // The resize observer above already observes the whole subtree at setup time.
                // For dynamically added nodes, re-run a subtree observation by creating a one-shot RO.
                const newlyAdded = [];
                for (const m of mutations) {
                    if (m.type === 'childList') {
                        m.addedNodes.forEach(n => { if (n.nodeType === Node.ELEMENT_NODE)
                            newlyAdded.push(n); });
                    }
                }
                if (newlyAdded.length) {
                    try {
                        const ro = new ResizeObserver(() => { });
                        newlyAdded.forEach(el => observeSubtree(ro, el));
                        // Disconnect immediately; observing once is enough for triggering initial measure via update below
                        ro.disconnect();
                    }
                    catch { }
                }
            });
        }), debounceTime(50));
        this.observersSubscription = merge(resize$, mutation$)
            .subscribe(() => {
            // Use rAF to ensure layout is settled before measuring
            this.raf(() => this.zone.run(() => this.updateDimensions()));
        });
    }
    setupEventStreams() {
        const scrollableElement = this.scrollableContentRef().nativeElement;
        const hostElement = this.elRef.nativeElement;
        const thumbElementY = this.scrollThumbRef().nativeElement;
        const thumbElementX = this.scrollThumbXRef().nativeElement;
        const scroll$ = fromEvent(scrollableElement, 'scroll', { passive: true }).pipe(tap((event) => {
            this.zone.run(() => {
                this.scrollTop.set(scrollableElement.scrollTop);
                this.scrollLeft.set(scrollableElement.scrollLeft);
                this.scrolled.emit(event);
            });
            // Imperative sync to ensure thumbs move with content during scroll
            this.zone.runOutsideAngular(() => {
                this.raf(() => {
                    const top = untracked(this.thumbTop);
                    const left = untracked(this.thumbLeft);
                    this.renderer.setStyle(thumbElementY, 'transform', `translateY(${top}px)`);
                    this.renderer.setStyle(thumbElementX, 'transform', `translateX(${left}px)`);
                });
            });
        }), filter(() => this.autoHide()), tap(() => this.zone.run(() => this.showDueToActivity.set(true))), debounceTime(1500), tap(() => {
            untracked(() => {
                if (!this.isHovering() && !this.isDragging()) {
                    this.zone.run(() => this.showDueToActivity.set(false));
                }
            });
        }));
        const hostEnter$ = fromEvent(hostElement, 'mouseenter').pipe(tap(() => this.zone.run(() => {
            this.isHovering.set(true);
            if (untracked(this.autoHide))
                this.showDueToActivity.set(true);
        })));
        const hostLeave$ = fromEvent(hostElement, 'mouseleave').pipe(tap(() => this.zone.run(() => {
            this.isHovering.set(false);
            if (untracked(this.autoHide) && !untracked(this.isDragging)) {
                this.scheduleHide();
            }
        })));
        const thumbMouseDownY$ = fromEvent(thumbElementY, 'mousedown');
        const thumbMouseDownX$ = fromEvent(thumbElementX, 'mousedown');
        const mouseMove$ = fromEvent(document, 'mousemove');
        const mouseUp$ = fromEvent(document, 'mouseup');
        const thumbDragY$ = thumbMouseDownY$.pipe(tap(event => {
            event.preventDefault();
            event.stopPropagation();
        }), switchMap(startEvent => {
            const startY = startEvent.clientY;
            const startScrollTop = scrollableElement.scrollTop;
            const initialTrackHeight = untracked(() => this.trackClientHeight());
            const initialContentHeight = untracked(() => this.contentScrollHeight());
            this.zone.run(() => this.isDragging.set(true));
            return mouseMove$.pipe(map(moveEvent => {
                moveEvent.preventDefault();
                const deltaY = moveEvent.clientY - startY;
                const scrollDelta = initialTrackHeight > 0
                    ? (deltaY / initialTrackHeight) * initialContentHeight
                    : 0;
                return startScrollTop + scrollDelta;
            }), distinctUntilChanged(), tap(newScrollTop => {
                this.renderer.setProperty(scrollableElement, 'scrollTop', newScrollTop);
            }), takeUntil(mouseUp$), finalize(() => {
                this.zone.run(() => {
                    this.isDragging.set(false);
                    untracked(() => {
                        if (this.autoHide() && !this.isHovering()) {
                            this.scheduleHide();
                        }
                    });
                });
            }));
        }));
        const thumbDragX$ = thumbMouseDownX$.pipe(tap(event => {
            event.preventDefault();
            event.stopPropagation();
        }), switchMap(startEvent => {
            const startX = startEvent.clientX;
            const startScrollLeft = scrollableElement.scrollLeft;
            const initialTrackWidth = untracked(() => this.trackClientWidth());
            const initialContentWidth = untracked(() => this.contentScrollWidth());
            this.zone.run(() => this.isDragging.set(true));
            return mouseMove$.pipe(map(moveEvent => {
                moveEvent.preventDefault();
                const deltaX = moveEvent.clientX - startX;
                const scrollDelta = initialTrackWidth > 0
                    ? (deltaX / initialTrackWidth) * initialContentWidth
                    : 0;
                return startScrollLeft + scrollDelta;
            }), distinctUntilChanged(), tap(newScrollLeft => {
                this.renderer.setProperty(scrollableElement, 'scrollLeft', newScrollLeft);
            }), takeUntil(mouseUp$), finalize(() => {
                this.zone.run(() => {
                    this.isDragging.set(false);
                    untracked(() => {
                        if (this.autoHide() && !this.isHovering()) {
                            this.scheduleHide();
                        }
                    });
                });
            }));
        }));
        this.zone.runOutsideAngular(() => {
            this.eventsSubscription = merge(scroll$, hostEnter$, hostLeave$, thumbDragY$, thumbDragX$).subscribe();
        });
    }
    scheduleHide() {
        this.clearHideTimeout();
        this.zone.runOutsideAngular(() => {
            this.hideTimeout = setTimeout(() => {
                untracked(() => {
                    if (!this.isHovering() && !this.isDragging()) {
                        this.zone.run(() => this.showDueToActivity.set(false));
                    }
                });
                this.hideTimeout = null;
            }, 100);
        });
    }
    clearHideTimeout() {
        if (this.hideTimeout) {
            clearTimeout(this.hideTimeout);
            this.hideTimeout = null;
        }
    }
    updateDimensions() {
        const scrollableElement = this.scrollableContentRef().nativeElement;
        const trackElementY = this.scrollTrackRef().nativeElement;
        const trackElementX = this.scrollTrackXRef().nativeElement;
        if (scrollableElement && trackElementY && trackElementX) {
            // Vertical metrics
            const newScrollHeight = scrollableElement.scrollHeight;
            const newClientHeight = scrollableElement.clientHeight;
            const newTrackHeight = trackElementY.clientHeight;
            const newScrollTop = scrollableElement.scrollTop;
            this.contentScrollHeight.set(newScrollHeight);
            this.contentClientHeight.set(newClientHeight);
            this.trackClientHeight.set(newTrackHeight);
            if (this.scrollTop() !== newScrollTop) {
                this.scrollTop.set(newScrollTop);
            }
            // Horizontal metrics
            const newScrollWidth = scrollableElement.scrollWidth;
            const newClientWidth = scrollableElement.clientWidth;
            const newTrackWidth = trackElementX.clientWidth;
            const newScrollLeft = scrollableElement.scrollLeft;
            this.contentScrollWidth.set(newScrollWidth);
            this.contentClientWidth.set(newClientWidth);
            this.trackClientWidth.set(newTrackWidth);
            if (this.scrollLeft() !== newScrollLeft) {
                this.scrollLeft.set(newScrollLeft);
            }
        }
        else {
            this.contentScrollHeight.set(0);
            this.contentClientHeight.set(0);
            this.trackClientHeight.set(0);
            this.scrollTop.set(0);
            this.contentScrollWidth.set(0);
            this.contentClientWidth.set(0);
            this.trackClientWidth.set(0);
            this.scrollLeft.set(0);
        }
    }
    cleanup() {
        this.clearHideTimeout();
        if (this.eventsSubscription) {
            this.eventsSubscription.unsubscribe();
            this.eventsSubscription = null;
        }
        if (this.observersSubscription) {
            this.observersSubscription.unsubscribe();
            this.observersSubscription = null;
        }
    }
    setupRouteChanges() {
        this.router.events
            .pipe(filter(event => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
            .subscribe(() => {
            this.raf(() => {
                this.updateDimensions();
            });
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScrollbarArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ScrollbarArea, isStandalone: true, selector: "ngs-scrollbar-area", inputs: { scrollbarWidth: { classPropertyName: "scrollbarWidth", publicName: "scrollbarWidth", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, absolute: { classPropertyName: "absolute", publicName: "absolute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolled: "scrolled" }, host: { properties: { "class.scrollbar-visible": "isVisible()", "class.scrollbar-interactive": "isInteractive()", "class.is-absolute": "absolute()" }, classAttribute: "ngs-scrollbar-area" }, viewQueries: [{ propertyName: "scrollableContentRef", first: true, predicate: ["scrollableContent"], descendants: true, isSignal: true }, { propertyName: "scrollTrackRef", first: true, predicate: ["scrollTrack"], descendants: true, isSignal: true }, { propertyName: "scrollThumbRef", first: true, predicate: ["scrollThumb"], descendants: true, isSignal: true }, { propertyName: "scrollTrackXRef", first: true, predicate: ["scrollTrackX"], descendants: true, isSignal: true }, { propertyName: "scrollThumbXRef", first: true, predicate: ["scrollThumbX"], descendants: true, isSignal: true }], exportAs: ["ngsScrollbarArea"], ngImport: i0, template: "<div #scrollableContent class=\"scrollable-content\">\n  <ng-content/>\n</div>\n<div #scrollTrack class=\"scroll-track\">\n  <div #scrollThumb class=\"scroll-thumb\"></div>\n</div>\n<div #scrollTrackX class=\"scroll-track-x\">\n  <div #scrollThumbX class=\"scroll-thumb-x\"></div>\n</div>\n", styles: [":host{--ngs-scrollbar-area-thumb-bg: var(--ngs-color-neutral-200);--ngs-scrollbar-area-thumb-hover-bg: var(--ngs-color-neutral-300);--ngs-scrollbar-area-thumb-active-bg: var(--ngs-color-neutral-300);--ngs-scrollbar-area-width: 10px;--ngs-scrollbar-area-scroll-track-bg: transparent;display:block;overflow:hidden;position:absolute;inset:0}:host .scrollable-content{height:100%;overflow-y:scroll;overflow-x:scroll;width:100%;padding-right:0;box-sizing:border-box}:host .scrollable-content::-webkit-scrollbar{width:0;height:0;background:transparent}:host .scrollable-content{scrollbar-width:none;-ms-overflow-style:none}:host .scroll-track{position:absolute;top:0;right:0;bottom:0;width:var(--ngs-scrollbar-area-width);background:var(--ngs-scrollbar-area-scroll-track-bg);border-radius:var(--ngs-radius-sm);opacity:0;transition:opacity .2s ease-in-out;z-index:100;pointer-events:none}:host .scroll-thumb{position:absolute;top:0;left:0;width:var(--ngs-scrollbar-area-width);background:var(--ngs-scrollbar-area-thumb-bg);border-radius:var(--ngs-radius-sm);transition:background-color .2s ease-in-out;pointer-events:auto}:host .scroll-track-x{position:absolute;left:0;right:0;bottom:0;height:var(--ngs-scrollbar-area-width);background:var(--ngs-scrollbar-area-scroll-track-bg);border-radius:var(--ngs-radius-sm);opacity:0;transition:opacity .2s ease-in-out;z-index:100;pointer-events:none}:host .scroll-thumb-x{position:absolute;bottom:0;left:0;height:var(--ngs-scrollbar-area-width);background:var(--ngs-scrollbar-area-thumb-bg);border-radius:var(--ngs-radius-sm);transition:background-color .2s ease-in-out;pointer-events:auto}:host .scroll-thumb:hover,:host .scroll-thumb-x:hover{background:var(--ngs-scrollbar-area-thumb-hover-bg)}:host .scroll-thumb:active,:host .scroll-thumb-x:active{background:var(--ngs-scrollbar-area-thumb-active-bg)}:host.scrollbar-visible .scroll-track,:host.scrollbar-visible .scroll-track-x{opacity:1}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScrollbarArea, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-scrollbar-area', exportAs: 'ngsScrollbarArea', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-scrollbar-area',
                        '[class.scrollbar-visible]': 'isVisible()',
                        '[class.scrollbar-interactive]': 'isInteractive()',
                        '[class.is-absolute]': 'absolute()',
                    }, template: "<div #scrollableContent class=\"scrollable-content\">\n  <ng-content/>\n</div>\n<div #scrollTrack class=\"scroll-track\">\n  <div #scrollThumb class=\"scroll-thumb\"></div>\n</div>\n<div #scrollTrackX class=\"scroll-track-x\">\n  <div #scrollThumbX class=\"scroll-thumb-x\"></div>\n</div>\n", styles: [":host{--ngs-scrollbar-area-thumb-bg: var(--ngs-color-neutral-200);--ngs-scrollbar-area-thumb-hover-bg: var(--ngs-color-neutral-300);--ngs-scrollbar-area-thumb-active-bg: var(--ngs-color-neutral-300);--ngs-scrollbar-area-width: 10px;--ngs-scrollbar-area-scroll-track-bg: transparent;display:block;overflow:hidden;position:absolute;inset:0}:host .scrollable-content{height:100%;overflow-y:scroll;overflow-x:scroll;width:100%;padding-right:0;box-sizing:border-box}:host .scrollable-content::-webkit-scrollbar{width:0;height:0;background:transparent}:host .scrollable-content{scrollbar-width:none;-ms-overflow-style:none}:host .scroll-track{position:absolute;top:0;right:0;bottom:0;width:var(--ngs-scrollbar-area-width);background:var(--ngs-scrollbar-area-scroll-track-bg);border-radius:var(--ngs-radius-sm);opacity:0;transition:opacity .2s ease-in-out;z-index:100;pointer-events:none}:host .scroll-thumb{position:absolute;top:0;left:0;width:var(--ngs-scrollbar-area-width);background:var(--ngs-scrollbar-area-thumb-bg);border-radius:var(--ngs-radius-sm);transition:background-color .2s ease-in-out;pointer-events:auto}:host .scroll-track-x{position:absolute;left:0;right:0;bottom:0;height:var(--ngs-scrollbar-area-width);background:var(--ngs-scrollbar-area-scroll-track-bg);border-radius:var(--ngs-radius-sm);opacity:0;transition:opacity .2s ease-in-out;z-index:100;pointer-events:none}:host .scroll-thumb-x{position:absolute;bottom:0;left:0;height:var(--ngs-scrollbar-area-width);background:var(--ngs-scrollbar-area-thumb-bg);border-radius:var(--ngs-radius-sm);transition:background-color .2s ease-in-out;pointer-events:auto}:host .scroll-thumb:hover,:host .scroll-thumb-x:hover{background:var(--ngs-scrollbar-area-thumb-hover-bg)}:host .scroll-thumb:active,:host .scroll-thumb-x:active{background:var(--ngs-scrollbar-area-thumb-active-bg)}:host.scrollbar-visible .scroll-track,:host.scrollbar-visible .scroll-track-x{opacity:1}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], ctorParameters: () => [], propDecorators: { scrollableContentRef: [{ type: i0.ViewChild, args: ['scrollableContent', { isSignal: true }] }], scrollTrackRef: [{ type: i0.ViewChild, args: ['scrollTrack', { isSignal: true }] }], scrollThumbRef: [{ type: i0.ViewChild, args: ['scrollThumb', { isSignal: true }] }], scrollTrackXRef: [{ type: i0.ViewChild, args: ['scrollTrackX', { isSignal: true }] }], scrollThumbXRef: [{ type: i0.ViewChild, args: ['scrollThumbX', { isSignal: true }] }], scrollbarWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbarWidth", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], absolute: [{ type: i0.Input, args: [{ isSignal: true, alias: "absolute", required: false }] }], scrolled: [{
                type: Output
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { ScrollbarArea };
//# sourceMappingURL=ngstarter-ui-components-scrollbar-area.mjs.map
