ng-mat-select-infinite-scroll 3.0.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.
- package/README.md +8 -4
- package/{esm2015/lib/mat-select-infinite-scroll.directive.js → esm2020/lib/mat-select-infinite-scroll.directive.mjs} +3 -3
- package/{esm2015/lib/mat-select-infinite-scroll.module.js → esm2020/lib/mat-select-infinite-scroll.module.mjs} +5 -7
- package/{esm2015/ng-mat-select-infinite-scroll.js → esm2020/ng-mat-select-infinite-scroll.mjs} +0 -0
- package/{esm2015/public-api.js → esm2020/public-api.mjs} +0 -0
- package/fesm2015/{ng-mat-select-infinite-scroll.js → ng-mat-select-infinite-scroll.mjs} +8 -10
- package/fesm2015/ng-mat-select-infinite-scroll.mjs.map +1 -0
- package/fesm2020/ng-mat-select-infinite-scroll.mjs +113 -0
- package/fesm2020/ng-mat-select-infinite-scroll.mjs.map +1 -0
- package/{ng-mat-select-infinite-scroll.d.ts → index.d.ts} +0 -0
- package/lib/mat-select-infinite-scroll.directive.d.ts +1 -1
- package/ng-mat-select-infinite-scroll-4.0.0.tgz +0 -0
- package/package.json +23 -10
- package/bundles/ng-mat-select-infinite-scroll.umd.js +0 -147
- package/bundles/ng-mat-select-infinite-scroll.umd.js.map +0 -1
- package/fesm2015/ng-mat-select-infinite-scroll.js.map +0 -1
- package/ng-mat-select-infinite-scroll-3.0.1.tgz +0 -0
package/README.md
CHANGED
|
@@ -60,10 +60,10 @@ Then place the msInfiniteScroll directive on the `mat-select` component
|
|
|
60
60
|
|
|
61
61
|
### Compatibility
|
|
62
62
|
|
|
63
|
-
* `@angular/core`: `>=6.0.0 <
|
|
64
|
-
* `@angular/cdk`: `>=6.0.0 <
|
|
65
|
-
* `@angular/material`: `>=6.0.0 <
|
|
66
|
-
* `rxjs`: `^
|
|
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)
|
|
@@ -66,9 +66,9 @@ export class MatSelectInfiniteScrollDirective {
|
|
|
66
66
|
return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
|
-
MatSelectInfiniteScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
70
|
-
MatSelectInfiniteScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
71
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
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
72
|
type: Directive,
|
|
73
73
|
args: [{
|
|
74
74
|
selector: '[msInfiniteScroll]'
|
|
@@ -4,12 +4,10 @@ import { MatSelectModule } from '@angular/material/select';
|
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export class MatSelectInfiniteScrollModule {
|
|
6
6
|
}
|
|
7
|
-
MatSelectInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8
|
-
MatSelectInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
9
|
-
MatSelectInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
10
|
-
|
|
11
|
-
]] });
|
|
12
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MatSelectInfiniteScrollModule, decorators: [{
|
|
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: [{
|
|
13
11
|
type: NgModule,
|
|
14
12
|
args: [{
|
|
15
13
|
declarations: [MatSelectInfiniteScrollDirective],
|
|
@@ -19,4 +17,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
|
|
|
19
17
|
exports: [MatSelectInfiniteScrollDirective]
|
|
20
18
|
}]
|
|
21
19
|
}] });
|
|
22
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
20
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctbWF0LXNlbGVjdC1pbmZpbml0ZS1zY3JvbGwvc3JjL2xpYi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQUMsZ0NBQWdDLEVBQUMsTUFBTSx3Q0FBd0MsQ0FBQztBQUN4RixPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0sMEJBQTBCLENBQUM7O0FBU3pELE1BQU0sT0FBTyw2QkFBNkI7OzBIQUE3Qiw2QkFBNkI7MkhBQTdCLDZCQUE2QixpQkFOekIsZ0NBQWdDLGFBRTdDLGVBQWUsYUFFUCxnQ0FBZ0M7MkhBRS9CLDZCQUE2QixZQUp0QyxlQUFlOzJGQUlOLDZCQUE2QjtrQkFQekMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxnQ0FBZ0MsQ0FBQztvQkFDaEQsT0FBTyxFQUFFO3dCQUNQLGVBQWU7cUJBQ2hCO29CQUNELE9BQU8sRUFBRSxDQUFDLGdDQUFnQyxDQUFDO2lCQUM1QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtNYXRTZWxlY3RJbmZpbml0ZVNjcm9sbERpcmVjdGl2ZX0gZnJvbSAnLi9tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC5kaXJlY3RpdmUnO1xuaW1wb3J0IHtNYXRTZWxlY3RNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3NlbGVjdCc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW01hdFNlbGVjdEluZmluaXRlU2Nyb2xsRGlyZWN0aXZlXSxcbiAgaW1wb3J0czogW1xuICAgIE1hdFNlbGVjdE1vZHVsZVxuICBdLFxuICBleHBvcnRzOiBbTWF0U2VsZWN0SW5maW5pdGVTY3JvbGxEaXJlY3RpdmVdXG59KVxuZXhwb3J0IGNsYXNzIE1hdFNlbGVjdEluZmluaXRlU2Nyb2xsTW9kdWxlIHtcbn1cbiJdfQ==
|
package/{esm2015/ng-mat-select-infinite-scroll.js → esm2020/ng-mat-select-infinite-scroll.mjs}
RENAMED
|
File without changes
|
|
File without changes
|
|
@@ -68,9 +68,9 @@ class MatSelectInfiniteScrollDirective {
|
|
|
68
68
|
return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
|
-
MatSelectInfiniteScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
72
|
-
MatSelectInfiniteScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
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
74
|
type: Directive,
|
|
75
75
|
args: [{
|
|
76
76
|
selector: '[msInfiniteScroll]'
|
|
@@ -87,12 +87,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
|
|
|
87
87
|
|
|
88
88
|
class MatSelectInfiniteScrollModule {
|
|
89
89
|
}
|
|
90
|
-
MatSelectInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
91
|
-
MatSelectInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
92
|
-
MatSelectInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
93
|
-
|
|
94
|
-
]] });
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MatSelectInfiniteScrollModule, decorators: [{
|
|
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: [{
|
|
96
94
|
type: NgModule,
|
|
97
95
|
args: [{
|
|
98
96
|
declarations: [MatSelectInfiniteScrollDirective],
|
|
@@ -112,4 +110,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImpor
|
|
|
112
110
|
*/
|
|
113
111
|
|
|
114
112
|
export { MatSelectInfiniteScrollDirective, MatSelectInfiniteScrollModule };
|
|
115
|
-
//# sourceMappingURL=ng-mat-select-infinite-scroll.
|
|
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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"}
|
|
File without changes
|
|
@@ -22,5 +22,5 @@ export declare class MatSelectInfiniteScrollDirective implements OnInit, OnDestr
|
|
|
22
22
|
handleScrollEvent(event: any): void;
|
|
23
23
|
getSelectItemHeightPx(): number;
|
|
24
24
|
static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectInfiniteScrollDirective, never>;
|
|
25
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectInfiniteScrollDirective, "[msInfiniteScroll]", never, { "threshold": "threshold"; "debounceTime": "debounceTime"; "complete": "complete"; }, { "infiniteScroll": "infiniteScroll"; }, never>;
|
|
25
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectInfiniteScrollDirective, "[msInfiniteScroll]", never, { "threshold": "threshold"; "debounceTime": "debounceTime"; "complete": "complete"; }, { "infiniteScroll": "infiniteScroll"; }, never, never, false>;
|
|
26
26
|
}
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ng-mat-select-infinite-scroll",
|
|
3
|
-
"version": "
|
|
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,17 +23,30 @@
|
|
|
23
23
|
],
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"@angular/core": ">=6.0.0 <
|
|
27
|
-
"@angular/material": ">=6.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
|
+
}
|
|
28
47
|
},
|
|
29
|
-
"main": "bundles/ng-mat-select-infinite-scroll.umd.js",
|
|
30
|
-
"module": "fesm2015/ng-mat-select-infinite-scroll.js",
|
|
31
|
-
"es2015": "fesm2015/ng-mat-select-infinite-scroll.js",
|
|
32
|
-
"esm2015": "esm2015/ng-mat-select-infinite-scroll.js",
|
|
33
|
-
"fesm2015": "fesm2015/ng-mat-select-infinite-scroll.js",
|
|
34
|
-
"typings": "ng-mat-select-infinite-scroll.d.ts",
|
|
35
48
|
"sideEffects": false,
|
|
36
49
|
"dependencies": {
|
|
37
|
-
"tslib": "^2.
|
|
50
|
+
"tslib": "^2.3.0"
|
|
38
51
|
}
|
|
39
52
|
}
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/operators'), require('rxjs'), require('@angular/material/select')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define('ng-mat-select-infinite-scroll', ['exports', '@angular/core', 'rxjs/operators', 'rxjs', '@angular/material/select'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["ng-mat-select-infinite-scroll"] = {}, global.ng.core, global.rxjs.operators, global.rxjs, global.ng.material.select));
|
|
5
|
-
})(this, (function (exports, i0, operators, rxjs, i1) { 'use strict';
|
|
6
|
-
|
|
7
|
-
function _interopNamespace(e) {
|
|
8
|
-
if (e && e.__esModule) return e;
|
|
9
|
-
var n = Object.create(null);
|
|
10
|
-
if (e) {
|
|
11
|
-
Object.keys(e).forEach(function (k) {
|
|
12
|
-
if (k !== 'default') {
|
|
13
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
-
enumerable: true,
|
|
16
|
-
get: function () { return e[k]; }
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
n["default"] = e;
|
|
22
|
-
return Object.freeze(n);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
|
|
26
|
-
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
|
|
27
|
-
|
|
28
|
-
/** The height of the select items in `em` units. */
|
|
29
|
-
var SELECT_ITEM_HEIGHT_EM = 3;
|
|
30
|
-
var MatSelectInfiniteScrollDirective = /** @class */ (function () {
|
|
31
|
-
function MatSelectInfiniteScrollDirective(matSelect, ngZone) {
|
|
32
|
-
this.matSelect = matSelect;
|
|
33
|
-
this.ngZone = ngZone;
|
|
34
|
-
this.threshold = '15%';
|
|
35
|
-
this.debounceTime = 150;
|
|
36
|
-
this.infiniteScroll = new i0.EventEmitter();
|
|
37
|
-
this.thrPx = 0;
|
|
38
|
-
this.thrPc = 0;
|
|
39
|
-
this.singleOptionHeight = SELECT_ITEM_HEIGHT_EM;
|
|
40
|
-
this.destroyed$ = new rxjs.Subject();
|
|
41
|
-
}
|
|
42
|
-
MatSelectInfiniteScrollDirective.prototype.ngOnInit = function () {
|
|
43
|
-
this.evaluateThreshold();
|
|
44
|
-
};
|
|
45
|
-
MatSelectInfiniteScrollDirective.prototype.ngAfterViewInit = function () {
|
|
46
|
-
var _this = this;
|
|
47
|
-
this.matSelect.openedChange.pipe(operators.takeUntil(this.destroyed$)).subscribe(function (opened) {
|
|
48
|
-
if (opened) {
|
|
49
|
-
_this.panel = _this.matSelect.panel.nativeElement;
|
|
50
|
-
_this.singleOptionHeight = _this.getSelectItemHeightPx();
|
|
51
|
-
_this.registerScrollListener();
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
};
|
|
55
|
-
MatSelectInfiniteScrollDirective.prototype.ngOnDestroy = function () {
|
|
56
|
-
this.destroyed$.next(true);
|
|
57
|
-
this.destroyed$.complete();
|
|
58
|
-
};
|
|
59
|
-
MatSelectInfiniteScrollDirective.prototype.evaluateThreshold = function () {
|
|
60
|
-
if (this.threshold.lastIndexOf('%') > -1) {
|
|
61
|
-
this.thrPx = 0;
|
|
62
|
-
this.thrPc = (parseFloat(this.threshold) / 100);
|
|
63
|
-
}
|
|
64
|
-
else {
|
|
65
|
-
this.thrPx = parseFloat(this.threshold);
|
|
66
|
-
this.thrPc = 0;
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
MatSelectInfiniteScrollDirective.prototype.registerScrollListener = function () {
|
|
70
|
-
var _this = this;
|
|
71
|
-
rxjs.fromEvent(this.panel, 'scroll').pipe(operators.takeUntil(this.destroyed$), operators.debounceTime(this.debounceTime), operators.tap(function (event) {
|
|
72
|
-
_this.handleScrollEvent(event);
|
|
73
|
-
})).subscribe();
|
|
74
|
-
};
|
|
75
|
-
MatSelectInfiniteScrollDirective.prototype.handleScrollEvent = function (event) {
|
|
76
|
-
var _this = this;
|
|
77
|
-
this.ngZone.runOutsideAngular(function () {
|
|
78
|
-
if (_this.complete) {
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
var countOfRenderedOptions = _this.matSelect.options.length;
|
|
82
|
-
var infiniteScrollDistance = _this.singleOptionHeight * countOfRenderedOptions;
|
|
83
|
-
var threshold = _this.thrPc !== 0 ? (infiniteScrollDistance * _this.thrPc) : _this.thrPx;
|
|
84
|
-
var scrolledDistance = _this.panel.clientHeight + event.target.scrollTop;
|
|
85
|
-
if ((scrolledDistance + threshold) >= infiniteScrollDistance) {
|
|
86
|
-
_this.ngZone.run(function () { return _this.infiniteScroll.emit(); });
|
|
87
|
-
}
|
|
88
|
-
});
|
|
89
|
-
};
|
|
90
|
-
MatSelectInfiniteScrollDirective.prototype.getSelectItemHeightPx = function () {
|
|
91
|
-
return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
|
|
92
|
-
};
|
|
93
|
-
return MatSelectInfiniteScrollDirective;
|
|
94
|
-
}());
|
|
95
|
-
MatSelectInfiniteScrollDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MatSelectInfiniteScrollDirective, deps: [{ token: i1__namespace.MatSelect }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Directive });
|
|
96
|
-
MatSelectInfiniteScrollDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.0.5", type: MatSelectInfiniteScrollDirective, selector: "[msInfiniteScroll]", inputs: { threshold: "threshold", debounceTime: "debounceTime", complete: "complete" }, outputs: { infiniteScroll: "infiniteScroll" }, ngImport: i0__namespace });
|
|
97
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MatSelectInfiniteScrollDirective, decorators: [{
|
|
98
|
-
type: i0.Directive,
|
|
99
|
-
args: [{
|
|
100
|
-
selector: '[msInfiniteScroll]'
|
|
101
|
-
}]
|
|
102
|
-
}], ctorParameters: function () { return [{ type: i1__namespace.MatSelect }, { type: i0__namespace.NgZone }]; }, propDecorators: { threshold: [{
|
|
103
|
-
type: i0.Input
|
|
104
|
-
}], debounceTime: [{
|
|
105
|
-
type: i0.Input
|
|
106
|
-
}], complete: [{
|
|
107
|
-
type: i0.Input
|
|
108
|
-
}], infiniteScroll: [{
|
|
109
|
-
type: i0.Output
|
|
110
|
-
}] } });
|
|
111
|
-
|
|
112
|
-
var MatSelectInfiniteScrollModule = /** @class */ (function () {
|
|
113
|
-
function MatSelectInfiniteScrollModule() {
|
|
114
|
-
}
|
|
115
|
-
return MatSelectInfiniteScrollModule;
|
|
116
|
-
}());
|
|
117
|
-
MatSelectInfiniteScrollModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MatSelectInfiniteScrollModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
118
|
-
MatSelectInfiniteScrollModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MatSelectInfiniteScrollModule, declarations: [MatSelectInfiniteScrollDirective], imports: [i1.MatSelectModule], exports: [MatSelectInfiniteScrollDirective] });
|
|
119
|
-
MatSelectInfiniteScrollModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MatSelectInfiniteScrollModule, imports: [[
|
|
120
|
-
i1.MatSelectModule
|
|
121
|
-
]] });
|
|
122
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MatSelectInfiniteScrollModule, decorators: [{
|
|
123
|
-
type: i0.NgModule,
|
|
124
|
-
args: [{
|
|
125
|
-
declarations: [MatSelectInfiniteScrollDirective],
|
|
126
|
-
imports: [
|
|
127
|
-
i1.MatSelectModule
|
|
128
|
-
],
|
|
129
|
-
exports: [MatSelectInfiniteScrollDirective]
|
|
130
|
-
}]
|
|
131
|
-
}] });
|
|
132
|
-
|
|
133
|
-
/*
|
|
134
|
-
* Public API Surface of ng-mat-select-infinite-scroll
|
|
135
|
-
*/
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* Generated bundle index. Do not edit.
|
|
139
|
-
*/
|
|
140
|
-
|
|
141
|
-
exports.MatSelectInfiniteScrollDirective = MatSelectInfiniteScrollDirective;
|
|
142
|
-
exports.MatSelectInfiniteScrollModule = MatSelectInfiniteScrollModule;
|
|
143
|
-
|
|
144
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
145
|
-
|
|
146
|
-
}));
|
|
147
|
-
//# 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} 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":["EventEmitter","Subject","takeUntil","fromEvent","debounceTime","tap","Directive","Input","Output","MatSelectModule","NgModule"],"mappings":"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"}
|
|
@@ -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} 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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"}
|
|
Binary file
|