primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
453 lines (449 loc) • 16.4 kB
TypeScript
import { VirtualScrollerPassThrough, ScrollerLazyLoadEvent, ScrollerScrollEvent, ScrollerScrollIndexChangeEvent, ScrollerContentTemplateContext, ScrollerItemTemplateContext, ScrollerLoaderTemplateContext, ScrollerLoaderIconTemplateContext, ScrollerToType } from 'primeng/types/scroller';
export * from 'primeng/types/scroller';
import * as i0 from '@angular/core';
import { EventEmitter, ElementRef, TemplateRef, QueryList, NgZone, SimpleChanges } from '@angular/core';
import * as i2 from 'primeng/api';
import { ScrollerOptions, PrimeTemplate } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { Nullable, VoidListener } from 'primeng/ts-helpers';
import { BaseStyle } from 'primeng/base';
/**
*
* VirtualScroller is a performant approach to handle huge data efficiently.
*
* [Live Demo](https://www.primeng.org/scroller/)
*
* @module scrollerstyle
*
*/
declare enum ScrollerClasses {
/**
* Class name of the root element
*/
root = "p-virtualscroller",
/**
* Class name of the content element
*/
content = "p-virtualscroller-content",
/**
* Class name of the spacer element
*/
spacer = "p-virtualscroller-spacer",
/**
* Class name of the loader element
*/
loader = "p-virtualscroller-loader",
/**
* Class name of the loading icon element
*/
loadingIcon = "p-virtualscroller-loading-icon"
}
declare class ScrollerStyle extends BaseStyle {
name: string;
css: string;
classes: {
root: ({ instance }: {
instance: any;
}) => (string | {
'p-virtualscroller-inline': any;
'p-virtualscroller-both p-both-scroll': any;
'p-virtualscroller-horizontal p-horizontal-scroll': any;
})[];
content: string;
spacer: string;
loader: ({ instance }: {
instance: any;
}) => (string | {
'p-virtualscroller-loader-mask': boolean;
})[];
loadingIcon: string;
};
static ɵfac: i0.ɵɵFactoryDeclaration<ScrollerStyle, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<ScrollerStyle>;
}
interface ScrollerStyle extends BaseStyle {
}
/**
* Scroller is a performance-approach to handle huge data efficiently.
* @group Components
*/
declare class Scroller extends BaseComponent<VirtualScrollerPassThrough> {
private zone;
componentName: string;
bindDirectiveInstance: Bind;
$pcScroller: Scroller | undefined;
hostName: string;
/**
* Unique identifier of the element.
* @group Props
*/
get id(): string | undefined;
set id(val: string | undefined);
/**
* Inline style of the component.
* @group Props
*/
get style(): any;
set style(val: any);
/**
* Style class of the element.
* @group Props
*/
get styleClass(): string | undefined;
set styleClass(val: string | undefined);
/**
* Index of the element in tabbing order.
* @group Props
*/
get tabindex(): number;
set tabindex(val: number);
/**
* An array of objects to display.
* @group Props
*/
get items(): any[] | undefined | null;
set items(val: any[] | undefined | null);
/**
* The height/width of item according to orientation.
* @group Props
*/
get itemSize(): number[] | number;
set itemSize(val: number[] | number);
/**
* Height of the scroll viewport.
* @group Props
*/
get scrollHeight(): string | undefined;
set scrollHeight(val: string | undefined);
/**
* Width of the scroll viewport.
* @group Props
*/
get scrollWidth(): string | undefined;
set scrollWidth(val: string | undefined);
/**
* The orientation of scrollbar.
* @group Props
*/
get orientation(): 'vertical' | 'horizontal' | 'both';
set orientation(val: 'vertical' | 'horizontal' | 'both');
/**
* Used to specify how many items to load in each load method in lazy mode.
* @group Props
*/
get step(): number;
set step(val: number);
/**
* Delay in scroll before new data is loaded.
* @group Props
*/
get delay(): number;
set delay(val: number);
/**
* Delay after window's resize finishes.
* @group Props
*/
get resizeDelay(): number;
set resizeDelay(val: number);
/**
* Used to append each loaded item to top without removing any items from the DOM. Using very large data may cause the browser to crash.
* @group Props
*/
get appendOnly(): boolean;
set appendOnly(val: boolean);
/**
* Specifies whether the scroller should be displayed inline or not.
* @group Props
*/
get inline(): boolean;
set inline(val: boolean);
/**
* Defines if data is loaded and interacted with in lazy manner.
* @group Props
*/
get lazy(): boolean;
set lazy(val: boolean);
/**
* If disabled, the scroller feature is eliminated and the content is displayed directly.
* @group Props
*/
get disabled(): boolean;
set disabled(val: boolean);
/**
* Used to implement a custom loader instead of using the loader feature in the scroller.
* @group Props
*/
get loaderDisabled(): boolean;
set loaderDisabled(val: boolean);
/**
* Columns to display.
* @group Props
*/
get columns(): any[] | undefined | null;
set columns(val: any[] | undefined | null);
/**
* Used to implement a custom spacer instead of using the spacer feature in the scroller.
* @group Props
*/
get showSpacer(): boolean;
set showSpacer(val: boolean);
/**
* Defines whether to show loader.
* @group Props
*/
get showLoader(): boolean;
set showLoader(val: boolean);
/**
* Determines how many additional elements to add to the DOM outside of the view. According to the scrolls made up and down, extra items are added in a certain algorithm in the form of multiples of this number. Default value is half the number of items shown in the view.
* @group Props
*/
get numToleratedItems(): number;
set numToleratedItems(val: number);
/**
* Defines whether the data is loaded.
* @group Props
*/
get loading(): boolean | undefined;
set loading(val: boolean | undefined);
/**
* Defines whether to dynamically change the height or width of scrollable container.
* @group Props
*/
get autoSize(): boolean;
set autoSize(val: boolean);
/**
* Function to optimize the dom operations by delegating to ngForTrackBy, default algoritm checks for object identity.
* @group Props
*/
get trackBy(): Function;
set trackBy(val: Function);
/**
* Defines whether to use the scroller feature. The properties of scroller component can be used like an object in it.
* @group Props
*/
get options(): ScrollerOptions | undefined;
set options(val: ScrollerOptions | undefined);
/**
* Callback to invoke in lazy mode to load new data.
* @param {ScrollerLazyLoadEvent} event - Custom lazy load event.
* @group Emits
*/
onLazyLoad: EventEmitter<ScrollerLazyLoadEvent>;
/**
* Callback to invoke when scroll position changes.
* @param {ScrollerScrollEvent} event - Custom scroll event.
* @group Emits
*/
onScroll: EventEmitter<ScrollerScrollEvent>;
/**
* Callback to invoke when scroll position and item's range in view changes.
* @param {ScrollerScrollEvent} event - Custom scroll index change event.
* @group Emits
*/
onScrollIndexChange: EventEmitter<ScrollerScrollIndexChangeEvent>;
elementViewChild: Nullable<ElementRef>;
contentViewChild: Nullable<ElementRef>;
height: string;
_id: string | undefined;
_style: {
[klass: string]: any;
} | null | undefined;
_styleClass: string | undefined;
_tabindex: number;
_items: any[] | undefined | null;
_itemSize: number | number[];
_scrollHeight: string | undefined;
_scrollWidth: string | undefined;
_orientation: 'vertical' | 'horizontal' | 'both';
_step: number;
_delay: number;
_resizeDelay: number;
_appendOnly: boolean;
_inline: boolean;
_lazy: boolean;
_disabled: boolean;
_loaderDisabled: boolean;
_columns: any[] | undefined | null;
_showSpacer: boolean;
_showLoader: boolean;
_numToleratedItems: any;
_loading: boolean | undefined;
_autoSize: boolean;
_trackBy: any;
_options: ScrollerOptions | undefined;
d_loading: boolean;
d_numToleratedItems: any;
contentEl: any;
/**
* Content template of the component.
* @param {ScrollerContentTemplateContext} context - content context.
* @see {@link ScrollerContentTemplateContext}
* @group Templates
*/
contentTemplate: Nullable<TemplateRef<ScrollerContentTemplateContext>>;
/**
* Item template of the component.
* @param {ScrollerItemTemplateContext} context - item context.
* @see {@link ScrollerItemTemplateContext}
* @group Templates
*/
itemTemplate: Nullable<TemplateRef<ScrollerItemTemplateContext>>;
/**
* Loader template of the component.
* @param {ScrollerLoaderTemplateContext} context - loader context.
* @see {@link ScrollerLoaderTemplateContext}
* @group Templates
*/
loaderTemplate: Nullable<TemplateRef<ScrollerLoaderTemplateContext>>;
/**
* Loader icon template of the component.
* @param {ScrollerLoaderIconTemplateContext} context - loader icon context.
* @see {@link ScrollerLoaderIconTemplateContext}
* @group Templates
*/
loaderIconTemplate: Nullable<TemplateRef<ScrollerLoaderIconTemplateContext>>;
templates: Nullable<QueryList<PrimeTemplate>>;
_contentTemplate: TemplateRef<ScrollerContentTemplateContext> | undefined;
_itemTemplate: TemplateRef<ScrollerItemTemplateContext> | undefined;
_loaderTemplate: TemplateRef<ScrollerLoaderTemplateContext> | undefined;
_loaderIconTemplate: TemplateRef<ScrollerLoaderIconTemplateContext> | undefined;
first: any;
last: any;
page: number;
isRangeChanged: boolean;
numItemsInViewport: any;
lastScrollPos: any;
lazyLoadState: any;
loaderArr: any[];
spacerStyle: {
[klass: string]: any;
} | null | undefined;
contentStyle: {
[klass: string]: any;
} | null | undefined;
scrollTimeout: any;
resizeTimeout: any;
initialized: boolean;
windowResizeListener: VoidListener;
defaultWidth: number | undefined;
defaultHeight: number | undefined;
defaultContentWidth: number | undefined;
defaultContentHeight: number | undefined;
_contentStyleClass: any;
get contentStyleClass(): any;
set contentStyleClass(val: any);
get vertical(): boolean;
get horizontal(): boolean;
get both(): boolean;
get loadedItems(): any[];
get loadedRows(): any[];
get loadedColumns(): any;
_componentStyle: ScrollerStyle;
constructor(zone: NgZone);
onInit(): void;
onChanges(simpleChanges: SimpleChanges): void;
onAfterContentInit(): void;
onAfterViewInit(): void;
onAfterViewChecked(): void;
onDestroy(): void;
viewInit(): void;
init(): void;
setContentEl(el?: HTMLElement): void;
setInitialState(): void;
getElementRef(): Nullable<ElementRef<any>>;
getPageByFirst(first?: any): number;
isPageChanged(first?: any): boolean;
scrollTo(options: ScrollToOptions): void;
scrollToIndex(index: number | number[], behavior?: ScrollBehavior): void;
scrollInView(index: number, to: ScrollerToType, behavior?: ScrollBehavior): void;
getRenderedRange(): {
first: any;
last: any;
viewport: {
first: any;
last: any;
};
};
calculateNumItems(): {
numItemsInViewport: any;
numToleratedItems: any;
};
calculateOptions(): void;
calculateAutoSize(): void;
getLast(last?: number, isCols?: boolean): number;
getContentPosition(): {
left: number;
right: number;
top: number;
bottom: number;
x: number;
y: number;
};
setSize(): void;
setSpacerSize(): void;
setContentPosition(pos: any): void;
onScrollPositionChange(event: Event): {
first: number | {
rows: number;
cols: number;
};
last: any;
isRangeChanged: boolean;
scrollPos: any;
};
onScrollChange(event: Event): void;
onContainerScroll(event: Event): void;
bindResizeListener(): void;
unbindResizeListener(): void;
onWindowResize(): void;
handleEvents(name: string, params: any): any;
getContentOptions(): {
contentStyleClass: string;
items: any[];
getItemOptions: (index: number) => {
index: any;
count: number;
first: boolean;
last: boolean;
even: boolean;
odd: boolean;
};
loading: boolean;
getLoaderOptions: (index: number, options?: any) => any;
itemSize: number | number[];
rows: any[];
columns: any;
spacerStyle: {
[klass: string]: any;
} | null | undefined;
contentStyle: {
[klass: string]: any;
} | null | undefined;
vertical: boolean;
horizontal: boolean;
both: boolean;
scrollTo: any;
scrollToIndex: any;
orientation: "vertical" | "horizontal" | "both";
scrollableElement: any;
};
getOptions(renderedIndex: number): {
index: any;
count: number;
first: boolean;
last: boolean;
even: boolean;
odd: boolean;
};
getLoaderOptions(index: number, extOptions: any): any;
static ɵfac: i0.ɵɵFactoryDeclaration<Scroller, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<Scroller, "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", never, { "hostName": { "alias": "hostName"; "required": false; }; "id": { "alias": "id"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "items": { "alias": "items"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; }; "scrollWidth": { "alias": "scrollWidth"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "step": { "alias": "step"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "resizeDelay": { "alias": "resizeDelay"; "required": false; }; "appendOnly": { "alias": "appendOnly"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "lazy": { "alias": "lazy"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loaderDisabled": { "alias": "loaderDisabled"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "showSpacer": { "alias": "showSpacer"; "required": false; }; "showLoader": { "alias": "showLoader"; "required": false; }; "numToleratedItems": { "alias": "numToleratedItems"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "autoSize": { "alias": "autoSize"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "onLazyLoad": "onLazyLoad"; "onScroll": "onScroll"; "onScrollIndexChange": "onScrollIndexChange"; }, ["contentTemplate", "itemTemplate", "loaderTemplate", "loaderIconTemplate", "templates"], ["*"], true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class ScrollerModule {
static ɵfac: i0.ɵɵFactoryDeclaration<ScrollerModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<ScrollerModule, never, [typeof Scroller, typeof i2.SharedModule], [typeof Scroller, typeof i2.SharedModule]>;
static ɵinj: i0.ɵɵInjectorDeclaration<ScrollerModule>;
}
export { Scroller, ScrollerClasses, ScrollerModule, ScrollerStyle };