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
1,049 lines (1,042 loc) • 104 kB
JavaScript
export * from 'primeng/types/galleria';
import * as i2 from '@angular/common';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, computed, signal, EventEmitter, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, HostListener, NgModule } from '@angular/core';
import { findSingle, focus, removeClass, uuid, setAttribute, find, getAttribute, addClass } from '@primeuix/utils';
import { PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind, BindModule } from 'primeng/bind';
import { blockBodyScroll, unblockBodyScroll } from 'primeng/dom';
import { FocusTrap } from 'primeng/focustrap';
import { TimesIcon, ChevronRightIcon, ChevronLeftIcon, ChevronUpIcon, ChevronDownIcon } from 'primeng/icons';
import * as i3 from 'primeng/motion';
import { MotionModule } from 'primeng/motion';
import { Ripple } from 'primeng/ripple';
import { ZIndexUtils } from 'primeng/utils';
import { style } from '@primeuix/styles/galleria';
import { BaseStyle } from 'primeng/base';
const classes = {
mask: 'p-galleria-mask p-overlay-mask',
root: ({ instance }) => {
const thumbnailsPosClass = instance.galleria.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.galleria.thumbnailsPosition);
const indicatorPosClass = instance.galleria.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.galleria.indicatorsPosition);
return [
'p-galleria p-component',
{
'p-galleria-fullscreen': instance.galleria.fullScreen,
'p-galleria-inset-indicators': instance.galleria.showIndicatorsOnItem,
'p-galleria-hover-navigators': instance.galleria.showItemNavigatorsOnHover && !instance.galleria.fullScreen
},
thumbnailsPosClass,
indicatorPosClass
];
},
closeButton: 'p-galleria-close-button',
closeIcon: 'p-galleria-close-icon',
header: 'p-galleria-header',
content: 'p-galleria-content',
footer: 'p-galleria-footer',
itemsContainer: 'p-galleria-items-container',
items: 'p-galleria-items',
prevButton: ({ instance }) => [
'p-galleria-prev-button p-galleria-nav-button',
{
'p-disabled': instance.isNavBackwardDisabled()
}
],
prevIcon: 'p-galleria-prev-icon',
item: 'p-galleria-item',
nextButton: ({ instance }) => [
'p-galleria-next-button p-galleria-nav-button',
{
'p-disabled': instance.isNavForwardDisabled()
}
],
nextIcon: 'p-galleria-next-icon',
caption: 'p-galleria-caption',
indicatorList: 'p-galleria-indicator-list',
indicator: ({ instance, index }) => [
'p-galleria-indicator',
{
'p-galleria-indicator-active': instance.isIndicatorItemActive(index)
}
],
indicatorButton: 'p-galleria-indicator-button',
thumbnails: 'p-galleria-thumbnails',
thumbnailContent: 'p-galleria-thumbnails-content',
thumbnailPrevButton: ({ instance }) => [
'p-galleria-thumbnail-prev-button p-galleria-thumbnail-nav-button',
{
'p-disabled': instance.isNavBackwardDisabled()
}
],
thumbnailPrevIcon: 'p-galleria-thumbnail-prev-icon',
thumbnailsViewport: 'p-galleria-thumbnails-viewport',
thumbnailItems: 'p-galleria-thumbnail-items',
thumbnailItem: ({ instance, index, activeIndex }) => [
'p-galleria-thumbnail-item',
{
'p-galleria-thumbnail-item-current': activeIndex === index,
'p-galleria-thumbnail-item-active': instance.isItemActive(index),
'p-galleria-thumbnail-item-start': instance.firstItemAciveIndex() === index,
'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index
}
],
thumbnail: 'p-galleria-thumbnail',
thumbnailNextButton: ({ instance }) => [
'p-galleria-thumbnail-next-button p-galleria-thumbnail-nav-button',
{
'p-disabled': instance.isNavForwardDisabled()
}
],
thumbnailNextIcon: 'p-galleria-thumbnail-next-icon'
};
class GalleriaStyle extends BaseStyle {
name = 'galleria';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: GalleriaStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: GalleriaStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: GalleriaStyle, decorators: [{
type: Injectable
}] });
/**
*
* Galleria is an advanced content gallery component.
*
* [Live Demo](https://www.primeng.org/galleria/)
*
* @module galleriastyle
*
*/
var GalleriaClasses;
(function (GalleriaClasses) {
/**
* Class name of the mask element
*/
GalleriaClasses["mask"] = "p-galleria-mask";
/**
* Class name of the root element
*/
GalleriaClasses["root"] = "p-galleria";
/**
* Class name of the close button element
*/
GalleriaClasses["closeButton"] = "p-galleria-close-button";
/**
* Class name of the close icon element
*/
GalleriaClasses["closeIcon"] = "p-galleria-close-icon";
/**
* Class name of the header element
*/
GalleriaClasses["header"] = "p-galleria-header";
/**
* Class name of the content element
*/
GalleriaClasses["content"] = "p-galleria-content";
/**
* Class name of the footer element
*/
GalleriaClasses["footer"] = "p-galleria-footer";
/**
* Class name of the items container element
*/
GalleriaClasses["itemsContainer"] = "p-galleria-items-container";
/**
* Class name of the items element
*/
GalleriaClasses["items"] = "p-galleria-items";
/**
* Class name of the previous item button element
*/
GalleriaClasses["prevButton"] = "p-galleria-prev-button";
/**
* Class name of the previous item icon element
*/
GalleriaClasses["prevIcon"] = "p-galleria-prev-icon";
/**
* Class name of the item element
*/
GalleriaClasses["item"] = "p-galleria-item";
/**
* Class name of the next item button element
*/
GalleriaClasses["nextButton"] = "p-galleria-next-button";
/**
* Class name of the next item icon element
*/
GalleriaClasses["nextIcon"] = "p-galleria-next-icon";
/**
* Class name of the caption element
*/
GalleriaClasses["caption"] = "p-galleria-caption";
/**
* Class name of the indicator list element
*/
GalleriaClasses["indicatorList"] = "p-galleria-indicator-list";
/**
* Class name of the indicator element
*/
GalleriaClasses["indicator"] = "p-galleria-indicator";
/**
* Class name of the indicator button element
*/
GalleriaClasses["indicatorButton"] = "p-galleria-indicator-button";
/**
* Class name of the thumbnails element
*/
GalleriaClasses["thumbnails"] = "p-galleria-thumbnails";
/**
* Class name of the thumbnail content element
*/
GalleriaClasses["thumbnailContent"] = "p-galleria-thumbnails-content";
/**
* Class name of the previous thumbnail button element
*/
GalleriaClasses["previousThumbnailButton"] = "p-galleria-thumbnail-prev-button";
/**
* Class name of the previous thumbnail icon element
*/
GalleriaClasses["previousThumbnailIcon"] = "p-galleria-thumbnail-prev-icon";
/**
* Class name of the thumbnails viewport element
*/
GalleriaClasses["thumbnailsViewport"] = "p-galleria-thumbnails-viewport";
/**
* Class name of the thumbnail items element
*/
GalleriaClasses["thumbnailItems"] = "p-galleria-thumbnail-items";
/**
* Class name of the thumbnail item element
*/
GalleriaClasses["thumbnailItem"] = "p-galleria-thumbnail-item";
/**
* Class name of the thumbnail element
*/
GalleriaClasses["thumbnail"] = "p-galleria-thumbnail";
/**
* Class name of the next thumbnail button element
*/
GalleriaClasses["nextThumbnailButton"] = "p-galleria-thumbnail-next-button";
/**
* Class name of the next thumbnail icon element
*/
GalleriaClasses["nextThumbnailIcon"] = "p-galleria-thumbnail-next-icon";
})(GalleriaClasses || (GalleriaClasses = {}));
const GALLERIA_INSTANCE = new InjectionToken('GALLERIA_INSTANCE');
/**
* Galleria is an advanced content gallery component.
* @group Components
*/
class Galleria extends BaseComponent {
element;
bindDirectiveInstance = inject(Bind, { self: true });
$pcGalleria = inject(GALLERIA_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('host'));
}
/**
* Index of the first item.
* @group Props
*/
get activeIndex() {
return this._activeIndex;
}
set activeIndex(activeIndex) {
this._activeIndex = activeIndex;
}
/**
* Whether to display the component on fullscreen.
* @group Props
*/
fullScreen = false;
/**
* Unique identifier of the element.
* @group Props
*/
id;
/**
* An array of objects to display.
* @group Props
*/
value;
/**
* Number of items per page.
* @group Props
*/
numVisible = 3;
/**
* An array of options for responsive design.
* @see {GalleriaResponsiveOptions}
* @group Props
*/
responsiveOptions;
/**
* Whether to display navigation buttons in item section.
* @group Props
*/
showItemNavigators = false;
/**
* Whether to display navigation buttons in thumbnail container.
* @group Props
*/
showThumbnailNavigators = true;
/**
* Whether to display navigation buttons on item hover.
* @group Props
*/
showItemNavigatorsOnHover = false;
/**
* When enabled, item is changed on indicator hover.
* @group Props
*/
changeItemOnIndicatorHover = false;
/**
* Defines if scrolling would be infinite.
* @group Props
*/
circular = false;
/**
* Items are displayed with a slideshow in autoPlay mode.
* @group Props
*/
autoPlay = false;
/**
* When enabled, autorun should stop by click.
* @group Props
*/
shouldStopAutoplayByClick = true;
/**
* Time in milliseconds to scroll items.
* @group Props
*/
transitionInterval = 4000;
/**
* Whether to display thumbnail container.
* @group Props
*/
showThumbnails = true;
/**
* Position of thumbnails.
* @group Props
*/
thumbnailsPosition = 'bottom';
/**
* Height of the viewport in vertical thumbnail.
* @group Props
*/
verticalThumbnailViewPortHeight = '300px';
/**
* Whether to display indicator container.
* @group Props
*/
showIndicators = false;
/**
* When enabled, indicator container is displayed on item container.
* @group Props
*/
showIndicatorsOnItem = false;
/**
* Position of indicators.
* @group Props
*/
indicatorsPosition = 'bottom';
/**
* Base zIndex value to use in layering.
* @group Props
*/
baseZIndex = 0;
/**
* Style class of the mask on fullscreen mode.
* @group Props
*/
maskClass;
/**
* Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used.
* @group Props
*/
containerClass;
/**
* Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.
* @group Props
*/
containerStyle;
/**
* Transition options of the show animation.
* @deprecated since v21.0.0. Use `motionOptions` instead.
* @group Props
*/
showTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
/**
* Transition options of the hide animation.
* @deprecated since v21.0.0. Use `motionOptions` instead.
* @group Props
*/
hideTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
/**
* The motion options.
* @group Props
*/
motionOptions = input(undefined, ...(ngDevMode ? [{ debugName: "motionOptions" }] : []));
computedMotionOptions = computed(() => {
return {
...this.ptm('motion'),
...this.motionOptions()
};
}, ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : []));
/**
* The mask motion options.
* @group Props
*/
maskMotionOptions = input(undefined, ...(ngDevMode ? [{ debugName: "maskMotionOptions" }] : []));
computedMaskMotionOptions = computed(() => {
return {
...this.ptm('maskMotion'),
...this.maskMotionOptions()
};
}, ...(ngDevMode ? [{ debugName: "computedMaskMotionOptions" }] : []));
/**
* Specifies the visibility of the mask on fullscreen mode.
* @group Props
*/
get visible() {
return this._visible;
}
set visible(visible) {
this._visible = visible;
if (this._visible && !this.maskVisible) {
this.maskVisible = true;
this.renderMask.set(true);
this.renderContent.set(true);
}
else if (!this._visible && this.maskVisible) {
this.maskVisible = false;
}
}
renderMask = signal(false, ...(ngDevMode ? [{ debugName: "renderMask" }] : []));
renderContent = signal(false, ...(ngDevMode ? [{ debugName: "renderContent" }] : []));
/**
* Callback to invoke on active index change.
* @param {number} number - Active index.
* @group Emits
*/
activeIndexChange = new EventEmitter();
/**
* Callback to invoke on visiblity change.
* @param {boolean} boolean - Visible value.
* @group Emits
*/
visibleChange = new EventEmitter();
container;
_visible = false;
_activeIndex = 0;
/**
* Custom header template.
* @group Templates
*/
headerTemplate;
headerFacet;
/**
* Custom footer template.
* @group Templates
*/
footerTemplate;
footerFacet;
/**
* Custom indicator template.
* @group Templates
*/
indicatorTemplate;
indicatorFacet;
/**
* Custom caption template.
* @group Templates
*/
captionTemplate;
captionFacet;
/**
* Custom close icon template.
* @group Templates
*/
_closeIconTemplate;
closeIconTemplate;
/**
* Custom previous thumbnail icon template.
* @group Templates
*/
_previousThumbnailIconTemplate;
previousThumbnailIconTemplate;
/**
* Custom next thumbnail icon template.
* @group Templates
*/
_nextThumbnailIconTemplate;
nextThumbnailIconTemplate;
/**
* Custom item previous icon template.
* @group Templates
*/
_itemPreviousIconTemplate;
itemPreviousIconTemplate;
/**
* Custom item next icon template.
* @group Templates
*/
_itemNextIconTemplate;
itemNextIconTemplate;
/**
* Custom item template.
* @group Templates
*/
_itemTemplate;
itemTemplate;
/**
* Custom thumbnail template.
* @group Templates
*/
_thumbnailTemplate;
thumbnailTemplate;
maskVisible = false;
numVisibleLimit = 0;
_componentStyle = inject(GalleriaStyle);
mask;
templates;
constructor(element) {
super();
this.element = element;
}
onAfterContentInit() {
this.templates?.forEach((item) => {
switch (item.getType()) {
case 'header':
this.headerFacet = item.template;
break;
case 'footer':
this.footerFacet = item.template;
break;
case 'indicator':
this.indicatorFacet = item.template;
break;
case 'closeicon':
this.closeIconTemplate = item.template;
break;
case 'itemnexticon':
this.itemNextIconTemplate = item.template;
break;
case 'itempreviousicon':
this.itemPreviousIconTemplate = item.template;
break;
case 'previousthumbnailicon':
this.previousThumbnailIconTemplate = item.template;
break;
case 'nextthumbnailicon':
this.nextThumbnailIconTemplate = item.template;
break;
case 'caption':
this.captionFacet = item.template;
break;
case 'item':
this.itemTemplate = item.template;
break;
case 'thumbnail':
this.thumbnailTemplate = item.template;
break;
}
});
}
onChanges(simpleChanges) {
if (simpleChanges.value && simpleChanges.value.currentValue?.length < this.numVisible) {
this.numVisibleLimit = simpleChanges.value.currentValue.length;
}
else {
this.numVisibleLimit = 0;
}
}
onMaskHide(event) {
if (!event || event.target === event.currentTarget) {
this.visible = false;
this.visibleChange.emit(false);
}
}
onActiveItemChange(index) {
if (this.activeIndex !== index) {
this.activeIndex = index;
this.activeIndexChange.emit(index);
}
}
onBeforeEnter(event) {
this.mask = event.element?.parentElement;
this.enableModality();
setTimeout(() => {
const focusTarget = findSingle(this.container?.nativeElement, '[data-pc-section="closebutton"]');
if (focusTarget)
focus(focusTarget);
}, 25);
}
onBeforeLeave() {
if (this.mask) {
this.maskVisible = false;
}
}
onAfterLeave() {
this.disableModality();
this.renderContent.set(false);
}
onMaskAfterLeave() {
if (!this.renderContent()) {
this.renderMask.set(false);
}
}
enableModality() {
//@ts-ignore
blockBodyScroll();
this.cd.markForCheck();
if (this.mask) {
ZIndexUtils.set('modal', this.mask, this.baseZIndex || this.config.zIndex.modal);
}
}
disableModality() {
//@ts-ignore
unblockBodyScroll();
this.cd.markForCheck();
if (this.mask) {
ZIndexUtils.clear(this.mask);
}
}
onDestroy() {
if (this.fullScreen) {
removeClass(this.document.body, 'p-overflow-hidden');
}
if (this.mask) {
this.disableModality();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: Galleria, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: Galleria, isStandalone: false, selector: "p-galleria", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: false, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, numVisible: { classPropertyName: "numVisible", publicName: "numVisible", isSignal: false, isRequired: false, transformFunction: numberAttribute }, responsiveOptions: { classPropertyName: "responsiveOptions", publicName: "responsiveOptions", isSignal: false, isRequired: false, transformFunction: null }, showItemNavigators: { classPropertyName: "showItemNavigators", publicName: "showItemNavigators", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showThumbnailNavigators: { classPropertyName: "showThumbnailNavigators", publicName: "showThumbnailNavigators", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showItemNavigatorsOnHover: { classPropertyName: "showItemNavigatorsOnHover", publicName: "showItemNavigatorsOnHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, changeItemOnIndicatorHover: { classPropertyName: "changeItemOnIndicatorHover", publicName: "changeItemOnIndicatorHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, shouldStopAutoplayByClick: { classPropertyName: "shouldStopAutoplayByClick", publicName: "shouldStopAutoplayByClick", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, transitionInterval: { classPropertyName: "transitionInterval", publicName: "transitionInterval", isSignal: false, isRequired: false, transformFunction: numberAttribute }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, thumbnailsPosition: { classPropertyName: "thumbnailsPosition", publicName: "thumbnailsPosition", isSignal: false, isRequired: false, transformFunction: null }, verticalThumbnailViewPortHeight: { classPropertyName: "verticalThumbnailViewPortHeight", publicName: "verticalThumbnailViewPortHeight", isSignal: false, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showIndicatorsOnItem: { classPropertyName: "showIndicatorsOnItem", publicName: "showIndicatorsOnItem", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, indicatorsPosition: { classPropertyName: "indicatorsPosition", publicName: "indicatorsPosition", isSignal: false, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, maskClass: { classPropertyName: "maskClass", publicName: "maskClass", isSignal: false, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: false, isRequired: false, transformFunction: null }, containerStyle: { classPropertyName: "containerStyle", publicName: "containerStyle", isSignal: false, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, maskMotionOptions: { classPropertyName: "maskMotionOptions", publicName: "maskMotionOptions", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { activeIndexChange: "activeIndexChange", visibleChange: "visibleChange" }, providers: [GalleriaStyle, { provide: GALLERIA_INSTANCE, useExisting: Galleria }, { provide: PARENT_INSTANCE, useExisting: Galleria }], queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "indicatorTemplate", first: true, predicate: ["indicator"] }, { propertyName: "captionTemplate", first: true, predicate: ["caption"] }, { propertyName: "_closeIconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "_previousThumbnailIconTemplate", first: true, predicate: ["previousthumbnailicon"] }, { propertyName: "_nextThumbnailIconTemplate", first: true, predicate: ["nextthumbnailicon"] }, { propertyName: "_itemPreviousIconTemplate", first: true, predicate: ["itempreviousicon"] }, { propertyName: "_itemNextIconTemplate", first: true, predicate: ["itemnexticon"] }, { propertyName: "_itemTemplate", first: true, predicate: ["item"] }, { propertyName: "_thumbnailTemplate", first: true, predicate: ["thumbnail"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
<div *ngIf="fullScreen; else windowed" #container>
@if (renderMask()) {
<div
[pBind]="ptm('mask')"
[pMotion]="maskVisible"
[pMotionAppear]="true"
[pMotionEnterActiveClass]="fullScreen ? 'p-overlay-mask-enter-active' : ''"
[pMotionLeaveActiveClass]="fullScreen ? 'p-overlay-mask-leave-active' : ''"
[pMotionOptions]="computedMaskMotionOptions()"
(pMotionOnAfterLeave)="onMaskAfterLeave()"
[ngClass]="cx('mask')"
[class]="maskClass"
[attr.role]="fullScreen ? 'dialog' : 'region'"
[attr.aria-modal]="fullScreen ? 'true' : undefined"
(click)="onMaskHide($event)"
>
@if (renderContent()) {
<div
pGalleriaContent
[pMotion]="visible"
[pMotionAppear]="true"
[pMotionName]="'p-galleria'"
[pMotionOptions]="computedMotionOptions()"
(pMotionOnBeforeEnter)="onBeforeEnter($event)"
(pMotionOnBeforeLeave)="onBeforeLeave()"
(pMotionOnAfterLeave)="onAfterLeave()"
[value]="value"
[activeIndex]="activeIndex"
[numVisible]="numVisibleLimit || numVisible"
(maskHide)="onMaskHide()"
(activeItemChange)="onActiveItemChange($event)"
[ngStyle]="containerStyle"
[fullScreen]="fullScreen"
[pt]="pt()"
pFocusTrap
[pFocusTrapDisabled]="!fullScreen"
[unstyled]="unstyled()"
></div>
}
</div>
}
</div>
<ng-template #windowed>
<div pGalleriaContent [pt]="pt()" [unstyled]="unstyled()" [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></div>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => FocusTrap), selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[pBind]", inputs: ["pBind"] }, { kind: "directive", type: i0.forwardRef(() => i3.MotionDirective), selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }, { kind: "component", type: i0.forwardRef(() => GalleriaContent), selector: "div[pGalleriaContent]", inputs: ["activeIndex", "value", "numVisible", "fullScreen"], outputs: ["maskHide", "activeItemChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: Galleria, decorators: [{
type: Component,
args: [{
selector: 'p-galleria',
standalone: false,
template: `
<div *ngIf="fullScreen; else windowed" #container>
@if (renderMask()) {
<div
[pBind]="ptm('mask')"
[pMotion]="maskVisible"
[pMotionAppear]="true"
[pMotionEnterActiveClass]="fullScreen ? 'p-overlay-mask-enter-active' : ''"
[pMotionLeaveActiveClass]="fullScreen ? 'p-overlay-mask-leave-active' : ''"
[pMotionOptions]="computedMaskMotionOptions()"
(pMotionOnAfterLeave)="onMaskAfterLeave()"
[ngClass]="cx('mask')"
[class]="maskClass"
[attr.role]="fullScreen ? 'dialog' : 'region'"
[attr.aria-modal]="fullScreen ? 'true' : undefined"
(click)="onMaskHide($event)"
>
@if (renderContent()) {
<div
pGalleriaContent
[pMotion]="visible"
[pMotionAppear]="true"
[pMotionName]="'p-galleria'"
[pMotionOptions]="computedMotionOptions()"
(pMotionOnBeforeEnter)="onBeforeEnter($event)"
(pMotionOnBeforeLeave)="onBeforeLeave()"
(pMotionOnAfterLeave)="onAfterLeave()"
[value]="value"
[activeIndex]="activeIndex"
[numVisible]="numVisibleLimit || numVisible"
(maskHide)="onMaskHide()"
(activeItemChange)="onActiveItemChange($event)"
[ngStyle]="containerStyle"
[fullScreen]="fullScreen"
[pt]="pt()"
pFocusTrap
[pFocusTrapDisabled]="!fullScreen"
[unstyled]="unstyled()"
></div>
}
</div>
}
</div>
<ng-template #windowed>
<div pGalleriaContent [pt]="pt()" [unstyled]="unstyled()" [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></div>
</ng-template>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [GalleriaStyle, { provide: GALLERIA_INSTANCE, useExisting: Galleria }, { provide: PARENT_INSTANCE, useExisting: Galleria }],
hostDirectives: [Bind]
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { activeIndex: [{
type: Input
}], fullScreen: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], id: [{
type: Input
}], value: [{
type: Input
}], numVisible: [{
type: Input,
args: [{ transform: numberAttribute }]
}], responsiveOptions: [{
type: Input
}], showItemNavigators: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], showThumbnailNavigators: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], showItemNavigatorsOnHover: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], changeItemOnIndicatorHover: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], circular: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], autoPlay: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], shouldStopAutoplayByClick: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], transitionInterval: [{
type: Input,
args: [{ transform: numberAttribute }]
}], showThumbnails: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], thumbnailsPosition: [{
type: Input
}], verticalThumbnailViewPortHeight: [{
type: Input
}], showIndicators: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], showIndicatorsOnItem: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], indicatorsPosition: [{
type: Input
}], baseZIndex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], maskClass: [{
type: Input
}], containerClass: [{
type: Input
}], containerStyle: [{
type: Input
}], showTransitionOptions: [{
type: Input
}], hideTransitionOptions: [{
type: Input
}], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], maskMotionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMotionOptions", required: false }] }], visible: [{
type: Input
}], activeIndexChange: [{
type: Output
}], visibleChange: [{
type: Output
}], container: [{
type: ViewChild,
args: ['container']
}], headerTemplate: [{
type: ContentChild,
args: ['header', { descendants: false }]
}], footerTemplate: [{
type: ContentChild,
args: ['footer', { descendants: false, static: false }]
}], indicatorTemplate: [{
type: ContentChild,
args: ['indicator', { descendants: false }]
}], captionTemplate: [{
type: ContentChild,
args: ['caption', { descendants: false }]
}], _closeIconTemplate: [{
type: ContentChild,
args: ['closeicon', { descendants: false }]
}], _previousThumbnailIconTemplate: [{
type: ContentChild,
args: ['previousthumbnailicon', { descendants: false }]
}], _nextThumbnailIconTemplate: [{
type: ContentChild,
args: ['nextthumbnailicon', { descendants: false }]
}], _itemPreviousIconTemplate: [{
type: ContentChild,
args: ['itempreviousicon', { descendants: false }]
}], _itemNextIconTemplate: [{
type: ContentChild,
args: ['itemnexticon', { descendants: false }]
}], _itemTemplate: [{
type: ContentChild,
args: ['item', { descendants: false }]
}], _thumbnailTemplate: [{
type: ContentChild,
args: ['thumbnail', { descendants: false, static: false }]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class GalleriaContent extends BaseComponent {
galleria;
differs;
hostName = 'Galleria';
bindDirectiveInstance = inject(Bind, { self: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.getPTOptions('root'));
}
get activeIndex() {
return this._activeIndex;
}
set activeIndex(activeIndex) {
this._activeIndex = activeIndex;
}
value = [];
numVisible;
fullScreen;
maskHide = new EventEmitter();
activeItemChange = new EventEmitter();
closeButton;
_componentStyle = inject(GalleriaStyle);
$pcGalleria = inject(GALLERIA_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
id;
_activeIndex = 0;
slideShowActive = true;
interval;
styleClass;
differ;
constructor(galleria, differs) {
super();
this.galleria = galleria;
this.differs = differs;
this.id = this.galleria.id || uuid('pn_id_');
this.differ = this.differs.find(this.galleria).create();
}
// For custom fullscreen
handleFullscreenChange(event) {
if (document?.fullscreenElement === this.el.nativeElement?.children[0]) {
this.fullScreen = true;
}
else {
this.fullScreen = false;
}
}
onDoCheck() {
if (isPlatformBrowser(this.galleria.platformId)) {
const changes = this.differ.diff(this.galleria);
if (changes && changes.forEachItem.length > 0) {
// Because we change the properties of the parent component,
// and the children take our entity from the injector.
// We can tell the children to redraw themselves when we change the properties of the parent component.
// Since we have an onPush strategy
this.cd.markForCheck();
}
}
}
shouldRenderFooter() {
return (this.galleria.footerFacet && this.galleria.templates && this.galleria.templates.toArray().length > 0) || this.galleria.footerTemplate;
}
startSlideShow() {
if (isPlatformBrowser(this.galleria.platformId)) {
this.interval = setInterval(() => {
let activeIndex = this.galleria.circular && this.value.length - 1 === this.activeIndex ? 0 : this.activeIndex + 1;
this.onActiveIndexChange(activeIndex);
this.activeIndex = activeIndex;
}, this.galleria.transitionInterval);
this.slideShowActive = true;
}
}
stopSlideShow() {
if (this.galleria.autoPlay && !this.galleria.shouldStopAutoplayByClick) {
return;
}
if (this.interval) {
clearInterval(this.interval);
}
this.slideShowActive = false;
}
getPositionClass(preClassName, position) {
const positions = ['top', 'left', 'bottom', 'right'];
const pos = positions.find((item) => item === position);
return pos ? `${preClassName}-${pos}` : '';
}
isVertical() {
return this.galleria.thumbnailsPosition === 'left' || this.galleria.thumbnailsPosition === 'right';
}
onActiveIndexChange(index) {
if (this.activeIndex !== index) {
this.activeIndex = index;
this.activeItemChange.emit(this.activeIndex);
}
}
closeAriaLabel() {
return this.config.translation.aria ? this.config.translation.aria.close : undefined;
}
getPTOptions(key) {
return this.ptm(key, {
context: {
pt: this.pt(),
unstyled: this.unstyled()
}
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.5", type: GalleriaContent, isStandalone: false, selector: "div[pGalleriaContent]", inputs: { activeIndex: "activeIndex", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute], fullScreen: ["fullScreen", "fullScreen", booleanAttribute] }, outputs: { maskHide: "maskHide", activeItemChange: "activeItemChange" }, host: { listeners: { "document:fullscreenchange": "handleFullscreenChange($event)" }, properties: { "attr.id": "id", "attr.role": "\"region\"", "style": "!galleria.fullScreen ? galleria.containerStyle : {}", "class": "cn(cx('root'))" } }, providers: [GalleriaStyle], viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
<ng-container *ngIf="value && value.length > 0">
<button *ngIf="galleria.fullScreen" type="button" [pBind]="getPTOptions('closeButton')" [class]="cx('closeButton')" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()">
<svg data-p-icon="times" *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [pBind]="getPTOptions('closeIcon')" [class]="cx('closeIcon')" />
<ng-template *ngTemplateOutlet="galleria.closeIconTemplate || galleria._closeIconTemplate"></ng-template>
</button>
<div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" pGalleriaItemSlot [unstyled]="unstyled()" type="header" [templates]="galleria.templates" [pBind]="getPTOptions('header')" [class]="cx('header')"></div>
<div [pBind]="getPTOptions('content')" [class]="cx('content')" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
<div
pGalleriaItem
[id]="id"
[value]="value"
[activeIndex]="activeIndex"
[circular]="galleria.circular"
[templates]="galleria.templates"
(onActiveIndexChange)="onActiveIndexChange($event)"
[showIndicators]="galleria.showIndicators"
[changeItemOnIndicatorHover]="galleria.changeItemOnIndicatorHover"
[indicatorFacet]="galleria.indicatorFacet"
[captionFacet]="galleria.captionFacet"
[showItemNavigators]="galleria.showItemNavigators"
[autoPlay]="galleria.autoPlay"
[slideShowActive]="slideShowActive"
(startSlideShow)="startSlideShow()"
(stopSlideShow)="stopSlideShow()"
[pt]="pt()"
[unstyled]="unstyled()"
[class]="cx('itemsContainer')"
></div>
<div
pGalleriaThumbnails
*ngIf="galleria.showThumbnails"
[containerId]="id"
[value]="value"
(onActiveIndexChange)="onActiveIndexChange($event)"
[activeIndex]="activeIndex"
[templates]="galleria.templates"
[numVisible]="numVisible"
[responsiveOptions]="galleria.responsiveOptions"
[circular]="galleria.circular"
[isVertical]="isVertical()"
[contentHeight]="galleria.verticalThumbnailViewPortHeight"
[showThumbnailNavigators]="galleria.showThumbnailNavigators"
[slideShowActive]="slideShowActive"
(stopSlideShow)="stopSlideShow()"
[pt]="pt()"
[unstyled]="unstyled()"
></div>
</div>
<div *ngIf="shouldRenderFooter()" pGalleriaItemSlot [pBind]="getPTOptions('footer')" [class]="cx('footer')" type="footer" [templates]="galleria.templates" [unstyled]="unstyled()"></div>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "[data-p-icon=\"times\"]" }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "div[pGalleriaItemSlot]", inputs: ["templates", "index", "item", "type"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItem), selector: "div[pGalleriaItem]", inputs: ["id", "circular", "value", "showItemNavigators", "showIndicators", "slideShowActive", "changeItemOnIndicatorHover", "autoPlay", "templates", "indicatorFacet", "captionFacet", "activeIndex"], outputs: ["startSlideShow", "stopSlideShow", "onActiveIndexChange"] }, { kind: "component", type: i0.forwardRef(() => GalleriaThumbnails), selector: "div[pGalleriaThumbnails]", inputs: ["containerId", "value", "isVertical", "slideShowActive", "circular", "responsiveOptions", "contentHeight", "showThumbnailNavigators", "templates", "numVisible", "activeIndex"], outputs: ["onActiveIndexChange", "stopSlideShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: GalleriaContent, decorators: [{
type: Component,
args: [{
selector: 'div[pGalleriaContent]',
standalone: false,
template: `
<ng-container *ngIf="value && value.length > 0">
<button *ngIf="galleria.fullScreen" type="button" [pBind]="getPTOptions('closeButton')" [class]="cx('closeButton')" (click)="maskHide.emit()" [attr.aria-label]="closeAriaLabel()">
<svg data-p-icon="times" *ngIf="!galleria.closeIconTemplate && !galleria._closeIconTemplate" [pBind]="getPTOptions('closeIcon')" [class]="cx('closeIcon')" />
<ng-template *ngTemplateOutlet="galleria.closeIconTemplate || galleria._closeIconTemplate"></ng-template>
</button>
<div *ngIf="galleria.templates && (galleria.headerFacet || galleria.headerTemplate)" pGalleriaItemSlot [unstyled]="unstyled()" type="header" [templates]="galleria.templates" [pBind]="getPTOptions('header')" [class]="cx('header')"></div>
<div [pBind]="getPTOptions('content')" [class]="cx('content')" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
<div
pGalleriaItem
[id]="id"
[value]="value"
[activeIndex]="activeIndex"
[circular]="galleria.circular"
[templates]="galleria.templates"
(onActiveIndexChange)="onActiveIndexChange($event)"
[showIndicators]="galleria.showIndicators"
[changeItemOnIndicatorHover]="galleria.changeItemOnIndicatorHover"
[indicatorFacet]="galleria.indicatorFacet"
[captionFacet]="galleria.captionFacet"
[showItemNavigators]="galleria.showItemNavigators"
[autoPlay]="galleria.autoPlay"
[slideShowActive]="slideShowActive"
(startSlideShow)="startSlideShow()"
(stopSlideShow)="stopSlideShow()"
[pt]="pt()"
[unstyled]="unstyled()"
[class]="cx('itemsContainer')"
></div>
<div
pGalleriaThumbnails
*ngIf="galleria.showThumbnails"
[containerId]="id"
[value]="value"
(onActiveIndexChange)="onActiveIndexChange($event)"
[activeIndex]="activeIndex"
[templates]="galleria.templates"
[numVisible]="numVisible"
[responsiveOptions]="galleria.responsiveOptions"
[circular]="galleria.circular"
[isVertical]="isVertical()"
[contentHeight]="galleria.verticalThumbnailViewPortHeight"
[showThumbnailNavigators]="galleria.showThumbnailNavigators"
[slideShowActive]="slideShowActive"
(stopSlideShow)="stopSlideShow()"