primeng
Version:
[](https://badge.fury.io/js/primeng) [](https://www.npmjs.com/package/primeng) [ • 19 kB
TypeScript
import { AnimationEvent } from '@angular/animations';
import { AfterContentChecked, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, KeyValueDiffers, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
import { PrimeNGConfig, PrimeTemplate } from 'primeng/api';
import { VoidListener } from 'primeng/ts-helpers';
import { GalleriaResponsiveOptions } from './galleria.interface';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "primeng/api";
import * as i3 from "primeng/ripple";
import * as i4 from "primeng/icons/times";
import * as i5 from "primeng/icons/chevronright";
import * as i6 from "primeng/icons/chevronleft";
import * as i7 from "primeng/icons/windowmaximize";
import * as i8 from "primeng/icons/windowminimize";
import * as i9 from "primeng/focustrap";
/**
* Galleria is an advanced content gallery component.
* @group Components
*/
export declare class Galleria implements OnChanges, OnDestroy {
private document;
platformId: any;
element: ElementRef;
cd: ChangeDetectorRef;
config: PrimeNGConfig;
/**
* Index of the first item.
* @group Props
*/
get activeIndex(): number;
set activeIndex(activeIndex: number);
/**
* Whether to display the component on fullscreen.
* @group Props
*/
fullScreen: boolean;
/**
* Unique identifier of the element.
* @group Props
*/
id: string | undefined;
/**
* An array of objects to display.
* @group Props
*/
value: any[] | undefined;
/**
* Number of items per page.
* @group Props
*/
numVisible: number;
/**
* An array of options for responsive design.
* @see {GalleriaResponsiveOptions}
* @group Props
*/
responsiveOptions: GalleriaResponsiveOptions[] | undefined;
/**
* Whether to display navigation buttons in item section.
* @group Props
*/
showItemNavigators: boolean;
/**
* Whether to display navigation buttons in thumbnail container.
* @group Props
*/
showThumbnailNavigators: boolean;
/**
* Whether to display navigation buttons on item hover.
* @group Props
*/
showItemNavigatorsOnHover: boolean;
/**
* When enabled, item is changed on indicator hover.
* @group Props
*/
changeItemOnIndicatorHover: boolean;
/**
* Defines if scrolling would be infinite.
* @group Props
*/
circular: boolean;
/**
* Items are displayed with a slideshow in autoPlay mode.
* @group Props
*/
autoPlay: boolean;
/**
* When enabled, autorun should stop by click.
* @group Props
*/
shouldStopAutoplayByClick: boolean;
/**
* Time in milliseconds to scroll items.
* @group Props
*/
transitionInterval: number;
/**
* Whether to display thumbnail container.
* @group Props
*/
showThumbnails: boolean;
/**
* Position of thumbnails.
* @group Props
*/
thumbnailsPosition: 'bottom' | 'top' | 'left' | 'right' | undefined;
/**
* Height of the viewport in vertical thumbnail.
* @group Props
*/
verticalThumbnailViewPortHeight: string;
/**
* Whether to display indicator container.
* @group Props
*/
showIndicators: boolean;
/**
* When enabled, indicator container is displayed on item container.
* @group Props
*/
showIndicatorsOnItem: boolean;
/**
* Position of indicators.
* @group Props
*/
indicatorsPosition: 'bottom' | 'top' | 'left' | 'right' | undefined;
/**
* Base zIndex value to use in layering.
* @group Props
*/
baseZIndex: number;
/**
* Style class of the mask on fullscreen mode.
* @group Props
*/
maskClass: string | undefined;
/**
* Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used.
* @group Props
*/
containerClass: string | undefined;
/**
* Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.
* @group Props
*/
containerStyle: {
[klass: string]: any;
} | null | undefined;
/**
* Transition options of the show animation.
* @group Props
*/
showTransitionOptions: string;
/**
* Transition options of the hide animation.
* @group Props
*/
hideTransitionOptions: string;
/**
* Specifies the visibility of the mask on fullscreen mode.
* @group Props
*/
get visible(): boolean;
set visible(visible: boolean);
/**
* Callback to invoke on active index change.
* @param {number} number - Active index.
* @group Emits
*/
activeIndexChange: EventEmitter<number>;
/**
* Callback to invoke on visiblity change.
* @param {boolean} boolean - Visible value.
* @group Emits
*/
visibleChange: EventEmitter<boolean>;
mask: ElementRef | undefined;
container: ElementRef | undefined;
templates: QueryList<PrimeTemplate> | undefined;
_visible: boolean;
_activeIndex: number;
headerFacet: any;
footerFacet: any;
indicatorFacet: any;
captionFacet: any;
closeIconTemplate: TemplateRef<any> | undefined;
previousThumbnailIconTemplate: TemplateRef<any> | undefined;
nextThumbnailIconTemplate: TemplateRef<any> | undefined;
itemPreviousIconTemplate: TemplateRef<any> | undefined;
itemNextIconTemplate: TemplateRef<any> | undefined;
maskVisible: boolean;
numVisibleLimit: number;
constructor(document: Document, platformId: any, element: ElementRef, cd: ChangeDetectorRef, config: PrimeNGConfig);
ngAfterContentInit(): void;
ngOnChanges(simpleChanges: SimpleChanges): void;
onMaskHide(): void;
onActiveItemChange(index: number): void;
onAnimationStart(event: AnimationEvent): void;
onAnimationEnd(event: AnimationEvent): void;
enableModality(): void;
disableModality(): void;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<Galleria, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<Galleria, "p-galleria", never, { "activeIndex": { "alias": "activeIndex"; "required": false; }; "fullScreen": { "alias": "fullScreen"; "required": false; }; "id": { "alias": "id"; "required": false; }; "value": { "alias": "value"; "required": false; }; "numVisible": { "alias": "numVisible"; "required": false; }; "responsiveOptions": { "alias": "responsiveOptions"; "required": false; }; "showItemNavigators": { "alias": "showItemNavigators"; "required": false; }; "showThumbnailNavigators": { "alias": "showThumbnailNavigators"; "required": false; }; "showItemNavigatorsOnHover": { "alias": "showItemNavigatorsOnHover"; "required": false; }; "changeItemOnIndicatorHover": { "alias": "changeItemOnIndicatorHover"; "required": false; }; "circular": { "alias": "circular"; "required": false; }; "autoPlay": { "alias": "autoPlay"; "required": false; }; "shouldStopAutoplayByClick": { "alias": "shouldStopAutoplayByClick"; "required": false; }; "transitionInterval": { "alias": "transitionInterval"; "required": false; }; "showThumbnails": { "alias": "showThumbnails"; "required": false; }; "thumbnailsPosition": { "alias": "thumbnailsPosition"; "required": false; }; "verticalThumbnailViewPortHeight": { "alias": "verticalThumbnailViewPortHeight"; "required": false; }; "showIndicators": { "alias": "showIndicators"; "required": false; }; "showIndicatorsOnItem": { "alias": "showIndicatorsOnItem"; "required": false; }; "indicatorsPosition": { "alias": "indicatorsPosition"; "required": false; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; }; "maskClass": { "alias": "maskClass"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "containerStyle": { "alias": "containerStyle"; "required": false; }; "showTransitionOptions": { "alias": "showTransitionOptions"; "required": false; }; "hideTransitionOptions": { "alias": "hideTransitionOptions"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, { "activeIndexChange": "activeIndexChange"; "visibleChange": "visibleChange"; }, ["templates"], never, false, never>;
static ngAcceptInputType_fullScreen: unknown;
static ngAcceptInputType_numVisible: unknown;
static ngAcceptInputType_showItemNavigators: unknown;
static ngAcceptInputType_showThumbnailNavigators: unknown;
static ngAcceptInputType_showItemNavigatorsOnHover: unknown;
static ngAcceptInputType_changeItemOnIndicatorHover: unknown;
static ngAcceptInputType_circular: unknown;
static ngAcceptInputType_autoPlay: unknown;
static ngAcceptInputType_shouldStopAutoplayByClick: unknown;
static ngAcceptInputType_transitionInterval: unknown;
static ngAcceptInputType_showThumbnails: unknown;
static ngAcceptInputType_showIndicators: unknown;
static ngAcceptInputType_showIndicatorsOnItem: unknown;
static ngAcceptInputType_baseZIndex: unknown;
}
export declare class GalleriaContent implements DoCheck {
galleria: Galleria;
cd: ChangeDetectorRef;
private differs;
config: PrimeNGConfig;
private elementRef;
get activeIndex(): number;
set activeIndex(activeIndex: number);
value: any[];
numVisible: number | undefined;
fullScreen: boolean;
maskHide: EventEmitter<boolean>;
activeItemChange: EventEmitter<number>;
closeButton: ElementRef | undefined;
id: string;
_activeIndex: number;
slideShowActive: boolean;
interval: any;
styleClass: string | undefined;
private differ;
constructor(galleria: Galleria, cd: ChangeDetectorRef, differs: KeyValueDiffers, config: PrimeNGConfig, elementRef: ElementRef);
handleFullscreenChange(event: Event): void;
ngDoCheck(): void;
galleriaClass(): string;
startSlideShow(): void;
stopSlideShow(): void;
getPositionClass(preClassName: string, position: string): string;
isVertical(): boolean;
onActiveIndexChange(index: number): void;
closeAriaLabel(): string;
static ɵfac: i0.ɵɵFactoryDeclaration<GalleriaContent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<GalleriaContent, "p-galleriaContent", never, { "activeIndex": { "alias": "activeIndex"; "required": false; }; "value": { "alias": "value"; "required": false; }; "numVisible": { "alias": "numVisible"; "required": false; }; "fullScreen": { "alias": "fullScreen"; "required": false; }; }, { "maskHide": "maskHide"; "activeItemChange": "activeItemChange"; }, never, never, false, never>;
static ngAcceptInputType_numVisible: unknown;
static ngAcceptInputType_fullScreen: unknown;
}
export declare class GalleriaItemSlot {
templates: QueryList<PrimeTemplate> | undefined;
index: number | undefined;
get item(): any;
set item(item: any);
type: string | undefined;
contentTemplate: TemplateRef<any> | undefined;
context: any;
_item: any;
ngAfterContentInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<GalleriaItemSlot, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<GalleriaItemSlot, "p-galleriaItemSlot", never, { "templates": { "alias": "templates"; "required": false; }; "index": { "alias": "index"; "required": false; }; "item": { "alias": "item"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, never, false, never>;
static ngAcceptInputType_index: unknown;
}
export declare class GalleriaItem implements OnChanges {
galleria: Galleria;
id: string | undefined;
circular: boolean;
value: any[] | undefined;
showItemNavigators: boolean;
showIndicators: boolean;
slideShowActive: boolean;
changeItemOnIndicatorHover: boolean;
autoPlay: boolean;
templates: QueryList<PrimeTemplate> | undefined;
indicatorFacet: any;
captionFacet: any;
startSlideShow: EventEmitter<Event>;
stopSlideShow: EventEmitter<Event>;
onActiveIndexChange: EventEmitter<number>;
get activeIndex(): number;
set activeIndex(activeIndex: number);
get activeItem(): any;
_activeIndex: number;
leftButtonFocused: boolean;
rightButtonFocused: boolean;
constructor(galleria: Galleria);
ngOnChanges({ autoPlay }: SimpleChanges): void;
next(): void;
prev(): void;
onButtonFocus(pos: 'left' | 'right'): void;
onButtonBlur(pos: 'left' | 'right'): void;
stopTheSlideShow(): void;
navForward(e: MouseEvent): void;
navBackward(e: MouseEvent): void;
onIndicatorClick(index: number): void;
onIndicatorMouseEnter(index: number): void;
onIndicatorKeyDown(event: any, index: number): void;
isNavForwardDisabled(): boolean;
isNavBackwardDisabled(): boolean;
isIndicatorItemActive(index: number): boolean;
ariaSlideLabel(): string;
ariaSlideNumber(value: any): string;
ariaPageLabel(value: any): string;
static ɵfac: i0.ɵɵFactoryDeclaration<GalleriaItem, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<GalleriaItem, "p-galleriaItem", never, { "id": { "alias": "id"; "required": false; }; "circular": { "alias": "circular"; "required": false; }; "value": { "alias": "value"; "required": false; }; "showItemNavigators": { "alias": "showItemNavigators"; "required": false; }; "showIndicators": { "alias": "showIndicators"; "required": false; }; "slideShowActive": { "alias": "slideShowActive"; "required": false; }; "changeItemOnIndicatorHover": { "alias": "changeItemOnIndicatorHover"; "required": false; }; "autoPlay": { "alias": "autoPlay"; "required": false; }; "templates": { "alias": "templates"; "required": false; }; "indicatorFacet": { "alias": "indicatorFacet"; "required": false; }; "captionFacet": { "alias": "captionFacet"; "required": false; }; "activeIndex": { "alias": "activeIndex"; "required": false; }; }, { "startSlideShow": "startSlideShow"; "stopSlideShow": "stopSlideShow"; "onActiveIndexChange": "onActiveIndexChange"; }, never, never, false, never>;
static ngAcceptInputType_circular: unknown;
static ngAcceptInputType_showItemNavigators: unknown;
static ngAcceptInputType_showIndicators: unknown;
static ngAcceptInputType_slideShowActive: unknown;
static ngAcceptInputType_changeItemOnIndicatorHover: unknown;
static ngAcceptInputType_autoPlay: unknown;
}
export declare class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterViewInit, OnDestroy {
galleria: Galleria;
private document;
private platformId;
private renderer;
private cd;
containerId: string | undefined;
value: any[] | undefined;
isVertical: boolean;
slideShowActive: boolean;
circular: boolean;
responsiveOptions: GalleriaResponsiveOptions[] | undefined;
contentHeight: string;
showThumbnailNavigators: boolean;
templates: QueryList<PrimeTemplate> | undefined;
onActiveIndexChange: EventEmitter<number>;
stopSlideShow: EventEmitter<Event>;
itemsContainer: ElementRef | undefined;
get numVisible(): number;
set numVisible(numVisible: number);
get activeIndex(): number;
set activeIndex(activeIndex: number);
index: number | undefined;
startPos: {
x: number;
y: number;
} | null;
thumbnailsStyle: HTMLStyleElement | null;
sortedResponsiveOptions: GalleriaResponsiveOptions[] | null;
totalShiftedItems: number;
page: number;
documentResizeListener: VoidListener;
_numVisible: number;
d_numVisible: number;
_oldNumVisible: number;
_activeIndex: number;
_oldactiveIndex: number;
constructor(galleria: Galleria, document: Document, platformId: any, renderer: Renderer2, cd: ChangeDetectorRef);
ngOnInit(): void;
ngAfterContentChecked(): void;
ngAfterViewInit(): void;
createStyle(): void;
calculatePosition(): void;
getTabIndex(index: number): number;
navForward(e: TouchEvent | MouseEvent): void;
navBackward(e: TouchEvent | MouseEvent): void;
onItemClick(index: number): void;
onThumbnailKeydown(event: KeyboardEvent, index: number): void;
onRightKey(): void;
onLeftKey(): void;
onHomeKey(): void;
onEndKey(): void;
onTabKey(): void;
findFocusedIndicatorIndex(): number;
changedFocusedIndicator(prevInd: any, nextInd: any): void;
step(dir: number): void;
stopTheSlideShow(): void;
changePageOnTouch(e: TouchEvent, diff: number): void;
getTotalPageNumber(): number;
getMedianItemIndex(): number;
onTransitionEnd(): void;
onTouchEnd(e: TouchEvent): void;
onTouchMove(e: TouchEvent): void;
onTouchStart(e: TouchEvent): void;
isNavBackwardDisabled(): boolean;
isNavForwardDisabled(): boolean;
firstItemAciveIndex(): number;
lastItemActiveIndex(): number;
isItemActive(index: number): boolean;
bindDocumentListeners(): void;
unbindDocumentListeners(): void;
ngOnDestroy(): void;
ariaPrevButtonLabel(): string;
ariaNextButtonLabel(): string;
ariaPageLabel(value: any): string;
static ɵfac: i0.ɵɵFactoryDeclaration<GalleriaThumbnails, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<GalleriaThumbnails, "p-galleriaThumbnails", never, { "containerId": { "alias": "containerId"; "required": false; }; "value": { "alias": "value"; "required": false; }; "isVertical": { "alias": "isVertical"; "required": false; }; "slideShowActive": { "alias": "slideShowActive"; "required": false; }; "circular": { "alias": "circular"; "required": false; }; "responsiveOptions": { "alias": "responsiveOptions"; "required": false; }; "contentHeight": { "alias": "contentHeight"; "required": false; }; "showThumbnailNavigators": { "alias": "showThumbnailNavigators"; "required": false; }; "templates": { "alias": "templates"; "required": false; }; "numVisible": { "alias": "numVisible"; "required": false; }; "activeIndex": { "alias": "activeIndex"; "required": false; }; }, { "onActiveIndexChange": "onActiveIndexChange"; "stopSlideShow": "stopSlideShow"; }, never, never, false, never>;
static ngAcceptInputType_isVertical: unknown;
static ngAcceptInputType_slideShowActive: unknown;
static ngAcceptInputType_circular: unknown;
}
export declare class GalleriaModule {
static ɵfac: i0.ɵɵFactoryDeclaration<GalleriaModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<GalleriaModule, [typeof Galleria, typeof GalleriaContent, typeof GalleriaItemSlot, typeof GalleriaItem, typeof GalleriaThumbnails], [typeof i1.CommonModule, typeof i2.SharedModule, typeof i3.RippleModule, typeof i4.TimesIcon, typeof i5.ChevronRightIcon, typeof i6.ChevronLeftIcon, typeof i7.WindowMaximizeIcon, typeof i8.WindowMinimizeIcon, typeof i9.FocusTrapModule], [typeof i1.CommonModule, typeof Galleria, typeof GalleriaContent, typeof GalleriaItemSlot, typeof GalleriaItem, typeof GalleriaThumbnails, typeof i2.SharedModule]>;
static ɵinj: i0.ɵɵInjectorDeclaration<GalleriaModule>;
}