primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
463 lines (459 loc) • 18.1 kB
TypeScript
import { VirtualScrollerPassThrough, ScrollerLazyLoadEvent, ScrollerScrollEvent, ScrollerScrollIndexChangeEvent, ScrollerContentTemplateContext, ScrollerItemTemplateContext, ScrollerLoaderTemplateContext, ScrollerLoaderIconTemplateContext, ScrollerToType } from 'primeng/types/scroller';
export * from 'primeng/types/scroller';
import * as _angular_core from '@angular/core';
import { ElementRef, TemplateRef } from '@angular/core';
import { ScrollerOptions } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { VoidListener } from 'primeng/ts-helpers';
import { BaseStyle } from 'primeng/base';
import { CSSProperties } from 'primeng/types/shared';
/**
*
* 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: _angular_core.ɵɵFactoryDeclaration<ScrollerStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ScrollerStyle>;
}
interface ScrollerStyle extends BaseStyle {
}
/**
* Scroller is a performance-approach to handle huge data efficiently.
* @group Components
*/
declare class Scroller extends BaseComponent<VirtualScrollerPassThrough> {
componentName: string;
bindDirectiveInstance: Bind;
$pcScroller: Scroller | undefined;
hostName: _angular_core.InputSignal<string>;
/**
* Unique identifier of the element.
* @group Props
*/
id: _angular_core.InputSignal<string | undefined>;
/**
* Inline style of the component.
* @group Props
*/
style: _angular_core.InputSignal<any>;
/**
* Style class of the element.
* @group Props
*/
styleClass: _angular_core.InputSignal<string | undefined>;
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex: _angular_core.InputSignal<number>;
/**
* An array of objects to display.
* @group Props
*/
items: _angular_core.InputSignal<any[] | null | undefined>;
/**
* The height/width of item according to orientation.
* @group Props
*/
itemSize: _angular_core.InputSignal<number | number[]>;
/**
* Height of the scroll viewport.
* @group Props
*/
scrollHeight: _angular_core.InputSignal<string | undefined>;
/**
* Width of the scroll viewport.
* @group Props
*/
scrollWidth: _angular_core.InputSignal<string | undefined>;
/**
* The orientation of scrollbar.
* @group Props
*/
orientation: _angular_core.InputSignal<"vertical" | "horizontal" | "both">;
/**
* Used to specify how many items to load in each load method in lazy mode.
* @group Props
*/
step: _angular_core.InputSignal<number>;
/**
* Delay in scroll before new data is loaded.
* @group Props
*/
delay: _angular_core.InputSignal<number>;
/**
* Delay after window's resize finishes.
* @group Props
*/
resizeDelay: _angular_core.InputSignal<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
*/
appendOnly: _angular_core.InputSignal<boolean>;
/**
* Specifies whether the scroller should be displayed inline or not.
* @group Props
*/
inline: _angular_core.InputSignal<boolean>;
/**
* Defines if data is loaded and interacted with in lazy manner.
* @group Props
*/
lazy: _angular_core.InputSignal<boolean>;
/**
* If disabled, the scroller feature is eliminated and the content is displayed directly.
* @group Props
*/
disabled: _angular_core.InputSignal<boolean>;
/**
* Used to implement a custom loader instead of using the loader feature in the scroller.
* @group Props
*/
loaderDisabled: _angular_core.InputSignal<boolean>;
/**
* Columns to display.
* @group Props
*/
columns: _angular_core.InputSignal<any[] | null | undefined>;
/**
* Used to implement a custom spacer instead of using the spacer feature in the scroller.
* @group Props
*/
showSpacer: _angular_core.InputSignal<boolean>;
/**
* Defines whether to show loader.
* @group Props
*/
showLoader: _angular_core.InputSignal<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
*/
numToleratedItems: _angular_core.InputSignal<any>;
/**
* Defines whether the data is loaded.
* @group Props
*/
loading: _angular_core.InputSignal<boolean | undefined>;
/**
* Defines whether to dynamically change the height or width of scrollable container.
* @group Props
*/
autoSize: _angular_core.InputSignal<boolean>;
/**
* Function to optimize the dom operations by delegating to ngForTrackBy, default algoritm checks for object identity.
* @group Props
*/
trackBy: _angular_core.InputSignal<Function | undefined>;
/**
* Defines whether to use the scroller feature. The properties of scroller component can be used like an object in it.
* @group Props
*/
options: _angular_core.InputSignal<ScrollerOptions | undefined>;
_id: _angular_core.Signal<string | undefined>;
_style: _angular_core.Signal<any>;
_styleClass: _angular_core.Signal<string | undefined>;
_tabindex: _angular_core.Signal<number>;
_items: _angular_core.Signal<any[] | null | undefined>;
_itemSize: _angular_core.Signal<any>;
_scrollHeight: _angular_core.Signal<string | undefined>;
_scrollWidth: _angular_core.Signal<string | undefined>;
_orientation: _angular_core.Signal<"vertical" | "horizontal" | "both">;
_step: _angular_core.Signal<number>;
_delay: _angular_core.Signal<number>;
_resizeDelay: _angular_core.Signal<number>;
_appendOnly: _angular_core.Signal<boolean>;
_inline: _angular_core.Signal<boolean>;
_lazy: _angular_core.Signal<boolean>;
_disabled: _angular_core.Signal<boolean>;
_loaderDisabled: _angular_core.Signal<boolean>;
_columns: _angular_core.Signal<any[] | null | undefined>;
_showSpacer: _angular_core.Signal<boolean>;
_showLoader: _angular_core.Signal<boolean>;
_numToleratedItems: _angular_core.Signal<any>;
_loading: _angular_core.Signal<boolean | undefined>;
_autoSize: _angular_core.Signal<boolean>;
_trackBy: _angular_core.Signal<Function | undefined>;
contentStyleClass: _angular_core.Signal<string | undefined>;
/**
* Callback to invoke in lazy mode to load new data.
* @param {ScrollerLazyLoadEvent} event - Custom lazy load event.
* @group Emits
*/
onLazyLoad: _angular_core.OutputEmitterRef<ScrollerLazyLoadEvent>;
/**
* Callback to invoke when scroll position changes.
* @param {ScrollerScrollEvent} event - Custom scroll event.
* @group Emits
*/
onScroll: _angular_core.OutputEmitterRef<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: _angular_core.OutputEmitterRef<ScrollerScrollIndexChangeEvent>;
elementViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
contentViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
hostHeight: _angular_core.WritableSignal<string | undefined>;
/**
* Content template of the component.
* @param {ScrollerContentTemplateContext} context - content context.
* @see {@link ScrollerContentTemplateContext}
* @group Templates
*/
contentTemplate: _angular_core.Signal<TemplateRef<ScrollerContentTemplateContext> | undefined>;
/**
* Item template of the component.
* @param {ScrollerItemTemplateContext} context - item context.
* @see {@link ScrollerItemTemplateContext}
* @group Templates
*/
itemTemplate: _angular_core.Signal<TemplateRef<ScrollerItemTemplateContext> | undefined>;
/**
* Loader template of the component.
* @param {ScrollerLoaderTemplateContext} context - loader context.
* @see {@link ScrollerLoaderTemplateContext}
* @group Templates
*/
loaderTemplate: _angular_core.Signal<TemplateRef<ScrollerLoaderTemplateContext> | undefined>;
/**
* Loader icon template of the component.
* @param {ScrollerLoaderIconTemplateContext} context - loader icon context.
* @see {@link ScrollerLoaderIconTemplateContext}
* @group Templates
*/
loaderIconTemplate: _angular_core.Signal<TemplateRef<ScrollerLoaderIconTemplateContext> | undefined>;
d_loading: boolean;
d_numToleratedItems: any;
contentEl: any;
vertical: _angular_core.Signal<boolean>;
horizontal: _angular_core.Signal<boolean>;
both: _angular_core.Signal<boolean>;
get loadedItems(): any[];
get loadedRows(): any[];
get loadedColumns(): any;
first: any;
last: any;
page: number;
isRangeChanged: boolean;
numItemsInViewport: any;
lastScrollPos: any;
lazyLoadState: any;
loaderArr: any[];
spacerStyle: CSSProperties;
contentStyle: CSSProperties;
scrollTimeout: any;
resizeTimeout: any;
private _destroyed;
initialized: boolean;
windowResizeListener: VoidListener;
defaultWidth: number | undefined;
defaultHeight: number | undefined;
defaultContentWidth: number | undefined;
defaultContentHeight: number | undefined;
_componentStyle: ScrollerStyle;
constructor();
onInit(): void;
onAfterViewInit(): void;
onAfterViewChecked(): void;
onDestroy(): void;
viewInit(): void;
init(): void;
setContentEl(el?: HTMLElement): void;
setInitialState(): void;
getElementRef(): ElementRef<any> | undefined;
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;
readonly loaderIconContext: {
options: {
styleClass: string;
};
};
getContentTemplateContext(): {
$implicit: any[];
options: {
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: any;
rows: any[];
columns: any;
spacerStyle: CSSProperties;
contentStyle: CSSProperties;
vertical: boolean;
horizontal: boolean;
both: boolean;
scrollTo: any;
scrollToIndex: any;
orientation: "vertical" | "horizontal" | "both";
scrollableElement: any;
};
};
getItemTemplateContext(item: any, index: number): {
$implicit: any;
options: {
index: any;
count: number;
first: boolean;
last: boolean;
even: boolean;
odd: boolean;
};
};
getLoaderTemplateContext(index: number): {
options: any;
};
getDisabledContentTemplateContext(): {
$implicit: any[] | null | undefined;
options: {
rows: any[] | null | undefined;
columns: 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: any;
rows: any[];
columns: any;
spacerStyle: CSSProperties;
contentStyle: CSSProperties;
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: _angular_core.ɵɵFactoryDeclaration<Scroller, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Scroller, "p-scroller, p-virtualscroller, p-virtual-scroller", never, { "hostName": { "alias": "hostName"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "itemSize": { "alias": "itemSize"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "scrollWidth": { "alias": "scrollWidth"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "resizeDelay": { "alias": "resizeDelay"; "required": false; "isSignal": true; }; "appendOnly": { "alias": "appendOnly"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loaderDisabled": { "alias": "loaderDisabled"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "showSpacer": { "alias": "showSpacer"; "required": false; "isSignal": true; }; "showLoader": { "alias": "showLoader"; "required": false; "isSignal": true; }; "numToleratedItems": { "alias": "numToleratedItems"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "autoSize": { "alias": "autoSize"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "onLazyLoad": "onLazyLoad"; "onScroll": "onScroll"; "onScrollIndexChange": "onScrollIndexChange"; }, ["contentTemplate", "itemTemplate", "loaderTemplate", "loaderIconTemplate"], ["*"], true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class ScrollerModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScrollerModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<ScrollerModule, never, [typeof Scroller], [typeof Scroller]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<ScrollerModule>;
}
export { Scroller, ScrollerClasses, ScrollerModule, ScrollerStyle };