UNPKG

4 kBTypeScriptView Raw
1import { ElementRef, EventEmitter, OnDestroy, AfterViewInit, QueryList } from '@angular/core';
2import { NbBooleanInput } from '../helpers';
3import { NbLayoutScrollService } from '../../services/scroll.service';
4import { NbLayoutRulerService } from '../../services/ruler.service';
5import { NbListItemComponent } from './list.component';
6import * as i0 from "@angular/core";
7export declare class NbScrollableContainerDimensions {
8 scrollTop: number;
9 scrollHeight: number;
10 clientHeight: number;
11}
12/**
13 * Infinite List Directive
14 *
15 * ```html
16 * <nb-list nbInfiniteList [threshold]="500" (bottomThreshold)="loadNext()">
17 * <nb-list-item *ngFor="let item of items"></nb-list-item>
18 * </nb-list>
19 * ```
20 *
21 * @stacked-example(Simple infinite list, infinite-list/infinite-list-showcase.component)
22 *
23 * Directive will notify when list scrolled up or down to a given threshold.
24 * By default it listen to scroll of list on which applied, but also can be set to listen to window scroll.
25 *
26 * @stacked-example(Scroll modes, infinite-list/infinite-list-scroll-modes.component)
27 *
28 * To improve UX of infinite lists, it's better to keep current page in url,
29 * so user able to return to the last viewed page or to share a link to this page.
30 * `nbListPageTracker` directive will help you to know, what page user currently viewing.
31 * Just put it on a list, set page size and it will calculate page that currently in viewport.
32 * You can [open the example](example/infinite-list/infinite-news-list.component)
33 * in a new tab to check out this feature.
34 *
35 * @stacked-example(Infinite list with pager, infinite-list/infinite-news-list.component)
36 *
37 * @stacked-example(Infinite list with placeholders at the top, infinite-list/infinite-list-placeholders.component)
38 *
39 */
40export declare class NbInfiniteListDirective implements AfterViewInit, OnDestroy {
41 private elementRef;
42 private scrollService;
43 private dimensionsService;
44 private destroy$;
45 private lastScrollPosition;
46 windowScroll: boolean;
47 private get elementScroll();
48 private elementScroll$;
49 private windowScroll$;
50 private bottomThreshold$;
51 private topThreshold$;
52 private throttleTime$;
53 /**
54 * Threshold after which event load more event will be emited.
55 * In pixels.
56 */
57 threshold: number;
58 /**
59 * Prevent subsequent bottom/topThreshold emissions for specified duration after emitting once.
60 * In milliseconds.
61 */
62 set throttleTime(value: number);
63 get throttleTime(): number;
64 /**
65 * By default component observes list scroll position.
66 * If set to `true`, component will observe position of page scroll instead.
67 */
68 set listenWindowScroll(value: any);
69 static ngAcceptInputType_listenWindowScroll: NbBooleanInput;
70 /**
71 * Emits when distance between list bottom and current scroll position is less than threshold.
72 */
73 bottomThreshold: EventEmitter<any>;
74 /**
75 * Emits when distance between list top and current scroll position is less than threshold.
76 */
77 topThreshold: EventEmitter<any>;
78 onElementScroll(): void;
79 listItems: QueryList<NbListItemComponent>;
80 constructor(elementRef: ElementRef, scrollService: NbLayoutScrollService, dimensionsService: NbLayoutRulerService);
81 ngAfterViewInit(): void;
82 ngOnDestroy(): void;
83 checkPosition({ scrollHeight, scrollTop, clientHeight }: NbScrollableContainerDimensions): void;
84 private getContainerDimensions;
85 private inSyncWithDom;
86 static ɵfac: i0.ɵɵFactoryDeclaration<NbInfiniteListDirective, never>;
87 static ɵdir: i0.ɵɵDirectiveDeclaration<NbInfiniteListDirective, "[nbInfiniteList]", never, { "threshold": { "alias": "threshold"; "required": false; }; "throttleTime": { "alias": "throttleTime"; "required": false; }; "listenWindowScroll": { "alias": "listenWindowScroll"; "required": false; }; }, { "bottomThreshold": "bottomThreshold"; "topThreshold": "topThreshold"; }, ["listItems"], never, false, never>;
88}