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