primenglab 22.0.0-beta.1

package/fesm2022/primenglab-scrollarea.mjs

@@ -0,0 +1,730 @@
+export * from 'primenglab/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 'primenglab/api';
+import { BaseComponent, PARENT_INSTANCE } from 'primenglab/basecomponent';
+import * as i1 from 'primenglab/bind';
+import { Bind, BindModule } from 'primenglab/bind';
+import { style } from '@primeuix/styles/scrollarea';
+import { BaseStyle } from 'primenglab/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.3", ngImport: i0, type: ScrollAreaStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ScrollAreaStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", 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.3", ngImport: i0, type: ScrollAreaContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", 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.3", 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.3", ngImport: i0, type: ScrollAreaCorner, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", 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.3", 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.3", ngImport: i0, type: ScrollAreaScrollbar, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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.3", 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.3", ngImport: i0, type: ScrollAreaHandle, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", 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.3", 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.3", ngImport: i0, type: ScrollAreaViewport, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", 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.3", 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.3", ngImport: i0, type: ScrollArea, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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.3", 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.3", ngImport: i0, type: ScrollAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.3", 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.3", ngImport: i0, type: ScrollAreaModule, imports: [ScrollArea, ScrollAreaViewport, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaHandle, ScrollAreaCorner, SharedModule, BindModule, SharedModule, BindModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", 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=primenglab-scrollarea.mjs.map