primeng
Version:
[](https://badge.fury.io/js/primeng) [](https://www.npmjs.com/package/primeng) [ • 210 kB
JavaScript
import { animate, style, transition, trigger } from '@angular/animations';
import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, HostListener, Inject, Input, NgModule, Output, PLATFORM_ID, ViewChild, ViewEncapsulation, booleanAttribute, numberAttribute } from '@angular/core';
import { PrimeTemplate, SharedModule } from 'primeng/api';
import { DomHandler } from 'primeng/dom';
import { ChevronLeftIcon } from 'primeng/icons/chevronleft';
import { ChevronRightIcon } from 'primeng/icons/chevronright';
import { TimesIcon } from 'primeng/icons/times';
import { WindowMaximizeIcon } from 'primeng/icons/windowmaximize';
import { WindowMinimizeIcon } from 'primeng/icons/windowminimize';
import { RippleModule } from 'primeng/ripple';
import { UniqueComponentId, ZIndexUtils } from 'primeng/utils';
import { FocusTrapModule } from 'primeng/focustrap';
import * as i0 from "@angular/core";
import * as i1 from "primeng/api";
import * as i2 from "@angular/common";
import * as i3 from "primeng/ripple";
import * as i4 from "primeng/focustrap";
/**
* Galleria is an advanced content gallery component.
* @group Components
*/
export class Galleria {
document;
platformId;
element;
cd;
config;
/**
* 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.
* @group Props
*/
showTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
/**
* Transition options of the hide animation.
* @group Props
*/
hideTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
/**
* 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;
}
}
/**
* 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();
mask;
container;
templates;
_visible = false;
_activeIndex = 0;
headerFacet;
footerFacet;
indicatorFacet;
captionFacet;
closeIconTemplate;
previousThumbnailIconTemplate;
nextThumbnailIconTemplate;
itemPreviousIconTemplate;
itemNextIconTemplate;
maskVisible = false;
numVisibleLimit = 0;
constructor(document, platformId, element, cd, config) {
this.document = document;
this.platformId = platformId;
this.element = element;
this.cd = cd;
this.config = config;
}
ngAfterContentInit() {
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;
}
});
}
ngOnChanges(simpleChanges) {
if (simpleChanges.value && simpleChanges.value.currentValue?.length < this.numVisible) {
this.numVisibleLimit = simpleChanges.value.currentValue.length;
}
else {
this.numVisibleLimit = 0;
}
}
onMaskHide() {
this.visible = false;
this.visibleChange.emit(false);
}
onActiveItemChange(index) {
if (this.activeIndex !== index) {
this.activeIndex = index;
this.activeIndexChange.emit(index);
}
}
onAnimationStart(event) {
switch (event.toState) {
case 'visible':
this.enableModality();
setTimeout(() => {
DomHandler.focus(DomHandler.findSingle(this.container.nativeElement, '[data-pc-section="closebutton"]'));
}, 25);
break;
case 'void':
DomHandler.addClass(this.mask?.nativeElement, 'p-component-overlay-leave');
break;
}
}
onAnimationEnd(event) {
switch (event.toState) {
case 'void':
this.disableModality();
break;
}
}
enableModality() {
DomHandler.blockBodyScroll();
this.cd.markForCheck();
if (this.mask) {
ZIndexUtils.set('modal', this.mask.nativeElement, this.baseZIndex || this.config.zIndex.modal);
}
}
disableModality() {
DomHandler.unblockBodyScroll();
this.maskVisible = false;
this.cd.markForCheck();
if (this.mask) {
ZIndexUtils.clear(this.mask.nativeElement);
}
}
ngOnDestroy() {
if (this.fullScreen) {
DomHandler.removeClass(this.document.body, 'p-overflow-hidden');
}
if (this.mask) {
this.disableModality();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: Galleria, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.1", type: Galleria, selector: "p-galleria", inputs: { activeIndex: "activeIndex", fullScreen: ["fullScreen", "fullScreen", booleanAttribute], id: "id", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute], responsiveOptions: "responsiveOptions", showItemNavigators: ["showItemNavigators", "showItemNavigators", booleanAttribute], showThumbnailNavigators: ["showThumbnailNavigators", "showThumbnailNavigators", booleanAttribute], showItemNavigatorsOnHover: ["showItemNavigatorsOnHover", "showItemNavigatorsOnHover", booleanAttribute], changeItemOnIndicatorHover: ["changeItemOnIndicatorHover", "changeItemOnIndicatorHover", booleanAttribute], circular: ["circular", "circular", booleanAttribute], autoPlay: ["autoPlay", "autoPlay", booleanAttribute], shouldStopAutoplayByClick: ["shouldStopAutoplayByClick", "shouldStopAutoplayByClick", booleanAttribute], transitionInterval: ["transitionInterval", "transitionInterval", numberAttribute], showThumbnails: ["showThumbnails", "showThumbnails", booleanAttribute], thumbnailsPosition: "thumbnailsPosition", verticalThumbnailViewPortHeight: "verticalThumbnailViewPortHeight", showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showIndicatorsOnItem: ["showIndicatorsOnItem", "showIndicatorsOnItem", booleanAttribute], indicatorsPosition: "indicatorsPosition", baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], maskClass: "maskClass", containerClass: "containerClass", containerStyle: "containerStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", visible: "visible" }, outputs: { activeIndexChange: "activeIndexChange", visibleChange: "visibleChange" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
<div *ngIf="fullScreen; else windowed" #container>
<div
*ngIf="maskVisible"
#mask
[ngClass]="{ 'p-galleria-mask p-component-overlay p-component-overlay-enter': true, 'p-galleria-visible': this.visible }"
[class]="maskClass"
[attr.role]="fullScreen ? 'dialog' : 'region'"
[attr.aria-modal]="fullScreen ? 'true' : undefined"
>
<p-galleriaContent
*ngIf="visible"
[@animation]="{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }"
(@animation.start)="onAnimationStart($event)"
(@animation.done)="onAnimationEnd($event)"
[value]="value"
[activeIndex]="activeIndex"
[numVisible]="numVisibleLimit || numVisible"
(maskHide)="onMaskHide()"
(activeItemChange)="onActiveItemChange($event)"
[ngStyle]="containerStyle"
[fullScreen]="fullScreen"
></p-galleriaContent>
</div>
</div>
<ng-template #windowed>
<p-galleriaContent [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></p-galleriaContent>
</ng-template>
`, isInline: true, styles: ["@layer primeng{.p-galleria-content{display:flex;flex-direction:column}.p-galleria-item-wrapper{display:flex;flex-direction:column;position:relative}.p-galleria-item-container{position:relative;display:flex;height:100%}.p-galleria-item-nav{position:absolute;top:50%;margin-top:-.5rem;display:inline-flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-item-prev{left:0;border-top-left-radius:0;border-bottom-left-radius:0}.p-galleria-item-next{right:0;border-top-right-radius:0;border-bottom-right-radius:0}.p-galleria-item{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.p-galleria-item-nav-onhover .p-galleria-item-nav{pointer-events:none;opacity:0;transition:opacity .2s ease-in-out}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav,.p-galleria-item-nav-onhover .p-galleria-item-nav-focused{pointer-events:all;opacity:1}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled{pointer-events:none}.p-galleria-caption{position:absolute;bottom:0;left:0;width:100%}.p-galleria-thumbnail-wrapper{display:flex;flex-direction:column;overflow:auto;flex-shrink:0}.p-galleria-thumbnail-prev,.p-galleria-thumbnail-next{align-self:center;flex:0 0 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-galleria-thumbnail-prev span,.p-galleria-thumbnail-next span{display:flex;justify-content:center;align-items:center}.p-galleria-thumbnail-container{display:flex;flex-direction:row}.p-galleria-thumbnail-items-container{overflow:hidden;width:100%}.p-galleria-thumbnail-items{display:flex}.p-galleria-thumbnail-item{overflow:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.5}.p-galleria-thumbnail-item:hover{opacity:1;transition:opacity .3s}.p-galleria-thumbnail-item-current{opacity:1}.p-galleria-thumbnails-left .p-galleria-content,.p-galleria-thumbnails-right .p-galleria-content,.p-galleria-thumbnails-left .p-galleria-item-wrapper,.p-galleria-thumbnails-right .p-galleria-item-wrapper{flex-direction:row}.p-galleria-thumbnails-left p-galleriaitem,.p-galleria-thumbnails-top p-galleriaitem{order:2}.p-galleria-thumbnails-left p-galleriathumbnails,.p-galleria-thumbnails-top p-galleriathumbnails{order:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-container,.p-galleria-thumbnails-right .p-galleria-thumbnail-container{flex-direction:column;flex-grow:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-items,.p-galleria-thumbnails-right .p-galleria-thumbnail-items{flex-direction:column;height:100%}.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,.p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper{height:100%}.p-galleria-indicators{display:flex;align-items:center;justify-content:center}.p-galleria-indicator>button{display:inline-flex;align-items:center}.p-galleria-indicators-left .p-galleria-item-wrapper,.p-galleria-indicators-right .p-galleria-item-wrapper{flex-direction:row;align-items:center}.p-galleria-indicators-left .p-galleria-item-container,.p-galleria-indicators-top .p-galleria-item-container{order:2}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-top .p-galleria-indicators{order:1}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-right .p-galleria-indicators{flex-direction:column}.p-galleria-indicator-onitem .p-galleria-indicators{position:absolute;display:flex;z-index:1}.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators{top:0;left:0;width:100%;align-items:flex-start}.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators{right:0;top:0;height:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators{bottom:0;left:0;width:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators{left:0;top:0;height:100%;align-items:flex-start}.p-galleria-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:transparent;transition-property:background-color}.p-galleria-close{position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-mask .p-galleria-item-nav{position:fixed;top:50%;margin-top:-.5rem}.p-galleria-mask.p-galleria-mask-leave{background-color:transparent}.p-items-hidden .p-galleria-thumbnail-item{visibility:hidden}.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active{visibility:visible}}\n"], 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: "component", type: i0.forwardRef(() => GalleriaContent), selector: "p-galleriaContent", inputs: ["activeIndex", "value", "numVisible", "fullScreen"], outputs: ["maskHide", "activeItemChange"] }], animations: [
trigger('animation', [
transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])
])
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: Galleria, decorators: [{
type: Component,
args: [{ selector: 'p-galleria', template: `
<div *ngIf="fullScreen; else windowed" #container>
<div
*ngIf="maskVisible"
#mask
[ngClass]="{ 'p-galleria-mask p-component-overlay p-component-overlay-enter': true, 'p-galleria-visible': this.visible }"
[class]="maskClass"
[attr.role]="fullScreen ? 'dialog' : 'region'"
[attr.aria-modal]="fullScreen ? 'true' : undefined"
>
<p-galleriaContent
*ngIf="visible"
[@animation]="{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }"
(@animation.start)="onAnimationStart($event)"
(@animation.done)="onAnimationEnd($event)"
[value]="value"
[activeIndex]="activeIndex"
[numVisible]="numVisibleLimit || numVisible"
(maskHide)="onMaskHide()"
(activeItemChange)="onActiveItemChange($event)"
[ngStyle]="containerStyle"
[fullScreen]="fullScreen"
></p-galleriaContent>
</div>
</div>
<ng-template #windowed>
<p-galleriaContent [value]="value" [activeIndex]="activeIndex" [numVisible]="numVisibleLimit || numVisible" (activeItemChange)="onActiveItemChange($event)"></p-galleriaContent>
</ng-template>
`, animations: [
trigger('animation', [
transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])
])
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
class: 'p-element'
}, styles: ["@layer primeng{.p-galleria-content{display:flex;flex-direction:column}.p-galleria-item-wrapper{display:flex;flex-direction:column;position:relative}.p-galleria-item-container{position:relative;display:flex;height:100%}.p-galleria-item-nav{position:absolute;top:50%;margin-top:-.5rem;display:inline-flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-item-prev{left:0;border-top-left-radius:0;border-bottom-left-radius:0}.p-galleria-item-next{right:0;border-top-right-radius:0;border-bottom-right-radius:0}.p-galleria-item{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.p-galleria-item-nav-onhover .p-galleria-item-nav{pointer-events:none;opacity:0;transition:opacity .2s ease-in-out}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav,.p-galleria-item-nav-onhover .p-galleria-item-nav-focused{pointer-events:all;opacity:1}.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled{pointer-events:none}.p-galleria-caption{position:absolute;bottom:0;left:0;width:100%}.p-galleria-thumbnail-wrapper{display:flex;flex-direction:column;overflow:auto;flex-shrink:0}.p-galleria-thumbnail-prev,.p-galleria-thumbnail-next{align-self:center;flex:0 0 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-galleria-thumbnail-prev span,.p-galleria-thumbnail-next span{display:flex;justify-content:center;align-items:center}.p-galleria-thumbnail-container{display:flex;flex-direction:row}.p-galleria-thumbnail-items-container{overflow:hidden;width:100%}.p-galleria-thumbnail-items{display:flex}.p-galleria-thumbnail-item{overflow:auto;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.5}.p-galleria-thumbnail-item:hover{opacity:1;transition:opacity .3s}.p-galleria-thumbnail-item-current{opacity:1}.p-galleria-thumbnails-left .p-galleria-content,.p-galleria-thumbnails-right .p-galleria-content,.p-galleria-thumbnails-left .p-galleria-item-wrapper,.p-galleria-thumbnails-right .p-galleria-item-wrapper{flex-direction:row}.p-galleria-thumbnails-left p-galleriaitem,.p-galleria-thumbnails-top p-galleriaitem{order:2}.p-galleria-thumbnails-left p-galleriathumbnails,.p-galleria-thumbnails-top p-galleriathumbnails{order:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-container,.p-galleria-thumbnails-right .p-galleria-thumbnail-container{flex-direction:column;flex-grow:1}.p-galleria-thumbnails-left .p-galleria-thumbnail-items,.p-galleria-thumbnails-right .p-galleria-thumbnail-items{flex-direction:column;height:100%}.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,.p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper{height:100%}.p-galleria-indicators{display:flex;align-items:center;justify-content:center}.p-galleria-indicator>button{display:inline-flex;align-items:center}.p-galleria-indicators-left .p-galleria-item-wrapper,.p-galleria-indicators-right .p-galleria-item-wrapper{flex-direction:row;align-items:center}.p-galleria-indicators-left .p-galleria-item-container,.p-galleria-indicators-top .p-galleria-item-container{order:2}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-top .p-galleria-indicators{order:1}.p-galleria-indicators-left .p-galleria-indicators,.p-galleria-indicators-right .p-galleria-indicators{flex-direction:column}.p-galleria-indicator-onitem .p-galleria-indicators{position:absolute;display:flex;z-index:1}.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators{top:0;left:0;width:100%;align-items:flex-start}.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators{right:0;top:0;height:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators{bottom:0;left:0;width:100%;align-items:flex-end}.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators{left:0;top:0;height:100%;align-items:flex-start}.p-galleria-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:transparent;transition-property:background-color}.p-galleria-close{position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;overflow:hidden}.p-galleria-mask .p-galleria-item-nav{position:fixed;top:50%;margin-top:-.5rem}.p-galleria-mask.p-galleria-mask-leave{background-color:transparent}.p-items-hidden .p-galleria-thumbnail-item{visibility:hidden}.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active{visibility:visible}}\n"] }]
}], ctorParameters: () => [{ type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.PrimeNGConfig }], 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
}], visible: [{
type: Input
}], activeIndexChange: [{
type: Output
}], visibleChange: [{
type: Output
}], mask: [{
type: ViewChild,
args: ['mask']
}], container: [{
type: ViewChild,
args: ['container']
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
export class GalleriaContent {
galleria;
cd;
differs;
config;
elementRef;
get activeIndex() {
return this._activeIndex;
}
set activeIndex(activeIndex) {
this._activeIndex = activeIndex;
}
value = [];
numVisible;
fullScreen;
maskHide = new EventEmitter();
activeItemChange = new EventEmitter();
closeButton;
id;
_activeIndex = 0;
slideShowActive = true;
interval;
styleClass;
differ;
constructor(galleria, cd, differs, config, elementRef) {
this.galleria = galleria;
this.cd = cd;
this.differs = differs;
this.config = config;
this.elementRef = elementRef;
this.id = this.galleria.id || UniqueComponentId();
this.differ = this.differs.find(this.galleria).create();
}
// For custom fullscreen
handleFullscreenChange(event) {
if (document?.fullscreenElement === this.elementRef.nativeElement?.children[0]) {
this.fullScreen = true;
}
else {
this.fullScreen = false;
}
}
ngDoCheck() {
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();
}
}
}
galleriaClass() {
const thumbnailsPosClass = this.galleria.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.galleria.thumbnailsPosition);
const indicatorPosClass = this.galleria.showIndicators && this.getPositionClass('p-galleria-indicators', this.galleria.indicatorsPosition);
return (this.galleria.containerClass ? this.galleria.containerClass + ' ' : '') + (thumbnailsPosClass ? thumbnailsPosClass + ' ' : '') + (indicatorPosClass ? indicatorPosClass + ' ' : '');
}
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;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i1.PrimeNGConfig }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.1", type: GalleriaContent, selector: "p-galleriaContent", inputs: { activeIndex: "activeIndex", value: "value", numVisible: ["numVisible", "numVisible", numberAttribute], fullScreen: ["fullScreen", "fullScreen", booleanAttribute] }, outputs: { maskHide: "maskHide", activeItemChange: "activeItemChange" }, host: { listeners: { "document:fullscreenchange": "handleFullscreenChange($event)" } }, viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: `
<div
[attr.id]="id"
[attr.role]="'region'"
*ngIf="value && value.length > 0"
[ngClass]="{
'p-galleria p-component': true,
'p-galleria-fullscreen': this.galleria.fullScreen,
'p-galleria-indicator-onitem': this.galleria.showIndicatorsOnItem,
'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen
}"
[ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}"
[class]="galleriaClass()"
pFocusTrap
[pFocusTrapDisabled]="!fullScreen"
>
<button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
<TimesIcon *ngIf="!galleria.closeIconTemplate" [styleClass]="'p-galleria-close-icon'" />
<ng-template *ngTemplateOutlet="galleria.closeIconTemplate"></ng-template>
</button>
<div *ngIf="galleria.templates && galleria.headerFacet" class="p-galleria-header">
<p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
</div>
<div class="p-galleria-content" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
<p-galleriaItem
[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()"
></p-galleriaItem>
<p-galleriaThumbnails
*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()"
></p-galleriaThumbnails>
</div>
<div *ngIf="galleria.templates && galleria.footerFacet" class="p-galleria-footer">
<p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
</div>
</div>
`, 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.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i3.Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "directive", type: i0.forwardRef(() => i4.FocusTrap), selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItemSlot), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }, { kind: "component", type: i0.forwardRef(() => GalleriaItem), selector: "p-galleriaItem", inputs: ["id", "circular", "value", "showItemNavigators", "showIndicators", "slideShowActive", "changeItemOnIndicatorHover", "autoPlay", "templates", "indicatorFacet", "captionFacet", "activeIndex"], outputs: ["startSlideShow", "stopSlideShow", "onActiveIndexChange"] }, { kind: "component", type: i0.forwardRef(() => GalleriaThumbnails), selector: "p-galleriaThumbnails", 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: "18.0.1", ngImport: i0, type: GalleriaContent, decorators: [{
type: Component,
args: [{
selector: 'p-galleriaContent',
template: `
<div
[attr.id]="id"
[attr.role]="'region'"
*ngIf="value && value.length > 0"
[ngClass]="{
'p-galleria p-component': true,
'p-galleria-fullscreen': this.galleria.fullScreen,
'p-galleria-indicator-onitem': this.galleria.showIndicatorsOnItem,
'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen
}"
[ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}"
[class]="galleriaClass()"
pFocusTrap
[pFocusTrapDisabled]="!fullScreen"
>
<button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
<TimesIcon *ngIf="!galleria.closeIconTemplate" [styleClass]="'p-galleria-close-icon'" />
<ng-template *ngTemplateOutlet="galleria.closeIconTemplate"></ng-template>
</button>
<div *ngIf="galleria.templates && galleria.headerFacet" class="p-galleria-header">
<p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
</div>
<div class="p-galleria-content" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
<p-galleriaItem
[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()"
></p-galleriaItem>
<p-galleriaThumbnails
*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()"
></p-galleriaThumbnails>
</div>
<div *ngIf="galleria.templates && galleria.footerFacet" class="p-galleria-footer">
<p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: () => [{ type: Galleria }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i1.PrimeNGConfig }, { type: i0.ElementRef }], propDecorators: { activeIndex: [{
type: Input
}], value: [{
type: Input
}], numVisible: [{
type: Input,
args: [{ transform: numberAttribute }]
}], fullScreen: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], maskHide: [{
type: Output
}], activeItemChange: [{
type: Output
}], closeButton: [{
type: ViewChild,
args: ['closeButton']
}], handleFullscreenChange: [{
type: HostListener,
args: ['document:fullscreenchange', ['$event']]
}] } });
export class GalleriaItemSlot {
templates;
index;
get item() {
return this._item;
}
set item(item) {
this._item = item;
if (this.templates) {
this.templates.forEach((item) => {
if (item.getType() === this.type) {
switch (this.type) {
case 'item':
case 'caption':
case 'thumbnail':
this.context = { $implicit: this.item };
this.contentTemplate = item.template;
break;
}
}
});
}
}
type;
contentTemplate;
context;
_item;
ngAfterContentInit() {
this.templates?.forEach((item) => {
if (item.getType() === this.type) {
switch (this.type) {
case 'item':
case 'caption':
case 'thumbnail':
this.context = { $implicit: this.item };
this.contentTemplate = item.template;
break;
case 'indicator':
this.context = { $implicit: this.index };
this.contentTemplate = item.template;
break;
default:
this.context = {};
this.contentTemplate = item.template;
break;
}
}
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: GalleriaItemSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.1", type: GalleriaItemSlot, selector: "p-galleriaItemSlot", inputs: { templates: "templates", index: ["index", "index", numberAttribute], item: "item", type: "type" }, ngImport: i0, template: `
<ng-container *ngIf="contentTemplate">
<ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: GalleriaItemSlot, decorators: [{
type: Component,
args: [{
selector: 'p-galleriaItemSlot',
template: `
<ng-container *ngIf="contentTemplate">
<ng-container *ngTemplateOutlet="contentTemplate; context: context"></ng-container>
</ng-container>
`,
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], propDecorators: { templates: [{
type: Input
}], index: [{
type: Input,
args: [{ transform: numberAttribute }]
}], item: [{
type: Input
}], type: [{
type: Input
}] } });
export class GalleriaItem {
galleria;
id;
circular = false;
value;
showItemNavigators = false;
showIndicators = true;
slideShowActive = true;
changeItemOnIndicatorHover = true;
autoPlay = false;
templates;
indicatorFacet;
captionFacet;
startSlideShow = new EventEmitter();
stopSlideShow = new EventEmitter();
onActiveIndexChange = new EventEmitter();
get activeIndex() {
return this._activeIndex;
}
set activeIndex(activeIndex) {
this._activeIndex = activeIndex;
}
get activeItem() {
return this.value && this.value[this._activeIndex];
}
_activeIndex = 0;
leftButtonFocused = false;
rightButtonFocused = false;
constructor(galleria) {
this.galleria = galleria;
}
ngOnChanges({ autoPlay }) {
if (autoPlay?.currentValue) {
this.startSlideShow.emit();
}
if (autoPlay && autoPlay.currentValue === false) {
this.stopTheSlideShow();
}
}
next() {
let nextItemIndex = this.activeIndex + 1;
let activeIndex = this.circular && this.value.length - 1 === this.activeIndex ? 0 : nextItemIndex;
this.onActiveIndexChange.emit(activeIndex);
}
prev() {
let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;
let activeIndex = this.circular && this.activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
this.onActiveIndexChange.emit(activeIndex);
}
onButtonFocus(pos) {
if (pos === 'left') {
this.leftButtonFocused = true;
}
else
this.rightButtonFocused = true;
}
onButtonBlur(pos) {
if (pos === 'left') {
this.leftButtonFocused = false;
}
else
this.rightButtonFocused = false;
}
stopTheSlideShow() {
if (this.slideShowActive && this.stopSlideShow) {
this.stopSlideShow.emit();
}
}
navForward(e) {
this.stopTheSlideShow();
this.next();
if (e && e.cancelable) {
e.preventDefault();
}
}
navBackward(e) {
this.stopTheSlideShow();
this.prev();
if (e && e.cancelable) {
e.preventDefault();
}
}
onIndicatorClick(index) {
this.stopTheSlideShow();
this.onActiveIndexChange.emit(index);
}
onIndicatorMouseEnter(index) {
if (this.changeItemOnIndicatorHover) {
this.stopTheSlideShow();
this.onActiveIndexChange.emit(index);
}
}
onIndicatorKeyDown(event, index) {
switch (event.code) {
case 'Enter':
case 'Space':
this.stopTheSlideShow();
this.onActiveIndexChange.emit(index);
event.preventDefault();
break;
case 'ArrowDown':
case 'ArrowUp':
event.preventDefault();
break;
default:
break;
}
}
isNavForwardDisabled() {
return !this.circular && this.activeIndex === this.value.length - 1;
}
isNavBackwardDisabled() {
return !this.circular && this.activeIndex === 0;
}
isIndicatorItemActive(index) {
return this.activeIndex === index;
}
ariaSlideLabel() {
return this.galleria.config.translation.aria ? this.galleria.config.translati