ng-cw-v12
Version:
Angular UI component library
86 lines (81 loc) • 4.8 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Output, Input, ViewChild, NgModule } from '@angular/core';
import { Subject, fromEvent } from 'rxjs';
import { debounceTime, filter } from 'rxjs/operators';
class InfiniteScrollComponent {
constructor() {
this.ncReachedBottom = new EventEmitter();
this.ncDistance = 0;
this.ncDelay = 200;
this.scrollSubject = new Subject();
this.isNearBottom = false;
this.disableDetectionMode = false;
}
set ncDisableDetection(value) {
this.disableDetectionMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
ngAfterViewInit() {
this.initScrollListener();
}
initScrollListener() {
const scrollElement = this.scrollContainer.nativeElement;
fromEvent(scrollElement, 'scroll').subscribe(() => {
this.handleScroll(scrollElement);
});
this.scrollSubject.pipe(debounceTime(this.ncDelay), filter(() => !this.disableDetectionMode)).subscribe(() => {
if (this.isNearBottom) {
this.ncReachedBottom.emit();
}
});
}
handleScroll(element) {
const { scrollTop, clientHeight, scrollHeight } = element;
this.isNearBottom = scrollTop + clientHeight >= scrollHeight - this.ncDistance;
if (this.isNearBottom) {
this.scrollSubject.next();
}
}
}
InfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: InfiniteScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
InfiniteScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: InfiniteScrollComponent, selector: "nc-infinite-scroll", inputs: { ncDisableDetection: "ncDisableDetection", ncDistance: "ncDistance", ncDelay: "ncDelay" }, outputs: { ncReachedBottom: "ncReachedBottom" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div #scrollContainer class=\"nc-infinite-scroll\">\r\n <ng-content></ng-content>\r\n</div>", styles: [".nc-infinite-scroll{width:100%;height:100%;overflow:auto}.nc-infinite-scroll::-webkit-scrollbar{width:6px;height:6px}.nc-infinite-scroll::-webkit-scrollbar-thumb{background-color:#cdc9cf;border-radius:10px;-webkit-transition:background-color .3s ease;transition:background-color .3s ease}.nc-infinite-scroll::-webkit-scrollbar-thumb:hover{background-color:#766d7b}.nc-infinite-scroll::-webkit-scrollbar-track{background:#0000;cursor:pointer}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-infinite-scroll',
templateUrl: './infinite-scroll.component.html',
styleUrls: ['./infinite-scroll.component.less']
}]
}], ctorParameters: function () { return []; }, propDecorators: { ncReachedBottom: [{
type: Output
}], ncDisableDetection: [{
type: Input
}], ncDistance: [{
type: Input
}], ncDelay: [{
type: Input
}], scrollContainer: [{
type: ViewChild,
args: ['scrollContainer']
}] } });
class NcInfiniteScrollModule {
}
NcInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcInfiniteScrollModule, declarations: [InfiniteScrollComponent], exports: [InfiniteScrollComponent] });
NcInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcInfiniteScrollModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcInfiniteScrollModule, decorators: [{
type: NgModule,
args: [{
declarations: [
InfiniteScrollComponent
],
imports: [],
exports: [
InfiniteScrollComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { InfiniteScrollComponent, NcInfiniteScrollModule };
//# sourceMappingURL=ng-cw-v12-infinite-scroll.js.map