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,
450 lines (446 loc) • 17.4 kB
TypeScript
import { GalleriaPassThrough, GalleriaResponsiveOptions, GalleriaPosition, GalleriaIndicatorTemplateContext, GalleriaCaptionTemplateContext, GalleriaItemTemplateContext, GalleriaThumbnailTemplateContext } from 'primeng/types/galleria';
export * from 'primeng/types/galleria';
import * as _angular_core from '@angular/core';
import { ElementRef, TemplateRef } from '@angular/core';
import { MotionOptions, MotionEvent } from '@primeuix/motion';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { CSSProperties } from 'primeng/types/shared';
import { BaseStyle } from 'primeng/base';
import * as i2 from 'primeng/api';
/**
*
* Galleria is an advanced content gallery component.
*
* [Live Demo](https://www.primeng.org/galleria/)
*
* @module galleriastyle
*
*/
declare enum GalleriaClasses {
/**
* Class name of the mask element
*/
mask = "p-galleria-mask",
/**
* Class name of the root element
*/
root = "p-galleria",
/**
* Class name of the close button element
*/
closeButton = "p-galleria-close-button",
/**
* Class name of the close icon element
*/
closeIcon = "p-galleria-close-icon",
/**
* Class name of the header element
*/
header = "p-galleria-header",
/**
* Class name of the content element
*/
content = "p-galleria-content",
/**
* Class name of the footer element
*/
footer = "p-galleria-footer",
/**
* Class name of the items container element
*/
itemsContainer = "p-galleria-items-container",
/**
* Class name of the items element
*/
items = "p-galleria-items",
/**
* Class name of the previous item button element
*/
prevButton = "p-galleria-prev-button",
/**
* Class name of the previous item icon element
*/
prevIcon = "p-galleria-prev-icon",
/**
* Class name of the item element
*/
item = "p-galleria-item",
/**
* Class name of the next item button element
*/
nextButton = "p-galleria-next-button",
/**
* Class name of the next item icon element
*/
nextIcon = "p-galleria-next-icon",
/**
* Class name of the caption element
*/
caption = "p-galleria-caption",
/**
* Class name of the indicator list element
*/
indicatorList = "p-galleria-indicator-list",
/**
* Class name of the indicator element
*/
indicator = "p-galleria-indicator",
/**
* Class name of the indicator button element
*/
indicatorButton = "p-galleria-indicator-button",
/**
* Class name of the thumbnails element
*/
thumbnails = "p-galleria-thumbnails",
/**
* Class name of the thumbnail content element
*/
thumbnailContent = "p-galleria-thumbnails-content",
/**
* Class name of the previous thumbnail button element
*/
previousThumbnailButton = "p-galleria-thumbnail-prev-button",
/**
* Class name of the previous thumbnail icon element
*/
previousThumbnailIcon = "p-galleria-thumbnail-prev-icon",
/**
* Class name of the thumbnails viewport element
*/
thumbnailsViewport = "p-galleria-thumbnails-viewport",
/**
* Class name of the thumbnail items element
*/
thumbnailItems = "p-galleria-thumbnail-items",
/**
* Class name of the thumbnail item element
*/
thumbnailItem = "p-galleria-thumbnail-item",
/**
* Class name of the thumbnail element
*/
thumbnail = "p-galleria-thumbnail",
/**
* Class name of the next thumbnail button element
*/
nextThumbnailButton = "p-galleria-thumbnail-next-button",
/**
* Class name of the next thumbnail icon element
*/
nextThumbnailIcon = "p-galleria-thumbnail-next-icon"
}
declare class GalleriaStyle extends BaseStyle {
name: string;
style: string;
classes: {
mask: string;
root: ({ instance }: {
instance: any;
}) => any[];
closeButton: string;
closeIcon: string;
header: string;
content: string;
footer: string;
itemsContainer: string;
items: string;
prevButton: ({ instance }: {
instance: any;
}) => (string | {
'p-disabled': any;
})[];
prevIcon: string;
item: string;
nextButton: ({ instance }: {
instance: any;
}) => (string | {
'p-disabled': any;
})[];
nextIcon: string;
caption: string;
indicatorList: string;
indicator: ({ instance, index }: {
instance: any;
index: any;
}) => (string | {
'p-galleria-indicator-active': any;
})[];
indicatorButton: string;
thumbnails: string;
thumbnailContent: string;
thumbnailPrevButton: ({ instance }: {
instance: any;
}) => (string | {
'p-disabled': any;
})[];
thumbnailPrevIcon: string;
thumbnailsViewport: string;
thumbnailItems: string;
thumbnailItem: ({ instance, index, activeIndex }: {
instance: any;
index: any;
activeIndex: any;
}) => (string | {
'p-galleria-thumbnail-item-current': boolean;
'p-galleria-thumbnail-item-active': any;
'p-galleria-thumbnail-item-start': boolean;
'p-galleria-thumbnail-item-end': boolean;
})[];
thumbnail: string;
thumbnailNextButton: ({ instance }: {
instance: any;
}) => (string | {
'p-disabled': any;
})[];
thumbnailNextIcon: string;
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GalleriaStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<GalleriaStyle>;
}
interface GalleriaStyle extends BaseStyle {
}
/**
* Galleria is an advanced content gallery component.
* @group Components
* @deprecated Use Gallery component instead.
*/
declare class Galleria extends BaseComponent<GalleriaPassThrough> {
componentName: string;
bindDirectiveInstance: Bind;
$pcGalleria: Galleria | undefined;
onAfterViewChecked(): void;
/**
* Index of the first item.
* @group Props
*/
activeIndex: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Whether to display the component on fullscreen.
* @group Props
*/
fullScreen: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Unique identifier of the element.
* @group Props
*/
id: _angular_core.InputSignal<string | undefined>;
/**
* An array of objects to display.
* @group Props
*/
value: _angular_core.InputSignal<any[] | undefined>;
/**
* Number of items per page.
* @group Props
*/
numVisible: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* An array of options for responsive design.
* @see {GalleriaResponsiveOptions}
* @group Props
*/
responsiveOptions: _angular_core.InputSignal<GalleriaResponsiveOptions[] | undefined>;
/**
* Whether to display navigation buttons in item section.
* @group Props
*/
showItemNavigators: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether to display navigation buttons in thumbnail container.
* @group Props
*/
showThumbnailNavigators: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether to display navigation buttons on item hover.
* @group Props
*/
showItemNavigatorsOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When enabled, item is changed on indicator hover.
* @group Props
*/
changeItemOnIndicatorHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Defines if scrolling would be infinite.
* @group Props
*/
circular: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Items are displayed with a slideshow in autoPlay mode.
* @group Props
*/
autoPlay: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When enabled, autorun should stop by click.
* @group Props
*/
shouldStopAutoplayByClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Time in milliseconds to scroll items.
* @group Props
*/
transitionInterval: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Whether to display thumbnail container.
* @group Props
*/
showThumbnails: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Position of thumbnails.
* @group Props
*/
thumbnailsPosition: _angular_core.InputSignal<GalleriaPosition>;
/**
* Height of the viewport in vertical thumbnail.
* @group Props
*/
verticalThumbnailViewPortHeight: _angular_core.InputSignal<string>;
/**
* Whether to display indicator container.
* @group Props
*/
showIndicators: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When enabled, indicator container is displayed on item container.
* @group Props
*/
showIndicatorsOnItem: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Position of indicators.
* @group Props
*/
indicatorsPosition: _angular_core.InputSignal<GalleriaPosition>;
/**
* Base zIndex value to use in layering.
* @group Props
*/
baseZIndex: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Style class of the mask on fullscreen mode.
* @group Props
*/
maskClass: _angular_core.InputSignal<string | undefined>;
/**
* Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used.
* @group Props
*/
containerClass: _angular_core.InputSignal<string | undefined>;
/**
* Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.
* @group Props
*/
containerStyle: _angular_core.InputSignal<CSSProperties>;
/**
* The motion options.
* @group Props
*/
motionOptions: _angular_core.InputSignal<MotionOptions | undefined>;
computedMotionOptions: _angular_core.Signal<MotionOptions>;
/**
* The mask motion options.
* @group Props
*/
maskMotionOptions: _angular_core.InputSignal<MotionOptions | undefined>;
computedMaskMotionOptions: _angular_core.Signal<MotionOptions>;
maskEnterActiveClass: _angular_core.Signal<"" | "p-overlay-mask-enter-active">;
maskLeaveActiveClass: _angular_core.Signal<"" | "p-overlay-mask-leave-active">;
maskRole: _angular_core.Signal<"dialog" | "region">;
maskAriaModal: _angular_core.Signal<"true" | undefined>;
/**
* Specifies the visibility of the mask on fullscreen mode.
* @group Props
*/
visible: _angular_core.ModelSignal<boolean>;
renderMask: _angular_core.WritableSignal<boolean>;
renderContent: _angular_core.WritableSignal<boolean>;
/**
* Callback to invoke on active index change.
* @param {number} number - Active index.
* @group Emits
*/
activeIndexChange: _angular_core.OutputEmitterRef<number>;
container: _angular_core.Signal<ElementRef<any> | undefined>;
_activeIndex: _angular_core.WritableSignal<number>;
/**
* Custom header template.
* @group Templates
*/
headerTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom footer template.
* @group Templates
*/
footerTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom indicator template.
* @group Templates
*/
indicatorTemplate: _angular_core.Signal<TemplateRef<GalleriaIndicatorTemplateContext> | undefined>;
/**
* Custom caption template.
* @group Templates
*/
captionTemplate: _angular_core.Signal<TemplateRef<GalleriaCaptionTemplateContext<any>> | undefined>;
/**
* Custom close icon template.
* @group Templates
*/
closeIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom previous thumbnail icon template.
* @group Templates
*/
previousThumbnailIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom next thumbnail icon template.
* @group Templates
*/
nextThumbnailIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom item previous icon template.
* @group Templates
*/
itemPreviousIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom item next icon template.
* @group Templates
*/
itemNextIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom item template.
* @group Templates
*/
itemTemplate: _angular_core.Signal<TemplateRef<GalleriaItemTemplateContext<any>> | undefined>;
/**
* Custom thumbnail template.
* @group Templates
*/
thumbnailTemplate: _angular_core.Signal<TemplateRef<GalleriaThumbnailTemplateContext<any>> | undefined>;
maskVisible: boolean;
numVisibleLimit: _angular_core.WritableSignal<number>;
d_numVisible: _angular_core.Signal<number>;
_componentStyle: GalleriaStyle;
mask: HTMLElement | undefined;
element: ElementRef<any>;
constructor();
onMaskHide(event?: MouseEvent): void;
onActiveItemChange(index: number): void;
onBeforeEnter(event: MotionEvent): void;
onBeforeLeave(): void;
onAfterLeave(): void;
onMaskAfterLeave(): void;
enableModality(): void;
disableModality(): void;
onDestroy(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Galleria, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Galleria, "p-galleria", never, { "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "fullScreen": { "alias": "fullScreen"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "numVisible": { "alias": "numVisible"; "required": false; "isSignal": true; }; "responsiveOptions": { "alias": "responsiveOptions"; "required": false; "isSignal": true; }; "showItemNavigators": { "alias": "showItemNavigators"; "required": false; "isSignal": true; }; "showThumbnailNavigators": { "alias": "showThumbnailNavigators"; "required": false; "isSignal": true; }; "showItemNavigatorsOnHover": { "alias": "showItemNavigatorsOnHover"; "required": false; "isSignal": true; }; "changeItemOnIndicatorHover": { "alias": "changeItemOnIndicatorHover"; "required": false; "isSignal": true; }; "circular": { "alias": "circular"; "required": false; "isSignal": true; }; "autoPlay": { "alias": "autoPlay"; "required": false; "isSignal": true; }; "shouldStopAutoplayByClick": { "alias": "shouldStopAutoplayByClick"; "required": false; "isSignal": true; }; "transitionInterval": { "alias": "transitionInterval"; "required": false; "isSignal": true; }; "showThumbnails": { "alias": "showThumbnails"; "required": false; "isSignal": true; }; "thumbnailsPosition": { "alias": "thumbnailsPosition"; "required": false; "isSignal": true; }; "verticalThumbnailViewPortHeight": { "alias": "verticalThumbnailViewPortHeight"; "required": false; "isSignal": true; }; "showIndicators": { "alias": "showIndicators"; "required": false; "isSignal": true; }; "showIndicatorsOnItem": { "alias": "showIndicatorsOnItem"; "required": false; "isSignal": true; }; "indicatorsPosition": { "alias": "indicatorsPosition"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; "maskClass": { "alias": "maskClass"; "required": false; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; "isSignal": true; }; "containerStyle": { "alias": "containerStyle"; "required": false; "isSignal": true; }; "motionOptions": { "alias": "motionOptions"; "required": false; "isSignal": true; }; "maskMotionOptions": { "alias": "maskMotionOptions"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "activeIndexChange": "activeIndexChange"; }, ["headerTemplate", "footerTemplate", "indicatorTemplate", "captionTemplate", "closeIconTemplate", "previousThumbnailIconTemplate", "nextThumbnailIconTemplate", "itemPreviousIconTemplate", "itemNextIconTemplate", "itemTemplate", "thumbnailTemplate"], never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class GalleriaModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GalleriaModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<GalleriaModule, never, [typeof Galleria, typeof i2.SharedModule], [typeof Galleria, typeof i2.SharedModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<GalleriaModule>;
}
export { Galleria, GalleriaClasses, GalleriaModule, GalleriaStyle };