angular-infinity-scrolling 1.5.4 → 2.0.1

package/README.md

@@ -1,48 +1,47 @@
-## Thank you for using angular -infinity-scroller for infinite scrolling.
-
-> [!TIP]
-> Note: Current version of package is compatible with angular version above 17
-
-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";
-
-@Component({
-  selector: 'app-example',
-  imports: [
-    AngularInfinityScrollerDirective,
-  ],
-  templateUrl: './exaple.component.html',
-  styleUrl: './exaple.component.scss',
-})
-export class ExampleComponent{}
-```
-
-```
-followed by consuming the directive in example.component.
-```
-
-### Currently Directive has 2 properties
-
-```
-scrollDistance - input which accpet a number between 1  and 10.
-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%.
-
-onScrolled - output that accept a voidFunction to be invoked on emit
-(onScrolled)="handleScroll()"
-```
-
-```ruby
-<div class='scrollable-parent' angularInfinityScroller [scrollDistance]="4" (onScrolled)="handleScroll()">
-</div>
-```
-
-```
-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 happy to resolve the bugs.
-Happy coding!!
-```
+## Thank you for using angular -infinity-scroller for infinite scrolling.
+
+> [!TIP]
+> Note: Current version of package is compatible with angular version above 17
+
+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";
+
+@Component({
+  selector: 'app-example',
+  imports: [
+    AngularInfinityScrollerDirective,
+  ],
+  templateUrl: './exaple.component.html',
+  styleUrl: './exaple.component.scss',
+})
+export class ExampleComponent{}
+```
+
+```
+followed by consuming the directive in example.component.
+```
+
+### Currently Directive has 2 properties
+
+```
+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
+(onScrolled)="handleScroll()"
+```
+
+```ruby
+<div class='scrollable-parent' angularInfinityScroller [scrollDistance]="2" (onScrolled)="handleScroll()">
+</div>
+```
+
+```
+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/ng-package.json

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

package/package.json

@@ -1,31 +1,33 @@
-{
-  "name": "angular-infinity-scrolling",
-  "version": "1.5.4",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Jayant061/angular-infinity-scroller"
-  },
-  "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"
-  ],
-  "author": "Jayant Thakur",
-  "license": "ISC",
-  "peerDependencies": {
-    "@angular/common": "^19.0.0",
-    "@angular/core": "^19.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false
-}
+{
+  "name": "angular-infinity-scrolling",
+  "version": "2.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Jayant061/angular-infinity-scroller"
+  },
+  "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"
+  ],
+  "author": "Jayant Thakur",
+  "license": "ISC",
+  "peerDependencies": {
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

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

@@ -1,8 +1,8 @@
-import { AngularInfinityScrollerDirective } from './angular-infinity-scroller.directive';
-
-describe('AngularInfinityScrollerDirective', () => {
-  it('should create an instance', () => {
-    const directive = new AngularInfinityScrollerDirective();
-    expect(directive).toBeTruthy();
-  });
-});
+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,39 +1,43 @@
-import { Directive, ElementRef, inject, input, output } from '@angular/core';
-
-@Directive({
-  selector: '[angularInfinityScroller]',
-  standalone: true
-})
-export class AngularInfinityScrollerDirective {
-
-  constructor() { }
-  public scrollDistance = input<number>();
-  public onScrolled = output();
-  private el:ElementRef<HTMLDivElement> = inject(ElementRef);
-  private prevScrollHeight:number = 0;
-  ngAfterViewInit(): void {
-    this.el.nativeElement.addEventListener('scroll',this.onScroll.bind(this));
-  }
-
-  ngOnDestroy(): void {
-    this.el.nativeElement.removeEventListener('scroll',this.onScroll.bind(this));
-  }
-  private isEmit:boolean = true;
-  private onScroll():void{
-      const height = Math.floor(this.el?.nativeElement.scrollHeight - this.el.nativeElement.clientHeight);
-      const scrollValue = Math.floor(this.el?.nativeElement.scrollTop);
-      const emitTriggerHeight  = Math.ceil((1-((this.scrollDistance()??2)/10))*height);
-      if(scrollValue>= (emitTriggerHeight) && !this.isEmit){
-        return;
-      }
-      else if(scrollValue < (emitTriggerHeight)){
-        this.isEmit = true;
-      }
-      if(scrollValue>= (emitTriggerHeight) && this.prevScrollHeight !== height){
-        this.onScrolled.emit();
-        this.prevScrollHeight = height;
-        this.isEmit = false;
-      }
-  }
-
-}
+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();
+    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 +1,5 @@
-/*
- * Public API Surface of angular-infinity-scroller
- */
-
-export * from './lib/angular-infinity-scroller.directive'
+/*
+ * Public API Surface of angular-infinity-scroller
+ */
+
+export * from './lib/angular-infinity-scroller.directive'

package/tsconfig.lib.json

@@ -1,15 +1,15 @@
-/* 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"
-  ]
-}
+/* 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 +1,11 @@
-/* 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"
-  }
-}
+/* 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 +1,15 @@
-/* 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"
-  ]
-}
+/* 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"
+  ]
+}