@gravionlabs/helix-core 22.1.1 → 22.1.3

package/fesm2022/gravionlabs-helix-core-scrollpanel.mjs

@@ -1,16 +1,16 @@
-export * from '@gravionlabs/helix-core/types/scrollpanel';
-import * as i2 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, numberAttribute, viewChild, contentChild, contentChildren, NgZone, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { uuid, getHeight, addClass, removeClass } from '@gravionlabs/helix-core/uix/utils';
-import { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
-import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
-import * as i1 from '@gravionlabs/helix-core/bind';
-import { Bind, BindModule } from '@gravionlabs/helix-core/bind';
-import { BaseStyle } from '@gravionlabs/helix-core/base';
-
-const style$1 = /*css*/ `
+import * as i2 from "@angular/common";
+import { CommonModule, isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, NgZone, ViewEncapsulation, contentChild, contentChildren, inject, input, numberAttribute, viewChild } from "@angular/core";
+import { addClass, getHeight, removeClass, uuid } from "@gravionlabs/helix-core/uix/utils";
+import { HelixTemplate, SharedModule } from "@gravionlabs/helix-core/api";
+import { BaseComponent, PARENT_INSTANCE } from "@gravionlabs/helix-core/basecomponent";
+import * as i1 from "@gravionlabs/helix-core/bind";
+import { Bind, BindModule } from "@gravionlabs/helix-core/bind";
+import { BaseStyle } from "@gravionlabs/helix-core/base";
+export * from "@gravionlabs/helix-core/types/scrollpanel";
+const style = `
+    
     .h-scrollpanel-content-container {
         overflow: hidden;
         width: 100%;
@@ -77,459 +77,606 @@ const style$1 = /*css*/ `
     .h-scrollpanel-grabbed {
         user-select: none;
     }
-`;
 
-const style = /*css*/ `
-    ${style$1}
 
     .h-scrollpanel {
         display: block;
     }
 `;
 const classes = {
-    root: 'h-scrollpanel h-component',
-    contentContainer: 'h-scrollpanel-content-container',
-    content: 'h-scrollpanel-content',
-    barX: 'h-scrollpanel-bar h-scrollpanel-bar-x',
-    barY: 'h-scrollpanel-bar h-scrollpanel-bar-y'
+	root: "h-scrollpanel h-component",
+	contentContainer: "h-scrollpanel-content-container",
+	content: "h-scrollpanel-content",
+	barX: "h-scrollpanel-bar h-scrollpanel-bar-x",
+	barY: "h-scrollpanel-bar h-scrollpanel-bar-y"
+};
+var ScrollPanelStyle = class ScrollPanelStyle extends BaseStyle {
+	name = "scrollpanel";
+	style = style;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ScrollPanelStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		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.6", ngImport: i0, type: ScrollPanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ScrollPanelStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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.1",
+	ngImport: i0,
+	type: ScrollPanelStyle,
+	decorators: [{ type: Injectable }]
+});
 var ScrollPanelClasses;
-(function (ScrollPanelClasses) {
-    /**
-     * Class name of the root element
-     */
-    ScrollPanelClasses["root"] = "h-scrollpanel";
-    /**
-     * Class name of the content container element
-     */
-    ScrollPanelClasses["contentContainer"] = "h-scrollpanel-content-container";
-    /**
-     * Class name of the content element
-     */
-    ScrollPanelClasses["content"] = "h-scrollpanel-content";
-    /**
-     * Class name of the bar x element
-     */
-    ScrollPanelClasses["barX"] = "h-scrollpanel-bar-x";
-    /**
-     * Class name of the bar y element
-     */
-    ScrollPanelClasses["barY"] = "h-scrollpanel-bar-y";
+(function(ScrollPanelClasses) {
+	ScrollPanelClasses["root"] = "h-scrollpanel";
+	ScrollPanelClasses["contentContainer"] = "h-scrollpanel-content-container";
+	ScrollPanelClasses["content"] = "h-scrollpanel-content";
+	ScrollPanelClasses["barX"] = "h-scrollpanel-bar-x";
+	ScrollPanelClasses["barY"] = "h-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
- */
-class ScrollPanel extends BaseComponent {
-    componentName = 'ScrollPanel';
-    $pcScrollPanel = inject(SCROLLPANEL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    /**
-     * Style class of the component.
-     * @deprecated since v20.0.0, use `class` instead.
-     * @group Props
-     */
-    styleClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    /**
-     * 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 });
-    templates = contentChildren(HelixTemplate, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    _contentTemplate;
-    scrollYRatio;
-    scrollXRatio;
-    timeoutFrame = (fn) => setTimeout(fn, 0);
-    initialized = false;
-    lastPageY;
-    lastPageX;
-    isXBarClicked = false;
-    isYBarClicked = false;
-    lastScrollLeft = 0;
-    lastScrollTop = 0;
-    orientation = 'vertical';
-    timer;
-    contentId;
-    windowResizeListener;
-    contentScrollListener;
-    mouseEnterListener;
-    xBarMouseDownListener;
-    yBarMouseDownListener;
-    documentMouseMoveListener;
-    documentMouseUpListener;
-    _componentStyle = inject(ScrollPanelStyle);
-    zone = inject(NgZone);
-    onInit() {
-        this.contentId = uuid('pn_id_') + '_content';
-    }
-    onAfterViewInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.zone.runOutsideAngular(() => {
-                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;
-            });
-        }
-    }
-    onAfterContentInit() {
-        this.templates().forEach((item) => {
-            switch (item.getType()) {
-                case 'content':
-                    this._contentTemplate = item.template;
-                    break;
-                default:
-                    this._contentTemplate = item.template;
-                    break;
-            }
-        });
-    }
-    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-h-scrollpanel-hidden', 'true');
-                !this.$unstyled() && addClass(xBar, 'h-scrollpanel-hidden');
-            }
-            else {
-                xBar.setAttribute('data-h-scrollpanel-hidden', 'false');
-                !this.$unstyled() && removeClass(xBar, 'h-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-h-scrollpanel-hidden', 'true');
-                !this.$unstyled() && addClass(yBar, 'h-scrollpanel-hidden');
-            }
-            else {
-                yBar.setAttribute('data-h-scrollpanel-hidden', 'false');
-                !this.$unstyled() && removeClass(yBar, 'h-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;';
-            }
-        });
-        this.cd.markForCheck();
-    }
-    onScroll(event) {
-        if (this.lastScrollLeft !== event.target.scrollLeft) {
-            this.lastScrollLeft = event.target.scrollLeft;
-            this.orientation = 'horizontal';
-        }
-        else if (this.lastScrollTop !== event.target.scrollTop) {
-            this.lastScrollTop = event.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) {
-        this.contentViewChild()?.nativeElement && (this.contentViewChild().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 = (e) => {
-                this.onDocumentMouseUp(e);
-            };
-            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;
-        this.yBarViewChild()?.nativeElement?.focus();
-        this.lastPageY = e.pageY;
-        this.yBarViewChild()?.nativeElement?.setAttribute('data-h-scrollpanel-grabbed', 'true');
-        !this.$unstyled() && addClass(this.yBarViewChild().nativeElement, 'h-scrollpanel-grabbed');
-        this.document.body.setAttribute('data-h-scrollpanel-grabbed', 'true');
-        !this.$unstyled() && addClass(this.document.body, 'h-scrollpanel-grabbed');
-        this.bindDocumentMouseListeners();
-        e.preventDefault();
-    }
-    onXBarMouseDown(e) {
-        this.isXBarClicked = true;
-        this.xBarViewChild()?.nativeElement?.focus();
-        this.lastPageX = e.pageX;
-        this.xBarViewChild()?.nativeElement?.setAttribute('data-h-scrollpanel-grabbed', 'false');
-        !this.$unstyled() && addClass(this.xBarViewChild().nativeElement, 'h-scrollpanel-grabbed');
-        this.document.body.setAttribute('data-h-scrollpanel-grabbed', 'false');
-        !this.$unstyled() && addClass(this.document.body, 'h-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) {
-        let scrollableHeight = this.contentViewChild().nativeElement.scrollHeight - this.contentViewChild().nativeElement.clientHeight;
-        scrollTop = scrollTop > scrollableHeight ? scrollableHeight : scrollTop > 0 ? scrollTop : 0;
-        this.contentViewChild().nativeElement.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(e) {
-        this.yBarViewChild()?.nativeElement?.setAttribute('data-h-scrollpanel-grabbed', 'false');
-        !this.$unstyled() && removeClass(this.yBarViewChild().nativeElement, 'h-scrollpanel-grabbed');
-        this.xBarViewChild()?.nativeElement?.setAttribute('data-h-scrollpanel-grabbed', 'false');
-        !this.$unstyled() && removeClass(this.xBarViewChild().nativeElement, 'h-scrollpanel-grabbed');
-        this.document.body.setAttribute('data-h-scrollpanel-grabbed', 'false');
-        !this.$unstyled() && removeClass(this.document.body, 'h-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.6", ngImport: i0, type: ScrollPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ScrollPanel, isStandalone: true, selector: "h-scroll-panel, h-scrollPanel, h-scrollpanel", inputs: { styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cn(cx(\"root\"), styleClass())" } }, providers: [ScrollPanelStyle, { provide: SCROLLPANEL_INSTANCE, useExisting: ScrollPanel }, { provide: PARENT_INSTANCE, useExisting: ScrollPanel }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, 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 [hBind]=\"ptm('contentContainer')\" [class]=\"cx('contentContainer')\">\n    <div #content [hBind]=\"ptm('content')\" [class]=\"cx('content')\" (mouseenter)=\"moveBar()\" (scroll)=\"onScroll($event)\">\n        @if (!contentTemplate() && !_contentTemplate) {\n            <ng-content></ng-content>\n        }\n        <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate\"></ng-container>\n    </div>\n</div>\n<div\n    #xBar\n    [hBind]=\"ptm('barX')\"\n    [class]=\"cx('barX')\"\n    tabindex=\"0\"\n    role=\"scrollbar\"\n    [attr.aria-orientation]=\"'horizontal'\"\n    [attr.aria-valuenow]=\"lastScrollLeft\"\n    [attr.aria-controls]=\"contentId\"\n    [attr.data-pc-group-section]=\"'bar'\"\n    (mousedown)=\"onXBarMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (keyup)=\"onKeyUp()\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur()\"\n></div>\n<div\n    #yBar\n    [hBind]=\"ptm('barY')\"\n    [class]=\"cx('barY')\"\n    tabindex=\"0\"\n    role=\"scrollbar\"\n    [attr.aria-orientation]=\"'vertical'\"\n    [attr.aria-valuenow]=\"lastScrollTop\"\n    [attr.aria-controls]=\"contentId\"\n    (mousedown)=\"onYBarMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (keyup)=\"onKeyUp()\"\n    (focus)=\"onFocus($event)\"\n    [attr.data-pc-group-section]=\"'bar'\"\n></div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[hBind]", inputs: ["hBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ScrollPanel, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-scroll-panel, h-scrollPanel, h-scrollpanel', standalone: true, imports: [CommonModule, SharedModule, BindModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [ScrollPanelStyle, { provide: SCROLLPANEL_INSTANCE, useExisting: ScrollPanel }, { provide: PARENT_INSTANCE, useExisting: ScrollPanel }], host: {
-                        '[class]': 'cn(cx("root"), styleClass())'
-                    }, hostDirectives: [Bind], template: "<div [hBind]=\"ptm('contentContainer')\" [class]=\"cx('contentContainer')\">\n    <div #content [hBind]=\"ptm('content')\" [class]=\"cx('content')\" (mouseenter)=\"moveBar()\" (scroll)=\"onScroll($event)\">\n        @if (!contentTemplate() && !_contentTemplate) {\n            <ng-content></ng-content>\n        }\n        <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate\"></ng-container>\n    </div>\n</div>\n<div\n    #xBar\n    [hBind]=\"ptm('barX')\"\n    [class]=\"cx('barX')\"\n    tabindex=\"0\"\n    role=\"scrollbar\"\n    [attr.aria-orientation]=\"'horizontal'\"\n    [attr.aria-valuenow]=\"lastScrollLeft\"\n    [attr.aria-controls]=\"contentId\"\n    [attr.data-pc-group-section]=\"'bar'\"\n    (mousedown)=\"onXBarMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (keyup)=\"onKeyUp()\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur()\"\n></div>\n<div\n    #yBar\n    [hBind]=\"ptm('barY')\"\n    [class]=\"cx('barY')\"\n    tabindex=\"0\"\n    role=\"scrollbar\"\n    [attr.aria-orientation]=\"'vertical'\"\n    [attr.aria-valuenow]=\"lastScrollTop\"\n    [attr.aria-controls]=\"contentId\"\n    (mousedown)=\"onYBarMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (keyup)=\"onKeyUp()\"\n    (focus)=\"onFocus($event)\"\n    [attr.data-pc-group-section]=\"'bar'\"\n></div>\n" }]
-        }], propDecorators: { styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], 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 }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
-class ScrollPanelModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ScrollPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: ScrollPanelModule, imports: [ScrollPanel, SharedModule, BindModule], exports: [ScrollPanel, SharedModule, BindModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ScrollPanelModule, imports: [ScrollPanel, SharedModule, BindModule, SharedModule, BindModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ScrollPanelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [ScrollPanel, SharedModule, BindModule],
-                    exports: [ScrollPanel, SharedModule, BindModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+const SCROLLPANEL_INSTANCE = new InjectionToken("SCROLLPANEL_INSTANCE");
+var ScrollPanel = class ScrollPanel extends BaseComponent {
+	componentName = "ScrollPanel";
+	$pcScrollPanel = inject(SCROLLPANEL_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	styleClass = input(...ngDevMode ? [void 0, { debugName: "styleClass" }] : 	/* istanbul ignore next */ []);
+	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
+	});
+	templates = contentChildren(HelixTemplate, ...ngDevMode ? [{ debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	_contentTemplate;
+	scrollYRatio;
+	scrollXRatio;
+	timeoutFrame = (fn) => setTimeout(fn, 0);
+	initialized = false;
+	lastPageY;
+	lastPageX;
+	isXBarClicked = false;
+	isYBarClicked = false;
+	lastScrollLeft = 0;
+	lastScrollTop = 0;
+	orientation = "vertical";
+	timer;
+	contentId;
+	windowResizeListener;
+	contentScrollListener;
+	mouseEnterListener;
+	xBarMouseDownListener;
+	yBarMouseDownListener;
+	documentMouseMoveListener;
+	documentMouseUpListener;
+	_componentStyle = inject(ScrollPanelStyle);
+	zone = inject(NgZone);
+	onInit() {
+		this.contentId = uuid("pn_id_") + "_content";
+	}
+	onAfterViewInit() {
+		if (isPlatformBrowser(this.platformId)) this.zone.runOutsideAngular(() => {
+			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;
+		});
+	}
+	onAfterContentInit() {
+		this.templates().forEach((item) => {
+			switch (item.getType()) {
+				case "content":
+					this._contentTemplate = item.template;
+					break;
+				default:
+					this._contentTemplate = item.template;
+					break;
+			}
+		});
+	}
+	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-h-scrollpanel-hidden", "true");
+				!this.$unstyled() && addClass(xBar, "h-scrollpanel-hidden");
+			} else {
+				xBar.setAttribute("data-h-scrollpanel-hidden", "false");
+				!this.$unstyled() && removeClass(xBar, "h-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-h-scrollpanel-hidden", "true");
+				!this.$unstyled() && addClass(yBar, "h-scrollpanel-hidden");
+			} else {
+				yBar.setAttribute("data-h-scrollpanel-hidden", "false");
+				!this.$unstyled() && removeClass(yBar, "h-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;";
+			}
+		});
+		this.cd.markForCheck();
+	}
+	onScroll(event) {
+		if (this.lastScrollLeft !== event.target.scrollLeft) {
+			this.lastScrollLeft = event.target.scrollLeft;
+			this.orientation = "horizontal";
+		} else if (this.lastScrollTop !== event.target.scrollTop) {
+			this.lastScrollTop = event.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: 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: break;
+		}
+	}
+	onKeyUp() {
+		this.clearTimer();
+	}
+	repeat(bar, step) {
+		this.contentViewChild()?.nativeElement && (this.contentViewChild().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 = (e) => {
+				this.onDocumentMouseUp(e);
+			};
+			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;
+		this.yBarViewChild()?.nativeElement?.focus();
+		this.lastPageY = e.pageY;
+		this.yBarViewChild()?.nativeElement?.setAttribute("data-h-scrollpanel-grabbed", "true");
+		!this.$unstyled() && addClass(this.yBarViewChild().nativeElement, "h-scrollpanel-grabbed");
+		this.document.body.setAttribute("data-h-scrollpanel-grabbed", "true");
+		!this.$unstyled() && addClass(this.document.body, "h-scrollpanel-grabbed");
+		this.bindDocumentMouseListeners();
+		e.preventDefault();
+	}
+	onXBarMouseDown(e) {
+		this.isXBarClicked = true;
+		this.xBarViewChild()?.nativeElement?.focus();
+		this.lastPageX = e.pageX;
+		this.xBarViewChild()?.nativeElement?.setAttribute("data-h-scrollpanel-grabbed", "false");
+		!this.$unstyled() && addClass(this.xBarViewChild().nativeElement, "h-scrollpanel-grabbed");
+		this.document.body.setAttribute("data-h-scrollpanel-grabbed", "false");
+		!this.$unstyled() && addClass(this.document.body, "h-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) {
+		let scrollableHeight = this.contentViewChild().nativeElement.scrollHeight - this.contentViewChild().nativeElement.clientHeight;
+		scrollTop = scrollTop > scrollableHeight ? scrollableHeight : scrollTop > 0 ? scrollTop : 0;
+		this.contentViewChild().nativeElement.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(e) {
+		this.yBarViewChild()?.nativeElement?.setAttribute("data-h-scrollpanel-grabbed", "false");
+		!this.$unstyled() && removeClass(this.yBarViewChild().nativeElement, "h-scrollpanel-grabbed");
+		this.xBarViewChild()?.nativeElement?.setAttribute("data-h-scrollpanel-grabbed", "false");
+		!this.$unstyled() && removeClass(this.xBarViewChild().nativeElement, "h-scrollpanel-grabbed");
+		this.document.body.setAttribute("data-h-scrollpanel-grabbed", "false");
+		!this.$unstyled() && removeClass(this.document.body, "h-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.1",
+		ngImport: i0,
+		type: ScrollPanel,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: ScrollPanel,
+		isStandalone: true,
+		selector: "h-scroll-panel, h-scrollPanel, h-scrollpanel",
+		inputs: {
+			styleClass: {
+				classPropertyName: "styleClass",
+				publicName: "styleClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			step: {
+				classPropertyName: "step",
+				publicName: "step",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "cn(cx(\"root\"), styleClass())" } },
+		providers: [
+			ScrollPanelStyle,
+			{
+				provide: SCROLLPANEL_INSTANCE,
+				useExisting: ScrollPanel
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: ScrollPanel
+			}
+		],
+		queries: [{
+			propertyName: "contentTemplate",
+			first: true,
+			predicate: ["content"],
+			isSignal: true
+		}, {
+			propertyName: "templates",
+			predicate: HelixTemplate,
+			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 [hBind]=\"ptm('contentContainer')\" [class]=\"cx('contentContainer')\">\n    <div #content [hBind]=\"ptm('content')\" [class]=\"cx('content')\" (mouseenter)=\"moveBar()\" (scroll)=\"onScroll($event)\">\n        @if (!contentTemplate() && !_contentTemplate) {\n            <ng-content></ng-content>\n        }\n        <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate\"></ng-container>\n    </div>\n</div>\n<div\n    #xBar\n    [hBind]=\"ptm('barX')\"\n    [class]=\"cx('barX')\"\n    tabindex=\"0\"\n    role=\"scrollbar\"\n    [attr.aria-orientation]=\"'horizontal'\"\n    [attr.aria-valuenow]=\"lastScrollLeft\"\n    [attr.aria-controls]=\"contentId\"\n    [attr.data-pc-group-section]=\"'bar'\"\n    (mousedown)=\"onXBarMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (keyup)=\"onKeyUp()\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur()\"\n></div>\n<div\n    #yBar\n    [hBind]=\"ptm('barY')\"\n    [class]=\"cx('barY')\"\n    tabindex=\"0\"\n    role=\"scrollbar\"\n    [attr.aria-orientation]=\"'vertical'\"\n    [attr.aria-valuenow]=\"lastScrollTop\"\n    [attr.aria-controls]=\"contentId\"\n    (mousedown)=\"onYBarMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (keyup)=\"onKeyUp()\"\n    (focus)=\"onFocus($event)\"\n    [attr.data-pc-group-section]=\"'bar'\"\n></div>\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i2.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			},
+			{
+				kind: "directive",
+				type: i1.Bind,
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ScrollPanel,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-scroll-panel, h-scrollPanel, h-scrollpanel",
+			standalone: true,
+			imports: [
+				CommonModule,
+				SharedModule,
+				BindModule
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			providers: [
+				ScrollPanelStyle,
+				{
+					provide: SCROLLPANEL_INSTANCE,
+					useExisting: ScrollPanel
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: ScrollPanel
+				}
+			],
+			host: { "[class]": "cn(cx(\"root\"), styleClass())" },
+			hostDirectives: [Bind],
+			template: "<div [hBind]=\"ptm('contentContainer')\" [class]=\"cx('contentContainer')\">\n    <div #content [hBind]=\"ptm('content')\" [class]=\"cx('content')\" (mouseenter)=\"moveBar()\" (scroll)=\"onScroll($event)\">\n        @if (!contentTemplate() && !_contentTemplate) {\n            <ng-content></ng-content>\n        }\n        <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate\"></ng-container>\n    </div>\n</div>\n<div\n    #xBar\n    [hBind]=\"ptm('barX')\"\n    [class]=\"cx('barX')\"\n    tabindex=\"0\"\n    role=\"scrollbar\"\n    [attr.aria-orientation]=\"'horizontal'\"\n    [attr.aria-valuenow]=\"lastScrollLeft\"\n    [attr.aria-controls]=\"contentId\"\n    [attr.data-pc-group-section]=\"'bar'\"\n    (mousedown)=\"onXBarMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (keyup)=\"onKeyUp()\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur()\"\n></div>\n<div\n    #yBar\n    [hBind]=\"ptm('barY')\"\n    [class]=\"cx('barY')\"\n    tabindex=\"0\"\n    role=\"scrollbar\"\n    [attr.aria-orientation]=\"'vertical'\"\n    [attr.aria-valuenow]=\"lastScrollTop\"\n    [attr.aria-controls]=\"contentId\"\n    (mousedown)=\"onYBarMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (keyup)=\"onKeyUp()\"\n    (focus)=\"onFocus($event)\"\n    [attr.data-pc-group-section]=\"'bar'\"\n></div>\n"
+		}]
+	}],
+	propDecorators: {
+		styleClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styleClass",
+				required: false
+			}]
+		}],
+		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
+			}]
+		}],
+		templates: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }]
+		}]
+	}
+});
+var ScrollPanelModule = class ScrollPanelModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ScrollPanelModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ScrollPanelModule,
+		imports: [
+			ScrollPanel,
+			SharedModule,
+			BindModule
+		],
+		exports: [
+			ScrollPanel,
+			SharedModule,
+			BindModule
+		]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ScrollPanelModule,
+		imports: [
+			ScrollPanel,
+			SharedModule,
+			BindModule,
+			SharedModule,
+			BindModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ScrollPanelModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				ScrollPanel,
+				SharedModule,
+				BindModule
+			],
+			exports: [
+				ScrollPanel,
+				SharedModule,
+				BindModule
+			]
+		}]
+	}]
+});
 export { ScrollPanel, ScrollPanelClasses, ScrollPanelModule, ScrollPanelStyle };
-//# sourceMappingURL=gravionlabs-helix-core-scrollpanel.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-scrollpanel.mjs.map