ngx-zoneless-scrollbar 1.0.0

package/fesm2022/ngx-zoneless-scrollbar.mjs

@@ -0,0 +1,172 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * NgxZonelessScrollbar
+ *
+ * A lightweight, zoneless-compatible scrollbar component for Angular.
+ * Uses native browser scrolling with CSS-styled scrollbars.
+ *
+ * Features:
+ * - Uses native browser scrolling (100% reliable in zoneless mode)
+ * - CSS-styled scrollbars for modern browsers (Chrome, Firefox, Safari)
+ * - Detects if content is scrollable and exposes this via signals
+ * - Emits events after content updates
+ * - Touch-friendly with momentum scrolling
+ *
+ * @example
+ * ```html
+ * <ngx-zoneless-scrollbar (afterUpdate)="onScrollbarUpdated($event)">
+ *   <div>Your scrollable content here</div>
+ * </ngx-zoneless-scrollbar>
+ * ```
+ */
+class NgxZonelessScrollbar {
+    viewportRef;
+    contentRef;
+    /**
+     * Orientation of scrolling
+     * - 'vertical': Only vertical scrolling (default)
+     * - 'horizontal': Only horizontal scrolling
+     * - 'auto': Both directions as needed
+     */
+    orientation = input('vertical');
+    /**
+     * Emits after the scrollbar state is updated with scrollability info
+     */
+    afterUpdate = output();
+    /**
+     * Signal indicating if content is vertically scrollable
+     */
+    isVerticallyScrollable = signal(false);
+    /**
+     * Signal indicating if content is horizontally scrollable
+     */
+    isHorizontallyScrollable = signal(false);
+    resizeObserver = null;
+    ngAfterViewInit() {
+        // Initial check after view is ready
+        this.checkScrollability();
+        // Set up ResizeObserver to detect content changes
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.checkScrollability();
+            });
+            // Observe both viewport and content for size changes
+            this.resizeObserver.observe(this.viewportRef.nativeElement);
+            this.resizeObserver.observe(this.contentRef.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    /**
+     * Check if content is scrollable and emit update event
+     */
+    checkScrollability() {
+        const viewport = this.viewportRef?.nativeElement;
+        const content = this.contentRef?.nativeElement;
+        if (!viewport || !content)
+            return;
+        const isVertical = content.scrollHeight > viewport.clientHeight;
+        const isHorizontal = content.scrollWidth > viewport.clientWidth;
+        // Only update and emit if values changed
+        const prevVertical = this.isVerticallyScrollable();
+        const prevHorizontal = this.isHorizontallyScrollable();
+        if (isVertical !== prevVertical || isHorizontal !== prevHorizontal) {
+            this.isVerticallyScrollable.set(isVertical);
+            this.isHorizontallyScrollable.set(isHorizontal);
+            this.afterUpdate.emit({
+                isVerticallyScrollable: isVertical,
+                isHorizontallyScrollable: isHorizontal
+            });
+        }
+    }
+    /**
+     * Scroll to a specific position
+     * @param options - ScrollToOptions with top, left, and behavior
+     * @returns Promise that resolves when scroll is complete
+     */
+    scrollTo(options) {
+        return new Promise((resolve) => {
+            this.viewportRef?.nativeElement?.scrollTo({
+                top: options.top ?? 0,
+                left: options.left ?? 0,
+                behavior: options.behavior ?? 'smooth'
+            });
+            // Resolve after a short delay for smooth scroll
+            setTimeout(resolve, options.behavior === 'instant' ? 0 : 300);
+        });
+    }
+    /**
+     * Manually trigger an update check
+     */
+    update() {
+        this.checkScrollability();
+    }
+    /**
+     * Get the viewport element for direct access if needed
+     */
+    get viewportElement() {
+        return this.viewportRef?.nativeElement ?? null;
+    }
+    /**
+     * Get the current scroll position
+     */
+    get scrollTop() {
+        return this.viewportRef?.nativeElement?.scrollTop ?? 0;
+    }
+    /**
+     * Get the current horizontal scroll position
+     */
+    get scrollLeft() {
+        return this.viewportRef?.nativeElement?.scrollLeft ?? 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NgxZonelessScrollbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: NgxZonelessScrollbar, isStandalone: true, selector: "ngx-zoneless-scrollbar", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { afterUpdate: "afterUpdate" }, host: { properties: { "attr.orientation": "orientation()" } }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: `
+    <div
+      #viewport
+      class="ngx-zoneless-scrollbar-viewport"
+      [class.vertical-scrollable]="isVerticallyScrollable()"
+      [class.horizontal-scrollable]="isHorizontallyScrollable()"
+    >
+      <div #content class="ngx-zoneless-scrollbar-content">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;height:100%;width:100%;position:relative;--scrollbar-size: 7px;--scrollbar-track-color: transparent;--scrollbar-track-radius: 4px;--scrollbar-thumb-color: rgba(0, 0, 0, .3);--scrollbar-thumb-color-hover: rgba(0, 0, 0, .5);--scrollbar-thumb-radius: 4px}.ngx-zoneless-scrollbar-viewport{height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;&::-webkit-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size)}&::-webkit-scrollbar-track{background:var(--scrollbar-track-color);border-radius:var(--scrollbar-track-radius)}&::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-thumb-radius);transition:background .2s ease}&::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-color-hover)}scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color)}:host([orientation=\"vertical\"]) .ngx-zoneless-scrollbar-viewport{overflow-x:hidden;overflow-y:auto}:host([orientation=\"horizontal\"]) .ngx-zoneless-scrollbar-viewport{overflow-x:auto;overflow-y:hidden}.ngx-zoneless-scrollbar-content{min-height:100%;min-width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NgxZonelessScrollbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-zoneless-scrollbar', standalone: true, template: `
+    <div
+      #viewport
+      class="ngx-zoneless-scrollbar-viewport"
+      [class.vertical-scrollable]="isVerticallyScrollable()"
+      [class.horizontal-scrollable]="isHorizontallyScrollable()"
+    >
+      <div #content class="ngx-zoneless-scrollbar-content">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.orientation]': 'orientation()'
+                    }, styles: [":host{display:block;height:100%;width:100%;position:relative;--scrollbar-size: 7px;--scrollbar-track-color: transparent;--scrollbar-track-radius: 4px;--scrollbar-thumb-color: rgba(0, 0, 0, .3);--scrollbar-thumb-color-hover: rgba(0, 0, 0, .5);--scrollbar-thumb-radius: 4px}.ngx-zoneless-scrollbar-viewport{height:100%;width:100%;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;&::-webkit-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size)}&::-webkit-scrollbar-track{background:var(--scrollbar-track-color);border-radius:var(--scrollbar-track-radius)}&::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-thumb-radius);transition:background .2s ease}&::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-color-hover)}scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color)}:host([orientation=\"vertical\"]) .ngx-zoneless-scrollbar-viewport{overflow-x:hidden;overflow-y:auto}:host([orientation=\"horizontal\"]) .ngx-zoneless-scrollbar-viewport{overflow-x:auto;overflow-y:hidden}.ngx-zoneless-scrollbar-content{min-height:100%;min-width:100%}\n"] }]
+        }], propDecorators: { viewportRef: [{
+                type: ViewChild,
+                args: ['viewport']
+            }], contentRef: [{
+                type: ViewChild,
+                args: ['content']
+            }] } });
+
+/*
+ * Public API Surface of ngx-zoneless-scrollbar
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxZonelessScrollbar };
+//# sourceMappingURL=ngx-zoneless-scrollbar.mjs.map

package/fesm2022/ngx-zoneless-scrollbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-zoneless-scrollbar.mjs","sources":["../../../projects/ngx-zoneless-scrollbar/src/lib/ngx-zoneless-scrollbar.component.ts","../../../projects/ngx-zoneless-scrollbar/src/public-api.ts","../../../projects/ngx-zoneless-scrollbar/src/ngx-zoneless-scrollbar.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  input,\n  OnDestroy,\n  output,\n  signal,\n  ViewChild,\n  WritableSignal\n} from '@angular/core';\nimport { ScrollbarOrientation, ScrollbarUpdateEvent } from './ngx-zoneless-scrollbar.models';\n\n/**\n * NgxZonelessScrollbar\n *\n * A lightweight, zoneless-compatible scrollbar component for Angular.\n * Uses native browser scrolling with CSS-styled scrollbars.\n *\n * Features:\n * - Uses native browser scrolling (100% reliable in zoneless mode)\n * - CSS-styled scrollbars for modern browsers (Chrome, Firefox, Safari)\n * - Detects if content is scrollable and exposes this via signals\n * - Emits events after content updates\n * - Touch-friendly with momentum scrolling\n *\n * @example\n * ```html\n * <ngx-zoneless-scrollbar (afterUpdate)=\"onScrollbarUpdated($event)\">\n *   <div>Your scrollable content here</div>\n * </ngx-zoneless-scrollbar>\n * ```\n */\n@Component({\n  selector: 'ngx-zoneless-scrollbar',\n  standalone: true,\n  template: `\n    <div\n      #viewport\n      class=\"ngx-zoneless-scrollbar-viewport\"\n      [class.vertical-scrollable]=\"isVerticallyScrollable()\"\n      [class.horizontal-scrollable]=\"isHorizontallyScrollable()\"\n    >\n      <div #content class=\"ngx-zoneless-scrollbar-content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n        height: 100%;\n        width: 100%;\n        position: relative;\n\n        /* CSS Custom Properties for easy customization */\n        --scrollbar-size: 7px;\n        --scrollbar-track-color: transparent;\n        --scrollbar-track-radius: 4px;\n        --scrollbar-thumb-color: rgba(0, 0, 0, 0.3);\n        --scrollbar-thumb-color-hover: rgba(0, 0, 0, 0.5);\n        --scrollbar-thumb-radius: 4px;\n      }\n\n      .ngx-zoneless-scrollbar-viewport {\n        height: 100%;\n        width: 100%;\n        overflow: auto;\n        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */\n        overscroll-behavior: contain; /* Prevent scroll chaining */\n\n        /* Custom scrollbar styling for webkit browsers (Chrome, Safari, Edge) */\n        &::-webkit-scrollbar {\n          width: var(--scrollbar-size);\n          height: var(--scrollbar-size);\n        }\n\n        &::-webkit-scrollbar-track {\n          background: var(--scrollbar-track-color);\n          border-radius: var(--scrollbar-track-radius);\n        }\n\n        &::-webkit-scrollbar-thumb {\n          background: var(--scrollbar-thumb-color);\n          border-radius: var(--scrollbar-thumb-radius);\n          transition: background 0.2s ease;\n        }\n\n        &::-webkit-scrollbar-thumb:hover {\n          background: var(--scrollbar-thumb-color-hover);\n        }\n\n        /* Firefox scrollbar styling */\n        scrollbar-width: thin;\n        scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n      }\n\n      /* Orientation-specific overflow behavior */\n      :host([orientation='vertical']) .ngx-zoneless-scrollbar-viewport {\n        overflow-x: hidden;\n        overflow-y: auto;\n      }\n\n      :host([orientation='horizontal']) .ngx-zoneless-scrollbar-viewport {\n        overflow-x: auto;\n        overflow-y: hidden;\n      }\n\n      .ngx-zoneless-scrollbar-content {\n        min-height: 100%;\n        min-width: 100%;\n      }\n    `\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.orientation]': 'orientation()'\n  }\n})\nexport class NgxZonelessScrollbar implements AfterViewInit, OnDestroy {\n  @ViewChild('viewport') viewportRef!: ElementRef<HTMLElement>;\n  @ViewChild('content') contentRef!: ElementRef<HTMLElement>;\n\n  /**\n   * Orientation of scrolling\n   * - 'vertical': Only vertical scrolling (default)\n   * - 'horizontal': Only horizontal scrolling\n   * - 'auto': Both directions as needed\n   */\n  readonly orientation = input<ScrollbarOrientation>('vertical');\n\n  /**\n   * Emits after the scrollbar state is updated with scrollability info\n   */\n  readonly afterUpdate = output<ScrollbarUpdateEvent>();\n\n  /**\n   * Signal indicating if content is vertically scrollable\n   */\n  readonly isVerticallyScrollable: WritableSignal<boolean> = signal(false);\n\n  /**\n   * Signal indicating if content is horizontally scrollable\n   */\n  readonly isHorizontallyScrollable: WritableSignal<boolean> = signal(false);\n\n  private resizeObserver: ResizeObserver | null = null;\n\n  ngAfterViewInit(): void {\n    // Initial check after view is ready\n    this.checkScrollability();\n\n    // Set up ResizeObserver to detect content changes\n    if (typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => {\n        this.checkScrollability();\n      });\n\n      // Observe both viewport and content for size changes\n      this.resizeObserver.observe(this.viewportRef.nativeElement);\n      this.resizeObserver.observe(this.contentRef.nativeElement);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  /**\n   * Check if content is scrollable and emit update event\n   */\n  private checkScrollability(): void {\n    const viewport = this.viewportRef?.nativeElement;\n    const content = this.contentRef?.nativeElement;\n\n    if (!viewport || !content) return;\n\n    const isVertical = content.scrollHeight > viewport.clientHeight;\n    const isHorizontal = content.scrollWidth > viewport.clientWidth;\n\n    // Only update and emit if values changed\n    const prevVertical = this.isVerticallyScrollable();\n    const prevHorizontal = this.isHorizontallyScrollable();\n\n    if (isVertical !== prevVertical || isHorizontal !== prevHorizontal) {\n      this.isVerticallyScrollable.set(isVertical);\n      this.isHorizontallyScrollable.set(isHorizontal);\n\n      this.afterUpdate.emit({\n        isVerticallyScrollable: isVertical,\n        isHorizontallyScrollable: isHorizontal\n      });\n    }\n  }\n\n  /**\n   * Scroll to a specific position\n   * @param options - ScrollToOptions with top, left, and behavior\n   * @returns Promise that resolves when scroll is complete\n   */\n  scrollTo(options: ScrollToOptions): Promise<void> {\n    return new Promise((resolve) => {\n      this.viewportRef?.nativeElement?.scrollTo({\n        top: options.top ?? 0,\n        left: options.left ?? 0,\n        behavior: options.behavior ?? 'smooth'\n      });\n      // Resolve after a short delay for smooth scroll\n      setTimeout(resolve, options.behavior === 'instant' ? 0 : 300);\n    });\n  }\n\n  /**\n   * Manually trigger an update check\n   */\n  update(): void {\n    this.checkScrollability();\n  }\n\n  /**\n   * Get the viewport element for direct access if needed\n   */\n  get viewportElement(): HTMLElement | null {\n    return this.viewportRef?.nativeElement ?? null;\n  }\n\n  /**\n   * Get the current scroll position\n   */\n  get scrollTop(): number {\n    return this.viewportRef?.nativeElement?.scrollTop ?? 0;\n  }\n\n  /**\n   * Get the current horizontal scroll position\n   */\n  get scrollLeft(): number {\n    return this.viewportRef?.nativeElement?.scrollLeft ?? 0;\n  }\n}\n","/*\n * Public API Surface of ngx-zoneless-scrollbar\n */\n\nexport * from './lib/ngx-zoneless-scrollbar.component';\nexport * from './lib/ngx-zoneless-scrollbar.models';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ngx-zoneless-scrollbar" />
+export * from './public-api';

package/lib/ngx-zoneless-scrollbar.component.d.ts

@@ -0,0 +1,77 @@
+import { AfterViewInit, ElementRef, OnDestroy, WritableSignal } from '@angular/core';
+import { ScrollbarOrientation, ScrollbarUpdateEvent } from './ngx-zoneless-scrollbar.models';
+import * as i0 from "@angular/core";
+/**
+ * NgxZonelessScrollbar
+ *
+ * A lightweight, zoneless-compatible scrollbar component for Angular.
+ * Uses native browser scrolling with CSS-styled scrollbars.
+ *
+ * Features:
+ * - Uses native browser scrolling (100% reliable in zoneless mode)
+ * - CSS-styled scrollbars for modern browsers (Chrome, Firefox, Safari)
+ * - Detects if content is scrollable and exposes this via signals
+ * - Emits events after content updates
+ * - Touch-friendly with momentum scrolling
+ *
+ * @example
+ * ```html
+ * <ngx-zoneless-scrollbar (afterUpdate)="onScrollbarUpdated($event)">
+ *   <div>Your scrollable content here</div>
+ * </ngx-zoneless-scrollbar>
+ * ```
+ */
+export declare class NgxZonelessScrollbar implements AfterViewInit, OnDestroy {
+    viewportRef: ElementRef<HTMLElement>;
+    contentRef: ElementRef<HTMLElement>;
+    /**
+     * Orientation of scrolling
+     * - 'vertical': Only vertical scrolling (default)
+     * - 'horizontal': Only horizontal scrolling
+     * - 'auto': Both directions as needed
+     */
+    readonly orientation: import("@angular/core").InputSignal<ScrollbarOrientation>;
+    /**
+     * Emits after the scrollbar state is updated with scrollability info
+     */
+    readonly afterUpdate: import("@angular/core").OutputEmitterRef<ScrollbarUpdateEvent>;
+    /**
+     * Signal indicating if content is vertically scrollable
+     */
+    readonly isVerticallyScrollable: WritableSignal<boolean>;
+    /**
+     * Signal indicating if content is horizontally scrollable
+     */
+    readonly isHorizontallyScrollable: WritableSignal<boolean>;
+    private resizeObserver;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Check if content is scrollable and emit update event
+     */
+    private checkScrollability;
+    /**
+     * Scroll to a specific position
+     * @param options - ScrollToOptions with top, left, and behavior
+     * @returns Promise that resolves when scroll is complete
+     */
+    scrollTo(options: ScrollToOptions): Promise<void>;
+    /**
+     * Manually trigger an update check
+     */
+    update(): void;
+    /**
+     * Get the viewport element for direct access if needed
+     */
+    get viewportElement(): HTMLElement | null;
+    /**
+     * Get the current scroll position
+     */
+    get scrollTop(): number;
+    /**
+     * Get the current horizontal scroll position
+     */
+    get scrollLeft(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxZonelessScrollbar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxZonelessScrollbar, "ngx-zoneless-scrollbar", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "afterUpdate": "afterUpdate"; }, never, ["*"], true, never>;
+}

package/lib/ngx-zoneless-scrollbar.models.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Event emitted when scrollbar state is updated
+ */
+export interface ScrollbarUpdateEvent {
+    /** Whether content is vertically scrollable */
+    isVerticallyScrollable: boolean;
+    /** Whether content is horizontally scrollable */
+    isHorizontallyScrollable: boolean;
+}
+/**
+ * Orientation options for the scrollbar
+ */
+export type ScrollbarOrientation = 'vertical' | 'horizontal' | 'auto';

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "ngx-zoneless-scrollbar",
+  "version": "1.0.0",
+  "description": "A lightweight, zoneless-compatible scrollbar component for Angular. Uses native browser scrolling with CSS-styled scrollbars, designed for Angular's zoneless change detection mode.",
+  "keywords": [
+    "angular",
+    "scrollbar",
+    "zoneless",
+    "native-scrollbar",
+    "custom-scrollbar",
+    "angular-scrollbar",
+    "ngx-scrollbar",
+    "signals",
+    "standalone",
+    "css-scrollbar",
+    "resize-observer"
+  ],
+  "author": "Legalfina",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Legalfina/ngx-zoneless-scrollbar"
+  },
+  "bugs": {
+    "url": "https://github.com/Legalfina/ngx-zoneless-scrollbar/issues"
+  },
+  "homepage": "https://github.com/Legalfina/ngx-zoneless-scrollbar#readme",
+  "peerDependencies": {
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/ngx-zoneless-scrollbar.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ngx-zoneless-scrollbar.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/ngx-zoneless-scrollbar.component';
+export * from './lib/ngx-zoneless-scrollbar.models';