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