angular-infinity-scrolling 2.1.1 → 2.2.1

package/README.md

@@ -1,47 +1,120 @@
-## Thank you for using angular -infinity-scroller for infinite scrolling.
+# Angular Infinite Scroller
 
-> [!TIP]
-> Note: Current version of package is compatible with angular version above 17
+A **lightweight, high‑performance infinite scrolling directive for Angular applications**, designed to work smoothly with modern Angular versions and SSR setups.
 
-go to the directory, open terminal and and install package using `npm i angular-infinity-scroller`
-Go to the ts file of component e.g. example.component.ts and add AngularInfinityScrollerDirective inside imports.
+---
 
-```ruby
-import {AngularInfinityScrollerDirective} from "angular-infinity-scroller";
+## ✨ Features
+
+- 🚀 Simple directive‑based API
+- ⚡ High‑performance scroll detection
+- 🧩 Works with standalone components
+- 🌐 Compatible with Angular 17+
+- 📦 Zero external dependencies
+
+---
+
+## 📦 Installation
+
+Install the package using npm:
+
+```bash
+npm install angular-infinity-scroller
+```
+
+---
+
+## 🚀 Getting Started
+
+Import `AngularInfinityScrollerDirective` into your component and add it to `imports`.
+
+### Example Component
+
+```ts
+import { Component } from '@angular/core';
+import { AngularInfinityScrollerDirective } from 'angular-infinity-scroller';
 
 @Component({
   selector: 'app-example',
-  imports: [
-    AngularInfinityScrollerDirective,
-  ],
-  templateUrl: './exaple.component.html',
-  styleUrl: './exaple.component.scss',
+  standalone: true,
+  imports: [AngularInfinityScrollerDirective],
+  templateUrl: './example.component.html',
+  styleUrl: './example.component.scss',
 })
-export class ExampleComponent{}
+export class ExampleComponent {
+  handleScroll() {
+    // load more data here
+  }
+}
 ```
 
-```
-followed by consuming the directive in example.component.
-```
+---
 
-### Currently Directive has 2 properties
+## 🧪 Usage
 
+Apply the directive to a scrollable container.
+
+```html
+<div
+  class="scrollable-parent"
+  angularInfinityScroller
+  [scrollDistance]="2"
+  (onScrolled)="handleScroll()"
+>
+</div>
 ```
-scrollDistance - input which accpet a number between 1  and 9.
-Describing to emit the data if scrollable height is less than or equal to (number*10) percent.
-[scrollDistance]='2' value will be emitted if scrollable height is less than or 20%.
-NOTE: if invalid scrollDistance is given, then default value of 2 will be used for calculation;
 
-onScrolled - output that accept a voidFunction to be invoked on emit
+---
+
+## ⚙️ Directive API
+
+### `scrollDistance` (Input)
+
+- **Type:** `number`
+- **Range:** `1 – 9`
+- **Default:** `2`
+
+Defines when the scroll event should trigger.
+
+Example:
+- `[scrollDistance]="2"` → emits when remaining scroll height is **≤ 20%**
+
+If an invalid value is provided, the directive automatically falls back to the default value.
+
+---
+
+### `onScrolled` (Output)
+
+- **Type:** `() => void`
+
+Emits when the scroll threshold is reached.
+
+```html
 (onScrolled)="handleScroll()"
 ```
 
-```ruby
-<div class='scrollable-parent' angularInfinityScroller [scrollDistance]="2" (onScrolled)="handleScroll()">
-</div>
-```
+---
+
+## 🔧 Compatibility
+
+- ✅ Angular **17 and above**
+- ✅ Standalone components
+- ✅ SSR‑friendly
+
+---
+
+## 🤝 Contributing
+
+Suggestions, improvements, and pull requests are welcome.
+
+If you encounter any issues, please raise them on GitHub:
+👉 https://github.com/Jayant061/angular-infinity-scroller/issues
+
+---
+
+## ⭐ Support
+
+If this package helps you, please consider starring the repository ⭐
+
+Happy coding! 🚀
 
-```
-Any suggestions or contributions are most welcome. If you are facing any issue with the packge please raise the issue in the github, I'll happt to resolve the bugs.
-Happy coding!!
-```

package/fesm2022/angular-infinity-scrolling.mjs

@@ -0,0 +1,58 @@
+import * as i0 from '@angular/core';
+import { input, computed, output, inject, ElementRef, signal, Directive } from '@angular/core';
+
+class AngularInfinityScrollerDirective {
+    constructor() {
+        this.onScroll = this.onScroll.bind(this);
+    }
+    scrollDistance = input(2);
+    scrollDistanceCoefficient = computed(() => {
+        const val = this.scrollDistance();
+        if (val > 9) {
+            return 2;
+        }
+        return val;
+    });
+    onScrolled = output();
+    el = inject(ElementRef);
+    prevScrollHeight = signal(0);
+    ngAfterViewInit() {
+        this.el.nativeElement.addEventListener('scroll', this.onScroll);
+    }
+    onScroll() {
+        const height = Math.floor(this.el?.nativeElement.scrollHeight - this.el.nativeElement.clientHeight);
+        const scrollValue = Math.floor(this.el?.nativeElement.scrollTop);
+        const unexploredContentHeight = height - this.prevScrollHeight();
+        if (unexploredContentHeight < 0) { // if the list item quantity reduced (applying filter)
+            this.prevScrollHeight.set(0);
+        }
+        const emitTriggerHeight = this.prevScrollHeight() + Math.ceil((1 - ((this.scrollDistanceCoefficient()) / 10)) * unexploredContentHeight);
+        if (scrollValue >= (emitTriggerHeight) && this.prevScrollHeight() !== height) {
+            this.onScrolled.emit();
+            this.prevScrollHeight.set(height);
+        }
+    }
+    ngOnDestroy() {
+        this.el.nativeElement.removeEventListener('scroll', this.onScroll);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AngularInfinityScrollerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: AngularInfinityScrollerDirective, isStandalone: true, selector: "[angularInfinityScroller]", inputs: { scrollDistance: { classPropertyName: "scrollDistance", publicName: "scrollDistance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScrolled: "onScrolled" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AngularInfinityScrollerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[angularInfinityScroller]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of angular-infinity-scroller
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AngularInfinityScrollerDirective };
+//# sourceMappingURL=angular-infinity-scrolling.mjs.map

package/fesm2022/angular-infinity-scrolling.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"angular-infinity-scrolling.mjs","sources":["../../../projects/angular-infinity-scroller/src/lib/angular-infinity-scroller.directive.ts","../../../projects/angular-infinity-scroller/src/public-api.ts","../../../projects/angular-infinity-scroller/src/angular-infinity-scrolling.ts"],"sourcesContent":["import { computed, Directive, ElementRef, inject, input, output, signal } from '@angular/core';\n\n@Directive({\n  selector: '[angularInfinityScroller]',\n  standalone: true\n})\nexport class AngularInfinityScrollerDirective {\n\n  constructor() {\n    this.onScroll = this.onScroll.bind(this);\n  }\n  public scrollDistance = input<number>(2);\n  private readonly scrollDistanceCoefficient = computed(() => {\n    const val = this.scrollDistance();\n    if (val > 9) {\n      return 2\n    }\n    return val;\n  })\n  public onScrolled = output();\n  private el: ElementRef<HTMLDivElement> = inject(ElementRef);\n  private prevScrollHeight = signal<number>(0);\n\n\n  ngAfterViewInit(): void {\n    this.el.nativeElement.addEventListener('scroll', this.onScroll);\n  }\n\n  private onScroll(): void {\n    const height = Math.floor(this.el?.nativeElement.scrollHeight - this.el.nativeElement.clientHeight);\n    const scrollValue = Math.floor(this.el?.nativeElement.scrollTop);\n    const unexploredContentHeight = height - this.prevScrollHeight();\n    if (unexploredContentHeight < 0) {// if the list item quantity reduced (applying filter)\n      this.prevScrollHeight.set(0);\n    }\n    const emitTriggerHeight = this.prevScrollHeight() + Math.ceil((1 - ((this.scrollDistanceCoefficient()) / 10)) * unexploredContentHeight);\n    if (scrollValue >= (emitTriggerHeight) && this.prevScrollHeight() !== height) {\n      this.onScrolled.emit();\n      this.prevScrollHeight.set(height);\n    }\n  }\n  ngOnDestroy(): void {\n    this.el.nativeElement.removeEventListener('scroll', this.onScroll);\n  }\n\n}\n","/*\n * Public API Surface of angular-infinity-scroller\n */\n\nexport * from './lib/angular-infinity-scroller.directive'\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAMa,gCAAgC,CAAA;AAE3C,IAAA,WAAA,GAAA;QACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;AAEnC,IAAA,cAAc,GAAG,KAAK,CAAS,CAAC,CAAC;AACvB,IAAA,yBAAyB,GAAG,QAAQ,CAAC,MAAK;AACzD,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,cAAc,EAAE;AACjC,QAAA,IAAI,GAAG,GAAG,CAAC,EAAE;AACX,YAAA,OAAO,CAAC;;AAEV,QAAA,OAAO,GAAG;AACZ,KAAC,CAAC;IACK,UAAU,GAAG,MAAM,EAAE;AACpB,IAAA,EAAE,GAA+B,MAAM,CAAC,UAAU,CAAC;AACnD,IAAA,gBAAgB,GAAG,MAAM,CAAS,CAAC,CAAC;IAG5C,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;;IAGzD,QAAQ,GAAA;QACd,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC;AACnG,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,SAAS,CAAC;QAChE,MAAM,uBAAuB,GAAG,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE;AAChE,QAAA,IAAI,uBAAuB,GAAG,CAAC,EAAE;AAC/B,YAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;;AAE9B,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,EAAE,IAAI,EAAE,CAAC,IAAI,uBAAuB,CAAC;AACxI,QAAA,IAAI,WAAW,KAAK,iBAAiB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,KAAK,MAAM,EAAE;AAC5E,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACtB,YAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC;;;IAGrC,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC;;uGApCzD,gCAAgC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAhC,gCAAgC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAhC,gCAAgC,EAAA,UAAA,EAAA,CAAA;kBAJ5C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,2BAA2B;AACrC,oBAAA,UAAU,EAAE;AACb,iBAAA;;;ACLD;;AAEG;;ACFH;;AAEG;;;;"}

package/index.d.ts

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

package/lib/angular-infinity-scroller.directive.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+export declare class AngularInfinityScrollerDirective {
+    constructor();
+    scrollDistance: import("@angular/core").InputSignal<number>;
+    private readonly scrollDistanceCoefficient;
+    onScrolled: import("@angular/core").OutputEmitterRef<void>;
+    private el;
+    private prevScrollHeight;
+    ngAfterViewInit(): void;
+    private onScroll;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AngularInfinityScrollerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AngularInfinityScrollerDirective, "[angularInfinityScroller]", never, { "scrollDistance": { "alias": "scrollDistance"; "required": false; "isSignal": true; }; }, { "onScrolled": "onScrolled"; }, never, never, true, never>;
+}

package/package.json

@@ -1,33 +1,56 @@
 {
   "name": "angular-infinity-scrolling",
-  "version": "2.1.1",
+  "version": "2.2.1",
+  "description": "High-performance infinite scrolling directive for Angular applications with SSR support.",
+  "homepage": "https://github.com/Jayant061/angular-infinity-scroller",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Jayant061/angular-infinity-scroller"
+    "url": "git+https://github.com/Jayant061/angular-infinity-scroller.git"
   },
   "bugs": {
     "url": "https://github.com/Jayant061/angular-infinity-scroller/issues"
   },
   "keywords": [
-    "Angular-infinity-scrolling",
-    "Angular-infinity-scroller",
-    "infinity-scroller",
-    "Angular-infinite-scroller",
-    "Angular-infinite-scroll",
-    "infinte-scroll",
-    "infinite",
-    "Angular",
-    "ngx-infinite-scroller",
-    "ng-infinite-scroll"
+    "angular",
+    "angular-library",
+    "angular-directive",
+    "angular-ssr",
+    "infinite-scroll",
+    "infinite-scrolling",
+    "infinite-scroller",
+    "scroll",
+    "scrolling",
+    "virtual-scroll",
+    "pagination",
+    "lazy-loading",
+    "ngx-infinite-scroll",
+    "angular-infinite-scroll"
   ],
-  "author": "Jayant Thakur",
+  "author": {
+    "name": "Jayant Thakur",
+    "url": "https://github.com/Jayant061"
+  },
   "license": "ISC",
+  "sideEffects": false,
   "peerDependencies": {
-    "@angular/common": "^19.0.0",
-    "@angular/core": "^19.0.0"
+    "@angular/core": ">=16.0.0 <21.0.0",
+    "@angular/common": ">=16.0.0 <21.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false
+  "engines": {
+    "node": ">=18"
+  },
+  "module": "fesm2022/angular-infinity-scrolling.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/angular-infinity-scrolling.mjs"
+    }
+  }
 }

package/public-api.d.ts

@@ -0,0 +1 @@
+export * from './lib/angular-infinity-scroller.directive';

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/angular-infinity-scroller",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/src/lib/angular-infinity-scroller.directive.spec.ts

@@ -1,8 +0,0 @@
-import { AngularInfinityScrollerDirective } from './angular-infinity-scroller.directive';
-
-describe('AngularInfinityScrollerDirective', () => {
-  it('should create an instance', () => {
-    const directive = new AngularInfinityScrollerDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/src/lib/angular-infinity-scroller.directive.ts

@@ -1,46 +0,0 @@
-import { computed, Directive, ElementRef, inject, input, output, signal } from '@angular/core';
-
-@Directive({
-  selector: '[angularInfinityScroller]',
-  standalone: true
-})
-export class AngularInfinityScrollerDirective {
-
-  constructor() {
-    this.onScroll = this.onScroll.bind(this);
-  }
-  public scrollDistance = input<number>(2);
-  private readonly scrollDistanceCoefficient = computed(() => {
-    const val = this.scrollDistance();
-    if (val > 9) {
-      return 2
-    }
-    return val;
-  })
-  public onScrolled = output();
-  private el: ElementRef<HTMLDivElement> = inject(ElementRef);
-  private prevScrollHeight = signal<number>(0);
-
-
-  ngAfterViewInit(): void {
-    this.el.nativeElement.addEventListener('scroll', this.onScroll);
-  }
-
-  private onScroll(): void {
-    const height = Math.floor(this.el?.nativeElement.scrollHeight - this.el.nativeElement.clientHeight);
-    const scrollValue = Math.floor(this.el?.nativeElement.scrollTop);
-    const unexploredContentHeight = height - this.prevScrollHeight();
-    if (unexploredContentHeight < 0) {// if the list item quantity reduced (applying filter)
-      this.prevScrollHeight.set(0);
-    }
-    const emitTriggerHeight = this.prevScrollHeight() + Math.ceil((1 - ((this.scrollDistanceCoefficient()) / 10)) * unexploredContentHeight);
-    if (scrollValue >= (emitTriggerHeight) && this.prevScrollHeight() !== height) {
-      this.onScrolled.emit();
-      this.prevScrollHeight.set(height);
-    }
-  }
-  ngOnDestroy(): void {
-    this.el.nativeElement.removeEventListener('scroll', this.onScroll);
-  }
-
-}

package/src/public-api.ts

@@ -1,5 +0,0 @@
-/*
- * Public API Surface of angular-infinity-scroller
- */
-
-export * from './lib/angular-infinity-scroller.directive'

package/tsconfig.lib.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}