ng-mat-select-infinite-scroll 2.1.1 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +14 -10
  3. package/esm2020/lib/mat-select-infinite-scroll.directive.mjs +85 -0
  4. package/esm2020/lib/mat-select-infinite-scroll.module.mjs +20 -0
  5. package/{esm2015/ng-mat-select-infinite-scroll.js → esm2020/ng-mat-select-infinite-scroll.mjs} +2 -2
  6. package/{esm2015/public_api.js → esm2020/public-api.mjs} +1 -1
  7. package/fesm2015/ng-mat-select-infinite-scroll.mjs +113 -0
  8. package/fesm2015/ng-mat-select-infinite-scroll.mjs.map +1 -0
  9. package/fesm2020/ng-mat-select-infinite-scroll.mjs +113 -0
  10. package/fesm2020/ng-mat-select-infinite-scroll.mjs.map +1 -0
  11. package/index.d.ts +5 -0
  12. package/lib/mat-select-infinite-scroll.directive.d.ts +3 -0
  13. package/lib/mat-select-infinite-scroll.module.d.ts +6 -0
  14. package/ng-mat-select-infinite-scroll-4.0.0.tgz +0 -0
  15. package/package.json +24 -13
  16. package/{public_api.d.ts → public-api.d.ts} +0 -0
  17. package/bundles/ng-mat-select-infinite-scroll.umd.js +0 -117
  18. package/bundles/ng-mat-select-infinite-scroll.umd.js.map +0 -1
  19. package/bundles/ng-mat-select-infinite-scroll.umd.min.js +0 -2
  20. package/bundles/ng-mat-select-infinite-scroll.umd.min.js.map +0 -1
  21. package/esm2015/lib/mat-select-infinite-scroll.directive.js +0 -81
  22. package/esm2015/lib/mat-select-infinite-scroll.module.js +0 -15
  23. package/fesm2015/ng-mat-select-infinite-scroll.js +0 -104
  24. package/fesm2015/ng-mat-select-infinite-scroll.js.map +0 -1
  25. package/ng-mat-select-infinite-scroll-2.1.1.tgz +0 -0
  26. package/ng-mat-select-infinite-scroll.d.ts +0 -4
  27. package/ng-mat-select-infinite-scroll.metadata.json +0 -1
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2019 Haidar Zeineddine
3
+ Copyright (c) 2021 Haidar Zeineddine
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -50,20 +50,20 @@ export class AppModule {
50
50
 
51
51
  Then place the msInfiniteScroll directive on the `mat-select` component
52
52
  ```html
53
- <mat-form-field appearance="outline">
54
- <mat-label>Select</mat-label>
55
- <mat-select msInfiniteScroll (infiniteScroll)="getNextBatch()" [complete]="offset === data.length">
56
- <mat-option *ngFor="let option of options$ | async" [value]="option">{{option}}</mat-option>
57
- </mat-select>
58
- </mat-form-field>
53
+ <mat-form-field appearance="outline">
54
+ <mat-label>Select</mat-label>
55
+ <mat-select msInfiniteScroll (infiniteScroll)="getNextBatch()" [complete]="offset === data.length">
56
+ <mat-option *ngFor="let option of options$ | async" [value]="option">{{option}}</mat-option>
57
+ </mat-select>
58
+ </mat-form-field>
59
59
  ```
60
60
 
61
61
  ### Compatibility
62
62
 
63
- * `@angular/core`: `>=6.0.0 <11`,
64
- * `@angular/cdk`: `>=6.0.0 <11`,
65
- * `@angular/material`: `>=6.0.0 <11`,
66
- * `rxjs`: `^6.0.0`
63
+ * `@angular/core`: `>=6.0.0 <16`,
64
+ * `@angular/cdk`: `>=6.0.0 <16`,
65
+ * `@angular/material`: `>=6.0.0 <16`,
66
+ * `rxjs`: `^7.0.0`
67
67
 
68
68
  ### Contributions
69
69
  Contributions are welcomed, feel free to open a Pull-Request or open a new issue.
@@ -79,3 +79,7 @@ Run `ng build` to build the project. The build artifacts will be stored in the `
79
79
  ### Running unit tests
80
80
 
81
81
  Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
82
+
83
+ # License
84
+
85
+ [MIT](LICENSE)
@@ -0,0 +1,85 @@
1
+ import { Directive, EventEmitter, Input, Output } from '@angular/core';
2
+ import { debounceTime, takeUntil, tap } from 'rxjs/operators';
3
+ import { fromEvent, Subject } from 'rxjs';
4
+ import * as i0 from "@angular/core";
5
+ import * as i1 from "@angular/material/select";
6
+ /** The height of the select items in `em` units. */
7
+ const SELECT_ITEM_HEIGHT_EM = 3;
8
+ export class MatSelectInfiniteScrollDirective {
9
+ constructor(matSelect, ngZone) {
10
+ this.matSelect = matSelect;
11
+ this.ngZone = ngZone;
12
+ this.threshold = '15%';
13
+ this.debounceTime = 150;
14
+ this.infiniteScroll = new EventEmitter();
15
+ this.thrPx = 0;
16
+ this.thrPc = 0;
17
+ this.singleOptionHeight = SELECT_ITEM_HEIGHT_EM;
18
+ this.destroyed$ = new Subject();
19
+ }
20
+ ngOnInit() {
21
+ this.evaluateThreshold();
22
+ }
23
+ ngAfterViewInit() {
24
+ this.matSelect.openedChange.pipe(takeUntil(this.destroyed$)).subscribe((opened) => {
25
+ if (opened) {
26
+ this.panel = this.matSelect.panel.nativeElement;
27
+ this.singleOptionHeight = this.getSelectItemHeightPx();
28
+ this.registerScrollListener();
29
+ }
30
+ });
31
+ }
32
+ ngOnDestroy() {
33
+ this.destroyed$.next(true);
34
+ this.destroyed$.complete();
35
+ }
36
+ evaluateThreshold() {
37
+ if (this.threshold.lastIndexOf('%') > -1) {
38
+ this.thrPx = 0;
39
+ this.thrPc = (parseFloat(this.threshold) / 100);
40
+ }
41
+ else {
42
+ this.thrPx = parseFloat(this.threshold);
43
+ this.thrPc = 0;
44
+ }
45
+ }
46
+ registerScrollListener() {
47
+ fromEvent(this.panel, 'scroll').pipe(takeUntil(this.destroyed$), debounceTime(this.debounceTime), tap((event) => {
48
+ this.handleScrollEvent(event);
49
+ })).subscribe();
50
+ }
51
+ handleScrollEvent(event) {
52
+ this.ngZone.runOutsideAngular(() => {
53
+ if (this.complete) {
54
+ return;
55
+ }
56
+ const countOfRenderedOptions = this.matSelect.options.length;
57
+ const infiniteScrollDistance = this.singleOptionHeight * countOfRenderedOptions;
58
+ const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;
59
+ const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;
60
+ if ((scrolledDistance + threshold) >= infiniteScrollDistance) {
61
+ this.ngZone.run(() => this.infiniteScroll.emit());
62
+ }
63
+ });
64
+ }
65
+ getSelectItemHeightPx() {
66
+ return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
67
+ }
68
+ }
69
+ 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 });
70
+ 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 });
71
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
72
+ type: Directive,
73
+ args: [{
74
+ selector: '[msInfiniteScroll]'
75
+ }]
76
+ }], ctorParameters: function () { return [{ type: i1.MatSelect }, { type: i0.NgZone }]; }, propDecorators: { threshold: [{
77
+ type: Input
78
+ }], debounceTime: [{
79
+ type: Input
80
+ }], complete: [{
81
+ type: Input
82
+ }], infiniteScroll: [{
83
+ type: Output
84
+ }] } });
85
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctbWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwvc3JjL2xpYi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBNkIsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRS9HLE9BQU8sRUFBQyxZQUFZLEVBQUUsU0FBUyxFQUFFLEdBQUcsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQzVELE9BQU8sRUFBQyxTQUFTLEVBQUUsT0FBTyxFQUFDLE1BQU0sTUFBTSxDQUFDOzs7QUFFeEMsb0RBQW9EO0FBQ3BELE1BQU0scUJBQXFCLEdBQUcsQ0FBQyxDQUFDO0FBS2hDLE1BQU0sT0FBTyxnQ0FBZ0M7SUFjM0MsWUFBb0IsU0FBb0IsRUFBVSxNQUFjO1FBQTVDLGNBQVMsR0FBVCxTQUFTLENBQVc7UUFBVSxXQUFNLEdBQU4sTUFBTSxDQUFRO1FBWnZELGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIsaUJBQVksR0FBRyxHQUFHLENBQUM7UUFFbEIsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBRzVDLFVBQUssR0FBRyxDQUFDLENBQUM7UUFDVixVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ1YsdUJBQWtCLEdBQUcscUJBQXFCLENBQUM7UUFFM0MsZUFBVSxHQUFHLElBQUksT0FBTyxFQUFXLENBQUM7SUFHNUMsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztJQUMzQixDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxTQUFTLENBQUMsWUFBWSxDQUFDLElBQUksQ0FDOUIsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFV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QUdVLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLGNBQWM7c0JBQXZCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0FmdGVyVmlld0luaXQsIERpcmVjdGl2ZSwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgTmdab25lLCBPbkRlc3Ryb3ksIE9uSW5pdCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7TWF0U2VsZWN0fSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zZWxlY3QnO1xuaW1wb3J0IHtkZWJvdW5jZVRpbWUsIHRha2VVbnRpbCwgdGFwfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQge2Zyb21FdmVudCwgU3ViamVjdH0gZnJvbSAncnhqcyc7XG5cbi8qKiBUaGUgaGVpZ2h0IG9mIHRoZSBzZWxlY3QgaXRlbXMgaW4gYGVtYCB1bml0cy4gKi9cbmNvbnN0IFNFTEVDVF9JVEVNX0hFSUdIVF9FTSA9IDM7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1ttc0luZmluaXRlU2Nyb2xsXSdcbn0pXG5leHBvcnQgY2xhc3MgTWF0U2VsZWN0SW5maW5pdGVTY3JvbGxEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSwgQWZ0ZXJWaWV3SW5pdCB7XG5cbiAgQElucHV0KCkgdGhyZXNob2xkID0gJzE1JSc7XG4gIEBJbnB1dCgpIGRlYm91bmNlVGltZSA9IDE1MDtcbiAgQElucHV0KCkgY29tcGxldGUhOiBib29sZWFuO1xuICBAT3V0cHV0KCkgaW5maW5pdGVTY3JvbGwgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgcHJpdmF0ZSBwYW5lbCE6IEVsZW1lbnQ7XG4gIHByaXZhdGUgdGhyUHggPSAwO1xuICBwcml2YXRlIHRoclBjID0gMDtcbiAgcHJpdmF0ZSBzaW5nbGVPcHRpb25IZWlnaHQgPSBTRUxFQ1RfSVRFTV9IRUlHSFRfRU07XG5cbiAgcHJpdmF0ZSBkZXN0cm95ZWQkID0gbmV3IFN1YmplY3Q8Ym9vbGVhbj4oKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIG1hdFNlbGVjdDogTWF0U2VsZWN0LCBwcml2YXRlIG5nWm9uZTogTmdab25lKSB7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmV2YWx1YXRlVGhyZXNob2xkKCk7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgdGhpcy5tYXRTZWxlY3Qub3BlbmVkQ2hhbmdlLnBpcGUoXG4gICAgICB0YWtlVW50aWwodGhpcy5kZXN0cm95ZWQkKVxuICAgICkuc3Vic2NyaWJlKChvcGVuZWQpID0+IHtcbiAgICAgIGlmIChvcGVuZWQpIHtcbiAgICAgICAgdGhpcy5wYW5lbCA9IHRoaXMubWF0U2VsZWN0LnBhbmVsLm5hdGl2ZUVsZW1lbnQ7XG4gICAgICAgIHRoaXMuc2luZ2xlT3B0aW9uSGVpZ2h0ID0gdGhpcy5nZXRTZWxlY3RJdGVtSGVpZ2h0UHgoKTtcbiAgICAgICAgdGhpcy5yZWdpc3RlclNjcm9sbExpc3RlbmVyKCk7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmRlc3Ryb3llZCQubmV4dCh0cnVlKTtcbiAgICB0aGlzLmRlc3Ryb3llZCQuY29tcGxldGUoKTtcbiAgfVxuXG4gIGV2YWx1YXRlVGhyZXNob2xkKCkge1xuICAgIGlmICh0aGlzLnRocmVzaG9sZC5sYXN0SW5kZXhPZignJScpID4gLTEpIHtcbiAgICAgIHRoaXMudGhyUHggPSAwO1xuICAgICAgdGhpcy50aHJQYyA9IChwYXJzZUZsb2F0KHRoaXMudGhyZXNob2xkKSAvIDEwMCk7XG5cbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy50aHJQeCA9IHBhcnNlRmxvYXQodGhpcy50aHJlc2hvbGQpO1xuICAgICAgdGhpcy50aHJQYyA9IDA7XG4gICAgfVxuICB9XG5cbiAgcmVnaXN0ZXJTY3JvbGxMaXN0ZW5lcigpIHtcbiAgICBmcm9tRXZlbnQodGhpcy5wYW5lbCwgJ3Njcm9sbCcpLnBpcGUoXG4gICAgICB0YWtlVW50aWwodGhpcy5kZXN0cm95ZWQkKSxcbiAgICAgIGRlYm91bmNlVGltZSh0aGlzLmRlYm91bmNlVGltZSksXG4gICAgICB0YXAoKGV2ZW50KSA9PiB7XG4gICAgICAgIHRoaXMuaGFuZGxlU2Nyb2xsRXZlbnQoZXZlbnQpO1xuICAgICAgfSlcbiAgICApLnN1YnNjcmliZSgpO1xuICB9XG5cbiAgaGFuZGxlU2Nyb2xsRXZlbnQoZXZlbnQ6IGFueSkge1xuICAgIHRoaXMubmdab25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgIGlmICh0aGlzLmNvbXBsZXRlKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cbiAgICAgIGNvbnN0IGNvdW50T2ZSZW5kZXJlZE9wdGlvbnMgPSB0aGlzLm1hdFNlbGVjdC5vcHRpb25zLmxlbmd0aDtcbiAgICAgIGNvbnN0IGluZmluaXRlU2Nyb2xsRGlzdGFuY2UgPSB0aGlzLnNpbmdsZU9wdGlvbkhlaWdodCAqIGNvdW50T2ZSZW5kZXJlZE9wdGlvbnM7XG4gICAgICBjb25zdCB0aHJlc2hvbGQgPSB0aGlzLnRoclBjICE9PSAwID8gKGluZmluaXRlU2Nyb2xsRGlzdGFuY2UgKiB0aGlzLnRoclBjKSA6IHRoaXMudGhyUHg7XG5cbiAgICAgIGNvbnN0IHNjcm9sbGVkRGlzdGFuY2UgPSB0aGlzLnBhbmVsLmNsaWVudEhlaWdodCArIGV2ZW50LnRhcmdldC5zY3JvbGxUb3A7XG5cbiAgICAgIGlmICgoc2Nyb2xsZWREaXN0YW5jZSArIHRocmVzaG9sZCkgPj0gaW5maW5pdGVTY3JvbGxEaXN0YW5jZSkge1xuICAgICAgICB0aGlzLm5nWm9uZS5ydW4oKCkgPT4gdGhpcy5pbmZpbml0ZVNjcm9sbC5lbWl0KCkpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG5cbiAgZ2V0U2VsZWN0SXRlbUhlaWdodFB4KCk6IG51bWJlciB7XG4gICAgcmV0dXJuIHBhcnNlRmxvYXQoZ2V0Q29tcHV0ZWRTdHlsZSh0aGlzLnBhbmVsKS5mb250U2l6ZSkgKiBTRUxFQ1RfSVRFTV9IRUlHSFRfRU07XG4gIH1cblxufVxuIl19
@@ -0,0 +1,20 @@
1
+ import { NgModule } from '@angular/core';
2
+ import { MatSelectInfiniteScrollDirective } from './mat-select-infinite-scroll.directive';
3
+ import { MatSelectModule } from '@angular/material/select';
4
+ import * as i0 from "@angular/core";
5
+ export class MatSelectInfiniteScrollModule {
6
+ }
7
+ MatSelectInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
8
+ MatSelectInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, declarations: [MatSelectInfiniteScrollDirective], imports: [MatSelectModule], exports: [MatSelectInfiniteScrollDirective] });
9
+ MatSelectInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, imports: [MatSelectModule] });
10
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, decorators: [{
11
+ type: NgModule,
12
+ args: [{
13
+ declarations: [MatSelectInfiniteScrollDirective],
14
+ imports: [
15
+ MatSelectModule
16
+ ],
17
+ exports: [MatSelectInfiniteScrollDirective]
18
+ }]
19
+ }] });
20
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctbWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwvc3JjL2xpYi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQUMsZ0NBQWdDLEVBQUMsTUFBTSx3Q0FBd0MsQ0FBQztBQUN4RixPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0sMEJBQTBCLENBQUM7O0FBU3pELE1BQU0sT0FBTyw2QkFBNkI7OzBIQUE3Qiw2QkFBNkI7MkhBQTdCLDZCQUE2QixpQkFOekIsZ0NBQWdDLGFBRTdDLGVBQWUsYUFFUCxnQ0FBZ0M7MkhBRS9CLDZCQUE2QixZQUp0QyxlQUFlOzJGQUlOLDZCQUE2QjtrQkFQekMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxnQ0FBZ0MsQ0FBQztvQkFDaEQsT0FBTyxFQUFFO3dCQUNQLGVBQWU7cUJBQ2hCO29CQUNELE9BQU8sRUFBRSxDQUFDLGdDQUFnQyxDQUFDO2lCQUM1QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtNYXRTZWxlY3RJbmZpbml0ZVNjcm9sbERpcmVjdGl2ZX0gZnJvbSAnLi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5kaXJlY3RpdmUnO1xuaW1wb3J0IHtNYXRTZWxlY3RNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3NlbGVjdCc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW01hdFNlbGVjdEluZmluaXRlU2Nyb2xsRGlyZWN0aXZlXSxcbiAgaW1wb3J0czogW1xuICAgIE1hdFNlbGVjdE1vZHVsZVxuICBdLFxuICBleHBvcnRzOiBbTWF0U2VsZWN0SW5maW5pdGVTY3JvbGxEaXJlY3RpdmVdXG59KVxuZXhwb3J0IGNsYXNzIE1hdFNlbGVjdEluZmluaXRlU2Nyb2xsTW9kdWxlIHtcbn1cbiJdfQ==
@@ -1,5 +1,5 @@
1
1
  /**
2
2
  * Generated bundle index. Do not edit.
3
3
  */
4
- export * from './public_api';
5
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctbWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9uZy1tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC9zcmMvbmctbWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWNfYXBpJztcbiJdfQ==
4
+ export * from './public-api';
5
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctbWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy9uZy1tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC9zcmMvbmctbWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==
@@ -3,4 +3,4 @@
3
3
  */
4
4
  export * from './lib/mat-select-infinite-scroll.directive';
5
5
  export * from './lib/mat-select-infinite-scroll.module';
6
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25nLW1hdC1zZWxlY3QtaW5maW5pdGUtc2Nyb2xsL3NyYy9wdWJsaWNfYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyw0Q0FBNEMsQ0FBQztBQUMzRCxjQUFjLHlDQUF5QyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBuZy1tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbFxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL21hdC1zZWxlY3QtaW5maW5pdGUtc2Nyb2xsLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5tb2R1bGUnO1xuIl19
6
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25nLW1hdC1zZWxlY3QtaW5maW5pdGUtc2Nyb2xsL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyw0Q0FBNEMsQ0FBQztBQUMzRCxjQUFjLHlDQUF5QyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBuZy1tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbFxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL21hdC1zZWxlY3QtaW5maW5pdGUtc2Nyb2xsLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5tb2R1bGUnO1xuIl19
@@ -0,0 +1,113 @@
1
+ import * as i0 from '@angular/core';
2
+ import { EventEmitter, Directive, Input, Output, NgModule } from '@angular/core';
3
+ import { takeUntil, debounceTime, tap } from 'rxjs/operators';
4
+ import { Subject, fromEvent } from 'rxjs';
5
+ import * as i1 from '@angular/material/select';
6
+ import { MatSelectModule } from '@angular/material/select';
7
+
8
+ /** The height of the select items in `em` units. */
9
+ const SELECT_ITEM_HEIGHT_EM = 3;
10
+ class MatSelectInfiniteScrollDirective {
11
+ constructor(matSelect, ngZone) {
12
+ this.matSelect = matSelect;
13
+ this.ngZone = ngZone;
14
+ this.threshold = '15%';
15
+ this.debounceTime = 150;
16
+ this.infiniteScroll = new EventEmitter();
17
+ this.thrPx = 0;
18
+ this.thrPc = 0;
19
+ this.singleOptionHeight = SELECT_ITEM_HEIGHT_EM;
20
+ this.destroyed$ = new Subject();
21
+ }
22
+ ngOnInit() {
23
+ this.evaluateThreshold();
24
+ }
25
+ ngAfterViewInit() {
26
+ this.matSelect.openedChange.pipe(takeUntil(this.destroyed$)).subscribe((opened) => {
27
+ if (opened) {
28
+ this.panel = this.matSelect.panel.nativeElement;
29
+ this.singleOptionHeight = this.getSelectItemHeightPx();
30
+ this.registerScrollListener();
31
+ }
32
+ });
33
+ }
34
+ ngOnDestroy() {
35
+ this.destroyed$.next(true);
36
+ this.destroyed$.complete();
37
+ }
38
+ evaluateThreshold() {
39
+ if (this.threshold.lastIndexOf('%') > -1) {
40
+ this.thrPx = 0;
41
+ this.thrPc = (parseFloat(this.threshold) / 100);
42
+ }
43
+ else {
44
+ this.thrPx = parseFloat(this.threshold);
45
+ this.thrPc = 0;
46
+ }
47
+ }
48
+ registerScrollListener() {
49
+ fromEvent(this.panel, 'scroll').pipe(takeUntil(this.destroyed$), debounceTime(this.debounceTime), tap((event) => {
50
+ this.handleScrollEvent(event);
51
+ })).subscribe();
52
+ }
53
+ handleScrollEvent(event) {
54
+ this.ngZone.runOutsideAngular(() => {
55
+ if (this.complete) {
56
+ return;
57
+ }
58
+ const countOfRenderedOptions = this.matSelect.options.length;
59
+ const infiniteScrollDistance = this.singleOptionHeight * countOfRenderedOptions;
60
+ const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;
61
+ const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;
62
+ if ((scrolledDistance + threshold) >= infiniteScrollDistance) {
63
+ this.ngZone.run(() => this.infiniteScroll.emit());
64
+ }
65
+ });
66
+ }
67
+ getSelectItemHeightPx() {
68
+ return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
69
+ }
70
+ }
71
+ 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 });
72
+ 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 });
73
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
74
+ type: Directive,
75
+ args: [{
76
+ selector: '[msInfiniteScroll]'
77
+ }]
78
+ }], ctorParameters: function () { return [{ type: i1.MatSelect }, { type: i0.NgZone }]; }, propDecorators: { threshold: [{
79
+ type: Input
80
+ }], debounceTime: [{
81
+ type: Input
82
+ }], complete: [{
83
+ type: Input
84
+ }], infiniteScroll: [{
85
+ type: Output
86
+ }] } });
87
+
88
+ class MatSelectInfiniteScrollModule {
89
+ }
90
+ MatSelectInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
91
+ MatSelectInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, declarations: [MatSelectInfiniteScrollDirective], imports: [MatSelectModule], exports: [MatSelectInfiniteScrollDirective] });
92
+ MatSelectInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, imports: [MatSelectModule] });
93
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, decorators: [{
94
+ type: NgModule,
95
+ args: [{
96
+ declarations: [MatSelectInfiniteScrollDirective],
97
+ imports: [
98
+ MatSelectModule
99
+ ],
100
+ exports: [MatSelectInfiniteScrollDirective]
101
+ }]
102
+ }] });
103
+
104
+ /*
105
+ * Public API Surface of ng-mat-select-infinite-scroll
106
+ */
107
+
108
+ /**
109
+ * Generated bundle index. Do not edit.
110
+ */
111
+
112
+ export { MatSelectInfiniteScrollDirective, MatSelectInfiniteScrollModule };
113
+ //# sourceMappingURL=ng-mat-select-infinite-scroll.mjs.map
@@ -0,0 +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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"}
@@ -0,0 +1,113 @@
1
+ import * as i0 from '@angular/core';
2
+ import { EventEmitter, Directive, Input, Output, NgModule } from '@angular/core';
3
+ import { takeUntil, debounceTime, tap } from 'rxjs/operators';
4
+ import { Subject, fromEvent } from 'rxjs';
5
+ import * as i1 from '@angular/material/select';
6
+ import { MatSelectModule } from '@angular/material/select';
7
+
8
+ /** The height of the select items in `em` units. */
9
+ const SELECT_ITEM_HEIGHT_EM = 3;
10
+ class MatSelectInfiniteScrollDirective {
11
+ constructor(matSelect, ngZone) {
12
+ this.matSelect = matSelect;
13
+ this.ngZone = ngZone;
14
+ this.threshold = '15%';
15
+ this.debounceTime = 150;
16
+ this.infiniteScroll = new EventEmitter();
17
+ this.thrPx = 0;
18
+ this.thrPc = 0;
19
+ this.singleOptionHeight = SELECT_ITEM_HEIGHT_EM;
20
+ this.destroyed$ = new Subject();
21
+ }
22
+ ngOnInit() {
23
+ this.evaluateThreshold();
24
+ }
25
+ ngAfterViewInit() {
26
+ this.matSelect.openedChange.pipe(takeUntil(this.destroyed$)).subscribe((opened) => {
27
+ if (opened) {
28
+ this.panel = this.matSelect.panel.nativeElement;
29
+ this.singleOptionHeight = this.getSelectItemHeightPx();
30
+ this.registerScrollListener();
31
+ }
32
+ });
33
+ }
34
+ ngOnDestroy() {
35
+ this.destroyed$.next(true);
36
+ this.destroyed$.complete();
37
+ }
38
+ evaluateThreshold() {
39
+ if (this.threshold.lastIndexOf('%') > -1) {
40
+ this.thrPx = 0;
41
+ this.thrPc = (parseFloat(this.threshold) / 100);
42
+ }
43
+ else {
44
+ this.thrPx = parseFloat(this.threshold);
45
+ this.thrPc = 0;
46
+ }
47
+ }
48
+ registerScrollListener() {
49
+ fromEvent(this.panel, 'scroll').pipe(takeUntil(this.destroyed$), debounceTime(this.debounceTime), tap((event) => {
50
+ this.handleScrollEvent(event);
51
+ })).subscribe();
52
+ }
53
+ handleScrollEvent(event) {
54
+ this.ngZone.runOutsideAngular(() => {
55
+ if (this.complete) {
56
+ return;
57
+ }
58
+ const countOfRenderedOptions = this.matSelect.options.length;
59
+ const infiniteScrollDistance = this.singleOptionHeight * countOfRenderedOptions;
60
+ const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;
61
+ const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;
62
+ if ((scrolledDistance + threshold) >= infiniteScrollDistance) {
63
+ this.ngZone.run(() => this.infiniteScroll.emit());
64
+ }
65
+ });
66
+ }
67
+ getSelectItemHeightPx() {
68
+ return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
69
+ }
70
+ }
71
+ 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 });
72
+ 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 });
73
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
74
+ type: Directive,
75
+ args: [{
76
+ selector: '[msInfiniteScroll]'
77
+ }]
78
+ }], ctorParameters: function () { return [{ type: i1.MatSelect }, { type: i0.NgZone }]; }, propDecorators: { threshold: [{
79
+ type: Input
80
+ }], debounceTime: [{
81
+ type: Input
82
+ }], complete: [{
83
+ type: Input
84
+ }], infiniteScroll: [{
85
+ type: Output
86
+ }] } });
87
+
88
+ class MatSelectInfiniteScrollModule {
89
+ }
90
+ MatSelectInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
91
+ MatSelectInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, declarations: [MatSelectInfiniteScrollDirective], imports: [MatSelectModule], exports: [MatSelectInfiniteScrollDirective] });
92
+ MatSelectInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, imports: [MatSelectModule] });
93
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MatSelectInfiniteScrollModule, decorators: [{
94
+ type: NgModule,
95
+ args: [{
96
+ declarations: [MatSelectInfiniteScrollDirective],
97
+ imports: [
98
+ MatSelectModule
99
+ ],
100
+ exports: [MatSelectInfiniteScrollDirective]
101
+ }]
102
+ }] });
103
+
104
+ /*
105
+ * Public API Surface of ng-mat-select-infinite-scroll
106
+ */
107
+
108
+ /**
109
+ * Generated bundle index. Do not edit.
110
+ */
111
+
112
+ export { MatSelectInfiniteScrollDirective, MatSelectInfiniteScrollModule };
113
+ //# sourceMappingURL=ng-mat-select-infinite-scroll.mjs.map
@@ -0,0 +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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"}
package/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ /// <amd-module name="ng-mat-select-infinite-scroll" />
5
+ export * from './public-api';
@@ -1,5 +1,6 @@
1
1
  import { AfterViewInit, EventEmitter, NgZone, OnDestroy, OnInit } from '@angular/core';
2
2
  import { MatSelect } from '@angular/material/select';
3
+ import * as i0 from "@angular/core";
3
4
  export declare class MatSelectInfiniteScrollDirective implements OnInit, OnDestroy, AfterViewInit {
4
5
  private matSelect;
5
6
  private ngZone;
@@ -20,4 +21,6 @@ export declare class MatSelectInfiniteScrollDirective implements OnInit, OnDestr
20
21
  registerScrollListener(): void;
21
22
  handleScrollEvent(event: any): void;
22
23
  getSelectItemHeightPx(): number;
24
+ static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectInfiniteScrollDirective, never>;
25
+ static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectInfiniteScrollDirective, "[msInfiniteScroll]", never, { "threshold": "threshold"; "debounceTime": "debounceTime"; "complete": "complete"; }, { "infiniteScroll": "infiniteScroll"; }, never, never, false>;
23
26
  }
@@ -1,2 +1,8 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./mat-select-infinite-scroll.directive";
3
+ import * as i2 from "@angular/material/select";
1
4
  export declare class MatSelectInfiniteScrollModule {
5
+ static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectInfiniteScrollModule, never>;
6
+ static ɵmod: i0.ɵɵNgModuleDeclaration<MatSelectInfiniteScrollModule, [typeof i1.MatSelectInfiniteScrollDirective], [typeof i2.MatSelectModule], [typeof i1.MatSelectInfiniteScrollDirective]>;
7
+ static ɵinj: i0.ɵɵInjectorDeclaration<MatSelectInfiniteScrollModule>;
2
8
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ng-mat-select-infinite-scroll",
3
- "version": "2.1.1",
3
+ "version": "4.0.0",
4
4
  "description": "Adds missing infinite scroll functionality for the angular material select component",
5
5
  "author": "Haidar Zeineddine",
6
6
  "repository": {
@@ -23,19 +23,30 @@
23
23
  ],
24
24
  "license": "MIT",
25
25
  "peerDependencies": {
26
- "@angular/common": ">=6.0.0 <11.0.0",
27
- "@angular/core": ">=6.0.0 <11.0.0",
28
- "@angular/material": ">=6.0.0 <11.0.0"
26
+ "@angular/core": ">=6.0.0 <15.0.0",
27
+ "@angular/material": ">=6.0.0 <15.0.0"
28
+ },
29
+ "module": "fesm2015/ng-mat-select-infinite-scroll.mjs",
30
+ "es2020": "fesm2020/ng-mat-select-infinite-scroll.mjs",
31
+ "esm2020": "esm2020/ng-mat-select-infinite-scroll.mjs",
32
+ "fesm2020": "fesm2020/ng-mat-select-infinite-scroll.mjs",
33
+ "fesm2015": "fesm2015/ng-mat-select-infinite-scroll.mjs",
34
+ "typings": "index.d.ts",
35
+ "exports": {
36
+ "./package.json": {
37
+ "default": "./package.json"
38
+ },
39
+ ".": {
40
+ "types": "./index.d.ts",
41
+ "esm2020": "./esm2020/ng-mat-select-infinite-scroll.mjs",
42
+ "es2020": "./fesm2020/ng-mat-select-infinite-scroll.mjs",
43
+ "es2015": "./fesm2015/ng-mat-select-infinite-scroll.mjs",
44
+ "node": "./fesm2015/ng-mat-select-infinite-scroll.mjs",
45
+ "default": "./fesm2020/ng-mat-select-infinite-scroll.mjs"
46
+ }
29
47
  },
30
- "main": "bundles/ng-mat-select-infinite-scroll.umd.js",
31
- "module": "fesm2015/ng-mat-select-infinite-scroll.js",
32
- "es2015": "fesm2015/ng-mat-select-infinite-scroll.js",
33
- "esm2015": "esm2015/ng-mat-select-infinite-scroll.js",
34
- "fesm2015": "fesm2015/ng-mat-select-infinite-scroll.js",
35
- "typings": "ng-mat-select-infinite-scroll.d.ts",
36
- "metadata": "ng-mat-select-infinite-scroll.metadata.json",
37
48
  "sideEffects": false,
38
49
  "dependencies": {
39
- "tslib": "^2.0.0"
50
+ "tslib": "^2.3.0"
40
51
  }
41
- }
52
+ }
File without changes
@@ -1,117 +0,0 @@
1
- (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/select'), require('rxjs/operators'), require('rxjs')) :
3
- typeof define === 'function' && define.amd ? define('ng-mat-select-infinite-scroll', ['exports', '@angular/core', '@angular/material/select', 'rxjs/operators', 'rxjs'], factory) :
4
- (global = global || self, factory(global['ng-mat-select-infinite-scroll'] = {}, global.ng.core, global.ng.material.select, global.rxjs.operators, global.rxjs));
5
- }(this, (function (exports, core, select, operators, rxjs) { 'use strict';
6
-
7
- var MatSelectInfiniteScrollDirective = /** @class */ (function () {
8
- function MatSelectInfiniteScrollDirective(matSelect, ngZone) {
9
- this.matSelect = matSelect;
10
- this.ngZone = ngZone;
11
- this.threshold = '15%';
12
- this.debounceTime = 150;
13
- this.infiniteScroll = new core.EventEmitter();
14
- this.thrPx = 0;
15
- this.thrPc = 0;
16
- this.singleOptionHeight = select.SELECT_ITEM_HEIGHT_EM;
17
- this.destroyed$ = new rxjs.Subject();
18
- }
19
- MatSelectInfiniteScrollDirective.prototype.ngOnInit = function () {
20
- this.evaluateThreshold();
21
- };
22
- MatSelectInfiniteScrollDirective.prototype.ngAfterViewInit = function () {
23
- var _this = this;
24
- this.matSelect.openedChange.pipe(operators.takeUntil(this.destroyed$)).subscribe(function (opened) {
25
- if (opened) {
26
- _this.panel = _this.matSelect.panel.nativeElement;
27
- _this.singleOptionHeight = _this.getSelectItemHeightPx();
28
- _this.registerScrollListener();
29
- }
30
- });
31
- };
32
- MatSelectInfiniteScrollDirective.prototype.ngOnDestroy = function () {
33
- this.destroyed$.next(true);
34
- this.destroyed$.complete();
35
- };
36
- MatSelectInfiniteScrollDirective.prototype.evaluateThreshold = function () {
37
- if (this.threshold.lastIndexOf('%') > -1) {
38
- this.thrPx = 0;
39
- this.thrPc = (parseFloat(this.threshold) / 100);
40
- }
41
- else {
42
- this.thrPx = parseFloat(this.threshold);
43
- this.thrPc = 0;
44
- }
45
- };
46
- MatSelectInfiniteScrollDirective.prototype.registerScrollListener = function () {
47
- var _this = this;
48
- rxjs.fromEvent(this.panel, 'scroll').pipe(operators.takeUntil(this.destroyed$), operators.debounceTime(this.debounceTime), operators.tap(function (event) {
49
- _this.handleScrollEvent(event);
50
- })).subscribe();
51
- };
52
- MatSelectInfiniteScrollDirective.prototype.handleScrollEvent = function (event) {
53
- var _this = this;
54
- this.ngZone.runOutsideAngular(function () {
55
- if (_this.complete) {
56
- return;
57
- }
58
- var countOfRenderedOptions = _this.matSelect.options.length;
59
- var infiniteScrollDistance = _this.singleOptionHeight * countOfRenderedOptions;
60
- var threshold = _this.thrPc !== 0 ? (infiniteScrollDistance * _this.thrPc) : _this.thrPx;
61
- var scrolledDistance = _this.panel.clientHeight + event.target.scrollTop;
62
- if ((scrolledDistance + threshold) >= infiniteScrollDistance) {
63
- _this.ngZone.run(function () { return _this.infiniteScroll.emit(); });
64
- }
65
- });
66
- };
67
- MatSelectInfiniteScrollDirective.prototype.getSelectItemHeightPx = function () {
68
- return parseFloat(getComputedStyle(this.panel).fontSize) * select.SELECT_ITEM_HEIGHT_EM;
69
- };
70
- return MatSelectInfiniteScrollDirective;
71
- }());
72
- MatSelectInfiniteScrollDirective.decorators = [
73
- { type: core.Directive, args: [{
74
- selector: '[msInfiniteScroll]'
75
- },] }
76
- ];
77
- MatSelectInfiniteScrollDirective.ctorParameters = function () { return [
78
- { type: select.MatSelect },
79
- { type: core.NgZone }
80
- ]; };
81
- MatSelectInfiniteScrollDirective.propDecorators = {
82
- threshold: [{ type: core.Input }],
83
- debounceTime: [{ type: core.Input }],
84
- complete: [{ type: core.Input }],
85
- infiniteScroll: [{ type: core.Output }]
86
- };
87
-
88
- var MatSelectInfiniteScrollModule = /** @class */ (function () {
89
- function MatSelectInfiniteScrollModule() {
90
- }
91
- return MatSelectInfiniteScrollModule;
92
- }());
93
- MatSelectInfiniteScrollModule.decorators = [
94
- { type: core.NgModule, args: [{
95
- declarations: [MatSelectInfiniteScrollDirective],
96
- imports: [
97
- select.MatSelectModule
98
- ],
99
- exports: [MatSelectInfiniteScrollDirective]
100
- },] }
101
- ];
102
-
103
- /*
104
- * Public API Surface of ng-mat-select-infinite-scroll
105
- */
106
-
107
- /**
108
- * Generated bundle index. Do not edit.
109
- */
110
-
111
- exports.MatSelectInfiniteScrollDirective = MatSelectInfiniteScrollDirective;
112
- exports.MatSelectInfiniteScrollModule = MatSelectInfiniteScrollModule;
113
-
114
- Object.defineProperty(exports, '__esModule', { value: true });
115
-
116
- })));
117
- //# sourceMappingURL=ng-mat-select-infinite-scroll.umd.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ng-mat-select-infinite-scroll.umd.js","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, SELECT_ITEM_HEIGHT_EM} from '@angular/material/select';\nimport {debounceTime, takeUntil, tap} from 'rxjs/operators';\nimport {fromEvent, Subject} from 'rxjs';\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) {\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":["EventEmitter","SELECT_ITEM_HEIGHT_EM","Subject","takeUntil","fromEvent","debounceTime","tap","Directive","MatSelect","NgZone","Input","Output","NgModule","MatSelectModule"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/material/select"),require("rxjs/operators"),require("rxjs")):"function"==typeof define&&define.amd?define("ng-mat-select-infinite-scroll",["exports","@angular/core","@angular/material/select","rxjs/operators","rxjs"],t):t((e=e||self)["ng-mat-select-infinite-scroll"]={},e.ng.core,e.ng.material.select,e.rxjs.operators,e.rxjs)}(this,(function(e,t,r,n,i){"use strict";var o=function(){function e(e,n){this.matSelect=e,this.ngZone=n,this.threshold="15%",this.debounceTime=150,this.infiniteScroll=new t.EventEmitter,this.thrPx=0,this.thrPc=0,this.singleOptionHeight=r.SELECT_ITEM_HEIGHT_EM,this.destroyed$=new i.Subject}return e.prototype.ngOnInit=function(){this.evaluateThreshold()},e.prototype.ngAfterViewInit=function(){var e=this;this.matSelect.openedChange.pipe(n.takeUntil(this.destroyed$)).subscribe((function(t){t&&(e.panel=e.matSelect.panel.nativeElement,e.singleOptionHeight=e.getSelectItemHeightPx(),e.registerScrollListener())}))},e.prototype.ngOnDestroy=function(){this.destroyed$.next(!0),this.destroyed$.complete()},e.prototype.evaluateThreshold=function(){this.threshold.lastIndexOf("%")>-1?(this.thrPx=0,this.thrPc=parseFloat(this.threshold)/100):(this.thrPx=parseFloat(this.threshold),this.thrPc=0)},e.prototype.registerScrollListener=function(){var e=this;i.fromEvent(this.panel,"scroll").pipe(n.takeUntil(this.destroyed$),n.debounceTime(this.debounceTime),n.tap((function(t){e.handleScrollEvent(t)}))).subscribe()},e.prototype.handleScrollEvent=function(e){var t=this;this.ngZone.runOutsideAngular((function(){if(!t.complete){var r=t.matSelect.options.length,n=t.singleOptionHeight*r,i=0!==t.thrPc?n*t.thrPc:t.thrPx;t.panel.clientHeight+e.target.scrollTop+i>=n&&t.ngZone.run((function(){return t.infiniteScroll.emit()}))}}))},e.prototype.getSelectItemHeightPx=function(){return parseFloat(getComputedStyle(this.panel).fontSize)*r.SELECT_ITEM_HEIGHT_EM},e}();o.decorators=[{type:t.Directive,args:[{selector:"[msInfiniteScroll]"}]}],o.ctorParameters=function(){return[{type:r.MatSelect},{type:t.NgZone}]},o.propDecorators={threshold:[{type:t.Input}],debounceTime:[{type:t.Input}],complete:[{type:t.Input}],infiniteScroll:[{type:t.Output}]};var s=function(){};s.decorators=[{type:t.NgModule,args:[{declarations:[o],imports:[r.MatSelectModule],exports:[o]}]}],e.MatSelectInfiniteScrollDirective=o,e.MatSelectInfiniteScrollModule=s,Object.defineProperty(e,"__esModule",{value:!0})}));
2
- //# sourceMappingURL=ng-mat-select-infinite-scroll.umd.min.js.map
@@ -1 +0,0 @@
1
- {"version":3,"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"],"names":["MatSelectInfiniteScrollDirective","matSelect","ngZone","this","threshold","debounceTime","infiniteScroll","EventEmitter","thrPx","thrPc","singleOptionHeight","SELECT_ITEM_HEIGHT_EM","destroyed$","Subject","prototype","ngOnInit","evaluateThreshold","ngAfterViewInit","_this","openedChange","pipe","takeUntil","subscribe","opened","panel","nativeElement","getSelectItemHeightPx","registerScrollListener","ngOnDestroy","next","complete","lastIndexOf","parseFloat","fromEvent","tap","event","handleScrollEvent","runOutsideAngular","countOfRenderedOptions","options","length","infiniteScrollDistance","clientHeight","target","scrollTop","run","emit","getComputedStyle","fontSize","Directive","args","selector","MatSelect","NgZone","Input","Output","NgModule","declarations","imports","MatSelectModule","exports"],"mappings":"wfAsBE,SAAAA,EAAoBC,EAA8BC,GAA9BC,KAAAF,UAAAA,EAA8BE,KAAAD,OAAAA,EAZzCC,KAAAC,UAAY,MACZD,KAAAE,aAAe,IAEdF,KAAAG,eAAiB,IAAIC,EAAAA,aAGvBJ,KAAAK,MAAQ,EACRL,KAAAM,MAAQ,EACRN,KAAAO,mBAAqBC,EAAAA,sBAErBR,KAAAS,WAAa,IAAIC,EAAAA,eAKzBb,EAAAc,UAAAC,SAAA,WACEZ,KAAKa,qBAGPhB,EAAAc,UAAAG,gBAAA,WAAA,IAAAC,EAAAf,KACEA,KAAKF,UAAUkB,aAAaC,KAC1BC,EAAAA,UAAUlB,KAAKS,aACfU,WAAU,SAACC,GACPA,IACFL,EAAKM,MAAQN,EAAKjB,UAAUuB,MAAMC,cAClCP,EAAKR,mBAAqBQ,EAAKQ,wBAC/BR,EAAKS,8BAKX3B,EAAAc,UAAAc,YAAA,WACEzB,KAAKS,WAAWiB,MAAK,GACrB1B,KAAKS,WAAWkB,YAGlB9B,EAAAc,UAAAE,kBAAA,WACMb,KAAKC,UAAU2B,YAAY,MAAQ,GACrC5B,KAAKK,MAAQ,EACbL,KAAKM,MAASuB,WAAW7B,KAAKC,WAAa,MAG3CD,KAAKK,MAAQwB,WAAW7B,KAAKC,WAC7BD,KAAKM,MAAQ,IAIjBT,EAAAc,UAAAa,uBAAA,WAAA,IAAAT,EAAAf,KACE8B,EAAAA,UAAU9B,KAAKqB,MAAO,UAAUJ,KAC9BC,EAAAA,UAAUlB,KAAKS,YACfP,EAAAA,aAAaF,KAAKE,cAClB6B,EAAAA,KAAI,SAACC,GACHjB,EAAKkB,kBAAkBD,OAEzBb,aAGJtB,EAAAc,UAAAsB,kBAAA,SAAkBD,GAAlB,IAAAjB,EAAAf,KACEA,KAAKD,OAAOmC,mBAAkB,WAC5B,IAAInB,EAAKY,SAAT,CAGA,IAAMQ,EAAyBpB,EAAKjB,UAAUsC,QAAQC,OAChDC,EAAyBvB,EAAKR,mBAAqB4B,EACnDlC,EAA2B,IAAfc,EAAKT,MAAegC,EAAyBvB,EAAKT,MAASS,EAAKV,MAEzDU,EAAKM,MAAMkB,aAAeP,EAAMQ,OAAOC,UAExCxC,GAAcqC,GACpCvB,EAAKhB,OAAO2C,KAAI,WAAM,OAAA3B,EAAKZ,eAAewC,eAKhD9C,EAAAc,UAAAY,sBAAA,WACE,OAAOM,WAAWe,iBAAiB5C,KAAKqB,OAAOwB,UAAYrC,EAAAA,gDAhF9DsC,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,kEALJC,EAAAA,iBAD+CC,EAAAA,6CAUpDC,EAAAA,4BACAA,EAAAA,wBACAA,EAAAA,8BACAC,EAAAA,gBCFH,iCAPCC,EAAAA,SAAQN,KAAA,CAAC,CACRO,aAAc,CAACzD,GACf0D,QAAS,CACPC,EAAAA,iBAEFC,QAAS,CAAC5D","sourcesContent":["import {AfterViewInit, Directive, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output} from '@angular/core';\nimport {MatSelect, SELECT_ITEM_HEIGHT_EM} from '@angular/material/select';\nimport {debounceTime, takeUntil, tap} from 'rxjs/operators';\nimport {fromEvent, Subject} from 'rxjs';\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) {\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"]}
@@ -1,81 +0,0 @@
1
- import { Directive, EventEmitter, Input, NgZone, Output } from '@angular/core';
2
- import { MatSelect, SELECT_ITEM_HEIGHT_EM } from '@angular/material/select';
3
- import { debounceTime, takeUntil, tap } from 'rxjs/operators';
4
- import { fromEvent, Subject } from 'rxjs';
5
- export class MatSelectInfiniteScrollDirective {
6
- constructor(matSelect, ngZone) {
7
- this.matSelect = matSelect;
8
- this.ngZone = ngZone;
9
- this.threshold = '15%';
10
- this.debounceTime = 150;
11
- this.infiniteScroll = new EventEmitter();
12
- this.thrPx = 0;
13
- this.thrPc = 0;
14
- this.singleOptionHeight = SELECT_ITEM_HEIGHT_EM;
15
- this.destroyed$ = new Subject();
16
- }
17
- ngOnInit() {
18
- this.evaluateThreshold();
19
- }
20
- ngAfterViewInit() {
21
- this.matSelect.openedChange.pipe(takeUntil(this.destroyed$)).subscribe((opened) => {
22
- if (opened) {
23
- this.panel = this.matSelect.panel.nativeElement;
24
- this.singleOptionHeight = this.getSelectItemHeightPx();
25
- this.registerScrollListener();
26
- }
27
- });
28
- }
29
- ngOnDestroy() {
30
- this.destroyed$.next(true);
31
- this.destroyed$.complete();
32
- }
33
- evaluateThreshold() {
34
- if (this.threshold.lastIndexOf('%') > -1) {
35
- this.thrPx = 0;
36
- this.thrPc = (parseFloat(this.threshold) / 100);
37
- }
38
- else {
39
- this.thrPx = parseFloat(this.threshold);
40
- this.thrPc = 0;
41
- }
42
- }
43
- registerScrollListener() {
44
- fromEvent(this.panel, 'scroll').pipe(takeUntil(this.destroyed$), debounceTime(this.debounceTime), tap((event) => {
45
- this.handleScrollEvent(event);
46
- })).subscribe();
47
- }
48
- handleScrollEvent(event) {
49
- this.ngZone.runOutsideAngular(() => {
50
- if (this.complete) {
51
- return;
52
- }
53
- const countOfRenderedOptions = this.matSelect.options.length;
54
- const infiniteScrollDistance = this.singleOptionHeight * countOfRenderedOptions;
55
- const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;
56
- const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;
57
- if ((scrolledDistance + threshold) >= infiniteScrollDistance) {
58
- this.ngZone.run(() => this.infiniteScroll.emit());
59
- }
60
- });
61
- }
62
- getSelectItemHeightPx() {
63
- return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
64
- }
65
- }
66
- MatSelectInfiniteScrollDirective.decorators = [
67
- { type: Directive, args: [{
68
- selector: '[msInfiniteScroll]'
69
- },] }
70
- ];
71
- MatSelectInfiniteScrollDirective.ctorParameters = () => [
72
- { type: MatSelect },
73
- { type: NgZone }
74
- ];
75
- MatSelectInfiniteScrollDirective.propDecorators = {
76
- threshold: [{ type: Input }],
77
- debounceTime: [{ type: Input }],
78
- complete: [{ type: Input }],
79
- infiniteScroll: [{ type: Output }]
80
- };
81
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctbWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwvc3JjL2xpYi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQXFCLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUMvRyxPQUFPLEVBQUMsU0FBUyxFQUFFLHFCQUFxQixFQUFDLE1BQU0sMEJBQTBCLENBQUM7QUFDMUUsT0FBTyxFQUFDLFlBQVksRUFBRSxTQUFTLEVBQUUsR0FBRyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDNUQsT0FBTyxFQUFDLFNBQVMsRUFBRSxPQUFPLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFLeEMsTUFBTSxPQUFPLGdDQUFnQztJQWMzQyxZQUFvQixTQUFvQixFQUFVLE1BQWM7UUFBNUMsY0FBUyxHQUFULFNBQVMsQ0FBVztRQUFVLFdBQU0sR0FBTixNQUFNLENBQVE7UUFadkQsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUNsQixpQkFBWSxHQUFHLEdBQUcsQ0FBQztRQUVsQixtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFHNUMsVUFBSyxHQUFHLENBQUMsQ0FBQztRQUNWLFVBQUssR0FBRyxDQUFDLENBQUM7UUFDVix1QkFBa0IsR0FBRyxxQkFBcUIsQ0FBQztRQUUzQyxlQUFVLEdBQUcsSUFBSSxPQUFPLEVBQVcsQ0FBQztJQUc1QyxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLFNBQVMsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUM5QixTQUFTLENB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MUQsS0FBSzsyQkFDTCxLQUFLO3VCQUNMLEtBQUs7NkJBQ0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7QWZ0ZXJWaWV3SW5pdCwgRGlyZWN0aXZlLCBFdmVudEVtaXR0ZXIsIElucHV0LCBOZ1pvbmUsIE9uRGVzdHJveSwgT25Jbml0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtNYXRTZWxlY3QsIFNFTEVDVF9JVEVNX0hFSUdIVF9FTX0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc2VsZWN0JztcbmltcG9ydCB7ZGVib3VuY2VUaW1lLCB0YWtlVW50aWwsIHRhcH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHtmcm9tRXZlbnQsIFN1YmplY3R9IGZyb20gJ3J4anMnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbbXNJbmZpbml0ZVNjcm9sbF0nXG59KVxuZXhwb3J0IGNsYXNzIE1hdFNlbGVjdEluZmluaXRlU2Nyb2xsRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3ksIEFmdGVyVmlld0luaXQge1xuXG4gIEBJbnB1dCgpIHRocmVzaG9sZCA9ICcxNSUnO1xuICBASW5wdXQoKSBkZWJvdW5jZVRpbWUgPSAxNTA7XG4gIEBJbnB1dCgpIGNvbXBsZXRlOiBib29sZWFuO1xuICBAT3V0cHV0KCkgaW5maW5pdGVTY3JvbGwgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgcHJpdmF0ZSBwYW5lbDogRWxlbWVudDtcbiAgcHJpdmF0ZSB0aHJQeCA9IDA7XG4gIHByaXZhdGUgdGhyUGMgPSAwO1xuICBwcml2YXRlIHNpbmdsZU9wdGlvbkhlaWdodCA9IFNFTEVDVF9JVEVNX0hFSUdIVF9FTTtcblxuICBwcml2YXRlIGRlc3Ryb3llZCQgPSBuZXcgU3ViamVjdDxib29sZWFuPigpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgbWF0U2VsZWN0OiBNYXRTZWxlY3QsIHByaXZhdGUgbmdab25lOiBOZ1pvbmUpIHtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuZXZhbHVhdGVUaHJlc2hvbGQoKTtcbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICB0aGlzLm1hdFNlbGVjdC5vcGVuZWRDaGFuZ2UucGlwZShcbiAgICAgIHRha2VVbnRpbCh0aGlzLmRlc3Ryb3llZCQpXG4gICAgKS5zdWJzY3JpYmUoKG9wZW5lZCkgPT4ge1xuICAgICAgaWYgKG9wZW5lZCkge1xuICAgICAgICB0aGlzLnBhbmVsID0gdGhpcy5tYXRTZWxlY3QucGFuZWwubmF0aXZlRWxlbWVudDtcbiAgICAgICAgdGhpcy5zaW5nbGVPcHRpb25IZWlnaHQgPSB0aGlzLmdldFNlbGVjdEl0ZW1IZWlnaHRQeCgpO1xuICAgICAgICB0aGlzLnJlZ2lzdGVyU2Nyb2xsTGlzdGVuZXIoKTtcbiAgICAgIH1cbiAgICB9KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuZGVzdHJveWVkJC5uZXh0KHRydWUpO1xuICAgIHRoaXMuZGVzdHJveWVkJC5jb21wbGV0ZSgpO1xuICB9XG5cbiAgZXZhbHVhdGVUaHJlc2hvbGQoKSB7XG4gICAgaWYgKHRoaXMudGhyZXNob2xkLmxhc3RJbmRleE9mKCclJykgPiAtMSkge1xuICAgICAgdGhpcy50aHJQeCA9IDA7XG4gICAgICB0aGlzLnRoclBjID0gKHBhcnNlRmxvYXQodGhpcy50aHJlc2hvbGQpIC8gMTAwKTtcblxuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnRoclB4ID0gcGFyc2VGbG9hdCh0aGlzLnRocmVzaG9sZCk7XG4gICAgICB0aGlzLnRoclBjID0gMDtcbiAgICB9XG4gIH1cblxuICByZWdpc3RlclNjcm9sbExpc3RlbmVyKCkge1xuICAgIGZyb21FdmVudCh0aGlzLnBhbmVsLCAnc2Nyb2xsJykucGlwZShcbiAgICAgIHRha2VVbnRpbCh0aGlzLmRlc3Ryb3llZCQpLFxuICAgICAgZGVib3VuY2VUaW1lKHRoaXMuZGVib3VuY2VUaW1lKSxcbiAgICAgIHRhcCgoZXZlbnQpID0+IHtcbiAgICAgICAgdGhpcy5oYW5kbGVTY3JvbGxFdmVudChldmVudCk7XG4gICAgICB9KVxuICAgICkuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBoYW5kbGVTY3JvbGxFdmVudChldmVudCkge1xuICAgIHRoaXMubmdab25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgIGlmICh0aGlzLmNvbXBsZXRlKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cbiAgICAgIGNvbnN0IGNvdW50T2ZSZW5kZXJlZE9wdGlvbnMgPSB0aGlzLm1hdFNlbGVjdC5vcHRpb25zLmxlbmd0aDtcbiAgICAgIGNvbnN0IGluZmluaXRlU2Nyb2xsRGlzdGFuY2UgPSB0aGlzLnNpbmdsZU9wdGlvbkhlaWdodCAqIGNvdW50T2ZSZW5kZXJlZE9wdGlvbnM7XG4gICAgICBjb25zdCB0aHJlc2hvbGQgPSB0aGlzLnRoclBjICE9PSAwID8gKGluZmluaXRlU2Nyb2xsRGlzdGFuY2UgKiB0aGlzLnRoclBjKSA6IHRoaXMudGhyUHg7XG5cbiAgICAgIGNvbnN0IHNjcm9sbGVkRGlzdGFuY2UgPSB0aGlzLnBhbmVsLmNsaWVudEhlaWdodCArIGV2ZW50LnRhcmdldC5zY3JvbGxUb3A7XG5cbiAgICAgIGlmICgoc2Nyb2xsZWREaXN0YW5jZSArIHRocmVzaG9sZCkgPj0gaW5maW5pdGVTY3JvbGxEaXN0YW5jZSkge1xuICAgICAgICB0aGlzLm5nWm9uZS5ydW4oKCkgPT4gdGhpcy5pbmZpbml0ZVNjcm9sbC5lbWl0KCkpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG5cbiAgZ2V0U2VsZWN0SXRlbUhlaWdodFB4KCk6IG51bWJlciB7XG4gICAgcmV0dXJuIHBhcnNlRmxvYXQoZ2V0Q29tcHV0ZWRTdHlsZSh0aGlzLnBhbmVsKS5mb250U2l6ZSkgKiBTRUxFQ1RfSVRFTV9IRUlHSFRfRU07XG4gIH1cblxufVxuIl19
@@ -1,15 +0,0 @@
1
- import { NgModule } from '@angular/core';
2
- import { MatSelectInfiniteScrollDirective } from './mat-select-infinite-scroll.directive';
3
- import { MatSelectModule } from '@angular/material/select';
4
- export class MatSelectInfiniteScrollModule {
5
- }
6
- MatSelectInfiniteScrollModule.decorators = [
7
- { type: NgModule, args: [{
8
- declarations: [MatSelectInfiniteScrollDirective],
9
- imports: [
10
- MatSelectModule
11
- ],
12
- exports: [MatSelectInfiniteScrollDirective]
13
- },] }
14
- ];
15
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctbWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwvc3JjL2xpYi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQUMsZ0NBQWdDLEVBQUMsTUFBTSx3Q0FBd0MsQ0FBQztBQUN4RixPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0sMEJBQTBCLENBQUM7QUFTekQsTUFBTSxPQUFPLDZCQUE2Qjs7O1lBUHpDLFFBQVEsU0FBQztnQkFDUixZQUFZLEVBQUUsQ0FBQyxnQ0FBZ0MsQ0FBQztnQkFDaEQsT0FBTyxFQUFFO29CQUNQLGVBQWU7aUJBQ2hCO2dCQUNELE9BQU8sRUFBRSxDQUFDLGdDQUFnQyxDQUFDO2FBQzVDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtOZ01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge01hdFNlbGVjdEluZmluaXRlU2Nyb2xsRGlyZWN0aXZlfSBmcm9tICcuL21hdC1zZWxlY3QtaW5maW5pdGUtc2Nyb2xsLmRpcmVjdGl2ZSc7XG5pbXBvcnQge01hdFNlbGVjdE1vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc2VsZWN0JztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbTWF0U2VsZWN0SW5maW5pdGVTY3JvbGxEaXJlY3RpdmVdLFxuICBpbXBvcnRzOiBbXG4gICAgTWF0U2VsZWN0TW9kdWxlXG4gIF0sXG4gIGV4cG9ydHM6IFtNYXRTZWxlY3RJbmZpbml0ZVNjcm9sbERpcmVjdGl2ZV1cbn0pXG5leHBvcnQgY2xhc3MgTWF0U2VsZWN0SW5maW5pdGVTY3JvbGxNb2R1bGUge1xufVxuIl19
@@ -1,104 +0,0 @@
1
- import { EventEmitter, Directive, NgZone, Input, Output, NgModule } from '@angular/core';
2
- import { SELECT_ITEM_HEIGHT_EM, MatSelect, MatSelectModule } from '@angular/material/select';
3
- import { takeUntil, debounceTime, tap } from 'rxjs/operators';
4
- import { Subject, fromEvent } from 'rxjs';
5
-
6
- class MatSelectInfiniteScrollDirective {
7
- constructor(matSelect, ngZone) {
8
- this.matSelect = matSelect;
9
- this.ngZone = ngZone;
10
- this.threshold = '15%';
11
- this.debounceTime = 150;
12
- this.infiniteScroll = new EventEmitter();
13
- this.thrPx = 0;
14
- this.thrPc = 0;
15
- this.singleOptionHeight = SELECT_ITEM_HEIGHT_EM;
16
- this.destroyed$ = new Subject();
17
- }
18
- ngOnInit() {
19
- this.evaluateThreshold();
20
- }
21
- ngAfterViewInit() {
22
- this.matSelect.openedChange.pipe(takeUntil(this.destroyed$)).subscribe((opened) => {
23
- if (opened) {
24
- this.panel = this.matSelect.panel.nativeElement;
25
- this.singleOptionHeight = this.getSelectItemHeightPx();
26
- this.registerScrollListener();
27
- }
28
- });
29
- }
30
- ngOnDestroy() {
31
- this.destroyed$.next(true);
32
- this.destroyed$.complete();
33
- }
34
- evaluateThreshold() {
35
- if (this.threshold.lastIndexOf('%') > -1) {
36
- this.thrPx = 0;
37
- this.thrPc = (parseFloat(this.threshold) / 100);
38
- }
39
- else {
40
- this.thrPx = parseFloat(this.threshold);
41
- this.thrPc = 0;
42
- }
43
- }
44
- registerScrollListener() {
45
- fromEvent(this.panel, 'scroll').pipe(takeUntil(this.destroyed$), debounceTime(this.debounceTime), tap((event) => {
46
- this.handleScrollEvent(event);
47
- })).subscribe();
48
- }
49
- handleScrollEvent(event) {
50
- this.ngZone.runOutsideAngular(() => {
51
- if (this.complete) {
52
- return;
53
- }
54
- const countOfRenderedOptions = this.matSelect.options.length;
55
- const infiniteScrollDistance = this.singleOptionHeight * countOfRenderedOptions;
56
- const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;
57
- const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;
58
- if ((scrolledDistance + threshold) >= infiniteScrollDistance) {
59
- this.ngZone.run(() => this.infiniteScroll.emit());
60
- }
61
- });
62
- }
63
- getSelectItemHeightPx() {
64
- return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
65
- }
66
- }
67
- MatSelectInfiniteScrollDirective.decorators = [
68
- { type: Directive, args: [{
69
- selector: '[msInfiniteScroll]'
70
- },] }
71
- ];
72
- MatSelectInfiniteScrollDirective.ctorParameters = () => [
73
- { type: MatSelect },
74
- { type: NgZone }
75
- ];
76
- MatSelectInfiniteScrollDirective.propDecorators = {
77
- threshold: [{ type: Input }],
78
- debounceTime: [{ type: Input }],
79
- complete: [{ type: Input }],
80
- infiniteScroll: [{ type: Output }]
81
- };
82
-
83
- class MatSelectInfiniteScrollModule {
84
- }
85
- MatSelectInfiniteScrollModule.decorators = [
86
- { type: NgModule, args: [{
87
- declarations: [MatSelectInfiniteScrollDirective],
88
- imports: [
89
- MatSelectModule
90
- ],
91
- exports: [MatSelectInfiniteScrollDirective]
92
- },] }
93
- ];
94
-
95
- /*
96
- * Public API Surface of ng-mat-select-infinite-scroll
97
- */
98
-
99
- /**
100
- * Generated bundle index. Do not edit.
101
- */
102
-
103
- export { MatSelectInfiniteScrollDirective, MatSelectInfiniteScrollModule };
104
- //# sourceMappingURL=ng-mat-select-infinite-scroll.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ng-mat-select-infinite-scroll.js","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, SELECT_ITEM_HEIGHT_EM} from '@angular/material/select';\nimport {debounceTime, takeUntil, tap} from 'rxjs/operators';\nimport {fromEvent, Subject} from 'rxjs';\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) {\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":";;;;;MAQa,gCAAgC;IAc3C,YAAoB,SAAoB,EAAU,MAAc;QAA5C,cAAS,GAAT,SAAS,CAAW;QAAU,WAAM,GAAN,MAAM,CAAQ;QAZvD,cAAS,GAAG,KAAK,CAAC;QAClB,iBAAY,GAAG,GAAG,CAAC;QAElB,mBAAc,GAAG,IAAI,YAAY,EAAQ,CAAC;QAG5C,UAAK,GAAG,CAAC,CAAC;QACV,UAAK,GAAG,CAAC,CAAC;QACV,uBAAkB,GAAG,qBAAqB,CAAC;QAE3C,eAAU,GAAG,IAAI,OAAO,EAAW,CAAC;KAG3C;IAED,QAAQ;QACN,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,eAAe;QACb,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAC9B,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAC3B,CAAC,SAAS,CAAC,CAAC,MAAM;YACjB,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,aAAa,CAAC;gBAChD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBACvD,IAAI,CAAC,sBAAsB,EAAE,CAAC;aAC/B;SACF,CAAC,CAAC;KACJ;IAED,WAAW;QACT,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC;KAC5B;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE;YACxC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;YACf,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC;SAEjD;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACxC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;SAChB;KACF;IAED,sBAAsB;QACpB,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,IAAI,CAClC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,EAC1B,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,EAC/B,GAAG,CAAC,CAAC,KAAK;YACR,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC/B,CAAC,CACH,CAAC,SAAS,EAAE,CAAC;KACf;IAED,iBAAiB,CAAC,KAAK;QACrB,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC;YAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YACD,MAAM,sBAAsB,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC;YAC7D,MAAM,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,GAAG,sBAAsB,CAAC;YAChF,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,sBAAsB,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;YAExF,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;YAE1E,IAAI,CAAC,gBAAgB,GAAG,SAAS,KAAK,sBAAsB,EAAE;gBAC5D,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC;aACnD;SACF,CAAC,CAAC;KACJ;IAED,qBAAqB;QACnB,OAAO,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,qBAAqB,CAAC;KAClF;;;YAjFF,SAAS,SAAC;gBACT,QAAQ,EAAE,oBAAoB;aAC/B;;;YANO,SAAS;YADsC,MAAM;;;wBAU1D,KAAK;2BACL,KAAK;uBACL,KAAK;6BACL,MAAM;;;MCFI,6BAA6B;;;YAPzC,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,gCAAgC,CAAC;gBAChD,OAAO,EAAE;oBACP,eAAe;iBAChB;gBACD,OAAO,EAAE,CAAC,gCAAgC,CAAC;aAC5C;;;ACVD;;;;ACAA;;;;;;"}
@@ -1,4 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- export * from './public_api';
@@ -1 +0,0 @@
1
- {"__symbolic":"module","version":4,"metadata":{"MatSelectInfiniteScrollDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"[msInfiniteScroll]"}]}],"members":{"threshold":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"debounceTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"complete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"infiniteScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelect","line":22,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":22,"character":60}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"evaluateThreshold":[{"__symbolic":"method"}],"registerScrollListener":[{"__symbolic":"method"}],"handleScrollEvent":[{"__symbolic":"method"}],"getSelectItemHeightPx":[{"__symbolic":"method"}]}},"MatSelectInfiniteScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MatSelectInfiniteScrollDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"MatSelectInfiniteScrollDirective"}]}]}],"members":{}}},"origins":{"MatSelectInfiniteScrollDirective":"./lib/mat-select-infinite-scroll.directive","MatSelectInfiniteScrollModule":"./lib/mat-select-infinite-scroll.module"},"importAs":"ng-mat-select-infinite-scroll"}