primeng 22.1.0 → 22.1.2

package/fesm2022/primeng-scrollpanel.mjs

@@ -1,430 +1,422 @@
-export * from 'primeng/types/scrollpanel';
-import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, numberAttribute, viewChild, contentChild, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { uuid, getHeight, addClass, removeClass } from '@primeuix/utils';
-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 as style$1 } from '@primeuix/styles/scrollpanel';
-import { BaseStyle } from 'primeng/base';
-
-const style = /*css*/ `
-    ${style$1}
+import { NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, ViewEncapsulation, contentChild, inject, input, numberAttribute, signal, viewChild } from "@angular/core";
+import { addClass, getHeight, removeClass, uuid } from "@primeuix/utils";
+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/scrollpanel";
+import { BaseStyle } from "primeng/base";
+export * from "primeng/types/scrollpanel";
+const style$1 = `
+    ${style}
 
     .p-scrollpanel {
         display: block;
     }
 `;
 const classes = {
-    root: 'p-scrollpanel p-component',
-    contentContainer: 'p-scrollpanel-content-container',
-    content: 'p-scrollpanel-content',
-    barX: 'p-scrollpanel-bar p-scrollpanel-bar-x',
-    barY: 'p-scrollpanel-bar p-scrollpanel-bar-y'
+	root: "p-scrollpanel p-component",
+	contentContainer: "p-scrollpanel-content-container",
+	content: "p-scrollpanel-content",
+	barX: "p-scrollpanel-bar p-scrollpanel-bar-x",
+	barY: "p-scrollpanel-bar p-scrollpanel-bar-y"
+};
+var ScrollPanelStyle = class ScrollPanelStyle extends BaseStyle {
+	name = "scrollpanel";
+	style = style$1;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ScrollPanelStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ScrollPanelStyle
+	});
 };
-class ScrollPanelStyle extends BaseStyle {
-    name = 'scrollpanel';
-    style = style;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ScrollPanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ScrollPanelStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ScrollPanelStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar.
- *
- * [Live Demo](https://www.primeng.org/scrollpanel/)
- *
- * @module scrollpanelstyle
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ScrollPanelStyle,
+	decorators: [{ type: Injectable }]
+});
 var ScrollPanelClasses;
-(function (ScrollPanelClasses) {
-    /**
-     * Class name of the root element
-     */
-    ScrollPanelClasses["root"] = "p-scrollpanel";
-    /**
-     * Class name of the content container element
-     */
-    ScrollPanelClasses["contentContainer"] = "p-scrollpanel-content-container";
-    /**
-     * Class name of the content element
-     */
-    ScrollPanelClasses["content"] = "p-scrollpanel-content";
-    /**
-     * Class name of the bar x element
-     */
-    ScrollPanelClasses["barX"] = "p-scrollpanel-bar-x";
-    /**
-     * Class name of the bar y element
-     */
-    ScrollPanelClasses["barY"] = "p-scrollpanel-bar-y";
+(function(ScrollPanelClasses) {
+	ScrollPanelClasses["root"] = "p-scrollpanel";
+	ScrollPanelClasses["contentContainer"] = "p-scrollpanel-content-container";
+	ScrollPanelClasses["content"] = "p-scrollpanel-content";
+	ScrollPanelClasses["barX"] = "p-scrollpanel-bar-x";
+	ScrollPanelClasses["barY"] = "p-scrollpanel-bar-y";
 })(ScrollPanelClasses || (ScrollPanelClasses = {}));
-
-const SCROLLPANEL_INSTANCE = new InjectionToken('SCROLLPANEL_INSTANCE');
-/**
- * ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar.
- * @group Components
- * @deprecated Use ScrollArea component instead.
- */
-class ScrollPanel extends BaseComponent {
-    componentName = 'ScrollPanel';
-    constructor() {
-        super();
-    }
-    $pcScrollPanel = inject(SCROLLPANEL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    /**
-     * Step factor to scroll the content while pressing the arrow keys.
-     * @group Props
-     */
-    step = input(5, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    contentViewChild = viewChild('content', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentViewChild" }] : /* istanbul ignore next */ []));
-    xBarViewChild = viewChild('xBar', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "xBarViewChild" }] : /* istanbul ignore next */ []));
-    yBarViewChild = viewChild('yBar', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "yBarViewChild" }] : /* istanbul ignore next */ []));
-    /**
-     * Custom content template.
-     * @group Templates
-     */
-    contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    scrollYRatio;
-    scrollXRatio;
-    timeoutFrame = (fn) => setTimeout(fn, 0);
-    initialized = false;
-    lastPageY;
-    lastPageX;
-    isXBarClicked = false;
-    isYBarClicked = false;
-    lastScrollLeft = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "lastScrollLeft" }] : /* istanbul ignore next */ []));
-    lastScrollTop = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "lastScrollTop" }] : /* istanbul ignore next */ []));
-    orientation = 'vertical';
-    timer;
-    contentId;
-    windowResizeListener;
-    contentScrollListener;
-    mouseEnterListener;
-    xBarMouseDownListener;
-    yBarMouseDownListener;
-    documentMouseMoveListener;
-    documentMouseUpListener;
-    _componentStyle = inject(ScrollPanelStyle);
-    onInit() {
-        this.contentId = uuid('pn_id_') + '_content';
-    }
-    onAfterViewInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.moveBar();
-            this.moveBar = this.moveBar.bind(this);
-            this.onXBarMouseDown = this.onXBarMouseDown.bind(this);
-            this.onYBarMouseDown = this.onYBarMouseDown.bind(this);
-            this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);
-            this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);
-            this.windowResizeListener = this.renderer.listen(window, 'resize', this.moveBar);
-            this.contentScrollListener = this.renderer.listen(this.contentViewChild().nativeElement, 'scroll', this.moveBar);
-            this.mouseEnterListener = this.renderer.listen(this.contentViewChild().nativeElement, 'mouseenter', this.moveBar);
-            this.xBarMouseDownListener = this.renderer.listen(this.xBarViewChild().nativeElement, 'mousedown', this.onXBarMouseDown);
-            this.yBarMouseDownListener = this.renderer.listen(this.yBarViewChild().nativeElement, 'mousedown', this.onYBarMouseDown);
-            this.calculateContainerHeight();
-            this.initialized = true;
-        }
-    }
-    calculateContainerHeight() {
-        let container = this.el.nativeElement;
-        let content = this.contentViewChild().nativeElement;
-        let xBar = this.xBarViewChild().nativeElement;
-        const window = this.document.defaultView;
-        let containerStyles = window.getComputedStyle(container), xBarStyles = window.getComputedStyle(xBar), pureContainerHeight = getHeight(container) - parseInt(xBarStyles['height'], 10);
-        if (containerStyles['max-height'] != 'none' && pureContainerHeight == 0) {
-            if (content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
-                container.style.height = containerStyles['max-height'];
-            }
-            else {
-                container.style.height = content.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + 'px';
-            }
-        }
-    }
-    moveBar() {
-        let container = this.el.nativeElement;
-        let content = this.contentViewChild().nativeElement;
-        /* horizontal scroll */
-        let xBar = this.xBarViewChild().nativeElement;
-        let totalWidth = content.scrollWidth;
-        let ownWidth = content.clientWidth;
-        let bottom = (container.clientHeight - xBar.clientHeight) * -1;
-        this.scrollXRatio = ownWidth / totalWidth;
-        /* vertical scroll */
-        let yBar = this.yBarViewChild().nativeElement;
-        let totalHeight = content.scrollHeight;
-        let ownHeight = content.clientHeight;
-        let right = (container.clientWidth - yBar.clientWidth) * -1;
-        this.scrollYRatio = ownHeight / totalHeight;
-        this.requestAnimationFrame(() => {
-            if (this.scrollXRatio >= 1) {
-                xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                !this.$unstyled() && addClass(xBar, 'p-scrollpanel-hidden');
-            }
-            else {
-                xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                !this.$unstyled() && removeClass(xBar, 'p-scrollpanel-hidden');
-                const xBarWidth = Math.max(this.scrollXRatio * 100, 10);
-                const xBarLeft = Math.abs((content.scrollLeft * (100 - xBarWidth)) / (totalWidth - ownWidth));
-                xBar.style.cssText = 'width:' + xBarWidth + '%; inset-inline-start:' + xBarLeft + '%;bottom:' + bottom + 'px;';
-            }
-            if (this.scrollYRatio >= 1) {
-                yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                !this.$unstyled() && addClass(yBar, 'p-scrollpanel-hidden');
-            }
-            else {
-                yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                !this.$unstyled() && removeClass(yBar, 'p-scrollpanel-hidden');
-                const yBarHeight = Math.max(this.scrollYRatio * 100, 10);
-                const yBarTop = (content.scrollTop * (100 - yBarHeight)) / (totalHeight - ownHeight);
-                yBar.style.cssText = 'height:' + yBarHeight + '%; top: calc(' + yBarTop + '% - ' + xBar.clientHeight + 'px); inset-inline-end:' + right + 'px;';
-            }
-        });
-    }
-    onScroll(event) {
-        const target = event.target;
-        if (this.lastScrollLeft() !== target.scrollLeft) {
-            this.lastScrollLeft.set(target.scrollLeft);
-            this.orientation = 'horizontal';
-        }
-        else if (this.lastScrollTop() !== target.scrollTop) {
-            this.lastScrollTop.set(target.scrollTop);
-            this.orientation = 'vertical';
-        }
-        this.moveBar();
-    }
-    onKeyDown(event) {
-        if (this.orientation === 'vertical') {
-            switch (event.code) {
-                case 'ArrowDown': {
-                    this.setTimer('scrollTop', this.step());
-                    event.preventDefault();
-                    break;
-                }
-                case 'ArrowUp': {
-                    this.setTimer('scrollTop', this.step() * -1);
-                    event.preventDefault();
-                    break;
-                }
-                case 'ArrowLeft':
-                case 'ArrowRight': {
-                    event.preventDefault();
-                    break;
-                }
-                default:
-                    //no op
-                    break;
-            }
-        }
-        else if (this.orientation === 'horizontal') {
-            switch (event.code) {
-                case 'ArrowRight': {
-                    this.setTimer('scrollLeft', this.step());
-                    event.preventDefault();
-                    break;
-                }
-                case 'ArrowLeft': {
-                    this.setTimer('scrollLeft', this.step() * -1);
-                    event.preventDefault();
-                    break;
-                }
-                case 'ArrowDown':
-                case 'ArrowUp': {
-                    event.preventDefault();
-                    break;
-                }
-                default:
-                    //no op
-                    break;
-            }
-        }
-    }
-    onKeyUp() {
-        this.clearTimer();
-    }
-    repeat(bar, step) {
-        const content = this.contentViewChild();
-        content?.nativeElement && (content.nativeElement[bar] += step);
-        this.moveBar();
-    }
-    setTimer(bar, step) {
-        this.clearTimer();
-        this.timer = setTimeout(() => {
-            this.repeat(bar, step);
-        }, 40);
-    }
-    clearTimer() {
-        if (this.timer) {
-            clearTimeout(this.timer);
-        }
-    }
-    bindDocumentMouseListeners() {
-        if (!this.documentMouseMoveListener) {
-            this.documentMouseMoveListener = (e) => {
-                this.onDocumentMouseMove(e);
-            };
-            this.document.addEventListener('mousemove', this.documentMouseMoveListener);
-        }
-        if (!this.documentMouseUpListener) {
-            this.documentMouseUpListener = () => {
-                this.onDocumentMouseUp();
-            };
-            this.document.addEventListener('mouseup', this.documentMouseUpListener);
-        }
-    }
-    unbindDocumentMouseListeners() {
-        if (this.documentMouseMoveListener) {
-            this.document.removeEventListener('mousemove', this.documentMouseMoveListener);
-            this.documentMouseMoveListener = null;
-        }
-        if (this.documentMouseUpListener) {
-            document.removeEventListener('mouseup', this.documentMouseUpListener);
-            this.documentMouseUpListener = null;
-        }
-    }
-    onYBarMouseDown(e) {
-        this.isYBarClicked = true;
-        const yBar = this.yBarViewChild();
-        yBar?.nativeElement?.focus();
-        this.lastPageY = e.pageY;
-        yBar?.nativeElement?.setAttribute('data-p-scrollpanel-grabbed', 'true');
-        !this.$unstyled() && yBar && addClass(yBar.nativeElement, 'p-scrollpanel-grabbed');
-        this.document.body.setAttribute('data-p-scrollpanel-grabbed', 'true');
-        !this.$unstyled() && addClass(this.document.body, 'p-scrollpanel-grabbed');
-        this.bindDocumentMouseListeners();
-        e.preventDefault();
-    }
-    onXBarMouseDown(e) {
-        this.isXBarClicked = true;
-        const xBar = this.xBarViewChild();
-        xBar?.nativeElement?.focus();
-        this.lastPageX = e.pageX;
-        xBar?.nativeElement?.setAttribute('data-p-scrollpanel-grabbed', 'false');
-        !this.$unstyled() && xBar && addClass(xBar.nativeElement, 'p-scrollpanel-grabbed');
-        this.document.body.setAttribute('data-p-scrollpanel-grabbed', 'false');
-        !this.$unstyled() && addClass(this.document.body, 'p-scrollpanel-grabbed');
-        this.bindDocumentMouseListeners();
-        e.preventDefault();
-    }
-    onDocumentMouseMove(e) {
-        if (this.isXBarClicked) {
-            this.onMouseMoveForXBar(e);
-        }
-        else if (this.isYBarClicked) {
-            this.onMouseMoveForYBar(e);
-        }
-        else {
-            this.onMouseMoveForXBar(e);
-            this.onMouseMoveForYBar(e);
-        }
-    }
-    onMouseMoveForXBar(e) {
-        let deltaX = e.pageX - this.lastPageX;
-        this.lastPageX = e.pageX;
-        this.requestAnimationFrame(() => {
-            this.contentViewChild().nativeElement.scrollLeft += deltaX / this.scrollXRatio;
-        });
-    }
-    onMouseMoveForYBar(e) {
-        let deltaY = e.pageY - this.lastPageY;
-        this.lastPageY = e.pageY;
-        this.requestAnimationFrame(() => {
-            this.contentViewChild().nativeElement.scrollTop += deltaY / this.scrollYRatio;
-        });
-    }
-    /**
-     * Scrolls the top location to the given value.
-     * @param scrollTop
-     * @group Method
-     */
-    scrollTop(scrollTop) {
-        const content = this.contentViewChild().nativeElement;
-        let scrollableHeight = content.scrollHeight - content.clientHeight;
-        scrollTop = scrollTop > scrollableHeight ? scrollableHeight : scrollTop > 0 ? scrollTop : 0;
-        content.scrollTop = scrollTop;
-    }
-    onFocus(event) {
-        if (this.xBarViewChild()?.nativeElement?.isSameNode(event.target)) {
-            this.orientation = 'horizontal';
-        }
-        else if (this.yBarViewChild()?.nativeElement?.isSameNode(event.target)) {
-            this.orientation = 'vertical';
-        }
-    }
-    onBlur() {
-        if (this.orientation === 'horizontal') {
-            this.orientation = 'vertical';
-        }
-    }
-    onDocumentMouseUp() {
-        const yBar = this.yBarViewChild();
-        const xBar = this.xBarViewChild();
-        yBar?.nativeElement?.setAttribute('data-p-scrollpanel-grabbed', 'false');
-        !this.$unstyled() && yBar && removeClass(yBar.nativeElement, 'p-scrollpanel-grabbed');
-        xBar?.nativeElement?.setAttribute('data-p-scrollpanel-grabbed', 'false');
-        !this.$unstyled() && xBar && removeClass(xBar.nativeElement, 'p-scrollpanel-grabbed');
-        this.document.body.setAttribute('data-p-scrollpanel-grabbed', 'false');
-        !this.$unstyled() && removeClass(this.document.body, 'p-scrollpanel-grabbed');
-        this.unbindDocumentMouseListeners();
-        this.isXBarClicked = false;
-        this.isYBarClicked = false;
-    }
-    requestAnimationFrame(f) {
-        let frame = window.requestAnimationFrame || this.timeoutFrame;
-        frame(f);
-    }
-    unbindListeners() {
-        if (this.windowResizeListener) {
-            this.windowResizeListener();
-            this.windowResizeListener = null;
-        }
-        if (this.contentScrollListener) {
-            this.contentScrollListener();
-            this.contentScrollListener = null;
-        }
-        if (this.mouseEnterListener) {
-            this.mouseEnterListener();
-            this.mouseEnterListener = null;
-        }
-        if (this.xBarMouseDownListener) {
-            this.xBarMouseDownListener();
-            this.xBarMouseDownListener = null;
-        }
-        if (this.yBarMouseDownListener) {
-            this.yBarMouseDownListener();
-            this.yBarMouseDownListener = null;
-        }
-    }
-    onDestroy() {
-        if (this.initialized) {
-            this.unbindListeners();
-        }
-    }
-    /**
-     * Refreshes the position and size of the scrollbar.
-     * @group Method
-     */
-    refresh() {
-        this.moveBar();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ScrollPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ScrollPanel, isStandalone: true, selector: "p-scroll-panel, p-scrollpanel", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cx(\"root\")" } }, providers: [ScrollPanelStyle, { provide: SCROLLPANEL_INSTANCE, useExisting: ScrollPanel }, { provide: PARENT_INSTANCE, useExisting: ScrollPanel }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], isSignal: true }], viewQueries: [{ propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "xBarViewChild", first: true, predicate: ["xBar"], descendants: true, isSignal: true }, { propertyName: "yBarViewChild", first: true, predicate: ["yBar"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+const SCROLLPANEL_INSTANCE = new InjectionToken("SCROLLPANEL_INSTANCE");
+var ScrollPanel = class ScrollPanel extends BaseComponent {
+	componentName = "ScrollPanel";
+	constructor() {
+		super();
+	}
+	$pcScrollPanel = inject(SCROLLPANEL_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	step = input(5, {
+		...ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	contentViewChild = viewChild("content", ...ngDevMode ? [{ debugName: "contentViewChild" }] : /* istanbul ignore next */ []);
+	xBarViewChild = viewChild("xBar", ...ngDevMode ? [{ debugName: "xBarViewChild" }] : /* istanbul ignore next */ []);
+	yBarViewChild = viewChild("yBar", ...ngDevMode ? [{ debugName: "yBarViewChild" }] : /* istanbul ignore next */ []);
+	contentTemplate = contentChild("content", {
+		...ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	scrollYRatio;
+	scrollXRatio;
+	initialized = false;
+	lastPageY;
+	lastPageX;
+	isXBarClicked = false;
+	isYBarClicked = false;
+	lastScrollLeft = signal(0, ...ngDevMode ? [{ debugName: "lastScrollLeft" }] : /* istanbul ignore next */ []);
+	lastScrollTop = signal(0, ...ngDevMode ? [{ debugName: "lastScrollTop" }] : /* istanbul ignore next */ []);
+	orientation = "vertical";
+	timer;
+	contentId;
+	windowResizeListener;
+	contentScrollListener;
+	mouseEnterListener;
+	xBarMouseDownListener;
+	yBarMouseDownListener;
+	documentMouseMoveListener;
+	documentMouseUpListener;
+	_componentStyle = inject(ScrollPanelStyle);
+	timeoutFrame = (fn) => setTimeout(fn, 0);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	onInit() {
+		this.contentId = uuid("pn_id_") + "_content";
+	}
+	onAfterViewInit() {
+		if (isPlatformBrowser(this.platformId)) {
+			this.moveBar();
+			this.moveBar = this.moveBar.bind(this);
+			this.onXBarMouseDown = this.onXBarMouseDown.bind(this);
+			this.onYBarMouseDown = this.onYBarMouseDown.bind(this);
+			this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);
+			this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);
+			this.windowResizeListener = this.renderer.listen(window, "resize", this.moveBar);
+			this.contentScrollListener = this.renderer.listen(this.contentViewChild().nativeElement, "scroll", this.moveBar);
+			this.mouseEnterListener = this.renderer.listen(this.contentViewChild().nativeElement, "mouseenter", this.moveBar);
+			this.xBarMouseDownListener = this.renderer.listen(this.xBarViewChild().nativeElement, "mousedown", this.onXBarMouseDown);
+			this.yBarMouseDownListener = this.renderer.listen(this.yBarViewChild().nativeElement, "mousedown", this.onYBarMouseDown);
+			this.calculateContainerHeight();
+			this.initialized = true;
+		}
+	}
+	calculateContainerHeight() {
+		let container = this.el.nativeElement;
+		let content = this.contentViewChild().nativeElement;
+		let xBar = this.xBarViewChild().nativeElement;
+		const window = this.document.defaultView;
+		let containerStyles = window.getComputedStyle(container), xBarStyles = window.getComputedStyle(xBar), pureContainerHeight = getHeight(container) - parseInt(xBarStyles["height"], 10);
+		if (containerStyles["max-height"] != "none" && pureContainerHeight == 0) {
+			if (content.offsetHeight + parseInt(xBarStyles["height"], 10) > parseInt(containerStyles["max-height"], 10)) container.style.height = containerStyles["max-height"];
+			else container.style.height = content.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + "px";
+		}
+	}
+	moveBar() {
+		let container = this.el.nativeElement;
+		let content = this.contentViewChild().nativeElement;
+		let xBar = this.xBarViewChild().nativeElement;
+		let totalWidth = content.scrollWidth;
+		let ownWidth = content.clientWidth;
+		let bottom = (container.clientHeight - xBar.clientHeight) * -1;
+		this.scrollXRatio = ownWidth / totalWidth;
+		let yBar = this.yBarViewChild().nativeElement;
+		let totalHeight = content.scrollHeight;
+		let ownHeight = content.clientHeight;
+		let right = (container.clientWidth - yBar.clientWidth) * -1;
+		this.scrollYRatio = ownHeight / totalHeight;
+		this.requestAnimationFrame(() => {
+			if (this.scrollXRatio >= 1) {
+				xBar.setAttribute("data-p-scrollpanel-hidden", "true");
+				if (!this.$unstyled()) addClass(xBar, "p-scrollpanel-hidden");
+			} else {
+				xBar.setAttribute("data-p-scrollpanel-hidden", "false");
+				if (!this.$unstyled()) removeClass(xBar, "p-scrollpanel-hidden");
+				const xBarWidth = Math.max(this.scrollXRatio * 100, 10);
+				const xBarLeft = Math.abs(content.scrollLeft * (100 - xBarWidth) / (totalWidth - ownWidth));
+				xBar.style.cssText = "width:" + xBarWidth + "%; inset-inline-start:" + xBarLeft + "%;bottom:" + bottom + "px;";
+			}
+			if (this.scrollYRatio >= 1) {
+				yBar.setAttribute("data-p-scrollpanel-hidden", "true");
+				if (!this.$unstyled()) addClass(yBar, "p-scrollpanel-hidden");
+			} else {
+				yBar.setAttribute("data-p-scrollpanel-hidden", "false");
+				if (!this.$unstyled()) removeClass(yBar, "p-scrollpanel-hidden");
+				const yBarHeight = Math.max(this.scrollYRatio * 100, 10);
+				const yBarTop = content.scrollTop * (100 - yBarHeight) / (totalHeight - ownHeight);
+				yBar.style.cssText = "height:" + yBarHeight + "%; top: calc(" + yBarTop + "% - " + xBar.clientHeight + "px); inset-inline-end:" + right + "px;";
+			}
+		});
+	}
+	onScroll(event) {
+		const target = event.target;
+		if (this.lastScrollLeft() !== target.scrollLeft) {
+			this.lastScrollLeft.set(target.scrollLeft);
+			this.orientation = "horizontal";
+		} else if (this.lastScrollTop() !== target.scrollTop) {
+			this.lastScrollTop.set(target.scrollTop);
+			this.orientation = "vertical";
+		}
+		this.moveBar();
+	}
+	onKeyDown(event) {
+		if (this.orientation === "vertical") switch (event.code) {
+			case "ArrowDown":
+				this.setTimer("scrollTop", this.step());
+				event.preventDefault();
+				break;
+			case "ArrowUp":
+				this.setTimer("scrollTop", this.step() * -1);
+				event.preventDefault();
+				break;
+			case "ArrowLeft":
+			case "ArrowRight": event.preventDefault();
+		}
+		else if (this.orientation === "horizontal") switch (event.code) {
+			case "ArrowRight":
+				this.setTimer("scrollLeft", this.step());
+				event.preventDefault();
+				break;
+			case "ArrowLeft":
+				this.setTimer("scrollLeft", this.step() * -1);
+				event.preventDefault();
+				break;
+			case "ArrowDown":
+			case "ArrowUp": event.preventDefault();
+		}
+	}
+	onKeyUp() {
+		this.clearTimer();
+	}
+	repeat(bar, step) {
+		const content = this.contentViewChild();
+		if (content?.nativeElement) content.nativeElement[bar] += step;
+		this.moveBar();
+	}
+	setTimer(bar, step) {
+		this.clearTimer();
+		this.timer = setTimeout(() => {
+			this.repeat(bar, step);
+		}, 40);
+	}
+	clearTimer() {
+		if (this.timer) clearTimeout(this.timer);
+	}
+	bindDocumentMouseListeners() {
+		if (!this.documentMouseMoveListener) {
+			this.documentMouseMoveListener = (e) => {
+				this.onDocumentMouseMove(e);
+			};
+			this.document.addEventListener("mousemove", this.documentMouseMoveListener);
+		}
+		if (!this.documentMouseUpListener) {
+			this.documentMouseUpListener = () => {
+				this.onDocumentMouseUp();
+			};
+			this.document.addEventListener("mouseup", this.documentMouseUpListener);
+		}
+	}
+	unbindDocumentMouseListeners() {
+		if (this.documentMouseMoveListener) {
+			this.document.removeEventListener("mousemove", this.documentMouseMoveListener);
+			this.documentMouseMoveListener = null;
+		}
+		if (this.documentMouseUpListener) {
+			document.removeEventListener("mouseup", this.documentMouseUpListener);
+			this.documentMouseUpListener = null;
+		}
+	}
+	onYBarMouseDown(e) {
+		this.isYBarClicked = true;
+		const yBar = this.yBarViewChild();
+		yBar?.nativeElement?.focus();
+		this.lastPageY = e.pageY;
+		yBar?.nativeElement?.setAttribute("data-p-scrollpanel-grabbed", "true");
+		if (!this.$unstyled() && yBar) addClass(yBar.nativeElement, "p-scrollpanel-grabbed");
+		this.document.body.setAttribute("data-p-scrollpanel-grabbed", "true");
+		if (!this.$unstyled()) addClass(this.document.body, "p-scrollpanel-grabbed");
+		this.bindDocumentMouseListeners();
+		e.preventDefault();
+	}
+	onXBarMouseDown(e) {
+		this.isXBarClicked = true;
+		const xBar = this.xBarViewChild();
+		xBar?.nativeElement?.focus();
+		this.lastPageX = e.pageX;
+		xBar?.nativeElement?.setAttribute("data-p-scrollpanel-grabbed", "false");
+		if (!this.$unstyled() && xBar) addClass(xBar.nativeElement, "p-scrollpanel-grabbed");
+		this.document.body.setAttribute("data-p-scrollpanel-grabbed", "false");
+		if (!this.$unstyled()) addClass(this.document.body, "p-scrollpanel-grabbed");
+		this.bindDocumentMouseListeners();
+		e.preventDefault();
+	}
+	onDocumentMouseMove(e) {
+		if (this.isXBarClicked) this.onMouseMoveForXBar(e);
+		else if (this.isYBarClicked) this.onMouseMoveForYBar(e);
+		else {
+			this.onMouseMoveForXBar(e);
+			this.onMouseMoveForYBar(e);
+		}
+	}
+	onMouseMoveForXBar(e) {
+		let deltaX = e.pageX - this.lastPageX;
+		this.lastPageX = e.pageX;
+		this.requestAnimationFrame(() => {
+			this.contentViewChild().nativeElement.scrollLeft += deltaX / this.scrollXRatio;
+		});
+	}
+	onMouseMoveForYBar(e) {
+		let deltaY = e.pageY - this.lastPageY;
+		this.lastPageY = e.pageY;
+		this.requestAnimationFrame(() => {
+			this.contentViewChild().nativeElement.scrollTop += deltaY / this.scrollYRatio;
+		});
+	}
+	scrollTop(scrollTop) {
+		const content = this.contentViewChild().nativeElement;
+		let scrollableHeight = content.scrollHeight - content.clientHeight;
+		scrollTop = scrollTop > scrollableHeight ? scrollableHeight : scrollTop > 0 ? scrollTop : 0;
+		content.scrollTop = scrollTop;
+	}
+	onFocus(event) {
+		if (this.xBarViewChild()?.nativeElement?.isSameNode(event.target)) this.orientation = "horizontal";
+		else if (this.yBarViewChild()?.nativeElement?.isSameNode(event.target)) this.orientation = "vertical";
+	}
+	onBlur() {
+		if (this.orientation === "horizontal") this.orientation = "vertical";
+	}
+	onDocumentMouseUp() {
+		const yBar = this.yBarViewChild();
+		const xBar = this.xBarViewChild();
+		yBar?.nativeElement?.setAttribute("data-p-scrollpanel-grabbed", "false");
+		if (!this.$unstyled() && yBar) removeClass(yBar.nativeElement, "p-scrollpanel-grabbed");
+		xBar?.nativeElement?.setAttribute("data-p-scrollpanel-grabbed", "false");
+		if (!this.$unstyled() && xBar) removeClass(xBar.nativeElement, "p-scrollpanel-grabbed");
+		this.document.body.setAttribute("data-p-scrollpanel-grabbed", "false");
+		if (!this.$unstyled()) removeClass(this.document.body, "p-scrollpanel-grabbed");
+		this.unbindDocumentMouseListeners();
+		this.isXBarClicked = false;
+		this.isYBarClicked = false;
+	}
+	requestAnimationFrame(f) {
+		(window.requestAnimationFrame || this.timeoutFrame)(f);
+	}
+	unbindListeners() {
+		if (this.windowResizeListener) {
+			this.windowResizeListener();
+			this.windowResizeListener = null;
+		}
+		if (this.contentScrollListener) {
+			this.contentScrollListener();
+			this.contentScrollListener = null;
+		}
+		if (this.mouseEnterListener) {
+			this.mouseEnterListener();
+			this.mouseEnterListener = null;
+		}
+		if (this.xBarMouseDownListener) {
+			this.xBarMouseDownListener();
+			this.xBarMouseDownListener = null;
+		}
+		if (this.yBarMouseDownListener) {
+			this.yBarMouseDownListener();
+			this.yBarMouseDownListener = null;
+		}
+	}
+	onDestroy() {
+		if (this.initialized) this.unbindListeners();
+	}
+	refresh() {
+		this.moveBar();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ScrollPanel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: ScrollPanel,
+		isStandalone: true,
+		selector: "p-scroll-panel, p-scrollpanel",
+		inputs: { step: {
+			classPropertyName: "step",
+			publicName: "step",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "cx(\"root\")" } },
+		providers: [
+			ScrollPanelStyle,
+			{
+				provide: SCROLLPANEL_INSTANCE,
+				useExisting: ScrollPanel
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: ScrollPanel
+			}
+		],
+		queries: [{
+			propertyName: "contentTemplate",
+			first: true,
+			predicate: ["content"],
+			isSignal: true
+		}],
+		viewQueries: [
+			{
+				propertyName: "contentViewChild",
+				first: true,
+				predicate: ["content"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "xBarViewChild",
+				first: true,
+				predicate: ["xBar"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "yBarViewChild",
+				first: true,
+				predicate: ["yBar"],
+				descendants: true,
+				isSignal: true
+			}
+		],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `
         <div [pBind]="ptm('contentContainer')" [class]="cx('contentContainer')">
             <div #content [pBind]="ptm('content')" [class]="cx('content')" (mouseenter)="moveBar()" (scroll)="onScroll($event)">
                 @if (!contentTemplate()) {
@@ -464,15 +456,54 @@ class ScrollPanel extends BaseComponent {
             (focus)="onFocus($event)"
             [attr.data-pc-group-section]="'bar'"
         ></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ScrollPanel, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-scroll-panel, p-scrollpanel',
-                    standalone: true,
-                    imports: [NgTemplateOutlet, SharedModule, BindModule],
-                    template: `
+    `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			},
+			{
+				kind: "directive",
+				type: i1.Bind,
+				selector: "[pBind]",
+				inputs: ["pBind"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ScrollPanel,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-scroll-panel, p-scrollpanel",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				SharedModule,
+				BindModule
+			],
+			template: `
         <div [pBind]="ptm('contentContainer')" [class]="cx('contentContainer')">
             <div #content [pBind]="ptm('content')" [class]="cx('content')" (mouseenter)="moveBar()" (scroll)="onScroll($event)">
                 @if (!contentTemplate()) {
@@ -513,31 +544,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
             [attr.data-pc-group-section]="'bar'"
         ></div>
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    providers: [ScrollPanelStyle, { provide: SCROLLPANEL_INSTANCE, useExisting: ScrollPanel }, { provide: PARENT_INSTANCE, useExisting: ScrollPanel }],
-                    host: {
-                        '[class]': 'cx("root")'
-                    },
-                    hostDirectives: [Bind]
-                }]
-        }], ctorParameters: () => [], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], contentViewChild: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], xBarViewChild: [{ type: i0.ViewChild, args: ['xBar', { isSignal: true }] }], yBarViewChild: [{ type: i0.ViewChild, args: ['yBar', { isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }] } });
-class ScrollPanelModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ScrollPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ScrollPanelModule, imports: [ScrollPanel, SharedModule, BindModule], exports: [ScrollPanel, SharedModule, BindModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ScrollPanelModule, imports: [ScrollPanel, SharedModule, BindModule, SharedModule, BindModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ScrollPanelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [ScrollPanel, SharedModule, BindModule],
-                    exports: [ScrollPanel, SharedModule, BindModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			providers: [
+				ScrollPanelStyle,
+				{
+					provide: SCROLLPANEL_INSTANCE,
+					useExisting: ScrollPanel
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: ScrollPanel
+				}
+			],
+			host: { "[class]": "cx(\"root\")" },
+			hostDirectives: [Bind]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		step: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "step",
+				required: false
+			}]
+		}],
+		contentViewChild: [{
+			type: i0.ViewChild,
+			args: ["content", { isSignal: true }]
+		}],
+		xBarViewChild: [{
+			type: i0.ViewChild,
+			args: ["xBar", { isSignal: true }]
+		}],
+		yBarViewChild: [{
+			type: i0.ViewChild,
+			args: ["yBar", { isSignal: true }]
+		}],
+		contentTemplate: [{
+			type: i0.ContentChild,
+			args: ["content", {
+				descendants: false,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var ScrollPanelModule = class ScrollPanelModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ScrollPanelModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ScrollPanelModule,
+		imports: [
+			ScrollPanel,
+			SharedModule,
+			BindModule
+		],
+		exports: [
+			ScrollPanel,
+			SharedModule,
+			BindModule
+		]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ScrollPanelModule,
+		imports: [
+			ScrollPanel,
+			SharedModule,
+			BindModule,
+			SharedModule,
+			BindModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ScrollPanelModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				ScrollPanel,
+				SharedModule,
+				BindModule
+			],
+			exports: [
+				ScrollPanel,
+				SharedModule,
+				BindModule
+			]
+		}]
+	}]
+});
 export { ScrollPanel, ScrollPanelClasses, ScrollPanelModule, ScrollPanelStyle };
-//# sourceMappingURL=primeng-scrollpanel.mjs.map
+
+//# sourceMappingURL=primeng-scrollpanel.mjs.map