primeng/fesm2022/primeng-scrollarea.mjs

PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,

export * from 'primeng/types/scrollarea';
import { isPlatformBrowser } from '@angular/common';
import * as i0 from '@angular/core';
import { InjectionToken, Injectable, inject, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, input, booleanAttribute, numberAttribute, signal, NgModule } from '@angular/core';
import { SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind, BindModule } from 'primeng/bind';
import { style } from '@primeuix/styles/scrollarea';
import { BaseStyle } from 'primeng/base';

const SCROLLAREA_INSTANCE = new InjectionToken('SCROLLAREA_INSTANCE');
const SCROLLAREA_VIEWPORT_INSTANCE = new InjectionToken('SCROLLAREA_VIEWPORT_INSTANCE');
const SCROLLAREA_SCROLLBAR_INSTANCE = new InjectionToken('SCROLLAREA_SCROLLBAR_INSTANCE');

const classes = {
    root: ({ instance }) => ['p-scrollarea p-component', { 'p-scrollarea-mask': instance.mask() }],
    viewport: 'p-scrollarea-viewport',
    content: 'p-scrollarea-content',
    scrollbar: 'p-scrollarea-scrollbar',
    handle: 'p-scrollarea-handle',
    corner: 'p-scrollarea-corner'
};
const inlineStyles = {
    root: {
        position: 'relative'
    },
    viewport: {
        overflow: 'scroll',
        scrollbarWidth: 'none'
    },
    scrollbar: ({ instance }) => {
        const isVertical = instance.orientation() === 'vertical';
        return {
            position: 'absolute',
            touchAction: 'none',
            userSelect: 'none',
            WebkitUserSelect: 'none',
            display: instance.isHidden() ? 'none' : undefined,
            top: isVertical ? 0 : undefined,
            bottom: isVertical ? 'var(--px-corner-height)' : 0,
            insetInlineEnd: isVertical ? 0 : 'var(--px-corner-width)',
            insetInlineStart: !isVertical ? 0 : undefined
        };
    },
    corner: ({ instance }) => ({
        position: 'absolute',
        bottom: 0,
        insetInlineEnd: 0,
        display: instance.isHidden() ? 'none' : undefined
    })
};
class ScrollAreaStyle extends BaseStyle {
    name = 'scrollarea';
    style = style;
    classes = classes;
    inlineStyles = inlineStyles;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * ScrollArea is a cross browser, lightweight and themable alternative to native browser scrollbar.
 *
 * [Live Demo](https://www.primeng.org/scrollarea)
 *
 * @module scrollareastyle
 *
 */
var ScrollAreaClasses;
(function (ScrollAreaClasses) {
    /**
     * Class name of the root element
     */
    ScrollAreaClasses["root"] = "p-scrollarea";
    /**
     * Class name of the viewport element
     */
    ScrollAreaClasses["viewport"] = "p-scrollarea-viewport";
    /**
     * Class name of the content element
     */
    ScrollAreaClasses["content"] = "p-scrollarea-content";
    /**
     * Class name of the scrollbar element
     */
    ScrollAreaClasses["scrollbar"] = "p-scrollarea-scrollbar";
    /**
     * Class name of the handle element
     */
    ScrollAreaClasses["handle"] = "p-scrollarea-handle";
    /**
     * Class name of the corner element
     */
    ScrollAreaClasses["corner"] = "p-scrollarea-corner";
})(ScrollAreaClasses || (ScrollAreaClasses = {}));

/**
 * ScrollAreaContent is a helper component for ScrollArea component.
 * @group Components
 */
class ScrollAreaContent extends BaseComponent {
    componentName = 'ScrollAreaContent';
    bindDirectiveInstance = inject(Bind, { self: true });
    pcScrollArea = inject(SCROLLAREA_INSTANCE);
    _componentStyle = inject(ScrollAreaStyle);
    contentMinWidth = computed(() => (this.pcScrollArea.hasOverflowX() ? 'fit-content' : null), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "contentMinWidth" }] : /* istanbul ignore next */ []));
    contentMinHeight = computed(() => (this.pcScrollArea.hasOverflowY() ? 'fit-content' : null), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "contentMinHeight" }] : /* istanbul ignore next */ []));
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.pcScrollArea.ptms(['content']));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ScrollAreaContent, isStandalone: true, selector: "p-scrollarea-content, p-scroll-area-content", host: { properties: { "class": "cx(\"content\")", "style.min-width": "contentMinWidth()", "style.min-height": "contentMinHeight()" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: ScrollAreaContent }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaContent, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-scrollarea-content, p-scroll-area-content',
                    standalone: true,
                    imports: [BindModule],
                    template: `<ng-content></ng-content>`,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [{ provide: PARENT_INSTANCE, useExisting: ScrollAreaContent }],
                    host: {
                        '[class]': 'cx("content")',
                        '[style.min-width]': 'contentMinWidth()',
                        '[style.min-height]': 'contentMinHeight()'
                    },
                    hostDirectives: [Bind]
                }]
        }] });

/**
 * ScrollAreaCorner is a helper component for ScrollArea component.
 * @group Components
 */
class ScrollAreaCorner extends BaseComponent {
    componentName = 'ScrollAreaCorner';
    bindDirectiveInstance = inject(Bind, { self: true });
    pcScrollArea = inject(SCROLLAREA_INSTANCE);
    _componentStyle = inject(ScrollAreaStyle);
    hostEl = inject(ElementRef);
    isHidden = computed(() => this.pcScrollArea.cornerHidden(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.pcScrollArea.ptms(['corner']));
    }
    onAfterViewInit() {
        this.pcScrollArea.cornerEl = this.hostEl.nativeElement;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaCorner, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ScrollAreaCorner, isStandalone: true, selector: "p-scrollarea-corner, p-scroll-area-corner", host: { properties: { "class": "cx(\"corner\")", "style": "sx(\"corner\")" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: ScrollAreaCorner }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaCorner, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-scrollarea-corner, p-scroll-area-corner',
                    standalone: true,
                    imports: [BindModule],
                    template: ``,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [{ provide: PARENT_INSTANCE, useExisting: ScrollAreaCorner }],
                    host: {
                        '[class]': 'cx("corner")',
                        '[style]': 'sx("corner")'
                    },
                    hostDirectives: [Bind]
                }]
        }] });

/**
 * ScrollAreaScrollbar is a helper component for ScrollArea component.
 * @group Components
 */
class ScrollAreaScrollbar extends BaseComponent {
    componentName = 'ScrollAreaScrollbar';
    $pcScrollAreaScrollbar = inject(SCROLLAREA_SCROLLBAR_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    bindDirectiveInstance = inject(Bind, { self: true });
    pcScrollArea = inject(SCROLLAREA_INSTANCE);
    _componentStyle = inject(ScrollAreaStyle);
    hostEl = inject(ElementRef);
    /**
     * Orientation of the scrollbar.
     * @group Props
     */
    orientation = input('vertical', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
    isVertical = computed(() => this.orientation() === 'vertical', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
    isHidden = computed(() => (this.isVertical() ? this.pcScrollArea.hiddenY() : this.pcScrollArea.hiddenX()), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
    dataHovering = computed(() => (this.pcScrollArea.hovering() ? '' : null), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataHovering" }] : /* istanbul ignore next */ []));
    dataScrolling = computed(() => {
        const isVertical = this.isVertical();
        return (isVertical ? this.pcScrollArea.scrollingY() : this.pcScrollArea.scrollingX()) ? '' : null;
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataScrolling" }] : /* istanbul ignore next */ []));
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.pcScrollArea.ptms(['scrollbar']));
    }
    onAfterViewInit() {
        const el = this.hostEl.nativeElement;
        if (this.isVertical()) {
            this.pcScrollArea.scrollbarYEl = el;
        }
        else {
            this.pcScrollArea.scrollbarXEl = el;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaScrollbar, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: ScrollAreaScrollbar, isStandalone: true, selector: "p-scrollarea-scrollbar, p-scroll-area-scrollbar", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "pcScrollArea.onScrollbarPointerDown($event, orientation())", "pointermove": "pcScrollArea.onScrollbarPointerMove($event)", "pointerup": "pcScrollArea.onScrollbarPointerUp($event)", "wheel": "pcScrollArea.onScrollbarWheel($event, orientation())" }, properties: { "class": "cx(\"scrollbar\")", "style": "sx(\"scrollbar\")", "attr.data-orientation": "orientation()", "attr.data-hovering": "dataHovering()", "attr.data-scrolling": "dataScrolling()" } }, providers: [
            { provide: SCROLLAREA_SCROLLBAR_INSTANCE, useExisting: ScrollAreaScrollbar },
            { provide: PARENT_INSTANCE, useExisting: ScrollAreaScrollbar }
        ], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaScrollbar, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-scrollarea-scrollbar, p-scroll-area-scrollbar',
                    standalone: true,
                    imports: [BindModule],
                    template: `<ng-content></ng-content>`,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [
                        { provide: SCROLLAREA_SCROLLBAR_INSTANCE, useExisting: ScrollAreaScrollbar },
                        { provide: PARENT_INSTANCE, useExisting: ScrollAreaScrollbar }
                    ],
                    host: {
                        '[class]': 'cx("scrollbar")',
                        '[style]': 'sx("scrollbar")',
                        '[attr.data-orientation]': 'orientation()',
                        '[attr.data-hovering]': 'dataHovering()',
                        '[attr.data-scrolling]': 'dataScrolling()',
                        '(pointerdown)': 'pcScrollArea.onScrollbarPointerDown($event, orientation())',
                        '(pointermove)': 'pcScrollArea.onScrollbarPointerMove($event)',
                        '(pointerup)': 'pcScrollArea.onScrollbarPointerUp($event)',
                        '(wheel)': 'pcScrollArea.onScrollbarWheel($event, orientation())'
                    },
                    hostDirectives: [Bind]
                }]
        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });

/**
 * ScrollAreaHandle is a helper component for ScrollArea component.
 * @group Components
 */
class ScrollAreaHandle extends BaseComponent {
    componentName = 'ScrollAreaHandle';
    bindDirectiveInstance = inject(Bind, { self: true });
    pcScrollArea = inject(SCROLLAREA_INSTANCE);
    pcScrollbar = inject(SCROLLAREA_SCROLLBAR_INSTANCE);
    _componentStyle = inject(ScrollAreaStyle);
    hostEl = inject(ElementRef);
    orientation = computed(() => this.pcScrollbar.orientation(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
    isVertical = computed(() => this.orientation() === 'vertical', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
    handleHeight = computed(() => (this.isVertical() ? 'var(--px-handle-height, 0px)' : undefined), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "handleHeight" }] : /* istanbul ignore next */ []));
    handleWidth = computed(() => (this.isVertical() ? undefined : 'var(--px-handle-width, 0px)'), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "handleWidth" }] : /* istanbul ignore next */ []));
    handleTransform = computed(() => (this.isVertical() ? 'translate3d(0, var(--px-handle-offset, 0px), 0)' : 'translate3d(var(--px-handle-offset, 0px), 0, 0)'), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "handleTransform" }] : /* istanbul ignore next */ []));
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.pcScrollArea.ptms(['handle']));
    }
    onAfterViewInit() {
        const el = this.hostEl.nativeElement;
        if (this.isVertical()) {
            this.pcScrollArea.handleYEl = el;
        }
        else {
            this.pcScrollArea.handleXEl = el;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaHandle, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ScrollAreaHandle, isStandalone: true, selector: "p-scrollarea-handle, p-scroll-area-handle", host: { listeners: { "pointerdown": "pcScrollArea.onHandlePointerDown($event, orientation())" }, properties: { "class": "cx(\"handle\")", "attr.data-orientation": "orientation()", "style.height": "handleHeight()", "style.width": "handleWidth()", "style.transform": "handleTransform()" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: ScrollAreaHandle }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaHandle, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-scrollarea-handle, p-scroll-area-handle',
                    standalone: true,
                    imports: [BindModule],
                    template: ``,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [{ provide: PARENT_INSTANCE, useExisting: ScrollAreaHandle }],
                    host: {
                        '[class]': 'cx("handle")',
                        '[attr.data-orientation]': 'orientation()',
                        '[style.height]': 'handleHeight()',
                        '[style.width]': 'handleWidth()',
                        '[style.transform]': 'handleTransform()',
                        '(pointerdown)': 'pcScrollArea.onHandlePointerDown($event, orientation())'
                    },
                    hostDirectives: [Bind]
                }]
        }] });

/**
 * ScrollAreaViewport is a helper component for ScrollArea component.
 * @group Components
 */
class ScrollAreaViewport extends BaseComponent {
    componentName = 'ScrollAreaViewport';
    $pcScrollAreaViewport = inject(SCROLLAREA_VIEWPORT_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    bindDirectiveInstance = inject(Bind, { self: true });
    pcScrollArea = inject(SCROLLAREA_INSTANCE);
    _componentStyle = inject(ScrollAreaStyle);
    hostEl = inject(ElementRef);
    viewportTabindex = computed(() => (this.pcScrollArea.hasOverflowX() || this.pcScrollArea.hasOverflowY() ? this.pcScrollArea.tabindex() : null), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "viewportTabindex" }] : /* istanbul ignore next */ []));
    dataScrollYBefore = computed(() => (this.pcScrollArea.yBefore() ? '' : null), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataScrollYBefore" }] : /* istanbul ignore next */ []));
    dataScrollYAfter = computed(() => (this.pcScrollArea.yAfter() ? '' : null), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataScrollYAfter" }] : /* istanbul ignore next */ []));
    dataScrollXBefore = computed(() => (this.pcScrollArea.xBefore() ? '' : null), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataScrollXBefore" }] : /* istanbul ignore next */ []));
    dataScrollXAfter = computed(() => (this.pcScrollArea.xAfter() ? '' : null), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataScrollXAfter" }] : /* istanbul ignore next */ []));
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.pcScrollArea.ptms(['viewport']));
    }
    onAfterViewInit() {
        this.pcScrollArea.viewportEl = this.hostEl.nativeElement;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaViewport, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: ScrollAreaViewport, isStandalone: true, selector: "p-scrollarea-viewport, p-scroll-area-viewport", host: { listeners: { "scroll": "pcScrollArea.onScroll()" }, properties: { "class": "cx(\"viewport\")", "style": "sx(\"viewport\")", "attr.tabindex": "viewportTabindex()", "attr.data-scroll-y-before": "dataScrollYBefore()", "attr.data-scroll-y-after": "dataScrollYAfter()", "attr.data-scroll-x-before": "dataScrollXBefore()", "attr.data-scroll-x-after": "dataScrollXAfter()" } }, providers: [
            { provide: SCROLLAREA_VIEWPORT_INSTANCE, useExisting: ScrollAreaViewport },
            { provide: PARENT_INSTANCE, useExisting: ScrollAreaViewport }
        ], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaViewport, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-scrollarea-viewport, p-scroll-area-viewport',
                    standalone: true,
                    imports: [BindModule],
                    template: `<ng-content></ng-content>`,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [
                        { provide: SCROLLAREA_VIEWPORT_INSTANCE, useExisting: ScrollAreaViewport },
                        { provide: PARENT_INSTANCE, useExisting: ScrollAreaViewport }
                    ],
                    host: {
                        '[class]': 'cx("viewport")',
                        '[style]': 'sx("viewport")',
                        '[attr.tabindex]': 'viewportTabindex()',
                        '[attr.data-scroll-y-before]': 'dataScrollYBefore()',
                        '[attr.data-scroll-y-after]': 'dataScrollYAfter()',
                        '[attr.data-scroll-x-before]': 'dataScrollXBefore()',
                        '[attr.data-scroll-x-after]': 'dataScrollXAfter()',
                        '(scroll)': 'pcScrollArea.onScroll()'
                    },
                    hostDirectives: [Bind]
                }]
        }] });

const SCROLL_TIMEOUT = 500;
const MIN_HANDLE_SIZE = 20;
/**
 * ScrollArea is a cross browser, lightweight and themable alternative to native browser scrollbar.
 * @group Components
 */
class ScrollArea extends BaseComponent {
    componentName = 'ScrollArea';
    $pcScrollArea = inject(SCROLLAREA_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    bindDirectiveInstance = inject(Bind, { self: true });
    /**
     * Scrollbar visibility variant.
     * @group Props
     */
    variant = input('auto', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
    /**
     * Whether to show gradient mask at scroll edges.
     * @group Props
     */
    mask = input(false, { ...(ngDevMode ? { debugName: "mask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Tabindex of the viewport when content overflows.
     * @defaultValue 0
     * @group Props
     */
    tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    _componentStyle = inject(ScrollAreaStyle);
    hovering = signal(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "hovering" }] : /* istanbul ignore next */ []));
    scrollingX = signal(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "scrollingX" }] : /* istanbul ignore next */ []));
    scrollingY = signal(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "scrollingY" }] : /* istanbul ignore next */ []));
    touchModality = signal(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "touchModality" }] : /* istanbul ignore next */ []));
    hiddenX = signal(true, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "hiddenX" }] : /* istanbul ignore next */ []));
    hiddenY = signal(true, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "hiddenY" }] : /* istanbul ignore next */ []));
    cornerHidden = signal(true, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "cornerHidden" }] : /* istanbul ignore next */ []));
    hasOverflowX = signal(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "hasOverflowX" }] : /* istanbul ignore next */ []));
    hasOverflowY = signal(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "hasOverflowY" }] : /* istanbul ignore next */ []));
    yBefore = signal(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "yBefore" }] : /* istanbul ignore next */ []));
    yAfter = signal(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "yAfter" }] : /* istanbul ignore next */ []));
    xBefore = signal(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "xBefore" }] : /* istanbul ignore next */ []));
    xAfter = signal(false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "xAfter" }] : /* istanbul ignore next */ []));
    cornerWidthValue = signal(0, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "cornerWidthValue" }] : /* istanbul ignore next */ []));
    cornerHeightValue = signal(0, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "cornerHeightValue" }] : /* istanbul ignore next */ []));
    cornerWidthPx = computed(() => `${this.cornerWidthValue()}px`, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "cornerWidthPx" }] : /* istanbul ignore next */ []));
    cornerHeightPx = computed(() => `${this.cornerHeightValue()}px`, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "cornerHeightPx" }] : /* istanbul ignore next */ []));
    dataHovering = computed(() => (this.hovering() ? '' : null), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataHovering" }] : /* istanbul ignore next */ []));
    dataScrollingY = computed(() => (this.scrollingY() ? '' : null), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataScrollingY" }] : /* istanbul ignore next */ []));
    dataScrollingX = computed(() => (this.scrollingX() ? '' : null), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataScrollingX" }] : /* istanbul ignore next */ []));
    viewportEl = null;
    scrollbarYEl = null;
    scrollbarXEl = null;
    handleYEl = null;
    handleXEl = null;
    cornerEl = null;
    isDragging = false;
    dragOrientation = 'vertical';
    dragStart = { pointerPos: 0, scrollPos: 0 };
    prevScroll = { top: 0, left: 0 };
    scrollXTimeout = null;
    scrollYTimeout = null;
    rafId = null;
    resizeObserver = null;
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    onAfterViewInit() {
        if (isPlatformBrowser(this.platformId)) {
            this.computeHandle();
            this.setupResizeObserver();
        }
    }
    onDestroy() {
        this.resizeObserver?.disconnect();
        this.resizeObserver = null;
        if (this.scrollXTimeout)
            clearTimeout(this.scrollXTimeout);
        if (this.scrollYTimeout)
            clearTimeout(this.scrollYTimeout);
        if (this.rafId)
            cancelAnimationFrame(this.rafId);
    }
    setupResizeObserver() {
        const vp = this.viewportEl;
        if (!vp)
            return;
        let localRaf = null;
        this.resizeObserver = new ResizeObserver(() => {
            if (localRaf)
                return;
            localRaf = requestAnimationFrame(() => {
                localRaf = null;
                this.computeHandle();
            });
        });
        this.resizeObserver.observe(vp);
        if (vp.firstElementChild) {
            this.resizeObserver.observe(vp.firstElementChild);
        }
    }
    computeHandle() {
        const vp = this.viewportEl;
        if (!vp)
            return;
        const { scrollHeight, scrollWidth, clientHeight, clientWidth, scrollTop, scrollLeft } = vp;
        const yHidden = clientHeight >= scrollHeight;
        const xHidden = clientWidth >= scrollWidth;
        const scrollbarY = this.scrollbarYEl;
        const scrollbarX = this.scrollbarXEl;
        const cw = !yHidden && !xHidden && scrollbarY ? scrollbarY.offsetWidth : 0;
        const ch = !yHidden && !xHidden && scrollbarX ? scrollbarX.offsetHeight : 0;
        const scrollbarYHeight = scrollbarY && !yHidden ? scrollbarY.offsetHeight : 0;
        const scrollbarXWidth = scrollbarX && !xHidden ? scrollbarX.offsetWidth : 0;
        this.hiddenX.set(xHidden);
        this.hiddenY.set(yHidden);
        this.cornerHidden.set(xHidden || yHidden);
        this.cornerWidthValue.set(cw);
        this.cornerHeightValue.set(ch);
        this.hasOverflowX.set(!xHidden);
        this.hasOverflowY.set(!yHidden);
        this.xBefore.set(!xHidden && scrollLeft > 0);
        this.xAfter.set(!xHidden && scrollWidth - clientWidth - scrollLeft > 1);
        this.yBefore.set(!yHidden && scrollTop > 0);
        this.yAfter.set(!yHidden && scrollHeight - clientHeight - scrollTop > 1);
        if (scrollbarY && !yHidden && scrollbarYHeight > 0) {
            const handleRatio = clientHeight / scrollHeight;
            const handleHeight = Math.max(handleRatio * scrollbarYHeight, MIN_HANDLE_SIZE);
            const availableTrack = scrollbarYHeight - handleHeight;
            const maxScrollTop = scrollHeight - clientHeight;
            const scrollRatio = maxScrollTop > 0 ? scrollTop / maxScrollTop : 0;
            const offsetPx = scrollRatio * availableTrack;
            scrollbarY.style.setProperty('--px-handle-height', `${handleHeight}px`);
            scrollbarY.style.setProperty('--px-handle-offset', `${offsetPx}px`);
        }
        if (scrollbarX && !xHidden && scrollbarXWidth > 0) {
            const handleRatio = clientWidth / scrollWidth;
            const handleWidth = Math.max(handleRatio * scrollbarXWidth, MIN_HANDLE_SIZE);
            const availableTrack = scrollbarXWidth - handleWidth;
            const maxScrollLeft = scrollWidth - clientWidth;
            const scrollRatio = maxScrollLeft > 0 ? scrollLeft / maxScrollLeft : 0;
            const offsetPx = scrollRatio * availableTrack;
            scrollbarX.style.setProperty('--px-handle-width', `${handleWidth}px`);
            scrollbarX.style.setProperty('--px-handle-offset', `${offsetPx}px`);
        }
        this.cd.markForCheck();
    }
    onScroll() {
        if (!this.rafId) {
            this.rafId = requestAnimationFrame(() => {
                this.rafId = null;
                this.computeHandle();
            });
        }
        const vp = this.viewportEl;
        if (!vp)
            return;
        const { scrollTop, scrollLeft } = vp;
        if (scrollTop !== this.prevScroll.top) {
            this.scrollingY.set(true);
            if (this.scrollYTimeout)
                clearTimeout(this.scrollYTimeout);
            this.scrollYTimeout = setTimeout(() => {
                this.scrollingY.set(false);
                this.cd.markForCheck();
            }, SCROLL_TIMEOUT);
        }
        if (scrollLeft !== this.prevScroll.left) {
            this.scrollingX.set(true);
            if (this.scrollXTimeout)
                clearTimeout(this.scrollXTimeout);
            this.scrollXTimeout = setTimeout(() => {
                this.scrollingX.set(false);
                this.cd.markForCheck();
            }, SCROLL_TIMEOUT);
        }
        this.prevScroll.top = scrollTop;
        this.prevScroll.left = scrollLeft;
        this.cd.markForCheck();
    }
    onHandlePointerDown(event, orientation) {
        if (event.pointerType === 'mouse' && event.button !== 0)
            return;
        event.preventDefault();
        event.stopPropagation();
        const isVertical = orientation === 'vertical';
        const scrollbar = isVertical ? this.scrollbarYEl : this.scrollbarXEl;
        const vp = this.viewportEl;
        if (!scrollbar || !vp)
            return;
        scrollbar.setPointerCapture(event.pointerId);
        this.isDragging = true;
        this.dragOrientation = orientation;
        this.dragStart = {
            pointerPos: isVertical ? event.clientY : event.clientX,
            scrollPos: isVertical ? vp.scrollTop : vp.scrollLeft
        };
    }
    onScrollbarPointerDown(event, orientation) {
        if (event.pointerType === 'mouse' && event.button !== 0)
            return;
        event.preventDefault();
        const isVertical = orientation === 'vertical';
        const scrollbar = isVertical ? this.scrollbarYEl : this.scrollbarXEl;
        const vp = this.viewportEl;
        if (!scrollbar || !vp)
            return;
        scrollbar.setPointerCapture(event.pointerId);
        this.isDragging = true;
        this.dragOrientation = orientation;
        const rect = scrollbar.getBoundingClientRect();
        const handle = isVertical ? this.handleYEl : this.handleXEl;
        const handleSize = handle ? (isVertical ? handle.offsetHeight : handle.offsetWidth) : 0;
        const trackSize = isVertical ? rect.height : rect.width;
        const effectiveTrack = trackSize - handleSize;
        if (effectiveTrack > 0) {
            const clickPos = (isVertical ? event.clientY - rect.top : event.clientX - rect.left) - handleSize / 2;
            const ratio = Math.max(0, Math.min(1, clickPos / effectiveTrack));
            const maxScroll = isVertical ? vp.scrollHeight - vp.clientHeight : vp.scrollWidth - vp.clientWidth;
            if (isVertical) {
                vp.scrollTop = ratio * maxScroll;
            }
            else {
                vp.scrollLeft = ratio * maxScroll;
            }
        }
        this.dragStart = {
            pointerPos: isVertical ? event.clientY : event.clientX,
            scrollPos: isVertical ? vp.scrollTop : vp.scrollLeft
        };
    }
    onScrollbarPointerMove(event) {
        if (!this.isDragging)
            return;
        event.preventDefault();
        const isVertical = this.dragOrientation === 'vertical';
        const vp = this.viewportEl;
        const scrollbar = isVertical ? this.scrollbarYEl : this.scrollbarXEl;
        if (!vp || !scrollbar)
            return;
        const rect = scrollbar.getBoundingClientRect();
        const handle = isVertical ? this.handleYEl : this.handleXEl;
        const handleSize = handle ? (isVertical ? handle.offsetHeight : handle.offsetWidth) : 0;
        const trackSize = isVertical ? rect.height : rect.width;
        const effectiveTrack = trackSize - handleSize;
        if (effectiveTrack <= 0)
            return;
        const currentPos = isVertical ? event.clientY : event.clientX;
        const delta = currentPos - this.dragStart.pointerPos;
        const maxScroll = isVertical ? vp.scrollHeight - vp.clientHeight : vp.scrollWidth - vp.clientWidth;
        const scrollDelta = (delta / effectiveTrack) * maxScroll;
        if (isVertical) {
            vp.scrollTop = this.dragStart.scrollPos + scrollDelta;
        }
        else {
            vp.scrollLeft = this.dragStart.scrollPos + scrollDelta;
        }
    }
    onScrollbarPointerUp(event) {
        event.preventDefault();
        event.currentTarget.releasePointerCapture(event.pointerId);
        this.isDragging = false;
    }
    onScrollbarWheel(event, orientation) {
        const vp = this.viewportEl;
        if (!vp || event.ctrlKey)
            return;
        if (orientation === 'vertical') {
            vp.scrollTop += event.deltaY;
        }
        else {
            vp.scrollLeft += event.deltaX || event.deltaY;
        }
    }
    onRootPointerEnter(event) {
        if (event.pointerType === 'touch') {
            this.touchModality.set(true);
        }
        else {
            this.touchModality.set(false);
            this.hovering.set(true);
        }
    }
    onRootPointerLeave() {
        this.hovering.set(false);
    }
    onRootPointerDown(event) {
        if (event.pointerType === 'touch') {
            this.touchModality.set(true);
        }
    }
    /**
     * Refreshes the position and size of the scrollbar.
     * @group Method
     */
    refresh() {
        this.computeHandle();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollArea, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: ScrollArea, isStandalone: true, selector: "p-scrollarea, p-scroll-area", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerenter": "onRootPointerEnter($event)", "pointerleave": "onRootPointerLeave()", "pointerdown": "onRootPointerDown($event)" }, properties: { "class": "cx(\"root\")", "style": "sx(\"root\")", "attr.data-variant": "variant()", "style.--px-corner-height": "cornerHeightPx()", "style.--px-corner-width": "cornerWidthPx()" } }, providers: [ScrollAreaStyle, { provide: SCROLLAREA_INSTANCE, useExisting: ScrollArea }, { provide: PARENT_INSTANCE, useExisting: ScrollArea }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollArea, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-scrollarea, p-scroll-area',
                    standalone: true,
                    imports: [SharedModule, BindModule],
                    template: `<ng-content></ng-content>`,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [ScrollAreaStyle, { provide: SCROLLAREA_INSTANCE, useExisting: ScrollArea }, { provide: PARENT_INSTANCE, useExisting: ScrollArea }],
                    host: {
                        '[class]': 'cx("root")',
                        '[style]': 'sx("root")',
                        '[attr.data-variant]': 'variant()',
                        '[style.--px-corner-height]': 'cornerHeightPx()',
                        '[style.--px-corner-width]': 'cornerWidthPx()',
                        '(pointerenter)': 'onRootPointerEnter($event)',
                        '(pointerleave)': 'onRootPointerLeave()',
                        '(pointerdown)': 'onRootPointerDown($event)'
                    },
                    hostDirectives: [Bind]
                }]
        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }] } });
class ScrollAreaModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaModule, imports: [ScrollArea, ScrollAreaViewport, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaHandle, ScrollAreaCorner, SharedModule, BindModule], exports: [ScrollArea, ScrollAreaViewport, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaHandle, ScrollAreaCorner, SharedModule, BindModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaModule, imports: [ScrollArea, ScrollAreaViewport, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaHandle, ScrollAreaCorner, SharedModule, BindModule, SharedModule, BindModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollAreaModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [ScrollArea, ScrollAreaViewport, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaHandle, ScrollAreaCorner, SharedModule, BindModule],
                    exports: [ScrollArea, ScrollAreaViewport, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaHandle, ScrollAreaCorner, SharedModule, BindModule]
                }]
        }] });

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

export { SCROLLAREA_INSTANCE, SCROLLAREA_SCROLLBAR_INSTANCE, SCROLLAREA_VIEWPORT_INSTANCE, ScrollArea, ScrollAreaClasses, ScrollAreaContent, ScrollAreaCorner, ScrollAreaHandle, ScrollAreaModule, ScrollAreaScrollbar, ScrollAreaStyle, ScrollAreaViewport };
//# sourceMappingURL=primeng-scrollarea.mjs.map