ng-mat-select-infinite-scroll 4.0.0 → 5.0.0-beta.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Haidar Zeineddine
+Copyright (c) 2024 Haidar Zeineddine
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,34 +1,37 @@
 
 # Angular Material Select Infinite Scroll  
-  
-Adds missing infinite scroll functionality for the [angular material select component](https://material.angular.io/components/select)
-  
-  
+
+Adds missing infinite scroll functionality for the [Angular Material Select component](https://material.angular.io/components/select).  
+
 ### Inputs  
-  
-| Property       | Description                                                                                                                                                                                                                                                                                                              | Type      | Default    |  
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------| ---------- |  
-| `complete`     | If `true`, the `infiniteScroll` output will no longer be triggered                                                                                                                                                                                                                                                        | `boolean` | `false`    |  
-| `threshold`    | The threshold distance from the bottom of the options list to call the `infiniteScroll` output event when scrolled. The threshold value can be either in percent, or in pixels. For example, use the value of `10%` for the `infiniteScroll` output event to get called when the user has needs 10% to reach the bottom. | `string`  | `'15%'`    |
-| `debounceTime` | The threshold time before firing the `infiniteScroll` event                                                                                                                                                                                                                                                              | `number`  | `150`      |
-### Outputs
-| Property         | Description                                                                             | Type                                                                                                                                                                                                                                                                                                                                          |
-| ----------------- | --------------------------------------------------------------------------------------- | --------------------
-| `infiniteScroll`  | Emitted when the scroller inside the `mat-select` reaches the required distance         | `EventEmitter<void>`
-
-### Installation
 
-```
+| Property       | Description                                                                                                                                                                                                                  | Type      | Default    |  
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------| ---------- |  
+| `complete`     | If `true`, the `infiniteScroll` output will no longer be triggered.                                                                                                                                                          | `boolean` | `false`    |  
+| `threshold`    | The threshold distance from the bottom of the options list to call the `infiniteScroll` output event when scrolled. The threshold value can be either in percent or pixels. For example, `10%` triggers the event 10% before the bottom. | `string`  | `'15%'`    |  
+| `debounceTime` | The threshold time (in milliseconds) before firing the `infiniteScroll` event.                                                                                                                                               | `number`  | `150`      |  
+
+### Outputs  
+
+| Property         | Description                                                                             | Type                  |  
+| ----------------- | --------------------------------------------------------------------------------------- | --------------------- |  
+| `infiniteScroll`  | Emitted when the scroller inside the `mat-select` reaches the required distance.        | `EventEmitter<void>`  |  
+
+### Installation  
+
+```bash
 npm i ng-mat-select-infinite-scroll
 ```
 
-### Usage
-[StackBlitz working example](https://stackblitz.com/edit/ng-mat-select-infinite-scroll)
+### Usage  
+
+[StackBlitz working example](https://stackblitz.com/edit/ng-mat-select-infinite-scroll)  
 
-Import `MatSelectInfiniteScrollModule` inside the app.module.ts
+Import `MatSelectInfiniteScrollModule` inside the `app.module.ts`:  
 ```typescript
-import { MatFormFieldModule, MatSelectModule } from '@angular/material/select';
-import {MatSelectInfiniteScrollModule} from 'ng-mat-select-infinite-scroll';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSelectInfiniteScrollModule } from 'ng-mat-select-infinite-scroll';
 
 @NgModule({
   declarations: [
@@ -44,11 +47,10 @@ import {MatSelectInfiniteScrollModule} from 'ng-mat-select-infinite-scroll';
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule {
-}
+export class AppModule {}
 ```
 
-Then place the msInfiniteScroll directive on the `mat-select` component
+Then, place the `msInfiniteScroll` directive on the `mat-select` component:  
 ```html
 <mat-form-field appearance="outline">
   <mat-label>Select</mat-label>
@@ -58,28 +60,34 @@ Then place the msInfiniteScroll directive on the `mat-select` component
 </mat-form-field>
 ```
 
-### Compatibility
+> **Note:**  
+> Update the `complete` property when the loaded data reaches the total available data to avoid unnecessary scroll triggers.  
+> For older versions of Angular (<15), use version 4 of this library.
+
+### Compatibility  
+
+This library supports Angular 15 and higher.  
+* `@angular/core`: `>=15.0.0 <16`  
+* `@angular/cdk`: `>=15.0.0 <16`  
+* `@angular/material`: `>=15.0.0 <16`  
+* `rxjs`: `^7.0.0`  
 
-* `@angular/core`: `>=6.0.0 <16`,
-* `@angular/cdk`: `>=6.0.0 <16`,
-* `@angular/material`: `>=6.0.0 <16`,
-* `rxjs`: `^7.0.0`
+### Contributions  
 
-### Contributions
-Contributions are welcomed, feel free to open a Pull-Request or open a new issue.
+Contributions are welcome! Feel free to open a Pull Request or create a new issue.  
 
-### Development server
+### Development Server  
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any source files.  
 
-### Build
+### Build  
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.  
 
-### Running unit tests
+### Running Unit Tests  
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+Run `ng test` to execute unit tests via [Karma](https://karma-runner.github.io).  
 
-# License
+### License  
 
-[MIT](LICENSE)
+[MIT](LICENSE)  

package/esm2020/lib/infinite-scroll.service.mjs

@@ -0,0 +1,64 @@
+import { Injectable } from '@angular/core';
+import { fromEvent, Subject } from 'rxjs';
+import { debounceTime, takeUntil, tap } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+export class InfiniteScrollService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.threshold = '15%';
+        this.debounceTime = 150;
+        this.thrPx = 0;
+        this.thrPc = 0;
+        this.destroyed$ = new Subject();
+    }
+    initialize(panel, selectItemHeightPx, config) {
+        this.threshold = config.threshold;
+        this.debounceTime = config.debounceTime;
+        this.complete = config.complete;
+        this.panel = panel;
+        this.selectItemHeightPx = selectItemHeightPx;
+        this.evaluateThreshold();
+    }
+    evaluateThreshold() {
+        if (this.threshold.lastIndexOf('%') > -1) {
+            this.thrPx = 0;
+            this.thrPc = (parseFloat(this.threshold) / 100);
+        }
+        else {
+            this.thrPx = parseFloat(this.threshold);
+            this.thrPc = 0;
+        }
+    }
+    registerScrollListener(infiniteScrollCallback) {
+        fromEvent(this.panel, 'scroll').pipe(takeUntil(this.destroyed$), debounceTime(this.debounceTime), tap((event) => {
+            this.handleScrollEvent(event, infiniteScrollCallback);
+        })).subscribe();
+    }
+    handleScrollEvent(event, infiniteScrollCallback) {
+        this.ngZone.runOutsideAngular(() => {
+            if (this.complete) {
+                return;
+            }
+            const countOfRenderedOptions = Math.round(this.panel.scrollHeight / this.selectItemHeightPx);
+            const infiniteScrollDistance = this.selectItemHeightPx * countOfRenderedOptions;
+            const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;
+            const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;
+            if ((scrolledDistance + threshold) >= infiniteScrollDistance) {
+                this.ngZone.run(infiniteScrollCallback);
+            }
+        });
+    }
+    destroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+}
+InfiniteScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfiniteScrollService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+InfiniteScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfiniteScrollService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfiniteScrollService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5maW5pdGUtc2Nyb2xsLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC9zcmMvbGliL2luZmluaXRlLXNjcm9sbC5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxVQUFVLEVBQVMsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFDLFNBQVMsRUFBRSxPQUFPLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFDeEMsT0FBTyxFQUFDLFlBQVksRUFBRSxTQUFTLEVBQUUsR0FBRyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7O0FBSzVELE1BQU0sT0FBTyxxQkFBcUI7SUFXOUIsWUFBb0IsTUFBYztRQUFkLFdBQU0sR0FBTixNQUFNLENBQVE7UUFUMUIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUNsQixpQkFBWSxHQUFHLEdBQUcsQ0FBQztRQUVuQixVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ1YsVUFBSyxHQUFHLENBQUMsQ0FBQztRQUNWLGVBQVUsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO0lBS3pDLENBQUM7SUFFRCxVQUFVLENBQUMsS0FBYyxFQUFFLGtCQUEwQixFQUFFLE1BSXREO1FBQ0csSUFBSSxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxZQUFZLEdBQUcsTUFBTSxDQUFDLFlBQVksQ0FBQztRQUN4QyxJQUFJLENBQUMsUUFBUSxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUM7UUFFaEMsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFDbkIsSUFBSSxDQUFDLGtCQUFrQixHQUFHLGtCQUFrQixDQUFDO1FBQzdDLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFRCxpQkFBaUI7UUFDYixJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsV0FBVyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFO1lBQ3RDLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1lBQ2YsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUM7U0FDbkQ7YUFBTTtZQUNILElBQUksQ0FBQyxLQUFLLEdBQUcsVUFBVSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztZQUN4QyxJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQztTQUNsQjtJQUNMLENBQUM7SUFFRCxzQkFBc0IsQ0FBQyxzQkFBa0M7UUFDckQsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsUUFBUSxDQUFDLENBQUMsSUFBSSxDQUNoQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxFQUMxQixZQUFZLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxFQUMvQixHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtZQUNWLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxLQUFLLEVBQUUsc0JBQXNCLENBQUMsQ0FBQztRQUMxRCxDQUFDLENBQUMsQ0FDTCxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ2xCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxLQUFVLEVBQUUsc0JBQWtDO1FBQzVELElBQUksQ0FBQyxNQUFNLENBQUMsaUJBQWlCLENBQUMsR0FBRyxFQUFFO1lBQy9CLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtnQkFDZixPQUFPO2FBQ1Y7WUFDRCxNQUFNLHNCQUFzQixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLENBQUM7WUFDN0YsTUFBTSxzQkFBc0IsR0FBRyxJQUFJLENBQUMsa0JBQWtCLEdBQUcsc0JBQXNCLENBQUM7WUFDaEYsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLEtBQUssS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsc0JBQXNCLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO1lBRXhGLE1BQU0sZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUM7WUFFMUUsSUFBSSxDQUFDLGdCQUFnQixHQUFHLFNBQVMsQ0FBQyxJQUFJLHNCQUFzQixFQUFFO2dCQUMxRCxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO2FBQzNDO1FBQ0wsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsT0FBTztRQUNILElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMvQixDQUFDOzttSEFwRVEscUJBQXFCO3VIQUFyQixxQkFBcUIsY0FGbEIsTUFBTTs0RkFFVCxxQkFBcUI7a0JBSGpDLFVBQVU7bUJBQUM7b0JBQ1IsVUFBVSxFQUFFLE1BQU07aUJBQ3JCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtJbmplY3RhYmxlLCBOZ1pvbmV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtmcm9tRXZlbnQsIFN1YmplY3R9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtkZWJvdW5jZVRpbWUsIHRha2VVbnRpbCwgdGFwfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbkBJbmplY3RhYmxlKHtcbiAgICBwcm92aWRlZEluOiAncm9vdCdcbn0pXG5leHBvcnQgY2xhc3MgSW5maW5pdGVTY3JvbGxTZXJ2aWNlIHtcblxuICAgIHByaXZhdGUgdGhyZXNob2xkID0gJzE1JSc7XG4gICAgcHJpdmF0ZSBkZWJvdW5jZVRpbWUgPSAxNTA7XG4gICAgcHJpdmF0ZSBjb21wbGV0ZSE6IGJvb2xlYW47XG4gICAgcHJpdmF0ZSB0aHJQeCA9IDA7XG4gICAgcHJpdmF0ZSB0aHJQYyA9IDA7XG4gICAgcHJpdmF0ZSBkZXN0cm95ZWQkID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcbiAgICBwcml2YXRlIHNlbGVjdEl0ZW1IZWlnaHRQeCE6IG51bWJlcjtcbiAgICBwcml2YXRlIHBhbmVsITogRWxlbWVudDtcblxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgbmdab25lOiBOZ1pvbmUpIHtcbiAgICB9XG5cbiAgICBpbml0aWFsaXplKHBhbmVsOiBFbGVtZW50LCBzZWxlY3RJdGVtSGVpZ2h0UHg6IG51bWJlciwgY29uZmlnOiB7XG4gICAgICAgIHRocmVzaG9sZDogc3RyaW5nLFxuICAgICAgICBkZWJvdW5jZVRpbWU6IG51bWJlcixcbiAgICAgICAgY29tcGxldGU6IGJvb2xlYW5cbiAgICB9KSB7XG4gICAgICAgIHRoaXMudGhyZXNob2xkID0gY29uZmlnLnRocmVzaG9sZDtcbiAgICAgICAgdGhpcy5kZWJvdW5jZVRpbWUgPSBjb25maWcuZGVib3VuY2VUaW1lO1xuICAgICAgICB0aGlzLmNvbXBsZXRlID0gY29uZmlnLmNvbXBsZXRlO1xuXG4gICAgICAgIHRoaXMucGFuZWwgPSBwYW5lbDtcbiAgICAgICAgdGhpcy5zZWxlY3RJdGVtSGVpZ2h0UHggPSBzZWxlY3RJdGVtSGVpZ2h0UHg7XG4gICAgICAgIHRoaXMuZXZhbHVhdGVUaHJlc2hvbGQoKTtcbiAgICB9XG5cbiAgICBldmFsdWF0ZVRocmVzaG9sZCgpIHtcbiAgICAgICAgaWYgKHRoaXMudGhyZXNob2xkLmxhc3RJbmRleE9mKCclJykgPiAtMSkge1xuICAgICAgICAgICAgdGhpcy50aHJQeCA9IDA7XG4gICAgICAgICAgICB0aGlzLnRoclBjID0gKHBhcnNlRmxvYXQodGhpcy50aHJlc2hvbGQpIC8gMTAwKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMudGhyUHggPSBwYXJzZUZsb2F0KHRoaXMudGhyZXNob2xkKTtcbiAgICAgICAgICAgIHRoaXMudGhyUGMgPSAwO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcmVnaXN0ZXJTY3JvbGxMaXN0ZW5lcihpbmZpbml0ZVNjcm9sbENhbGxiYWNrOiAoKSA9PiB2b2lkKSB7XG4gICAgICAgIGZyb21FdmVudCh0aGlzLnBhbmVsLCAnc2Nyb2xsJykucGlwZShcbiAgICAgICAgICAgIHRha2VVbnRpbCh0aGlzLmRlc3Ryb3llZCQpLFxuICAgICAgICAgICAgZGVib3VuY2VUaW1lKHRoaXMuZGVib3VuY2VUaW1lKSxcbiAgICAgICAgICAgIHRhcCgoZXZlbnQpID0+IHtcbiAgICAgICAgICAgICAgICB0aGlzLmhhbmRsZVNjcm9sbEV2ZW50KGV2ZW50LCBpbmZpbml0ZVNjcm9sbENhbGxiYWNrKTtcbiAgICAgICAgICAgIH0pXG4gICAgICAgICkuc3Vic2NyaWJlKCk7XG4gICAgfVxuXG4gICAgaGFuZGxlU2Nyb2xsRXZlbnQoZXZlbnQ6IGFueSwgaW5maW5pdGVTY3JvbGxDYWxsYmFjazogKCkgPT4gdm9pZCkge1xuICAgICAgICB0aGlzLm5nWm9uZS5ydW5PdXRzaWRlQW5ndWxhcigoKSA9PiB7XG4gICAgICAgICAgICBpZiAodGhpcy5jb21wbGV0ZSkge1xuICAgICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGNvbnN0IGNvdW50T2ZSZW5kZXJlZE9wdGlvbnMgPSBNYXRoLnJvdW5kKHRoaXMucGFuZWwuc2Nyb2xsSGVpZ2h0IC8gdGhpcy5zZWxlY3RJdGVtSGVpZ2h0UHgpO1xuICAgICAgICAgICAgY29uc3QgaW5maW5pdGVTY3JvbGxEaXN0YW5jZSA9IHRoaXMuc2VsZWN0SXRlbUhlaWdodFB4ICogY291bnRPZlJlbmRlcmVkT3B0aW9ucztcbiAgICAgICAgICAgIGNvbnN0IHRocmVzaG9sZCA9IHRoaXMudGhyUGMgIT09IDAgPyAoaW5maW5pdGVTY3JvbGxEaXN0YW5jZSAqIHRoaXMudGhyUGMpIDogdGhpcy50aHJQeDtcblxuICAgICAgICAgICAgY29uc3Qgc2Nyb2xsZWREaXN0YW5jZSA9IHRoaXMucGFuZWwuY2xpZW50SGVpZ2h0ICsgZXZlbnQudGFyZ2V0LnNjcm9sbFRvcDtcblxuICAgICAgICAgICAgaWYgKChzY3JvbGxlZERpc3RhbmNlICsgdGhyZXNob2xkKSA+PSBpbmZpbml0ZVNjcm9sbERpc3RhbmNlKSB7XG4gICAgICAgICAgICAgICAgdGhpcy5uZ1pvbmUucnVuKGluZmluaXRlU2Nyb2xsQ2FsbGJhY2spO1xuICAgICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBkZXN0cm95KCkge1xuICAgICAgICB0aGlzLmRlc3Ryb3llZCQubmV4dCgpO1xuICAgICAgICB0aGlzLmRlc3Ryb3llZCQuY29tcGxldGUoKTtcbiAgICB9XG59XG4iXX0=

package/esm2020/lib/mat-select-infinite-scroll.directive.mjs

@@ -1,79 +1,53 @@
 import { Directive, EventEmitter, Input, Output } from '@angular/core';
-import { debounceTime, takeUntil, tap } from 'rxjs/operators';
-import { fromEvent, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { InfiniteScrollService } from "./infinite-scroll.service";
+import { Subject } from "rxjs";
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/material/select";
+import * as i2 from "./infinite-scroll.service";
 /** The height of the select items in `em` units. */
 const SELECT_ITEM_HEIGHT_EM = 3;
 export class MatSelectInfiniteScrollDirective {
-    constructor(matSelect, ngZone) {
+    constructor(matSelect, infiniteScrollService) {
         this.matSelect = matSelect;
-        this.ngZone = ngZone;
+        this.infiniteScrollService = infiniteScrollService;
         this.threshold = '15%';
         this.debounceTime = 150;
         this.infiniteScroll = new EventEmitter();
-        this.thrPx = 0;
-        this.thrPc = 0;
-        this.singleOptionHeight = SELECT_ITEM_HEIGHT_EM;
         this.destroyed$ = new Subject();
     }
-    ngOnInit() {
-        this.evaluateThreshold();
-    }
     ngAfterViewInit() {
         this.matSelect.openedChange.pipe(takeUntil(this.destroyed$)).subscribe((opened) => {
             if (opened) {
-                this.panel = this.matSelect.panel.nativeElement;
-                this.singleOptionHeight = this.getSelectItemHeightPx();
-                this.registerScrollListener();
+                const panel = this.matSelect.panel.nativeElement;
+                const selectItemHeightPx = this.getSelectItemHeightPx(panel);
+                this.infiniteScrollService.initialize(panel, selectItemHeightPx, {
+                    threshold: this.threshold,
+                    debounceTime: this.debounceTime,
+                    complete: this.complete
+                });
+                this.infiniteScrollService.registerScrollListener(() => this.infiniteScroll.emit());
             }
         });
     }
+    getSelectItemHeightPx(panel) {
+        return parseFloat(getComputedStyle(panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
+    }
     ngOnDestroy() {
         this.destroyed$.next(true);
         this.destroyed$.complete();
-    }
-    evaluateThreshold() {
-        if (this.threshold.lastIndexOf('%') > -1) {
-            this.thrPx = 0;
-            this.thrPc = (parseFloat(this.threshold) / 100);
-        }
-        else {
-            this.thrPx = parseFloat(this.threshold);
-            this.thrPc = 0;
-        }
-    }
-    registerScrollListener() {
-        fromEvent(this.panel, 'scroll').pipe(takeUntil(this.destroyed$), debounceTime(this.debounceTime), tap((event) => {
-            this.handleScrollEvent(event);
-        })).subscribe();
-    }
-    handleScrollEvent(event) {
-        this.ngZone.runOutsideAngular(() => {
-            if (this.complete) {
-                return;
-            }
-            const countOfRenderedOptions = this.matSelect.options.length;
-            const infiniteScrollDistance = this.singleOptionHeight * countOfRenderedOptions;
-            const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;
-            const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;
-            if ((scrolledDistance + threshold) >= infiniteScrollDistance) {
-                this.ngZone.run(() => this.infiniteScroll.emit());
-            }
-        });
-    }
-    getSelectItemHeightPx() {
-        return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
+        this.infiniteScrollService.destroy();
     }
 }
-MatSelectInfiniteScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollDirective, deps: [{ token: i1.MatSelect }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-MatSelectInfiniteScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: MatSelectInfiniteScrollDirective, selector: "[msInfiniteScroll]", inputs: { threshold: "threshold", debounceTime: "debounceTime", complete: "complete" }, outputs: { infiniteScroll: "infiniteScroll" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
+MatSelectInfiniteScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollDirective, deps: [{ token: i1.MatSelect }, { token: i2.InfiniteScrollService }], target: i0.ɵɵFactoryTarget.Directive });
+MatSelectInfiniteScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MatSelectInfiniteScrollDirective, selector: "[msInfiniteScroll]", inputs: { threshold: "threshold", debounceTime: "debounceTime", complete: "complete" }, outputs: { infiniteScroll: "infiniteScroll" }, providers: [InfiniteScrollService], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[msInfiniteScroll]'
+                    selector: '[msInfiniteScroll]',
+                    providers: [InfiniteScrollService]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.MatSelect }, { type: i0.NgZone }]; }, propDecorators: { threshold: [{
+        }], ctorParameters: function () { return [{ type: i1.MatSelect }, { type: i2.InfiniteScrollService }]; }, propDecorators: { threshold: [{
                 type: Input
             }], debounceTime: [{
                 type: Input
@@ -82,4 +56,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
             }], infiniteScroll: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctbWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwvc3JjL2xpYi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBNkIsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRS9HLE9BQU8sRUFBQyxZQUFZLEVBQUUsU0FBUyxFQUFFLEdBQUcsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQzVELE9BQU8sRUFBQyxTQUFTLEVBQUUsT0FBTyxFQUFDLE1BQU0sTUFBTSxDQUFDOzs7QUFFeEMsb0RBQW9EO0FBQ3BELE1BQU0scUJBQXFCLEdBQUcsQ0FBQyxDQUFDO0FBS2hDLE1BQU0sT0FBTyxnQ0FBZ0M7SUFjM0MsWUFBb0IsU0FBb0IsRUFBVSxNQUFjO1FBQTVDLGNBQVMsR0FBVCxTQUFTLENBQVc7UUFBVSxXQUFNLEdBQU4sTUFBTSxDQUFRO1FBWnZELGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIsaUJBQVksR0FBRyxHQUFHLENBQUM7UUFFbEIsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBRzVDLFVBQUssR0FBRyxDQUFDLENBQUM7UUFDVixVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ1YsdUJBQWtCLEdBQUcscUJBQXFCLENBQUM7UUFFM0MsZUFBVSxHQUFHLElBQUksT0FBTyxFQUFXLENBQUM7SUFHNUMsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztJQUMzQixDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxTQUFTLENBQUMsWUFBWSxDQUFDLElBQUksQ0FDOUIsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFV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QUdVLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLGNBQWM7c0JBQXZCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0FmdGVyVmlld0luaXQsIERpcmVjdGl2ZSwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgTmdab25lLCBPbkRlc3Ryb3ksIE9uSW5pdCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7TWF0U2VsZWN0fSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zZWxlY3QnO1xuaW1wb3J0IHtkZWJvdW5jZVRpbWUsIHRha2VVbnRpbCwgdGFwfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQge2Zyb21FdmVudCwgU3ViamVjdH0gZnJvbSAncnhqcyc7XG5cbi8qKiBUaGUgaGVpZ2h0IG9mIHRoZSBzZWxlY3QgaXRlbXMgaW4gYGVtYCB1bml0cy4gKi9cbmNvbnN0IFNFTEVDVF9JVEVNX0hFSUdIVF9FTSA9IDM7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1ttc0luZmluaXRlU2Nyb2xsXSdcbn0pXG5leHBvcnQgY2xhc3MgTWF0U2VsZWN0SW5maW5pdGVTY3JvbGxEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSwgQWZ0ZXJWaWV3SW5pdCB7XG5cbiAgQElucHV0KCkgdGhyZXNob2xkID0gJzE1JSc7XG4gIEBJbnB1dCgpIGRlYm91bmNlVGltZSA9IDE1MDtcbiAgQElucHV0KCkgY29tcGxldGUhOiBib29sZWFuO1xuICBAT3V0cHV0KCkgaW5maW5pdGVTY3JvbGwgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgcHJpdmF0ZSBwYW5lbCE6IEVsZW1lbnQ7XG4gIHByaXZhdGUgdGhyUHggPSAwO1xuICBwcml2YXRlIHRoclBjID0gMDtcbiAgcHJpdmF0ZSBzaW5nbGVPcHRpb25IZWlnaHQgPSBTRUxFQ1RfSVRFTV9IRUlHSFRfRU07XG5cbiAgcHJpdmF0ZSBkZXN0cm95ZWQkID0gbmV3IFN1YmplY3Q8Ym9vbGVhbj4oKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIG1hdFNlbGVjdDogTWF0U2VsZWN0LCBwcml2YXRlIG5nWm9uZTogTmdab25lKSB7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmV2YWx1YXRlVGhyZXNob2xkKCk7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgdGhpcy5tYXRTZWxlY3Qub3BlbmVkQ2hhbmdlLnBpcGUoXG4gICAgICB0YWtlVW50aWwodGhpcy5kZXN0cm95ZWQkKVxuICAgICkuc3Vic2NyaWJlKChvcGVuZWQpID0+IHtcbiAgICAgIGlmIChvcGVuZWQpIHtcbiAgICAgICAgdGhpcy5wYW5lbCA9IHRoaXMubWF0U2VsZWN0LnBhbmVsLm5hdGl2ZUVsZW1lbnQ7XG4gICAgICAgIHRoaXMuc2luZ2xlT3B0aW9uSGVpZ2h0ID0gdGhpcy5nZXRTZWxlY3RJdGVtSGVpZ2h0UHgoKTtcbiAgICAgICAgdGhpcy5yZWdpc3RlclNjcm9sbExpc3RlbmVyKCk7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmRlc3Ryb3llZCQubmV4dCh0cnVlKTtcbiAgICB0aGlzLmRlc3Ryb3llZCQuY29tcGxldGUoKTtcbiAgfVxuXG4gIGV2YWx1YXRlVGhyZXNob2xkKCkge1xuICAgIGlmICh0aGlzLnRocmVzaG9sZC5sYXN0SW5kZXhPZignJScpID4gLTEpIHtcbiAgICAgIHRoaXMudGhyUHggPSAwO1xuICAgICAgdGhpcy50aHJQYyA9IChwYXJzZUZsb2F0KHRoaXMudGhyZXNob2xkKSAvIDEwMCk7XG5cbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy50aHJQeCA9IHBhcnNlRmxvYXQodGhpcy50aHJlc2hvbGQpO1xuICAgICAgdGhpcy50aHJQYyA9IDA7XG4gICAgfVxuICB9XG5cbiAgcmVnaXN0ZXJTY3JvbGxMaXN0ZW5lcigpIHtcbiAgICBmcm9tRXZlbnQodGhpcy5wYW5lbCwgJ3Njcm9sbCcpLnBpcGUoXG4gICAgICB0YWtlVW50aWwodGhpcy5kZXN0cm95ZWQkKSxcbiAgICAgIGRlYm91bmNlVGltZSh0aGlzLmRlYm91bmNlVGltZSksXG4gICAgICB0YXAoKGV2ZW50KSA9PiB7XG4gICAgICAgIHRoaXMuaGFuZGxlU2Nyb2xsRXZlbnQoZXZlbnQpO1xuICAgICAgfSlcbiAgICApLnN1YnNjcmliZSgpO1xuICB9XG5cbiAgaGFuZGxlU2Nyb2xsRXZlbnQoZXZlbnQ6IGFueSkge1xuICAgIHRoaXMubmdab25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgIGlmICh0aGlzLmNvbXBsZXRlKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cbiAgICAgIGNvbnN0IGNvdW50T2ZSZW5kZXJlZE9wdGlvbnMgPSB0aGlzLm1hdFNlbGVjdC5vcHRpb25zLmxlbmd0aDtcbiAgICAgIGNvbnN0IGluZmluaXRlU2Nyb2xsRGlzdGFuY2UgPSB0aGlzLnNpbmdsZU9wdGlvbkhlaWdodCAqIGNvdW50T2ZSZW5kZXJlZE9wdGlvbnM7XG4gICAgICBjb25zdCB0aHJlc2hvbGQgPSB0aGlzLnRoclBjICE9PSAwID8gKGluZmluaXRlU2Nyb2xsRGlzdGFuY2UgKiB0aGlzLnRoclBjKSA6IHRoaXMudGhyUHg7XG5cbiAgICAgIGNvbnN0IHNjcm9sbGVkRGlzdGFuY2UgPSB0aGlzLnBhbmVsLmNsaWVudEhlaWdodCArIGV2ZW50LnRhcmdldC5zY3JvbGxUb3A7XG5cbiAgICAgIGlmICgoc2Nyb2xsZWREaXN0YW5jZSArIHRocmVzaG9sZCkgPj0gaW5maW5pdGVTY3JvbGxEaXN0YW5jZSkge1xuICAgICAgICB0aGlzLm5nWm9uZS5ydW4oKCkgPT4gdGhpcy5pbmZpbml0ZVNjcm9sbC5lbWl0KCkpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG5cbiAgZ2V0U2VsZWN0SXRlbUhlaWdodFB4KCk6IG51bWJlciB7XG4gICAgcmV0dXJuIHBhcnNlRmxvYXQoZ2V0Q29tcHV0ZWRTdHlsZSh0aGlzLnBhbmVsKS5mb250U2l6ZSkgKiBTRUxFQ1RfSVRFTV9IRUlHSFRfRU07XG4gIH1cblxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctbWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwvc3JjL2xpYi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBNkIsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRS9HLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUN6QyxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUNoRSxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sTUFBTSxDQUFDOzs7O0FBRTdCLG9EQUFvRDtBQUNwRCxNQUFNLHFCQUFxQixHQUFHLENBQUMsQ0FBQztBQU1oQyxNQUFNLE9BQU8sZ0NBQWdDO0lBU3pDLFlBQXNCLFNBQW9CLEVBQVUscUJBQTRDO1FBQTFFLGNBQVMsR0FBVCxTQUFTLENBQVc7UUFBVSwwQkFBcUIsR0FBckIscUJBQXFCLENBQXVCO1FBUHZGLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIsaUJBQVksR0FBRyxHQUFHLENBQUM7UUFFbEIsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBRTVDLGVBQVUsR0FBRyxJQUFJLE9BQU8sRUFBVyxDQUFDO0lBRzVDLENBQUM7SUFHRCxlQUFlO1FBQ1gsSUFBSSxDQUFDLFNBQVMsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUM1QixTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUM3QixDQUFDLFNBQVMsQ0FBQyxDQUFDLE1BQU0sRUFBRSxFQUFFO1lBQ25CLElBQUksTUFBTSxFQUFFO2dCQUNSLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQztnQkFDakQsTUFBTSxrQkFBa0IsR0FBRyxJQUFJLENBQUMscUJBQXFCLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQzdELElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxVQUFVLENBQUMsS0FBSyxFQUFFLGtCQUFrQixFQUFFO29CQUM3RCxTQUFTLEVBQUUsSUFBSSxDQUFDLFNBQVM7b0JBQ3pCLFlBQVksRUFBRSxJQUFJLENBQUMsWUFBWTtvQkFDL0IsUUFBUSxFQUFFLElBQUksQ0FBQyxRQUFRO2lCQUMxQixDQUFDLENBQUM7Z0JBRUgsSUFBSSxDQUFDLHFCQUFxQixDQUFDLHNCQUFzQixDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQzthQUN2RjtRQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELHFCQUFxQixDQUFDLEtBQWM7UUFDaEMsT0FBTyxVQUFVLENBQUMsZ0JBQWdCLENBQUMsS0FBSyxDQUFDLENBQUMsUUFBUSxDQUFDLEdBQUcscUJBQXFCLENBQUM7SUFDaEYsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUMzQixJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBRTNCLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUN6QyxDQUFDOzs4SEF4Q1EsZ0NBQWdDO2tIQUFoQyxnQ0FBZ0Msb0xBRjlCLENBQUMscUJBQXFCLENBQUM7NEZBRXpCLGdDQUFnQztrQkFKNUMsU0FBUzttQkFBQztvQkFDUCxRQUFRLEVBQUUsb0JBQW9CO29CQUM5QixTQUFTLEVBQUUsQ0FBQyxxQkFBcUIsQ0FBQztpQkFDckM7b0lBR1ksU0FBUztzQkFBakIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0ksY0FBYztzQkFBdkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7QWZ0ZXJWaWV3SW5pdCwgRGlyZWN0aXZlLCBFdmVudEVtaXR0ZXIsIElucHV0LCBOZ1pvbmUsIE9uRGVzdHJveSwgT25Jbml0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtNYXRTZWxlY3R9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3NlbGVjdCc7XG5pbXBvcnQge3Rha2VVbnRpbH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHtJbmZpbml0ZVNjcm9sbFNlcnZpY2V9IGZyb20gXCIuL2luZmluaXRlLXNjcm9sbC5zZXJ2aWNlXCI7XG5pbXBvcnQge1N1YmplY3R9IGZyb20gXCJyeGpzXCI7XG5cbi8qKiBUaGUgaGVpZ2h0IG9mIHRoZSBzZWxlY3QgaXRlbXMgaW4gYGVtYCB1bml0cy4gKi9cbmNvbnN0IFNFTEVDVF9JVEVNX0hFSUdIVF9FTSA9IDM7XG5cbkBEaXJlY3RpdmUoe1xuICAgIHNlbGVjdG9yOiAnW21zSW5maW5pdGVTY3JvbGxdJyxcbiAgICBwcm92aWRlcnM6IFtJbmZpbml0ZVNjcm9sbFNlcnZpY2VdXG59KVxuZXhwb3J0IGNsYXNzIE1hdFNlbGVjdEluZmluaXRlU2Nyb2xsRGlyZWN0aXZlIGltcGxlbWVudHMgT25EZXN0cm95LCBBZnRlclZpZXdJbml0IHtcblxuICAgIEBJbnB1dCgpIHRocmVzaG9sZCA9ICcxNSUnO1xuICAgIEBJbnB1dCgpIGRlYm91bmNlVGltZSA9IDE1MDtcbiAgICBASW5wdXQoKSBjb21wbGV0ZSE6IGJvb2xlYW47XG4gICAgQE91dHB1dCgpIGluZmluaXRlU2Nyb2xsID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gICAgcHJpdmF0ZSBkZXN0cm95ZWQkID0gbmV3IFN1YmplY3Q8Ym9vbGVhbj4oKTtcblxuICAgIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBtYXRTZWxlY3Q6IE1hdFNlbGVjdCwgcHJpdmF0ZSBpbmZpbml0ZVNjcm9sbFNlcnZpY2U6IEluZmluaXRlU2Nyb2xsU2VydmljZSkge1xuICAgIH1cblxuXG4gICAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgICAgICB0aGlzLm1hdFNlbGVjdC5vcGVuZWRDaGFuZ2UucGlwZShcbiAgICAgICAgICAgIHRha2VVbnRpbCh0aGlzLmRlc3Ryb3llZCQpXG4gICAgICAgICkuc3Vic2NyaWJlKChvcGVuZWQpID0+IHtcbiAgICAgICAgICAgIGlmIChvcGVuZWQpIHtcbiAgICAgICAgICAgICAgICBjb25zdCBwYW5lbCA9IHRoaXMubWF0U2VsZWN0LnBhbmVsLm5hdGl2ZUVsZW1lbnQ7XG4gICAgICAgICAgICAgICAgY29uc3Qgc2VsZWN0SXRlbUhlaWdodFB4ID0gdGhpcy5nZXRTZWxlY3RJdGVtSGVpZ2h0UHgocGFuZWwpO1xuICAgICAgICAgICAgICAgIHRoaXMuaW5maW5pdGVTY3JvbGxTZXJ2aWNlLmluaXRpYWxpemUocGFuZWwsIHNlbGVjdEl0ZW1IZWlnaHRQeCwge1xuICAgICAgICAgICAgICAgICAgICB0aHJlc2hvbGQ6IHRoaXMudGhyZXNob2xkLFxuICAgICAgICAgICAgICAgICAgICBkZWJvdW5jZVRpbWU6IHRoaXMuZGVib3VuY2VUaW1lLFxuICAgICAgICAgICAgICAgICAgICBjb21wbGV0ZTogdGhpcy5jb21wbGV0ZVxuICAgICAgICAgICAgICAgIH0pO1xuXG4gICAgICAgICAgICAgICAgdGhpcy5pbmZpbml0ZVNjcm9sbFNlcnZpY2UucmVnaXN0ZXJTY3JvbGxMaXN0ZW5lcigoKSA9PiB0aGlzLmluZmluaXRlU2Nyb2xsLmVtaXQoKSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIGdldFNlbGVjdEl0ZW1IZWlnaHRQeChwYW5lbDogRWxlbWVudCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiBwYXJzZUZsb2F0KGdldENvbXB1dGVkU3R5bGUocGFuZWwpLmZvbnRTaXplKSAqIFNFTEVDVF9JVEVNX0hFSUdIVF9FTTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpIHtcbiAgICAgICAgdGhpcy5kZXN0cm95ZWQkLm5leHQodHJ1ZSk7XG4gICAgICAgIHRoaXMuZGVzdHJveWVkJC5jb21wbGV0ZSgpO1xuXG4gICAgICAgIHRoaXMuaW5maW5pdGVTY3JvbGxTZXJ2aWNlLmRlc3Ryb3koKTtcbiAgICB9XG5cbn1cbiJdfQ==

package/esm2020/lib/mat-select-infinite-scroll.module.mjs

@@ -4,17 +4,17 @@ import { MatSelectModule } from '@angular/material/select';
 import * as i0 from "@angular/core";
 export class MatSelectInfiniteScrollModule {
 }
-MatSelectInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MatSelectInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, declarations: [MatSelectInfiniteScrollDirective], imports: [MatSelectModule], exports: [MatSelectInfiniteScrollDirective] });
-MatSelectInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, imports: [MatSelectModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, decorators: [{
+MatSelectInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MatSelectInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollModule, declarations: [MatSelectInfiniteScrollDirective], imports: [MatSelectModule], exports: [MatSelectInfiniteScrollDirective] });
+MatSelectInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollModule, imports: [MatSelectModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatSelectInfiniteScrollDirective],
                     imports: [
-                        MatSelectModule
+                        MatSelectModule,
                     ],
                     exports: [MatSelectInfiniteScrollDirective]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctbWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwvc3JjL2xpYi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQUMsZ0NBQWdDLEVBQUMsTUFBTSx3Q0FBd0MsQ0FBQztBQUN4RixPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0sMEJBQTBCLENBQUM7O0FBU3pELE1BQU0sT0FBTyw2QkFBNkI7OzBIQUE3Qiw2QkFBNkI7MkhBQTdCLDZCQUE2QixpQkFOekIsZ0NBQWdDLGFBRTdDLGVBQWUsYUFFUCxnQ0FBZ0M7MkhBRS9CLDZCQUE2QixZQUp0QyxlQUFlOzJGQUlOLDZCQUE2QjtrQkFQekMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxnQ0FBZ0MsQ0FBQztvQkFDaEQsT0FBTyxFQUFFO3dCQUNQLGVBQWU7cUJBQ2hCO29CQUNELE9BQU8sRUFBRSxDQUFDLGdDQUFnQyxDQUFDO2lCQUM1QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtNYXRTZWxlY3RJbmZpbml0ZVNjcm9sbERpcmVjdGl2ZX0gZnJvbSAnLi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5kaXJlY3RpdmUnO1xuaW1wb3J0IHtNYXRTZWxlY3RNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3NlbGVjdCc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW01hdFNlbGVjdEluZmluaXRlU2Nyb2xsRGlyZWN0aXZlXSxcbiAgaW1wb3J0czogW1xuICAgIE1hdFNlbGVjdE1vZHVsZVxuICBdLFxuICBleHBvcnRzOiBbTWF0U2VsZWN0SW5maW5pdGVTY3JvbGxEaXJlY3RpdmVdXG59KVxuZXhwb3J0IGNsYXNzIE1hdFNlbGVjdEluZmluaXRlU2Nyb2xsTW9kdWxlIHtcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctbWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwvc3JjL2xpYi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQUMsZ0NBQWdDLEVBQUMsTUFBTSx3Q0FBd0MsQ0FBQztBQUN4RixPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0sMEJBQTBCLENBQUM7O0FBU3pELE1BQU0sT0FBTyw2QkFBNkI7OzJIQUE3Qiw2QkFBNkI7NEhBQTdCLDZCQUE2QixpQkFOdkIsZ0NBQWdDLGFBRTNDLGVBQWUsYUFFVCxnQ0FBZ0M7NEhBRWpDLDZCQUE2QixZQUpsQyxlQUFlOzRGQUlWLDZCQUE2QjtrQkFQekMsUUFBUTttQkFBQztvQkFDTixZQUFZLEVBQUUsQ0FBQyxnQ0FBZ0MsQ0FBQztvQkFDaEQsT0FBTyxFQUFFO3dCQUNMLGVBQWU7cUJBQ2xCO29CQUNELE9BQU8sRUFBRSxDQUFDLGdDQUFnQyxDQUFDO2lCQUM5QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtNYXRTZWxlY3RJbmZpbml0ZVNjcm9sbERpcmVjdGl2ZX0gZnJvbSAnLi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5kaXJlY3RpdmUnO1xuaW1wb3J0IHtNYXRTZWxlY3RNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3NlbGVjdCc7XG5cbkBOZ01vZHVsZSh7XG4gICAgZGVjbGFyYXRpb25zOiBbTWF0U2VsZWN0SW5maW5pdGVTY3JvbGxEaXJlY3RpdmVdLFxuICAgIGltcG9ydHM6IFtcbiAgICAgICAgTWF0U2VsZWN0TW9kdWxlLFxuICAgIF0sXG4gICAgZXhwb3J0czogW01hdFNlbGVjdEluZmluaXRlU2Nyb2xsRGlyZWN0aXZlXVxufSlcbmV4cG9ydCBjbGFzcyBNYXRTZWxlY3RJbmZpbml0ZVNjcm9sbE1vZHVsZSB7XG59XG4iXX0=

package/fesm2015/ng-mat-select-infinite-scroll.mjs

@@ -1,40 +1,27 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Input, Output, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Directive, Input, Output, NgModule } from '@angular/core';
 import { takeUntil, debounceTime, tap } from 'rxjs/operators';
 import { Subject, fromEvent } from 'rxjs';
 import * as i1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 
-/** The height of the select items in `em` units. */
-const SELECT_ITEM_HEIGHT_EM = 3;
-class MatSelectInfiniteScrollDirective {
-    constructor(matSelect, ngZone) {
-        this.matSelect = matSelect;
+class InfiniteScrollService {
+    constructor(ngZone) {
         this.ngZone = ngZone;
         this.threshold = '15%';
         this.debounceTime = 150;
-        this.infiniteScroll = new EventEmitter();
         this.thrPx = 0;
         this.thrPc = 0;
-        this.singleOptionHeight = SELECT_ITEM_HEIGHT_EM;
         this.destroyed$ = new Subject();
     }
-    ngOnInit() {
+    initialize(panel, selectItemHeightPx, config) {
+        this.threshold = config.threshold;
+        this.debounceTime = config.debounceTime;
+        this.complete = config.complete;
+        this.panel = panel;
+        this.selectItemHeightPx = selectItemHeightPx;
         this.evaluateThreshold();
     }
-    ngAfterViewInit() {
-        this.matSelect.openedChange.pipe(takeUntil(this.destroyed$)).subscribe((opened) => {
-            if (opened) {
-                this.panel = this.matSelect.panel.nativeElement;
-                this.singleOptionHeight = this.getSelectItemHeightPx();
-                this.registerScrollListener();
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.destroyed$.next(true);
-        this.destroyed$.complete();
-    }
     evaluateThreshold() {
         if (this.threshold.lastIndexOf('%') > -1) {
             this.thrPx = 0;
@@ -45,37 +32,82 @@ class MatSelectInfiniteScrollDirective {
             this.thrPc = 0;
         }
     }
-    registerScrollListener() {
+    registerScrollListener(infiniteScrollCallback) {
         fromEvent(this.panel, 'scroll').pipe(takeUntil(this.destroyed$), debounceTime(this.debounceTime), tap((event) => {
-            this.handleScrollEvent(event);
+            this.handleScrollEvent(event, infiniteScrollCallback);
         })).subscribe();
     }
-    handleScrollEvent(event) {
+    handleScrollEvent(event, infiniteScrollCallback) {
         this.ngZone.runOutsideAngular(() => {
             if (this.complete) {
                 return;
             }
-            const countOfRenderedOptions = this.matSelect.options.length;
-            const infiniteScrollDistance = this.singleOptionHeight * countOfRenderedOptions;
+            const countOfRenderedOptions = Math.round(this.panel.scrollHeight / this.selectItemHeightPx);
+            const infiniteScrollDistance = this.selectItemHeightPx * countOfRenderedOptions;
             const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;
             const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;
             if ((scrolledDistance + threshold) >= infiniteScrollDistance) {
-                this.ngZone.run(() => this.infiniteScroll.emit());
+                this.ngZone.run(infiniteScrollCallback);
+            }
+        });
+    }
+    destroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+}
+InfiniteScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfiniteScrollService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+InfiniteScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfiniteScrollService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfiniteScrollService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+
+/** The height of the select items in `em` units. */
+const SELECT_ITEM_HEIGHT_EM = 3;
+class MatSelectInfiniteScrollDirective {
+    constructor(matSelect, infiniteScrollService) {
+        this.matSelect = matSelect;
+        this.infiniteScrollService = infiniteScrollService;
+        this.threshold = '15%';
+        this.debounceTime = 150;
+        this.infiniteScroll = new EventEmitter();
+        this.destroyed$ = new Subject();
+    }
+    ngAfterViewInit() {
+        this.matSelect.openedChange.pipe(takeUntil(this.destroyed$)).subscribe((opened) => {
+            if (opened) {
+                const panel = this.matSelect.panel.nativeElement;
+                const selectItemHeightPx = this.getSelectItemHeightPx(panel);
+                this.infiniteScrollService.initialize(panel, selectItemHeightPx, {
+                    threshold: this.threshold,
+                    debounceTime: this.debounceTime,
+                    complete: this.complete
+                });
+                this.infiniteScrollService.registerScrollListener(() => this.infiniteScroll.emit());
             }
         });
     }
-    getSelectItemHeightPx() {
-        return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
+    getSelectItemHeightPx(panel) {
+        return parseFloat(getComputedStyle(panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
+    }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
+        this.destroyed$.complete();
+        this.infiniteScrollService.destroy();
     }
 }
-MatSelectInfiniteScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollDirective, deps: [{ token: i1.MatSelect }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-MatSelectInfiniteScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: MatSelectInfiniteScrollDirective, selector: "[msInfiniteScroll]", inputs: { threshold: "threshold", debounceTime: "debounceTime", complete: "complete" }, outputs: { infiniteScroll: "infiniteScroll" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
+MatSelectInfiniteScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollDirective, deps: [{ token: i1.MatSelect }, { token: InfiniteScrollService }], target: i0.ɵɵFactoryTarget.Directive });
+MatSelectInfiniteScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MatSelectInfiniteScrollDirective, selector: "[msInfiniteScroll]", inputs: { threshold: "threshold", debounceTime: "debounceTime", complete: "complete" }, outputs: { infiniteScroll: "infiniteScroll" }, providers: [InfiniteScrollService], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[msInfiniteScroll]'
+                    selector: '[msInfiniteScroll]',
+                    providers: [InfiniteScrollService]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.MatSelect }, { type: i0.NgZone }]; }, propDecorators: { threshold: [{
+        }], ctorParameters: function () { return [{ type: i1.MatSelect }, { type: InfiniteScrollService }]; }, propDecorators: { threshold: [{
                 type: Input
             }], debounceTime: [{
                 type: Input
@@ -87,15 +119,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
 
 class MatSelectInfiniteScrollModule {
 }
-MatSelectInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MatSelectInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, declarations: [MatSelectInfiniteScrollDirective], imports: [MatSelectModule], exports: [MatSelectInfiniteScrollDirective] });
-MatSelectInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, imports: [MatSelectModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, decorators: [{
+MatSelectInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MatSelectInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollModule, declarations: [MatSelectInfiniteScrollDirective], imports: [MatSelectModule], exports: [MatSelectInfiniteScrollDirective] });
+MatSelectInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollModule, imports: [MatSelectModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatSelectInfiniteScrollDirective],
                     imports: [
-                        MatSelectModule
+                        MatSelectModule,
                     ],
                     exports: [MatSelectInfiniteScrollDirective]
                 }]

package/fesm2015/ng-mat-select-infinite-scroll.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-mat-select-infinite-scroll.mjs","sources":["../../../projects/ng-mat-select-infinite-scroll/src/lib/mat-select-infinite-scroll.directive.ts","../../../projects/ng-mat-select-infinite-scroll/src/lib/mat-select-infinite-scroll.module.ts","../../../projects/ng-mat-select-infinite-scroll/src/public-api.ts","../../../projects/ng-mat-select-infinite-scroll/src/ng-mat-select-infinite-scroll.ts"],"sourcesContent":["import {AfterViewInit, Directive, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output} from '@angular/core';\nimport {MatSelect} from '@angular/material/select';\nimport {debounceTime, takeUntil, tap} from 'rxjs/operators';\nimport {fromEvent, Subject} from 'rxjs';\n\n/** The height of the select items in `em` units. */\nconst SELECT_ITEM_HEIGHT_EM = 3;\n\n@Directive({\n  selector: '[msInfiniteScroll]'\n})\nexport class MatSelectInfiniteScrollDirective implements OnInit, OnDestroy, AfterViewInit {\n\n  @Input() threshold = '15%';\n  @Input() debounceTime = 150;\n  @Input() complete!: boolean;\n  @Output() infiniteScroll = new EventEmitter<void>();\n\n  private panel!: Element;\n  private thrPx = 0;\n  private thrPc = 0;\n  private singleOptionHeight = SELECT_ITEM_HEIGHT_EM;\n\n  private destroyed$ = new Subject<boolean>();\n\n  constructor(private matSelect: MatSelect, private ngZone: NgZone) {\n  }\n\n  ngOnInit() {\n    this.evaluateThreshold();\n  }\n\n  ngAfterViewInit() {\n    this.matSelect.openedChange.pipe(\n      takeUntil(this.destroyed$)\n    ).subscribe((opened) => {\n      if (opened) {\n        this.panel = this.matSelect.panel.nativeElement;\n        this.singleOptionHeight = this.getSelectItemHeightPx();\n        this.registerScrollListener();\n      }\n    });\n  }\n\n  ngOnDestroy() {\n    this.destroyed$.next(true);\n    this.destroyed$.complete();\n  }\n\n  evaluateThreshold() {\n    if (this.threshold.lastIndexOf('%') > -1) {\n      this.thrPx = 0;\n      this.thrPc = (parseFloat(this.threshold) / 100);\n\n    } else {\n      this.thrPx = parseFloat(this.threshold);\n      this.thrPc = 0;\n    }\n  }\n\n  registerScrollListener() {\n    fromEvent(this.panel, 'scroll').pipe(\n      takeUntil(this.destroyed$),\n      debounceTime(this.debounceTime),\n      tap((event) => {\n        this.handleScrollEvent(event);\n      })\n    ).subscribe();\n  }\n\n  handleScrollEvent(event: any) {\n    this.ngZone.runOutsideAngular(() => {\n      if (this.complete) {\n        return;\n      }\n      const countOfRenderedOptions = this.matSelect.options.length;\n      const infiniteScrollDistance = this.singleOptionHeight * countOfRenderedOptions;\n      const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;\n\n      const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;\n\n      if ((scrolledDistance + threshold) >= infiniteScrollDistance) {\n        this.ngZone.run(() => this.infiniteScroll.emit());\n      }\n    });\n  }\n\n  getSelectItemHeightPx(): number {\n    return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;\n  }\n\n}\n","import {NgModule} from '@angular/core';\nimport {MatSelectInfiniteScrollDirective} from './mat-select-infinite-scroll.directive';\nimport {MatSelectModule} from '@angular/material/select';\n\n@NgModule({\n  declarations: [MatSelectInfiniteScrollDirective],\n  imports: [\n    MatSelectModule\n  ],\n  exports: [MatSelectInfiniteScrollDirective]\n})\nexport class MatSelectInfiniteScrollModule {\n}\n","/*\n * Public API Surface of ng-mat-select-infinite-scroll\n */\n\nexport * from './lib/mat-select-infinite-scroll.directive';\nexport * from './lib/mat-select-infinite-scroll.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-mat-select-infinite-scroll.mjs","sources":["../../../projects/ng-mat-select-infinite-scroll/src/lib/infinite-scroll.service.ts","../../../projects/ng-mat-select-infinite-scroll/src/lib/mat-select-infinite-scroll.directive.ts","../../../projects/ng-mat-select-infinite-scroll/src/lib/mat-select-infinite-scroll.module.ts","../../../projects/ng-mat-select-infinite-scroll/src/public-api.ts","../../../projects/ng-mat-select-infinite-scroll/src/ng-mat-select-infinite-scroll.ts"],"sourcesContent":["import {Injectable, NgZone} from '@angular/core';\nimport {fromEvent, Subject} from 'rxjs';\nimport {debounceTime, takeUntil, tap} from 'rxjs/operators';\n\n@Injectable({\n    providedIn: 'root'\n})\nexport class InfiniteScrollService {\n\n    private threshold = '15%';\n    private debounceTime = 150;\n    private complete!: boolean;\n    private thrPx = 0;\n    private thrPc = 0;\n    private destroyed$ = new Subject<void>();\n    private selectItemHeightPx!: number;\n    private panel!: Element;\n\n    constructor(private ngZone: NgZone) {\n    }\n\n    initialize(panel: Element, selectItemHeightPx: number, config: {\n        threshold: string,\n        debounceTime: number,\n        complete: boolean\n    }) {\n        this.threshold = config.threshold;\n        this.debounceTime = config.debounceTime;\n        this.complete = config.complete;\n\n        this.panel = panel;\n        this.selectItemHeightPx = selectItemHeightPx;\n        this.evaluateThreshold();\n    }\n\n    evaluateThreshold() {\n        if (this.threshold.lastIndexOf('%') > -1) {\n            this.thrPx = 0;\n            this.thrPc = (parseFloat(this.threshold) / 100);\n        } else {\n            this.thrPx = parseFloat(this.threshold);\n            this.thrPc = 0;\n        }\n    }\n\n    registerScrollListener(infiniteScrollCallback: () => void) {\n        fromEvent(this.panel, 'scroll').pipe(\n            takeUntil(this.destroyed$),\n            debounceTime(this.debounceTime),\n            tap((event) => {\n                this.handleScrollEvent(event, infiniteScrollCallback);\n            })\n        ).subscribe();\n    }\n\n    handleScrollEvent(event: any, infiniteScrollCallback: () => void) {\n        this.ngZone.runOutsideAngular(() => {\n            if (this.complete) {\n                return;\n            }\n            const countOfRenderedOptions = Math.round(this.panel.scrollHeight / this.selectItemHeightPx);\n            const infiniteScrollDistance = this.selectItemHeightPx * countOfRenderedOptions;\n            const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;\n\n            const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;\n\n            if ((scrolledDistance + threshold) >= infiniteScrollDistance) {\n                this.ngZone.run(infiniteScrollCallback);\n            }\n        });\n    }\n\n    destroy() {\n        this.destroyed$.next();\n        this.destroyed$.complete();\n    }\n}\n","import {AfterViewInit, Directive, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output} from '@angular/core';\nimport {MatSelect} from '@angular/material/select';\nimport {takeUntil} from 'rxjs/operators';\nimport {InfiniteScrollService} from \"./infinite-scroll.service\";\nimport {Subject} from \"rxjs\";\n\n/** The height of the select items in `em` units. */\nconst SELECT_ITEM_HEIGHT_EM = 3;\n\n@Directive({\n    selector: '[msInfiniteScroll]',\n    providers: [InfiniteScrollService]\n})\nexport class MatSelectInfiniteScrollDirective implements OnDestroy, AfterViewInit {\n\n    @Input() threshold = '15%';\n    @Input() debounceTime = 150;\n    @Input() complete!: boolean;\n    @Output() infiniteScroll = new EventEmitter<void>();\n\n    private destroyed$ = new Subject<boolean>();\n\n    constructor(protected matSelect: MatSelect, private infiniteScrollService: InfiniteScrollService) {\n    }\n\n\n    ngAfterViewInit() {\n        this.matSelect.openedChange.pipe(\n            takeUntil(this.destroyed$)\n        ).subscribe((opened) => {\n            if (opened) {\n                const panel = this.matSelect.panel.nativeElement;\n                const selectItemHeightPx = this.getSelectItemHeightPx(panel);\n                this.infiniteScrollService.initialize(panel, selectItemHeightPx, {\n                    threshold: this.threshold,\n                    debounceTime: this.debounceTime,\n                    complete: this.complete\n                });\n\n                this.infiniteScrollService.registerScrollListener(() => this.infiniteScroll.emit());\n            }\n        });\n    }\n\n    getSelectItemHeightPx(panel: Element): number {\n        return parseFloat(getComputedStyle(panel).fontSize) * SELECT_ITEM_HEIGHT_EM;\n    }\n\n    ngOnDestroy() {\n        this.destroyed$.next(true);\n        this.destroyed$.complete();\n\n        this.infiniteScrollService.destroy();\n    }\n\n}\n","import {NgModule} from '@angular/core';\nimport {MatSelectInfiniteScrollDirective} from './mat-select-infinite-scroll.directive';\nimport {MatSelectModule} from '@angular/material/select';\n\n@NgModule({\n    declarations: [MatSelectInfiniteScrollDirective],\n    imports: [\n        MatSelectModule,\n    ],\n    exports: [MatSelectInfiniteScrollDirective]\n})\nexport class MatSelectInfiniteScrollModule {\n}\n","/*\n * Public API Surface of ng-mat-select-infinite-scroll\n */\n\nexport * from './lib/mat-select-infinite-scroll.directive';\nexport * from './lib/mat-select-infinite-scroll.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2.InfiniteScrollService"],"mappings":"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"}

package/fesm2020/ng-mat-select-infinite-scroll.mjs

@@ -1,40 +1,27 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Input, Output, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Directive, Input, Output, NgModule } from '@angular/core';
 import { takeUntil, debounceTime, tap } from 'rxjs/operators';
 import { Subject, fromEvent } from 'rxjs';
 import * as i1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 
-/** The height of the select items in `em` units. */
-const SELECT_ITEM_HEIGHT_EM = 3;
-class MatSelectInfiniteScrollDirective {
-    constructor(matSelect, ngZone) {
-        this.matSelect = matSelect;
+class InfiniteScrollService {
+    constructor(ngZone) {
         this.ngZone = ngZone;
         this.threshold = '15%';
         this.debounceTime = 150;
-        this.infiniteScroll = new EventEmitter();
         this.thrPx = 0;
         this.thrPc = 0;
-        this.singleOptionHeight = SELECT_ITEM_HEIGHT_EM;
         this.destroyed$ = new Subject();
     }
-    ngOnInit() {
+    initialize(panel, selectItemHeightPx, config) {
+        this.threshold = config.threshold;
+        this.debounceTime = config.debounceTime;
+        this.complete = config.complete;
+        this.panel = panel;
+        this.selectItemHeightPx = selectItemHeightPx;
         this.evaluateThreshold();
     }
-    ngAfterViewInit() {
-        this.matSelect.openedChange.pipe(takeUntil(this.destroyed$)).subscribe((opened) => {
-            if (opened) {
-                this.panel = this.matSelect.panel.nativeElement;
-                this.singleOptionHeight = this.getSelectItemHeightPx();
-                this.registerScrollListener();
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.destroyed$.next(true);
-        this.destroyed$.complete();
-    }
     evaluateThreshold() {
         if (this.threshold.lastIndexOf('%') > -1) {
             this.thrPx = 0;
@@ -45,37 +32,82 @@ class MatSelectInfiniteScrollDirective {
             this.thrPc = 0;
         }
     }
-    registerScrollListener() {
+    registerScrollListener(infiniteScrollCallback) {
         fromEvent(this.panel, 'scroll').pipe(takeUntil(this.destroyed$), debounceTime(this.debounceTime), tap((event) => {
-            this.handleScrollEvent(event);
+            this.handleScrollEvent(event, infiniteScrollCallback);
         })).subscribe();
     }
-    handleScrollEvent(event) {
+    handleScrollEvent(event, infiniteScrollCallback) {
         this.ngZone.runOutsideAngular(() => {
             if (this.complete) {
                 return;
             }
-            const countOfRenderedOptions = this.matSelect.options.length;
-            const infiniteScrollDistance = this.singleOptionHeight * countOfRenderedOptions;
+            const countOfRenderedOptions = Math.round(this.panel.scrollHeight / this.selectItemHeightPx);
+            const infiniteScrollDistance = this.selectItemHeightPx * countOfRenderedOptions;
             const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;
             const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;
             if ((scrolledDistance + threshold) >= infiniteScrollDistance) {
-                this.ngZone.run(() => this.infiniteScroll.emit());
+                this.ngZone.run(infiniteScrollCallback);
+            }
+        });
+    }
+    destroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+}
+InfiniteScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfiniteScrollService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+InfiniteScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfiniteScrollService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfiniteScrollService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+
+/** The height of the select items in `em` units. */
+const SELECT_ITEM_HEIGHT_EM = 3;
+class MatSelectInfiniteScrollDirective {
+    constructor(matSelect, infiniteScrollService) {
+        this.matSelect = matSelect;
+        this.infiniteScrollService = infiniteScrollService;
+        this.threshold = '15%';
+        this.debounceTime = 150;
+        this.infiniteScroll = new EventEmitter();
+        this.destroyed$ = new Subject();
+    }
+    ngAfterViewInit() {
+        this.matSelect.openedChange.pipe(takeUntil(this.destroyed$)).subscribe((opened) => {
+            if (opened) {
+                const panel = this.matSelect.panel.nativeElement;
+                const selectItemHeightPx = this.getSelectItemHeightPx(panel);
+                this.infiniteScrollService.initialize(panel, selectItemHeightPx, {
+                    threshold: this.threshold,
+                    debounceTime: this.debounceTime,
+                    complete: this.complete
+                });
+                this.infiniteScrollService.registerScrollListener(() => this.infiniteScroll.emit());
             }
         });
     }
-    getSelectItemHeightPx() {
-        return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
+    getSelectItemHeightPx(panel) {
+        return parseFloat(getComputedStyle(panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
+    }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
+        this.destroyed$.complete();
+        this.infiniteScrollService.destroy();
     }
 }
-MatSelectInfiniteScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollDirective, deps: [{ token: i1.MatSelect }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-MatSelectInfiniteScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: MatSelectInfiniteScrollDirective, selector: "[msInfiniteScroll]", inputs: { threshold: "threshold", debounceTime: "debounceTime", complete: "complete" }, outputs: { infiniteScroll: "infiniteScroll" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
+MatSelectInfiniteScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollDirective, deps: [{ token: i1.MatSelect }, { token: InfiniteScrollService }], target: i0.ɵɵFactoryTarget.Directive });
+MatSelectInfiniteScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MatSelectInfiniteScrollDirective, selector: "[msInfiniteScroll]", inputs: { threshold: "threshold", debounceTime: "debounceTime", complete: "complete" }, outputs: { infiniteScroll: "infiniteScroll" }, providers: [InfiniteScrollService], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[msInfiniteScroll]'
+                    selector: '[msInfiniteScroll]',
+                    providers: [InfiniteScrollService]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.MatSelect }, { type: i0.NgZone }]; }, propDecorators: { threshold: [{
+        }], ctorParameters: function () { return [{ type: i1.MatSelect }, { type: InfiniteScrollService }]; }, propDecorators: { threshold: [{
                 type: Input
             }], debounceTime: [{
                 type: Input
@@ -87,15 +119,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
 
 class MatSelectInfiniteScrollModule {
 }
-MatSelectInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MatSelectInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, declarations: [MatSelectInfiniteScrollDirective], imports: [MatSelectModule], exports: [MatSelectInfiniteScrollDirective] });
-MatSelectInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, imports: [MatSelectModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, decorators: [{
+MatSelectInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MatSelectInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollModule, declarations: [MatSelectInfiniteScrollDirective], imports: [MatSelectModule], exports: [MatSelectInfiniteScrollDirective] });
+MatSelectInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollModule, imports: [MatSelectModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MatSelectInfiniteScrollModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatSelectInfiniteScrollDirective],
                     imports: [
-                        MatSelectModule
+                        MatSelectModule,
                     ],
                     exports: [MatSelectInfiniteScrollDirective]
                 }]

package/fesm2020/ng-mat-select-infinite-scroll.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-mat-select-infinite-scroll.mjs","sources":["../../../projects/ng-mat-select-infinite-scroll/src/lib/mat-select-infinite-scroll.directive.ts","../../../projects/ng-mat-select-infinite-scroll/src/lib/mat-select-infinite-scroll.module.ts","../../../projects/ng-mat-select-infinite-scroll/src/public-api.ts","../../../projects/ng-mat-select-infinite-scroll/src/ng-mat-select-infinite-scroll.ts"],"sourcesContent":["import {AfterViewInit, Directive, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output} from '@angular/core';\nimport {MatSelect} from '@angular/material/select';\nimport {debounceTime, takeUntil, tap} from 'rxjs/operators';\nimport {fromEvent, Subject} from 'rxjs';\n\n/** The height of the select items in `em` units. */\nconst SELECT_ITEM_HEIGHT_EM = 3;\n\n@Directive({\n  selector: '[msInfiniteScroll]'\n})\nexport class MatSelectInfiniteScrollDirective implements OnInit, OnDestroy, AfterViewInit {\n\n  @Input() threshold = '15%';\n  @Input() debounceTime = 150;\n  @Input() complete!: boolean;\n  @Output() infiniteScroll = new EventEmitter<void>();\n\n  private panel!: Element;\n  private thrPx = 0;\n  private thrPc = 0;\n  private singleOptionHeight = SELECT_ITEM_HEIGHT_EM;\n\n  private destroyed$ = new Subject<boolean>();\n\n  constructor(private matSelect: MatSelect, private ngZone: NgZone) {\n  }\n\n  ngOnInit() {\n    this.evaluateThreshold();\n  }\n\n  ngAfterViewInit() {\n    this.matSelect.openedChange.pipe(\n      takeUntil(this.destroyed$)\n    ).subscribe((opened) => {\n      if (opened) {\n        this.panel = this.matSelect.panel.nativeElement;\n        this.singleOptionHeight = this.getSelectItemHeightPx();\n        this.registerScrollListener();\n      }\n    });\n  }\n\n  ngOnDestroy() {\n    this.destroyed$.next(true);\n    this.destroyed$.complete();\n  }\n\n  evaluateThreshold() {\n    if (this.threshold.lastIndexOf('%') > -1) {\n      this.thrPx = 0;\n      this.thrPc = (parseFloat(this.threshold) / 100);\n\n    } else {\n      this.thrPx = parseFloat(this.threshold);\n      this.thrPc = 0;\n    }\n  }\n\n  registerScrollListener() {\n    fromEvent(this.panel, 'scroll').pipe(\n      takeUntil(this.destroyed$),\n      debounceTime(this.debounceTime),\n      tap((event) => {\n        this.handleScrollEvent(event);\n      })\n    ).subscribe();\n  }\n\n  handleScrollEvent(event: any) {\n    this.ngZone.runOutsideAngular(() => {\n      if (this.complete) {\n        return;\n      }\n      const countOfRenderedOptions = this.matSelect.options.length;\n      const infiniteScrollDistance = this.singleOptionHeight * countOfRenderedOptions;\n      const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;\n\n      const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;\n\n      if ((scrolledDistance + threshold) >= infiniteScrollDistance) {\n        this.ngZone.run(() => this.infiniteScroll.emit());\n      }\n    });\n  }\n\n  getSelectItemHeightPx(): number {\n    return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;\n  }\n\n}\n","import {NgModule} from '@angular/core';\nimport {MatSelectInfiniteScrollDirective} from './mat-select-infinite-scroll.directive';\nimport {MatSelectModule} from '@angular/material/select';\n\n@NgModule({\n  declarations: [MatSelectInfiniteScrollDirective],\n  imports: [\n    MatSelectModule\n  ],\n  exports: [MatSelectInfiniteScrollDirective]\n})\nexport class MatSelectInfiniteScrollModule {\n}\n","/*\n * Public API Surface of ng-mat-select-infinite-scroll\n */\n\nexport * from './lib/mat-select-infinite-scroll.directive';\nexport * from './lib/mat-select-infinite-scroll.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-mat-select-infinite-scroll.mjs","sources":["../../../projects/ng-mat-select-infinite-scroll/src/lib/infinite-scroll.service.ts","../../../projects/ng-mat-select-infinite-scroll/src/lib/mat-select-infinite-scroll.directive.ts","../../../projects/ng-mat-select-infinite-scroll/src/lib/mat-select-infinite-scroll.module.ts","../../../projects/ng-mat-select-infinite-scroll/src/public-api.ts","../../../projects/ng-mat-select-infinite-scroll/src/ng-mat-select-infinite-scroll.ts"],"sourcesContent":["import {Injectable, NgZone} from '@angular/core';\nimport {fromEvent, Subject} from 'rxjs';\nimport {debounceTime, takeUntil, tap} from 'rxjs/operators';\n\n@Injectable({\n    providedIn: 'root'\n})\nexport class InfiniteScrollService {\n\n    private threshold = '15%';\n    private debounceTime = 150;\n    private complete!: boolean;\n    private thrPx = 0;\n    private thrPc = 0;\n    private destroyed$ = new Subject<void>();\n    private selectItemHeightPx!: number;\n    private panel!: Element;\n\n    constructor(private ngZone: NgZone) {\n    }\n\n    initialize(panel: Element, selectItemHeightPx: number, config: {\n        threshold: string,\n        debounceTime: number,\n        complete: boolean\n    }) {\n        this.threshold = config.threshold;\n        this.debounceTime = config.debounceTime;\n        this.complete = config.complete;\n\n        this.panel = panel;\n        this.selectItemHeightPx = selectItemHeightPx;\n        this.evaluateThreshold();\n    }\n\n    evaluateThreshold() {\n        if (this.threshold.lastIndexOf('%') > -1) {\n            this.thrPx = 0;\n            this.thrPc = (parseFloat(this.threshold) / 100);\n        } else {\n            this.thrPx = parseFloat(this.threshold);\n            this.thrPc = 0;\n        }\n    }\n\n    registerScrollListener(infiniteScrollCallback: () => void) {\n        fromEvent(this.panel, 'scroll').pipe(\n            takeUntil(this.destroyed$),\n            debounceTime(this.debounceTime),\n            tap((event) => {\n                this.handleScrollEvent(event, infiniteScrollCallback);\n            })\n        ).subscribe();\n    }\n\n    handleScrollEvent(event: any, infiniteScrollCallback: () => void) {\n        this.ngZone.runOutsideAngular(() => {\n            if (this.complete) {\n                return;\n            }\n            const countOfRenderedOptions = Math.round(this.panel.scrollHeight / this.selectItemHeightPx);\n            const infiniteScrollDistance = this.selectItemHeightPx * countOfRenderedOptions;\n            const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;\n\n            const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;\n\n            if ((scrolledDistance + threshold) >= infiniteScrollDistance) {\n                this.ngZone.run(infiniteScrollCallback);\n            }\n        });\n    }\n\n    destroy() {\n        this.destroyed$.next();\n        this.destroyed$.complete();\n    }\n}\n","import {AfterViewInit, Directive, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output} from '@angular/core';\nimport {MatSelect} from '@angular/material/select';\nimport {takeUntil} from 'rxjs/operators';\nimport {InfiniteScrollService} from \"./infinite-scroll.service\";\nimport {Subject} from \"rxjs\";\n\n/** The height of the select items in `em` units. */\nconst SELECT_ITEM_HEIGHT_EM = 3;\n\n@Directive({\n    selector: '[msInfiniteScroll]',\n    providers: [InfiniteScrollService]\n})\nexport class MatSelectInfiniteScrollDirective implements OnDestroy, AfterViewInit {\n\n    @Input() threshold = '15%';\n    @Input() debounceTime = 150;\n    @Input() complete!: boolean;\n    @Output() infiniteScroll = new EventEmitter<void>();\n\n    private destroyed$ = new Subject<boolean>();\n\n    constructor(protected matSelect: MatSelect, private infiniteScrollService: InfiniteScrollService) {\n    }\n\n\n    ngAfterViewInit() {\n        this.matSelect.openedChange.pipe(\n            takeUntil(this.destroyed$)\n        ).subscribe((opened) => {\n            if (opened) {\n                const panel = this.matSelect.panel.nativeElement;\n                const selectItemHeightPx = this.getSelectItemHeightPx(panel);\n                this.infiniteScrollService.initialize(panel, selectItemHeightPx, {\n                    threshold: this.threshold,\n                    debounceTime: this.debounceTime,\n                    complete: this.complete\n                });\n\n                this.infiniteScrollService.registerScrollListener(() => this.infiniteScroll.emit());\n            }\n        });\n    }\n\n    getSelectItemHeightPx(panel: Element): number {\n        return parseFloat(getComputedStyle(panel).fontSize) * SELECT_ITEM_HEIGHT_EM;\n    }\n\n    ngOnDestroy() {\n        this.destroyed$.next(true);\n        this.destroyed$.complete();\n\n        this.infiniteScrollService.destroy();\n    }\n\n}\n","import {NgModule} from '@angular/core';\nimport {MatSelectInfiniteScrollDirective} from './mat-select-infinite-scroll.directive';\nimport {MatSelectModule} from '@angular/material/select';\n\n@NgModule({\n    declarations: [MatSelectInfiniteScrollDirective],\n    imports: [\n        MatSelectModule,\n    ],\n    exports: [MatSelectInfiniteScrollDirective]\n})\nexport class MatSelectInfiniteScrollModule {\n}\n","/*\n * Public API Surface of ng-mat-select-infinite-scroll\n */\n\nexport * from './lib/mat-select-infinite-scroll.directive';\nexport * from './lib/mat-select-infinite-scroll.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2.InfiniteScrollService"],"mappings":"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"}

package/lib/infinite-scroll.service.d.ts

@@ -0,0 +1,25 @@
+import { NgZone } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class InfiniteScrollService {
+    private ngZone;
+    private threshold;
+    private debounceTime;
+    private complete;
+    private thrPx;
+    private thrPc;
+    private destroyed$;
+    private selectItemHeightPx;
+    private panel;
+    constructor(ngZone: NgZone);
+    initialize(panel: Element, selectItemHeightPx: number, config: {
+        threshold: string;
+        debounceTime: number;
+        complete: boolean;
+    }): void;
+    evaluateThreshold(): void;
+    registerScrollListener(infiniteScrollCallback: () => void): void;
+    handleScrollEvent(event: any, infiniteScrollCallback: () => void): void;
+    destroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InfiniteScrollService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<InfiniteScrollService>;
+}

package/lib/mat-select-infinite-scroll.directive.d.ts

@@ -1,26 +1,19 @@
-import { AfterViewInit, EventEmitter, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, EventEmitter, OnDestroy } from '@angular/core';
 import { MatSelect } from '@angular/material/select';
+import { InfiniteScrollService } from "./infinite-scroll.service";
 import * as i0 from "@angular/core";
-export declare class MatSelectInfiniteScrollDirective implements OnInit, OnDestroy, AfterViewInit {
-    private matSelect;
-    private ngZone;
+export declare class MatSelectInfiniteScrollDirective implements OnDestroy, AfterViewInit {
+    protected matSelect: MatSelect;
+    private infiniteScrollService;
     threshold: string;
     debounceTime: number;
     complete: boolean;
     infiniteScroll: EventEmitter<void>;
-    private panel;
-    private thrPx;
-    private thrPc;
-    private singleOptionHeight;
     private destroyed$;
-    constructor(matSelect: MatSelect, ngZone: NgZone);
-    ngOnInit(): void;
+    constructor(matSelect: MatSelect, infiniteScrollService: InfiniteScrollService);
     ngAfterViewInit(): void;
+    getSelectItemHeightPx(panel: Element): number;
     ngOnDestroy(): void;
-    evaluateThreshold(): void;
-    registerScrollListener(): void;
-    handleScrollEvent(event: any): void;
-    getSelectItemHeightPx(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectInfiniteScrollDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectInfiniteScrollDirective, "[msInfiniteScroll]", never, { "threshold": "threshold"; "debounceTime": "debounceTime"; "complete": "complete"; }, { "infiniteScroll": "infiniteScroll"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectInfiniteScrollDirective, "[msInfiniteScroll]", never, { "threshold": "threshold"; "debounceTime": "debounceTime"; "complete": "complete"; }, { "infiniteScroll": "infiniteScroll"; }, never, never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-mat-select-infinite-scroll",
-  "version": "4.0.0",
+  "version": "5.0.0-beta.1",
   "description": "Adds missing infinite scroll functionality for the angular material select component",
   "author": "Haidar Zeineddine",
   "repository": {
@@ -23,8 +23,8 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "@angular/core": ">=6.0.0 <15.0.0",
-    "@angular/material": ">=6.0.0 <15.0.0"
+    "@angular/core": ">=15.0.0 <17.0.0",
+    "@angular/material": ">=15.0.0 <17.0.0"
   },
   "module": "fesm2015/ng-mat-select-infinite-scroll.mjs",
   "es2020": "fesm2020/ng-mat-select-infinite-scroll.mjs",